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.

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

2

1

2

3

3

you are not currently using, by clicking the "x" button on their corners, and 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, , this means that this panel is displayed and fixes in its position.

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

10

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.

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