A Microsoft Expression Tutorial

Contents Page (click page numbers to move to the page)

Page 1-2 ……………………………………..Things to do and know before we start

Page 3…………………………………………………………How to save your web pages
Page 4 ………………………………………………………Opening an existing web page
Page 5………………………………………………………………Creating more web pages
Page 6-8……………………………………………………………………………..Adding tables
Page 9…………………………………………………………………………….Inserting images
Page 10……………………………………………………….Inserting and formatting text
Page 11…………………………….Changing background colour and adding a title
Page 12……………………………………………………………………How to preview work
Page 13-14…………………………………………………….Adding hyperlinks from text
Page 15……………………………………………………..Adding hyperlinks from images

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

Microsoft Expression Tutorial
Things to do and know before we start

1. Open MS Expression (Start  All Programs  Microsoft Expression  Microsoft

Expression Web 3)
2. Click the “New” icon.

New Page

3. You are now ready to make a website.

Standard menu
bars

This is where we
design our web
pages

Page 1

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

Microsoft Expression Tutorial

4. Menu bar commands we need to know:

File: Format:
 Save as  Fonts
 Preview in browser  Background colour
 Page properties  Bullets

Insert: Table:
 Pictures  Insert new table
 Hyperlinks  Alter an existing table

Page 2

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

Microsoft Expression Tutorial
How to Save your Web Pages
File
This is how you save your file as a web page:

1. Click File  Save As.

Save As

2. A new window will pop up:

 Choose where to save your file
(Web Design  My Website  HTML folder)
 File name of homepage should be index.htm
 Click Save.

Location to save
in

Name of
web page

Remember!
The file extension for a web page is .htm

Page 3
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Opening an existing Web Page

When you need to open a web page in order to edit it or make changes, you should use
the following steps:
File
1. Click:
 File  Open.
Open

2. Select the web page you

want to open.

3. Click Open.

Select web page

Click Open

Your web page

ready for editing
Opened web pages

Page 4
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Creating more Web Pages

Your website is to be made up of more than one page. You need to be able to create
these pages using Microsoft Expression.

To create new pages follow these steps: File Page

1. Click:
 File  New  Page.

New

2. In the window that

appears click
 General
 HTML HTML
 OK.

General

OK

Tabs

New Blank Page

NOTE: Other Pages you

are working on can be
accessed using the Tabs
Page 5

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

 Microsoft Expression Tutorial
Adding and Amending a Table

Tables are used to create the layout and structure of your web pages. To insert tables
you should do the following:

1. Click Table  Insert Table. Table

Insert Table

2. You now see the properties box.

Here you can:
 Set number of columns/Rows
 Set the Width of the table (should be 100%)
 Set border thickness
 Select colours Table
 Etc. properties

All of these settings can be changed later

on (click here to see how)

3. We now have a table with 5 rows and 3 columns:

3 columns

5 rows

Page 6

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

Microsoft Expression Tutorial

4. Each column or row can be resized by clicking on the appropriate line and dragging:

Click the Lines and Drag to

correct size

5. You can also change table properties to make alterations after the table has been
created (Sizes, Borders, Border Colour etc):

 Right click the table and select Table Properties.

Table
Properties

Alter
Width/Height

Choose Border thickness

(0 = no border)

Alter
Border/Background
Colour

Page 7

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

Microsoft Expression Tutorial

6. Table columns and rows can be added/removed by right clicking the table and
selecting either:
 Insert / Delete Columns
 Insert / Delete Rows.

Insert

New rows NOTE:

If you want to delete a
row you would select
‘delete’ instead of insert

New row

Page 8
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Inserting Images

1. Click in the area where you Insert

want to put the image.

2. Click Insert  Picture  From File.

Picture From File

3. A new window will pop up.

Location of
4. Browse to where your images image
are stored.

Insert
5. Select the image you want
then click Insert. Image I
want

6. Resize the image to the correct size by clicking and dragging the handles.

Resized
image

Click and drag

handles

Page 9
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Inserting and Formatting Text

1. Inserting text is very simple (Very similar to using Microsoft Word).

2. Choose where you want to input your text.

Inserting text into a

table

3. Text can be formatted (Like in Word) by highlighting it and using the Properties
Window to make changes:

Change font Bold/Italic Change text

colour

Change font size Align (Left, Centre or Right)

Formatted
text

Page 10
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Changing Background Colour and Adding a Title

Access the web page’s properties:

1. Click File  Properties.
File

Properties

General

2. To change the Title:

 Click General
 Add your title into the title box
 Click Ok. Adding a
title

Formatting

3. To change Background Colour:

 Click Formatting option
 Click Background colour box
 Select the new colour
 Click Ok.

Background
colour box
Colour options for
hyperlinks etc

Page 11
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
How to Preview your work

At times you will need to be able to see what your web pages will look like on the actual
Internet.

To do this you need to be able to preview your work in a web browser (Internet Explorer
for example). This is how you do it:
File

1. Click File  Preview in Browser.

2. Select the latest version of your
(e.g. Internet Explorer).

NOTE: You can also

press F12

Preview in
Browser

3. Your web page will now appear in Internet Explorer and shows you exactly how it
will appear online.

Homepage as
previewed in
Internet Explorer

Page 12
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Adding hyperlinks from text

The pages in your website should be joined together using hyperlinks so that users can
navigate around. Microsoft Expression makes creating these links very, very easy.

You can use either images or text as your hyperlink.

1. Select the text which you want to be your hyperlink.

Selecting Text for

Hyperlink

Insert

2. Click Insert  Hyperlink.

Hyperlink

3. Click the “Browse for File button”.

4. Browse to your HTML folder.
5. Find the web page you want to open. Browse for file
6. Click OK.

Folder
containing web
page to link to Select web page
Click OK

Page 13
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial

Completed
Hyperlink

Page 14
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Microsoft Expression Tutorial
Adding hyperlinks from images

Hyperlinks can also be inserted into images.

If you want to add a hyperlink to an image then follow the steps below:

1. Click the image which you want to be your hyperlink.

Selecting image for

hyperlink

Insert

2. Click Insert  Hyperlink.

Hyperlink

3. Click the “Browse for File button”.

4. Browse to your HTML folder.
5. Find the web page you want to open.
6. Click OK.

Folder Browse for file

containing web
page to link to Select web
Click OK
page

Page 15
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge