cos 125 day 16. agenda second capstone progress report due march 23 (next class ) assignment #4...
Post on 21-Dec-2015
214 views
TRANSCRIPT
Agenda
• Second Capstone Progress Report Due March 23 (next class)
• Assignment #4 assigned – Due Tuesday March 23
• Exam #3 will March 26– Castro Chaps 1-7
• Problem Areas– Review XHTML– Review Paint Shop Pro– Review Dreamweaver Usage
• Lecture/discuss Using Images• Assignment #5
WYSIWYG vs. TEXT
• 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
• <img src=“” alt=“” />
• Links• Two types of tags
– Single sided• < tag />• <br /> <hr /> <img src=“” alt=“” />
– Double sided• < tag> modified content </tag>• Can be nested
– <tag1><tag2> Content </tag2></tag1>
Template for Transitional XHTML
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>A title</title>
</head>
<body>
</body></html>
Links
• 3 parts– Destination
• Where to go• URLs
– 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– <a href=“somepage.url >
• Label– Label text
• End of link </a>
<a href=“somepage.url’”> label text</a>
Creating a Web Link
• Use relative URLS if the destination is on the same server (see Chap 1)
• Use absolute URLs if the destination is on a different server (see Chap 1)
• DO NOT use “click here”• 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
• <a name=“daName”>text or image</a>• Any element can be a anchor using the “id”
attribute– <h1 id=“daName”>A header</h1>
• For long documents create anchors for top, bottom and important sections
Linking to a Specific Anchor
• Link to “daName” on same page– <a href=“#daName”>Go to daName</a>
• Ling to “daName” on another page– <a href=“page.url#daName”>Go to
daName</a>
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)– <a href=“some.url” target=“_self”>label</a>
• New window– <a href=“some.url” target=“_blank”>label</a>
• Existing Windows– <a href=“some.url” target=“daWindow”>label<.a>– 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– <base target=“daWindow” />
• 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://allagash.umfk.maine.edu”
– E-mail• href=“mailto:[email protected]”
– 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– <a href=“some.url” accesskey=“t”>label</a>– 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– <a href=“some.url” tabindex=“10”>label</a>– N can be 1 to 32767– 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• <a href=“some.url”><img src=“image.gif”/
alt=“aPicture”></a>• Border
– Most browsers will create a blue border around an image that is a link
– You can add a border to any image• <img src=“image.gif” alt=-”aPicture” border=“10” />
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
Creating a Client Side Image Map
• Divide your images into a regions• Create a “map” of the regions
– <map name=“daMap” id=”daMAP”>– Add regions & destinations
• <area alt=“regions1” shape=“rect or circle or poly” cords=“100,100,220,200” href=“some.url” />
• Create a default• <area shape=“default” href=”someother.url” />
– Add closing tag <map/>• Associate map with the image
– <img src=“picture,gif” alt=“a Picture” usemap=“daMap” />