Microsoft Expression Web Basics of Creating a Web Site

Transcription

1 Information Technology Department Pyle Center 1204 Wilmington College Wilmington, OH (800) , ext. 459 Microsoft Expression Web Basics of Creating a Web Site The first thing you should do when publishing a Wilmington College home page website is to request a web account. This can be accomplished through the following steps. Requesting a Website Account 1. Open a web browser and open the WC@home web page ( 2. If you are a student, click on the Student Web Pages link found under the Student Interests area. If you are a faculty or staff member, click on the Faculty Web Pages link found under the Class Resources area. 3. Click on the Request your Web Page link. 4. Enter the following information in the noted fields: ID Number: Enter your Wilmington College ID number Network Username: Enter you Wilmington College network username First Name: Your first name Middle Initial: Your middle initial Last Name: Your last name Status: Select Faculty, Staff, or Student 5. Click the Submit Request button. 6. You should be taken to a confirmation page stating that your account was created. Once your account has been created, a link to your web page should appear on the Student Web Pages (if you selected Student as your status) or the Faculty Web Pages (if you selected Faculty or Staff as your status) page the following day. Starting Microsoft Expression Web You can use Microsoft Expression Web (which is available on all Wilmington College PCs that run on Windows 7) to create your home page. You can create your entire site in Microsoft Expression Web and use the program to publish your site too. 1. Click on the Start orb ( ). Creating A Web Site Page 1 of 12 Last Revised 8/16/2013

2 2. Click on All Programs. 3. Click on the Microsoft Expression folder. 4. Click on Microsoft Expression Web. Creating a Web Site Before you can publish your web site to the web, you must first create it in Microsoft Expression Web. A site can consist of one page or multiple pages and folders. To create a new site in Microsoft Expression Web you need to do the following. 1. Open the Site menu (found at the top of the page in the menu bar). 2. Select New Site. 3. A new window, shown below, will open. 4. In the left-hand page, select either General (to start with a blank site) or Templates (to choose a template web site that you can customize). Select one of the options in the middle pane (these options will differ depending on whether you chose General or Templates). Creating A Web Site Page 2 of 12 Last Revised 8/16/2013

3 5. Change the Location path of a folder in your Z:\ drive (e.g. Z:\MySite). If the folder does not already exist, a new folder with that name will be created. 6. Type in a name for your site in the Name field and check the Add to Managed List box (if not already checked). 7. Click the OK button. 8. Your new site will be created. Opening an Existing Site 1. Open the Site menu. 2. Select Open Site 3. A new window, shown below, will open with a list of all your managed sites. 4. Select the site you want to open and click the Open button. 5. Your site will be opened. Creating a New Web Page You can add a new web page to your site by completing the following steps. 1. Click on the File menu in the menu bar. Creating A Web Site Page 3 of 12 Last Revised 8/16/2013

4 2. Select the New option in the menu. 3. A sub-menu will appear. From that sub-menu, select Page. 4. A new window, shown below, will open. 5. In the left-hand pane, select General. 6. In the right-hand pane, select HTML. 7. Click OK. A new web page will be created. You can now begin adding content to the web page. Opening a Web Page To open web pages complete the following steps. 1. Click on the File menu in the menu bar. 2. Select the Open option in the menu. Creating A Web Site Page 4 of 12 Last Revised 8/16/2013

5 3. A new window, shown below, will open where you can select the web page you want to open. 4. Find and select your web page and click the Open button. Inserting Images To add images to your web page, complete the following steps. 1. Click on the Insert menu in the menu bar. 2. Select the Picture option. A sub-menu will appear. 3. From the sub-menu, select From File Creating A Web Site Page 5 of 12 Last Revised 8/16/2013

6 4. A new window, shown below, will open where you can select a file. 5. Find your picture file, select it, and click the Insert button. 6. The Accessibilities Properties window, shown below, will appear. 7. Enter a short description of your image in the Alternate text field and a longer, more detailed description of your image in the Long description field. NOTE: Entering descriptions of the image in the Accessibility Properties windows makes the image describable to screen readers, thus making your web page easier to use for the vision impaired. It also makes a description of the image available to the web browser if for some reason the browser cannot display the image. 8. Click the OK button. 9. Your image should now appear in the web page. Creating A Web Site Page 6 of 12 Last Revised 8/16/2013

7 Inserting Hyperlinks You can insert hyperlinks into text and images so that when they are clicked on, the web browser transfers you to a new web site or web page. To insert a hyperlink, complete the following steps. 1. Select the text or image in your web page that you want to make into a hyperlink. 2. Click on the Insert menu in the menu bar. 3. Select the Hyperlink option. 4. A new window, shown below, will open. 5. If you are linking to another page in your site, find and select that page. If you are linking to a webpage on another web site, type the URL (e.g. for that page in the Address field. 6. Click the OK button. 7. Your text or image should now be a hyperlink. Viewing and Editing a Page s HTML Most of the time, you will edit you web page using Microsoft Expression Web s Design view. The design view is a graphical user interface (GUI) for editing your web pages. The GUI automatically generates the site s HTML and other web page coding that goes into your web site. There may be times when you need to see the HTML or coding and possible edit it directly. To do that, complete the steps below. 1. With your web page open, click on the View menu in the menu bar. 2. Select Page. A sub-menu will open. Creating A Web Site Page 7 of 12 Last Revised 8/16/2013

8 3. From that sub-menu, select either Split or Code. 4. If you selected the Split view you will see two panes stacked on top of one another (one pane with your page s Code view and the other with the Design view of your site). If you selected the Code view you will just be presented just you web page s code. 5. You can now directly edit you page s code by typing new code or deleting the existing code. Returning to the Design View 1. Click on the View menu in the menu bar. 2. Select Page. A sub-menu will open. 3. From that sub-menu select Design. 4. Your web page will be displayed in the Design view. Creating a Publishing Destination Before you can publish your web site to your Wilmington College home page you must tell Microsoft Expression Web how to connect to your home page. In Microsoft Expression Web, this is process is known as creating a publishing destination. Follow the steps below to create a publishing destination that connects to your Wilmington College home page. 1. Open Microsoft Expression Web and open your site. 2. Open the Site menu and select Publishing Settings Creating A Web Site Page 8 of 12 Last Revised 8/16/2013

9 3. The Site Settings window, shown below, will open and the Publishing tab should be selected. 4. Click the Add button. 5. Another window, shown below, will open. Creating A Web Site Page 9 of 12 Last Revised 8/16/2013

10 6. In the Name field, enter a name that you will remember (e.g. Wilmington College Home Page) for your publishing destination. 7. Set Connection Type to FrontPage Server Extensions. 8. In the Location field, type in the URL for your Wilmington College home page. The standard URLs for Wilmington College home pages are shown below (NOTE: In the URLs shown below, replace username with your Wilmington College username): Students: Faculty & Staff: 9. In the Credentials area, type in your Wilmington College username and password. 10. Click the Add button. 11. You be returned to the Site Settings window. The destination you just set up should now appear in the Publishing Destinations area. 12. Click the OK button. Connecting to Your Wilmington College Home Page Once you have created a publishing destination, you can connect to that destination. Once connected, you will be able to see what files you have already on your Wilmington College home page and add more files, edit the existing ones, or delete files you no longer need. You will be able to publish your offline files to your Wilmington College home page. 1. Open Microsoft Expression Web and open your site. 2. Open the Site menu and select Publishing. Creating A Web Site Page 10 of 12 Last Revised 8/16/2013

11 3. In the area where you normally edit your web page will be replaced by some text reading Connect to the current publishing destination. Click that text. 4. Once you are connected, the main section of the screen should now be divided into two areas (like what is shown below). On the left are your offline web site files and folders. On the right are the contents of your online Wilmington College web page. Creating A Web Site Page 11 of 12 Last Revised 8/16/2013

12 Publishing Your Web Site When you publish your website, your offline site files (the copy of your site files saved on your Z:\ drive) are copied to your Wilmington College web page. 1. Create your site and connect to your publishing location. 2. Open the Site menu and select either Publish Changed Files to Your Site Name or Publish All Files to Your Site Name (NOTE: Your Site Name will be replaced with whatever name you assigned to your publishing site). 3. If you opted to publish changed files, Microsoft Expression Web will check all your publishing site files and only publish files that where the offline version of that file has been changed from what is on the publishing site or where the file doesn t already exist on the publishing site. If you opted to publish all files, all your offline files will be uploaded to the publishing site. 4. If you are publishing a file and a file with that name already exists on your publishing site, a message, similar to the one shown below, will appear asking if you want to overwrite the file. If you click Yes or Yes to all, the file on your publishing site will be deleted and replaced by the version of that file you are now publishing. If you click No or No to all, the version of the file on the publishing site will stay the same and the version of the file on your offline area will not be published. Creating A Web Site Page 12 of 12 Last Revised 8/16/2013