Chapter 18 Web Design April 16 th & 17 th

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: – defines the start and the end of a bulleted list – 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: – creates a table – creates a table header, which is a cell with bold, centered text in the 1 st row of the table – defines the start and end of a table row – 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 ( ) 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