FrontPage Help
Split or merge frontpage tables
FrontPage behaviors and layers
CSS is not difficult to learn. Well the basics anyway. I'm not going into the nitty gritty here. You will learn by trial and error and asking questions!
My intention is to explain the style sheet behind the Zen Garden - Tables Template.
You can download the style sheet and template here.
Each style rule has been broken down and we start with the body.
body {
color: #F60606;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
color - set to red.
font-family - 4 choices and the type of font. This means that if your user does not have the font Verdana installed on their machine, the next font will be used. Again if the users computer does not have Geneva the next is used and so on. Why? It gives some reassurance to you as a designer that your page will display as you designed it are as close to the original design as possible by specifying similar fonts.
font-size - You can set your font size in a number of ways. Here we use em. Why? em is a fluid font! If the user is viewing with the browser font size set to largest, em will allow the text to expand. The same can be said for % You could also use oixels BUT They will not re-size in the users browser.
The above rules are specified to the body. Therefore all text will be red, verdana and 1em.
#table1, #table2, #table3, #table4, #table5 {
width: 750px;
This rule sets the width of the tables. I have specified 750pixels. The tables are centred in the template. Therefore i end up with a 750 pixel wide table that is centred on the browser window.
Simple by changing the width in the rule i can change the width of the tables in my site.
For instance, if i change this rule to 100%, all the pages that are linked to this style sheet will change to 100% width. (Fluid) The site will expand and contract to fit the users window.
Or - I could have the above rule and add a new rule.
#table5 {
width: 100%;}
This would make the footer 100% wide whilst the rest of the site is 750px wide and centred!
This is even more useful when we use this technique to manipulate cells later.
#table1 {
background-image: url(ZENGARDENTABLES.gif);
background-repeat: no-repeat;
height: 75px;
border: 2px solid #F60606;
}
background-image - linked to the image i want to use. I can again make site wide changes just by changing this image. If you have some pages that you want to use different banners on, you can make a copy of the style sheet, attach this to the page in question and change the image link to the image you want to display.
background-repeat: - In this case, no repeat as it is the image we wish to show. You could also set to - repeat/repeat x/repeat y Very handy for background images. One benefit of putting your images in as the background becomes clear when creating fluid pages (100%)
When designing to 100%, you can use a banner that is 1024px wide or wider! If it is set to the background of the table, the image will also shrink and expand depending on the browser window. A very neat trick See Here. View site Make your browser as big as possible then minimise the site will shrink to fit and so will the graphic. If you just place a 1024 wide image into the table in FrontPage, it will force the table to be 1024pixels wide thus throwing your site out of sinc! When viewed in a browser 800 wide the user will be forced to scroll left and right to view your content.
height: 75px; - you have to specify the height other wise the browser will collapse the table and not show all the image. This way you ensure it is all shown. You could set this to any size. Say 100pixels wide? This would show your graphic and create 25 pixels of white space before the next content is displayed.
border: - Here i have set a 2pixel wide border to the whole table. I could have set just 1 or all of the borders. I could have the top border at 5pixels and green, the left and right as 10 pixels black and the bottom as 20 pixels blue and a dashed line! Now thats the power of css!
Now you might be saying 'I can do all of this in FrontPage' Yes you can. But using an external style gives you great flexibility. Most styling in frontpage is done in-line. This usually makes this style unique for the page so updating is very time consuming. With this method it can be done very quickly and very neatly. Look at the code.
#table2 {
background-image: url(rotile.gif);
Simply tells the browser to display the image as the background for table2. I have elected not to specify anything else here although i could have specified the image to repeat, by not doing so, it does by default.
The image used here is a 1x2pixel image. Very fast download.
#table3 {
border-left-color: #F60606;
border-left-style: solid;
border-left-width: 1px;
border-right: 1px solid #F60606;
text-align: center;
color: White;
background-color: #F60606;
font-weight: bold;
}
So we know we are working on table 3 and the left and right borders have been set to 1px wide and orange. You have to look real close to see them but they are there! I could have added top and bottom in any colour or thickness and had any of them solid or dashed or none at all.
text-align - Could have been, left , right or justified.
color - Yes the spelling is correct. I have set this to white which shows up well on a background of red. (See below.) Color is the colour of the text. This over writes the body colour or red!
background-color - set to red but could have been any colour. I could even of had an image here.
font-weight - Could have been any of the usual settings.
So what have we done here? Basically we as saying make table 3 have a red background with orange borders on the left and right. Make the font colour white and bold!
Again you can do all of this directly in front page but you are going to wear your mouse out right clicking, left clicking, CLICKING!
Now at this point, you could completely change the whole top half of the template. Simply by by changing the links to graphics, you could have the orange red stripe at the top and the banner in the middle!
#table4 - left blank intentionally. Table four is split into 2 cells. and styled below. I could actually use table four and put in say another star background or some other graphic. but that's for you to experiment with.
#table5 {
background-color: #F60606;
}
background-color - set to red. You could have borders here if you wanted and all the previous techniques can be set here too.
td.leftside {
padding-right: 10px;
padding-left: 10px;
width: 164px;
background-color: White;
vertical-align: top;
border: 1px solid #F60606;
border-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
Ok this is the left hand side of the 2 cells in table4! Currently designed for the navigation. You will note the width has been set. This will ensure that the navigation panel will always be 164pixels wide.
padding-right: 10px;
padding-left: 10px; Everything in this cell will have some white space/padding around it. This keeps the text/graphics away from the edges of the table cell.
width: This ensures that the cell is displayed at 164px wide regardless of browser size. You can set this cell to any size. % allowed too.
background-color - Set to white. This can be any colour you choose or you could use a background image.
vertical-align - Set to top. This make sure the content of the table cell start at the top. Could also be middle/bottom.
border - set to be 1 px solid and red. This applies a 1px solid red border to the table cell.
border-right - This cancels the right border so none is seen.
padding-top: Content will be pushed away from the top of the table cell by 5px. The same as left and right but 5px keeps the content closer to the cell border.
padding-bottom: - As above.
So there it is, the navigation panel has been styled. It should have a white background with a 1px red border to 3 sides and the content should be padded on all four sides. The width is set to 164px.
td.middle {
padding-right: 5px;
padding-left: 5px;
background-color: White;
vertical-align: top;
width: inherit;
border: 1px solid #F7C046;
background-image: url(topleftgif.gif);
background-position: top right;
background-repeat: no-repeat;
Basically we are saying. The maincontent cells should have a white background, and be padded both left and right.
The extra bits.
background-image: url(topleftgif.gif); This is the starburst image in the top right of the main content area.
background-position: top right;. If the image was designed to
burst out from the bottom left then we would re-write the style to look like
this.
background-position: bottom left;
I could have set it to repeat any number of ways creating different effects. Repeat, Repeat x, Repeat y. Repeat y would make the image repeat down the page.
.navtop {
background-image: url(images/boxtop.gif);
background-repeat: no-repeat;
height: 22px;
color: White;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 0px;
font-size: 0.8em;
}
.navmid {
background-image: url(images/boxmiddle.gif);
background-repeat: repeat-y;
color: #F60606;
font-size: 0.8em;
padding-left: 5px;
padding-right: 10px;
margin-bottom: 0px;
margin-top: 0px;
text-align: left;
}
.navbott {
background-image: url(images/boxbottom.gif);
background-repeat: no-repeat;
text-align: right;
padding-right: 20px;
color: #F60606;
font-weight: bold;
height: 19px;
margin-top: 0px;
Phew!
These are the rules that allow us to create a box with round corners.
I created a round corner box in my graphics program and then sliced it into 3. Hence navtop, navmid, navbott. As this will be used in the navigation panel, it will be constrained by the table cell which is set to 164px wide. Therefore you do not need to use tables.
Just click your cursor in the cell where the navigation will go. Type navigation and select .navtop from the style dropdown. The graphic is inserted the text centred and all by CSS. Press enter and type in your navigation links and click navmid from the style drop down and do the same for the footer by clicking navbott.
You will notice navtop and navbott are set to not repeat the background image. That's what we want. The navnid though does say repeat in fact it says repeat y. This is because the image used here is only a couple of pixels high and by selecting repeat y you tell the browser to repeat this image as many times as is needed but only up and down. This has the effect of the background being a large image where as in fact it is very small.
You probably didn't notice but the styles above all have names.
EG: #table1 - or - .navtop
If you did notice you may have wondered what the # and the . (full stop) actually mean?
# This is called an ID selector. ID's should only be used once in any document. As each table in our page only appears once, this is the best way to style them
. (fullstop) This is called a class selector and can be used many times in the same document. As you can see in the page template, there are two round corner boxes in the left panel. Obviously we have used the navtop.....mid......bott classes twice with no problems.
The styles will now start to look like this
h1
you will note that nothing precedes it. This is called an element and it standard html. Any HTML element can be styled. If you style H1 to be black on a white background, each time you style some text to be H1 the effect will take place.
h1 {
background-image: url(h1.gif);
background-position: center left;
background-repeat: no-repeat;
padding-left: 25px;
color: #F60606;
font-size: 1.2em;
margin-bottom: 5px;
}
h2 {
background-image: url(h1.gif);
background-position: center left;
background-repeat: no-repeat;
padding-left: 25px;
color: #F60606;
font-size: 1em;
margin-bottom: 5px;
}
Heading are essential to your document structure. Use them. H1 should only appear once on a page. H2 through to H6 can be used as many times as you like.
I have used a background picture here as you can see in the css.
p {
margin-bottom: 5px;
margin-top: 5px;
}
This rule is simply saying allow <p> tags to have 5 pixels margin top and bottom. This effectively gives a 10px gap between paragraphs.
dt {
margin: 5;
margin-bottom: 0px;
text-align: center;
font-weight: bold;
background-color: #F60606;
font-family: Arial, Helvetica, sans-serif;
padding: 5;
padding-bottom: 2px;
color: #F60606;
background-image: url(leftnavetile.gif);
border: 1px solid #F60606;
}
dd {
padding-left: 2px;
padding-right: 1px;
border: 1px solid #F60606;
margin: 5;
margin-top: 0px;
font-size: 0.8em;
font-weight: bold;
text-align: left;
}
dt = defined term by styling it in the css we can make it look like a title top box.
dd = Defined Data - normally by default the text of a dd is indented about 15 pixels. Again using CSS you can make it look how you want it to look. Images can be used as backgrounds if you want.
Phew. I have run out of steam here, but i'm sure to revisit this subject sometime soon. My purpose here is to give you a little taste of what can be done with CSS. I'm no code expert here, i create my style sheet with TopStyle a first class editor.
Have a go with the example. See how easy it is.
If you have any questions and i'm sure you will. Please post them at the forum.
Another CSS example web site. Look here