Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web
Designing of a website using Microsoft Expression Web...Step 1: Open the Microsoft Expression Web...
Transcript of Designing of a website using Microsoft Expression Web...Step 1: Open the Microsoft Expression Web...
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
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
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 “
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 “
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 “
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 “
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 “
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 “
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
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