Abigail Leinberger

Welcome to my Step Page!

Step 5



HOW TO STRUCTURE LAYOUT



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. There are two different types of Divs: ID Divs and class Divs. ID Divs are used for sliding things up and doen on your page and can really only be used for one thing. Only one should be used per page and they start with #. Class Divs are best used when that can be used for multiple things on your page, like creating a solid color for multiple text boxes. You can have multiple on one page, just don't go crazy with them, and they start with " . ". Both of them you can name them whatever you want but don't use spaces or any marks. Also, make sure you put a note at the end of each div in your HTML as they all end like </div>. In order to make that note you would write <!-- -->.

  • Width - Adjusts the width of elements on the page. Max-width also exists but is mainly used for the main or when you want to insert an image with through HTML.

  • 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. Most things on your webpage will be this and will not change.
  • Fixed - Prevents element from moving or scrolling. Footers and logos can be fixed
  • 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. Logos could also be absolute.
  • 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.


Linking Pages



Creating a Hyperlink in Dreamweaver


  1. 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.


  • 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.

  • 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.

  • 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.

  • Make sure that you sync up your webpage every time you make a new link. If you don't, when you go to your webpage, there will be no working link.