COS 125 DAY 15. Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due...

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– http://perleybrook.umfk.maine.edu/samples/links.htm

• 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

• <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

Should be for every page

<?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>

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– <a href=“somepage.url >

• Value for href MUST be in “quotes”

• 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)– “/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

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>

• 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– <a href=“#daName”>Go to daName</a>

• Link 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://perleybrook.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

Finding regions

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=“region1” shape=“rect or circle or poly” cords=“100,100,220,200” href=“http://some.url” />

• Create a default• <area shape=“default” href=”http://someother.url” />

– Add closing tag <map/>• Associate map with the image

– <img src=“picture,gif” alt=“a Picture” usemap=“daMap” />

Using Dreamweaver for maps

Add hotspots

The Code<p><img src="audi.tt.1.jpg" width="640" height="480"

border="0" usemap="#test" /> <map name="test" id="test"> <area shape="circle" coords="301,363,69"

href="http://www.tirerack.com" target="_blank" alt="Buy Tires" />

<area shape="rect" coords="90,83,420,210" href="http://www.crutchfield.com" target="_blank" alt="Buy Stereo" /><area shape="default" href="http://www.audi.com" target="_blank" alt="Buy a TT"/>

</map></p>

Assignment # 5

• Examples– http://perleybrook.umfk.maine.edu/samples/links.htm

• In WebCT

• Linking Exercise

• Due Monday March 28

• Click on icon to see AssignmentMicrosoft Word

Document

COS 125 DAY 15. Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due...

Documents

Transcript of COS 125 DAY 15. Agenda Second Capstone Progress Report Due Mar 24 Assignment #4 assigned –Due...