Download presentation
Presentation is loading. Please wait.
1
CCT260H - Christopher Evan Jones
Layout CCT260H - Christopher Evan Jones
2
CCT260H - Christopher Evan Jones
Last Lab Introduction to Styles Attributes Fonts Family and Sizes Colours CCT260H - Christopher Evan Jones
3
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 CCT260H - Christopher Evan Jones
4
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 CCT260H - Christopher Evan Jones
5
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 CCT260H - Christopher Evan Jones
6
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 CCT260H - Christopher Evan Jones
7
Preparing Your Style Doesn’t look like much… does it? 2010-01-26
CCT260H - Christopher Evan Jones
8
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; CCT260H - Christopher Evan Jones
9
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; CCT260H - Christopher Evan Jones
10
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> CCT260H - Christopher Evan Jones
11
CCT260H - Christopher Evan Jones
Formatted Divisions CCT260H - Christopher Evan Jones
12
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; CCT260H - Christopher Evan Jones
13
Filling Your Divisions
CCT260H - Christopher Evan Jones
14
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) CCT260H - Christopher Evan Jones
15
CCT260H - Christopher Evan Jones
Choosing a Layout Sample layouts: Play with divisions: Play with borders: CCT260H - Christopher Evan Jones
Similar presentations
