introduction to microsoft expression web n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to Microsoft Expression Web PowerPoint Presentation
Download Presentation
Introduction to Microsoft Expression Web

Loading in 2 Seconds...

play fullscreen
1 / 56

Introduction to Microsoft Expression Web - PowerPoint PPT Presentation

  • Uploaded on

Introduction to Microsoft Expression Web. Instructor: Jolanta Soltis. 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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Introduction to Microsoft Expression Web' - selina

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
design tips
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!

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

creating a one page web
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.

to change the properties of a web page
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:
step two creating page layouts with layers or tables

Step Two: Creating Page Layouts with Layers or tables

Absolute positioning

Precise layout control

  • 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.
inserting image into the layer
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.
picture file types file size
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)

photos jpgs
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)
tag properties and css properties task pane
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.

adding a second layer
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.
adding and adjusting layers
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
adding and adjusting layers1
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.

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.
inserting a headline
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."
formatting headline styles
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.
css styles
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.
to create a hyperlink
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.
add title
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.
switching between tabs
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.
create hyperlink
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.
hyperlink to another web site
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
  • Click OK and the link is automatically set.
testing the link
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.
to add a table
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.

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.

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

sample view of tables
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

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


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.

adding cell row or column to a table
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.
merging or splitting cells
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.

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.

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

pictures creating thumbnails
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.
pictures creating thumbnails1
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.

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.

feedback forms
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)

form page wizard
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.

form page wizard1
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.

form page wizard2
Form Page Wizard

The final window allows another item to be added to form.

Click on finish when complete. Sample form is shown at right.

other components of feedback form
Other Components of Feedback Form

Time limitations in this course may prevent discussion of all this information. Summary is indicated below.

This allows you to save information up on your WWW site in addition to receiving emails. A good way to have “backup”

If there is considerable information being posted, you can put this information into an Access or Excel file.

You can have a “confirmation” page if someone responds to site. A good customer service tool.

Specify the file name, you can use a template to create one. You can also put in specific fields into the page so that you can merge information such as names, etc.

Allows you to specify specific data to be saved. (see first dialog box at left)

types of fields
Types of Fields

There are several types of fields you can set up. They are briefly discussed here. You can also create your own custom form by using Insert, Form on the men bar.


  • Option Button - this allows the user to click on different choices. The selections made will be transmitted in the email to the recipient (demonstrated in class).
  • Drop Down box – user can make selection by click on list. Multiple selections can be used. This is great for lists such as states, cities, etc.
  • Text Box (at right) allows data entry of specific information as name, address.
  • Text area box allows more information to be put in such as comments. (can be resized)
  • Check box – allows user to check off information.
  • Push Button – necessary to transmit the information.







confirmation forms
Confirmation Forms

Confirmation forms allow the viewer to see what they’ve transmitted to the webmaster. This can be on any page with additional commentary, links, images, etc.

First, create a blank page. You may wish to have the names of the fields at the left typed out and the fields displayed at right so the user knows what they filled out. You may wish to use a two-column table to do this. The information will appear as follows:

What appears on the right is the field. It must be named EXACTLY as you named the fields in the previous section. Again, remember, no spaces in these field names.

E-mail: [UserEmail] Telephone: [Phone]FAX: [Fax]

confirmation forms1
Confirmation Forms

To merge with the field and display it, click on Insert, Web Component

Click on Advanced Controls and choose confirmation field from the right side.

You will get a prompt (below right) asking for the name of the form field. Make sure it is correctly named. Remember, do not use spaces in these names.

Also, you cannot have two fields with the same name on the form.

Note: to speed up this process, it is best to use the copy and paste technique and to rename each field.

confirmation forms2
Confirmation Forms

Now, the pages need to be linked together. Go to the original form created. Right click in the form section, going to Form Properties and click on the options tab.

Click on Confirmation Page, and browse to find the page that you’ve just created.

When the form is filled out, the user will get a message showing what has been filled out.