Introduction To Use of Microsoft Expression Studio For Web Site Development

Introduction to Use of
Microsoft Expression
Studio for Web Site
Development
By
Faith Brenner
IT Associate Professor
Richland Community College
Learning Module Objectives
• Understand use of Microsoft Expression

Studio for web development
• Become familiar with the major elements of
the Expression Studio interface
• Utilize tools in Expression Web to create a
sample web site with tables, interactivity,
and CSS
• Review CSS topics
• Implement CSS in sample web site using
tools in Expression Web
Microsoft Expression Studio
• Current version is Studio 2

• “Studio” because is contains multiple
applications for web development:
– Expression Web
– Expression Design
– Expression Blend
– Expression Media
Expression Web
• Integrated development environment
for web page/ web site creation
– WYSIWYG (“what you see is what you
get”) design view so that you can
see what the page looks like as you
develop it
– Code view for writing/modifying code
directly
– Many tools for enhancing pages
Expression Web Tools
• Cascading Style Sheet wizards/dialog boxes

• Scripting (“behavior”) tools for interactivity
• Table layouts and design view table tools
• Interactive form tools to interact with
databases
• Properties panes for modifying tag attributes
and styles
• Toolbox for drag-and-drop addition of
elements
• Report tools for checking links, images,
browser compatibility, and accessibility
Expression Design
• Graphics creation application

• Create a variety of graphic formats
for the web
– Bitmap and Vector graphics tools
– GIF, JPG, PNG formats
• Create a variety of special graphic
effects
– Gradient, emboss, bevel, etc.
•
Expression Blend
• Creates interactive graphics and
special effects
• Similar to Adobe Flash
– Layers and timelines
– Graphic tools
Expression Media
• Central storage location for web page
assets
– Graphics
– Photos
– Audio
– Video
• Helps organize assets
PROJECT:
Create CSS for a Web Page
• In this project, you will create a sample
web site with at least 2 pages. This web
site will utilize all three levels of
cascading style sheets.
• For implementation, you will use the CSS
layout and design tools in Microsoft
Expression Web
• In addition, you will use some of the other
tools (table layout, behaviors, toolbox)
CSS Project Steps
1.Review the cascading style sheet handout

– Note 3 levels of CSS and how they are
applied
• Inline – specific to the element in which they
are coded
• Embedded – applied to all elements to which
they refer on a single web page (page in
which they are coded in the head section)
• External (linked) – applied to all elements to
which they refer throughout a web site if
the pages are linked to the css file
2.Review the following topics:
• How CSS works
• CSS Terms
• CSS Selectors
Review:
How Does CSS Work?
• CSS syntax includes selectors, properties, and
values. This is similar to HTML elements,
attributes, and values. The method for writing
CSS is different, however.
• HTML example

<body bgcolor=”#00FFFF”>
• CSS example
 <style>
 body {background-color: #00ffff;}
 </style>

Review:
CSS Terms
• Selector
– The selector names the element you have “selected” to modify. In the
example above the selector is the body element.
• Property
– The property loosely corresponds to the attribute in HTML. The CSS property
names the characteristic of an element. The property in the example
above is background-color.
• Value
– The value describes how the property should be modified. The value in the
example above is the color 00ffff which is aqua.
• Declaration
– A declaration is simply a combination of a property and a value. By
combining the two, you “declare” the value of the property. In the
example above we declare the background-color should “be the color
aqua.”
• Rule
– A rule combines the selector, property and value. Rules can combine
multiple selectors and declarations. In the example above the rule is that
the web page’s background color should be displayed as aqua.
• Style Sheet
– A style sheet is made up of one or more rules.
Review:
CSS Selectors
• Types of Selectors:
– Type – applied to HTML elements
– Descendent/contextual – applied based on
element’s relation to other elements in a
document
– Attribute – style attribute applied to an
HTML element
– Class – applied to elements with named
class
– ID – applied to elements with named ID
– Pseudo-class/pseudo-element – applied to a
condition or state of an element
CSS Project Steps
3.Create a root folder called sample project.

4.Open Microsoft Expression Web
5.Open a new site and browse to the
sample project folder
6.Open a new page and select the CSS
layouts
7.Select the “header, nav, 2 columns,
footer” and click ok
– Note that a blank web page has been
created with that layout and an external
cascading style sheet file was also
created.
•
CSS Project Steps
8.In the design window, right-click anywhere

in a blank area and then click on Page
Properties
9.In the dialog box (on the general tab), give
your page the title “Sample Home
Page”.
10.On the formatting tab, select a
background color and a contrasting text
color (if background is dark, choose a
light color for the text)
11.
CSS Project Steps
11.Click OK on the dialog box to close it and

apply the changes.
12.Save your page as “index.html”
13.Save your css file as “layout.css”
14.In the Design view window, click in the
master head division and type your
name in that division for a heading.
15.Click the tab called “<div#masthead>
and then click the down arrow that
appears
CSS Project Steps
16.Click on the option “Select tag contents”

17.On the toolbar, select the Style tool and
in the dropdown list, select h1. This
applies the heading 1 tag.
18.With the heading still selected, go to the
apply styles panel and click the “new
style” link. The new style dialog box
opens.
19.In the dialog box, for the selector, select
the “inline style” option.
CSS Project Steps
20.In the categories, select “font”

21.In the font-family drop-down list, select
“Arial, Helvetica, sans-serif”
22.In the font-weight, select “bold”
23.In the font-style, select “italic”
24.In the color, select the color of your
choice (make sure it contrasts with your
background color).
CSS Project Steps
20.In the categories, select “block”

21.In the text-align, select “center”
22.Note the style preview and the style code in
the description box at the bottom of the
dialog box
23.Click OK in the dialog box to apply the inline
style
24.The style properties have now been applied
to your heading.
25.With your heading still selected, switch to
“split” view to see how the inline style has
been coded within the h1 tag.
CSS Project Steps
26.Your site now has both external styles coded

in an external style sheet (note the link tag
in the head of your page, linking the page
to the css file) and an inline style, coded
within a tag.
27.In the design window, click in the division
called “page _content”.
28.Insert an unordered list (bullets) in this
division. Create a list of several plants and
animals, in any order.
CSS Project Steps
29.Select each list item and in the tag

properties panel, find the class
attribute and name the class either
“plant” or “animal”, dependent on the
item selected.
30.On the menu bar, select “format”, then
select “new style”. The new style dialog
box opens.
CSS Project Steps
31.For the selector, type “.plant”

32.Leave the define in as “current page”
33.In the category, select “font”
34.For font-family, select “Arial, Helvetica,
sans-serif”
35.For color, select “green” (make sure the
shade of green contrasts with the
background).
CSS Project Steps
36.Click OK on the dialog box to apply the

style and note the change in the design
view.
37.Repeat steps 30 through 36, except make
the selector “.animal” and make the
color a different color (not green).
38.In addition, make the animal class bold
and italic within the style.
39.
CSS Project Steps
39.Note in the code window, that these new

styles are now in the head. These are
embedded styles.
40.You have now applied all three levels of
styles – external, embedded, and inline.
41.Add another new page to your site, this
time make it a blank page (don’t use the
css layout).
CSS Project Steps
42.On the menu bar, select table and then

select “layout tables”. The layout tables
panel appears.
43.On the layout tables panel, scroll down to
the table layout section, then select and
click on one of the layouts (your choice).
44.A table is inserted. You can use this table
layout out in the same way you used the
CSS layout divisions to organize the
content on your page.
CSS Project Steps
45.You may add an additional content to

these 2 pages you want. Experiment
with the various styles you can apply to
different elements.
46.Next you are going to link the 2 pages you
created in your site.
47.On the index page, find a location to place
a navigation button.
48.On the menu bar, select insert, the select
“interactive button”.
49.
CSS Project Steps
49.In the interactive button dialog box, select the

button design of your choice.
50.For text, type the name of the page you are
linking to (page 2).
51.Click the browse button and select page2.html.
52.Click OK to finish creating your button.
53.Repeat steps 47 through 52 for page 2, linking it
back to the home page.
54.Save your pages and the embedded files that
were created for you buttons.
55.View your web site in a browser.
56.
57.
CSS Project Steps
56.Note the rollover effect when you rollover the buttons

you created. Click the buttons to make sure they
link to the appropriate page.
57.Add more content to each of the divisions/cells for
both pages. You may add more elements to your
page by using the toolbox (note the HTML tag, form
controls and media categories) – click and drag the
elements to the page.
• For example, click on the horizontal line tool and
drag it under your name to place a
horizontal line under your name
58.When you are satisfied with your pages and have
tested them in a web browser, zip the root folder
with all of your files and turn them in.
Challenge
• Try adding some images to your pages and

see if you can use the behaviors to create
a rollover.
• Create additional pages and make sure you
make additional interactive buttons to
link them all.
• Experiment with additional styles and
behaviors to see what other effects you
can add to your site.
Summary
• The purpose of this learning module
was to:
– Introduce Microsoft Expression Studio
– Review important CSS concepts
– Apply CSS using tools in Expression
Web
– Utilize various tools available in
Expression Web to become familiar
with the interface.
– Develop a sample web site within
Expression Web with various
layouts.
QUESTIONS?

Introduction To Use of Microsoft Expression Studio For Web Site Development

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To Use of Microsoft Expression Studio For Web Site Development

Uploaded by

Copyright:

Available Formats

Introduction to Use of

• Understand use of Microsoft Expression

• Current version is Studio 2

• Cascading Style Sheet wizards/dialog boxes

• Graphics creation application

1.Review the cascading style sheet handout

3.Create a root folder called sample project.

8.In the design window, right-click anywhere

11.Click OK on the dialog box to close it and

16.Click on the option “Select tag contents”

20.In the categories, select “font”

20.In the categories, select “block”

26.Your site now has both external styles coded

29.Select each list item and in the tag

31.For the selector, type “.plant”

36.Click OK on the dialog box to apply the

39.Note in the code window, that these new

42.On the menu bar, select table and then

45.You may add an additional content to

49.In the interactive button dialog box, select the

56.Note the rollover effect when you rollover the buttons

• Try adding some images to your pages and

You might also like