About the main site root folder
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
About the HTML Sandwich notes
HTML Basics
HTML Sandwich - HTML is linear - It goes from top to bottom - It includes four sections 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 withTags
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.
header1 HEADER /header1
header2 HEADER2 /header2
body BODY /body
footer FOOTER /footer
Some HTML History
- 1989: Tim Burners-Lee invented the World Wide Web to share text information
- He originally called links anchors, which is why we use (a) to represent links
- href = Hyper Reference
- Media screens allow sites to transform for mobile
- States = Hover/Click
- Divs = Divisions/Boxes div
Creating Links
- highlight word or image
- click on drag-down menu Insert and choose hyperlink
- confirm the correct text or image is chosen in first line
- for an internal link (your own site) - in second line click on the folder icon and pick another html page
- for an external link — in the second line paste the complete URL of the site or page you want the link to lead to
- if you want the link to open a new page (rather than replace the current page) choose _blank in line three Target
- to help with accessibility fill in the Title to explain the link
HOW TO STRUCTURE LAYOUT AND LINK PAGES
HOW TO STRUCTURE LAYOUT
There are basically four methods:
1) WATER (no CSS - content fills screen - no controls)
2) FLOAT (using CSS with float left, and width persentages to organize layout)
3) GRID (new CSS - verticle columns of equal width)
4) FLEXBOX (new CSS - verticle columns of unequal widths)
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.
9. 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.
About the CSS = Style notes
CSS Coding for Structure (FLOAT)
Tags normally used for structure
header
nav
main
article
section
footer
aside
However, any name can be used for a class or ID div (division) tag. When using divs do make sure you add HTML comments at the end div. Otherwise it is very easy to forget which end div goes to what element. /div
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;