A Microsoft Expression Tutorial

Transcription

1 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 Adding hyperlinks from text Page 15..Adding hyperlinks from images

2 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

3 4. Menu bar commands we need to know: File: Save as Preview in browser Page properties Format: Fonts Background colour Bullets Insert: Pictures Hyperlinks Table: Insert new table Alter an existing table Page 2

4 How to Save your Web Pages This is how you save your file as a web page: File 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

5 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 Opened web pages Your web page ready for editing Page 4

6 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. File Page New 2. In the window that appears click General HTML OK. General HTML OK Tabs New Blank Page Page 5 NOTE: Other Pages you are working on can be accessed using the Tabs

7 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 Etc. Table 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

8 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

9 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

10 Inserting Images 1. Click in the area where you want to put the image. Insert 2. Click Insert Picture From File. Picture From File 3. A new window will pop up. 4. Browse to where your images are stored. Location of image 5. Select the image you want then click Insert. Image I want Insert 6. Resize the image to the correct size by clicking and dragging the handles. Resized image Click and drag handles Page 9

11 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

12 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 Page 11 Colour options for hyperlinks etc

13 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

14 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. 6. Click OK. Browse for file Folder containing web page to link to Select web page Click OK Page 13

15 Completed Hyperlink Page 14

16 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 containing web page to link to Select web page Browse for file Click OK Page 15