Philadelphia University
Computer Science Department
Computer Skills - 0761111
Web Design Using Microsoft Expression Web 4
Part 1 – Getting Started
Prepared by: Eman Al Naji
1. Introduction – Internet and Web Design Concepts
Internet: A system of connected computers that allows your computer to exchange
data and files with other connected computers around the world.
World Wide Web (WWW): A collection of Web pages that are linked together within
the Internet system.
Hyperlink: A piece of text that can perform an action when the user clicks on it.
Web Browsers: Are programs that allow people to view the web pages on the World
Wide Web. (Such as: Internet Explorer, Google Chrome, Firefox, Netscape, Opera,
…etc)
Web Site: A computer storage area that contains one or more Web pages.
Home Page: The first web page you see when you launch a web browser. Or, it is the
first web page that appears when you visit a web site.
Uniform Resource Location (URL): A unique address given to each web page on the
World Wide Web (WWW).
Hyper Text Markup Language (HTML): A set of commands (programming
language) that is used to format text, pictures, etc. that are displayed on your web page.
1
2. Getting Started with Microsoft Expression Web 4
In this section, the Microsoft Expression Web 4 environment is discussed. How to
open the program, the parts of the window, and how to create a new web site, with a
home page as a start.
2.1. Starting the program, and the main parts of the window.
Start Microsoft Expression Web 4 by clicking on its shortcut from the Start
Menu. The following window will be displayed.
1
2
3
3
This is mainly how the window of Expression web would appear to you at the
beginning, when you don't have a web site opened.
There are several main parts of the Expression web window.
1. Menu bar: which contains several menus, each with certain commands that
are used in web design.
2. Tool bar: which contains several icons that each represent a certain
command.
The commands in both menu and tool bars will be described in this tutorial
as needed.
3. Panels: windows that contain most of the tools and features we use in
Expression web. We have several panels displayed above, such as "Folder
List panel", "ToolBox panel", …etc. You don't have to display all these
panels on your screen, to get more space, you can always close the panels
you are not currently using, by clicking the "x" button on their corners, and
2
whenever you desire to show any of them again, just go to "Panels" menu,
and check whatever panel you want.
You can also "Hide" a panel, and not close it completely, then it will be displayed as a
tab on the side of the screen, like the "Tag properties" panel below.
3
Whenever you want to display this panel, just hover it using your mouse, and it will be
displayed.
The icon displayed on the panel
, means that this panel can be hidden at the side of
the screen. But if the icon looks this way,
and fixes in its position.
, this means that this panel is displayed
You can fix the displayed panels you need as you prefer in your work.
2.2. Create a new site
As mentioned before, a web site is a storage area where your web pages and
other contents reside. So, before creating a website on Expression Web, create a
folder for this web site, this folder will be the "local site folder" or the "local root
folder", in this tutorial we will refer to it as the "Local Folder". Create the folder
from outside the Expression web on the desired location on your PC.
Then, return to Expression Web, and expand "Site" menu, and check the
commands in it. You will note that the commands such as "New Site", "Open Site"
and "Manage Sites List" all concerned with the site; the whole site as a folder not
single files in it.
4
Now, use "New Site" to create your new website. After clicking on it, the following
screen will be displayed.
Select "General" and "Empty Site" as displayed above, and make sure the location
entered, is the location of your local folder. Click "Browse" to locate your folder.
5
When you find your folder, make sure not to only select it, you have to double-click on
it, and become inside the folder, before you click "Open". Then you will return back to
the previous dialogue.
6
Note that, the name of your folder has been written down automatically as the name of
your website, as highlighted above. Press "OK", and your website is created. The
Expression window should look this way.
Bes
Note that the folder list panel now, includes the local site folder as displayed above.
And in the middle of your window, this page should list all contents of your web site,
but since you haven't added any contents yet, it is displayed empty.
Best Practice: When you create your website, don't start adding new pages, images
and videos without organizing, it is better to create folders inside your local site
folder, to manage and organize your files.
You can create subfolders from outside Expression web, using the ordinary windows
way. But, you can from inside Expression web environment, and using "Folder List"
panel, create all the subfolders you need.
Go to your local folder from "Folder List", right-click on it, and a list will be displayed.
Select New  Folder, then rename the folder as you desire.
7
This is how "Folder List" would appear after adding several folders, as desired.
You can add new folders whenever you need during the design of your website.
Whenever you click on a folder in the "Folder List", the contents of this folder will
appear in the area next to the panel, which is the main area of your web site. For now,
8
it is viewed using "Site View", which is the view that displays all folders and files in
your website.
2.3.Create a new page in the website.
To create a new page, you can either right-click on the local site folder, from "Folder
list", and select New  HTML. Or from "File" menu  New  HTML.
Where, HTML, is the language used to create web pages, as described before. And
all pages created in your web site, will have the extension ".html". This language is
mainly use to design the structure of your web pages and their contents.
9
When "HTML" is pressed, a new page named "default.html" is created as displayed.
Note, the icon of a House, next to the page name, indicating that this first page in your
website, is considered your homepage. You can rename this page to "index.html" if you
like. Click on it, then press F2, and change the name.
The following points can be considered when creating folders or files in Expression
Web:
1. It is better to use lower-case letters to name your folders and files. You can use
upper-case letters if you desire, but some browsers may cause troubles in
accessing files with upper-case letters.
2. You can include numbers in the names of your files or folders
3. You shouldn't use symbols in the names, such as ($, #, *, …etc). The only two
allowed symbols are the underscore "_" or the dash "-", which are usually used
instead of spaces, which are not allowed.
10
4. Include the file extension for any file you add in the website. For example, the
web pages files end with ".html" or ".htm", word document files ".docx", …etc.
5. You can name your web pages any names you desire, but the home page should
be named as "index.html" or "default.html", so that a browser when opening
your web site, will recognize your home page.
Hint: Most browses recognize "index.html" more than "default.html"
2.4.Managing your site
When you need to close your entire site, or re-open it again, always use the "Site"
menu, not "File". Since, from "File" menu, you can open and close individual files,
but not the entire site.
To open a site, click on "Open site" and the following dialogue will be displayed. From
this dialogue, you can find a list of all sites that you have created on this PC, and you
can select any of them to open, or you can just use "Browse".
11
In case that you have deleted some local site folder from your PC, and you want to
remove it from this list. Select "Site"  "Manage Sites List"
Select the desired web site, and press "Remove".
12