Class11

1,020 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,020
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class11

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

×