You've probably heard me harping on how important it is to use styles in Word. Well, the same song and dance is true in many professional software programs...particularly a web editing program, such as Dreamweaver. And just like with Word, you'll find that you can get away with not using styles for those quick and dirty documents or web sites. But you'll discover...the hard way...that when the time comes to get serious and create a professional document in Word, you'll be sorry you didn't previously apply proper styles to your document. The same is oh so true with a web site.
Applying direct formatting through the use of <font> or other HTML tags is fine when you just want to toss out a few web pages for friends. But when you're ready to play with the big dogs, you'll end up spending a lot of time reformatting your site to remove all those direct tags and reapplying proper style tags. That is, if you plan to have your site look like a consistent, professional site.
In fact, in Dreamweaver (DW) MX 2004, it's nearly impossible to apply direct formatting without DW creating a style for you. In the text below, I've directly applied formatting by setting the following attributes:
- an Arial font
- size medium
- a blue color
- bold
- italic
- indent
(Note that I've had to display my sample style content in this article as images due to the fact that TechTrax has it's own style sheet...and I dare not mess with it to show my samples!)
Now if I were to apply all that formatting directly with various font tags, the code would probably look like this:
<blockquote>
<font face="arial", color="blue", size="medium"><b><i>This Is My Section Title</i></b></font>
</blockquote>
But now with newer versions of web designer software, that understand the importance of using CSS (Cascading Style Sheets...the web development name for a style specification page), DW has only applied a generic style name to the actual text. However, in the header area of the page code, it has defined my style attributes for this particular style, as you can see below.
This CSS definition is up in the header area of the code:
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #0033FF;
font-weight: bold;
font-style: italic;
font-size: medium;
}
-->
</style>
And this is all that is applied to the actual text:
<blockquote>
<p class="style1">This Is My Section Title </p>
</blockquote>
Use of proper style formatting becomes even more critical should you want to move your web pages forward to enable them to work with other technologies, such as ASP or, particularly, XML. But even if you only decide that you want to change the font style of your site, you'll save yourself tons of time by applying styles. That is, because you will only have to change the style font and not go through tons of web site pages locating and modifying the word "Arial" to something else.
As you can see in the style code above, if I wanted to change the font throughout my site from Arial to Veranda, I need only change the name within that style. If I'd applied <font face="arial"> throughout my site text, I would have to do a global search and hope that that did the trick! Fortunately, DW's code search/replace feature is a godsend and does a great job.
Although DW will do the work and create the embedded CSS definitions for you, it's much better to create your own custom styles and stick with those so you're not as tempted to create dozens of formats. A sure sign of an amateur web site is one that has tons of different formatting applied all over the site. A professional site has only a few styles and sticks with those consistently throughout the site.
Let's look at how you can create a few custom styles for your web site.
On the Design panel, click the New CSS Style icon. This will open the New Style dialog box.
You'll want to create a master CSS sheet by giving it a name and saving it to a prominent location on your web site. As you can see in the dialog box below, you do have the option of defining a style sheet for just this page. However, in order to use the styles with other pages, you'll want to define a separate CSS. More importantly, if you are creating a master template for your site, you'll want to create this CSS and then be sure to link it to your master template. This will allow all the styles to be available to you when you use your template to create other pages. Although you can link it to each individual page, there's too much room for error with that method. So you're much better off setting the link in your master template to ensure all the pages are using the same sheet. It's too easy to end up with variations of the same CSS page that turn out to use different versions of the same style.
CSS styles always start with a period. And a good rule-of-thumb for DW, as well as any other program that uses styles, such as Word, is to give your styles names that will sort them in alphabetical order by their type. In other words, don't name your styles BigBullet, SmallBullet, TinyBullet. If you do that, notice that they will end up becoming alphabetized all over the list since they start with B, S and T. A better method is to use the type as the first part of the name and the description as the rest of the name. Using that method, my names would become, BulletBig, BulletSmall, BulletTiny. Notice that now they will all be sorted first by the name Bullet. This will allow me to easily see all the bullet styles I have with a quick glance rather than wasting time searching all over my list for them!
In the dialog above, I've named this first style .Heading_02, since this will be the heading I'll use for all subtitle sections throughout my site.
Since the dialog also says that this style will go into a New Style Sheet File, the next dialog box will be the Save dialog box for the CSS. This is where you'll give this CSS a name and save it to your site.
Also, it's best to define the CSS as being relative to the Site Root. This may be a bit of a confusing concept to new site developers, but suffice it to say that by making it relative to your Site Root, it will be more universally available to your pages, versus defining it directly to one particular document on your site. Special path formatting will be added to the inserted links that will allow the CSS to easily be located throughout the site.
However, another important factor is that you'll not want to move the CSS to another folder by using Windows Explorer! Make sure that, if you decide to move any site files, particularly the CSS, that you move them from within the DW Files panel. This will ensure that the page location will be redefined and all links related to that page will be reset to the new location. If you move any site files using Windows Explorer, you'll end up with errors saying that files are not found!
After you save this new CSS...or if you were creating a new style to a predefined CSS...the next dialog box will be the Definition dialog box for the style. This is where you'll define all the attributes (formatting) that you want applied to this particular style.
I've defined pretty much the same attributes that I did in that first section title style at the beginning of this article. So I'll type some text and apply this style to see how it looks.
Here's what I typed:
This is my section title
After applying my .Heading_02 style, here are my results.
Notice that even though I didn't type capitals for the title, since I defined that I wanted the text to end up with proper capitalization, it made the adjustment for me. However, also note that the style is not indented as I originally wanted. So I need to modify my style to add an indent.
To edit a style, you can simply right click its name from the Design panel and choose Edit.
This opens the Definition dialog box again so changes can be made.
If you're not familiar with the CSS Style Definition dialog box, you'll want to get in it and play around. Experiment with the different style attributes with a practice page so you can get used to how each of the attribute settings affect your text. In the dialog above I've moved to the Block category and set the Text Indent to 1 inch.
I type this:
this is my section title
And with the revised style applied, I get this:
As you can see above the text is now indented 1 inch. If that turns out to be more or less than I need, I can easily go back into the style definition and make the needed adjustments to better align the titles to whatever text I have on the page.
If you've looked at my web site, MouseTrax.com, you've probably noticed that I don't use bullets in the normal way. Rather than plain old circles or squares, I have a tiny mouse that I use as my bullet throughout the site. On most pages, you can find him along the sidebar, bringing your attention to other information related to the current page content.
To create a customized bullet in DW, start by creating a new style and giving it a name such as .Bullet_Custom, .Bullet_Mouse or .BulletLogo...a name that will properly identify what type of style it is. Remember to name it by type first, then description.
In the definition box, enter the way you want the text to be displayed. In mine, I've made it Arial, 10pts and applied a gray color to the text. Then also move to the Block category and apply a little indenting. For the Bullet image, you'll need a small image about the size of a large icon...such as around 20-30pts square. (My mouse is actually 23 x 50...his tail makes him wider.) I've set him to be Positioned outside so that the subsequent text will wrap to the text and leave the mouse outside of the indent marker. If I set him to inside, the text would wrap to the mouse. (Outside is generally the better format.) Browse to your image and add it as your bullet image.
Now the trick here is to remember that this is a bullet (List) style. So in order to use this custom format and get your image to be applied, you must first set the text as a bullet. You can do that by simply clicking the Bullet icon on your Properties panel.
That will give you your standard text bullet.
Then apply your style to the text from your style drop down.
Your bullet will then convert to the applied style and your image will be displayed as your bullet marker, as you can see below. (Isn't he cute!<g>)
After you've created your CSS, remember to upload it to your site. I would also suggest that you take a look at your raw CSS content to start becoming familiar with how a CSS is written. Although programs like Dreamweaver or FrontPage will write all the code for you, if you really want to be good at web design, you must learn how to read the code itself! There will come a day when your HTML editor (DW or FP) will not allow you to do what you want due to some incorrectly applied code. To save your sanity, you can simply go into the code itself and make the needed adjustments by hand rather than fighting the interface trying to figure out how to undo whatever you've done!
In DW, you can simply double click on your style sheet to have it open in the editor to review all the attributes applied to any particular style definition. And yes, if you change the information in your CSS, it will change all the content of your web site. So use caution when making changes.
Okay, get busy! Take a very critical look at your site and think about what you can do to make it look more consistent and professional looking. Surf the web and look at other sites to see what looks good to you and what doesn't. Then compare what you saw on other sites to what you see in yours.
Oh, and one bit of design advice. When you look at your site, if you notice that the majority of your headings, or worse...your text...is centered or you have several colors/sizes of text on one page, go invest in a typography design book or start searching the web, because your site is SCREAMING to the world that you have no sense of proper design!
In fact, I have a free typography lesson available on my site from my Advanced Word Document Design course that you can read to get you started. You'll find it here: http://www.mousetrax.com/TechCourses.html#samples. If you don't know your serif from your san serif...or have no idea what a typographic hiccup is...start reading!
Dian Chapman is a 10 year Microsoft MVP and Technical Consultant. Besides her expertise with Microsoft Office and document automation, she specializes in web development involving database connectivity and data display.
Does your company have an Intranet? If not, think about how much your company would benefit from having a central, internal web site that allows all your employees to easily access important company information. From a monthly "Note from the President," to information about events, new employees, shared documents, employee manuals, centralized contact lists, passworded access to their own annual review data or special access pages to HR or the executive committee. If nothing else, think of the money you'll save by not having to regularly copy and distribute updated information!
If your company is not taking advantage of intranet technology, you're wasting a valuable resource! And chances are that you already have everything you need right there on your current network. All you need is a professional to help you develop your site. Contact Dian Chapman to discuss how you can leverage your existing technology to help your employees feel more in tune with your company...which will make them happier!
|
