Class11
- 1. Class 11
- 2. Opening a Link in a New Browser WindowThe target attribute on the anchor element opens a link in a new browser window or new browser tab.<a href="http://yahoo.com" target="_blank">Yahoo!</a>2
- 3. XHTML Linking to Fragment Identifiers A link to a part of a Web pageAlso called named fragments, fragment idsTwo components:The element that identifies the named fragment of a Web page. This requires the id attribute.<div id=“top”> ….. </div>2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. <a href=“#top”>Back to Top</a>3Note the use of the # in the anchor tag!
- 4. Navigation LayoutUsing ListsNavigation hyperlink areas are semantically “lists" of linksSome web design gurus argue that navigation links should be configured using XHTML list elementsUse the list-style-image property to configure the “bullet" list-style-image:url(arrow.gif).4
- 5. CSS & XHTML Navigation ListCSS:div#leftcolumnul { list-style-image:url(arrow.gif);} div#leftcolumn a { text-decoration:none;} XHTML:<div id="leftcolumn"><ul> <li><a href="home.html">Home</a></li> <li><a href="spring.html">Spring</a></li> <li><a href="summer.html">Summer</a></li> <li><a href="fall.html">Fall</a></li> <li><a href="winter.html">Winter</a></li> </ul></div>5twocolumn1.html
- 6. Display PropertyConfigures 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>.6
- 7. CSS & XHTML Navigation ListCSS:div.navli { display:inline; list-style-type:none; }div.nav a { padding:5px; background-color:#e8b9e8; color:#000066; text-decoration:none; font-family:Verdana, Arial, sans-serif; text-align:center; }div.nava:link {color:#000066; background-color:#e8b9e8; }div.nava:visited {color:#000000; background-color:#cc66cc; }div.nava:focus {color:#cccccc; background-color:#000000}div.nava:hover {color:#ffffff; background-color:#cc66cc; }div.nava:active {color:#cccccc; background-color:#cc66cc; }XHTML:<div class="nav“><ul> <li><a href="page1.html">Home</a></li> <li><a href="spring.html">Spring</a></li> <li><a href="summer.html">Summer</a></li> <li><a href="fall.html">Fall</a></li> <li><a href="winter.html">Winter</a></li> </ul> </div>home0.html
- 8. Z-Index PropertyModifies the stacking order of elements on a Web page.default z-index value is “0”Elements with higher z-index values will appear stacked on top of elements with lower z-index values rendered on the same area of the page.8
- 9. Three ColumnPage LayoutA common Web page layout consists of a header across the top of the page with three columns below: navigation, content, and sidebar. If you are thinking about this layout as a series of boxes—you’re thinking along the right lines for configuring pages using CSS!9
- 10. container sets default background color, text color, and an minimum widthLeft-column navigationfloat: left;width:150px;Right-column contentfloat: right;width:200px; Center column – uses the remaining screen room available room after the floating columns displaymargin: 0 200px 0 150px; Footer – clears the floatclear:both;Three Column Layout10