Main Site Root Folder
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
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.
These should be included in the folder: CSS, JS, Images, Downloads, index.HTML (homepage)
HTML Sandwich
- HTML is linear - It goes from top to bottom
- It includes four sections
1. doctype
2. html
3. head
4. body
Flag in top of sandwich; begins with Doctype HTML
Top bun of sandwich; begins the HTML
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 html
Tags
It is constructed via a set of tags. Tags are used to delimit the start and end of elements in the markup. These can reference structure, or elements such as type.
HTML Structure and Content
You can structure pages using the following HTML/CSS...
Divs - Divisions (think of them like boxes). These boxes or sections, that can have their own formatting.
Width - Adjusts the width of elements on the page.
Float - Specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
About the Positioning of Divs
Static - Basic default.
Fixed - Prevents element from moving or scrolling.
Absolute - Allows you to place elements exactly where you want them by using the positioning attributes top, left, bottom, and right to set the location.
Relative – relative to its place in the code.
Linking Pages
Creating a Hyperlink in Dreamweaver
1. In Dreamweaver, open the page where you want to create a link.
2. Select the text (highlight) or image (click on) that you want to serve as the link (meaning the text or image that a user clicks to trigger the link).
3. Click the drag-down menu "Insert". Then choose Hyperlink.
4. The Hyperlink dialog box will open. In that box, click the file folder icon, and browse for the HTML page or file you want to link to. (Note: if you pick a file, choose one such as a PDF from the "documents" folder, then visitors to your site will be able to download files). Optionally you can paste in the URL in the "link" text field and not use the file folder icon at all.
5. If you do choose use the file folder icon, you will browse your site root folder and find the HTML page that you want your text or image to link to. Once selected, click "Choose" (Mac) or click "OK" for (Windows), then dialog box will close.
6. Optionally, before closing the hyperlink dialog box, you could also set the Target field in the Hyperlink dialog box to define if your page opens in the existing web page, or if it opens a new web page.
There you have the following options:
_blank option - the linked page will open a new browser window or in a new tab within a browser.
_new - this option is not recommended because it is not standard.
_parent option – this is almost never used, but if your page is within a frameset, you can select this option to open the linked page a level above the current page in the frame structure.
_self - the linked page in the same window (this is the standard default method, no need to select).
_top - the page to open in a fresh browser window, even if the page is displayed within a frame.
7. Optionally, before closing the hyperlink dialog box, you could also set the Title field in the Hyperlink dialog box to define what the title of the link should be. This is very helpful for ADA Accessibility standards. The link will be read to those who have difficulty seeing the page.
8. It is suggested that you leave the "Access key" and "Tab index" text fields blank. They are for setting a link by the use of the keyboard. For example you could make the f1 key the active link button on the keyboard. Because this is rarely used, we recommend avoiding this option.
7. When you are done entering the information, click "OK". The Hyperlink dialog box closes and the link is set automatically. The code will be automatically written in your HTML. Test your links but uploading the page, and testing it in a web browser.
HTML= content/ text/ images and tags /linear/ series of tags
HTML: metadata (head) invisible.
Body: h1 (largest) - h6 (smallest). These need to be in between the header.
The structure of HTML is header, main, and footer
CSS = Style
This includes styles/ colors/ sizing/ spacing
1) Make a separate style sheet
2) Put CSS in metadata (head section)
3) CSS in line