Web Design - Css Layout (Page 1)

Web Design - Css Layout (Page 1) A CSS layout is made up of a set of nested div tags (rectangular containers), as seen below. We will give each div tag an ID so that we can target it with a CSS style of the same name and control how the div tag looks on screen. For example, the HTML code for the global div tag will look like this: <div id="global"></div> We will then make a corresponding CSS style ( #global ) that will control the look of that div tag. title bar body global banner menu content leftcolumn rightcolumn hr footer The colour of this area is controlled by the Background property of the Body tag. The global div tag is the overall container for the site. It defines the width and height of each page. global banner menu content leftcolumn footer rightcolumn

Web Design - Css Layout (Page 2) To get started, first create a New Site called Cafe Townsend. Choose Site > New Site. In the Site Set-up dialogue box type in a name for your Site. This is one of the few places in web design where you can use spaces and capitals. Name it Cafe Townsend for this exercise. Before we start putting any content on the page we will create a CSS Style Sheet that will control all the formatting for our website. Right-click on the site folder and choose New Folder from the menu. Click on the Local Site Folder button and navigate to the folder that contains your websites. Create a new folder and name it cafetownsend. Now select Advanced Settings and click on the folder icon and create a new folder in your site folder and name it images (Note: all lower case). Any images you import from outside your site will be automatically placed into this folder for you. Name the folder css (lower-case). Now we will create our first css file. Right-click on the css folder and choose New File from the menu. Click the box next to case-sensitive links checking. Name the file screen.css (lower-case). All of the CSS Style Rules we create for the site will be stored in this page. (see 04_Css Basics.pdf for more info on CSS Styles) Now double-click on the screen.css file to open it. We will now create our first style rule. On line 3 type (or copy and paste) the following code: Click Save and your files will now show in the Files Window. Now we will create a folder to store our development files. Right-click on the site folder and choose New Folder from the menu. * { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; } } Use the Tab key to move these 5 lines one tab to the right. Make sure you don t miss out the closing curly bracket. Name the folder dev (lower-case). Now we will create our first HTML file. Right-click on the site folder again and choose New File from the menu. All browsers have built-in values for many items and unfortunately many of those values are different in each browser. This, more than anything else causes most of the problems we experience when trying to get our HTML pages to display consistantly on all browsers. The code above resets all the default values back to zero for all items on the page. The asterisk * is a wild card character used in many programming languages to include all items. Save the page and click on the index.html tab to select the index page. Name the file index.html (lower-case). Now double-click on the index file to open it. Select Modify > Page Properties. Now we need to link the CSS page to our HTML page. At the bottom of the CSS Styles Panel click on the Attach Style Sheet button. Click on the Title/Encoding and give the page an appropriate Title and change the Document Type (DTD) to HTML 5. Use the Browse button to navigate to the screen.css page we just made and select it. Choose Screen as the Media from the dropdown list.

Web Design - Css Layout (Page 3) Now we will set up some styles for browser window. At the bottom of the CSS Styles Panel click on the New Style Rule button. Choose Tag as the Selector Type, and If Dreamweaver hasn t already done it for you, enter body in the Selector Name field. Make sure the Rule Definition field says screen.css, and click OK. A new dialogue box will open where you can now specify the characteristics of the body Tag. (i.e. everything in the browser window) In the Type Category specify the styles for text on the page. These values will apply automatically to all text unless overridden by another style closer to the item being styled. Select Arial, Helvetica, sans-serif for the Font-family from the dropdown list, 12px for the Font-size and type #4C0A02 for the font colour. In the Background Category choose the background colour for the body/browser window. (i.e. #720000) In the Block Category set the Text align to center. This will automatically centre your page in the browser widow for older browsers, like Internet Explorer 7 and 8, that don t comply with standard CSS rules. In the Background Category enter the background colour you want for your page. For this exercise we ll choose #FFF (white). To counteract the center align we had to put on the body for older browsers, we will now have to set the Text Align to left in the Block Category. Global Div Now we are going to create the global div (see page 1). This container will hold all our other div Tags on our page. In the Box Category enter the width and height as shown below. Uncheck the Same for all under Margin and enter the values as below. At the top of the screen, in the Insert Panel on the Common Tab click on the Insert Div Tag button. In the dialogue box that opens enter global into the ID field and click the New CSS Style button. This sets the width of the site to 980px and the height to 720px. The auto setting for Left and Right Margin allows the page to stay centred in the browser window for modern standards compliant browsers.

Web Design - Css Layout (Page 4) Banner Div Menu Div Now we will create the container (div) for the banner (see page 1). Now we will create the container (div) for the menu (see page 1). Before we do this, copy all the files from the _assets folder in the Dreamwevaer Tutorials folder into the images folder of your site. Then move the two txt files that you just copied over into the dev folder of your site. In Code View, delete the holding text Content for id banner Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel the Common Tab click on the Insert Div Tag button. In Code View, delete the holding text Content for id global Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel on the Common Tab click the Insert Div Tag button. Change Insert to After tag and change <div id= global > to <div id= banner > in the next dropdown menu on the right. Change Insert to After Start of tag and change <body> to <div id= global >. Enter menu into the ID field and click the New CSS Style button. Enter banner in the ID field and click the New CSS Style button. Confirm that the dialogue box looks the same as the one above. In the Background catergory choose #000 (black ) for the Background Color. Confirm that the dialogue box looks the same as the one above. In the Background catergory choose black for the Background Color. Then click the Browse button next to the Background image field and select the banner_graphic.jpg that is now in the images folder. In the Box catergory enter the width as 940px and height as 30px. Uncheck the Same for all box and set the Top padding to 15px and the Left padding to 40px. Set the Repeat field to no-repeat. In the Box catergory enter the width as 980px and height as 115px. Click OK, and then OK again in the Insert Div Tag box. Click OK, and then OK again in the Insert Div Tag box.

Web Design - Css Layout (Page 5) Content Div Left Column Div Now we will create the container (div) for the content (see page 1). Now we will create the container (div) for the leftcolumn (see page 1). This container will hold two other Div Tags, the leftcolumn and the rightcolumn. In Code View, delete the holding text Content for id content Goes Here that Dreamweaver put in the div tag we just made. In the Insert Panel on the Common Tab click the Insert Div Tag button. In the dialogue box change Insert to After tag and change <div id= global > to <div id= menu >. In the Insert Panel on the Common Tab click the Insert Div Tag button. In the dialogue box change Insert to After start of tag and change <div id= global > to <div id= content >. Enter leftcolumn in the ID field and click the New CSS Style button. Enter content in the ID field and click the New CSS Style button. In the Background category choose #CC9 for the Background Color. We will remove this color later, but for now it will help us to see where the columns sit so we can check that the layout is working correctly. In the Box category enter the width as 940px and height as 440px. In the Box category enter the width as 420px and height as 410px. and set the Float to left. In the Padding section uncheck the Same for all box and set the Top padding to 40px and the Left padding to 40px. Also in the Box Category, set the Right Margin to 30px. Click OK and then OK again in the Insert Div Tag dialogue box. Then click OK, and then OK again in the Insert Div Tag box.

Web Design - Css Layout (Page 6) Right Column Div Clear Both <hr> Tag Now we will create the container (div) for the rightcolumn (see page 1). Because we have floated our columns to get them to sit beside each other, this can cause problems in some browsers for any content that sits below the columns. In the Insert Panel on the Common Tab click on the Insert Div Tag button. In the dialogue box change Insert to After tag and change <div id= global > to <div id= leftcolumn >. We will put in an hr (horizontal rule) tag that sits below both columns with clear both applied to it to help negate those problems. This clears the line of HTML from the effects of any floats above it. While it is possible to use Dreamweaver tools to put in an hr tag, it is faster to code it by hand. In the Code View panel put your cursor after the closing tag for the rightcolumn and press enter to create a new line. Then put in the hr tag by typing <hr>. Your code should now look like this: Enter content in the ID field and click the New CSS Style button. Dreamweaver will enter the correct info into the fields of the New CSS Rule dialogue box that next opens. Highlight the hr tag in the code and in the CSS Styles Panel, click on the New CSS Rule button. In the Background Category choose #CC3 for the Background-color. We will remove this colour later. When the New CSS Rule dialogue box that opens, change the Selector Type to Tag. Dreamweaver should automatically enter hr in the name field. If it doesn t, just type it in yourself. In the Box category enter the width as 420px and height as 410px. Set the Float to left and uncheck the same for all box for Padding and enter 30px for the Left padding. In the Box Category enter 100% for the width and choose both from the dropdown beside the Clear field. In the Border category uncheck the same for all boxes and set the Left Style to solid, the Left Width to 1px and the Left Color to #4C0A02. In the Positioning Category set the Visibility to hidden. Then click OK, and then OK again in the Insert Div Tag box.

Web Design - Css Layout (Page 7) Footer Div Left Column Content Now we will create the container (div) for the footer (see page 1). Now we will put some content in the left column. In the Insert Panel on the Common Tab click the Insert Div Tag button. Delete the holding text Content for id "leftcolumn" Goes Here that Dreamweaver put in the leftcolumn Div we made earlier and type About Our Restaurant. Highlight that text and in the Properties Panel (at the bottom of the screen) change the Format from None to Heading 1. In the dialogue box that opens change Insert to After tag and change <div id= global > to <div id= content >. In the CSS Styles Panel click on the New Style Rule button. Enter footer in the ID field and click the New CSS Style button. In the New CSS Rule dialogue box that opens, delete all the text from the Selector Name field except h1, and change the Selector Type to Tag. Make sure the Rule Definition field says screen.css, and click OK. In the Type catergory enter 16px for the Font-size and #000 for Color. In the Type catergory enter 11px for the Font-size and #FFF for Color. In the Background catergory choose #000 for the Background Color. Though it doesn t show here the Font-weight is already Bold. (a preset value built into all Heading Tags (h1-h6) ). In the Box catergory enter the Margin as shown here and click OK. In the Box catergory enter the Width, Height and Padding as shown below. In Design view put your cursor is at the end of the text we just formatted and press Enter on the Keyboard. Copy the text from the text_leftcolumn.txt file that is in the dev folder and paste it into the page. At the bottom of the CSS Styles Panel click on the New Style Rule button. Then click OK, and then OK again in the Insert Div Tag box. In the New CSS Rule dialogue box that opens, change the Selector Type to Class, and type.boldred in the Selector Name field. In Code View, delete the holding text Content for id footer Goes Here. In the Insert Panel on the Text Tab click on the dropdown menu button at the very end and select Copyright from the list. Back on the page, put a space after the Copyright symbol and type Copyright 2012, Cafe Townsend. Make sure the style is being defined in screen.css

Web Design - Css Layout (Page 8) In the Type Category enter bold for the Font-weight, #900 for the Color and click OK. On the page highlight the words The name Cafe Townsend, then in the Properties Panel click on the Class dropdown menu and change the Class from None to boldred. Insert an Image In Design View make sure your cursor is at the end of the paragraph and press Enter on the Keyboard. In the Insert Panel on the Common Tab click on the Insert Image button. Naviagte to the images folder and choose the cafe_townsend_tables.jpg. Enter Cafe Townsend inside view into the Alterante Text field. Repeat the above process for the rightcolumn using the words World Famous Chef as the h1 heading, text_rightcolumn.txt for the paragraph text, and pan_seared_sesame_crusted_tuna.jpg for the image. Highlight the words Café Townsend s visionary chef and apply the boldred style to them. At this point we can see that our layout of the columns is working OK so we can get rid of the background colour we applied to the leftcolumn and rightcolumn earlier. In the CSS Styles Panel click on the #leftcolumn style, then click the background-color and click on the trash can at the bottom of the Panel. Now do the same for the #rightcolumn background-color style. You do not need to make new h1 and.boldred styles, just apply the existing ones. (see Page 1 above for an idea of how the page should be looking ) Create the Main Menu With your cursor in Design View NOT the Code View delete the holding text Content for id "menu" Goes Here that Dreamweaver put in the menu Div we made earlier and type the words below. Press Enter after each word (except Contact Us): Make sure you have the background-color style selected NOT just the column style or you will delete the entire column. If you didn t follow the instructions above correctly and have deleted your leftcolumn or right column style you will need to select the screen.css tab before you press Cmd+Z (undo) to restore it. Create a p (paragraph) style Because we set everything on the page back to zero with the first style we made (*), it means that there is no spacing between our paragraphs, so we need to create a style to give all p tags top and bottom padding. Home Cuisine Location Reservations Contact Us If you have done the above correctly your code will now look like this: At the bottom of the CSS Styles Panel click the New Style Rule button. In the New CSS Rule dialogue box that opens, change the Selector Type to Tag and type p in the Selector Name field. Make sure the style is being defined in screen.css Things will look a little strange in Design View, but don t worry we will fix that soon. The enter we put after each item will make it easier to turn this into an unordered list later. In Design View Highlight all of the links, by clicking at the end of Contact Us and dragging up to the start of Home, and in the Propeties panel click on the Unordered List button. Your code should now look like this: In the Box catergory uncheck the Same for all box and enter 5px for the Top and Bottom padding. On the page your paragraphs will now have proper spacing between them. And, yes, the menu will still be looking strange on the page. We will fix that next.

Web Design - Css Layout (Page 9) Create Links Highlight each Menu item and in the Properties panel at the bottom of the screen type the file name of the page you want it to link to in to the Link field. For example the word Home we will link to this page (index.html). Give each link an appropriate name and remember to keep them lowercase (i.e. the link to the Cuisine page will be cuisine.html ). When you have done that your code should look like this:. Things should be looking better on the page now. The Float we applied to the list allows the menu items to sit up beside each other and the 110px margin spaces the menu items out. Highlight one of the links again and in the CSS Styles panel click on the New Style Rule button. In the New CSS Rule dialogue box that opens, change the Selector Type to Compound and delete all the text from the Selector Name field except #menu a. Make sure the style is being defined in screen.css Styling the Menu Highlight one of the links and at the bottom of the CSS Styles panel click on the New Style Rule button. In the New CSS Rule dialogue box that opens, if Dreamweaver hasn t already done it for you, change the Selector Type to Compound and delete all the text from the Selector Name field except #menu li. In the Type catergory enter 16px for the Font-size, choose bold for the Font-weight, #FFF for the Color, and none for the Text-decoration. I T Make sure the style is being defined in screen.css On the page the menu items should now be styled correctly and look like the image below: In the Box catergory enter Left for the Float and for the Margin uncheck Same for all and enter 110px for the Right Margin. Create the Menu Hover effect To give the user better feedback we will now make the menu items change colour when the mouse hovers over them. In the CSS Styles panel click on the New Style Rule button. In the List catergory enter none for the List-stye-type. This will get rid of the bullet point on the left of the menu items. In the New CSS Rule dialogue box that opens, if Dreamweaver hasn t already done it for you, change the Selector Type to Compound and type #menu a:hover in the Selector Name field.

Web Design - Css Layout (Page 10) In the Type catergory enter #C30 for the Color and click OK. Use Lorem Ipsum (holding text) for the content on the other pages. You will need to install the Lorem Ipsum generator from the Dreamweaver Extensions folder in the Resources on the server, or use the generator at www.lipsum.com. Change each image by double-clicking on it and choosing a new one from the images folder. Preview the page in the browser (F12 PC or opt F12 Mac) to see the rollover working. Creating the Other Pages Now that we have created the layout for the index page making the other pages is simply a matter of duplicating the index page and changing the text and images in the content are of the new pages. To do this make sure the index page is saved then choose File > Save As to create your other pages and name the new files the same as the links you created in the menu earlier. Remember that the file names need to be exactly the same as the links (NO Capitals and NO Spaces ). For example, the second link in the menu is to cuisine.html, so that is what we would name the new file. Choose File > Save As and name the next page location.html and so on for the other pages. When you are done you will now have five pages showing in the tabs area at the top of the screen. After you change each image make sure you change the ALT text for the image. ALT text needs to be more than one or two words and must be descriptive of the image without using the words image or picture. ALT text is just like text on the page so it can have spaces and capitals. For this exercise we will use the image file names for the ALT text. When you put the new text and images in make sure they don t go outside the bounds of the column div tags. If images or text extend beyond the div tags it can break your layout in some browsers. Now it is just a matter of changing the content on each page. Before changing the content on each page make sure you change the title on each page to make it appropriate for that page. If any of your pages look like the one above you will need to either delete some of the Lorem Ipsum text or choose a smaller image so that all the content fits within the column. Then change the text and images in each page to make content relevant for the page. First change the headings on each page to make them relevant for the page. For example, on the Cuisine page the heading in the left column would be changed to Our Cuisine and so on for the other pages. Don t worry about making any changes to the right column of the location page, we will insert a Google Map in there next.

Web Design - Css Layout (Page 11) Inserting a Google Map Now we will insert a Google Map into the Location page. In the Location page delete all the text and images from the right column. In the code view it should look like this. When you delete the content while in Design View you need to hit delete a couple of times on the keyboard after it appears that everything is gone. Look in the Code View to make sure that you have deleted all of the content. Highlight any code between the rightcolumn opening and closing tags and delete it. Delete any code between the rightcolumn opening and closing tags. Open FireFox and go to Google Maps (maps.google.com.au). Cafe Towsend doesn t actually exist so we will use the map reference for another restaurant. Type customs house restaurant, queen street, brisbane into the search field and press the search button. Once the page has loaded, click on the link button at the top left of the screen. Then Click inside the Paste HTML to embed in website field at the bottom of the dialogue box. Copy the code and return to Dreamweaver. In Code View and that your cursor is between the opening and closing tags of the right column. Then paste the code you copied from Google. Preview the page to make sure it is rendering OK and you are finished.