At our September meeting, we started on using CSS to define the layout of a webpage. We began by reviewing the use of tables to format a page, a technique that is still useful and can be used to structure a page which is then styled with CSS. This kind of hybrid approach has its advantages, as is pointed out in this article at Builder.com.
To move on to pure CSS layout techniques, we started by looking at the HTML align attribute. Align is used with images and tables to move the element to the margin and let subsequent text wrap around it. We then looked at the clear attribute that is used with <BR> to begin text after an aligned item.
CSS introduces the float property that allows any element to be positioned along a margin with text wrapping around the element. And the clear property can be used with any element, not just line break. We did some work with these properties to show how they are used with images instead of using HTML align.
At our next meeting, we will start with a brief review of the box model, the basis for page layout. To see some visual representations of the box model, do a Google image search for "css box model." For a review of the box model, see this Builder.com article. For practice with the different properties of boxes, go to the Index of Sample Pages on this site (link in sidebar), and go down to Basic Boxes and the subsequent samples. Download them and check the comments to try out different properties that affect boxes.
No comments:
Post a Comment