Date post: | 05-Jan-2016 |
Category: |
Documents |
Upload: | kevin-marshall |
View: | 214 times |
Download: | 1 times |
Computer Science 101
Color, Fonts, Links, Design
Body Attributes
• Govern the entire body of the page
• BGCOLOR - the background color
• TEXT - the text color
• LINK - the color of all links
• VLINK - the color of a link after it’s been selected
Examples
<BODY> (uses defaults)
<BODY BGCOLOR="blue" TEXT="white">
<HR VLINK="#990000"> (hexadecimal number)
Hexadecimal Number System
• Digits 0..9 and A..F
• base 16
• A16 = 1010, etc.
• Can say more with less - AA is 170 (10 * 16) + (10 * 1)
Representing Colors
• Almost 17 million colors on most computers
• Use a six-digit hexadecimal number
• #000000 is black, #FFFFFF is white
RGB Color System
• Mixes three color components (red, green, blue)
• Each component is given two hex digits
#2C45F2 = 2C 45 F2 red green blue
Saturation Values
• 00 is minimum saturation
• FF is maximum saturation
• In general, lower saturation produces darker shades, whereas higher saturation produces brighter shades
Web-Safe Colors
• Only 216 colors are guaranteed on all browsers
• 6 * 6 * 6 = 216, so only 6 different values per component
• 00, 33, 66, 99, CC, and FF
Examples
#666666 medium gray
#660066 medium purple
#FF0000 brightest red
RGB on Most Monitors
• 256 * 256 * 256 = 16,777,216 colors
• If the browser does not support all these, then the nearest color among the Web-safe ones is used
The FONT Tag
• <FONT> some text </FONT>
• It’s deprecated, meaning it’s probably supported by most browsers but may not be in future releases
Font Attributes
• SIZE – 3 (10 or 12 pt) is default
• COLOR – as usual
• FACE – Arial, Courier, Times, etc.
• Relative size - +2, -2, etc.
Example
Linking to Other Pages
• The Web is a hyperspace
• One navigates to various items by following links
• The navigation path can be linear or non-linear
Basic Principles of Web Site Design
• Distribute topics into a set of pages
• Connect the pages with links
• Each topic should be self-contained and contain links to related topics, allowing users to form a cognitive map easily
The Top-Level Page
• Serves as a platform for browsing the entire site
• Many ways to lay it out, but the most simple is to provide – an introductory paragraph– a set of links to the main topics
Example: A Simple Site
• Top-level page (index.html) has links to my hobbies and my career information
• Hobbies are discussed in hobbies.html
• Career stuff is in career.html
Organization of Files
index.htmlhobbies.html career.html
public_html
= a directory
= a file
A Better Organization
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
Why Design?
• Helps to divide up the work into manageable parts
• Reduces cognitive overload on viewers of pages
• Facilitates the construction of links
The Anchor Element
• Supports links to other pages or to places within the same page
<A> … </A>
• A required attribute is either HREF (link to another page) or NAME (link to same page)
The HREF Anchor
<A HREF="http://www.wlu.edu/~lambertk">Lambert page</A>
<A HREF="a URL">The displayed text of the link</A>
Absolute URLs
• An absolute URL contains the complete address, including the server name– Example: http://www.wlu.edu/~lambertk
• Causes a linking request to the server for a page, which involves some overhead (ie, time)
Relative URLs
• A relative URL contains just a path name (a file name or directory name and zero or more directory names)– Example: hobbies.html– Example: hobbies/golf.html
• Link to server is already there, so this way is faster than with absolute URLs
How to Construct a Pathname
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
If you’re in hobbies/index.html,you get to golf.html withgolf.html
How to Construct a Pathname
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
If you’re in public_html/index.html,you get to golf.html withhobbies/golf.html
How to Construct a Pathname
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
If you’re in hobbies/index.html,you get to the top-levelindex.html with../index.html
Relative vs Absolute
<A HREF ="../index.html">Back to index</A>
<A HREF="http://www.wlu.edu/~lambertk"> Back to index</A>
An absolute link causes a relink to the server, which can slow downnavigation.
Relative links are shorter and easier to remember and use.
Absolute links can change, relative links are (relatively) stable
More Basic Principles
• Restrict content of each page to avoid cognitive overload (3-7 rule)
• Avoid superfluous links, such as back to previous page (the browser has a button for this already)
Other Design Tips
• Draw a diagram of the file/directory system
• Show also how the files are linked
The File/Directory Structure
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html
The Link Map
index.html
public_html
hobbies career
index.html index.htmlgolf.html books.html