Step 2

Understanding the Site Root Folder

Main Site Root Folder (MSRF)

The Site Root Folder is key to your projects success. Computers are very sensitive to the placement of files. Every time you link a file to an HTML page, code is written identifying the location of that file on your web page. If the file is later moved, the computer will not find the linked file and some of your web page will not function.

For these reasons, please commit to keeping the Main Site Root Folder in one place and never moving it. It can be saved to any form of storage, as long as Dreamweaver can easily see the folder when it opens. I suggest a flash drive. It is also very wise practice to backup this folder on another form of storage in case the original is lost. (You do not want to build your site over from scratch!)

Next, if you are using the SVSU Lab Computers every time you turn on Dreamweaver, you will have to identify where the Site Root Folder is. I have named the Site Root Folder we are using for the Work Site, the Main Site Root Folder.

To explain to Dreamweaver where the folder is, follow these steps…

1. Go to the drag down menu, Sites
2. Choose Manage Sites…
3. In the lower right corner, click on New Site
4. Give the Site a Name (I suggest MSRF, for Main Site Root Folder)
5. Click on the small folder icon, across from the words “Local Site Folder”
6. Then click on Save

Things to Remember...

Again, if you will be using the SVSU Lab Computers, this will have to be done at the start of every class. If you are using your own computer, it will remember these settings and you will only have to enter this once.

As stated before, please do not move the placement of the Main Site Root Folder. The same applies to any items that should be stored in your Main Site Root Folder. For example, you cannot keep your index.html (home page) on one flash drive, outside of your Main Site Root Folder. That is because the computer will have a very difficult time locating them outside of the Main Site Root Folder.

Also, even if Dreamweaver could find a rouge file outside of the Main Site Root Folder, it would not be able to share the file with the rest of the world when the website is published. If however, you keep the proper files in their correct location and structure, you will have an easy time publishing your site for the world to see.

CSS Files

Generally, there should be one CSS file per website

(Warning: changing elements will carry over to pages with the same CSS file)

(New elements can also be created to change later)

Creating a New Page

You can build off of the HTML page you have already created by saving the file under a different name and deleting unnecessary elements.

Create a new HTML page and save it in the MSRF (Example: summary1.html)

Make sure that you have a short file name that is in lowercase with no spaces, dashes, or special characters.

Also, change the title of the page at the top of the HTML to reflect the new page’s content.

Class DIV

DIVs start with a period and are created first in the CSS before being inserted into the HTML.

Make sure to highlight what you want the DIV to apply to before inserting it into the HTML.

Leave a programmer’s note to keep track of what type of DIV you have created.

Type

Typefaces can be applied to a website via Google Fonts. Find the desired font via Google Fonts and then copy the link into the HTML as well as the CSS (Google FDonts shows you the code you need to use).

Type tags go from h1 to h6 (largest to smallest) and more cannot be created.

h1 through h6 can be changed in the CSS

There are various ways to change the way the text appears, such as color, text-align, font-style, text-decoration, etc.

• Font size unit of measurement = 1em (~16px) (ems will scale with screen size)
• Font width unit of measurement = 100 - 900 (light to heavy)

Type Tags

• <p> = paragraph
• <b> = bold
• <i> = italic
• <br> = break
• <strong> = bold, greater hierarchy
• <em> = italic, greater hierarchy
• <pre> = for displaying code (such as spaces between words)
• &nbs; &nbs; &nbs; = non-breaking space

HTML symbols

All symbols start with “&” and end with “;" (Example: < >)

See W3schools for more HTML symbols.