Step 5

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)

MORE ABOUT THE FLOAT TECHNIQUE

You can structure pages using the following 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 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.
• 3 DIFFERENT WAYS TO CODE CSS
• Make a CSS style sheet sheet and attach it. Put CSS in head portion of HTML code. Place it in line <style=______>
• X, Y, Z
• X-axis: Horizontal axis of the page.
• Y-axis: Vertical axis of the page.
• Z-index: Allows objects to move forward (up) or backward (down) on the page, like an elevator. The lower the number, the further back it will be from the screen, and the higher the number, the closer it will be to the screen
• An X,Y-axis of 0,0 would start at the top right of the page.

TAGS

• <header>
• <nav>
• <main>
• <article>
• <section>
• <footer>
• <aside>
• any name can be used for a class or ID <div> (division) tag.

COMMON

• float:
• width:
• max-width:
• height:
• background:
• padding: (Padding pushes in)
• margin: (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:
• max-height:
• display:
• pseudo-classes:
• opacity:
• flex:

UNCOMMON

• 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:
• max-height:
• z-index:
• outline:

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.

3 DIFFERENT WAYS TO CODE CSS

1. Make a CSS style sheet sheet and attach it.
2. Put CSS in HEAD Section of HTML code.
3. Place the CSS in the HTML - inline style=______

X, Y, Z

• X-axis: Horizontal axis of the page.
• Y-axis: Vertical axis of the page.
• Z-index: Allows objects to move forward (up) or backward (down) on the page, like an elevator. The lower the number, the further back it will be from the screen, and the higher the number, the closer it will be to the screen.
• An X,Y-axis of 0,0 would start at the top right of the page.

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.
7. 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.
8. 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.
9. 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.
10. 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.