 |
| Photo credit: Jatinder Joshi, uploaded via Flickr, Creative Commons License |
11.1 Why CSS for Page Layout:
To open this section, our instructor explains to us just how lucky we are to have CSS at our disposal for page layout. Why, when she was a kid, they had to layout everything in HTML 1.0, and they had to *walk* their webpage files over to the server farm on floppies, ‘cause if you tried to upload it over the inter-tubes it’d tie up your land-line for a day-and-a-half, and we didn’t have mobile phones, so of course you’d be cut off, and you needed your modem anyway to pirate music from Napster…well, you get the picture.
11.2 How to use CSS for Page Layout:
Here we are advised that we will be using the HTML <div> tag to define areas of our page, such as a header area, and then using CSS to assign unique identifiers to these divisions, and create rules for their layout.
11.3 Understanding the Box Model:
In this lesson, we are introduced to the properties of Border, Margin and Padding. These are properties that are associated with a rectangular piece of screen real-estate, or box, as the model is named.
Our instructor starts out by demonstrating a boxed area of screen, with a defined size of 400 pixels square. This is both the overall size of the box, as well as the usable real area within same.
Next, she adds a 20 pixel margin to the box (which can be done with either the Properties panel, or the properties area of the CSS Styles panel). We note that a buffer zone is created around the outer edge of the box. The usable area within remains the same, but the box no commands more of the screen.
Then, she adds a 2 pixel border to the box. Now the box edges are of noticeable thickness, and still more screen area has been claimed.
Finally, she adds a 10 pixel layer of padding, which is analogous to the border, except that it lies between the border and the inside of the box.
So, we still have 400 x 400 pixels of useable space within our box, but we see that our box now speaks for an area of the screen equal to 464 x 464 pixels. Obviously, we must make allowances for margins, borders and padding when designing our page layout.
11.4 Inserting <div> Tags:
Before we create CSS rules for laying out our divisions, we must first define our divisions with a bit of HTML code.
This is easily accomplished by selecting the content that we wish to group together, whether it be text, graphics, or a combination of both, and then clicking the Insert Div Tag icon from the Insert bar (on the layout tab). A dialogue box then prompts us to confirm that we want to surround the selection with a division, and also to assign a unique name to our division.
We also note here that divisions can be nested within one another.
11.5 Creating a Style for a <div> Tag:
Having created some page divisions, we not set about creating some style rules with CSS.
Moving over to the CSS panel, we click the New CSS Rule icon to launch the new-rule dialogue box. We select “ID” as the rule type, since our divisions are all identified with a unique ID. We then specify the specific ID of the division we want to set rules for, and finally, where we wish to store these rules (existing CSS file, new CSS file, or on this page only).
Having done that, our rule definition dialogue box appears. This is the same dialogue box that we discussed back in Assignment 8, so we needn’t re-hash the rule definition box here.
11.6 Editing a Style for a <div> Tag:
Like all of our CSS style rules, we can always modify our <div> tag rules by accessing them in the properties pane of the CSS Styles panel.
11.7 Inserting a <div> Tag with an ID:
This section describes a shortcut for creating divisions with HTML tags, and also defining the CSS rules for said division, all in one continuous process.
Previously, we created our divisions with tags first, then created CSS style rules to apply. In this example, we create the division in the usual way, but we make use of the Create CSS Rule button in the Insert Div Tag dialogue box to do everything in one fell-swoop.
11.8 Creating More Styles:
The only element of note here is the practice of using a different insert method for a division tag.
In this case, we wanted to insert a new division where there was as of yet no content. Since we were not able to select the content to insert, we selected instead the content we wished our new division to precede. When using the Insert Div Tag dialogue box in this case, we chose the insert before tag option, thus inserting the empty division before the content that we had selected.
11.9 More Practice with Styles:
What can one say, this section delivers what it promises. A couple items of note here. Firstly, we are introduced to the clear property as it applies to divisions. This resolved a layout issue that arose when some divisions had alignments set to float left and float right. In this case, the clear property had to be assigned to our footer, instructing it to provide clearance for the floated divisions, and take its rightful place below them.
Also demonstrated here was the practice of duplicating a CSS rule. This is done with a right-click on a rule in the CSS Styles panel. This is a time saver, in that one needn’t re-define all of the formatting rules for a new element, if there are existing rules that are identical, or nearly ,so, to the desired rules for a new element. This process is really analogues to right-clicking on a file in the file system, and using the copy/paste commands from the context menu.
11.10 Creating a Style for Links:
Creating styles for links hold some interesting possibilities, in that we can define variable rules depending on the link state. That is, the link (hypertext, in this example) can be set to follow different formatting rules depending on whether it is un-followed (has not been clicked-on by the user), currently under the user’s cursor, or has already been followed by the user.
To do this, we select the new CSS rule icon as always, and opt for the Compound selection in the context type dropdown box. We then have choices in the selector name field for a:link, a:hover, and a:visited, which correspond to the link states described above. We can then proceed to define different styles for links existing in each of these states in the usual way.
11.11 Center Page Content:
In an earlier section, we practiced inserting <div> tags into our page. We also noted that divisions could be nested, and in fact we made use of that property by enveloping all of our page content in a master division, which we termed a wrapper. This will now serve us well as we endeavor to center our page in the browser window, regardless of screen resolution.
To do this, we focus on the wrapper division, and define three properties. First, we ensure that our wrapper has been given a finite pixel width. Next, we ensure that the margin property has been set to auto. Finally, we set the property called position to relative.
We can than launch the page in the browser, and drag the browser window to varying widths to verify that our content does indeed remain centered.
11.12 Creating AP Layers:
Here we see another way to create divisions on a page, and that is by means of drawing Absolute Position Divisions, or AP divs.
AP divs are inserted on the screen by means of the Draw AP Div icon on the insert bar. As the name implies, these divisions are fixed on the page, and thus do not flow or center themselves in the browser window.
Also noteworthy is that style rules created for content in AP divs is stored in the HTML code of the page by default, not in a CSS file. The rules are accessible on the AP Elements panel, and can be moved to a CSS file from there if desired.
11.13 CSS Inspection Tool:
The CSS Inspection tool offers an informative live view of the relevant CSS rules and HTML code that pertain to the content that you select on the screen when the inspection tool is enabled.
It’s difficult to gather an appreciation for the power of this tool without having had the need to trace idiosyncrasies or bugs on a large project, yet one can still imagine how useful this must be.
No comments:
Post a Comment