This week you plan your site, build the single folder that holds it, set that folder up in Dreamweaver, and publish your first page to the SVSU server. Everything you make for the rest of the term lives inside this one folder.
How to read this page: first come the instructions — everything you do this week, with the videos. After the instructions, one gray-blue box gathers all the material for your Step 1 page — rewrite it in your own words. Text shown as code is the kind of thing you type onto your page.
INSTRUCTIONS
1 · Plan first: the Concept Sheet
Before a single folder or file, decide who your site is for. Download the Concept Sheet, watch the walk-through, and complete it: your target market, the strategy to appeal to that market, and your first rough concepts for the project.
Watch the video, then build your site root folder with its four lowercase sub-folders (css, images, js, downloads). Keep the folder in one place, and keep a backup on separate storage.
3 · Set up the folder in Dreamweaver
If you use the SVSU lab computers, you must point Dreamweaver at your site root folder every class — the lab machines do not remember it. On your own computer you do this once.
1) Open the drop-down menu Site
2) Choose Manage Sites…
3) In the lower-right corner, click New Site
4) Give the site a name (MSRF, for Main Site Root Folder, works well)
5) Click the small folder icon across from Local Site Folder and select your site root folder
6) Click Save
4 · Publish to the server
Once Dreamweaver knows your site root folder, enter the server settings below, then watch the video to move your files to the server. When they are uploaded, your site is online for the whole world to see.
Server Settings (reference — for setup, not for your page)
Connection name: PersonalSite
Protocol: WebDAV
Server address: https://vdrive.svsu.edu/htcomnet/hcwebdav/0/Home%20Folder/public_html/
Your SVSU username and password
Your site’s web address: https://mypages.svsu.edu/username/
5 · When your changes won’t show up
Two things trip up almost everyone. First, files sometimes need to be synchronized, put, or deleted-then-synchronized before the server matches your local folder. Second, the “Chrome curse”: Chrome stores pages on your computer so they load fast, which means it may show you an old version long after you uploaded a new one. The video shows how to force both to update.
MATERIAL FOR YOUR STEP 1 PAGE
Everything inside the gray-blue box below is what you rewrite, in your own words, onto your step1.html page.
The site root folder
The site root folder is the one folder that holds your entire website. Keep it in one place and never move it. Computers are sensitive to where files sit: every time you link a file to an HTML page, code records that file’s location. Move the file later and the browser can no longer find it, and part of your page stops working. Keep a backup on separate storage.
Lowercase names, four sub-folders
Name everything in lowercase, always. Inside the site root folder, keep four sub-folders:
Every HTML page sits directly in the site root folder, never in a sub-folder. A file in the site root sits directly after the domain in its address: mysite.com/about.html. The site root folder’s own name never appears in the address.
index.html is the automatic home page
Name your home page index.html. When a visitor types just the domain with no file name, the web server automatically looks for index.html and loads it. That is why the home page appears without anyone typing its file name.
Work Due — Friday, September 11
This week you build and upload two pages:
• index.html — your home page
• step1.html — your notes, from the gray-blue material above, rewritten in your own words
Steps to get there:
1) Complete your Concept Sheet: target market, strategy, and first rough concepts.
2) Download and set up your Main Site Root Folder; keep a backup on separate storage.
3) Point Dreamweaver at the site root folder.
4) Build both pages: index.html (home page) and step1.html (your notes). If we cover linking in class, add a link from index.html to step1.html.
5) Enter the server settings and publish your site root folder to the SVSU server — both pages go online.