You are on page 1of 36

Microsoft Expression Web

Developing Web Sites Using

and Visual Studio 2005

Tanapat Yimsoo
Technical Consult, The Enterprise Resources Training Co., Ltd (ERT)
Agenda
• Introductions to Expression Studio

• Expression Web Overview

• Accessing data in Expression Web

• Creating and using web user controls

• Creating and using web services

• Reporting and publishing in Expression Web

• Ten reasons to get hooked on Expression

2
Introductions
• Microsoft Expression Studio, a suite of tools for creative designers that
gives you the freedom to bring your vision to reality and boosts developer
collaboration in the delivery of rich user experiences for the Web, Windows Vista
applications and beyond.

3
Microsoft Expression Studio

Expression Web Expression Design

Expression Studio

Expression Blend Expression Media

4
Expression Web
• Expression Web is a professional design tool to create modern,
standards-based sites which deliver superior quality on the Web.

– Standards-based Web Sites


– CSS Based Layout
– Rich Data Presentation
– Powerful Server Technology

5
Expression Blend
• Expression Blend is the professional design tool to create engaging,
Web-connected, user experiences for Windows.

– Efficient Collaboration
– Tools for Creativity
– Codeless Interactivity
– Deliver Better Experiences

6
Expression Design
• Expression Design is a professional illustration and graphic design tool
that lets you build compelling elements for both Web and desktop
application user interfaces.

– Flexible Vector Drawing


– Dynamic Live Effects
– Expanded Workflow
– Innovative Design Environment

7
Expression Media
• Expression Media is a professional asset management tool to visually
catalog and organize all your digital assets for effortless retrieval and
presentation.

– Effortless Organization
– Seamless Workflow Integration
– Image and Video Editing
– Professional Presentation

8
Expression Web Overview
• Using Expression Web

• Understanding Design View

• Understanding Code View

• Using Dynamic Web Templates

9
Using Expression Web
• Create professional web sites

• High-quality, standards-based web sites

• Flexible and customisable UI

• Sophisticated design features


– Visual designers e.g. for layout of controls
– Specialized task panes e.g. for tag properties
– Toolbars e.g. for control of layout and formatting

• Clean and efficient code


– Supports industry standards – XHTML, XML, CSS

• Provides templates for standardized sites

10
Understanding Design View
• Task panes ease page creation and management

• By default
– 4 task pane panels
– Displays the 6 most common task panes

• Task panes can be detached and reattached

• Default settings can be restored easily

• Additional task panes are available

11
Understanding Code View
• Represents a coded view of the page design

• Standards-based
– HTML 4.01
– XHTML 1.0, 1.1
– CSS 1.0, 2.0, 2.1, IE6

• Synchronized with Design View and vice versa

• Code snippets allow easy entry of common code sections

12
Using Dynamic Web Templates
• Allow designers to quickly create high quality web sites

• 4 families of template
– Event
– Organizational
– Personal
– Small Business

• Support for HTML and ASP .NET pages

13
DEMO Expression Web Overview
In this demonstration, you will see how to explore the functionality of Design View
And Code View.

14
Accessing Data in Expression Web
• Using ASP .NET controls to manage data

• Using XML and XSL to manage data

15
Using ASP.NET controls to manage data
• Data sources
– AccessDataSource
– SitemapDataSource
– SQLDataSource
– XmlDataSource

• Data bound controls


– Standard controls e.g. DropDownList control
– Data controls e.g. GridView control
– Navigation controls e.g. Menu control

16
Using XML and XSL to manage data
• XML data can be accessed using XMLDataSource

• Easy-to-use drag-and-drop functionality

• XSL style sheets are used to format XML data

17
DEMO Accessing Data in Expression Web
In this demonstration, you will see how to configure an AccessDataSource and how
to bind controls to a data source in Expression Web And you will learn how XML
data can be easily incorporated in web pages and how it can be formatted using
XSL.

18
Creating and using web user controls
• What are web user controls?

• Why use web user controls?

• Reusing user interface and code

• Creating web user controls

19
What are web user controls?
• ASP .NET pages – essentially just HTML

• .ascx file extension

• Must be hosted in a .aspx page

20
Why use web user controls?
• Self-contained

• Can be reused easily

• Language independent

• Can be used in all pages within a single web site

• Wide range of uses


– Navigation controls
– Page headers
– Repeated page controls

21
Reusing user interface and code

control.ascx
Web site A Web site B

default.aspx

application.aspx

login.aspx

22
Creating web user controls
• User interface
– Created by designers in Expression Web
– Created by developers in Visual Studio 2005

• Functional code
– Created by designers in Expression Web – client-side
– Created by developers in Visual Studio 2005 – server-side

23
DEMO Creating and using web user controls
In this demonstration, you will see how a simple web user control can be created in
Expression Web and Visual Studio 2005.

24
Creating and using web services
• What are web services?

• Why use web services?

• Creating web services

• Using web services

25
What are web services
• Programmable logic accessible across the Internet

• Allow applications to send and receive information

• Language and platform independent

• Stateless

• Can be asynchronous

26
Why use web services?
• Shared code

• Standards based

• Easy to create and use

27
Creating web services
• Use Visual Studio 2005
– Create a web service web site
– Create .asmx files
– Create web methods of the XML Web service

• Can be customised for additional security

28
Using web services
• Web references in web sites

• Programmatic functionality available over the web

• Code-behind pages written by developers

29
DEMO Creating and using web services
In this demonstration, you will see how to create web services using Visual Studio
2005 and how to use web services in web sites

30
Reporting and publishing in Expression Web
• Reporting options
– CSS reports
– Accessibility reports
– Compatibility reports

• Publishing options

31
Reporting options
• CSS reports
– Reports styles in use
– Report style errors
– Page or site wide
– Allows use of filters

• Accessibility reports
– Improve visitor experience
– Based on W3C and WCAG standards
– Reports displayed as a web page
– Hyperlinks allow easy access to HTML

• Compatibility reports
– Check HTML/XHTML compatibility against different browsers
– Check CSS compatibility against different definitions

32
Publishing options
• A variety of scenarios
– Work locally and publish to remote production server
– Work on remote staging server and publish to remote production server
– Work directly on remote production server

• A variety of protocols
– FTP
– WebDav
– FrontPage Server Extensions

• Optimize HTML

33
DEMO Reporting and publishing in Expression Web
In this demonstration, you will see how to use reporting and publishing in
Expression Web

34
Ten reasons to get hooked on Expression
• Professional Design UI • Rich Data Presentation

• Standards-Based Site Design • ASP.NET 2.0

• CSS Layout • ASP.NET Development Server

• CSS Management • Reporting

• Page Rendering • Visual Studio Integration

35
For more information
• http://www.microsoft.com/Expression

• http://blogs.msdn.com/expression/

• http://blogs.msdn.com/xweb/

• http://en.wikipedia.org/wiki/Microsoft_Expression_Web

36