01 EC Lab Expression Web Intro and Creating Webpages

8/9/2019 01 EC Lab Expression Web Intro and Creating Webpages

1/13

INFO 3435- E-COMMERCERachel Yen Chong

2-02-2013


2/13

EXPRESSIONSTUDIOINTRO

What is the Microsoft Expression Studio software suite?

tools for designing and building web and Windows clientapplications and rich digital media contents.

The Microsoft Expression Studio suite consists of:

Microsoft Expression Web:Website designer and HTMLeditor.

Microsoft Expression Blend + SketchFlow:Visual userinterface builder for XAML or HTML applications.

Microsoft Expression Design:Raster and vectorgraphics editor.

Microsoft Expression Encoder:Digital video encoder forauthoring VC-1 and H.264/MPEG-4 AVC contents.

2


3/13

EXPRESSIONWEB4

Expression Web can design and develop web

pages using XML, CSS 2.1, ASP.NET or

ASP.NET AJAX, XHTML, XSLT, PHP and

JavaScript.

3


4/13

ACQUIRINGMS EXPRESSIONSTUDIO4

The complete Microsoft Expression Studio

software suite can be downloaded free of charge

from the Microsoft Dreamspark Premium

Go to UWI DCIT website> Facilities> Scroll down

to DreamSpark> Download Agreement Form

Print and sign 2 copies of the form

Drop off both forms at the department to be stamped.

Once signed give forms to Mr. Naresh Seegobin.

4


5/13

EXPRESSIONWEBTUTORIAL

Creating a website

Creating web pages

Adding content to pages

Previewing web pages

5


6/13

CREATINGAWEBSITE

A website is simply a group of related files and

folders under one main folder.

Creating a website: 1. Site> New Site

2. From tool bar Click New Site button

There are a number of options when creating anew website including creating a website using a

premade template.

For now create an new empty website 6


7/13

7


8/13

CREATINGAWEBSITE

This action creates an empty folder.

This folder represents our website

All our web pages, images and other resources

such as css files will be stored in this folder as

part of our website

8


9/13

CREATINGWEBPAGES

Expression Web allows the creation of a numberof different types of pages

Html, aspx, asp, php, css, xml, javascipt, dynamicweb templates etc.

To create a new page: File > New > Page

Select Page type: HTML

Press ok

Next we need to save the page and give it a name File > save

Name the page index.html to represent our homepage 9


10/13

10


11/13

ADDINGCONTENTTOWEBPAGES

Expression Web is a powerful WYSIWYG editor

This means there is no need to type html code

Works much like a word processor interface

Allows users to drag and drop elements directly onto

the web page.

Lets try it:

Add a heading

Paragraph

Subheading

Numbered list

Bulleted list 11


12/13

PREVIEWINGTHEWEBSITE

It is important when designing web pages to

continually test your pages in multiple web

browsers to ensure they work and appear as

intended

The same page does not necessarily display the

same way in different browsers.

Expression Web provides a preview feature that

allows you to preview your pages in all the

different browsers installed on your computer

and in multiple different window sizes.12


13/13

PREVIEWINGTHEWEBSITE

To preview the web page:

File> Preview in Browser (or use toolbar icon)

> Choose the Browser version and screen size

Shortcut: F12 , previews in the last browser you

tested in.

13

01 EC Lab Expression Web Intro and Creating Webpages

Documents