Kevin Valentine Interdisciplinary Arts Media Performance

September 11, 2017

Ex4 – CSS Layout

Filed under: — admin @ 2:07 PM

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

 

 

homeMED105

No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress