Chapter 18Web Design

April 16th & 17th

Content

• The most essential element of any Web page is the content

• Before you begin a Web page you want to know exactly what content will be on that page

• On the opening pages keep the text concise; more extensive information should be placed on later pages

Content Cont.

• When creating a Web page you should constantly use the spell checker option.– This will only be found when you are

using a Web Editor such as FrontPage.

• Spelling & grammar is to be considered as important as the information you are delivering

Consistency

• Well-designed pages have simplicity as their basic structure.

• Consistency of design is one way to make it easy for your audience to find what it is seeking on your page

Navigation

• Navigation links are the means of guiding a visitor to a Web site from one page in the site to other pages

Image Maps

• An image map is a graphic divided into two or more parts, each part is assigned a different link.– Example: A pet store Website has

different pictures of dogs, and by clicking on each dog allows you to go to another site that details that specific breed.

• Image maps don’t have to be a picture– They can be a simple graphic with a

variety of words listed.

Creating Lists

• Bulleted List Tags Include:– <ul> </ul>

• defines the start and the end of a bulleted list

– <li></li> • defines the start and end of an item

Design Differences

• Tables– Creating columns is not possible in

HTML code because text spans the width of the screen

– Tables, however, can be used to create the appearance of columns

– They also provide spacing options for images.

Tables

• Table tags include:– <table> </table>

• creates a table

– <th></th> • creates a table header, which is a cell with

bold, centered text in the 1st row of the table

– <tr></tr> • defines the start and end of a table row

– <td></td> • defines the start and end of a table data cell

Design Differences Cont.

• Fonts– Font sizes can be set on a numbering

system from 1-7. The use of numbers allows the computer to enlarge the font proportionally.

– When selecting font color you want to select both font & background colors that offer high contrast, making them easy to read

Hyperlinks

• A hyperlink, also called a link, is text displayed in a browser window that can be clicked to display a different HTML document in the browser window.

• Displayed as blue underlined text in the browser window

• The anchor tag (</a>) is used in an HTML document to mark text that is a link

Color

• When choosing which category will work best, your choice should be 216 Web-safe colors, even though this is limiting, it helps guarantee that all colors will be seen by all users

• Colors are identified with HTML code– The hexadecimal number is generally

provided by most graphic programs

Basic Color Rules

• Blue is relaxing & a popular choice• Red is visible & powerful• Purple gives a sense of importance

to a page• Yellow & green are well received• Brown can be used to simulate

leather or a wood finish, providing a sense of dignity

Images

• Images can include JPEG, GIF graphics, bullets, flash files, & video

• A standard technique when using large images is to create thumbnails– Thumbnails are smaller versions of a

larger image. They can be clicked on to reveal the full-size image.

Scrolling Marquees

• Marquees run text across the page• Even though they are text they are

treated more like graphics because animation is involved

Assignment

• Chapter 18 Review – (#’s 1-15, Q&A) page 209

• Chapter 18 Discussion Questions– (#’s 1 & 5) page 209