![Page 1: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/1.jpg)
Developing Web Sites Using Microsoft Expression Web
and Visual Studio 2005
Tanapat YimsooTechnical Consult, The Enterprise Resources Training Co., Ltd (ERT)
![Page 2: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/2.jpg)
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
![Page 3: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/3.jpg)
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
![Page 4: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/4.jpg)
Microsoft Expression Studio
Expression Web Expression Design
Expression Blend Expression Media
Expression Studio
4
![Page 5: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/5.jpg)
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
![Page 6: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/6.jpg)
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
![Page 7: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/7.jpg)
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
![Page 8: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/8.jpg)
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
![Page 9: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/9.jpg)
Expression Web Overview
• Using Expression Web
• Understanding Design View
• Understanding Code View
• Using Dynamic Web Templates
9
![Page 10: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/10.jpg)
10
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
![Page 11: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/11.jpg)
11
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
![Page 12: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/12.jpg)
12
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
![Page 13: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/13.jpg)
13
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
![Page 14: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/14.jpg)
14
DEMO Expression Web OverviewIn this demonstration, you will see how to explore the functionality of Design View
And Code View.
![Page 15: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/15.jpg)
Accessing Data in Expression Web
• Using ASP .NET controls to manage data
• Using XML and XSL to manage data
15
![Page 16: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/16.jpg)
16
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
![Page 17: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/17.jpg)
17
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
![Page 18: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/18.jpg)
18
DEMO Accessing Data in Expression WebIn 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.
![Page 19: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/19.jpg)
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
![Page 20: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/20.jpg)
What are web user controls?
• ASP .NET pages – essentially just HTML
• .ascx file extension
• Must be hosted in a .aspx page
20
![Page 21: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/21.jpg)
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
![Page 22: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/22.jpg)
22
Reusing user interface and code
control.ascx
application.aspx
default.aspx
Web site A Web site B
login.aspx
![Page 23: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/23.jpg)
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
![Page 24: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/24.jpg)
24
DEMO Creating and using web user controlsIn this demonstration, you will see how a simple web user control can be created in
Expression Web and Visual Studio 2005.
![Page 25: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/25.jpg)
25
Creating and using web services
• What are web services?
• Why use web services?
• Creating web services
• Using web services
![Page 26: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/26.jpg)
26
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
![Page 27: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/27.jpg)
27
Why use web services?
• Shared code
• Standards based
• Easy to create and use
![Page 28: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/28.jpg)
28
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
![Page 29: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/29.jpg)
29
Using web services
• Web references in web sites
• Programmatic functionality available over the web
• Code-behind pages written by developers
![Page 30: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/30.jpg)
30
DEMO Creating and using web servicesIn this demonstration, you will see how to create web services using Visual Studio
2005 and how to use web services in web sites
![Page 31: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/31.jpg)
31
Reporting and publishing in Expression Web
• Reporting options
– CSS reports
– Accessibility reports
– Compatibility reports
• Publishing options
![Page 32: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/32.jpg)
32
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
![Page 33: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/33.jpg)
33
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
![Page 34: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/34.jpg)
34
DEMO Reporting and publishing in Expression WebIn this demonstration, you will see how to use reporting and publishing in
Expression Web
![Page 35: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/35.jpg)
Ten reasons to get hooked on Expression
• Professional Design UI
• Standards-Based Site Design
• CSS Layout
• CSS Management
• Page Rendering
35
• Rich Data Presentation
• ASP.NET 2.0
• ASP.NET Development Server
• Reporting
• Visual Studio Integration
![Page 36: Developing Web Sites Using Microsoft Expression Web and ...download.microsoft.com/download/5/5/d/55d5907f-48... · Ten reasons to get hooked on Expression •Professional Design UI](https://reader030.vdocuments.mx/reader030/viewer/2022040621/5f36fb801f26d128d06b2089/html5/thumbnails/36.jpg)
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