Help - Expression Web Basics

Opening Your Website in Microsoft Expression Web

  1. Start Microsoft Expressions Web.
  2. On the menu bar, select: Site > Open Site...
  3. Type the complete URL for your site in the Location textbox:
    http://faculty.harford.edu/faculty/<username>
    (Where <username> is the name of your faculty folder on the web site.)
  4. Click Open.
  5. When prompted for your username and password:
    • Enter your email address as your username. (Use your email address to ensure you connect to the harford.edu domain)
    • Enter your Password.
    • Click OK, and your website should open for you.

After your first login, your website will appear in the Managed Sites list when you click Open Site...


Working in Microsoft Expression Web

Web Expressions Image

Expression Web has a left pane "Folder List" that looks and operates much like Windows Explorer. It has a tree hierarchy and shows all the folders and files in your web space. The "Root" of your site is the top level of your site. It is shown at the top of your tree structure.

When you want to open a web page to work on it, simply double click the file in the left pane and it will open up in the right pane window. You want to make sure you are viewing the page in Design view. This lets you view the web page as you would see it in a browser. You can work in this view as you would in Microsoft Word. To confirm you are in Design View, on the menu bar select View > Page > Design.

You may create new folders and organize your web site any way you like. Simply highlight the folder (or "Root") that you want to make the folder in and right click it. Select New > Folder. Generally, it makes sense to group topics and web pages under appropriately named folders and to store your image files in a folder called images.


Previewing Your Webpage

Because each browser version has slight differences in the way it displays pages your webpage may look a bit different in the Expressions Web preview then it does in a browser, so it is recommended to preview your page in a browser as you are working on it.

  1. From the menu bar, select: File > Preview In Browser.
  2. Choose a browser to use for previewing your page.

Importing Files/Images into your Website

  1. Pick the location in the left pane where you would like to store the file you are importing and highlight it.
    Consider the Following:
    • Remember to organize your files you may want to create a folder to hold them.
    • If you importing an image it is a good idea to store it in an images folder. If one does not exist, you should consider creating one to store your files there.
  2. Once the location is selected, on the menu bar select: File > Import. (An Import dialog box will open)
  3. Click the Add File... button.
  4. Browse your computer for the file (Word, PDF or Powerpoint document) or image* (JPG or GIF) that you want.
  5. Select the file and click Open. (You will then see it listed in the Import Window)
  6. If you wish to add more files repeat steps 3 - 5 for each additional file.
  7. When you have selected all the files you wish to import, Click the OK button.

*It is recommended that you crop and resize the images you want to use before importing them so that the audience does not have to download a large image (over 150 KB).


Creating an Email Hyperlink in Expression Web

  1. Select and highlight the text you want linked.
  2. From the menu bar select Insert > Hyperlink. (An Edit Hyperlink Window will open)
  3. Select E-mail Address in the left side menu. (The text you highlighted will display in the Text to display: field. Make sure it is correct)
  4. Type the email address you wish to link to in the E-mail address: field
  5. Click OK.

Creating a Hyperlink to a File in Expression Web

The best way to create a link to your syllabus, Powerpoint slides, or other documents.

  1. Select and highlight the text you want linked.
  2. From the menu bar select: Insert > Hyperlink. (An Edit Hyperlink Window will open)
  3. Select Existing File or Web Page in the left side menu. (The text you highlighted will display in the Text to display: field. Make sure it is correct)
  4. Browse your web site folders to find the file you want to link to. (If the file is on your computer, you should import it first before linking to it)
  5. Highlight the file and it will automatically fill in the Address: field.
  6. Optional: If you want that link to open up in another browser window, click the Target Frame... button on the right side of the dialog box. A Target Frame dialog box will open and you must select the New Window option. (Note: File hyperlinks usually open in a new window)
  7. Click OK.

Creating a Hyperlink to a Webpage in Expression Web

  1. Select and highlight the text you want linked.
  2. From the menu bar select: Insert > Hyperlink. (An Edit Hyperlink Window will open)
  3. Select the Existing File or Web Page in the left side menu. (The text you highlighted will display in the Text to display: field. Make sure it is correct)
  4. Type in the full URL of the web site you wish to link to in the Address: field. (You may copy and paste the URL location from a web browser that has the window open if it is too long to retype it)
  5. Optional: If you want that link to open up in another browser window, click the Target Frame... button on the right side of the dialog box. A Target Frame dialog box will open and you must select the New Window option. (Note: Web hyperlinks typically open in the same window [Skip this Step] unless they link to a different website)
  6. Click OK.

Adding a Picture to your Webpage

  1. Place the mouse cursor in the spot on your web page where you want to insert the image.
  2. From the menu bar select: Insert > Picture > From File... (The Picture dialog box will open)
  3. Browse your web folders for the image you want to insert. Generally, it should be in your images folder. (If the image is on your computer, you should import it before trying to insert it into your web page. Remember, it should already be cropped and resized so it is not a large file to download)
  4. Highlight the filename of the image and then click Open.

Share