Microsoft Expression Web

Transcription

1 Microsoft Expression Web Microsoft Expression Web is the new program from Microsoft to replace Frontpage as a website 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.

2 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.

3 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.

4 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 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. Editing your Website after uploading 1. Open Internet Explorer and type in your homepage s name. i.e 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. a. If the option Microsoft Expression Web does not appear under the Page area, then it is not set as the default manager. b. Open up Microsoft Expression Web from the Start menu. c. After it opens up, it should prompt you with the option to set Expression Web as the default website editor. Choose to do this. i. If the option to change default editor does not come up, then go to Tools, and then Application Options. ii. Make sure the Check if Expression Web is the default editor for pages box is checked. d. After setting the default editor, close out of Internet Explorer. Then, open Internet Explorer again and go back to your homepage. The option under Page should be changed to Edit with Microsoft Expression Web.

5 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.

6 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. By changing the Designer option to Split or Code you can edit your page using HTML or CSS. Expression Web will have the structure of the HTML already in place due to whatever template you chose. Each section will also be labeled appropriately (the id tag corresponds to the tag above your selected area). By choosing the CSS Layouts, Expression Web will also set up your page with a separate style sheet (CSS sheet) that is automatically linked. By double clicking the link (located in the head section and ending in.css) you can access the style sheet.

7 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.