Transitioning to CSS
Article ID: KB101702
If you have used a CSS-layout template in FrontPage 2003 or lower, you probably saw gigantic heading text and sections that seem to go all over the page instead of staying in properly aligned columns. If you had tried to stick it out, the stylesheet may have scared you off when you tried to rearrange the columns or change the dimensions of certain regions. These experiences may have been enough to cause you to throw your hands in the air and say, "I give up! Tables are much better!"
To help convince you to take another look at CSS templates, here is just a short list of comparisons between CSS and tables-based templates:
- Tables-based templates, particularly those that use a lot of nesting tables to achieve layout and interface effects, double, triple, or quadruple the size of your web pages because of the extra table, rows, and cell markup tags. This slows the viewing time for users, increase the bandwidth used by your site, and dilutes the effectiveness of your content for search engine spidering.
CSS-based templates can streamline the code for your site, making your pages lighter and faster. The keywords in your content gain more relevance, which is great for search engine rank!
- The content in your table has to fully load before it can be displayed in a browser. If you have a large table or a series of nesting tables in a page for layout, the viewer may only see a blank screen while the page loads all the stuff inside the table, then finally renders the table and content.
CSS-based templates do not depend on tables for layout, so the content displays as the page loads.
- If you want to make a global design and layout change in a tables-based template, you essentially have to recreate your site and modify every single web page.
Because CSS templates separate the design from the content, modifying the stylesheet will affect every page in your web site that uses the stylesheet. You only have to make your design changes once if your site's HTML structure has been well planned!
Web developers who have made the leap from basic styling of fonts and link-underlining to advanced CSS positioning all say definitively that they would never choose to go back to designing with tables. By the end of this article, you should feel empowered to take a look (or another look, as the case may be) at CSS layouts.
Working with CSS Templates in FrontPage 2003
What to Expect
Take a look at this CSS web site layout (Boutique Pink by John Galt's Templates). This is how it displays in a browser:
Template display in browser
Now, take a look at what the web page looks like when you open it in FrontPage 2003:
Web page in FrontPage 2003
The left column is below the main center column, and the main center column positioning is off. You'll find that many CSS templates in FrontPage 2003 will have columns not where you would expect them. Some templates will also have gigantic fonts for the headings, although they display properly in a browser.
Tips and Tricks
Depend on Preview in Browser. The FrontPage Design View is based on an out-of-date rendering engine and doesn't display some aspects of CSS design properly. Because of this, it is very important to test your page in a browser fairly often instead of depending on FrontPage's Design pane. The Preview pane will usually display the site normally, but I recommend that you have your site open in a browser and periodically refresh your pages to see how they look. So, you might add some content, save your page, go to the browser, and refresh, then return to FrontPage to make your next change.
Conversely, don't depend on the Design Pane. Don't try to make your site "look right" in the Design Pane. Instead, focus on entering your content in the given areas.
Narrow your vision. Focus on each individual content area instead of trying to look at the whole page in Design View. It most likely isn't in the right place in FrontPage, anyway, so just assume that it will show up in the right place and enter your content in that area (then Preview in Browser to make sure!).
Test in multiple browsers. Some CSS changes won't work the same way in different browsers, so it's important to download and install other major browsers such as FireFox, Netscape, and Opera. I typically have all four browsers open (including IE), and refresh in all four after I make a major change to the CSS layout.
Don't be afraid to work in Code View. The beauty of FP2003 is that you can easily switch between working in the Design and the Code with the Split View. Sometimes FrontPage can freak out and the content areas move all over the page while you are trying to edit, which can be quite distracting! In cases like that, I simply switch to Code View to enter my text and content in the HTML code itself.
Working with CSS Templates in Expression Web
What to Expect
Here is the same site open in Expression Web:
Web Page in Expression Web
As you can see, Expression Web does a much nicer job of displaying the CSS template layout properly! (This may not be the case for every layout, but it is true for most.)
Working with CSS in Expression Web
Expression Web comes with some handy tools for understanding the CSS in a web site. In the diagram below, I've selected the heading in the left column.
Heading selected in Expression Web
First, notice that the heading gets outlined, and a tab sticks up from the top informing you what HTML element is being used. In this case, the <h2> tag is being used.
In the CSS Properties panel, the top half ("Applied Rules") shows all of the rules that apply to this particular element. This helps to demonstrate the "cascading" nature of CSS -- outer elements have properties that may affect this element, so Expression Web tries to show you how they relate with each other. Expression Web will display all of the rules -- that is, the parts of the stylesheet -- that correspond with this element. You can click on each item in the Applied Rules list to view the defined properties in the CSS Properties area below. You can also hover over each rule, and the corresponding code from the actual stylesheet will show up as well, as you can see in the diagram below:
Hovering over rule shows stylesheet code
In this example, there are several different sections of code in the stylesheet that give this particular heading its properties. The Applied Rules area lists everything in cascading order, so any duplicate properties near the bottom cancel the properties above them. You can see this more clearly if you click the Summary button at the top of the panel:
Summary of properties
When you activate the Summary button, you can see every property that has been defined that affects this element. Clicking on any of the properties will highlight the corresponding rule in the Applied Rules area.
For example, the first font color property (labeled with the #1) sets the text color to black. This property was defined in the <body> tag, which allows all font in the page to have a default color of black.
But you can see that this color property has been crossed out, because the next color property (labeled with the #2) supersedes it and sets the font to white. This specific property is under the #body2 h2 rule in the stylesheet. (#body2 is the ID of the div that holds the left column content, so #body2 h2 creates properties for any Heading 2 elements that are inside the body2 div.)
The summary button is an easy way to see all of the properties for an element at one time, and to understand where they are being defined in the stylesheet.
Another useful panel in Expression Web is the Manage Styles panel. This panel lists and organizes all of the style rules used in the web page, including styles in external stylesheets (.css files) as well as styles defined internally on the page (inside of <style> tags). Hovering over one of the rules brings up the stylesheet code, similar to the CSS Properties panel.
Manage Styles panel
Each style has a colored icon next to it:
- Blue: Element-based styles
- Red: ID-based styles
- Green: Class-based styles
- Circled icon: Used on current page
At this point, I may have thrown out several terms that you do not recognize. ID-based styles? Class-based styles? What are those? You may also be unaware of what CSS properties exist, and even what they mean. For example, Font > Color is a pretty obvious property, but what about Box > Margin? And why do some margin definitions have one value, while others have two or four? (See diagram above of CSS Properties Panel to view the different margin property values.)
Don't worry -- my next article will give you some CSS basics so that you can use the Expression Web tools with confidence!
The key thing to realize with the Manage Styles panel is that it basically lists every rule in your stylesheet in order. (You can change the display to organize them differently by clicking the Options button.) You can click on the individual styles and drag to rearrange them. (This may mess up the formatting and tabs of the stylesheet.)
This also means that it is pretty easy to add new styles to your web site. There are two ways that you can do this:
- Create a new style from scratch
Click the New Style link in the Manage Styles panel. Name the selector (more about this later) and choose if you want to define the style in the current page or inside an existing stylesheet. Then define properties for the new style and click OK.
- Format a section of your web page
Simply by selecting some content on your page and using the normal toolbars to form it, Expression Web will automatically create a new style with those properties. This new style will show up in the Manage Styles panel, under the "Current Page" category. If you look in your HTML code, you'll see that the class has been defined for you in the head of the document and applied to the area where you added formatting.
In this example, I've followed the instructions from #2. I highlighted some text, then used the font color button on the toolbar to turn it into red text.
Selecting text and turning it red
Expression Web automatically created a new style called .style1 for the red text and added it to the top of the page. The selected text was wrapped in <span> tags, with the style1 class applied.
Expression Web's generated style code
When I looked in the Manage Styles panel, the .style1 class had been added under "Current Page."
New style added to Manage Styles panel
Here come two demonstrations of the powerful capabilities of the Manage Styles panel. First, I right-clicked on the style and chose Rename Style. In the dialog box, I put a descriptive name for the style ("redtext").
Renaming the style
Expression Web automatically renamed the style both in the style definition, as well as in the content area.
Renamed style is updated in the code
Then, deciding that this was a class I wanted to make available for all my pages, I dragged it from the Current Page area of the panel to the list of rules in the stylesheet:
Moving the style from the current page into the stylesheet
This removed the style definition from the top of the page and moved it into my external stylesheet!
I hope I have sufficiently shown how powerful the CSS tools in Expression Web can be. But to best use the tools, it's necessary to learn the nitty-gritty of the CSS language. That's where the next article comes in!
Next: Learning CSS
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al0/kb101702.htm
permalink to this article:
http://www.pixelmill.com/support/kb101702.htm
Back to top