ETT 429 Spring 2007 Web Design Basics II

Publishing Web Pages Activating your NIU website Go to this link and follow directions Login Under student utilities – “Activate My Personal Webspace” ITS student utilities hp Link found under NIU  Current Students  ITS Student Utilities

WWW folder Once you have activated your account A WWW folder will appear in your ZID drive Any files put in this folder will be available to the web To get the URL for your web page, you add /~ and then your z-id to e.g., Default file = index.html (not index.htm) Likewise, if you create folders within your www directory, the default page for each folder is index.html.

Basics of web publishing Upload Download Server Personal Computer (PC) FTP – File Transfer Protocol PCServer Uploading Downloading FTP

Steps in Uploading On your PC 1. Make/edit the webpage 2. Save the webpage 3. Preview the webpage (still on your PC) 4. If correct, then go to step 5, if incorrect go back to step 1 Upload from PC to Server 5. Copy file from PC to WWW folder in ZID drive using Windows Explorer

Caveat Be aware: It can be confusing to have different versions of the same file exist (one on the server and one on your computer) Once you copy over a file, the other one is gone forever (no take-backs) Therefore, be careful when you upload/download

To FTP from home (optional) TO FTP from home using Mozilla, follow steps listed on this ITS website: entation/mozilla_web_pages.shtml

Multi-page websites Store all files in same folder on both PC and server (for simplicity of links) Use relative links between pages Remember the rules of html file names No capital letters No spaces index.html – the default page (only one per folder)

Within document links review (anchored links) Insert an anchor – where you want the link to go (e.g., anchor at top of page) Under Insert  Named Anchor… Name it appropriately (e.g., top, bottom) To make a link to that anchor highlight text Click link Type # and anchor name (e.g., #top)

Web Design Project Layout of links for Web Design Project class.html images.html links.html

Web Design Project Download Web Design Project and begin work on it.