Step One

Main Site Root Folder

The Main Site Root Folder is where all of the information about the site will be stored. Content for this Folder will include a separate folder for CSS, one for images, a downloads folder, the index.hmtl, etc... If you do not tell Dreamweaver where the Main Site Root Folder is, it will make one for you, which will mess up your progress. Additionally, if you move your Site Root Folder, Dreamweaver will not be able to find it, and it will "break."

More Details:

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

HTML Sandwich

HTML stands for Hyper-Text Markup Language, and it is linear, so it is read from the top to the bottom. The HTML Sandwich is a clever way to think of all of the different "ingredients" of HTML. The small flag on top of the sandwich is the doctype. The top bun is the beginning of the HTML, and it includes the metadata (with the head). The insides of the sandwich includes all of the body. Finally, the bottom bun is the closing of the HTML.

More Details:

HTML Sandwich
- HTML is linear
- It goes from top to bottom
- It includes four sections

  1. 1.) doctype
    2.) html
    3.) head
    4.) body
The HTML Sandwich Structure
- Flag in top of sandwich; begins with Doctype HTML
- Top bun of sandwich; begins the
- Head portion / Meta data This is known as simply metadata.
- Fillings of sandwich; Body, which is what is visible on the page - Bottom bun of sandwich; ends with

Text HTML Tags

HTML tags apply to text to give it a different appearance. For example, h1 - h6 changes the size of the typeface for different types of headers/titles. h1 is the biggest while h6 is the smallest. Additional tags include p for paragraph, b for bold, an i for italics.

CSS = Style

CSS is the style of your text. There are three ways to deal with or insert your CSS. 1.) Make a separate CSS sheet, which is the ideal way. 2.) Put the CSS inside of the head section of the hTML. 3.) Apply it in line, which is the least efficient.

More Details:

Common CSS attributes / properties…

float:
Almost every structural element on your web page will have a float attribute. If you forget to add this, the element will probably not end up on the screen where you intend it to be. I again strongly suggest you always use float: left. When you do so, all elements respond to one another and it's easier to make corrections.

width:
Use percentages (%) for widths. Always think about 100% being the magic number. If a space is shared by several elements inside a main element, figure out how to make the grand total of the elements equal 100%. Do remember that padding and margins contribute to the overall width. Some experimenting and math is required.

height:
Normally "auto" is the best setting here (meaning you don't have to use this property at all!) If you don't include it (thus, setting it to default height: auto) then the element will expand or contract with the content inside the element. More text/pictures equals a bigger box, less content equals a smaller box. On the rare occasion when you want to set a strict height, do so in pixels (ex. height: 100px). This elements height will probably have to be adjusted in media screens to work properly on different devices.

background:
You can set an image or a color as background. You can do this more specifically with… background-color: aliceblue; (or any other color).

or

background-image:
url("../images/Review.jpg"); (of course you can set the background image to be any form of properly formatted pixel image)

padding:
(Remember: Padding pushes in)

margin:
(Remember: Margin marches out)

boarder:
(this applies to all four sides)

border-top:
5px solid red; border-left: 24px solid blue; border-right: 10px solid blue; border-bottom: 10px solid blue;

max-width:
There are times this is very useful. For example you don't want your elements holding text to become so wide that you have a line-length error (remember the 72 character rule?). Although it is more difficult to control we can still experiment, setting our max-width and confirming in a browser that the lines aren't too long.

Another possible problem is that others are viewing your website with the text displayed larger or smaller than you are setting it to. So again, we can't control all the variables, but we can make some general perammiters.

max-height:
display:
pseudo-classes:

Uncommon CSS
flex:
Can be used to make columns of equal height, but often interferes with other standard CSS attributes.

Rounded Corners:
(not approved by World Wide Web Consortium yet, but approved by browsers. So we have to use different code for the browsers)

Rounded Corners - Approach 1: All corners the same
border-radius: 10px; /* future proofing */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Rounded Corners - Approach 2: Corners different border-radius: 10px 20px 30px 0; /* future proofing */
-moz-border-radius: 10px 20px 30px 0;
-webkit-border-radius: 10px 20px 30px 0; opacity: Rare position: z-index: outline:

HTML = Content/Structure

HTML is made up of two things: content and structure. Content includes images and text. Structure includes body, header, main, footer, and columns.