Building a Website: CSS Layouts Part 2 - PowerPoint PPT Presentation

building a website css layouts part 2 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Building a Website: CSS Layouts Part 2 PowerPoint Presentation
Download Presentation
Building a Website: CSS Layouts Part 2

play fullscreen
1 / 16
Building a Website: CSS Layouts Part 2
71 Views
Download Presentation
onella
Download Presentation

Building a Website: CSS Layouts Part 2

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