Design Concepts

1. Create a new folder called Concepts
2. Import a file into the Concepts folder:  Shared/Versteeg/Web Design/webconcepts.htm
 3. In FrontPage, Open the page.  There will be a table at the top.

Bookmarks Hotspots Backgrounds:    Good     Bad
Fonts Graphics Alt Text
Link Colors Long Downloads Long Scrolling Vertical Pages
Horizontal Scrolling Animations  

 

4. a. In the concepts folder, make a new page and name it "badbackground.htm".
  b. Place a heading on this page "Bad Background Example".
  c. Use your Quick links, and find a bad looking background.  Apply this "bad" background to this page to demonstrate an example of a background that makes it difficult to read the content. 
  d. You may need to use your highlighter or change the font color so we can read the text on this page.
  e.  Add a link back to the "webconcepts.htm" page.

 

5. a. Create a new page in the concepts folder and name the page "goodbackground.htm".
  b.  Place a heading on this page "Good Background Example"
  c. Use your Quick links, and find a good looking background.  Apply this "good" background to this page to demonstrate an example of a background that enhances the look of the page and does not distract from the content.
  d. Add a link back to the "webconcepts.htm" page.

6.  Put a bookmark at the top of the "webconcepts.htm" page called "Top of Page."

7.  On the "webconcepts.htm" page, find the Background cell and link the word "good" to "goodbackground.htm" and link "Bad" to "badbackground.htm".

8. a. On the "webconcepts.htm" page, put your cursor under that table a couple enters below it.  Type the word Bookmark.  Then define what a bookmark does.  Explain one advantage and one disadvantage to using bookmarks.  Under this paragraph type the word "Return"
  b. Put a bookmark on the word "Bookmark".
  c. Link the word "Return" to the bookmark at the top of the page.
  d. Find the table at the top of the page and link the work "Bookmark" to the bookmark for the Bookmark paragraph below the table

 

9. a. On the "webconcepts.htm" page, enter a few times under the Bookmark paragraph and type the word "Hotspots". 
  b. Write about what a hotspot is and what it allows the user to do.  Need 3+ sentences.
  c. Put a bookmark on the word "Hotspot". 
  c. Add a picture of a Lynx and apply a hotspot to the top portion of the Lynx.
  d. Link this hotspot to the Brandon Valley High School homepage.
  e. Under the paragraph, type the word "Return" and link to the bookmark at the top of the page.
  f. Find the table at the top of the page and link the word "Hotspot" to the bookmark for the Hotspots paragraph.

 

10. a. On the "webconcepts.htm" page, enter a few times at the bottom of the page and type in the word "Font".
  b. Put a bookmark on this word.
  c. Create a table similar to this one.

Use of Fonts
Good Fonts Styles Bad Font Styles
Arial Black Algerian
  d. Make a list of 5 good fonts and 5 bad fonts and then format the fonts accordingly. 
  e.  Type the word "Return" under the table and link to the bookmark at the top of the page.
  f. Find the table at the top of the page and link the word "Fonts" to the bookmark for fonts.

 

11. a. On the "webconcepts.htm" page, enter a few times at the bottom of the page and type in the word "Alt Text".
  b. Put a bookmark on this word.
  c. Create a table similar to this one.

Use of Alt Text
Good Alt Text Bad Alt Text
floppy disk a red floppy disk with gray bars that is not animated
  d. Use a clipart/image of your choice and add appropriate alt text on the "good side" using alt text the right way.  Place alt text on the picture on the "bad side" using alt text the wrong way. 
  e. Type the word "Return" under the table and link to the bookmark at the top of the page.
  f.  Find the table at the top of the page and link the word "Alt Text" to the bookmark for Alt text.

 

12. a. On the "webconcepts.htm" page, enter a few times at the bottom of the page and type in the word "Link Colors".
  b. Put a bookmark on this word.
  c. Create a table similar to this one.
 

Use of Link Color
Good Link Color Bad Link Color
BVHS
Student webs
Class web		 BVHS
Student webs
Class web
  d. Create hyperlinks to the BVHS site, student webs, and to the class web.  Come up with a way to show good and bad examples of 3 different hyperlink colors using these sites.  Keep in mind of the visited link color.
  e. Type the word "Return" under the table and link to the bookmark at the top of the page.
  f. Find the table at the top of the page and link the word "Link Colors" to the bookmark for Link colors.

 

13. a. On the "webconcepts.htm" page, enter a few times at the bottom of the page and type in the word "Long Downloads".
  b. Put a bookmark on this word.
  c. Visit this site and scroll down to find the section on "Your website should be quick to download".  Read this section and then IN YOUR OWN WORDS, explain the appropriate amount of time a page should take to down load and what may cause the page to take a long time to load.  Need 3+ sentences.
  d. Visit this site.  This site will analyze the content of a web page, then generate suggestions to make the page faster.  Put your web address in and analyze the performance of your web site. Under the paragraph you just typed, report your page speed score along with a priority report.
  d. Type the word "Return" under the table and link to the bookmark at the top of the page.
  e. Find the table at the top of the page and link the word "Long Downloads" to the bookmark for Long Downloads.

 

14. a. Create a new page in your concepts folder named "longvertical.htm."
  b. Put a picture of BVHS on the page.  There is a picture on the shared drive/web design folder.
  c. Make the picture 6-7 inches big.
  d. Type Brandon Valley High School as the caption under the picture.
  e. Put enters between the picture and the caption so that when you take the page out to the browsing window, you have to scroll down to see the caption.
  f. Under the caption explain why this type of design is not right.
  g. On the "webconcepts.htm" page, find the table at the top.  Link "Long Scrolling Vertical Pages", to the page "longvertical.htm".
  h. On the "longvertical.htm" page, put the word return at the bottom and link back to the "webconcepts.htm" page.

 

15. a. Create a new page in your concepts folder names "horizontalscroll.htm".
  b. On this page you will need to come up with your own way to figure out how to show a bad example of scrolling to the right. 
  c. On the "webconcepts.htm" page, find the table at the top.  Link "Horizontal Scrolling" to the page "horizontalscroll.htm."
  d. On the "horizontalscroll.htm" page, put the word "Return" at the bottom and link back to the "webconcepts.htm" page.

 

16. a. On the "webconcepts.htm" page, enter a few times at the bottom of the page and type in the word "Graphics".
  b. Put a bookmark on the word.
  c. Visit this site.  Scroll down to item #10-Use Meaningful Graphics.  Read this section and IN YOUR OWN WORDS, explain the proper use of graphics.  Use at least 3 complete sentences. 
  d. Type the word "Return" under the table and link to the bookmark at the top of the page.
  e. Find the table at the top of the page and link the word "Graphics" to the bookmark for Graphics.

 

17. a. On the "webconcepts.htm" page, enter a few times at the bottom of the page and type in the word "Animations."
  b. Put a bookmark on the word.
  c. Visit this site.  Read the section "Using animation, sound, and plug-ins in web site design".  IN YOUR OWN WORDS, explain the proper use of an animation and why you would not use animations.  Use at least 3 complete sentences.
  d. Type the word "Return" under the table and link to the bookmark at the top of the page.
  e. Find the table at the top of the page and link the word "Animations" to the bookmark for Animations.

18.  Make sure that everything listed in the table at the top of the "webconcepts.htm" page is linked.

19.  Add enters/spaces between each section so that each section will appear within the browsing window by itself.

20.  On your default page, list this assignments as "Web Design Concepts" and link to the "webconcepts.htm" page.