Suche senden
Hochladen
Chapter 6 - Web Design
•
Als PPT, PDF herunterladen
•
0 gefällt mir
•
3,316 views
T
tclanton4
Folgen
Chapter 6 Presentation -- Web Design
Weniger lesen
Mehr lesen
Bildung
Technologie
Design
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 31
Jetzt herunterladen
Empfohlen
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Â
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Â
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Â
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Â
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Â
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Â
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Â
Chapter11
Chapter11
DeAnna Gossett
Â
Empfohlen
Chapter 5 - Web Design
Chapter 5 - Web Design
tclanton4
Â
Chapter 4 - Web Design
Chapter 4 - Web Design
tclanton4
Â
Chapter 3 - Web Design
Chapter 3 - Web Design
tclanton4
Â
Chapter 11 - Web Design
Chapter 11 - Web Design
tclanton4
Â
Chapter 7 - Web Design
Chapter 7 - Web Design
tclanton4
Â
Chapter 13 - Web Design
Chapter 13 - Web Design
tclanton4
Â
Chapter 14 - Web Design
Chapter 14 - Web Design
tclanton4
Â
Chapter11
Chapter11
DeAnna Gossett
Â
Chapter5
Chapter5
DeAnna Gossett
Â
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Â
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Â
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Â
How websites and search engines work
How websites and search engines work
Brian Duffy
Â
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
Â
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
Â
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ottergoose
Â
Introduction to web design
Introduction to web design
Umamaheshwariv1
Â
Introduction to-concrete-5
Introduction to-concrete-5
ketanraval
Â
Introduction to-concrete-5
Introduction to-concrete-5
Ketan Raval
Â
Introduction to web design
Introduction to web design
Sumit Tambe
Â
Introduction to web design
Introduction to web design
websitedevelopmentcompany
Â
Introduction to web design
Introduction to web design
akhileshraj23
Â
Internet Librarian Slides
Internet Librarian Slides
Polly Farrington
Â
World wide web with multimedia
World wide web with multimedia
Afaq Siddiqui
Â
Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)
SARAVANAN RAMAOORTHY
Â
Website development accessibility
Website development accessibility
Ilesh Mistry
Â
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
Jeff Wood
Â
Html 4.0
Html 4.0
waynet20
Â
Chapter6
Chapter6
DeAnna Gossett
Â
Chapter7
Chapter7
DeAnna Gossett
Â
Weitere ähnliche Inhalte
Was ist angesagt?
Chapter5
Chapter5
DeAnna Gossett
Â
Chapter 10 - Web Design
Chapter 10 - Web Design
tclanton4
Â
Chapter 1 - Web Design
Chapter 1 - Web Design
tclanton4
Â
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Ames
Â
How websites and search engines work
How websites and search engines work
Brian Duffy
Â
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Svetlin Nakov
Â
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
Â
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Ottergoose
Â
Introduction to web design
Introduction to web design
Umamaheshwariv1
Â
Introduction to-concrete-5
Introduction to-concrete-5
ketanraval
Â
Introduction to-concrete-5
Introduction to-concrete-5
Ketan Raval
Â
Introduction to web design
Introduction to web design
Sumit Tambe
Â
Introduction to web design
Introduction to web design
websitedevelopmentcompany
Â
Introduction to web design
Introduction to web design
akhileshraj23
Â
Internet Librarian Slides
Internet Librarian Slides
Polly Farrington
Â
World wide web with multimedia
World wide web with multimedia
Afaq Siddiqui
Â
Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)
SARAVANAN RAMAOORTHY
Â
Website development accessibility
Website development accessibility
Ilesh Mistry
Â
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
Jeff Wood
Â
Html 4.0
Html 4.0
waynet20
Â
Was ist angesagt?
(20)
Chapter5
Chapter5
Â
Chapter 10 - Web Design
Chapter 10 - Web Design
Â
Chapter 1 - Web Design
Chapter 1 - Web Design
Â
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Â
How websites and search engines work
How websites and search engines work
Â
Creating WordPress Sites in 2 Hours
Creating WordPress Sites in 2 Hours
Â
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
Â
Building a Simple, Responsive Website with ExpressionEngine
Building a Simple, Responsive Website with ExpressionEngine
Â
Introduction to web design
Introduction to web design
Â
Introduction to-concrete-5
Introduction to-concrete-5
Â
Introduction to-concrete-5
Introduction to-concrete-5
Â
Introduction to web design
Introduction to web design
Â
Introduction to web design
Introduction to web design
Â
Introduction to web design
Introduction to web design
Â
Internet Librarian Slides
Internet Librarian Slides
Â
World wide web with multimedia
World wide web with multimedia
Â
Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)
Â
Website development accessibility
Website development accessibility
Â
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
Â
Html 4.0
Html 4.0
Â
Ă„hnlich wie Chapter 6 - Web Design
Chapter6
Chapter6
DeAnna Gossett
Â
Chapter7
Chapter7
DeAnna Gossett
Â
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
Â
Web Development 4
Web Development 4
ghayour abbas
Â
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
ghayour abbas
Â
Intro to CSS
Intro to CSS
Randy Oest II
Â
Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4
UXPA International
Â
CSS Basics
CSS Basics
WordPress Memphis
Â
Chapter4
Chapter4
DeAnna Gossett
Â
Web Typography
Web Typography
Shawn Calvert
Â
Introduction to css by programmerblog.net
Introduction to css by programmerblog.net
Programmer Blog
Â
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
Grayzon Gonzales, LPT
Â
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
Â
Html5
Html5
Bukhtawar Umbreen
Â
Html5 ux london
Html5 ux london
Todd Zaki Warfel
Â
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
Â
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
Â
BYOWHC823
BYOWHC823
Thinkful
Â
CSS Walktrough Internship Course
CSS Walktrough Internship Course
Zoltan Iszlai
Â
Css tutorial
Css tutorial
vedaste
Â
Ă„hnlich wie Chapter 6 - Web Design
(20)
Chapter6
Chapter6
Â
Chapter7
Chapter7
Â
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Â
Web Development 4
Web Development 4
Â
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
Â
Intro to CSS
Intro to CSS
Â
Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4
Â
CSS Basics
CSS Basics
Â
Chapter4
Chapter4
Â
Web Typography
Web Typography
Â
Introduction to css by programmerblog.net
Introduction to css by programmerblog.net
Â
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
Â
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Â
Html5
Html5
Â
Html5 ux london
Html5 ux london
Â
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Â
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Â
BYOWHC823
BYOWHC823
Â
CSS Walktrough Internship Course
CSS Walktrough Internship Course
Â
Css tutorial
Css tutorial
Â
Mehr von tclanton4
Chapter 12 - Web Design
Chapter 12 - Web Design
tclanton4
Â
Chapter 9 - Web Design
Chapter 9 - Web Design
tclanton4
Â
Chapter 8 - Web Design
Chapter 8 - Web Design
tclanton4
Â
Base2
Base2
tclanton4
Â
Base1
Base1
tclanton4
Â
Impress
Impress
tclanton4
Â
Project Mgt
Project Mgt
tclanton4
Â
Charts in Calc
Charts in Calc
tclanton4
Â
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
tclanton4
Â
Creating a Worksheet in Calc
Creating a Worksheet in Calc
tclanton4
Â
Advanced Features of Writer
Advanced Features of Writer
tclanton4
Â
Creating a Writer Document
Creating a Writer Document
tclanton4
Â
Formatting Features of Writer
Formatting Features of Writer
tclanton4
Â
Getting Started - The Basics
Getting Started - The Basics
tclanton4
Â
Intro to Information Systems
Intro to Information Systems
tclanton4
Â
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
tclanton4
Â
Mehr von tclanton4
(16)
Chapter 12 - Web Design
Chapter 12 - Web Design
Â
Chapter 9 - Web Design
Chapter 9 - Web Design
Â
Chapter 8 - Web Design
Chapter 8 - Web Design
Â
Base2
Base2
Â
Base1
Base1
Â
Impress
Impress
Â
Project Mgt
Project Mgt
Â
Charts in Calc
Charts in Calc
Â
Formatting a Worksheet in Calc
Formatting a Worksheet in Calc
Â
Creating a Worksheet in Calc
Creating a Worksheet in Calc
Â
Advanced Features of Writer
Advanced Features of Writer
Â
Creating a Writer Document
Creating a Writer Document
Â
Formatting Features of Writer
Formatting Features of Writer
Â
Getting Started - The Basics
Getting Started - The Basics
Â
Intro to Information Systems
Intro to Information Systems
Â
Unit 04 PowerPoint (WebA)
Unit 04 PowerPoint (WebA)
Â
KĂĽrzlich hochgeladen
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
KayeClaireEstoconing
Â
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
Celine George
Â
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
Dr. Mazin Mohamed alkathiri
Â
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
Ashokrao Mane college of Pharmacy Peth-Vadgaon
Â
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
Conquiztadors- the Quiz Society of Sri Venkateswara College
Â
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
SpandanaRallapalli
Â
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
TechSoup
Â
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Â
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
thorishapillay1
Â
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
Mark Reed
Â
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Carlos105
Â
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
Celine George
Â
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
Conquiztadors- the Quiz Society of Sri Venkateswara College
Â
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
Dr.Ibrahim Hassaan
Â
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
Humphrey A Beña
Â
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Sarwono Sutikno, Dr.Eng.,CISA,CISSP,CISM,CSX-F
Â
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Mr Bounab Samir
Â
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
Celine George
Â
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
Anupkumar Sharma
Â
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
JoshuaGantuangco2
Â
KĂĽrzlich hochgeladen
(20)
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
Â
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
Â
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
Â
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
Â
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
Â
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
Â
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Â
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Â
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
Â
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
Â
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Â
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
Â
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
Â
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
Â
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
Â
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Â
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Like-prefer-love -hate+verb+ing & silent letters & citizenship text.pdf
Â
Difference Between Search & Browse Methods in Odoo 17
Difference Between Search & Browse Methods in Odoo 17
Â
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
Â
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
Â
Chapter 6 - Web Design
1.
Copyright © Terry
Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1Copyright © Terry Felke-Morris
2.
Copyright © Terry
Felke-Morris LEARNING OUTCOMES In this chapter, you will learn how to ... ď‚„ Describe and apply the CSS Box Model ď‚„ Configure margin with CSS ď‚„ Configure float with CSS ď‚„ Configure relative and absolute positioning with CSS ď‚„ Create two-column page layouts using CSS ď‚„ Configure navigation in unordered lists and style with CSS ď‚„ Add interactivity to hyperlinks with CSS pseudo-classes ď‚„ Configure web pages with HTML5 structural elements, including section, header, hgroup, nav, aside, and footer 2
3.
Copyright © Terry
Felke-Morris THE BOX MODEL ď‚„ Content ď‚„ Text & web page elements in the container ď‚„ Padding ď‚„ Area between the content and the border ď‚„ Border ď‚„ Between the padding and the margin ď‚„ Margin ď‚„ Determines the empty space between the element and adjacent elements 3
4.
Copyright © Terry
Felke-Morris CONFIGURE MARGIN WITH CSS ď‚„ The margin property ď‚„ Related properties: ď‚„ margin-top, margin-right, margin-left, margin-bottom ď‚„ Configures empty space between the element and adjacent elements ď‚„ Syntax examples h1 { margin: 0; } h1 { margin: 20px 10px; } h1 { margin: 10px 30px 20px; } h1 { margin: 20px 30px 0 30px; }
5.
Copyright © Terry
Felke-Morris CONFIGURE PADDING WITH CSS ď‚„ The padding property ď‚„ Related properties: ď‚„ padding-top, padding-right, padding-left, padding-bottom ď‚„ Configures empty space between the content of the HTML element (such as text) and the border ď‚„ Syntax examples h1 { padding: 0; } h1 { padding : 20px 10px; } h1 { padding : 10px 30px 20px; } h1 { padding : 20px 30px 0 30px; }
6.
Copyright © Terry
Felke-Morris BOX MODEL IN ACTION 6
7.
Copyright © Terry
Felke-Morris NORMAL FLOW ď‚„ Browser display of elements in the order they are coded in the Web page document
8.
Copyright © Terry
Felke-Morris RELATIVE POSITIONING Changes the location of an element in relation to where it would otherwise appear 8 h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; } h1 { background-color:#cccccc; padding: 5px; color: #000000; } #myContent { position: relative; left: 30px; font-family: Arial,sans-serif; }
9.
Copyright © Terry
Felke-Morris ABSOLUTE POSITIONING Precisely specifies the location of an element in the browser window h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; } h1 { background-color: #cccccc; padding: 5px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial,sans-serif; width: 300; } 9
10.
Copyright © Terry
Felke-Morris ABSOLUTE POSITIONING EXAMPLE
11.
Copyright © Terry
Felke-Morris h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; } FLOAT PROPERTY  Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property. 11
12.
Copyright © Terry
Felke-Morris CLEAR PROPERTY  Useful to “clear” or terminate a float  Values are left, right, and both The h2 text is displayed in normal flow. The h2 text is displayed in normal flow. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image. clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.
13.
Copyright © Terry
Felke-Morris OVERFLOW PROPERTY  Intended to configure the display of elements on a Web page.  However, it is useful to “clear” or terminate a float before the end of a container element  Values are auto, hidden, and scroll The background does not extend as far as you’d expect. The background does not extend as far as you’d expect. overflow: auto; was applied to the div that contains the image and paragraph. Now the background extends and the h2 text displays AFTER the floated image. overflow: auto; was applied to the div that contains the image and paragraph. Now the background extends and the h2 text displays AFTER the floated image.
14.
Copyright © Terry
Felke-Morris CHECKPOINT 1. List the components of the box model from innermost to outermost. 2. Describe the difference between relative and absolute positioning. 3. Describe the purpose of the CSS float property. 14
15.
Copyright © Terry
Felke-Morris DISPLAY PROPERTY  Configures how and if an element is displayed  display: none;  The element will not be displayed.  display: block;  The element is rendered as a block element – even if it is actually an inline element, such as a hyperlink.  display: inline;  The element will be rendered as an inline element – even if it is actually a block element – such as a <li>.  You’ll work with the display property later in the chapter. 15
16.
Copyright © Terry
Felke-Morris CSS PAGE LAYOUT TWO COLUMNS (LEFT NAV)
17.
Copyright © Terry
Felke-Morris CSS PAGE LAYOUT TWO COLUMNS (TOP LOGO, LEFT NAV)
18.
Copyright © Terry
Felke-Morris CONFIGURE HYPERLINKS IN AN UNORDERED LIST ď‚„ Vertical Navigation <div id="leftcolumn"> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> ď‚„ CSS removes the list marker and underline: #leftcolumn ul { list-style-type: none; } #leftcolumn a { text-decoration: none; } 18
19.
Copyright © Terry
Felke-Morris CONFIGURE HYPERLINKS IN AN UNORDERED LIST ď‚„ Horizontal Navigation HTML: <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> ď‚„ CSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display. #nav ul { list-style-type: none;} #nav a { text-decoration: none; padding-right: 10px; } #nav li { display: inline; } 19
20.
Copyright © Terry
Felke-Morris CSS PSEUDO-CLASSES Pseudo-classes and the anchor element ◦ link – default state for a hyperlink ◦ visited –a hyperlink that has been visited ◦ focus – triggered when the hyperlink has focus ◦ hover – triggered when the mouse moves over the hyperlink ◦ active – triggered when the hyperlink is being clicked a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;}
21.
Copyright © Terry
Felke-Morris CSS PSEUDO-CLASSES a:link { color: #ff0000; } a:hover { text-decoration: none; color: #000066; } 21
22.
Copyright © Terry
Felke-Morris DECIDING TO CONFIGURE A CLASS OR ID ď‚„ Configure a class: ď‚„ If the style may apply to more than one element on a page ď‚„ Use the . (dot) notation in the style sheet. ď‚„ Use the class attribute in the HTML. ď‚„ Configure an id: ď‚„ If the style is specific to only one element on a page ď‚„ Use the # notation in the style sheet. ď‚„ Use the id attribute in the HTML. 22
23.
Copyright © Terry
Felke-Morris CHOOSING A NAME FOR A CLASS OR AN ID ď‚—A class or id name should be descriptive of the purpose: â—¦ such as nav, news, footer, etc. â—¦ Bad choice for a name: redText, bolded, blueborder, etc. ď‚—The the 10 most commonly used class names are: footer, menu, title, small, text, content, header, nav, copyright, and button ď‚—Source: http://code.google.com/webstats 23
24.
Copyright © Terry
Felke-Morris CSS DEBUGGING TIPS  Manually check syntax errors  Use W3C CSSValidator to check syntax errors  http://jigsaw.w3.org/css-validator/  Configure temporary background colors  Configure temporary borders  Use CSS comments to find the unexpected /* the browser ignores this code */  Don’t expect your pages to look exactly the same in all browsers!  Be patient! 24
25.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Open the chapter6/practice/index.html file from Hands-On Practice 6.5 in a browser. Resize the browser window. Describe what happens. What type of page design layout (ice, jello, or liquid) is being used? 2. Describe one CSS debugging tip that you have found helpful. 3. Describe how to choose whether to configure an HTML element selector, create a class, or create an id when working with CSS. 25
26.
Copyright © Terry
Felke-Morris HTML5 STRUCTURAL ELEMENTS ď‚„ Header Element ď‚„ contains the headings of either a web page document or an area in the document such as a section or article. ď‚„ Hgroup Element ď‚„ contains two or more heading elements (h1, h2, and so on) 26
27.
Copyright © Terry
Felke-Morris HTML5 STRUCTURAL ELEMENTS ď‚„ Header Element ď‚„ Hgroup Element Example: <header> <hgroup> <h1>Lighthouse Island Bistro</h1> <h2>the best coffee on the coast</h2> </hgroup> </header> 27
28.
Copyright © Terry
Felke-Morris MORE HTML5 ELEMENTS ď‚„ Nav Element ď‚„ contains a section of navigation hyperlinks ď‚„ block display ď‚„ Footer Element ď‚„ contains the footer content of a web page or specific area (such as a section or article) on a web page ď‚„ block display ď‚„ Aside Element ď‚„ contains a sidebar, a note, or other tangential content ď‚„ block display 28
29.
Copyright © Terry
Felke-Morris MORE HTML5 ELEMENTS  Section Element  contains a “section” of a document, such as a chapter or topic  block display  Article Element  contains an independent entry, such as a blog posting, comment, or e- zine article that could stand on its own  block display  Time Element  represents a date or a time  could be useful to date articles or blog posts  inline display 29
30.
Copyright © Terry
Felke-Morris CHECKPOINT 1. Describe a reason to use HTML5 structural elements instead of div elements for some page areas. 2. Describe the purpose of the article element. 3. Describe the purpose of the hgroup element. 30
31.
Copyright © Terry
Felke-Morris SUMMARY ď‚„ This chapter introduced you to the box model, CSS pseudo-classes, configuring two-column page layouts with CSS, and HTML5 structural elements. 31
Jetzt herunterladen