tailieunhanh - Great Web Typography- P10

Great Web Typography- P10:When you design a page for print, you control the size of the paper and the placement of the elements. But on the Web, the size, resolution, fonts, and even the layout of your page can vary with the browser and the system used to view your site. | 250 Part III Graphic Type for the IVeb Creating HTML Layout As I mentioned in the introduction for this chapter I feature Dreamweaver as I put this page together in HTML. I include the code when necessary. For the CSS portions to keep this section as generic as possible I work strictly in code. 1 do use a combination of Dreamweaver s on-board CSS editing TopStyle and straight text editor entry when I build my CSS. By using code only for illustrations you can accomplish the effect in the way you usually create your code without any software instructions interfering. Creating the Basic Page 1 like to start with a saved document with an attached CSS file even though the CSS file is empty. For this example I ve created a document called and a CSS file named . The CSS file is linked to the HTML document. clink href rel stylesheet type text css My very first action is to set the margins for the document. I like to use zero margins which I set with CSS in the body tag. While I am in the body tag I add the background color plus the generic font family and color in case a visitor s older browser cannot interpret other styles. With the font specified the content should at least display in the correct font. body margin Opx font-family Verdana Arial Helvetica sans-serif background-color FFFFFF color 333333 Building the Top Table Next I want to establish the table layout. Referring to the Guide layer in Photoshop shows that I need a table for the top content that is three rows by three columns. It must stretch across the page so the width is 100 . I rarely have padding or cellspacing for top element tables. The left column requires all rows to be merged. The basic table is shown in Dreamweaver . I place all the images for the top in the appropriate cells. I place all the menu items into the middle cell of the right column. I place the wavy line into the middle row of the middle column. I place the tide .