HOME

Day 1

Day 2

Day 3

Day 4

Terms

LINKS

DAY 4
Build Your Own Web Page

I.   What Not to Do (Activity)

• www.webpagesthatsuck.com offers a little guidance on what is considered annoying or bad design.  View this page before you finalize you page for uploading.  Make any adjustments you find necessary. Remember, the ideas offered are only suggestions...you may have a very valid reason for doing something "wrong".

II.   Work your plan (Guided Activity)

• Remember you purpose, audience, content, navigation, theme, and layout ideas from Day 1? Let's put all that to good use!  Create directories if needed, and finish your page.

• For grins, we will create an account on Tripod (you can delete later) to use for uploading your page and files.
  Go to www.tripod.com and click on the Sign Up Now section.  Follow the on-screen instructions, fill out the forms, and select a sub-domain name.  It will be http://yourname.tripod.com.

• Now, go to the File Manager.

• If you need directories, click on Create Directory button as soon as you get to the file manager area --- name them the same (case-sensitive!) as they are named in your hard drive files.

• In the file manager area, upload the files to your Tripod server space (don't forget your graphics!) by clicking "single files (8)" in the "upload via" box.  You will go to a form/checkbox area that will let you upload up to 8 files at a time.  Click browse and go to the drive/directory where your page and its files are stored.   When you have all your files listed, or all the boxes are full, click on the "Upload" button.  If you make a change to your page and want to reload the changes, be sure to check the little "Allow Overwrite" checkbox before you click upload or it won't replace the old version of the file.

• Now in the browser window, type in the URL (http://yourname.tripod.com) for your new page and see if it looks all right.  If not, open FrontPage, make adjustments, save changes, and then upload it again (don't forget to tell it to overwrite the old version of the file!).

III.   Break

IV.   De-Bugging (Guided Activity)

• When you are using FrontPage, you can check for "bugs" with its special tools and commands. 
  REPORTS -- (View/Reports/SiteSummary OR the Reports icon on the View Bar at the left) this command will let you see a menu of the different troubleshooters available....check on what's new, what links are working, what pages are taking too long to load, etc.  
  SPELL CHECK -- click the ABC with a checkmark icon or Tools/Spelling from the menu bar.
   

• If you don't have FrontPage at home and are using FrontPage Express, you can use Dr. HTML http://www2.imagiware.com/RxHTML to do an online check-up for your page. Click on "Single Page Analysis" and type in the URL for your new Tripod web page. Leave the report format at "Standard" -- it will offer little explanations to you of what is wrong when it generates the report.

• Leave all the boxes checked in the middle area -- we're going to do a thorough diagnosis! 

• Below the table of checkboxes is the area for you to type in your username and password for your Tripod account (remember it is case-sensitive!). 

• Click GO!

• The report will tell you if you have any possible errors.  Scroll through and see what you might need to fix.

• If you have anything REALLY drastic that you need to take care of, open FrontPage, edit your page, and then upload it again.

V.   Evaluate

• Use one or more of the following to help you critique your site:
  Web Evaluation for Primary Grades
  http://www.siec.k12.in.us/~west/edu/rubric1.htm  
  
  SCORE Web Page Design Rubric http://www.sdcoe.k12.ca.us/score/actbank/WebPageDesign.html
  
  CyberKids WebPage Design Rubric http://cyberkids.ccsd.k12.wy.us/SV/Business/CompLitWeb/wpdesignrubric.html

VI.  Extras and Advanced Goodies

• Here are some good starting points for when you are ready to add some spice to your site.
  
  CometCursor (those cute little cows and heart guy like Shelli has on her site)
  http://www.cometcursor.com
  DynamicDrive DHTML (effects codes like mouse trailers and clocks for your page)
  http://www.dynamicdrive.com/
  TheFreeSite Webmaster Freebies (links to free counters, guestbooks, etc.)
  http://www.thefreesite.com/Webmaster_Freebies/
   

• Themes
  Themes are formats for pages/sites in FrontPage that have matching background graphics, navigation bars, and navigation buttons already coordinated for you.  They can look very professional, but it is best to have the basic pages and directory layouts already done and saved before you apply the theme.

• Open a page you want to use a theme on.

• Click Format, Theme from the menu bar.

• Check the bubble for applying the theme to ALL pages of your web or just the page you have open.

• Scroll down the list of theme names and choose one that you like--if you click on the name once, you will see a preview of it in the window.

• Click OK.

• Click Insert, Navigation, Link Bars from the menu bar.

• If you want your bars and button links to  be able go to places outside your own website, choose the Custom Links.  (If you want your bars and button links to automatically navigate throughout your website only, choose Based on Navigation Structure...this can be tricky if you're not sure of your folder hierarchy. I prefer the Custom Links because you can browse to your own pages & files, anyway!)

• Click Next.

• The first choice for button types in the next window are defaulted to whatever your page's theme is set for.  You can also scroll down and choose other options, instead.

• Click Next.

• Choose whether you want your buttons and bars to be up and down or side to side on your page.

• Click Finish.

• In the next window, click  the Add Link button and you can browse for which page you want to be able to click to.

• You can also check the little bubbles to the right to make sure that you have a "Home" button and a "Back"-type button for the main page of a section.

• When you click OK and go back to your page, you will have the buttons or bars for your theme with links to whatever files or webpages you told it to go to.  You should also notice some text after your last button that you can click to add more buttons!

• Modify the words on the buttons with a right-click and choosing Link Bar Properties.  Then click the Modify Link button and you can change the word or words that the buttons say...even change the URL address or file path that it goes to!
  
   

• One more trick:
  To have the same link bar or buttons appear on every page, create a page JUST for your navigation bar....then at the top of every page before you start creating, click

• Insert, Web Component, Included Content, and choose page in the right-hand window.

• Click Finish.

• Then you can browse for the page with your navigation bar and insert it into the top (or side) of every page.

• THE COOL THING:  if you need to make a change to a button or link on your navigation bar, you only have to change the navigation page...not every page that had the bar on it.  FrontPage will update it automatically!

MFISD Continuing Education Course

Instructor: Shelli Spruiell
sspruiell@marblefalls.txed.net