Chapter 3
1. Every web page is basically the same thing:
1. a page of text with formatting specifications in HTML code
2. a database
3. a spreadsheet
4. http code
2. What do you need to do before you create your first page?
1. Adjust your monitor settings.
2. Design the headlines.
3. Make and name a new folder in which to store your web pages.
4. Create all of your graphics.
3. Each of the following is an email link. Which one is most appropriate? Why and why not?
1. Robert Burns
2. Send me email!
3. Please email us at countryinn@ bucolic.com.
4. Order Tickets
4. If you want to make the headline text larger, which of the following would you choose?
1. Select the text and apply “Heading 1.”
2. Select the text and apply bold, plus apply a larger type size.
3. Either of the above would work. The difference is:______________. (Hint: experiment and discover the important difference!)
5. What is the best way to make columns on a web page?
1. Draw guidelines across the page.
2. Create tables or layers.
3. Type the text in short lines, hitting the Spacebar between columns.
4. Use graphics to contain the text on either side.
6. The difference between a Paragraph and a Break is:
1. A Paragraph contains a complete thought; a Break doesn't.
2. You must have more than one line in a Paragraph; a Break can have only one line.
3. A Paragraph cannot change color.
4. A Paragraph has space following it; a Break has no space following it.
7. Which of the following are you not going to do?
1. Create one long scrolling page of heavy text on long lines.
2. Create a background on which it is hard to read text.
3. Type in all caps.
4. I promise I won't do any of the above.
8. How can you tell where a link is going before you click on it?
1. You can't.
2. Ask your mother.
3. Position the pointer over the link and read the status bar at the bottom of the browser window.
4. Type “link =?” in the Location box, then hit Return or Enter.
Chapter 4
1. Which of the following is not a “legal” file name, and why not:
1. designers.htm
2. tall_tales.html
3. honey bunny.gif
4. gargoyles.jpg
2. In what order should the following tasks be completed:
1. Make a folder in which to store all of your web site files.
2. Put your graphics in your web site folder.
3. Name and title the first page of your web site.
4. Type your text on the web page and add your graphics.
3. What does it mean to save and name your web page:
1. You must save it with an HTML file name.
2. Every basic web page is an HTML file, so you must save it as such.
3. Browsers recognize HTML files as web pages, so you must name each page (of a basic site) with an HTM or HTML file name.
4. All of the above.
4. Why should you title your web page:
1. The title is what appears in the title bar in the browser.
2. The title is what appears in a visitor's bookmark or favorite list.
3. The title is used by many search engines to add the site to their databases.
4. All of the above.
5. What restrictions are on title names, as opposed to file names?
1. No capital letters.
2. No spaces.
3. No apostrophes.
4. None of the above.
6. If you make graphics, what reason could there be for saving the original, high-resolution files that won't be used in the web site?
1. You might need them for print media.
2. You might need to go back and make changes or corrections.
3. You might need to make more of the same, such as buttons.
4. All of the above.
7. Why should you establish a relationship with a host provider before you make your first web page?
1. They need to tell you how to name your first page.
2. You might need to take out a loan.
3. They need to reserve space on their server.
4. It takes several weeks to set up a system for you.
8. If you must rename or move a file, how can you fix the code?
1. By hand.
2. Delete the old file from the page and replace with the new file.
3. Use site management software.
4. All of the above.
Chapter 5
# Your corporation has an annual report that must get to every one of its stockholders.
Print
Web
Why?___________
# You're a graphic artist and you want to relocate from a small town to a big city. You can print up four-color brochures to send to all the ad agencies and studios, or you can put part of your portfolio in the mail, or you can send every agency and studio your web address.
Print
Web
Why?___________
# You're a small software company and every few months you have updates to your software. You need to notify existing customers and find a way to get them the updates.
Print
Web
Why?___________
# You have valuable information that your clients pay a lot of money for. But the information changes regularly—sometimes as often as weekly.
Print
Web
Why?___________
# You're a teacher/businessperson and you have a great collection of small booklets that are extremely useful for your students/clients. You know the rest of the world would like the information, but publishers complain the booklets are too small and don't want to deal with them. Because your readers' responses have been very strong, you are willing to publish the booklets yourself.
Print
Web
Why?___________
# Your sweetheart has decided it is time for the world to recognize the phenomenal breadth of your artistic talent. She wants to compile a high-quality collection of your life's work.
Print
Web
Why?___________
Chapter 6
Self-Guided Tour of the web
Watch for the following sorts of design concepts on the web. You might want to save a bookmark or favorite of several of the worst pages you find so you can use them in the quiz on the next page.
* Go to ten different pages, chosen at random. How many of the pages utilize strong alignments in the layout? How many have an arbitrary mix of alignments? Which pages have more organized, clean presentations, and why do they appear that way?
* On every web page you look at from now on, notice how elements have been aligned. Spend a minute to put into words what the page looks like, how it affects you. When viewing a messy page, think about how it might look if things were aligned.
* On the next ten web pages you see, consciously note how the principle of proximity affects your instant impression of the page and what it is trying to communicate, both positively and negatively.
* Choose three web pages that are oblivious to the principle of proximity. Put into words how the lack of proximity disrupts the design layout, and how it disrupts the communication process. Think of solutions and put them into words.
* Go to several large, corporate web sites. Try some museums or art sites. Poke around in the pages and put into words what the designers have done, using repetitive elements, to unify all the pages of their sites.
* If the designers didn't do a very good job, put that into words also: Why doesn't the site appear unified? What could be done to make it unified? Do you see why it is important to use repetition?
* Find pages where the “rules” have been consciously broken, yet the pages communicate clearly. Put into words how the designer did this.
* Find two pages where the contrasting elements disrupt the natural flow of the page. What can be done to improve those pages?
Oh boy, it's a Quiz!
Do some simple redesigning of two of your own web pages. Open them in your web authoring software. Print the pages as they are right now, then print them again after you do some easy rearranging.
1. Check the alignment. Remember, this doesn't mean everything is aligned on one edge—you might have three columns, but they should all be left-aligned (not two left-aligned and one centered, for instance), or maybe they're all centered under a centered head. Just don't mix alignments.
Does everything on the page have some visual connection with something else on the page? Can you draw a straight line from the edge of each item, such as a block of text, to the edge of another?
2. Group similar elements into closer proximity. Make sure headlines are closer to their related body copy than to the text or graphics above them.
* If a headline is two lines, make sure the lines are close to each other.
* Make sure captions are close to their photos.
* Make sure subheads have more space above than below them.
* Make sure there is enough space between elements that are not similar.
* Make sure the spatial arrangements provide a visitor with instant visual clues as to the hierarchy of information.
3. Create repetitive elements. Especially if this page is part of a larger site (which it probably is), create repetitive elements that will let a reader know instantly that this page is part of the complete site. The repetition might be as simple as a color scheme, a consistent background pattern, an arrangement of elements, graphic headlines, a navigation bar, etc.
* Even if your entire web “site” is only one page, that page could probably use some repetitive elements to unify the various pieces. Find something you're using already, such as bullets, and make them interesting (but not big) bullets—those can be your repeating element.
4. Create contrast in appropriate places. Avoid a flat, gray page. Use a background that contrasts with the text and graphics.
* If there isn't one already, establish a hierarchy of information so the reader can easily skim to the section they need. Use contrast of size and weight (boldness) to create the hierarchy.
* Pick up a color from your color scheme and use it in headlines and important words.
Chapter 7
Self-Guided Tour of the web
This time on the web, focus on the interface and the navigation of each site. Ask these questions:
* Do you instantly understand what the web site is about or what it's for?
* Do you know what to do when you get there?
* Are the links clear about where they will take you?
* Can you easily find your way back to the home page or to other sections?
* At least on the home page, does the entire page fit inside your window so you don't miss anything, so you don't have to scroll, so you see the entire design of the site in one screen?
* Is the text easy to read? Are the graphics easy to understand?
* Does the page make you nervous by having too many links on it?
* Or too many graphics?
* Or too many moving parts that don't stop?
* On a large site, is there a site map that lets you see the structure of the entire site and find the page you want without having to search through every link? Start a collection of the various sorts of site maps you find.
* Turn the graphics off. Can you still get around?
* Do the graphics complement the content and navigation by establishing an appropriate personality for the site? Or is the site personality-challenged?
* Does something about the site catch your attention and tempt you to explore further? Or after one glance do you think, “I wish I were doing something more interesting, like watching a 200 -megabyte file download.”
* Does the page look junky? If so, is it because of thoughtless design or because the site is getting filthy rich from all the advertising placed on it? (Under the right circumstances—like offering you piles of money— you may be able to design around junk.)
