Transcript Chapter 18 Web Design - Boerne Independent School District

Chapter 18
Web 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