COS 125 DAY 15

Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due Thursday, March 24 Exam #3 will be on March 24 –Castro Chaps 1-7 Problem Areas –Review XHTML –Review Paint Shop Pro –Review Dreamweaver Usage Lecture/discuss Using Links – Assignment #5 posted –Due March 28

WYSIWYG vs. TEXT Bases XHTML is a formatting language and is not well suited for WYSIWYG development. XHTML programs best as text

XHTML Review Basic Format and Structure –Document Format –Block level –Inline Creating and Using Images –Img tags Links Two types of tags –Single sided –Double sided modified content Can be nested – Content

Template for Transitional XHTML Should be for every page A title

Creating Images

Creating Animations

Adding Images in Dreameaver Problem

Links 3 parts –Destination Where to go URLs, Anchors, Files –Label The part the user sees Can be text or an image or both –Target Where the destination will be displayed In same browser window, a new browser window or a certain browser window

Creating a link to another webpage Destination – Value for href MUST be in “quotes” Label –Label text End of link label text

Creating a Web Link Use relative URLS if the destination is on the same server (see Chap 1) –“/bios/tonyg.htm” Use absolute URLs if the destination is on a different server (see Chap 1) –“ DO NOT use “click here” as a label –Tacky!! Label CANNOT contain block-level elements

Creating Anchors An anchor is a labeled place on a Web Page that can be a destination for a Link text or image Any element can be a anchor using the “id” attribute – A header Name and id value MUST be in “quotes” For long documents create anchors for top, bottom and important sections

Linking to a Specific Anchor Link to “daName” on same page – Go to daName Link to “daName” on another page – Go to daName

Target Links to a Specific Browser Windows You can have the destination appear in a new Browser window so that you may view both the source and destination pages Same Window (default) – label New window – label Existing Windows – label –If windows isn’t open it will be created

Setting a default Target By default a link opens in the same window that contains the link To change default –In head section – If you set a target in a link it will override default

More links Links can e be created to many things –FTP href=“ftp://perleybrook.umfk.maine.edu” – –Telnet href=“telnet://allagash.umfk.maine.edu” –Files href=“url/file.ext” If the browser does have a plug-in for the file it will attempt to download the file

Keyboard shortcuts for Links Keyboard shortcuts or Hotkeys –Ctrl-C for copy –Ctrl-V for paste For a link – label –In IE type alt-t –In Netscape ctrl-t Make sure you don’t override an existing hotkey

Setting Tab Order In many application you can use the tab key to move around from section to section To change how the TAB key works on your web page set a tabindex=“n” attribute – label –N can be 1 to –Smaller n’s will be TAB’ed to first –Negative n’s will be skipped

Using an Image to Label a Link Simply replace the label text with an image Border –Most browsers will create a blue border around an image that is a link –You can add a border to any image

Image Maps An Image map is an image with regions that link to different destinations Two types –Client Side Image Maps Faster Most common Users can see the HTML that creates the map and the possible destinations –Server Side Image Maps Require a special program running on the server Hides the destinations from “View Source”

Creating an Image Map First divide the image into regions –Circles Center and radius –Rectangles Top Left X and Y and Bottom right X and Y –Polygons X and Y for each vertex of the Polygon

Finding regions

Creating a Client Side Image Map Divide your images into a regions Create a “map” of the regions – –Add regions & destinations Create a default –Add closing tag Associate map with the image –

Using Dreamweaver for maps

Add hotspots

The Code

Assignment # 5 Examples – In WebCT Linking Exercise Due Monday March 28 Click on icon to see Assignment