SlideShare une entreprise Scribd logo
1  sur  13
Spice Up Your Web! Date	: Wed, 21 Jul 2010 Time	: 1500 – 1600 Venue	: Training Room (Level 5)  Objectives:  ,[object Object]
 Creates hyperlinks, tables and applies colors.
 Manipulates images for web usage
 Uses and embeds widgets
 Understands the pitfalls of excessive web design,[object Object]
Hyperlinks Target attribute “_blank” Open link in a new window “_parent” Open link in a parent window “_self” Open link in the same frame as it was clicked (this is default) “_top” Open link in the full body of the window “frame name” in a named frame Accesskey attribute Specifies a keyboard shortcut to access an element
Hyperlinks ,[object Object]
Use mailto
Other options of email link:
CC
BCC
Subject
Body,[object Object]

Contenu connexe

Similaire à Basic web design

Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
Web Design Unit.doc
Web Design Unit.docWeb Design Unit.doc
Web Design Unit.doc
butest
 
Cis145 03 configuring-withcss
Cis145 03 configuring-withcssCis145 03 configuring-withcss
Cis145 03 configuring-withcss
Nicole77777
 
Nvu tutorial1 1
Nvu tutorial1 1Nvu tutorial1 1
Nvu tutorial1 1
RJOROZCO
 
Accessibility in Practice: Integrating Web Accessibility into Cascade Training
Accessibility in Practice:  Integrating Web Accessibility into Cascade TrainingAccessibility in Practice:  Integrating Web Accessibility into Cascade Training
Accessibility in Practice: Integrating Web Accessibility into Cascade Training
hannonhill
 
photoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorialphotoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorial
tutorialsruby
 
photoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorialphotoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorial
tutorialsruby
 

Similaire à Basic web design (20)

Drupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-ThemeDrupalcamp Atlanta 2010 Design-to-Theme
Drupalcamp Atlanta 2010 Design-to-Theme
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site Design
 
Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1
 
Web Design Unit.doc
Web Design Unit.docWeb Design Unit.doc
Web Design Unit.doc
 
Basic html tutoirialp2
Basic html tutoirialp2Basic html tutoirialp2
Basic html tutoirialp2
 
Cis145 03 configuring-withcss
Cis145 03 configuring-withcssCis145 03 configuring-withcss
Cis145 03 configuring-withcss
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dw Lesson01
Dw Lesson01Dw Lesson01
Dw Lesson01
 
Nvu tutorial1 1
Nvu tutorial1 1Nvu tutorial1 1
Nvu tutorial1 1
 
Accessibility in Practice: Integrating Web Accessibility into Cascade Training
Accessibility in Practice:  Integrating Web Accessibility into Cascade TrainingAccessibility in Practice:  Integrating Web Accessibility into Cascade Training
Accessibility in Practice: Integrating Web Accessibility into Cascade Training
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
A new look for e4
A new look for e4A new look for e4
A new look for e4
 
Competencies to do in class
Competencies to do in classCompetencies to do in class
Competencies to do in class
 
Le Wagon - Landing page
Le Wagon - Landing pageLe Wagon - Landing page
Le Wagon - Landing page
 
Real Estate in Hyderabad
Real Estate in HyderabadReal Estate in Hyderabad
Real Estate in Hyderabad
 
Dreamweaver Ch03
Dreamweaver Ch03Dreamweaver Ch03
Dreamweaver Ch03
 
photoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorialphotoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorial
 
photoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorialphotoshop-cs3-border-bg-tutorial
photoshop-cs3-border-bg-tutorial
 
Dw cs3-introduction
Dw cs3-introductionDw cs3-introduction
Dw cs3-introduction
 
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
 

Dernier

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Dernier (20)

TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 

Basic web design

  • 1.
  • 2. Creates hyperlinks, tables and applies colors.
  • 3. Manipulates images for web usage
  • 4. Uses and embeds widgets
  • 5.
  • 6. Hyperlinks Target attribute “_blank” Open link in a new window “_parent” Open link in a parent window “_self” Open link in the same frame as it was clicked (this is default) “_top” Open link in the full body of the window “frame name” in a named frame Accesskey attribute Specifies a keyboard shortcut to access an element
  • 7.
  • 9. Other options of email link:
  • 10. CC
  • 11. BCC
  • 13.
  • 14. Colors Color chooser http://libapp/test/dwtraining/colors.html http://www.colorschemer.com/online.html http://cloford.com/resources/colours/500col.htm
  • 15. Embed videos and widgets YouTube Videos example: http://www.youtube.com/watch?v=Mwbw9KF-ACY AddThis Button http://www.addthis.com/ SlideShare http://www.slideshare.net/ Widgetbox http://www.widgetbox.com/
  • 16. Image manipulator Picnik http://www.picnik.com/app#/home/welcome
  • 17. Website Design Experience Horizontal attention distribution Left half of screen: 69% of viewing time Right half of screen: 30% of viewing time
  • 18. Website Design Experience Horizontal attention distribution
  • 19. Website Design Experience Good example http://www.dbs.com.sg Bad Example Text size & color problem: http://www.thomasedison.org/   Navigation problem: http://lesailes.hermes.com/na/en/   Layout problem: http://www.msy.com.au/   Excessive links: http://www.teacherxpress.com/
  • 20. Other Tips Always think about the users Fast load, users do not want to wait. A standard web page should not more then 60KB. It should take less then 15 seconds. Study HTML. Coding some times faster then drawing. Use standard fonts. Listen to the feedback.
  • 21. Other Tips Do Not make page to wide. Users do not want to use horizontal scrolling. Do Not put long paragraph in page. Use PDF to let user read it off line. Do not use blinking text.