1. COS 125 DAY 15

2. 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 –http://perleybrook.umfk.maine.edu/samples/links.htmhttp://perleybrook.umfk.maine.edu/samples/links.htm Assignment #5 posted –Due March 28

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

5. 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

6. Template for Transitional XHTML Should be for every page A title

7. Creating Images

8. Creating Animations

9. Adding Images in Dreameaver Problem

10. 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

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

12. 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) –“http://www.somewhere.com/page.htm” DO NOT use “click here” as a label –Tacky!! Label CANNOT contain block-level elements

13. 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

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

15. 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

16. 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

17. More links Links can e be created to many things –FTP href=“ftp://perleybrook.umfk.maine.edu” –E-mail href=“mailto:name@site.com” –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

18. 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

19. 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 32767 –Smaller n’s will be TAB’ed to first –Negative n’s will be skipped

20. 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

21. 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”

22. 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

23. Finding regions

24. 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 –

25. Using Dreamweaver for maps

26. Add hotspots

27. The Code

28. Assignment # 5 Examples –http://perleybrook.umfk.maine.edu/samples/links.htmhttp://perleybrook.umfk.maine.edu/samples/links.htm In WebCT Linking Exercise Due Monday March 28 Click on icon to see Assignment