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.
Instructor: Jolanta Soltis
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!
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.
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.
Precise layout control
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)
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.
Click to place your cursor in the new layer and this time, choose Edit | Paste Text to open the paste text dialog.
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.
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.
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
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.
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 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.
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)
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.
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)
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.
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.
The final window allows another item to be added to form.
Click on finish when complete. Sample form is shown at right.
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)
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.
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]
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.
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.