neal stublen [email protected]. course road map create web page layouts using css manage css test...
TRANSCRIPT
Course Road Map
Create web page layouts using CSS Manage CSS Test website validity Create navigation menus using CSS Incorporate meta content and
multimedia
Menus Are Lists of Links
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“catalog.html”>Catalog</a></li>
<li><a href=“about.html”>About</a></li>
</ul>
We just apply some styling to the list.
Display Property Determines how an element is displayed on the
page
blockLine break above and below
inlineNo line breaks
noneElement is not visible
list-itemElement displayed as a list
CSS Pseudo-class
Pseudo-classes add special effects to some selectors
Common pseudo-classes for anchor elements:link:visited:active:hover
Background Images
We’ve used the background-color style to set the color of the background
We can also use background images:background-image: url(“image.jpg”)background-repeat: no-repeat;background-position: top left;
Practice Activity
Menu images, Activity 3Add images to CSS menus (p.98)
What if you wanted the images on the right side of the text?
What’s an Image Map?
An image map defines regions within an image that can be used as individual hyperlinks
<img src=“images/myimage.jpg” />
What’s an Image Map?
An image map defines regions within an image that can be used as individual hyperlinks
<img src=“images/myimage.jpg”
usemap=“#mymap” />
<map id=“mymap”>…</map>
Inside the Map
<map id=“mymap”>
<area shape=“rect”
coord=“10, 25, 60, 40”
href=“rect.html”
alt=“My Rect”/>
<area shape=“circle”
coord=“108, 94, 32”
href=“circle.html”
alt=“My Circle”/>
</map>
About Map Areas
You can use rect, circle, or polyx1, y1, x2, y2x1, y1, radiusx1, y1, x2, y2, …, xn, yn
Coordinates are references from the upper-left corner of the image
The areas themselves are not visible, but only reference areas on the image