Introduction to Microsoft Expression Web

Loading...

PPT – Introduction to Microsoft Expression Web PowerPoint presentation | free to download - id: cc41-ZjE1Y



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Introduction to Microsoft Expression Web

Description:

Design Tips. Use a sans serif font. It shows better on a monitor. ... Some photo editing programs are included with a scanner. ... – PowerPoint PPT presentation

Number of Views:402
Avg rating:3.0/5.0
Slides: 57
Provided by: njit
Learn more at: http://www.njit.edu

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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 dont 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 arent
    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 youre 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 Ive
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
  • 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.
  • 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.

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 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, Ive 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, well 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 were
    ready to create a link to it from the page weve
    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 were 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.

29
(No Transcript)
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.
33
(No Transcript)
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 dont 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
websiteboth 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 createdit 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)
  • Dont 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
    (wont 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.
51
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.
52
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)
53
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.
1
  • 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.

3
2
4
3
5
6
54
Confirmation Forms
  • Confirmation forms allow the viewer to see what
    theyve 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
PhoneFAX Fax
55
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.

56
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 youve just created.
  • When the form is filled out, the user will get a
    message showing what has been filled out.