![Page 1: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/1.jpg)
P O B 7 4 , P C 1 3 3 , A l K h u w a i r 3 3 , M u s c a t , O m a n
2017
Designing of a website
using Microsoft
Expression Web Step by Step
FARHAN GHAFOOR
IT Department, Higher College of Technology
![Page 2: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/2.jpg)
1
Contents Steps to Design a Website using Microsoft Expression Web. ................................................................. 2
Step 1: Open the Microsoft Expression Web ...................................................................................... 2
Step 2: Design the Home page ............................................................................................................ 2
Step 3: Design the Top page ............................................................................................................... 3
Step 4: Design the Bottom page ......................................................................................................... 4
Step 5: Design the Banana page ......................................................................................................... 5
Step 6: Design the Kiwi page ............................................................................................................... 6
Step 7: Design the Left page ............................................................................................................... 7
Step 8: Design the Default page.......................................................................................................... 8
Step 9: Updating of hyperlinks in Left.html ........................................................................................ 9
The Final Website.............................................................................................................................. 10
![Page 3: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/3.jpg)
2
Steps to Design a Website using Microsoft Expression Web. Attending staff will develop a website using Microsoft Expression Web. The website will be about a
fruit shop that wants to share information about fruits through the developing website.
NOTE: A video tutorial will also be available on YouTube and address of video will be provided on
the day of Training.
Step 1: Open the Microsoft Expression Web Open the Microsoft Expression Web from start menu and start designing the following pages.
Step 2: Design the Home page Create a new HTML page
Change the background colour of page
Write Fruits on the top
Insert Picture “ fruits “ from resource folder
Copy and paste text from “ fruits.txt “ file in resource folder
Add fruit names which are showing in the list
Save the file by giving name “ home “
![Page 4: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/4.jpg)
3
Step 3: Design the Top page Create a new HTML page
Change the background colour of page
Write Fresh Fruits on the top
Insert Picture “ Top “ from resource folder
Save the file by giving name “ Top “
![Page 5: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/5.jpg)
4
Step 4: Design the Bottom page Create a new HTML page
Change the background colour of page
Copy and paste text from “ Bottom.txt “ file in resource folder
Save the file by giving name “ Bottom “
![Page 6: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/6.jpg)
5
Step 5: Design the Banana page Create a new HTML page
Change the background colour of page
Write Banana on the top
Insert Picture “ Banana “ from resource folder
Copy and paste text from “ Banana.txt “ file in resource folder
Save the file by giving name “ Banana “
![Page 7: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/7.jpg)
6
Step 6: Design the Kiwi page Create a new HTML page
Change the background colour of page
Write Kiwi on the top
Insert Picture “ Kiwi “ from resource folder
Copy and paste text from “ Kiwi.txt “ file in resource folder
Save the file by giving name “ Kiwi “
![Page 8: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/8.jpg)
7
Step 7: Design the Left page Create a new HTML page
Change the background colour of page
Add three buttons Home , Banana and Kiwi from INSERT -> INTERACTIVE BUTTON
Save the file by giving name “ Left “
![Page 9: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/9.jpg)
8
Step 8: Design the Default page Create a new HTML page from FILE -> NEW -> PAGE and select the Frames Pages as showing
in the figure A
Add the pages through “ Set initial page “ as showing in Figure B
Save the file by giving name “ Default “
Figure A
Figure B
![Page 10: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/10.jpg)
9
Step 9: Updating of hyperlinks in Left.html Right click on home button and select Hyperlinks
Then click on Target Frame and write “main” (in small letters)
Repeat this for all the buttons
![Page 11: Designing of a website using Microsoft Expression …survey.hct.edu.om/training/docs/How to Create Website...Open the Microsoft Expression Web from start menu and start designing the](https://reader035.vdocuments.mx/reader035/viewer/2022063011/5fc5ba0e209bcb1eed2f658d/html5/thumbnails/11.jpg)
10
The Final Website After finishing all the steps, the final website will look like this.