Expression® Web Design Blog

Creating a Navigation

Tuesday, January 20, 2009

FrontPage offered a fairly easy way to create a navigation (or menu) to implement on your website. And to be honest, I played with them once, but decided they were not for me. I think it was also hover buttons that used Java that I used for awhile, until there were just too many browser compatibility issues.

I started then using just regular hyperlinks, and using the Page Properties to change the colors of the hyperlinks from the default blue color to another color. I also used this feature to change the active and hover colors. Unfortunately, these colors were applied to all the hyperlinks on that web page. Of course, this code needed to be added to every page that I created. FrontPage added something like:

<body link="#000080" vlink="#000080" alink="#FF0000">

I have not ever got into the background (color / image) or the font information. Let's just stick to the navigation today.

Using Lists to Create Your Navigation

That's right, you can use lists to create your navigation. By applying styles to the list, you can make the list appear horizontally / vertically and without the little dot in front of it. For example, on one of my sites, I use this list:

<ul id="navlist">
<li><a href="/default.asp">Home</a></li>
<li><a href="/help.asp">Help</a></li>
<li><a href="/forums.asp">Message Boards</a></li>
<li><a href="/contact.asp">Contact Me</a></li>
</ul>

I left some of the links out, but you get the idea. There is no dot preceding the hyperlinks. I also use server side includes so if I need to change / add / delete something, all I need to do is change one page. I also use an external style sheet to help manage / maintain the colors, layout, etc. Once again, all I need to do is change one page (the styles.css) to apply the changes to the entire website that the style sheet is attached to.

For some information on styles, you can check out How to Create a Style Sheet, Apply a Style Sheet, and Managing Your Style Sheet.

CSS Examples for Your Navigation

Once you are ready for this, there are a number of examples out there for you to choose from. The first that usually comes to mind is the Suckerfish Dropdown from Alistapart. They provide the code and easy instructions.

Another menu is called Accessible Drop Down Menu from James Edwards. They offer a free 15-day free trial to test the menu. Right now, the cost of the product is $29.95.

Another page to view examples of using lists as a navigation tool is Listamatic. As far as I could tell, all the options from this website are free. There are horizontal and vertical menus on this page, make sure to review them all. CSSPlay has a page for using lists as menus. On this web page, you will see many options, for example: Basic Text, Tabbed, Button, Curved Border, Sliding, and Multilevel (FlyOut, Dropline, Fly line, Dropdown).

Posted by Corey Bryant at 4:25:05 PM in Miscellaneous (34) | Comments (0)

Easily Create a Copy of a Web Page in Expression Web

Saturday, January 17, 2009

There are many times when you want to have a backup copy of the web page you are working on. For example, if you are having problems with the content being shown improperly, you might want to change some of the code. But you want to have a copy of that web page in case you delete too much code or you delete the wrong code.

In Expression Web (and FrontPage), this is easily done by just highlighting the file, press CNTL-C (copy) and then CNTL-V (paste). This will create another file with _copy(1) in the file name. For example, if you copied default.html, the new copied file name would be default_copy(1).html. If you copy the file more than once, the number will increase: default_copy(2).html.

To see an example, you can watch a video tutorial of creating a backup copy of one web page.

Posted by Corey Bryant at 4:17:22 PM in Expression Web (35) | Comments (0)

Adding a Scrollbar to a Web Page

Friday, January 16, 2009

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare porttitor ligula. Phasellus feugiat eros eu sapien rutrum pellentesque. Aliquam odio ante, vestibulum eget, faucibus eu, malesuada et, velit. Vestibulum luctus ullamcorper libero. Fusce ultricies, odio ac egestas varius, lacus eros congue enim, ut pulvinar dolor enim a felis. Aenean mi lacus, adipiscing non, hendrerit a, porta vitae, lacus. Vestibulum et tellus. Integer lectus risus, molestie nec, viverra ac, venenatis et, pede. Praesent at lorem. Fusce sit amet felis. Vivamus tempor turpis ac enim. Phasellus scelerisque nisi ut augue. Duis lacinia turpis ut risus. Nam eget dolor tempor ante laoreet molestie. Nunc eros. Nam erat. Donec diam felis, tincidunt tristique, adipiscing vel, interdum in, mi. Aliquam in ligula. Praesent non sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare porttitor ligula. Phasellus feugiat eros eu sapien rutrum pellentesque. Aliquam odio ante, vestibulum eget, faucibus eu, malesuada et, velit. Vestibulum luctus ullamcorper libero. Fusce ultricies, odio ac egestas varius, lacus eros congue enim, ut pulvinar dolor enim a felis. Aenean mi lacus, adipiscing non, hendrerit a, porta vitae, lacus. Vestibulum et tellus. Integer lectus risus, molestie nec, viverra ac, venenatis et, pede. Praesent at lorem. Fusce sit amet felis. Vivamus tempor turpis ac enim. Phasellus scelerisque nisi ut augue. Duis lacinia turpis ut risus. Nam eget dolor tempor ante laoreet molestie. Nunc eros. Nam erat. Donec diam felis, tincidunt tristique, adipiscing vel, interdum in, mi. Aliquam in ligula. Praesent non sapien.

In the past, when you saw a scrollbar on a web page, this usually meant the site was using frames. Fortunately now, almost no one uses frames to build a website. Relying on styles, you can create a specific area in your web page to contain as much information as needed. You can see an example of this to the right of this post. By setting a specific height and width in the divide and adding the overflow property, you can add more to your web page using less space. I also used the float property in the divide to help place the example to the right of this post, added a small black border to the divide, and changed the font color so you can see the difference between the post and the example. It can be useful if you have a lot of text that needs to be seen but only a certain amount of space available to you on your web page.

The Overflow Property

The overflow property has four values: hidden, visible, scroll, auto.

Auto Value

Usually, the auto value is the one that most webmasters will pick to use. This value will add the scrollbar automatically if needed when the web page is rendered in the browser. This applies to both the horizontal and vertical scrollbar. If, by chance, the text / contents fit into the contained area, then the user would not see a scrollbar at all.

Overflow Property Source Code (Auto)

Source code is available in a text or zipped format for auto value:

Text (2,052 bytes) | Zipped (1,870 bytes)

Hidden Value

If you use this hidden value, any content that will not fit into the specified dimensions will not be shown (hidden).

Overflow Property Source Code (Hidden)

Source code is available in a text or zipped format for auto value:

Text (4,401 bytes) | Zipped (1,670 bytes)

Scroll Value

If you use the scroll value, this will add scroll bars (vertical and horizontal) to the container, no matter how much content it has.

Overflow Property Source Code (Scroll)

Source code is available in a text or zipped format for auto value:

Text (2,426 bytes) | Zipped (1,810 bytes)

Visible Value

If you choose the visible value, the content will be show even if the container does have enough room.

Overflow Property Source Code (Visible)

Source code is available in a text or zipped format for auto value:

Text (2,061 bytes) | Zipped (1,676 bytes)

And you can also download all the exampled in this zipped file.

Posted by Corey Bryant at 12:01:22 PM in Miscellaneous (34) | Comments (0)

Folder List Task Pane

Saturday, January 10, 2009

The Folder List task pane is probably one task pane that you will have open all the time. It allows you easy access to the files and folders of your Expression Web website. The example to the right is a from Expression Web - Small Business 6.

File Icons

You will see different icons in the Folder List Task Pane, both for files and folders. The file icons can vary on your system depending on default program you have set up to open that specific file. You can see some examples of icons below

Expression Web - Task Panes - Folder List - ASP Icon - This icon might represent an ASP file (Active Server Page) (usually .asp file extension)

Expression Web - Task Panes - Folder List - ASP.NET Icon - This icon might represent an ASP.NET file (usually .aspx file extension)

Expression Web - Task Panes - Folder List - Dynamic Web Template Icon - This icon might represent your Dynamic Web Template (DWT) (usually .dwt file extension)

Expression Web - Task Panes - Folder List - GIF Icon - This icon might represent a GIF file (image) (usually .gif file extension)

Expression Web - Task Panes - Folder List - Home Page Icon - This icon might represent your "home" page. This can easily be changed with Expression Web by right-clicking on the file and choose the "Set as Home Page" option. Keep in mind that even though Expression Web (or FrontPage) thinks the file is your home page, server settings might need to be changed to reflect this page as your home page. See Naming Your Web Pages for some information.

Expression Web - Task Panes - Folder List - HTML Icon - This icon might represent an HTML or SHTML page (.htm, .html, .shtm, .shtml file extensions)

Expression Web - Task Panes - Folder List - JavaScript Icon - This icon might represent a JavaScript file (usually .js file extension)

Expression Web - Task Panes - Folder List - JPG Icon - This icon might represent a JPG file (image) (usually .jpg or .jpeg file extension)

Expression Web - Task Panes - Folder List - PHP Icon - This icon might represent a PHP file (usually .php, .phtm, .phtml file extension)

Expression Web - Task Panes - Folder List - Sitemap File Extension Icon - This icon might represent a file with the .sitemap extension

Expression Web - Task Panes - Folder List - VBS Icon - This icon might represent a text file (usually a .txt file extension) - an example would be the robots.txt file

Expression Web - Task Panes - Folder List - XML Icon - This icon might represent an XML file (.xml file extension) - an example would be an XML Sitemap for search engines.

If any of the icons have a pencil on them ( Expression Web - Task Panes - Folder List - Opened File

), this usually means that that specific file is opened in the Expression Web program.

Folder Icons

If the folder has a plus (+) sign beside it ( Expression Web - Task Panes - Folder List - Closed Folder

) - this means the folder contains other folders or files. You can (left) click on the plus sign to expand the folder to see the other folders or files. You can also (left) double click on the folder icon to open the folder.

If the folder has a minus / dash (-) sign beside it ( Expression Web - Task Panes - Folder List - Open Folder

) - this means the folder is open and any folders or files in this opened folder should be seen in the Folder List Task Pane.

The Right Click Menu

Expression Web - Task Panes - Folder List - Right Click

If you right click on a file name, you have many options that are available to you. You can open the file with Expression With. The "Open With" will offer you a couple of different programs to open the file based on the file extension and what you have set up on your operating system. For example, a text file, you might be able to open the file with Expression Web (as text, html, or css), Notepad, or maybe even Excel.

You can preview the page in a browser, but you might need to Site - Site Settings. In the Preview tab, you can choose "Preview using website URL" which should open the web page in a browser locally. Or you can choose "Preview using custom URL for this website" and enter your domain name (http://www.loudexpressions.com). This will have the file open basically on the server without you switching to another program, entering the address in the address bar, etc. It will save you some time if you rely on seeing your pages on the server.

You can also choose to "Publish Selected Files" which will publish (or FTP) that file to the server. This might save you some time if your website is fairly large and needs time to check all the files against the local files. If you choose "Don't Publish", you might notice a red X in the icon ( Expression Web - Task Panes - Folder List - Don’t Publish File

) - this means that if you publish or synchronize your website, this particular file will not be published.

Changing File Names

You can easily change a file name by right-clicking on the file and choose Rename. When you do this, you will see the entire file name highlighted (unlike when you try to Rename a file through Windows Explorer, only the file name is highlighted and not the file extension - saving you potential problems if you accidentally change the file extension).

File Might become unstable if you change the filename extension

File Might become unstable if you change the filename extension

But don't worry - Expression Web has something built in to help you out. It will usually ask you "If you change a filename extension, the file may become unsuable. Are you sure you want to change it?" If you choose no, the file name will not change. If you choose yes, the file name will change to the name you entered.

Confirm Rename

If, for some reason, you do not have Expression Web managing your website with the metadata, you might get another error message: "Renaming a file or folder will break any hyperlinks to it in the current Web site. To avoid this problem, on the Site menu, click Site Settings, and then select the check box to manage the site using metadata files. Do you want to continue?" If you choose no, you will be able to change the site settings. If you choose yes, the file will be renamed and any relative paths to the file will not be updated.

Posted by Corey Bryant at 4:29:54 PM in Expression Web (35) | Comments (0)

Alt and Title Attributes

For some of the webmasters who just relied on FrontPage to develop a website, these attributes were probably never used or heard of. (And by the way, they are not alt tags or title tags. They are attributes.) However, some users would see a little pop-up from time to time when they were using Microsoft Internet Explorer to browse the Internet. Other browsers though did not show this information. If you notice the example here, Microsoft Internet Explorer 7 is showing the alt attribute for the image "Expression Web Folder List Task Pane". On most other browsers, you will not see this pop-up.

The <img> Element

When you inserted an image into your web page with FrontPage, there were not too many steps. FrontPage looked at the image and added the width, height, and border attributes. It would sometimes add align and hspace attributes if you dove more into the image properties. The code would look something like:

<img border="0" src="images/masthead.gif" width="80" height="80">

Unfortunately, it missed an attribute - the alt attribute, which is required if you were using HTML 4.01 and XHTML 1.0. It is required to help show some information if the image cannot be rendered. It is required to help users that do not want to download images to see what that image might be (possibly someone who has a slow connection to the Internet or maybe a handheld device). It also helps some users who rely on "screen readers" to access the Internet. Some search engines will read and use the text when spidering your website.

Now most of those attributes that FrontPage adds are deprecated and the standard is to use styles (CSS) to help define the border, width, and height. The height and width of the image is not required, but it is a good idea to have that information in there to help the browser know how much space is going to be needed as the web page downloads.

Now when you add an image to your web page using Microsoft Expression Web, you get a dialog box titled Accessibility Properties. In the Alternate text field, you would enter the information that best describes that image. Once you enter the correct information, hit OK and now your code should have the alt attribute in the <img> element. If you do not get this option, go to Tools - Page Editor Options. In the General tab, make sure that "Prompt for accessibility properties when inserting images" is checked. If you do not enter anything into the Alternate text field, Expression Web will still add the alt attribute, but it will be empty (which is OK):

alt=""

The Long description field is for the longdesc attribute. It is rarely used. You will notice it has a browse button beside it. The value is a URL to a page that describes the image. It is used when you have a need for a much more detailed description than the alt attribute can handle. However, keep in mind that the alt attribute should still be in the <img> element.

So is there a way to get other browsers to show a little pop-up message on an image? Yes - by using the title attribute. Unfortunately Expression Web does not support this feature yet, so you will need to add the attribute manually

<img alt="Our Logo" src="images/masthead.gif" title="Our Logo">

Most browsers will show the title attribute when the user places the cursor over the image.

The Border Attribute

Since the border attribute is deprecated, you will need to use styles, especially if your images have a hyperlink attached to them - you might notice a blue border around the image. This is easy to get rid of, and hopefully you have a stylesheet. If so, just add:

img {
border:0
}

to your style sheet. Now all the images will show no border (unless you specify it somewhere else, maybe an inline style).

The <a> Element

Most will call this a (hyper)link. The code is fairly simple

<a href="http://www.loudexpressions.com">Expression Web Blog</a>

Both FrontPage and Expression Web made it very easy for the webmaster to add a link to some text. You can highlight the text and press CNTL-K or go to Insert - Hyperlink. While you are in this "Insert Hyperlink" dialog box, you should see "Text to display". In this field should be the text you highlighted to become a hyperlink. To the right, you see a button named "ScreenTip…" If you click on this button, another dialog box opens named Set Hyperlink ScreenTip. If you enter some information into this field, Expression Web will add a title attribute to the hyperlink. That text will be see when the user places his cursor over the hyperlink.

<a href="http://www.loudexpressions.com" 
title="Expression Web Blog">Expression Web Blog</a>

When a user puts the cursor over the linked text (Expression Web Blog), a pop-up (or screentip) will be seen as well named Expression Web Blog

Posted by Corey Bryant at 12:00:13 PM in Miscellaneous (34) | Comments (0)

Robots Text

Friday, January 09, 2009

You might have heard this mentioned before if you have done any reading on search engine optimization or getting your website listed in a search engine. Usually on message boards and forums, you might see it as robots.txt.

This is a simple text file (not HTML, PHP, ASP, etc) that (good) search engines rely on to help spider your website. You can tell some search engines (robots / crawlers) not to spider your website. You can tell the search engines what folders not to search. You might have come across this when you were trying to add your website manually to a search engine. And the robots.txt is placed in your root folder - i.e. you should be able to see this blog's robots.txt file. Most websites will have a robots.txt file, even the White House.

While you do want a robots.txt file, keep in mind that it can be used against you. For example, spammers might search them for e-mail addresses. And the robots that do not follow the robots.txt might be able to locate folders that you wish to remain hidden. Or hackers might use the robots.txt file to help locate these "hidden" folders.

The Basic Robots.txt File

You can use a wildcard (*) to basically notate any and all robots:

User-agent: *
Disallow:

This will tell all robots that it is ok to crawl (spider) your website and all folders can be crawled. It will help to ensure the robots will spider your website (some might not spider the website). You should not see any 404 error requests in your log files from robots requesting your robots.txt file. If you see any of these error messages, make sure that the file is names robots.txt - if you are in a *NIX server and you named your file Robots.txt, the robots might not be able to retrieve the file since *NIX servers are case sensitive. Windows servers are not case sensitive.

XML Sitemaps and the Robots.txt File

Most of the larger search engines support XML Sitemaps. Even live.com got on board with this protocol. And it is very easy to add this information to your robots.txt file:

Sitemap: http://www.loudexpressions.com/sitemap.xml
 
User-agent: *
Disallow:

Now the search engines will know how to locate the XML sitemap. Keep in mind that the XML sitemap is different from a sitemap for users.

Robots.txt and Search Engines

Some search engines might be requesting too much information too fast for your web server. Remember earlier we spoke a little bit about "hits". You can tell some search engines to slow down a bit, like Yahoo!® - so your robots.txt file would look something like

Sitemap: http://www.loudexpression.com/sitemap.xml
 
User-agent: *
Disallow:
 
User-agent: Slurp
Crawl-delay: 2

This would tell the Slurp robot to wait two seconds before another request.

Posted by Corey Bryant at 4:31:19 PM in Miscellaneous (34) | Comments (0)

Dynamic Web Template

Expression Web - Site Settings Dialog Box

Expression Web offers the webmaster something that is called a Dynamic Web Template (DWT). One of the things to remember about a DWT, is that it requires the user to turn on the metadata. We spoke a bit about this previously in FrontPage Server Extensions (FPSE) and FrontPage WebBot Components. Before even starting a DWT file, go to Site - Site Settings to make sure that "Manage the Web site using hidden metadata files" is checked. If not, then any changes you make to your DWT file might not be applied to all pages, only pages that are opened. You will also be unable to edit the DWT, change the editable regions, or add editable regions until this option is activated.

If this option is not checked, _vti_cnf and _vti_pvt folders / files will not be created. These folders can be just as important as they were in FrontPage if you rely on Expression Web to help you create / maintain a DWT, some hyperlink management features, and some website reports.

Usually when you create a new website in Expression Web, this option will be checked automatically.

Unable to Make Changes to DWT

If you find that you cannot make changes to the DWT or changes or not being applied to all pages in your website, the metadata files might be turned off. Usually when you open the DWT file, you will get the error message "Microsoft Expression Web Information to the Folder: Changes made to this Dynamic Web Template will not be applied to any attached pages, except if they are open for editing. To avoid this problem, on the Site menu, click Site Settings, and then select the check box to manage the site using metadata files." Choose OK to add the metadata to your Expression Web website. Also, do not check "Don't show this message again" in case you accidentally choose no. Go to Site - Site Settings to make sure that "Manage the Web site using hidden metadata files" is checked.

Also, go to Site - Recalculate Hyperlinks just to verify Expression Web has added the correct metadata to your Expression Web website.

Add Expression Web Information to the Folder

If you go to Site - Site Settings and see that Manage the Web site using hidden metadata files is not checked, check the box and hit OK. When you do this, you get another dialog box: Add Expression Web Information to the Folder: Expression Web needs to add information to your folder in order to help manage your Hyperlinks and other Web Site Content. Do you want to add Expression Web information to 'your website location'?" Choose yes to add this information. (Once again, don't check "Don't as me this again" just in case you slip and choose no. Now go to Site - Site Settings to make sure that "Manage the Web site using hidden metadata files" is checked.

You will also noticed that Recalculate Hyperlinks is now located in the Site menu when you have the "Manage the Web site using hidden metadata files"

Posted by Corey Bryant at 11:58:49 AM in Expression Web (35) | Comments (0)

Reset Workspace Layout

Thursday, January 08, 2009

On the menu of Expression Web, there is one menu item called Task Panes (ALT-K). This workspace has a few default task panes opened when you start Expression Web:

Folder List
Tag Properties
CSS Properties
Toolbox
Apply Styles
Manage Styles

These task panes will help you create, manage, delete, add styles (internal, external, inline) along with adding some Form Controls (both HTML and ASP.NET), Media, Navigation, Validation, and many more items.

Resetting the workspace layout will not delete any pages / files / code from your Expression Web website. Expression Web Folder List Task Pane

It will only change the way Expression Web looks. It might remove some task panes or add a few Task Panes. Any Task Panes that is not needed can easily be closed by either clicking on the X in the upper right corner of that Task Panes, or by going to Task Panes (ALT-K) and then checking (or unchecking) the proper Task Panes. You will notice that your workspace that you use to create your web pages might increase if you delete some Task Panes or decrease if you add more Task Panes.

You can also see a screen shot of Expression Web with the basic Task Panes when you reset the workspace layout.

Posted by Corey Bryant at 11:57:30 AM in Expression Web (35) | Comments (0)

Task Panes

Wednesday, January 07, 2009

Expression Web has a few menus at the top. You probably see them and might not ever use any of them. They are called File, Edit, View, Insert, Format, Tools, Tables, Site, Data View, Task Panes, Window, and Help. These menus will help you do quite a bit with your website, like saving pages, find / replace (text / code), insert hyperlink, check for spelling errors, and of course help you with using Expression Web.

You can close some of these task panes by clicking on the X that is in the upper right hand corner of that particular task pane. There are a few task panes that you can be shown while working in your Expression Web website. These task panes can help you easily manage different elements, form controls, CSS properties, etc.

Expression Web Task Pane Menu

When you click on Task Panes, some might have a checkmark beside them. These are task panes that are shown in Expression Web. For example, you can see that I have the Folder List, CSS Properties, Manage Styles, Toolbox, and Find 1 task panes opened. You can close the ones you do not need to have more room possibly for editing your website.

Folder List: This helps to show the pages and folders in your website.
Tag Properties: This task pane allows you to see all of the attributes set for that particular element and gives you the ability to modify or add new attributes.
CSS Properties: You can easily see all the styles for the element that is highlighted at the time and all the values of those styles.
Layout Tables: Allows you the tools needed to create and modify tables.
Apply Styles: This task panes lists the styles that are defined in that page - internal or external. It enables you to apply, remove, rename, delete, and modify styles. You can also attach (or detach) external style sheets. You can also select all instances of a style.
Manage Styles: You can modify, rename, apply, and delete styles. You can also attach or detach style sheets with this task pane.
Behaviors: You can add behaviors to elements and manage behaviors that have been added to those elements.
Layers: This task pane will help you see all the divides that are set absolute or relative in that web page. You can also add or delete divides and modify these divides.
Toolbox: This pane will allow you to drag HTML elements, form controls, and .NET controls to your web page.
Data Source Library: If you are using any data connections (like XML or databases), you can add, edit, or delete these connections.
Data Source Details: This task pane helps to display the hierarchy and contents of your XML file.
Conditional Formatting: This task pane helps you to customize the formatting of the XML data in a Data View. You can also choose whether or not the data is displayed and how it is displayed.
Find 1: This task pane helps you to search multiple pages in the website.
Find 2: This task pane allows you to search the multiple pages in the website without losing the information from the first search (Find 1 Task Pane).
Accessibility: This task pane helps to create accessibility reports for pages in your website.
Compatibility: This task pane helps to check HTML / CSS pages for possible code errors and incompatible code based on the DOCTYPE.
Hyperlinks: This task pane will help list the status of the hyperlinks and paths to let you know if they are broken, ok, or unknown.
CSS Reports: This task pane will help you display a report of possible style errors or the type of styles that are being used.
Reset Workspace Layout: When you first start Expression Web, the Folder List, Tag Properties, Apply Styles, and Toolbox task panes are shown on either side of the editing window. They are usually "docked" but can be moved or closed. If you accidentally move a task pane to an area that you cannot see or resize, you can use this menu item to reset the workspace.

Reset Workspace Layout

This menu item can become your best friend if you accidentally move a task pane behind another task pane, making it inaccessible. Choosing this option will reset the workspace of Expression Web back to the Folder List, Tag Properties, Apply & Manage Styles, and Toolbox task panes.

Posted by Corey Bryant at 4:33:23 PM in Expression Web (35) | Comments (0)

Server Side Includes

FrontPage offered a few different ways to include another page - from the FrontPage Include Component to the Shared Borders (which relied on FrontPage Server Extensions). Of course, there was another way: using frames. Frames are similar to the FrontPage Includes in that they both require the basic HTML elements

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Title</title>
</head>
 
<body>
 
</body>
 
</html>

And yes, I know I wrote about file includes last year, but for search engine (and other) purposes, I thought I would write about it again, using a different title at least. Currently, you still need to publish your pages to the server to see the web page with the includes. With FrontPage Includes, FrontPage (and Expression Web) would show the included content without publishing.

However, with the FrontPage Include Component, all the pages that had the Include Component

<!--webbot bot="Include" U-Include="nav.html" TAG="BODY" -->

needed to be published. With server side includes, only the included page needs to be published. You should consider using server side includes on any content that you might change on a regular basis. This usually includes your navigation and maybe your header and footer. Relying on server side includes will help you with consistency throughout your website. Don't use the includes for things like your title, meta description / title, since these should be unique on each page.

Server Side Includes (SSI)

This is probably the most basic of the server side includes, and commonly called SSI. Instead of using the .htm or .html file extension, you use .shtm or .shtml file extension. This tells the server to look at the code before rendering it on the browser. The include file can be .html or .htm. Sometimes, you can also use .txt or .inc as the included file - if one does not work, contact your webhosting provider to see what "included" extensions are supported.

The code to add to the web page to call the included page is:

<!--#INCLUDE FILE="nav.html" -->

And in the nav.html, the only code would be something like:

<a href="default.shtml">Home</a>
<br><br>
<a href="about.shtml">About</a>
<br><br>
<a href="contact.shtml">Contact</a>

The nav.html page will be formatted from the main page. I have made an example of using server side includes with tables and divides (Expression Web and FrontPage calls these elements layers).

SSI Source Code

Source code is available in a zipped format for the above examples:
Tables (2,712 bytes) | Divs (3,134 bytes)

ASP Includes

ASP includes work very similar as the SSI example above. Usually, you will save the file with .asp extension. For the includes, they could be .asp, .html, .htm, .txt, or .inc. A lot of times when you are working with ASP includes, you might be working with a database. There is code that is used to connect to the database, and this usually contains your database name, database username, database password, and database connection string. For this page, you should save it with a .asp file extension to help protect this information.

<!--#INCLUDE FILE="nav.html" -->

You will see the code is the same as the SSI code. And the code in the nav.html page is also the same:

<a href="default.asp">Home</a>
<br><br>
<a href="about.asp">About</a>
<br><br>
<a href="contact.asp">Contact</a>

With the exception of the file extension, since you are working with ASP files. I switched to ASP pages probably around 2000 when FrontPage 2000 helped to create some ASP pages to connect to a MS Access database. I had to switch to Windows hosting for complete ASP support, but never looked back.

As with the SSI example, I made an example of using ASP Includes with a table layout and one using divides.

ASP Include Source Code

Source code is available in a zipped format for the above examples:
Tables (2,740 bytes) | Divs (2,990 bytes)

ASP.NET Includes

To include a file using asp.net requires some different coding:

<%
Response.WriteFile ("nav.html") 
%>

The nav.html file though is the same

<a href="default.aspx">Home</a>
<br><br>
<a href="about.aspx">About</a>
<br><br>
<a href="contact.aspx">Contact</a>

Examples using ASP.NET includes can be found using a table layout and one using divides.

ASP.NET Include Source Code

Source code is available in a zipped format for the above examples:
Tables (2,759 bytes) | Divs (3,009 bytes)

Some Potential Problems Using Includes

If you website contains multiple folders, you might see some problems when clicking a link or if you have an image in the include file. This can easily be rectified by using relative or absolute paths. I usually use relative paths to help ensure all anchors (hyperlinks) and image sources are correct. An example from the nav.html page above would be:

<a href="/default.asp">Home</a>
<br><br>
<a href="/about.asp">About</a>
<br><br>
<a href="/contact.asp">Contact</a>

You can see that I have placed a slash in front of the default.asp page. This will push the path back to the root web and start to work from there.

Another example when inserting images into an include file. Usually, most webmasters will put their images in an images folder. And if you have

<img src="images/logo.gif" alt="Our Logo" />

and the viewer might be in a folder. This would then cause the path to look for the images folder in that certain folder. However, if you use

<img src="/images/logo.gif" alt="Our Logo" />

This would push the path back to the root web and over to the images folder. You could use an absolute path, but if your domain name changes at some point, you would need to change the path in all these locations. If you use a relative path, chances are very good you will not have the need to change anything.

Posted by Corey Bryant at 11:56:21 AM in Miscellaneous (34) | Comments (0)

Website to Fill Screen

Tuesday, January 06, 2009

New users are constantly running into the hurdle of wanting their website to fill the screen, yet also maintain some type of layout. That is usually near to impossible since resolutions can vary, starting from 640X480 and go upwards of 1920X1200 to much higher.

For this example, I will the source code for tables and show you some different images of the same website in different resolutions so that you can get a good idea. I will also rely on the HTML 4.01 Transitional DOCTYPE. I will rely on a header, a left navigation with content on the right, and a footer. I will also use server side includes for the navigation and content areas to help maintain consistency so you will be able to see the difference in your resolution as well as with some screen shots. I understand that CSS should be used, but I also understand that a lot of new webmasters use and rely on tables instead of divides for laying out their website.

Liquid vs Fixed Layouts

Usually this is the first debate, is it better to have a fixed or liquid layout? Having a fixed layout will usually mean that you are going to rely on your content to be in a certain amount of pixels. Some will have their main divide set to 770 pixels to make sure that users that have 800X600 resolution will not see a horizontal. However, this might mean that a lot of real estate might be lost if most of your users have a higher resolution browser.

Setting the table at 100% however might cause some problems with your layout. Images might not line up as you would like, or your text might be moved up to cause other problems.

I created a web page with the same text and image using 100% width and then with fixed widths (770 pixels, 985 pixels, 1220 pixels, and 1550 pixels) for various resolutions. This should help you see the difference(s) on your monitor. I was also able to take a screen shot of the four different resolutions.

800X600 Screen Resolution

For users that still have an 800X600 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

1024X768 Screen Resolution

For users that still have an 1240X768 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

1280X1024 Screen Resolution

For users that still have an 1280X1024 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

1600X1200 Screen Resolution

For users that still have an 1600X1200 screen resolution, these screen shots will give you an example of how each page will be seen (gifs will open in a new window):

Other Issues with Fixed Layouts

You might have noticed that I put maximized at the end of each hyperlink above. This is because now it is assuming that if the user has a 1600X1200 screen resolution - the user has the browser maximized. The user might have it set at 1280X1024. For example, my screen resolution is 1920X1200, but my browsers are set at 1280X1024 to display websites.

Another problem could be toolbars that are opened. If the history or favorites is opened, you might lose around 300 pixels.

There are JavaScripts to help detect screen resolutions, but they will not help you in my case. The JavaScript will detect a 1920X1200 screen resolution, yet I am viewing the website at 1280X1024. And the JavaScript will not be able to help you with the toolbars that are opened.

So what is a webmaster to do? Building a website for 800X600 screen resolutions, you probably are losing a lot of real estate on most monitors. There are pros and cons to using a fixed or fluid layout. I have started using a fixed layout, but build more for a 1280X1024 layout. Yes, I know that is someone has a smaller resolution, they are going to be seeing horizontal scrollbars, but honestly, chances are they are pretty used to that since most websites cater to the higher resolutions now.

And then of course there is the other issue of having the website flush to the left or centered in the browser.

Posted by Corey Bryant at 4:35:03 PM in Miscellaneous (34) | Comments (0)

Changing the Colors of Hyperlinks

Friday, January 02, 2009

Usually (by default), hyperlinks are blue and underlined, the visited links are purple, and when you mouseover (hover) over them with your mouse, they turn red. More and more people are wanting their hyperlinks now to stand out more or even blend in with their text. With a style sheet, this can easily be accomplished. If you decide to use styles to change your hyperlinks, you need to make sure you have a DOCTYPE. This helps to prevent some browsers going into quirks mode. Also, relying on styles for your hyperlinks, you can set up different styles for hyperlinks that you use for your navigation, footer, and just the "regular" hyperlinks.

The W3 considers this as a pseudo-class. Basically this is used to help style the anchor (hyperlink) and other elements on characteristics other than the name, attribute, or content. For these examples, I will use a a basic table layout to help users see how styles can be applied to hyperlinks. The same idea can be applied to divides (hopefully you are using them now to help layout your website).

As you read, you will notice that the pseudo-class (link, visited, hover, active) are in this specific order. They have to always be in this order (I remember this as love-hate) for them to work properly.

Hyperlink Styles

In this example, we will give examples of the basic hyperlink style that can be placed in your style sheet. Usually, you want your hyperlinks to stand out from your regular text so your readers will click on them to possibly read more of your website. So in this example, the hyperlink is Dark Red (#8b0000) and when you mouse over the link, the link turns Navy (#000080) and the underline disappears.

If you click on the hyperlinks in the example, you will see that the color is the same, even though it is considered visited. This is also easily controlled in CSS. If you also notice, the hyperlink will turn bold when you click (activate) it.

a:link {
color: #8b0000;
}
a:visited {
color: #8b0000;
}
a:hover {
color: #000080;
text-decoration:none;
}
a:active {
color: #000080;
font-weight:bold;
}

Source code example: Text file (174 bytes) / Zipped file (all files (txt, css, html) 3,911 bytes)

Apply Different Styles to Specific Hyperlinks

So far we have applied a style to the "regular" hyperlinks in the web pages. Sometimes though, you might want the hyperlinks that are in the navigation, footer, or other areas of you web page to stand out even more. This can easily be accomplished with styles.

There are a couple of ways that you can achieve this feature. Since the area that has the navigation has an ID of nav, we can use something like:

#nav a:link {
text-decoration:none;
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
#nav a:visited {
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
text-decoration:none;
}
#nav a:hover {
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}
#nav a:active {
text-decoration:none;
background-color:#fff8dc;
color:#dc143c;
font-weight:normal;
}

In the <body> of the HTML code, the styles are applied to the <td> element with the nav ID:

<td id="nav">

Keep in mind that if you use ID, it can only be used once on the web page. If you need to reference a style multiple times, use class.

For the footer, I created

a.footer:link {
color:#000;
font-size:.8em;
font-weight:normal;
}
a.footer:visited {
color:#000;
font-size:.8em;
text-decoration:underline;
font-weight:normal;
}
a.footer:hover {
color:#000;
font-size:.8em;
font-weight:normal;
}
a.footer:active {
color:#000;
font-size:.8em;
font-weight:normal;
}

Then in the <body> where these links are, I added the class footer to the <a> element

<a href="/default.asp" class="footer">Home</a>

Since there were three <a> elements on this web page, I needed to use class instead of an ID.

Source code: Text file (749 bytes) / Zipped file (all files (txt, css, html) 4,727 bytes)

Selected Style Preview for Expression Web

Selected Style Preview for Expression Web

Don't forget, with Microsoft Expression Web, if you have the Manage Styles Task Pane opened, you can preview your style very easily. This will help to ensure that you have the correct syntax as soon as any changes or additions to the style is done. If you do not see this Task Pane, go to Task Panes and Manage Styles. The Task Pane should appear and if needed, you can move the pane to another area of Expression Web.

Posted by Corey Bryant at 4:36:15 PM in Miscellaneous (34) | Comments (0)

FrontPage WebBot Components

Thursday, January 01, 2009

Even though most FrontPage WebBot Components require FrontPage Server Extensions (FPSE) to work properly, there are three FrontPage WebBot Components that are in design-time and do not require FPSE to function:

WebBot Include component
WebBot HTML Markup component
WebBot Substitution component

WebBot Include Component

This is probably one of the most used and misunderstood FrontPage WebBot Components. It is sometimes thought that FPSE are required for the Include Component to work, however this is not the case. FrontPage helps to create this component. Unlike server side includes (which requires you to only publish one changed file), you have to publish all the pages that you have webbot include component. The code will look something like:

<!--webbot bot="Include" U-Include="nav.html" TAG="BODY" -->

If you look at the date on any of the pages when you change the include file (in this case nav.html), you will see all the pages that have the include webbot component have the current date and time. This helps to affirm that the FrontPage include webbot component is created and maintained by FrontPage, not FrontPage Server Extensions.

WebBot HTML Markup Component

This component is probably not needed as much as it was in earlier versions of FrontPage. Earlier versions of FrontPage had a bad habit of your HTML code into code it thought was correct. Enclosing your HTML source code in this component was to prevent FrontPage from checking / changing your HTML code into something that it thought would be better (or correct).
FrontPage HTML Markup Component

The source code looks something like:

<!--webbot bot="HTMLMarkup" startspan -->
<a href="http://www.loudexpressions.com" title="Microsoft 
Expression Web Blog">Expression Web Blog</a>
<!--webbot bot="HTMLMarkup" endspan -->

FrontPage 2000 was notorious for changing HTML source code, especially in ASP pages. I remember having a ton of problems back then when I was inserting ASP code into the code view. FrontPage 2002 seemed a lot better and FrontPage 2003 I don't think I ever had a problem with it changing the code.

WebBot Substitution Component

FrontPage WebBot Component Substitution Properties

This component allows the FrontPage webmaster to automatically enter some default information about the web page or web site. For example, the component will show the author, description, last changed date, or URL. The Author and Modified By comes from the logon username of the system - it might be Administrator. This might be helpful if you have a number of individuals that make updates and changes to your website. It will show who made the last change through FrontPage - in case something is incorrect.

FrontPage File Properties Dialog Box

The Description can be changed pretty easily. In the FrontPage folder list, locate the page you wish to change the description. Right click the file name and choose Properties. A Properties dialog box will come up - go to the Summary tab. Here you should see a field named Comments. Enter the description here and hit OK. You might need to refresh your page or close it to properly see the Description on your web page.

And as we discussed earlier about FrontPage Server Extensions and the meta data (or meta-key), the "hidden" folder (_vti_cnf) has an index.htm file and this file contains another line:
vti_description:SW|FrontPage is a WYSIWYG HTML editor

Hopefully in this small example above, you can see how very important the meta data (meta-key) is for FrontPage. This is why you need to publish a FrontPage website if you are going to use any components that relying on FrontPage Server Extensions.

This is why when you need to change servers, you have to publish the FrontPage website with FrontPage - you cannot just copy the files over. If you copy the files over (maybe via explorer), and attempt to run a component that relies on FPSE, you might get an error message (something like: The server administration programs and the server extensions on the web server are not compatible. The administration program is too old to use with this server).

Changing Files in the _vti_cnf Folder

Changing information in these files is usually not recommended. I did go in and change line two from:
vti_author:SR|BRYANT-01\\Administrator

to:
vti_author:SR|BRYANT-01\\Corey R. Bryant

Now if you look at the new Properties dialog box (on the right), you will see the Created by field has changed from BRYANT-01\Administrator to BRYANT-01\Corey R. Bryant.

Compare it with the one above to note the change to see the changes.

There are more fields that can be added to these hidden files, but again, it is not recommended. You should let FrontPage make these changes. For the most part, FrontPage makes the changes when you save the web page and you never know.

By the way, Expression Web will support the Include and Substitution Components some. It seems though the WebBot HTML Markup Component though is not completely supported by Expression Web. You can enter HTML source code between the comments and Expression Web will not show the results in Design mode, however when you view the page in a browser (like Internet Explorer / Firefox), the code will be seen properly.

Posted by Corey Bryant at 11:55:07 AM in Frontpage (18) | Comments (0)

Search the Expression® Site

Home

Expression® Web Development & Design Categories

Expression® Web Development & Design Archives

Expression® Web Development & Design Entries