CCT260H - Christopher Evan Jones Layout 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Last Lab Introduction to Styles Attributes Fonts Family and Sizes Colours 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Divisions Recall the <body> tag Think of this tag as being a large division Web site can contain a number of containers These are created with divisions or the <div> tag A division can also contain other division 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Planning Your Site Think about what divisions you will need Start with the highest level: the body Then divide up your page Starting with the biggest divisions, down to the smallest Title Menu Main Area Content Footer 2010-01-26 CCT260H - Christopher Evan Jones
Coding Your Site Title Main Area Content Create your elements Footer <body> <div id=“title”> </div> <div id=“menu”> <div id=“mainarea”> <div id=“content”> <div id=“footer”> Title Menu Main Area Content Note that ‘id’ or ‘class’ values cannot contain spaces Footer 2010-01-26 CCT260H - Christopher Evan Jones
Preparing Your Style <head> <style type="text/css"> div { border: solid 1px; } #title #menu #mainarea { } #content #footer </style> </head> Notice that instead of using a period (.) we use the hash symbol (#) to reference the id name of an element Adds a simple thin black border around each division This is just for clarity while editing and we will remove this after we’re done 2010-01-26 CCT260H - Christopher Evan Jones
Preparing Your Style Doesn’t look like much… does it? 2010-01-26 CCT260H - Christopher Evan Jones
Positioning Your Divisions By default, <div>s take up the entire width of this page and resize the length to fit your content You can force the size your <div> using pixels or ratios e.g. height: 100px; width: 50%; And, you can tell a division stay on one side e.g. float: left; float: right; 2010-01-26 CCT260H - Christopher Evan Jones
Formatting Your Divisions You can space your <div>s by adding margins margin: 5px; margin-top: 10px; Or padding padding: 5px; padding-left: 20px; Or borders border: solid 5px green; 2010-01-26 CCT260H - Christopher Evan Jones
Formatting Your Divisions <head> <style type="text/css"> div { border: solid 1px; margin: 5px; padding: 5px; } #title height: 50px; #menu width: 150px; float: left; height: 400px; #mainarea { margin-left: 180px; margin-top: 10px; } #content #footer height: 30px; text-align: right; </style> </head> 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Formatted Divisions 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Completing Divisions border-bottom: double 5px gray; background-color: #DDDDDD; font-size: 2em; Now that it is laid out, you can: Remove the borders Or add other borders for visual separation Use the styles from last lab (font-size, font-family, font-weight, color, background-color) to format and style the content border-right: solid 2px gray; background-color: #eeeeee; text-align:center; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: right; font-size: 0.8em; color:#AAAAAA; 2010-01-26 CCT260H - Christopher Evan Jones
Filling Your Divisions 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Lab Three Create a new page (see Lab One) Create a layout for your page Give it some style (colours, borders, spacing) Copy the content of your last lab into your new page (everything between the <body> and </body> tags) 2010-01-26 CCT260H - Christopher Evan Jones
CCT260H - Christopher Evan Jones Choosing a Layout Sample layouts: http://blog.html.it/layoutgala/ Play with divisions: http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width_doctype Play with borders: http://www.w3schools.com/css/css_border.asp 2010-01-26 CCT260H - Christopher Evan Jones