Expression Web 4...Expression Web 4.0 Guide (1/2013) 5 Once you choose the CSS layout, your screen should look like this. On the right you will see the different CSS styles to apply.

Expression Web 4.0 Guide (1/2013) 1

Expression Web 4.0

Accessing your site

To access your website, go to Site, Open Site, and then type \\students\youruserid$ (example: mine would

say \\students\jstalnak$). If you run into difficulties with this working, you can also go to

\\students.uwyo.edu\youruserid$.


Naming files and folders

Files and folders used on your website should not have spaces in the names so you do not create broken links. Always

leave the spaces out. When renaming a file, remember to keep the file name extension in place. (Example: you

imported an Excel workbook called excel work.xls and you wanted to change the name to excelwork.xls to eliminate

spaces. If you do not keep the .xls extension on the file, the file becomes unusable).

Adding folders

To add a folder to your website, right-click on your root directory (remember it should say

\\students.uwyo.edu\youruserid$ - If it says anything else, you are not on your website). Choose New→Folder. Then

name the folder. Remember to click back on the root directory each time you wish to create a new folder. Otherwise,

the folders will be nested inside other folders.

You should create an images folder to store all of your pictures in, and then create a folder for all of your classes,

remembering not to add spaces in the folder names. You are not required to

Importing pictures and files

When creating your website, any file or picture that you link to or display on your site needs to be contained

within your site. Otherwise, the picture or file will show as a broken link to the user. To import a file, first select

the folder in which you wish to import the file. Next, select File→Import→File from the menu.


Select add file, and then browse for the file (you can add files or entire folders). Your file may be located on a

usb drive, a hard drive, a cd, etc. It does not matter where you import the file from. Click OK and then wait for

file to be imported. Once the file is imported, you can click on the +to the left of the folder name and verify that

the file imported correctly.

Creating a New Page To create a new HTML document, choose FileNewPage and then specify the kind of page you want to

create. For this example, we’ll be working with a css file, which will allow you to create a style sheet that can


be applied to individual pages. You will create a webpage for each of your classes and then link class

documents off of this webpage.

We will then choose the CSS Layout. I chose Header, nav, 2 columns, footer for my layout. Then choose OK.


Once you choose the CSS layout, your screen should look like this. On the right you will see the different CSS styles

to apply. If you click on the down arrow beside each of the different sections (example: masthead), you will see a

dropdown menu. Choose Modify Style, and then make the following modifications:

Masthead – you can change items like the font, background, border, position, layout, etc.

Font – you can change the font family, style, size, color, etc. You may change these items if you wish to create a

consistent font family, type, etc, that will be applied to all related items in the masthead.

Positon – change the width to 850 and the height to 250

Background – this is where you will browse for the picture you want to insert (remember the picture must be

part of your website/imported into the website) and then insert your picture here. Choose Background Image to

do this. This is also where you can change the background color for that particular element.

Top Nav – change width and height as you did above. You may also change background colors, fonts, and other

elements as you did above as well.

Left col – keep at 200. You may also change background colors, fonts, and other elements as you did above as well.

Page Content – change width to 650, keep height as it is. You may also change background colors, fonts, and other

elements as you did above as well.

Footer – change width to 850. You may also change background colors, fonts, and other elements as you did above as

well.

Note: You may have different options than you see above due to the specific layout you chose. Also, when you make

changes to the background, font color, font type, etc., these changes will be applied to all pages that have the css

properties.


You may also change any other attributes of the styles you wish.

Once all of these have been changed, you will be prompted to save the html page as well as the css. Save the html page

a different name as the css.

For subsequent pages, go to one of your html pages created, go to File-SAVE AS, and give the page a new name. This will

not affect the original document because you will not be typing over the original document. Be sure to save the page in

the corresponding class folder.

NOTE: Save your pages BEFORE adding any buttons to the pages. Be sure to save the pages in the correct folder (i.e.

your IMGT2400 page will be saved in your IMGT2400 folder).

Also, be sure to go right click and go to PAGE PROPERTIES. Rename the page to correspond with the page you created.

For example, name the page you created for IMGT2400 as Information Management.

Changing the background color, picture, etc., of an individual css

division/section

Changing the background color of the page:

Right click on the page, go to Formatting, and then change the background color. Note: When you change

the background color, the entire page will change. Do this before changing the individual sections of the page

and then change the sections you want (see below).

Changing background color of a section:

First, select the area you want to modify. Next, on the menu bar above, go to FormatBorders and

ShadingShading, and then choose the background color you want. This color should only apply to the

specific section you want to change.

Adding a picture to a section (such as the masthead):

Be sure that you have imported the picture into your images file on your website. Then, drag and drop the

picture into the masthead. Our masthead was originally set at 850X250. Be sure to change the masthead

position to fit the picture if needed.

Creating a hyperlink (not using an interactive button)

Select the area of the page where you want to insert the hyperlink, then go to insert, hyperlink on the menu

bar.


Next, change the text to display (what will appear on the screen) and then type in the url of the website. Press

OK.

Creating an e-mail link

Go to insert, hyperlink on the menu bar. Then change to e-mail address. Type in the text to display, and then

enter your e-mail address (mailto will then appear before your e-mail address). Then click OK.


Working with layers (use to modify and move the picture of you)

Determine where you would like your picture to appear on the page by clicking into the cell. Be sure that the

layers panel is selected (go to panels, layers). The layers panel will appear on the right of the screen.

t


Click the insert layer button.

Click inside the layer. Be sure that you have imported this picture into your website (into your images folder).

Then drag and drop the picture into the layer. You may need to do this a couple of times, and you may even

want to adjust the size of the layer first. Then you can move the picture around in the cell.


Once you do this, the accessibility properties window will appear. You should fill out the alternate text and long

description boxes. This is for accessibility purposes.

Working with layers (to include the citation on your pictures)

Locate the area in which you want to include the citation (could be on the picture header or on the picture of

you). Go through the same process of adding layers as you did above. You will need to just stretch the layer to

fit the text.

Editing a picture

To edit a picture in Expression Web 4.0, your first step is to select (but not open) the images folder on your site

by right clicking on the image you want.

Choose Open with

Choose Photoshop CS5

Size: for header, about 800 pixels X 200 or 225 pixels; for individual picture of you, around 250 pixels X 200

pixels (depends on the size of picture you want on your site.) You can first resize the picture, then crop the

picture, and then modify the picture in a variety of other ways.

Expression Web 4...Expression Web 4.0 Guide (1/2013) 5 Once you choose the CSS layout, your screen should look like this. On the right you will see the different CSS styles to apply.

Documents