Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the [...]]]> Found this interesting and informative post on the Six Revisions blog which is part of his CSS Tips series.

Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the element.  Presentational naming describes the location and/or appearance of web page elements.

The post discusses the concept of structural naming conventions, the benefits of using this convention, and shares some guidelines on practical applications of structural naming conventions.

First he gives an example (1) of a presentational naming layout and then discusses what is wrong with this approach. The presentational naming layout inlcudes:

• #top-div
• #left-col
• #right-col
• #bottom-div

The next example (2) uses a structural naming convention and includes the following:

• #header
• #main-content
• #secondary-content
• #footer

Example 3 really uses structural naming conventions which includes:

• #branding
• #main-content
• #secondary-content
• #site-info

The last example,using  fully-structural in naming conventions,  describes what the div’s and other elements are for, instead of where they are or how they look.

The second part of the post offers a few guidelines which include:

1. When assigning a class or id, ask yourself “What is this element for?”
2. Avoid using names that rely on locational or visual aspects of the particular element.
3. Use names that are intuitive to you.

He also includes some Further reading resources on this same topic:

• Structural Naming
• Standardizing CSS class and id names
• Build for the Future: Bend, Don’t Break

You can read  CSS Tip #2: Structural Naming Convention in CSS in its entirety.

A robots.txt file will tell the search engines to index every page or your [...]]]> I discovered a new blog today – Dazzlin Donna. One of her posts, Don’t Forget These Five Things on a New SIte, reminded me of a couple of things I sometimes forget. What about you, does your site contain the following?

Robots.txt file

A robots.txt file will tell the search engines to index every page or your site or not allow certain pages. If you want all pages of your site indexed, the robots.txt file should look like this:

User-Agent: *
Disallow:

If you do NOT have a robots.txt file, the default behavior is to index everything. If you want to disallow certain directories, then you need to specify them in your robots.txt file.  In that case, your file might look something like this:

User-agent: *
Disallow: /cgi-bin/
Disallow: /folder-name/
Disallow: /folder-name/

You can write your own robots.txt file or use  can generate a custom robots.txt file with a tool like http://tools.seobook.com/robots-txt/generator/

You can read more  about what a robots.txt file is all about, by visiting http://www.robotstxt.org/robotstxt.html.

XML sitemap

An XML sitemap is not required on your site but is a good way to let the search engines know about pages on your sites that are available for crawling.

Google introduced Google Sitemaps so web developers can publish lists of links from across their sites. The basic premise is that some sites have a large number of dynamic pages that are only available through the use of forms and user entries. The Sitemap files can then be used to indicate to a web crawler how such pages can be found. Google, Bing, Yahoo and Ask now jointly support the Sitemaps protocol. ~ Wikipedia ~

To read more about sitemaps, visit http://www.sitemaps.org/. If you have a WordPress blog, then download this plugin, and that job will be a little easier.

Custom 404 page

What does a visitor to your site see if they try and visit a page that no longer exists?  A generic 404 – Not Found page? Or have you provided them with a custom 404 page that allows them to continue to navigate your site? You can find a tutorial on Custom Error Pages – Customizing BlueHost Error Pages on our sister site, Expression Web Tutorials & Templates and one on How to create custom Error Pages on Genealogy Web Creations.

Do your visitors a favor and create your own Custom 404 page.

Favicon

What is a Favicon? It’s that tiny little graphic that shows when you bookmark a site like the EW on this blog. A favicon (short for favorites icon) is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.  Use any square image file and run it through a favicon generator like the one provided by Dynamic Drive. Upload the file to the root directory of your site and insert the code given below in the head section of your page.

The code to inset the favicon looks like this <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico>

Analytics code

And last but not lease, don’t forget to add your analytics or stats code to your new site. Whether you use Google Analytics or a different one, find the instructions and the code to use and add it to your pages.

You can read Dazzlin Donna’s full post Five Things Not to Forget on a New Site! Thanks Donna for a great reminder.

Then our [...]]]> Do you hate to spend your time searching the web for sites with information, tutorials, and such on Expression Web? Do you find the sites, then forget to bookmark them? Woulddn’t you rather spend your time working on your site than hunting for the tutorials and resources you need to get the job done?

Then our Free Expression Web Community Toolbar is just the tool you need! It’s updated frequently and the new links are added at the top of the various categories. Look for “NEW LINKS – LOOK HERE FIRST” with a date for the newest offerings. The Expression Web Community Toolbar is brought to you by Pat Geary and Tina Clarke of Migrating from FrontPage to Expression Web. Both Pat and Tina are Microsfot MVP’s for Expression Web.

The toolbar includes all of the  Expression Web versions 1, 2, 3 and 4 as well as the Expression applications.

• Expression Design
• Expression Blend
• Expression Encoder

It also includes links for  Contests, Giveaways, and special offers for Expression Web 3.0 and 4.0. Want to know what Expression Web Communities, Webcasts and Live Events might be available? Those are included too.

The toolbar would not be complete without resources for Web Design in general and you can find that information too.

Let Tina and Pat let their “fingers do the walking for you” while you spend your time working on your site, and of course, reading all the good information posted on the toolbar. The toolbar is free so download and install you Free Expression Web Community Toolbar today.

Steve Easton has just posted his FP Cleaner Tool which has been updated to work with Expression Web 4.0. This tool has been a staple in my arsenal for a number of years now and is one I always recommend to others for helping to clear up problems that may occur while using the program.

FP Cleaner for Expression Web 4

FP Cleaner for Expression Web 4.
Expression Web 4 Cleanup Utility

FP Cleaner does not require installation and will run from the desktop. According to Steve, the program will run on any of the current Windows system. I am running it on a Windows Vista laptop and a Windows 7 desktop with no problems.

You can download FPCleaner from http://www.95isalive.com/fixes/ew4.htm

What Do the Buttons Do?

• The top button ‘Restore Default Menus and Toolbars‘ is not available as the ability to customize the toolbars is not available in EW 4.
• Change the ‘Last Web Open Setting‘  allows you to change that setting to ensure the program is not trying to open a web when it starts. This can be useful if you have EW is set to open the last web edited and that web has a problem.
• ‘Clear the Hidden Temporary Files‘  checks for the location of the hidden Temporary directory for the logged on User, if the directory exists, pressing this button clears it and moves the files to the Recycle Bin. Files left behind in these directories by an improper computer or program shut down will cause problems when trying to open,  save, and/or  edit pages on your web site.
• ‘Clear the Hidden Web Cache files (*.web)’ - There is a .web file for each of your webs and if these files become corrupted, you may encounter problems opening or closing your web. Clicking this button deletes these files and forces creation of new clean files when each web is opened or published.
• ‘Clear the Find/Replace MRU List‘  clears the Most Recently Used ( MRU ) list of Find/Replace entries
• Clicking ‘Start‘ will Launch Expression Web 4.
• Clicking ‘Close‘  closes FP Cleaner for Expression Web 4 without starting the program.
• Clicking ‘Properties‘ opens the Windows file properties dialog for EWFPCleaner.exe.
• Clicking ‘Info‘ displays the basic information text.

The Fp Cleaner for Expression Web 4 is, as it always has been FREE, and can be downloaded from http://www.95isalive.com/fixes/ew4.htm.

Thank you Steve.

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is [...]]]> Cascading Style Sheets – or CSS for short – allows web designers to separate the presentation of their sites from the content. CSS can be used to style any element of your page or place the elements on the page.

CSS can be an extremely powerful markup language for designers.

However, the CSS that is produced is only as good as the principles that are being followed by the designer creating the code.

While you may think that anyone can crank out CSS, there is a big difference between writing CSS and producing top notch CSS.

To ensure that you are on the right track, here are eight CSS principles that every web designer should be following.

Are you following these principles for CSS?

1. Take the Time to Validate – Many of us take the time to validate  our HTML/XHTML code BUT do we do also validate our cascading style sheets? Is the doctype you use up-to-date and correct?
2. Document (but not in your code) – Adding comments to your style sheets will help you understand why you did what you did a week or a month from now. It will also help if someone else needs to take over the project at a later date. Adding comments directly to your CSS code will increase the size of the file and, as a result, increase load time. To avoid this, comment your css in a separate file.
3. Say No to Hacks
4. Don’t Abuse Divs – Use the appropriate HTML tag instead of automatically creating a new div.
5. Put Thought Into Your Class Names -
6. Embrace Shorthand
7. Don’t Forget About Printers – It’s important to use CSS to make your content printer friendly.
8. Never Stop Learning – continue to work on learning more about css.

Read Are You Following the Principles of Top Notch CSS Design? in its entirety.

Majestic Mountains Site Template Package

The template is a 1024px fixed width layout with two equal height columns. The [...]]]> Check out the latest offering from Expression Web Tutorials & Templates, the Majestic Mountains Site Template Package which is based on one of the basic layouts offered by our sister site Migrating from FrontPage to Expression Web.

Majestic Mountains Site Template Package

The template is a 1024px fixed width layout with two equal height columns. The package includes a DWT, external style sheet and all graphic images. Did I mention the template is FREE? The package is a complete website ready for you to add content and additional pages if needed. Current pages can be easily renamed. This is just one of the templates offered and all are Free for you to use.

Browser chrome refers to the borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars. When designing a Web page, the browser chrome must be added to determine the width of the page.

If you look [...]]]> Browser chrome does NOT refer to Google’s addition to the browser market – Google Chrome.

Browser chrome refers to the borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars. When designing a Web page, the browser chrome must be added to determine the width of the page.

If you look at http://www.expression-web-tutorials.com/browser-chrome/ in both Internet Explorer 8 and Firefox, and Opera, you will see that each of them display a slight margin at the top of the page. This is because of the default setting for each of the browsers.

If I add to the body styles on the external style sheet

body {margin: 0px; padding: 0px; }

and view the same page again in all three browsers, you can see the difference.

http://www.expression-web-tutorials.com/browser-chrome/index-two.html

In all three browsers, the top of the masthead is now flush against the top of the browser.

CSS Reset

Adding {margin: 0px; padding: 0px; } to the body tag is referred to as CSS Reset or Reset CSS. Resetting your style or styles  is the process of resetting or setting the styles of an elements to a baseline value,  This allows you to  avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

CSS Reset is important because it removes inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to display differently across the various browsers. The reset can be as simple as setting the margins and padding for the body tag or more complex as the settings recommended by Eric Meyers in CSS Tools: Reset CSS

Each of the Site Templates offered by Migrating from FrontPage to Expression Web, makes use of the following CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
font-size: 100%;
}

You can read more about CSS Resets at:

• http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
• http://www.css-reset.com/
• http://www.vcarrer.com/2010/05/css-mini-reset.html

These are commercial add-ins. I have personally used the first two and you can read more about them from Expression Web Add-ins.

You can see a sample [...]]]> Ajatix has updated three of their add-ins so they now work with Expression Web 4.0. The include:

• Advanced CSS Drop Down Menu Expression Web
• Pure CSS Menu Expression Web
• Lightbox Expression Web

These are commercial add-ins. I have personally used the first two and you can read more about them from Expression Web Add-ins.

You can see a sample of the CSS Menu on my free Ocean Template.