Introduction to Microsoft Expression Web

1. Introduction to Microsoft Expression Web Instructor: Jolanta Soltis

2. Design Tips Use a sans serif font. It shows better on a monitor. Keep images small (in memory and size) so that they don’t clutter or overpower the site. It also allows for quicker downloads. Multiple fonts can be used, etc. However, try not to make site look like a ransom note! Remember, less is more! Try not to underline the text on your site, people will think they are links when they aren’t and could become frustrated. Test (which means all links) your site before publishing. There is nothing worse than having links that go to incorrect pages, worse yet to no place at all, resulting in an “error” message!

3. Step One: Create one page website

4. Workspace overview • Menus and toolbars • Editing window • Task panes • Status bar This is a blank page to work on. Similar to Word or FrontPage, it is in a WYSIWYG environment. The panels shown left and right can be resized or removed to work with your preferences. If you are familiar with FrontPage, the program works in a very similar fashion with additional functions added.

5. Creating A One Page Web Starting a New Site Choose New – Web site. In the New dialog, choose the Web Site tab at the top of the dialog window. Choose General and then choose Empty Web Site. Create a New Page File – New – Page. File – HTML.

6. New dialog box

7. To change the properties of a web page • In Design view, right-click an empty area, and then click Page Properties or on the File menu, click Properties. • In the Page Properties dialog box, on the General tab, change title, description and keywords:

8. Page Properties

9. Step Two: Creating Page Layouts with Layers or tables Absolute positioning Precise layout control

10. Toolbox • To add a layer to a page, click to select the Layer icon in the Toolbox task pane and drag it onto the page. The layer will automatically appear in the top left of the page. • To create the page layout for this design, click and drag to insert a layer at the top of the page. You can resize a layer by clicking and dragging on any of the corners of the layer.

11. Inserting image into the layer • To insert an image, choose Insert | Picture | From File and select an image from your hard drive. • In the Accessibility Properties dialog, enter a description of the photo.

12. Picture File Types - File Size Enhanced Metafile (.emf) Graphics Interchange Format (.gif) Joint Photographic Experts Group (.jpg) Portable Network Graphics (.png) Microsoft Windows Bitmap (.bmp, .rle, .dib) Windows Metafile (.wmf) graphics Tagged Image File Format (.TIFF)

13. Photos - JPGs • It is best to keep the photos as small as possible - less than 25K if possible. You can get good results with images of 10K. The goal is to get the page to download in 30 seconds or less. • If you’re using thumbnails and click through to “larger” photos of higher quality, you can use two versions, a low-resolution, low DPI (low memory) thumbnail and a larger file with higher resolution and DPI. • There are many programs out there to edit and touch up photos. Adobe Photoshop is probably the most powerful program available. It is over $500. Photoshop Elements 4.0 is available in discount stores for less than $100. Not as powerful, it is nonetheless excellent. Some photo editing programs are included with a scanner. • To obtain “digital” images, there are three ways: 1) digital camera (ranging in price from $30 - $1,000+; 2) scanner (good to have, costs are very reasonable now); 3) having photos developed and returned on disk - Kodak, Mystic, Clark, York, your local store (CVS, Walmart, Walgreens)

14. Tag Properties and CSS Properties task pane You can use the Tag Properties task pane to see the actual size of the image, and then set the layer to the exact size in the CSS Properties task pane. In this example, you can see that I’ve set the Layer Width to 800 pixels and the height to 105 to perfectly accommodate this image. Note the top and left settings should both be 0 to position this layer in the upper left corner of the page.

15. Adding a second layer • Next add a second layer by clicking to select the layer icon in the Toolbox and dragging it onto the page. • Then click and drag the layer to position it just below the first layer. • Insert another image into the second layer.

16. Adding and Adjusting Layers • Click to select the Layer icon in the Toolbox and drag in another layer. • Place your cursor into the new layer and enter the text by typing: • Sea Otters • Seals • Water Fowl • Frogs

17. Adding and Adjusting Layers • Next click and drag in another new layer and position it in about the middle of the page. • Click to place your cursor in the new layer and choose Insert | Picture | From File and insert picture. • Resize the layer to better fit the image by changing the height and width in the CSS Properties task pane. The height is 398 pixels and the width is 300 pixels.

18. Click to place your cursor in the new layer and this time, choose Edit | Paste Text to open the paste text dialog. • This feature provides more options for how you include formatting when you paste text into Expression Web. • For this example, I recommend the last option: Normal paragraphs without line breaks. • Next click and drag in another new layer and position it at the far right side of the page. • Open the Word file name seals.doc and this time copy all of the text below the top four lines and switch back to Expression Web.

19. Inserting a headline • Finally, let's add a headline to the story. • Click to insert your cursor into the new layer on the right and use the arrow keys as necessary to get your cursor in exactly the top left corner of the layer. • Press the return key to add two lines, use the arrow keys to return to the top left, and enter "Harbor Seals Lounge on California's Beaches."

20. Formatting Headline Styles • Click and drag to select the headline you just added: Harbor Seals Lounge on California's Beaches. • From the Common toolbar choose Heading 1 <H1| and the text will automatically resize and become bold.

21. CSS Styles • Heading styles offer many advantages, but if you don't like the way they appear, you can change the style by creating a new CSS Style. To do so, click on the New Style link in the Apply Styles or Manage Styles task panes. • In the New Style dialog, choose a selector. If you click on the arrow next to the Selector field, you can choose any HTML tag to redefine its appearance. For this example, choose h1. Leave the Define in option set to Current Page. (Note, you can also created external style sheets with Expression Web.) • With the Font Category open, set the Font-Family to Arial, Helvetica, sans-serif. • In the Font-size field enter 16 and make sure the size is set to px for pixels. (Note: you can also choose from many options when specifying font size in Expression Web.) • When you click OK the new style is automatically applied and the headline you formatted with the h1 tag automatically changes to reflect the new style.

22. Step three: add Hyperlinks

23. To create a hyperlink • Choose File | New | HTML and a new blank page appears in the central work area. • 2. Choose File | Save | give the file a name and click Save. • Note: Since this is not the main page of the site, we can call it anything we want. In this example, I’ve used the file name seaotters.htm, avoiding spaces and special characters to create a page that will work on any Web server. • Name the new page seaotters.htm and save it in your main Web site folder.

24. Add Title • Choose File | Properties to give this page a Title and set other page-wide properties, such as background colors and margins. • For now, we’ll just add some text to this page so we have something here to identify it. Place your cursor in the top of the work area, enter “Sea Otters,” and format it with an H1 tag. • Choose File | Save to save this page and we’re ready to create a link to it from the page we’ve been building.

25. Switching between tabs • To switch back to the page you designed in the first part of this lesson, click on the default.htm tab at the top of the work space. Notice that any time you have more than one page open in Expression Web, you can switch between pages by selecting the corresponding tab at the top of the page.

26. Create hyperlink • Now we’re ready to create that link to another page in your site. • Click to select an image or section of text that you want to make into a link. For this example, click and drag to select the Sea Otters text in the small layer in the left side of this design. • Choose InsertHyperlink • Select the page you want to link to. For this example, select the seaotters.htm page we just created. • Click OK and the link is automatically set.

27. Hyperlink to another Web site • Click to select the image or text you want to use as the link. For this example, click to place your cursor in the middle layer, just under the photo of the seals. • Here's a tip: It can be challenging to place your cursor next to an image in a layer, but the easy solution is to first click anywhere on the image to select it, then use the right arrow key on your keyboard to move your cursor off the image yet keep it in the layer. Then press the enter key to add a space and you're ready to add your text below the image. • For this lesson, enter the words "California Nature Conservancy." The click and drag to select the text. • Choose InsertHyperlink • To create a link to another site, enter the full URL of the site in the Address field. For this example, enter http://www.nature.org/. • Click OK and the link is automatically set.

28. Testing the link • To test your links, you have to preview your page in a browser. • First, save your page by choosing File | Save. • Note: If you are saving this file for the first time and you have used the images provided, Expression Web will offer to copy those files into your root site folder. Click yes and they will automatically be copied into your folder. • Then choose File | Preview in Browser | and select a browser from the pull out list. • Note: You can preview your pages with Expression Web using any browser available on your computer. Testing your pages in different browsers is an important part of ensuring your pages will work for the broadest audience on the Internet.

30. Tables

31. To add a table • In Design view, place the insertion point where you want to insert the table. • Do one of the following: • On the Table menu, click Insert Table. • On the Tables toolbar, click the Draw Table button and then use your pointer to draw the table. • Set the properties that you want.

32. Tables You can either “draw” or insert a table. Insert table allows you to set up # of rows/columns, alignment, and border size, padding, and spacing. If the border size is 0, the table structure (lines) will not appear in the browser.

34. Table Properties By right clicking in the table you can see the “table” properties wherein defaults can be changed for column width, colors applied to borders, etc. It is recommended for professional design appearances that the table be conservatively executed. Otherwise, the website has a cartoon-like or undesirable amateurish effect. Cell padding and spacing give “breathing” room to text in a table so that text in adjacent columns don’t touch.

35. Sample View of Tables Normal ViewAs you can see, there are lines in the table at top. The lower one has no lines but a dotted line appears. Alignment, fonts, colored background to separate cells or backgrounds can be applied to the table. There are four different views in FrontPage – website is created in Design. Split shows the design at top and the HTML code at bottom. Code shows the HTML in the document. Preview shows how it looks in browser

36. Preview Tab PreviewGridlines appear in the table at top, but not in the bottom. The preview tab shows you what site will look like up on the WWW. You can also click on File, Preview to review. Note that each browser views a website differently. Netscape, Mozilla, and IE convert the code in different ways.

37. Code The Code view shows the HTML section of the website. You may need to use this section on occasion to add special coding to the website that cannot be done in FrontPage. New feature in 2003: rows all have line numbers.

38. Adding cell, row or column to a table • To add a cell to a table • Place the insertion point in the cell next to where you want to add a cell. • On the Table menu, point to Insert, and then click Cell to the Left or Cell to the Right. • To add a row to a table • Place the insertion point in the row above or below the row that you want to add. • On the Table menu, point to Insert, and then click Rows or Columns. • Click Rows, and then type or select the number of rows you want to add. • Under Location, specify if you want to place the row above or below the selected row. • To add a column to a table • Place the insertion point in the column next to where you want to add a column. • On the Table menu, point to Insert, and then click Rows or Columns. • Click Columns, and then type or select the number of columns you want to add. • Under Location, specify if you want to place the column to the right or left of the selected column.

39. Merging or splitting cells • To split cells in a table • Right-click the cell that you want to split, point to modify, and then click Split Cells. • Click Split into columns or Split into rows. • In the Number of columns or Number of rows field, type the number of columns or rows that you want to split the cell into. • To merge cells in a table • Select a row, column, or group of adjacent cells. • Right-click, point to Modify, and then click Merge Cells.

40. Split While editing a webpage, you can directly see where you are working in the code section. New feature in 2003: showing the two on one screen. The tabs for design and code have been renamed from the earlier versions but are still the same.

41. Tables inside tables Tables can be layered inside each other. This method allows you to position text, images, links more accurately. When putting a table inside a table, insert the table from the menu. Drawing a table inside another table may cause problems. An example of multiple tables is shown at right. Lines remain in this table to show positioning, etc.

42. Pictures – creating thumbnails Sometimes a picture can be too large for a website…both in memory (which takes too long to download) as well as in size. FrontPage has this wonderful feature allowing you to create a thumbnail picture (smaller size in memory as well as physically for the website) • Right click in the picture. Left click on the prompt for the Auto Thumbnail. • A smaller image appears on the screen. There is a link on the image which allows the viewer to see a larger image of the page. The link is to the image file, not a web page. • Special notes: • When saving the web page, you will see that a new file for the smaller image is created…it has the word “small” after the original file name. (good idea to stick with this naming convention). See diagram at left. To keep your website files organized, you may wish to change the folder so that it will be stored with the larger sized image. Click on the “Change Folder” to select the correct folder.

43. Pictures – creating thumbnails • Special notes (continued) • Don’t like the size of the thumbnail? You can change the default sizes (width or height) by clicking on Tools, Page Options. Select the tab for Auto Thumbnail and you can have a standard size for all your thumbnails. It will also allow you to remove the bright blue border that may appear on your images. Features such as the beveled edge ARE not recommended.

44. Importing Files

45. Publishing the Site

46. Forms

47. Forms They can be created from a template or manually. Either way works well. A form requires considerable planning – you need to know what information needs to be captured. It is often best to have information in specific fields, such as first and last names, city, state, zip separate fields. You can make fields required to be filled in (won’t transmit if form is not complete) by going to properties. This is good if you are doing e-commerce or need to capture specific information. Try to make the document user friendly by not making it difficult to fill out. You may wish to boldface or change the color for required fields and have instructions at the top or bottom of the form. Testing of the form is critical as you want to make sure that the form works correctly and that the data received is understandable. Have someone who is not familiar with the website do the testing. Information transmitted through these pages is not secure. By using a secure server (website is prefixed by https instead http), private information such as social security numbers, credit cards etc. are encrypted in the transmission process.

48. Feedback Forms Comments are included in here and you can change this form to suit your requirements. (to remove, click on the text and press delete key. After the form is created, right click inside the form section to set properties as to where it will be sent (your email address)

49. Form Page Wizard The template allows you to create a form and shows a very simple form step-by-step. Working with the menus, you can type in the prompt or question that you want to appear as shown in the window at far right.

50. Form Page Wizard There are choices that can be made in the wizard that allow drop-down menu, check boxes, radio buttons, or a list. Drop-down menus allow multiple choices. This would not be a good idea for the credit card list as indicated at far right.