HTML - Moving to Expression Web

Changing the Settings

The latest version of HTML is HTML5 - a lot of features have been simplified, but also new features have been added, such as being able to add sound and video directly to a page without needing Flash or similar plug-ins. It makes sense to learn the latest version, and that's what we've been doing in Notepad. Expression Web can create and edit HTML5 pages, but when you first install it it will try to use HTML4. You can change the settings by following the instructions below.

From the Tools menu, select Page Editor Options...

I suggest that you also use the split view to edit your pages - you can select this by selecting View → Page → Split.

Editing Graphics

In the lesson I demonstrated how to make an area of an image transparent. I used Paint.NET, which you can download from the following sites:

Other applications are available - if you have something like Fireworks, GIMP or PhotoShop then you can use that instead.

Using CSS for Rollovers and Menus

In the lesson we looked at how to use CSS to create rollovers - this is a much simpler method than using JavaScript:

If you're interested, you can also extend that idea to create menus and other drop-down items:

Although that page uses DIVs, the same ideas can be applied to any HTML element.

Your Task

If you are new to the class and have yet to create a web-page about your three favourite things (in a particular category, e.g. films, songs, television programmes, etc.) then use Expression Web to create a page and add:

Please remember to use the style section on the right of the screen to add colours, fonts, etc. - please do not get into the habit of selecting fonts and colours at the top of the screen. You can use the other buttons at the top, but try to get into the habit of selecting a logical type, e.g. paragraph, heading 1, etc., and then styling that element using CSS.

Extension

Once you have created a page (or if you have already created one for a previous task), please experiment further with styling your page, e.g. by making your links stand out more, or by creating rollovers.

Validate Your Page

You don't need to do this, but if you'd like to check whether your page meets web-standards, you can use a validation tool such as this one:

You will need to click on the tab in the middle to upload a file. Don't worry if your page doesn't pass - it's very fussy. In fact, a lot of popular commercial sites won't pass!

Submitting Your task

As your page will now be made up of several files, submitting it will be slightly more tricky than usual. However, if you have Windows XP (or a later version) you can make the task think your page is all one file by putting it into a compressed folder. A compressed folder behaves like a folder, but is really a file, and so can be attached to your task. You can create a compressed folder in Windows XP as follows:

  1. Open My Documents (or the folder that contains your web-page)
  2. Click the right-mouse button in a blank area of the folder, select the Compressed (zipped) Folder option from the New... menu (usually near the bottom of the list), and give the folder a name
  3. Drag the files that make up your page (the .html file and all of the picture files) onto the new folder you've created
  4. The new compressed folder you've created will look like a folder, but behave like a file, so that you can attach it to the task in the usual way.