1 / 16

Building a Website: CSS Layouts Part 2

Building a Website: CSS Layouts Part 2. Fall 2013. Create a Complete Page Layout Seven Box Layout. width: 150px height: 50px top: 5 left: 10. upperLeft. upperRight1. upperRight2. width: 50px height: 50px top: 5 left: 700. width: 50px height: 50px top: 5 left: 760. main.

onella
Download Presentation

Building a Website: CSS Layouts Part 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building a Website:CSS Layouts Part 2 Fall 2013

  2. Create a Complete Page LayoutSeven Box Layout width: 150px height: 50px top: 5 left: 10 upperLeft upperRight1 upperRight2 width: 50px height: 50px top: 5 left: 700 width: 50px height: 50px top: 5 left: 760 main width: 800px height: 600px top: 65 left: 10 width: 150px height: 100px top: 675 left: 660 width: 450px height: 100px top: 675 left: 185 width: 150px height: 100px top: 675 left: 10 lowerRight lowerMiddle lowerLeft

  3. upperLeft • Open a new web page • Save as index.html • Click on new style • Select ID in dropdown box for Selector Type: • Type #upperLeft in Selector Name: • Select New Style Sheet in Rule Definition: • Name the file layout.css • Click OK

  4. upperLeft (cont.) • Click on Positioning in left pane • Position: absolute • width: 150px • height: 50px • top: 5 • left: 10 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  5. Place upperLeft <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After start of tag from dropdown menu • ID: upperLeft from dropdown menu • OK

  6. upperRight • Click on new style • Select ID in dropdown box for Selector Type: • Type #upperRight in Selector Name: • Rule Definition: layout.css • Click OK • Click on Positioning in left pane • Position: absolute • width: 50px • height: 50px • top: 5 • left: 700 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  7. Place upperRight <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After tag <div id=“upperRight”> from dropdown menu • ID: upperRight from dropdown menu • OK

  8. upperRight2 • Click on new style • Select ID in dropdown box for Selector Type: • Type #upperRight in Selector Name: • Rule Definition: layout.css • Click OK • Click on Positioning in left pane • Position: absolute • width: 50px • height: 50px • top: 5 • left: 760 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  9. Place upperRight2 <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After tag <div id=“upperRight”> from dropdown menu • ID: upperRight from dropdown menu • OK

  10. main • Place main <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After tag <div id=“upperRight”> from dropdown menu • ID: main from dropdown menu • OK • Click on new style to create #main • Select ID in dropdown box for Selector Type: • Type #main in Selector Name: • Rule Definition: layout.css • Click OK • Click on Positioning in left pane • Position: absolute • width: 80px • height: 600px • top: 65 • left: 10 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  11. lowerLeft • Place lowerLeft <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After tag <div id=“main”> from dropdown menu • ID: lowerLeft from dropdown menu • OK • Click on new style to create #lowerLeft • Select ID in dropdown box for Selector Type: • Type #lowerLeft in Selector Name: • Rule Definition: layout.css • Click OK • Click on Positioning in left pane • Position: absolute • width: 150px • height: 100px • top: 675 • left: 10 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  12. lowerMiddle • Place lowerMiddle <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After tag <div id=“lowerLeft”> from dropdown menu • ID: lowerMiddle from dropdown menu • OK • Click on new style to create #lowerMiddle • Select ID in dropdown box for Selector Type: • Type #lowerMiddle in Selector Name: • Rule Definition: layout.css • Click OK • Click on Positioning in left pane • Position: absolute • width: 450px • height: 100px • top: 675 • left: 185 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  13. lowerRight • Place lowerRight <div> • Click Insert at top of Dreamweaver • Select Layout Objects • Div Tag • Insert: After tag <div id=“lowerMiddle”> from dropdown menu • ID: lowerRight from dropdown menu • OK • Click on new style to create #lowerRight • Select ID in dropdown box for Selector Type: • Type #lowerRight in Selector Name: • Rule Definition: layout.css • Click OK • Click on Positioning in left pane • Position: absolute • width: 150px • height: 100px • top: 675 • left: 660 • Click on Border in left pane • Style • Check Same for all • Top: dotted • Width • Check Same for all • Top: thin • Click OK

  14. Create a Complete Page LayoutEight Box Layout upperLeft upperRight1 upperRight2 main lowerRight2 lowerRight1 lowerLeft1 lowerLeft1

  15. Create a Complete Page LayoutFive Box Layout

More Related