Microsoft Expression Web
Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a web‐
site editing program. While the layout has changed, it still functions much the same as Frontpage. First, we’ll create a new website using Expressions Web
Creating a New Website
1. First, open up Microsoft Expression Web by going to the Start menu, Programs, Microsoft Expression, and then finally Microsoft Expression Web.
2. After opening the program, begin by selecting File and then New‐> Web Site. This will open the following dialogue box.
3. From here, you have several options for starting a web page. Choose any you like but
remember that the Templates offered by Microsoft have limited customization options.
a. Make sure to specify the location of where you want to save all the documents of your website. By selecting the Browse option, you will be given the option to choose an appropriate location of your choosing.
Now that we’ve created a website, we can start editing it.
Editing in Expression Web
A new blank page will be just like a word document. You may begin typing on it, just as if it were a word document. You can also format your text just like a word document using the formatting
toolbar.
Once you have created a site, it’s a good idea to save your progress. To do this, you can click the save button located on the tool bar.
After you have saved your website, you can view a preview of the website by pressing the button next to save (You have to save before the option is available). This will open up a new browser window, but Expression Web will still be open.
In order to add an image to your website, you must import it into your web folder. To do that go to Insert, then Picture‐>From File... (or From Scanner or Camera if need be).
To add in a background picture or background color, right click anywhere in the main editing window. From the options presented choose Page Properties. Under the Formatting tab, you can choose a background image or color. You can also choose to change the color of hyperlinks.
You can also add a table to your page if you would like a bit more organization. Go to Table, and then Insert Table… This will open up the table creating dialogue box where you can choose different options for your table.
In order to Hyperlink to another website or to another of your websites, highlight whatever text you want to act as a hyperlink and then right‐click the text. Select the option Hyperlink to open the Insert Hyperlink dialogue box.
Here, you can browse your computer to find a file to link, or you can type in the hypertext link in the Address bar. The Target Frame… option will allow you to choose to open the page in a new window or the same window as your webpage.
Publishing your Website
1. Once you have finished editing your website, you can transfer it over from you F: drive to the NSU student FTP server.
2. Open Microsoft Internet Explorer and type: ftp://students.northern.edu
3. You will be prompted by a dialogue box, so enter your e‐mail username and password for NSU.
Make sure to include the domain nsu\ before your username i.e. nsu\username
4. Select Page in Internet Explorer (v.7) and then select Open FTP Site in Windows Explorer. You will need to verify your username and password again.
5. Copy and paste your website folder into the FTP folder.
6. You may access the site by typing http://students.northern.edu/username/foldername into Internet Explorer’s address line.
If your homepage is name index, then typing the above in will take you directly to that homepage.
However, if it is named differently, then you must type in the page file name after the folder name, i.e. http://students.northern.edu/username/foldername/home.htm
Editing your Website after uploading
1. Open Internet Explorer and type in your homepage’s name. i.e.
http://students.northern.edu/username/foldername
2. Select Page in Internet Explorer (v.7) and select Edit with Microsoft Expression Web.
3. You will have to enter your username and password to verify (use domain nsu\ again)
4. After making changes to your website and save the changes, you can refresh your website to see the changes.
Making a CSS Page
First, click on File, New>Page to open up the following dialogue box.
Click on the CSS Layouts section to get the list from above. These pages will allow you to make a template‐like webpage. Use the preview image to decide which the right one for your page is.
The basic design page will function the same as any other user‐created page in Expression Web.
The main difference, though, is in the coding.
This separate style sheet will already have certain areas set up depending on what template you chose. This allows for easy and convenient style sheet editing to the various areas of your page.
Remember to save the style sheet when you are finished editing. In order to see some of the changes made to the page from the separate style sheet, you may have to re‐load the page.