Chapter 6

Creating a Website from Scratch

This page serves as the companion web page for Chapter 6 of Expression Web 4 Step by Step.

In the previous chapters you have learned some of the basic skills necessary to work efficiently in Expression Web but you’ve worked with existing graphics and templates which you reused in Expression Web.

In this chapter you will use those skills, learn about how to create graphics for your own custom design, and learn how to create a Website from scratch.

These skills will be important whether you decide to create your own graphics or work with a Website template which you customize.

After completing this chapter, you will be able to:

  • Work with a graphics template
  • Create an HTML layout
  • Style major HTML elements
  • Design the site architecture and navigation
  • Style for alternative media

Working with a Graphics Template

A designer can only do so much with colors and basic HTML/CSS layout techniques. At some point graphics are required. Whether those graphics are to be used as backgrounds for various page areas, as buttons, icons, other elements, or a combination of these, the designer will need to either create these graphics or at the very least be able to work with graphics provided to them in order to fine-tune them for use in their Website layout.

Most Website designs start with a sketch and an idea of what the end result will be. In this chapter you will make a very simple Website layout and create the graphics to go with it. The reason that you’re going to work with the graphics first is simple: how can you do a layout if you don’t know what it’s going to look like.

In this exercise, you will create a simple graphics template and export it for use in your Website

Graphics Template in Expression Design 4
Expression Design Resources

Creating an HTML Layout

In this exercise you will be creating your initial layout in an HTML page even though it will eventually be moved to a Dynamic Web Template. This is because you can easily preview an HTML page in a browser, but not so with a DWT. The CSS you create will also be written in the HTML layout page itself, instead of an external style sheet. Eventually you will move the CSS from the HTML file to its own style sheet, but for speed and ease of use it’s just more efficient to work with one single file as you refine the HTML layout.

When you complete this chapter segment you will be able to create an HTML layout based on the graphics you created in the previous exercise

Rough HTML Layout in Expression Web 4

Styling Major HTML Elements

In this chapter segment you will work on styling specific HTML tags in specific page divisions using CSS to refine the entire template and the appearance of content that will be included in them.

Using CSS in this way yields benefits particularly with a growing site. For instance: all an author has to do is enter text in basic HTML tags such as heading tags, paragraph tags, lists, and so on. Because the designer set up the CSS for the template in a well thought out way, the content anyone enters will take on the appearance that the designer intended.

When you complete this chapter segment you will be able to create CSS styles for the major HTML tags that mark-up the content of a Web page

Styling Major HTML Elements

Designing the Site Architecture and Navigation

The folder structure, page organization, and navigation of a site go hand-in-hand. Besides keeping the site "clean” and logically organized, the designer has an opportunity to improve usability by logically designing the basic folder structure of the site. By naming the folders intuitively and pertinently to the information their pages contain, they can actually attain higher search engine results and make it easier for people to share links to specific pages or sections of the site.

In this chapter segment you will arrange the structure of the site, create a Dynamic Web Template to ease the creation, deployment, and maintenance, and then add navigation to tie it all together.

When you finish this chapter segment you will be able to design the folder structure and navigation of a site

Designing Navigation in Expression Web 4

Styling for Alternative Media

One of the really great things about Cascading Style Sheets is the separation of content and presentation. More than just a "buzz phrase” this chapter segment will show you exactly what that means in a tangible way. You will create a style sheet specifically for print and attach it to your master page using the media attribute in the style sheet link.

This is interesting because you don’t have to change a single line of HTML on your Dynamic Web Template or any of the pages that it’s attached to, you don’t need to make additional pages specifically for printing, nor do you need to do any kind of server-side programming. All you will have to do is link the print style sheet to the DWT.

When you complete this chapter segment you will be able to create a Cascading Style Sheet specifically for the print version of your pages

By simply adding a style sheet for print, the designer is able to provide a completely different appearance to the page than would be present on the screen. It’s a powerful technique that requires very little effort and shouldn’t be overlooked.

Although you used the media types Screen and Print, there are 10 different media types you can use:

  1. all
  2. aural
  3. braille
  4. embossed
  5. handheld
  6. print
  7. projection
  8. screen
  9. tty
  10. tv
Using a Print Style Sheet

Key Points

  • As the basis of every site, the graphics are key to creating an attractive and usable template.
  • Expression Web provides tools to help you lay out your graphics into an HTML template.
  • By providing thoughtful site architecture, the designer can improve search engine results, while at the same time providing better accessibility to visitors.
  • Using CSS, the designer can provide different appearances for pages on the screen, in print, and a number of other media types.

You can easily make this a point to YOUR company OR hide it all together.