MICROSOFT EXPRESSION WEB WORKSHOP. Peg Fisher Pat Phillips

Transcription

1 MICROSOFT EXPRESSION WEB WORKSHOP Peg Fisher Pat Phillips

2 FREE CURRICULUM RESOURCES One semester - 8 modules including: History of the Web HTML basics Designing for communication Working with images Behind the basics Design process Production process Web publishing and maintenance Each module contains: Lesson plans Text Student Activities Rubrics Assessments

3 ADVANCED TUTORIALS Adding multi-media to your site Editing images in Expression Design Using Dynamic Web Templates (DWT) Cascading Style Sheets (CSS) Organizing content with tables

4 MICROSOFT DEVELOPERS NETWORK ACADEMIC ALLIANCE - MSDNAA Free software Dream Spark

5 LINKS Microsoft Expression for Educators ( m/en-us/dd aspx) Faculty connection ( cation/facultyconnection/default.aspx?c1=en-us&c2=0) Free sample web designs (

6 PROJECT IDEAS Student portfolios (using the personal site template) Small business/band sites using a template Create sites for clubs at school Include digital photos Create short movies with windows movie maker Online newspapers Blogs Insert a Deep Zoom image Use as a transition to C#, connection to Access database Embed a Photosynth object Digital storytelling Mobile web Hyperlink buttons (WTAJ TV) Include an API/widget from Amazon

7 SAMPLE OF BUTTONS VS TEXT LINKS

8 Used Expression Design STUDENT EXAMPLES Inserted a movie captured using a flip video And edited using Microsoft Movie Maker

9 STUDENT EXAMPLES

10 EXPRESSION STUDIO Deep Zoom Composer Zoom in to high resolution photos Expression Blend Create animations Create WPF applications Expression Design Create Web graphics Expression Encoder Edit video clips Expression Web Create web sites from scratch or start with a template Expression Web SuperPreview Preview websites in various resolutions and versions of IE

11 DEEP ZOOM Deep Zoom Provides the ability to interactively view high-resolution images Uses multi-resolution images to achieve a high frame-rate and fast open experience for even very large images Works with Silverlight Check out the MSDN site for more information on using Deep Zoom Example

12 EXPRESSION BLEND SketchFlow Rapidly create prototypes to review with the end-user Import Adobe Photoshop and Adobe Illustrator files Behaviors Allow you to quickly add interactivity and animation to your project Quickly create Silverlight and WPF applications Stress the importance of using layers with students Expression Blend Tutorials

13 EXPRESSION DESIGN Create vector graphics Import Adobe Photoshop and Adobe Illustrator files Slicing and exporting make creating custom graphics easily Designed for creativity Learn expression design

14 EXPRESSION ENCODER Expression Encoder is a streamlined video production tool that enables you to focus your time and energy on enhancing, encoding and delivering your on-demand or live video content at higher quality with less effort. We offer multiple versions of Expression Encoder, a free download with limited functionality and a professional version.

15 EXPRESSION WEB Create standards-based Web sites faster & easier Professional code editor & design surface Make your site stand out with rich graphics support Work with leading industrystandard technologies

16 TODAY S PROJECT TAKE THE CHALLENGE! Identify the mission and target audience for your site Design your storyboard (today we will use a template in Expression Web) Decide on color scheme, font style Decide what pages to keep, delete, or add Identify images to be replaced Personal 5 Template in Expression Web

17 HOW TO CREATE A NEW SITE Use the Site, New Site menu option to create a new website for your resume. (use Templates, Personal 5)

18 CSS USED TO SEPARATE CONTENT FROM STYLE Benefits Make it easy to make changes to entire site by changing it one place CSS files (cascading) Layout.css Style1.css Style2.css Style3.css

19 EVALUATE EACH PAGE Pages currently include About_me Contact Links Photo_gallery Resume Home page (default.html) Template page (master.dwt) This is a dynamic web template which provides a consistent look and feel for the site This is a great way to teach students about dwt pages

20 LETS START BY REVIEWING THE IMAGES USED FOR THIS SITE background_tile.gif is 124 x 144 pixels masthead_image.jpg is 660 x 109 pixels personal_photo.jpg is 240 x 361 pixels Use Expression Design to create your own background, image for the heading section, and a new personal photo (use CSS to see changes)

21 2 MINUTE TUTORIALS Text on a path Envelope distortion Simple gel button

22 RESUME PAGE Update the text Insert a video Work in teams of 2 or 3 and video tape a little intro about yourself BREAK Use Expression Blend to review the movie and add a title slide using Expression Design Insert into the side bar on the resume page

23 SUPERPREVIEW Preview the website using SuperPreview

24 HINTS AND TIPS Encourage students to create a dynamic web template that includes site design, navigation, header, and footer Use the reports under View -> Site -> Problems to check for slow pages, broken hyperlinks, etc. When adding images to a page, show the students how to use the picture toolbar to resample any images that were resized after they are added to the page To reset the workspace, use Panels -> Reset Workspace Encourage students to use layers and tables to help organize their information on the page Show the benefit of using Cascading Style Sheets (CSS) to help separate content from style