27
Table of Contents
Portfolio Web Sites ................................................................................................................ 1
Open Your Portfolio Web Site for Editing ................................................................................... 1
Create a New Folder in Your Portfolio Web Site ........................................................................ 1
Web Pages ............................................................................................................................ 2
Create a New Web Page ............................................................................................................. 2
Change the Web Page Title ......................................................................................................... 3
Changing the Web Page Background Color ................................................................................ 3
Change the Web Page Background Graphic ............................................................................... 4
Preview a Web Page in Internet Explorer ................................................................................... 5
Refresh a Web Page in Internet Explorer ................................................................................... 5
Delete a Web Page ...................................................................................................................... 5
Rename a Web Page ................................................................................................................... 5
Text ....................................................................................................................................... 6
Keep Lines of Text Together ....................................................................................................... 6
Pictures ................................................................................................................................. 6
Insert a Picture from a File .......................................................................................................... 6
Change the Alternate Text Description ...................................................................................... 7
Resize a Picture ........................................................................................................................... 8
Crop a Picture ............................................................................................................................. 8
Create a Thumbnail ..................................................................................................................... 8
Change the Thumbnail Size or Border Thickness ....................................................................... 8
Hyperlinks ............................................................................................................................. 9
Create a Hyperlink to a Web Page in Your Portfolio Web Site ................................................... 9
Create a Hyperlink to a Web Page in Another Web Site ............................................................ 9
Create an E-Mail Hyperlink ....................................................................................................... 10
Create a Hyperlink to a PDF File ............................................................................................... 11
23
Change the Hyperlink Colors .................................................................................................... 12
Tables ................................................................................................................................. 13
Add a Table ............................................................................................................................... 14
Change the Vertical Cell Alignment .......................................................................................... 15
Change the Table or Cell Background Color ............................................................................. 15
Insert a Column or Row ............................................................................................................ 15
Merge Cells ............................................................................................................................... 16
Remove the Border from a Table ............................................................................................. 16
Split a Cell .................................................................................................................................. 16
Horizontal Lines ................................................................................................................... 16
Add a Horizontal Line ................................................................................................................ 16
Change the Horizontal Line Color or Height ............................................................................. 16
Dynamic Web Templates (DWTs) ......................................................................................... 17
Create a DWT ............................................................................................................................ 17
Add an Editable Region to a DWT ............................................................................................. 17
Attach a DWT to a Web Page .................................................................................................... 18
Detach a DWT from a Web Page .............................................................................................. 19
Cascading Style Sheets (CSS) ................................................................................................ 19
Overview ................................................................................................................................... 19
Types of CSS Styles .................................................................................................................... 20
Create a New CSS Style Sheet and Attach it to a Web Page ..................................................... 21
Add a New Style to an Existing Style Sheet .............................................................................. 22
Modify a Style in a Style Sheet.................................................................................................. 23
24
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
1
Portfolio Web Sites
Open Your Portfolio Web Site for Editing
1.
Open Expression Web by clicking on the Start button and select All Programs -
Microsoft Office – Microsoft Expression Web 3.
2.
Click on the Site menu and select Open Site.
3.
In the Site name field, enter the full address of your portfolio site (e.g.,
http://department.monm.edu/portfolio/2013portfolios/[first initial and last name]).
4.
Click on the Open button.
5.
Log in using your Monmouth College user name and password.
6.
Click on the OK button.
Note: The next time that you want to open your web site, click on the Site menu and
double-click on the web site address in the Managed Sites list.
Create a New Folder in Your Portfolio Web Site
1.
Click on the File menu and select New – Folder.
22
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
2
2.
Enter a name for the folder. (Type the folder name in all lower-case letters and use
hyphens to separate words.)
3.
Press the Enter key.
Web Pages
Create a New Web Page
1.
Click on the New Document toolbar button.
2.
Click on the Save toolbar button.
3.
In the File name field, enter a file name for the web page. (Type the file name in all
lower-case letters and use hyphens to separate words.)
4.
Click on the Change title button.
5.
In the Page title field, enter a title for the web page. (The page title displays on the title
bar of the browser window.)
25
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
3
6.
Click on the Save button.
Change the Web Page Title
1.
Right-click on the on the web page and select Page Properties.
2.
In the Title field, enter the new page title.
3.
Click on the OK button.
Changing the Web Page Background Color
1.
Right-click on the web page and select Page Properties.
2.
Click on the Formatting tab.
3.
Under Colors, click on the Background down arrow and select More Colors.
4.
Select the desired color.
5.
Click on the OK button.
6.
Click on the OK button.
31
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
4
Change the Web Page Background Graphic
To use a file that’s already in your website’s graphics folder:
1.
Write down the name of the graphic file you want to use (e.g., beige-linen.jpg).
2.
Open the template.dwt file.
3.
Right-click on the template.dwt file and select Page Properties.
4.
On the Formatting tab, change the name of the graphic file. (Be sure to leave graphics/
in front of the file name.)
5.
Click on the OK button.
To use a file from the Internet:
1.
When you find a graphic file that you like, right-click on it and select Save Picture As.
2.
Save the graphic file in the Pictures folder on your computer.
3.
Open the template.dwt file.
4.
Right-click on the template.dwt file and select Page Properties.
5.
Click on the Browse button.
6.
On the left side of the window, click on Pictures.
7.
Select the graphic file you want to use.
27
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
5
8.
Click on the Open button.
9.
Click on the OK button.
Preview a Web Page in Internet Explorer
As you are creating or editing a web page, you may want to view the web page periodically in
Internet Explorer to see how it looks.
To preview a web page, click on the Preview toolbar button or press F12. Internet Explorer
opens and displays the web page.
Refresh a Web Page in Internet Explorer
If you make a change to a web page, save the web page, and then don’t see the change in
Internet Explorer, then refresh the page. (Refreshing the page causes the most recent version
of the page to load in the browser.)
To refresh the page in Internet Explorer, click on the Refresh toolbar button.
Delete a Web Page
1.
Right-click on the web page that you want to delete in the Folder List and select Delete.
Rename a Web Page
1.
Right-click on the web page that you want to rename in the Folder List and select
Rename.
2.
Enter the new file name. (Be sure to leave the .htm extension on the end of the file
name or the web page will not open.)
27
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
6
3.
Press the Enter key.
Text
Keep Lines of Text Together
Whenever you press the Enter key after typing a line of text, Expression Web inserts a
paragraph break, which is about a ½ inch of white space between lines (see example below.)
To keep lines of text together, press Shift + Enter at the end of a line.
Pictures
Insert a Picture from a File
1.
Click on the page where you want to insert the picture.
2.
Click on the Insert menu and select Picture – From File.
3.
On the left, click on Pictures (or other location where the picture is stored).
4.
Select the picture file you want to insert. (To see thumbnails of your picture files, click
on the Views
down arrow and select Large Icons.)
5.
Click on the Insert button.
6.
On the Accessibility Properties window, in the Alternate text field, enter a short
description of the picture.
29
Monmouth College Information Systems Center
Expression Web Reference Guide for COMM 321
7
7.
Click on the OK button.
8.
If you need to resize the picture, you can either click on it and drag it by one of its corner
handles or double-click on it, enter a value in the Width field on the Appearance tab,
and click on the OK button.
9.
When you are finished resizing the picture, click on the Picture Actions button and
select Resample Picture to Match Size.
10.
Save the web page.
11.
If desired, on the Save Embedded Files window, click on the Rename button and enter a
different file name for the picture.
12.
If necessary, click on the Change Folder button and select your web site’s images or
graphics folder.
13.
Click on the OK button.
Change the Alternate Text Description
1.
Double-click on the picture.
2.
In the Alternate Text field, enter a short description of the picture.
3.
Click on the OK button.
Documents you may be interested
Documents you may be interested
