Ex4 – CSS Layout

Ex4- CSS Layout

In this lab you will continue to explore the layout and design. This time you will apply CSS to position your divs.

Step1: setup

• copy the emptyWeb folder from the common folder to your K: drive labs folder
• rename the folder Ex4-CSSLayout
• open the index.html file in the layout folder with Dreamweaver
• in code view, delete everything in the content div (leave the div tags in place)
• place Dreamweaver in split view

Step2: add a new class to format a div

• in code view copy and paste the following CSS class definition into the head of your page in the styles section (between <style> and </style>)
  • this code will be used to apply a style to a div
    .pic1
    {
    position:absolute;
    left: 65px;
    top: 217px;
    width:400px;
    height:196px;
    z-index: 1;
    }
• in the head of the document find the definition for class content
  • the 4th line down controls the height of the content area (//height: 1500px;), remove the // (comment operator IE the //)
    • look at your page in design view. Your content section changed size and is now 1500 pixels high
    • change the 1500 to 800. Your page is now 800 pixels high.
• find a small picture and copy it into the images folder of your layout2 folder
• insert the image into the content area
• in the code find the new <img> tag and insert a space after the img name ( just before the >)
  • a pop-up menu will appear, select class and then pic1 as the class to use to format your image
• in design view your picture now has a blue border on it
  • place your mouse cursor on the border and drag the image to a new location and let the mouse button up
    • in the class code, the x, y position has changed
  • the image will stay at the new location. You can now position it anywhere you like on the page
• save your page

Step 4: formatting div text

• paste the pic1 code from step 2 into your document head under the original pic1
• rename the class text1
• in the code add a new <div> </div> tag pair inside the content div
• add some text in the new text1 div
• in code view, find the new text1 div and insert a a space after the <div (similar to step 3) and this time assign class text 1 to format the div.
• resize the div to fit your text and move it where ever you want it on the page

Step 5 making a beautiful page

• you are now a designer with the power to place items anywhere.
  • continue working on the page by modifying existing elements and adding new elements to create a page that is an attractive ‘poster ad’ for a new product or service
  • this lab will be scored on your ability to use CSS to create a nice looking page

home  MED105