A Microsoft Expression Tutorial - ICT lounge 8.1 – Web Design Mark Nicholls – ICT Lounge A Microsoft Expression Tutorial Contents Page (click page numbers to move to the page)

Unit 8.1 – Web Design Mark Nicholls – ICT Lounge

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

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.

3. You are now ready to make a website.

Page 1

This is where we design our web

pages

Standard menu bars

New Page



4. Menu bar commands we need to know:

Page 2

Format:

Fonts

Background colour

Bullets

File:

Save as

Preview in browser

Page properties

Insert:

Pictures

Hyperlinks

Table:

Insert new table

Alter an existing table



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

1. Click File 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.

Page 3

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

Name of web page

Location to save in

File

Save As



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:

1. Click:

File Open.

2. Select the web page you

want to open.

3. Click Open.

Page 4

Click Open

Select web page

Your web page ready for editing

Open

File

Opened web pages



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:

1. Click:

File New Page.

2. In the window that

appears click

General

HTML

OK.

Page 5

General

New Blank Page

NOTE: Other Pages you are working on can be

accessed using the Tabs

OK

File

Page

New

HTML

Tabs



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.

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

Etc.

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

Page 6

All of these settings can be changed later on (click here to see how)

Table

Insert Table

5 rows

3 columns

Table properties



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

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.

Alter Border/Background

Colour

Alter Width/Height

Click the Lines and Drag to correct size

Page 7

Choose Border thickness (0 = no border)

Table Properties



6. Table columns and rows can be added/removed by right clicking the table and

selecting either:

Insert / Delete Columns

Insert / Delete Rows.

New row

Page 8

Insert

New rows

NOTE: If you want to delete a row you would select

‘delete’ instead of insert



Inserting Images 1. Click in the area where you

want to put the image.

2. Click Insert Picture From File.

3. A new window will pop up.

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

Page 9

4. Browse to where your images are stored.

5. Select the image you want then click Insert.

Click and drag handles

From File

Picture

Insert

Location of image

Image I want

Insert

Resized image



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.

3. Text can be formatted (Like in Word) by highlighting it and using the Properties

Window to make changes:

Page 10

Inserting text into a table

Formatted text

Change font size

Align (Left, Centre or Right)

Bold/Italic

Change text colour

Change font



Changing Background Colour and Adding a Title Access the web page’s properties: 1. Click File Properties.

2. To change the Title:

Click General

Add your title into the title box

Click Ok.

3. To change Background Colour:

Click Formatting option

Click Background colour box

Select the new colour

Click Ok.

Page 11

Formatting

Background colour box

General

Adding a title

Colour options for hyperlinks etc

File

Properties



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:

1. Click File Preview in Browser. 2. Select the latest version of your

(e.g. Internet Explorer).

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

will appear online.

Page 12

Homepage as previewed in

Internet Explorer

File

Preview in Browser

NOTE: You can also press F12



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.

2. Click Insert 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.

Page 13

Click OK

Browse for file

Select web page

Selecting Text for Hyperlink

Insert

Hyperlink

Folder containing web page to link to



Page 14

Completed Hyperlink



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. 2. Click Insert 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.

Page 15

Selecting image for hyperlink

Browse for file

Hyperlink

Insert

Click OK

Select web page

Folder containing web page to link to

Documents

A Microsoft Expression Tutorial - ICT lounge 8.1 – Web Design Mark Nicholls – ICT Lounge A Microsoft Expression Tutorial Contents Page (click page numbers to move to the page)