Create a One-Page Website Using Microsoft Expression Web This tutorial uses Microsoft Expression Web 3 Part 1. Create the Site on your computer Create a folder in My Documents to house the Web files. Save to this folder any images, art and class assignments (Word documents or PowerPoint presentations) that you will add to your website. Open Expression Web. Click the New Site button from the toolbar. The New dialog box opens. From the General Tab, choose One Page Site. In the Location section of the New dialog box, browse to the folder you created. Highlight the folder and click OK. Your web files will be stored here. Check the Add to Managed List box (more on this in a bit). Name the site (no spaces or special characters). Click OK. Page 1
Part 2. Create the page Add Text Double-click the default.html file to open it. In the left section of the screen is a list (Folder List) of the website files you saved earlier. This list also now includes your home page (default.html). The middle section of the page is your new, blank page. At the bottom of the blank page, click the Design button to show the design view of the page. Split view shows both html code and design view and Code shows html code only. Type the main heading for the page. The main heading of a web page, which can be compared to the title of a book (there s only one!), should always be coded as an h1 heading. The default p above the title denotes paragraph text. We will change this to be an h1 heading. Highlight the title. From the toolbar at the top of the screen, click the drop-down arrow for the Paragraph button. Click Heading 1 <h1>. Page 2
Choose the font from the Default Font drop-down menu.** **A serif font, like Times New Roman, is good to use for a main title Choose the title s size from the Default Size drop-down menu. Continue to add text to your page. This text should be left as paragraph text, but feel free to style it* using these buttons on the toolbar: *Similar to a Word document Page 3
Add an Image Remember that images for your Web page (.bmp,.gif,.jpeg,.png) should be saved in the site folder! Place the cursor on your page where you want the picture and then click the image button in the toolbar. The Picture dialog box opens. Navigate to your site folder and click the image to highlight. Click the Insert button. The Accessibility Properties box appears next. Type alternate text** for the image. Click OK. **This is the text that pops up when you mouse over the image. Screen readers also read this text out loud to blind or low-vision users The image will appear on your Web page. Re-size using corner handles. Add a Link Highlight the link text on your Web page Click the link button in the toolbar at the top of the screen. The Insert Hyperlink dialog box opens. Page 4
In the Text to display textbox, you will see the text you highlighted on the page. In the look in textbox, make sure this is your site folder Click the Word document you wish to open when the link is clicked Click OK. Your link will be configured on the Web page. Part 3. Upload to My Web Navigate to http://myweb.ecu.edu and log in with your PirateID and passphrase Create your Web space. Choose to make it Public (anyone can see it on the Web) or Private (only you can see it). Need Help? See the Create My Web Site pdf tutorial in the ITCS Learning Center (http://collab.ecu.edu/sites/itcstraining) Choose the Mass File Upload button. Page 5
The Mass Upload dialog box will open. Navigate to your site folder. Open the folder and select (highlight) the files for upload and click the Open button. Once the upload is finished, click the Web space link at the top of the Pirate Panel screen to see your Web page as it looks to users. Don t forget to check your links!! Page 6