chapter 2- developing a web sites

XPXPXPXPXP

Chapter 2

Developing a Basic Web Site

XPXPXPXPXPObjectives

• Learn how to storyboard various Web site structures• Create links among documents in a Web site• Understand relative and absolute folder paths• Mark a location with the id attribute• Create a link to an id

New Perspectives on HTML and XHTML, Comprehensive 2

XPXPXPXPXPObjectives

• Understand URLs• Link to a site on the Web• Link to an FTP site• Link to an e-mail address• Work with hypertext attributes• Work with metadata• Introduction to Web Usability Design• Create effective link


XPXPXPXPXP2.1 Web Page Structures

• A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together

• It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains

• A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information


XPXPXPXPXP2.1.1 Linear Structures

• In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain

• Linear structure works best for Web pages with a clearly defined order

• In an augmented linear structure, each page contains an additional link back to an opening page


XPXPXPXPXP2.1.1 Linear Structures


A linear structure

An augmented linear structure

XPXPXPXPXP2.1.2 Hierarchical Structures

• In the hierarchical structure, the pages are linked going from the home page down to more specific pages

• Users can easily move from general to specific and back again

• Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play


XPXPXPXPXP2.1.2 Hierarchical Structures


XPXPXPXPXP2.1.3 Mixed Structures

• As Web sites become larger and more complex, you often need to use a combination of several different structures

• The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion

• A site index is a page containing an outline of the entire site and its contents


XPXPXPXPXP2.1.3 Mixed Structures


XPXPXPXPXPWeb Site with No Coherent Structure

• Unstructured web site can be difficult and frustrating to use


XPXPXPXPXP2.1.4 Protected Structures

• Sections of most commercial Web sites are off-limits except to subscribers and registered customers


XPXPXPXPXP2.2 Working with Links

A web page contains hypertext links or items that you could select to view another topic and document.

This often called the link’s destination. Link can point to:

Another section in the same document Different document A different Web page A variety of other Web objects

XPXPXPXPXP2.3 Creating a Hypertext Link


XPXPXPXPXP2.3.1 Linking to a Document

• To link to a page, you specify the name of the file using the href attribute of the <a> tag

• Filenames are case sensitive on some operating systems, including the UNIX and Macintosh, but not on others

• The current standard is to use lowercase filenames for all files on a Website and to avoid special characters such as blanks and slashes

• You should also keep filenames short to avoid typing errors


XPXPXPXPXP2.3.1 Linking to a Document


Hands-on Trying 1: hometxt.htm ,glossary.htm, tipstxt.htm (open them with Expression Web)

Hands-on Trying 1: hometxt.htm ,glossary.htm, tipstxt.htm (open them with Expression Web)

XPXPXPXPXP2.4 Specifying a Folder Path (Linking to Documents in Others Folders)


•To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path

XPXPXPXPXP2.4.1 Absolute Pathnames

• An absolute path specifies a file’s precise location within a computer’s entire folder structure


XPXPXPXPXP• A sample folder tree / absolute path: Figure 2.7

An absolute path specifies a file’s precise location within a computer’s entire folder structure

XPXPXPXPXP2.4.2 Relative Pathnames

• A relative path specifies a file’s location in relation to the location of the current document


XPXPXPXPXP• A sample folder tree / relative path: Current document is in tips folder

•If the file is in the same location as the current document, you do not have to specify the folder name•If the file is in a subfolder of the current document, you have to include the name of the subfolder.•If you want to go one level up the folder tree, you start the relative path with a double period (..) and then provide the name of the file.•To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder.

XPXPXPXPXP2.4.3 Changing the Base

• The base element is useful when a document is moved to a new folder. Rather than rewriting all of the relative paths to reflect the document’s new location, the base element can redirect browsers to the document’s old location, allowing any relative paths to be resolved

• The base element is useful when you want to create a copy of a single page from a large Web site on another Web server


XPXPXPXPXP2.5 Link to Locations Within Documents

• Link to locations within same document• Link to locations within different documents


XPXPXPXPXP2.5.1 Link to Locations Within Same Document

A) Mark that location• To jump to a specific location within a document, you

first need to mark that location• One way to identify elements in an HTML document

is to use the id attribute• Id names must be unique• Id names are not case sensitive <h2 id ="A">A</h2>

Or <h2><a name="A">A</a></h2> (old code)


XPXPXPXPXP<h2><a name=“A”>A</a></h2> (old code)Hands-on Trying 2a: open glossary.htm , mark the location (link’s destination)Hands-on Trying 2a: open glossary.htm , mark the location (link’s destination)

XPXPXPXPXP

B) create a link • To create a link within a document, you enclose the

content that you want to format as a link in an <a> tag, and use the href attribute to identify the link target

• A link’s content is not limited to text• Generally, a link should not contain any block-level

elements <a href="#A">A</a>


Hands-on Trying 2b: Open glossary.htm , create links within a documentHands-on Trying 2b: Open glossary.htm , create links within a document

XPXPXPXPXP2.5.2 Link to Locations Within Different Documents

• To create a link to a specific location in another file, enter the code<a href="reference#id">content</a>

where reference is a reference to an HTML or XHTML file and id is the id of an element marked within that file


Hands-on Trying 3a: Open glossary.htm , mark the location

<dt id="aperture"><b>Aperture</b></dt>:

<dt id="exposure"><b>Exposure</b></dt>:

<dt id="f-stop"><b>F-stop</b></dt>:

<dt id="flash_mode"><b>Flash Mode</b></dt>:

<dt id="focal_length"><b>Focal Length</b></dt>:

Hands-on Trying 3a: Open glossary.htm , mark the location

<dt id="aperture"><b>Aperture</b></dt>:

<dt id="exposure"><b>Exposure</b></dt>:

<dt id="f-stop"><b>F-stop</b></dt>:

<dt id="flash_mode"><b>Flash Mode</b></dt>:

<dt id="focal_length"><b>Focal Length</b></dt>:

XPXPXPXPXP


Hands-on Trying 3b: Open glossary.htm , mark the locationopen home.htm , create links to specific locations in another file,

Hands-on Trying 3b: Open glossary.htm , mark the locationopen home.htm , create links to specific locations in another file,

XPXPXPXPXP2.6 Working with Linked Images and Image Maps• A standard practice on the Web is to turn the Web

site’s logo into a hypertext link pointing to the home page

• To mark an inline images as a hypertext link <a href="reference"><img src="file“ alt="text" /></a>

Demo 1


XPXPXPXPXP2.6.1 Introducing Image Maps

• HTML also allows you to divide an image into different zones, or hotspots, each linked to a different destination

• A hotspot is a defined area of the image that acts as a hypertext link. When a user clicks within a hotspot, the hyperlink is activated.

• There are two types of image maps: server-side image maps and client-side image maps.


XPXPXPXPXP


XPXPXPXPXP2.6.2 Client-Side Image Maps

• A client-side image map is inserted in an image map into the HTML file

• The browser locally processes the image map• Because all of the processing is done locally, you can

easily test Web pages• More responsive than server-side maps• The browser’s status bar displays the target of each

hotspot. • Older browsers do not support client-side images


XPXPXPXPXP

• To define these hotspots, you create an image map that matches a specified region of the inline image to a specific destination.

• Use the syntax of the map element to create a client –side image map

<map name=“map” id=“map”>hotspots

</map>• map is the name of the map and hotspots are the

locations of the hotspots within map.


XPXPXPXPXP2.6.3 Defining Hotspots

• Define a hotspot using two properties:

– Its location in the image– Its shape

• Syntax of the hotspot element:<area shape=“shape” coords=“coordinates”

href=“url” alt=“text” />


XPXPXPXPXP

Creating a Rectangular Hotspot• Two points define a rectangular hotspot:

– the upper-left corner– the lower-right corner

• A sample code for a rectangular hotspot is:<area shape="rect" coords="168, 110, 225, 145" href="tips.htm" alt="Tips" />– Coordinates are entered as a series of four numbers separated by

commas– HTML expects that the first two numbers represent the coordinates for

the upper-left corner of the rectangle, and the second two numbers indicate the location of the lower-right corner

– The hotspot is a hypertext link to tips.htm


XPXPXPXPXP

Creating a Circular Hotspot• A circular hotspot is defined by the location of its

center and its radius• A sample code for a circular hotspot is:

<area shape="circle" coords="82, 78, 80"

href="home.htm" alt="Home" />

– Coordinates are (82, 78), and it has a radius of 80 pixels– The hotspot is a hypertext link to karts.htm


XPXPXPXPXP

Creating a Polygonal Hotspot• To create a polygonal hotspot, you enter the

coordinates for each vertex in the shape• A sample code for a polygonal hotspot is:

<area shape=“polygon” coords=“13,60,13,270,370,270,370,225,230,225, 230,60” href=“rides.htm”>

– Coordinates are for each vertex in the shape– The hotspot is a hypertext link to rides.htm


XPXPXPXPXP

Creating a Default Hotspot• <area shape="default" coords="0, 0, x, y" … />

where x is the width of the inline image in pixels and y is the image’s height

• Any spot that is not covered by another hotspot will activate the default hotspot link

<area href="pearlake.jpg" shape="default" coords="2, 5, 777, 163">


XPXPXPXPXP2.6.4 Applying an Image Map


Hands-on Trying 4: open home.htm , create image map and hotspots , applying an image map

Hands-on Trying 4: open home.htm , create image map and hotspots , applying an image map

XPXPXPXPXP2.6.5 Server-Side Image Maps

• In a server-side image map, the image map is stored on the Web server

• Server-side image maps are supported by most graphical browsers

• Server-side image maps can be slow to operate• The browser’s status bar does not display the target

of each hotspot


XPXPXPXPXP2.7 Linking to Resources on the Internet

• To create a link to a resource on the Internet, you need to know its URL

• A Uniform Resource Locator (URL) specifies the precise location of a resource on the Internet

• A protocol is a set of rules defining how information is exchanged between two resources


XPXPXPXPXP

• Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP)

• The URLs for all Web pages must start with the scheme “http”

• Other Internet resources use different protocols and have different scheme names


XPXPXPXPXP


XPXPXPXPXP2.7.1 Linking to a Web Site


A sample URL for a Web page

XPXPXPXPXP

• If a URL includes no path, then it indicates the topmost folder in the server’s directory tree

• If a URL does not specify a filename, the server searches for the default home page

• The server name portion of the URL is also called the domain name

• The top level, called an extension, indicates the general audience supported by the Web server<a href="http://www.apogeephoto.com">Apogee Photo</a>


XPXPXPXPXP


Hands-on Trying 5: open tips.htm , create links to Web sitesHands-on Trying 5: open tips.htm , create links to Web sites

XPXPXPXPXP2.7.2 Linking to FTP Servers

• FTP servers are another method of storing and sharing files on the Internet

• FTP servers transfer information using a communications protocol called File Transfer Protocol, or FTP for short

• An FTP server requires each user to enter a password and a username to access its files


XPXPXPXPXP2.7.3 Linking to FTP Servers


XPXPXPXPXP2.7.4 Linking to an E-Mail Address• Many Web sites use e-mail to allow users to

communicate with a site’s owner, sales representative, or technical support staff

• You can turn an e-mail address into a hypertext link, so that when a user clicks on an address, the browser starts an e-mail program and automatically inserts the address into the “To” field of the new outgoing message


XPXPXPXPXP

• The mailto protocol also allows you to add information to the e-mail, including the subject line and the text of the message– mailto:address?header1=value1&header2=value2& ...

– mailto:ghayward@camshotscom?Subject=Test&Body=This%20is%20a%20test%20message

• To preserve information about blank spaces, URLs use escape characters– Demo2


Hands-on Trying 6: open home.htm , create links to email address<a href="mailto:[email protected]?subject=CAMshots%20Message"> contact me</a>

Hands-on Trying 6: open home.htm , create links to email address<a href="mailto:[email protected]?subject=CAMshots%20Message"> contact me</a>

XPXPXPXPXP


XPXPXPXPXP

• If you need to include an e-mail address in your Web page, you can take a few steps to reduce problems with spam:– Replace all e-mail addresses in your page with inline

images of those addresses– Write a program in a language JavaScript to scramble any

e-mail address in the HTML code– Replace the characters of the e-mail address with character

codes– Replace characters with words in your Web page’s text


XPXPXPXPXP2.7.5 Working with Hypertext Attribute


• HTML provides several attributes to control the behavior and appearance of your links

• You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag

XPXPXPXPXP


Hands-on Trying 7: open tips.htm , specify a link target.<dt>☞ <a href="http://www.apogeephoto.com" target="new">Apogee Photo</a></dt>

Hands-on Trying 7: open tips.htm , specify a link target.<dt>☞ <a href="http://www.apogeephoto.com" target="new">Apogee Photo</a></dt>

XPXPXPXPXP

• If you want to provide additional information to your users, you can provide a tooltip to your links

• A tooltip is a descriptive text that appears whenever a user positions the mouse pointer over a link


XPXPXPXPXP


Hands-on Trying 8: open home.htm , create tooltip<a href="gloss.htm" title="Study photo terminology in the CAMshots glossary"> [ Glossary ]</a>

Hands-on Trying 8: open home.htm , create tooltip<a href="gloss.htm" title="Study photo terminology in the CAMshots glossary"> [ Glossary ]</a>

XPXPXPXPXP2.8 Using the Link Element• Another way to add a link to your document is to add a link element to

the document’s head• Link elements are intended only for the browser’s use• Link elements have primarily been used to link style sheets• Because no single list of relationship names is widely accepted, you

must check with each browser’s documentation to find out what relationship names it supports

<link rel=“top" href="home.htm"> <link rel="help" href="tips.htm"><link rel="glossary" href="gloss.htm">


XPXPXPXPXP

XPXPXPXPXP2.9 Working with Metadata

• Web authors often turn to companies that specialize in making sites appear more prominently in search engines

• Information about the site is called metadata• Add metadata to your Web pages by adding a meta

element to the head section of the document


<meta name="text" content="text" scheme="text" http-equiv="text" />

XPXPXPXPXP

• In recent years, search engines have become more sophisticated in evaluating Web sites– The meta element has decreased in importance, but it is

still used by search engines when adding a site to their indexes


XPXPXPXPXP


XPXPXPXPXP

• You can add commands to this communication stream between the Web server and Web browser with the meta element’s http-equiv attribute– Force the Web browser to refresh the Web page at timed intervals<meta http-equiv="refresh" content="60" />

– Redirect the browser from the current document to a new document<meta http-equiv="refresh" content="5;url=www.camshots.com" />

– Specify the character set<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />


XPXPXPXPXP

Hands-on Trying 8: open home.htm , create metadata<meta name="author" content="your name" http-equiv="refresh" content="60" /><meta name="description" content="A site for sharing information on digital photography and cameras" /><meta name="keywords" content="photography, cameras, digital imaging" />

Hands-on Trying 8: open home.htm , create metadata<meta name="author" content="your name" http-equiv="refresh" content="60" /><meta name="description" content="A site for sharing information on digital photography and cameras" /><meta name="keywords" content="photography, cameras, digital imaging" />

XPXPXPXPXP2.10 Creating Effective Links• Storyboarding• Easy navigation with link to home page and a page containing site

index• Avoid using “Click here” in links• Never place 2 links adjacent to one another. Separate them with text,

spaces or symbol.• Use lowercase filenames for all document

XPXPXPXPXP

• Avoid long pages unless necessary. Break up a long page to different sections. Include links throughout the page that users can click to jump to the top of the page.

• Use anchor if internal document must link with older browsers

XPXPXPXPXP2.11 Phases of Planning and Designing Web

Phase1:Preparation (A)Research and idea generation • Main Goal:

1. Define the user. 2. Define information the users need and want. 3. Define presenter’s objective. 4. Define the potential information to be used: ideas, facts,

images, prices and so on.


XPXPXPXPXP

• End product of idea generation are: – The definition of expected information content for each

group of users. – A statement of what the Web Presentation will do. – A list of information sources.

• Key Roles in idea generation: – They know the possible users. – Know the information that most likely wanted by users. – Know the availability of information to be put on site.


XPXPXPXPXP

(B)Information decomposition and structuring • Question: What contribute to a well-organized site? AND How to achieve

it? • Answer: Task of the designer to perform information decomposition (Step

1) and structuring (Step 2). • Decomposition:

– It is the process of separating something into smaller parts or pieces. – Decomposition in Web Presentation Concepts: separate the

information identified during the research and idea generation into chunks information objects.

• Structuring: – Create an information object map to satisfy the presenters and the

users. – Designer’s Task.


XPXPXPXPXP

Phase2: Design • Text analysis and composition

– Text Analysis: • The development of text statement that most clearly convey the

intended message of each information object.

– Text Composition: • All objects with complete text are rearranged, and regrouped to

achieve effectiveness, affectiveness and navigational efficiency.


XPXPXPXPXP

• Linkage analysis and composition – Linkage Analysis:

• Define hyperlinks for information objects and are threaded to each other.

• Reevaluated to avoid affecting its original information content and misinterpretation.

– Linkage Composition: • Phrasing links and incorporates them. • Apply suitable color to links.


XPXPXPXPXP

• Multimedia analysis and composition – Multimedia:

• Text, graphics, sound, animation, video, or other media combined into a single production or presentation.

– Multimedia Analysis: • Decide appropriate multimedia. • End product: a list of potential multimedia selections.

– Multimedia Composition: • Select, create, install, and integrate multimedia in the Web

presentation.

– End product of multimedia analysis and composition is a complete, up-to-date, multimedia web presentation.


XPXPXPXPXP

Phase3: Maintenance and Continuous Improvement • Reasons for maintenance and continuous

improvement – Reasons:

• Information could be out-dated. • Visions changes when experience grows. • Competitions between competing organizations. • New technologies inventions.

• If no improvement over Web site’s look, technology, content and navigational techniques resulted losing a lot of users.


XPXPXPXPXP2.11.1Key roles involved in supporting a site• Involves presenters, information stewards and designers. • Presenters:

– Direct & Funding. – Determine a Web strategy. – Decide the extent of electronic commerce on the Web.

• Information Stewards & Designers: – Same area of responsibility – Steward è Web content, monitor pages relating to the business

function for which they are responsible. – Designer è implementing changes recommended by presenters and

information stewards.


XPXPXPXPXP

• New Key Role è Webmaster/operations manager: – Primary user contact and his email posted on the site. – Responsibility includes:

• Forwarding mail from users to appropriate parties. Example: customer service or sales.

• Evaluating technologies beneficial to the Web site. • Recommending upgrades to phone service, operating systems, hardware

and software as necessary.


XPXPXPXPXP2.11.2 Strategies used for technology surveillance • Performed for the purpose of identifying news technologies to improve

Web presentation. • To determine whether or not using the new technology will improve the

existing system’s performance or better achieve the site’s overall objectives.

• It is the ongoing observation and evaluation of new technologies from the time they are announced until they are mature enough to be incorporated into a Web presentation.

• Surveillance includes: – Reading magazines. – Visiting E-zines (electronic magazines). – Attending trade show. – Talking with vendors. – Discussing developments with other people in other organizations.


XPXPXPXPXP2.12 Introduction to Web Usability Design• Areas

–Page Design–Content Design –Site Design

XPXPXPXPXP2.12.1 Page Design• A careful, systematic approach to page design can

simplify navigation, reduce user errors, and make it easier for readers to take advantage of the information and features of the site.

• The spatial organization of graphics and text on the Web page can engage readers.

• With graphic impact, direct their attention and prioritize the information they see

XPXPXPXPXP

• Dense text documents are hard to read, particularly on the low-resolution screens.

• Without the visual impact of shape, color, and contrast, pages are uninteresting and will not motivate the viewer.

• Highly graphical pages risk disappointing the user by offering a poor balance of visual sensation, text information, and interactive hypermedia links.

XPXPXPXPXP2.12.2 Content Design• Be VERY concise – write 50% less text than you would on paper.• Write for SCANNABILITY – no long paragraphs, use subheads and bullet lists• Use HYPERTEXT LINKS to break up lengthy information across separate pages.• Readability research shows that:

– Reading from a computer screen is 25% slower than from paper.– Prolonged reading from a screen is unpleasant.– Tips:

• Write 50% less text than for a print publication.

XPXPXPXPXP

• Scannability shows that:

– 80% of web users don't read they scan for keywords, headings, bullets and links.

– Tips:

• Structure texts with 2/3 levels of headings.

• Use indentation to show structure & heading

• Use highlighting – italic, bold and colored text, but NOT underlining because of the confusion with links.

• Use bullet lists or numbered lists.

XPXPXPXPXP2.12.3 Site Design

• The design of the site will determine its organizational framework.

• The overall organization of the site will have the impact on the users’ experience.

• At this stage you will make the tactical design decisions about what your audience wants from you, what you wish to say, and how to arrange the content to best meet your audience's needs.

XPXPXPXPXP

• The fundamental organizing principle in Web site design is meeting users' needs.

• Many organizations and businesses make the mistake of using their Web sites primarily to describe their administrative organization, and only secondarily do they offer the services, products, and information the average user is seeking.

• Most readers won't care how your company or department is organized and will be put off if such inside information is all your site appears to offer.

XPXPXPXPXP

• Talk to the people who make up your target audience, put yourself in their shoes, and make the items and services they want the most prominent items on the home page.

• Web site's should have:– A user-centered design.– Straightforward architecture (logical relationships between pages).– Easy to understand, consistently c navigational controls.– Offer consistency of layout and textual and graphical style.

XPXPXPXPXP2.13 Issues in Web Page Design

Latency & Responsiveness • There is a factor of different users having different connection speeds. It can range

from a low-speed 56K modem connection to a high-speed broadband connection. • The single most important page design issue is download time. Page download and

rendering speed is a big factor in usability. • Rules of thumb:

– a 0.1 sec response time limit is needed for the user to feel in real time control. – a 1 sec response limit is needed if user's flow of thought is to remain uninterrupted. – There is a 10 sec limit for keeping user's attention focused on the dialogue. – Real world times will be 2 to 3 fold the optimal time.

• Tips: – Minimize the number of graphics. – Keep graphics small. Crop them if possible. – Reduce the color depth or increase compression. – Use tables with colored backgrounds to structure pages. – Warn users if a link goes to a page bigger than 50K.


XPXPXPXPXP

Media file size • Perhaps the most powerful aspect of computing technology is the ability to

combine text, graphics, sounds, and moving images in meaningful ways. • The promise of multimedia has been slow to reach the Web because of bandwidth

limitations, but each day brings new solutions. Although there are numerous methods for creating Web multimedia, we recommend using stable technology that works for the great majority of client machines.

• Multimedia places high demands on the network, the computer, and the user. The challenge thus lies in preparing files that are small enough to be accessible to the broadest possible audience yet are of sufficient quality to be worth the effort.

• To balance quality against accessibility you'll need to understand both the characteristics of different media formats and the limitations of delivering media in a networked environment, and you must be ready to compromise.


XPXPXPXPXP

Resolution • Although Web pages and conventional print documents share many

graphic, functional, and editorial similarities, the computer screen, not the printed page, is the primary delivery site for Web-based information, and the computer screen is very different from the printed page.

• Computer screens are typically smaller than most opened books or magazines.

• A common mistake in Web design is spreading the width of page graphics beyond the area most viewers can see on their seventeen- or nineteen-inch display screens:


XPXPXPXPXP

Graphic safe areas • The "safe area" for Web page graphics is determined by two factors: the minimum screen

size in common use and the width of paper used to print Web pages. • Most display screens used in academia and business are seventeen to nineteen inches

(forty-three to forty-eight centimeters) in size, and most are set to display an 800 x 600-pixel screen.

• Web page graphics that exceed the width dimension of the most common display screens look amateurish and will inconvenience many readers by forcing them to scroll both horizontally and vertically to see the full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.

• The graphic safe area dimensions for printing layouts and for page layouts designed to use the maximum width of 800 x 600 screens are shown below:

• Graphic "safe area" dimensions for layouts designed to print well: – Maximum width = 560 pixels – Maximum height = 410 pixels (visible without scrolling)

• Graphic "safe area" dimensions for layouts designed for 800 x 600 screens: – Maximum width = 760 pixels – Maximum height = 410 pixels (visible without scrolling)


XPXPXPXPXPChapter Summary

• Create a Web site with several linked pages• Storyboarding and complex Web structures• Creating Web pages linked together• Links to locations within documents and from another

document• Create links to sites and to non-Web locations• Different hypertext attributes• Meta element• Introduction to Web Usability Design• Create effective link


XPXPXPXPXP

End of Chapter 2

Developing a Basic Web Site