View
225
Download
0
Category
Preview:
Citation preview
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
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
Page 14
Completed Hyperlink
Microsoft Expression Tutorial
Unit 8.1 – Web Design Mark Nicholls – ICT Lounge
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
Recommended