Microsoft Expression Web 4 Lesson Plans

IT ACADEMY LESSON PLAN
Microsoft Expression
Web 4
Turn potential into success
Microsoft Expression Web 4Lesson Plans
Microsoft Expression Web 4: Lesson Plans

Introduction
Preparing to teach courses on Microsoft Expression Web 4 for the first time can be a challenge requiring careful planning and organization. The Microsoft IT Academy provides these lesson plans to help you save time, skillfully manage the teaching environment, and successfully communicate the intended lesson. The lesson plans are flexible and have been created in a concise format of small teachable units to allow you to use them with any textbook. To support a textbook-independent teaching style, each lesson plan contains suggested demonstrations and explanations. The lesson plans have been developed to be independent of a predefined lesson schedule. Whether the course is taught in semesters or quarter terms, we suggest the following class format: a 60-minute lesson followed by a 120minute lab (hands-on performance) session. This model is recommended in order to increase student performance and enhance the knowledge and skills gained through active participation in the course. Each lesson plan includes:

Learning Goals for each lesson. Learning Objectives that may be observed throughout the lesson. Lecture Outline that detail what to present in each class. Alternative Methods that detail alternative procedures. Hot Keys to demonstrate how to use keyboard shortcuts. Tech Tips to remind you of items that may require explanation. Discussion Questions that encourage class participation. Quick Quiz of multiple choice and true/false type questions.
Class Exercises and Projects that directly connect the student with the materials provided in the lesson are provided at the end of each lesson plan. These brief exercises and projects may be used independent of a textbook or as an assessment to determine skill mastery. Completed project files for each project are included in the Websites Folder to help you determine if the learning objective was accomplished.
Links to Microsoft Faculty Connection, where you will find resources to engage students in hands-on experience, self-paced lesson participation, and lesson reinforcement. Students can use these resources in or out of class.
Lesson 1: Understanding Microsoft Expression Web 4
Learning Goals//The goal of this lesson is to help students understand basic web concepts and to successfully explore and describe the Microsoft Expression Web 4 window. The student will learn to navigate the software and become aware of its features.
Learning Objectives:
Upon completion of this lesson, students will be able to:

Understand web concepts Explore sites Explore views Explore a webpage
Lesson Introduction:
Explain that Microsoft Expression Web is a full-featured professional tool for designing, developing, and publishing compelling, feature-rich websites that comply with web standards. Whether your students are designers, developers, or visual design professionals, Expression Web can help them bring their designs to the web. Explain that in this class, they will learn basic web concepts and how to navigate the Expression Web window.
Understanding Web Concepts:
Instructors should do the following:
Explain that the Internet is a group of globally networked computing resources. Explain that WWW stands for the World Wide Web and includes all resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP). Explain that the web is a group of interconnected computers talking to one another. Point out that computers are typically connected through phone lines, digital satellite signals, cables, and other types of data-transfer mechanisms. Explain that HTTP is the protocol being used to transfer hypertext documents that make up the Web. Explain that transferring data is a means of moving information from one point to another. Explain that a website is a collection of various pages related to a similar topic that are written in HTML (Hypertext Markup Language). Explain that a computer user accesses another computers website using a web address that is keyed into a browser. Explain that a web address is assigned by registering for a domain name on the World Wide Web. Describe to students how a web address is unique, much like a home address. Demonstrate how to visit various websites using a web browser. Explain that the term site refers to a collection of pages, media, scripts, and other assets for a website. Point out that when Expression Web is opened, the Site View tab is automatically added to the editing window. Demonstrate how to create a new site using the Site command on the Menu bar. Explain that a user can view site content in four different site displays.
Exploring Sites:
Point out that a file can be imported and exported from one site to another in order to save time. Explain that publishing a site allows for it to be placed on remote web servers. Explain that site reports are available to enable users to gather, analyze, and summarize site statistics in a variety of ways. Point out that checking and repairing accessibility issues on a site will improve the visitors experience and accommodate individuals with disabilities. Explain that search engine optimization is a collection of techniques to improve the sites ranking in search engines. Describe a subsite and explain that it is a site nested within another site.
Exploring Views:
Explain that the Site View of Folders displays a list of folders and pages in the site. Explain that the Site View of Publishing displays a list of contents in both the source and destination sites. Explain that the Site View of Reports displays a quick overview of statistics available about the site. Explain that the Site View of Hyperlinks displays a diagram of all files that link to a selected file. Point out that in Publishing View, the user can see the contents of the folders in the site and at the publishing destination. Demonstrate how to change the page view of the editing window to Design, Split, or Code using the View tabs at the bottom of the editing window. Explain that Design View allows the user to edit webpages using the design tools in an approximated WYSIWYG authoring experience.
Explain that Split View allows the user to see a splitscreen format that offers simultaneous access to both Code and Design views. Explain that Code View allows the user to edit webpages with HTML tags. Hot Key Switch from one view to another view Ctrl + Page Up or Ctrl + Page Down
Exploring Views:
Explain that Expression Web offers several options for creating webpages. Point out that users may set the default document type to determine the type of each new webpage they create. Explain that Expression Web offers two options for controlling page layout: cascading style sheets and dynamic web templates. Define the term layers and explain that layers are containers that hold page elements, such as text or graphics, in a webpage. Explain that external cascading style sheets allow for styles to be applied consistently across some or all webpages in the site. Explain that internal cascading style sheets or embedded cascading style sheets allow for styles to be applied only to the current webpage.
Alternative Methods:
Demonstrate how to select a range of cells by choosing the first cell, holding down the shift key, and selecting the last cell in the range.
Lesson Quiz:
True/False 1. Layers are containers for webpage elements. 2. Users may edit a webpage using HTTP while in Code View. 3. The term site refers only to pages in a website. 4. WYSIWYG means What you see is what you get. 5. The Save option on the Quick Access toolbar may not be used the first time that you save a workbook. Multiple Choice 1. _____ is a collection of related pages..
a) The Internet b) The World Wide Web c) A browser d) A website
2. _____ is the protocol being used to transfer hypertext documents that make up the web.
a) HTTP b) HTML c) WWW d) PDF
3. How would you obtain a web address for your website?

a) Make one up b) Register your computer c) Register your domain name d) Send email to the WWW
4. What type of software program is Microsoft Expression Web 4?

a) Word processing b) General web design program c) Text editor d) Image editor
5. What feature allows styles to be saved and applied to the current webpage?
a) Cascading style form b) Cascading style sheet c) Collective style form d) Collective style sheet
Quiz Answers:
True/False 1. True. 2. False. They may edit with HTML. 3. False. The term site refers to a collection of pages, media, scripts, and other assets of a website. 4. True. 5. False. Regardless of the method selected to save a file, if it is the first time you are saving the workbook, the Save As dialog box will open to enable the user to provide a file name. Multiple Choice 1. D (Website) 2. A (HTTP) 3. C (Register your domain name) 4. C (General web design program) 5. B (Cascading style sheet)
Class Projects:
Lesson 1Exercise 1 As a web design assistant, you are required to learn more about the new website design software, Microsoft Expression Web 4, being used in your office. Complete the tasks below to become more familiar with the software. 1. Open Microsoft Expression Web 4 using one of the methods discussed in class. 2. Create a new site in the appropriate Websites folder named terms. 3. Create a new HTML page named Lesson1. 4. Take a moment to review the Expression Web window and become familiar with all of the resources that are open on the screen. 5. Begin typing your terminology on the Lesson1 page. 6. List and define the following terms on the Lesson1 page. (Save often.) Use the following format: Term 1 definition 1 Term 2 definition 2 Etc.. Terms: The Internet, WWW, HTTP, the web, HTML, browser, web address, site, page, Design View, Code View, Split View, WYSIWYG, and cascading style sheet. 7. Save the file. 8. Switch to Code View and closely review the work you have completed. 9. Close the Lesson1 page and close Expression Web.
Lesson 1Project 1 You are ready to begin the process of designing a website for your new web design company, 123WebDesign. To get started on your new website, complete the following tasks:
Create a new site named 123WebDesign. Save the new site in the Websites folder. Open a new HTML page to begin working on your personal information. This page is going to be a rsum of your education and skills as they relate to web design. At a minimum, provide your full name, contact information, education, work experience, and references. (Tip: Shift + Enter will begin a new line within the current paragraph.) Save the new page as about. Review the website in Code View to become familiar with the layout of the page in HTML. Notice the code that was placed at each location where you pressed the Enter key and where you pressed Shift + Enter.
This will be the first page in the process of designing your business website. You will continue to use this site each time you work on a project. The result at the end of the course will be a completed website.
Microsoft Faculty Connection:
The Microsoft Faculty Connection site offers resources to engage students in hands-on experience, self-paced lesson participation, and lesson reinforcement. Students can use these resources in or out of class.
Introduction to Web Design Using Microsoft Expression Studio 4: Preface This document describes this complete, standards-based, single semester course on web design. The curriculum provides an extensive collection of creative teaching and learning materials that thoroughly span web design knowledge and skills and promote meaningful, real-world learning experiences. The modular design makes it adaptable to a wide variety of teaching scenarios. Introduction to Web Design Using Microsoft Expression Studio 4: Module 1, History and Future of the Web In this module students explore the past and future of Web technologies and the structure of the Web. The rights and responsibilities surrounding intellectual property rights in an electronic world are emphasized. Expression Web 4 Quick Start Tutorial: Beaches Around the World This lesson helps beginners create HTML pages with layers, Cascading Style Sheets (CSS), interactive buttons, and Dynamic Web Templates. Build a Web site about the trip of your dreams to beautiful beaches around the world. (This Expression Web tutorial is included in Module 5 of the semester-long curriculum unit, Introduction to Web Design Using Microsoft Expression Studio 4). Expression Web 4 Quick Start Tutorial: Heavy Metal Show Car In this lesson, students will learn to use the tools in Expression Web 4 to edit web documents in Design view in order to create a site that is ready for publishing to the Web. It is designed to help beginners create HTML pages with layers, Cascading Style Sheets (CSS), interactive buttons, and Dynamic Web Templates. By the end of these exercises, students will have created a simple standardscompliant Web site about Richard Tapias amazing, awardwinning 1970 Chevelle show car Heavy Metal.
Lesson 2: Adjusting the Workspace

Learning Goals//The goal of this lesson is to enable students to successfully explore and describe the Expression Web user interface and the components of Expression Web. The student will learn to navigate the system and locate necessary tools.

Navigate the user interface Use add-ins Use menus and toolbars Use panels
Explain that Microsoft Expression Web offers a user interface that is a WYSIWYG editor as well as a code viewer. Explain that additional menus, toolbars, and panels are available to assist in the web design process. Point out that students will learn to locate and enable or disable the panels, toolbars, and menus. Instructors should do the following:

The User Interface:
Demonstrate how to start the Expression Web 4 program. Explain that Microsoft Web Expression 4 is a WYSIWYG HTML Editor and general web design program. Define the terms webpage and site. Define the elements of the workspace. Point out the locations of the various menus, toolbars, panels, the editing window, and the status bar. Explain that the panels allow users to perform common tasks. Explain that the editing window allows users to visually edit pages or directly edit page markup. Explain that the status bar shows important information about a site and its pages.
Point out the location of the Menu bar, individual menu commands, and commonly used buttons. Explain that when Expression Web is opened, toolbars that were open the last time the user closed the program will appear in the same location they were left in. Point out the location of the Site View tab in the editing window. Explain that additional tabs will appear at the top of the editing window when other files are opened. Demonstrate how to choose a new file to appear in the editing window by clicking the tab. Point out the location of the Quick Tag Selector bar in the editing window.
HOT KEYS Switch between open web pages - CTRL + TAB Switch between open web pages in reverse order CTRL + SHIFT + TAB Discussion Question: Discuss with students the productivity pros and cons of using the Design View or the Code View when editing a webpage.
User Add-ins: Instructors should do the following:
Explain that the workspace is customizable, so users can change the way it looks to match their working style. Explain that an add-in is a supplemental program that extends the capabilities of Microsoft Expression Web by adding custom commands and specialized features. Point out that once an add-in is installed, it appears in the Manage Add-ins dialog box. Demonstrate how to enable and disable add-ins using the Tools menu.
Explain that if an error ever occurs with an add-in causing Expression Web to prematurely close, the program will start up the next time in Safe Mode. Explain that if an error occurs, all add-ins should be disabled and enabled one at a time to isolate the issue.
Tech Tip You can enable and disable add-ins while Expression Web is running, but you must close Expression Web before you can install or uninstall add-ins from your computer.
Using Menus and Toolbars:
Explain that a menu displays a list of commands as well as any shortcuts or hot keys that are available on the right side of the command. Demonstrate how to access a menu using Microsoft Expression Web. Point out that toolbars appear at the top of the screen and contain buttons, menus, or a combination of both. Demonstrate how to enable and disable toolbars using the View menu. Explain that if a toolbar is too long to display all of the command buttons, the Toolbar Options button will be displayed at the end of the toolbar. Demonstrate how to view additional toolbar commands by using the Toolbar Options button at the end of the toolbar. Demonstrate how to display all buttons on a toolbar using the Move handle. Demonstrate how to disable a toolbar using the command on the View menu.
Alternative Method Demonstrate how to enable a toolbar by right-clicking the toolbar and choosing the toolbar to open. Demonstrate how to disable a toolbar by right-clicking the toolbar and choosing the toolbar to disable.
Using Panels:
Explain that panels help users do their work by bringing the tools needed up close to the work being done. Point out that when a user first opens Expression Web, the Folder List, Tag Properties, Apply Styles, and Toolbox panels are shown docked on either side of the editing window. Demonstrate how to close a panel using the Close button in the upper right corner of the panel tab. Explain that Panels Autohide will hide panels when they are not in use and display them when the mouse pointer moves over the Autohide button. Demonstrate how to enable Panels Autohide using the Autohide button in the upper right corner of the Panels group. Demonstrate how to close all panels using the Close button in the upper right corner of the Panels group. Demonstrate how to open a panel using the Panels menu. Demonstrate how to move a panel by dragging the panel title bar to a new location. Demonstrate how to dock a panel by dragging the title bar of a floating panel to the docking location. Demonstrate how to float a panel by dragging the title bar of a docked panel away from the edge of the program window.
Tech Tip Press and hold down Ctrl while you drag a panel to prevent it from docking when the panel touches the edge of the program window.
Lesson Quiz:
True/False 1. Toolbars may not be resized in Expression Web. 2. When you initially open Expression Web 4, the Toolbox panel is displayed on the right side of the screen. 3. Four panels initially open in Microsoft Expression Web 4. 4. WYSIWYG means What you see is what you get. 5. The View menu is used to enable and disable toolbars. Multiple Choice 1. When a panel is sitting on either side of the editing window, it is considered to be _____. a) Locked b) Docked c) Floating d) Positioned 2. _____ is a supplemental program that extends the capabilities of Microsoft Expression Web. a) An add-on b) A cookie c) An add-in d) A nugget 3. If one of the Microsoft Expression Web features causes the program to prematurely shut down, the program automatically starts up the next time in _____? a) Safe Mode b) Protected Mode c) As Endangered d) Run a Virus Check
4. When a panel is randomly sitting on top of the editing window, it is considered to be _____. a) Locked b) Docked c) Floating d) Positioned 5. What keyboard combination or Hot Keys may be used to easily switch from one webpage to another in Expression Web? a) Ctrl + Tab b) Shift + Tab c) Alt + Tab d) Ctrl + Shift True/False 1. False. Toolbars may be resized. 2. True. 3. False. The term site refers to a collection of pages, media, scripts, and other assets for a website. 4. True. 5. True. Multiple Choice 1. B (Docked) 2. C (Add-in) 3. A (Safe Mode) 4. C (Floating) 5. A (Ctrl + Tab)
Quiz Answers:
Class Projects:
Lesson 2Exercise 1 As you work toward becoming a proficient web design assistant, you are learning more about Microsoft Expression Web 4. Complete the following tasks to continue the process of learning the software.

Open the site named terms in the Websites folder. You will continue to add terms to your terminology list as well as answering some questions about the Expression Web window. This completed webpage will aid in recalling the information. Using the View menu, verify that the Common toolbar is enabled and disable all other toolbars. Review the list of available toolbars. Open the Format menu and review the available commands. Then close the menu. Open the Tools menu and review the available commands. Then close the menu. Open a new HTML page to add terminology and answer questions. Answer questions or define the following terms on the lesson2.html page. (Save often.) Use the format below: Term 1 definition 1 Term 2 definition 2 Terms: HTML Editor, Add-ins, Safe Mode
Questions

List two commands located on the Common toolbar. List two toolbars available in Expression Web. List two commands on the Format menu. List two commands on the Tools menu. List the panels open in Expression Web now.

Save the file as Lesson2. Switch to Code View and review the work that you have completed as it appears in HTML code. Close the Lesson2 file and close Expression Web.
Lesson 2Project 1 You have started the process of designing a website for your new web design company. To prepare yourself so that you can move forward with your new website, complete the following tasks:
Open the site named 123WebDesign. Make about.html the active page on the screen. Ensure that the Standard and Common toolbars are enabled. These will be used as you move forward. Open the Tools menu and review the add-ins that are available. If you are working from a new installation of Microsoft Expression Web 4, there will be no add-ins listed. Review the Expression Web Status bar to determine the download size of your website thus far. You should find that it is fewer than 5 KB. Spell-check the about.html page for any spelling errors. Use a thesaurus to find a word to replace the term References on the about.html page. Save the webpage as About2.html.
You will continue to use this site each time you work on a project. The result at the end of the course will be a completed website.
The Microsoft Faculty Connection site offers resources to engage students in hands-on experience, self-paced lesson participation, and lesson reinforcement. These resources can be used in class or by students as self-paced instruction and lesson reinforcement outside of class. Introduction to Web Design Using Microsoft Expression Studio 4: Module 2, HTML Basics Show the class the information for this module and explain that the module includes learning experiences in basic HTML, modern web features including cascading style sheets (CSS) and interactivity, web standards and accessibility, creation of web media using Microsoft Expression Studio 4, and planning, development, publishing, and evaluation of websites.
Lesson 3: Getting Started with Microsoft Expression Web 4

Learning Goals//The goal of this lesson is to enable students to start the Expression Web program successfully and to create a new page. The student will learn to create, modify and format a web page using the tools in Expression Web.

Create a site and pages Enter text Use editing tools View pages in a browser Use an existing website Modify an existing page
Explain that this lesson includes creating a new webpage and entering text on that webpage, as in previous lessons. Student will then modify the pages using formatting and editing tools that are provided in Expression Web as well as preview the webpage in a browser.
Create Pages:
Demonstrate how to start the Expression Web 4 program using the Windows Start Button. Demonstrate how to start the Expression Web 4 program using a desktop shortcut. Explain that Expression Web opens the most recently used website. Demonstrate how to maximize and minimize the Expression Web window. Demonstrate how to create a new page using the File menu. Discuss proper naming schemes for webpages. Demonstrate how to open and close a webpage. Demonstrate how to save changes to a webpage. Demonstrate how to rename a page or folder.
HOT KEY Open a FileCtrl + O Save a FileCtrl + S Tech Tip Website names should be eight characters or less and may not include spaces.
Using Editing Tools:
Point out that the Expression Web editing tools are similar to those found in Microsoft Word. Point out the location of the Formatting toolbar and discuss the commands available on the toolbar. Demonstrate how to modify the text font, face, and size. Demonstrate how to modify the pages font family using the Tools menu. Demonstrate how to set text alignment using the commands on the Formatting toolbar. Demonstrate how to set paragraph margins in Design View. Demonstrate how to set a paragraph indent while in Design View. Demonstrate how to set a first line indent for a paragraph. Demonstrate how to set the spacing between characters using the Format menu. Demonstrate how to set the spacing between words, lines, or paragraphs using the Format menu. Demonstrate how to change the default color of all text on pages using the commands on the File menu. Demonstrate how to remove all formatting from text on a page using the commands on the Format menu. Demonstrate how to use the Cut, Copy, and Paste commands from the Edit menu. Explain how cutting, copying, and pasting can make the creation of a webpage more efficient. Demonstrate how to check a pages spelling using the commands on the Tools menu. Demonstrate how to use the Thesaurus on the Tools menu.
HOT KEY Increase IndentTab Decrease IndentShift + Tab Tech Tip Point out that text can be cut or copied from other programs such as Microsoft Word. Students should be made aware that all text and HTML code must be selected when cutting and coping within a webpage. Also, remind students that the Show Formatting Marks command on the Standard toolbar can assist in editing webpages.
Viewing Webpages in a Browser Window:
Point out the importance of previewing a webpage in a browser to view the final product. Explain that by default, the browser for previewing a webpage is Microsoft Internet Explorer. Point out that webpages viewed in Design View may look different in the browser. Demonstrate how to preview a page in a browser using commands on the File menu. Explain that webpages may also be previewed using the Snapshot panel. Demonstrate how to preview a webpage using the Snapshot panel. Explain that the split screen mode shows Design View in the top pane and the default browser view in the bottom panel. Explain that SuperPreview is a feature in Expression Web that simplifies the testing and debugging layout issues across different web browsers. Demonstrate how to display a page with the SuperPreview command on the File menu.
HOT KEY Preview in BrowserF12 Preview with SuperPreviewShift + F12 Tech Tip The first time you use SuperPreview, the page may not display. In this case, select a baseline browser, close SuperPreview, and then click the Display in SuperPreview command again. You can adjust the size of the split screen in the SnapShot View by dragging the mouse on the gray area between Design and SnapShot views.
Using an Existing Website :
Explain that existing websites can be modified using Expression Web. Demonstrate how to open an existing website in Expression Web. Demonstrate how to rename a file. Demonstrate how to review page properties in the File menu.
HOT KEY Open a FileCtrl + O
Modify an Existing Page :

Point out the location of the Common toolbar. Demonstrate how to access additional toolbars using the View menu. Explain the tools available on the Common toolbar. Demonstrate how to change the font appearance using the Common toolbar. Demonstrate how to modify text alignment using the Common toolbar.
Demonstrate how to apply borders and shading to text on a page. Discuss the importance of webpage color for appropriate display. Discuss webpage color as related to RGB colors and HTML colors. Explain HTML color codes. Explain the uses of styles on a webpage. Demonstrate how to modify a style in Expression Web. Explain ordered and unordered lists on a webpage. Demonstrate how to create an ordered list or unordered list. Demonstrate how to modify the appearance of lists on a webpage. Demonstrate how to be more productive using the Format Painter command on the Standard toolbar. Demonstrate how to create a horizontal line (rule) to separate information on a webpage. Demonstrate how to insert HTML code (bold, underline, horizontal line, or italic) into a webpage.
Tech Tip Explain that HTML color codes may be entered in upper or lower case. Explain to students that images may also be used in the place of bullets. Point out that appropriate word spacing may be seen only in a web preview.
Lesson Quiz:
True/False 1. Design View shows exactly how a webpage will appear in a browser. 2. The number of characters and spaces in a file name is unlimited. 3. The font face is the way that the letters appear. 4. Bullets in a bulleted list are limited to the styles available from Microsoft. 5. The size of the SnapShot screen may not be altered. Multiple Choice 1. When you double-click the mouse pointer over a word in a webpage, what are the results? a) The entire line of text is selected. b) The entire paragraph is selected. c) The entire sentence is selected. d) The entire word is selected. 2. Which are the two locations of the Spelling command? a) File menu and Standard toolbar b) Tools menu and Common toolbar c) Tools menu and Standard toolbar d) File menu and Common toolbar 3. A bulleted list is referred to as _____ in HTML. a) An ordered list b) An unordered list c) A marked list d) A bullet list
4. Which toolbar contains the commands to use to change the appearance of text such as font, font , size, font weight, alignment, and color? a) Tools b) Data c) Format d) Site 5. Which command should be used to review each paragraph mark, space, and other hidden formatting marks on a webpage? A) Show Hide command B) Show Formatting Marks command C) Show Paragraph command D) Activate Paragraph command
Quiz Answers:
True/False 1. False. It appears in a similar format. 2. False. Limited to eight characters and no spaces. 3. True. 4. False. Any image may be used. 5. False. Users may drag the gray border to resize. Multiple Choice 1. D (The entire word is selected) 2. C (Tools menu and Standard toolbar) 3. B (Unordered list) 4. C (Format) 5. B (Show Formatting Marks command)
Class Projects:
Lesson 3Exercise 1 Being a skilled web design assistant requires that you know how to properly format webpages for more appeal. Complete the tasks below to continue in the process of learning the software.
Open the site from the Websites folder named Terms Lesson 3. It is now time to format the terminology pages from Lessons 1 and 2. Open the page for Lesson1.html. Steps 5 through 8 should be completed using the commands accessed through Expression Webs menus. Select the text on the page and change the pages font family and font size to Georgia, small (12 pt). Select the term in each line and set the font style to bold and the effect to underline. Spell-check the page for errors. Insert a new paragraph at the top of the page and create a title for Lesson 1 Terminology. The title should be centered on the page, font style is bold, font size is large (18 pt), and font color is #0000FF. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. Complete the same tasks in steps 5 through 9 for Lesson2.html for the terms and questions on the page. The title for this page is Lesson 2 Terminology. Complete this task using only the commands on the Common and Formatting toolbars. Switch to Code View and review the work that you have completed as it is marked up in HTML code. Save both pages, close the pages, and close Expression Web.
Lesson 3Project 1 You are making progress in creating your new webpage. It is now time to begin creating and formatting new pages. Complete the tasks below to move forward.
Open the site named 123WebDesign. Make about.html the active page on the screen. You may use the commands in the menus or on the toolbars to complete the tasks below. Format the name and address information to center, bold, font size large, font color #800000. Select the headings: Education, Experience, and Recommendations. Format as Heading 3 style, font color #800000, with a bottom border. Insert a horizontal rule following the page heading. Save the page. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. To make the page more appealing, format the page background to be RGB color 255, 255, 234. Save the page. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. Be sure that you have saved the page and close Expression Web.
Microsoft Faculty The Microsoft Faculty Connection site offers resources to Connection: participation, and lesson reinforcement. Students can use
these resources in or out of class. engage students in hands-on experience, self-paced lesson
Introduction to Web Design Using Microsoft Expression Studio 4: Module 3, Designing for Communication Show the class the information for this module and explain that the module enables students explore human communication and the unique challenges that electronic modes of communication present for effective transmission of ideas. Projects focus on the use of design elements and principles to communication successfully to a variety of web audiences.
Lesson 4: Using Images on a Webpage

Learning Goals//The goal of this lesson is to enable students to use images in Expression Web. The student will learn to insert images, modify an image, and alter picture properties.

Add an image to a webpage Modify images Work with picture properties
Explain that images are an effective way to incorporate interest and flair into a website. Images can also be used to convey a specific message about the website. Expression Web provides tools and features that enable the web designer to modify images without the use of additional graphics software.
Adding an Image to a Webpage:
Explain that pictures or images from a file, scanner, or digital camera may be used on a webpage. Demonstrate how to add a picture from an image file to a webpage using the Insert menu. Demonstrate how to add a picture from a scanner to a webpage using the Insert menu. Demonstrate how to add a picture from a digital camera to a webpage using the Insert menu. Demonstrate how to select and delete a picture from a webpage. Demonstrate how to add a picture to the background of a webpage using the File menu. Demonstrate how to remove a picture from the background of a webpage using the File menu. Explain that Tracing Images allow users to create mockups of webpage images. Demonstrate how to add a Tracing Image to a webpage using the View menu. Demonstrate how to design a webpage based upon a Tracing Image using the Layout Tables and Cells panel. Demonstrate how to turn off a Tracing Image using the commands on the View menu.
Alternative Method: Demonstrate how to add a picture from an image file to a webpage using the commands on the various toolbars.
Modifying an Image:
Explain that various types of images may be used to create a professional-looking webpage. These images may come from a camera, scanner, or mobile device. Explain that some images may be converted using Expression Web. Demonstrate how to convert an image to a transparent GIF file using the Pictures toolbar. Explain that Expression Web will enable a modified image to be saved as an embedded file. Demonstrate how to save a modified image file as an Embedded File using the commands on the File menu. Point out that Expression Web will automatically set the height and width of an image to match the actual dimensions of the picture. Explain that the Page Editor Options dialog box may be used to specify the image size. Demonstrate how to use the Page Editor Options dialog box to set the code Expression Web uses to set picture dimensions. Demonstrate how to add or remove width and height properties while the webpage is in Design View. Demonstrate how to resize a picture by dragging the picture handles to a new position while in Design View. Demonstrate how to resize a picture by specifying pixel or percent values while in Design View using the Format menu. Explain that the file type of a picture in a webpage can be changed to GIF, JPG, PNG-8, or PNG-24 in Microsoft Expression Web. Demonstrate how to change the file type of a picture while in Design View using the Shortcut menu. Point out that Expression Web also allows a user to create a smaller thumbnail-sized version of a picture.
Demonstrate how to create a smaller thumbnail-sized version of a picture using the Pictures toolbar. Demonstrate how to set the default properties for thumbnails using the Tool menu. Explain that an image may be cropped directly inside Expression Web. Demonstrate how to crop an image in Expression Web using the Pictures toolbar. Explain that the appearance of pictures can be changed directly in Microsoft Expression Web by using the Pictures toolbar. Demonstrate how to crop, rotate, or flip a picture using the commands on the Pictures toolbar.
Demonstrate how to modify the contrast or brightness of a picture, make a particular color in the picture transparent, convert the picture to grayscale, and add a beveled edge to the picture using the Pictures toolbar. Tech Tip Point out that any changes to an image may be undone using the Restore command on the Pictures toolbar.
Working with Picture Properties:
Point out that the Picture Properties dialog box gives users access to the most commonly used picture attributes. Explain that students must work in Design View while modifying picture properties. Review the commands on the General tab of the Picture Properties dialog box. Review the commands on the Appearance tab of the Picture Properties dialog box. Explain that alternative text is displayed when a visitor hovers over the image and is also used by text readers to make a site usable by people who have disabilities.
Point out that the use of hyperlinks will be discussed in a later section. Demonstrate how to set the wrapping style for an image using the Appearance tab in the Picture Properties dialog box. Demonstrate how to determine the alignment of an image using the Appearance tab in the Picture Properties dialog box. Demonstrate how to set the border thickness for an image using the Appearance tab in the Picture Properties dialog box. Demonstrate how to determine the vertical and horizontal margins for an image using the Appearance tab in the Picture Properties dialog box. Explain that when an image is pasted into a webpage, Expression Web may attempt to change the picture type to GIF or JPG when the page is saved. Demonstrate how to set the default settings for converting images to GIF or JPG. Demonstrate how to enable the Pictures toolbar from the View menu. Point out and explain the tools available on the Pictures toolbar. Explain that images may be generated in Expression Web from Adobe Photoshop .psd files. Demonstrate how to generate a usable image file from an Adobe Photoshop file using the Insert menu.
Tech Tip Point out that Adobe Photoshop files should be uncompressed images of 200 MB or less. Alternative Method: Demonstrate how to generate a usable image file from an Adobe Photoshop file by dragging the .psd file from the Folder List panel into your page in Design View.
Lesson Quiz:
True/False 1. The alignment for a picture may be set on the Appearance tab in Picture Properties. 2. The manner in which a picture floats on a page is called position style. 3. A webpage background means selecting the color to appear behind text and images. 4. Saving a modified image to a new file is called saving an embedded file. 5. Cropping an image means to recolor the image to introduce new colors. Multiple Choice 1. Which of the following is not a source for images for a webpage? a) A file b) A copier c) A scanner d) A digital camera 2. Which of the following is not an image type that can be used with Microsoft Expression Web? a) JPG b) GIF c) PNG d) PDF 3. _____ is a smaller version of a picture used for webpages. a) A thumbnail b) A thumbprint c) A MiniPic d) A TinyPic
4. What command on the Picture toolbar is used to undo changes and revert to the original image format? a) Undo b) Return c) Restore d) Repair 5. What are the default picture settings for converting pictures in Microsoft Expression Web? a) PDF and PNG b) PNG and JPG c) JPG and PDF d) JPG and GIF
Quiz Answers:
True/False 1. True. 2. False. Its called wrapping style. 3. False. Colors, images, or image watermarks may be used in a webpage background. 4. True. 5. False. It means to resize the image and include only the portion of the picture that you want to keep. Multiple Choice 1. B (Copier) 2. D (PDF) 3. A (Thumbnail) 4. C (Restore) 5. D (JPG and GIF)
Class Projects:
Lesson 4Exercise 1 Images are included on webpages to add interest to the information being presented. As a web design assistant, it important for you to be able to work with images on webpages. Complete the tasks below to learn more about images on webpages.

Open the site from the Websites folder named Terms. You will now include images on the Terms website. Open the page titled Default.html. Enter your full name, student identification number, class number, and course name. Format this page using any of the skills that you obtained in the last lesson. Create a new paragraph below the course name. Insert any appropriate image file from your personal collection of pictures. Format the picture size to be no larger than 500 x 375. Enable the Picture toolbar. Apply a beveled edge to the image. Adjust the contrast and brightness to create more appropriate coloring for your webpage. Save the page and allow for image embedding. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. Save both pages, close the pages, and close Expression Web.
Lesson 4Project 1 You are continuing to work on the 123WebDesign website. Before beginning the creation of additional webpages, you must complete the about.html page. Complete the tasks below to move forward. **You will need a personal photo to complete this lesson.
Open the site named 123WebDesign. Make about.html the active page on the screen. Insert an appropriate picture of yourself after the page heading. Crop the image to include only the headshot portion of your photo. Format the picture size to be no larger than 250 x 250 pixels. Enter alternative text to identify the photograph with your name. Adjust the brightness and contrast to enhance your photo. Change the background to an appropriate color that enhances your photo. Insert the arrow image at the beginning of each line below the headings for Education, Experience, and Recommendations. Save the page. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. Create a new page saved as skills.html. The page title is Software Skills. The following is included as an unordered list on the page:

Microsoft Expression Web 4 Microsoft Word 2010 Microsoft Windows 7
Format the Heading and unordered list to coordinate with the about.html page. Format the unordered list to use the picture file at_symbol.gif as a picture bullet for the list. Insert a horizontal rule following the page heading. Save the page. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. Be sure you have saved the page and close Expression Web.
The Microsoft Faculty Connection site offers resources to engage students in hands-on experience, self-paced lesson participation, and lesson reinforcement. These resources can be used in class or by students as self-paced instruction and lesson reinforcement outside of class. Introduction to Web Design Using Microsoft Expression Studio 4: Module 4, Working with Images In Module 4, students create images with Microsoft Expression Design 4 to meet web communication needs. Image concepts related to scanning, digital photography, and image manipulation techniques are included.
Lesson 5: Using Hyperlinks on a Webpage

Learning Goals//The goal of this lesson is to enable students to successfully learn to use hyperlinks in Expression Web. The student will learn to insert a text hyperlink, create an image hotspot, and modify a hyperlink.
Upon completion of this lesson, students will be able to do the following:

Describe a hyperlink Create and modify hyperlinks Modify the appearance of a hyperlink Use hyperlinks
Explain that hyperlinks are necessary on all websites to enable users to move from one webpage to another throughout the website. Hyperlinks are also used to reference users to other webpages outside the current site. Point out that Expression Web offers an array of tools to create and modify hyperlinks on a webpage.
Describe a Hyperlink:

Explain that hyperlinks link one webpage to another. Explain that a hyperlink destination is encoded as a Uniform Resource Locator (URL) and is an address that specifies a protocol. Point out that hyperlinks can also link pictures, multimedia files, locations in a webpage, email addresses, and programs. Explain that an image or picture hyperlink is a picture to which the user assigns a destination URL. Explain that the pointer will change appearance when hovering over the picture if is there is an associated hyperlink. Explain that an entire image or only a portion of an image (hot spot) may be designated as a hyperlink. Show examples of location, email address, and image hyperlinks. Demonstrate the use of location, email address, and image hyperlinks. Explain that a bookmark or HTML anchor is a location or content that a user has marked on a webpage. Point out that the bookmark is used as a destination for a hyperlink.
Creating and Modifying Hyperlinks:
Explain that hyperlinks may be created to link to an existing or new webpage, file, email address, or location on a webpage. Demonstrate how to create a hyperlink using the Insert Hyperlink command on the Standard toolbar. Explain the various commands that are available in the Insert Hyperlink dialog box. Demonstrate how to modify a hyperlink by changing the address of the hyperlink.
Explain that it is extremely important to determine the Target Frame setting based upon the type of page being created. Demonstrate how to modify a hyperlink using the Insert Hyperlink command on the Standard toolbar by changing the text to display on the webpage. Demonstrate how to remove a hyperlink from text using the Insert Hyperlink command on the Standard toolbar. Explain that deleting the content on a webpage that contains a hyperlink will remove both the content and the hyperlink. Demonstrate how to change the information relating to a hyperlink using the Insert Hyperlink command on the Standard toolbar. Explain that a bookmark is a particular location on a webpage that links to an HTML anchor. Demonstrate how to create a bookmark using the Bookmark command on the Insert menu. Demonstrate how to remove a bookmark using the Bookmark command on the Insert menu.
Tech Tip Point out that if text or an image is not selected, the destination URL is displayed as the hyperlink text. Explain that the Target Frame option is not available for email addresses. Explain that in the Code window a bookmark can also be removed by pointing to the <a> tag that appears in the Quick Tag Selector bar at the top of the webpage, and then click the arrow next to the <a> tag and select Remove Tag. Make sure that students understand the difference between browser bookmarks, such as Favorites, and webpage bookmarks.
Modifying the Appearance of a Hyperlink:
Point out that a user can control the appearance of a wide variety of hyperlink properties. Explain the meaning of the various states of a hyperlink on a webpage: hyperlink, visited hyperlink, hoveredover hyperlink and active hyperlink. Explain the HTML code associate with a hyperlink as it appears in each state: a:link, a:visited, a:hover, a:active. Point out that changing a hyperlinks appearance in the cascading style sheet will change its appearance for the whole website. Explain that in order for users to change the style of a single hyperlink, they must create an inline style that defines the properties desired using the Modify Style panel. Demonstrate how to change the style of a single hyperlink using the Modify Style panel. Explain that a user may add hyperlink styles to an internal cascading style sheet in a webpage using the Apply Style panel. Demonstrate how to add new hyperlink styles using the Apply Style panel. Explain that a user may change the colors of hyperlinks in a single page using the Page Properties dialog box on the File menu. Demonstrate how to change hyperlink colors using the Properties dialog box. Demonstrate how to change the hyperlink color of particular characters using the commands on the Common toolbar.
Tech Tip Point out that hyperlink states must appear in the order presented above (a:link, a:visited, a:hover, a:active) in the cascading style sheet in order for all states to be effective.
Using Hyperlinks:
Explain that to view the webpage, file, or bookmark (HTML anchor) that a hyperlink points to, the user can click on the hyperlink from the webpage where it appears. Point out that a user may visit a destination hyperlink in either Code View or Design View. Demonstrate how to go to a hyperlink in either Code View or Design View by pressing and holding the Ctrl key and then clicking the hyperlink in the webpage. Demonstrate how to go to a bookmark in either Code View or Design View by pressing and holding the Ctrl key and then clicking the hyperlink in the webpage. Point out that you can generate a report, using the Hyperlinks panel, that lists all files in your site and shows the number of hyperlinks to and from each file. Demonstrate how to generate a hyperlinks report in the Hyperlinks panel. Demonstrate how to navigate to a hyperlink while in Code View using the Edit menu and the Code View command. Demonstrate how to return to the source or destination of the hyperlink followed, using the Edit menu and the Code View command. Explain that a user can add a behavior to a webpage that automatically sends the visitor to a different webpage or URL that is specified. Demonstrate how to redirect a webpage using the Behaviors panel.
Tech Tip Explain that in addition to regular hyperlinks, the Code View of a webpage also displays code hyperlinks, which enable users to go to the code that contains a class-based styles rule set and script function, or opens an external cascading style sheet (CSS) that is attached to the page.
Alternative Method Point out that a bookmark may also be seen using the Insert menu, Bookmark command.
Lesson Quiz:
True/False 1. Hyperlinks may be created only by using webpage text. 2. If you do not provide text for a URL, then Expression Web will create text for the URL based upon the webpage file name. 3. When creating a hyperlink, as long as you know a portion of the web address, Expression Web can search the Internet to find the remainder. 4. A web designer may change the color of a hyperlink as it appears on the webpage. 5. When the mouse pointer is moved over a hyperlink, the point usually takes the shape of a hand. Multiple Choice 1. _____ links one webpage to another webpage. a) A file b) A hyperlink c) A bookmark d) A web image 2. Which of the following does URL stand for? a) Unique Relative Location b) Unique Resource Link c) Uniform Resource Locator d) Uniform Relative Link
3. Which term refers to an image or portion of an image that is used as a hyperlink? a) Thumbnail b) Image spot c) Bookmark d) Hotspot 4. Which term refers to the appearance of a hyperlink after it is visited, hovered over, or active? a) State b) Look c) Expression d) Display 5. If the mouse pointer looks like a hand while hovering over a hyperlink, in what form does it appear in other locations of a webpage? a) Hourglass b) I-beam c) Plus sign d) Arrow
Quiz Answers:
True/False 1. False. Images may be used as well. 2. False. The complete web address will become the text for the URL. 3. False. You must provide the complete, correctly spelled URL for Expression Web. 4. True. 5. True.
Multiple Choice 1. B (Hyperlink) 2. C (Uniform Resource Locator) 3. D (Hotspot) 4. A (State) 5. D (Arrow)
Class Projects:
Lesson 5Exercise 1 Hyperlinks are used on websites to provide a means of navigating from one page to another within the website. As a web design assistant, you must be able to create and modify hyperlinks on webpages. Complete the tasks below to learn more about images on webpages.

Open the site from the Websites folder named Terms. You will now include hyperlinks on the site to navigate from one page to another. Open all website pages and make the default.html page the active page. Create a new paragraph at the top of the page. Insert an interactive button, Brick Row 9. Rename the button text to Home and click the Browse button to hyperlink the button to the default.html page. Press the Tab key and insert two additional interactive buttons for Lesson 1 and Lesson 2 pages. Switch to Code View and copy the lines of code that apply to the interactive buttons. Paste the code for the interactive buttons into the code for the Lesson 1 and Lesson 2 pages. Save the pages. Preview the page using Internet Explorer and test the hyperlinked buttons. Close the Internet Explorer window when the review is complete. Select the image on the default.html page.
Create a rectangular hotspot around the image. Hyperlink the image to http://www.microsoft.com. Save the page. Preview the page using Internet Explorer and test the hyperlinked image. Close the Internet Explorer window when the review is complete. Save all pages, close the pages, and close Expression Web.
Lesson 5 Project 1 The 123 Web Design website is well under way. Before it is complete, the website needs navigation buttons and other hyperlinks. Complete the tasks below to create hyperlinks on the website.
Open the site named 123WebDesign and all pages in the website. Make the default.html page the active page. Insert the company name as the Page Title and your name as the subtitle of the page. Format the heading and subheading using skills you learned in earlier lessons. Insert an appropriate image on the default.html page to add interest. Create a new paragraph at the top of the page to insert navigation buttons. Insert interactive buttons (Glass Capsule 5) to create a navigation scheme for each page in the website. Copy the code for the navigation scheme from the default.html page to all other pages in the website. Save all pages. Preview the default.html page using Internet Explorer and test the navigation buttons. Close the Internet Explorer window when the review is complete. Make the skills.html page the active page.
Create hyperlinks for each of the following items:
Microsoft Expression Web 4 link: http:// www.microsoft.com/expression/products/ StudioWebPro_Overview.aspx Microsoft Expression Word 2010 link: http:// office.microsoft.com/en-us/word/Microsoft Expression Windows 7 link: http://www.microsoft.com/ windows/windows-7/default.aspx
Modify the hyperlink style to change the hyperlink color from blue to any color that you choose. Save the page. Preview the default.html page using Internet Explorer and test the hyperlinked list. Close the Internet Explorer window when the review is complete. Modify the hyperlinked list that the target is a new page for each hyperlink. Preview the default.html page using Internet Explorer and test the hyperlinked list. Close the Internet Explorer window when the review is complete. Ensure that you have saved the page and close Expression Web.
The Microsoft Faculty Connection site offers resources to engage students in hands-on experience, self-paced lesson participation, and lesson reinforcement. These resources can be used in or out of class. Introduction to Web Design Using Microsoft Expression Studio 4: Module 5, Beyond the Basics with Expression Web
Lesson 6: Working with Tables

Learning Goals//The goal of this lesson is to help

students learn to successfully use tables in Expression Web. They will learn to insert a table, format a table, and modify table properties in Expression Web.
On completion of this lesson, students will be able to:

Create a table in Expression Web Format tables Use Table Properties
Explain that tables are useful in websites for organizing information in a readable manner. Point out that Expression Web offers easy-to-use table creation tools for inserting, formatting, and modifying tables. Instructors should do the following:
Explain that tables may be created using several different methods in Expression Web. Explain that tables are used to organized text, graphics, and other HTML. A user can customize a table in a variety of ways to make them more attractive and easier to read. Explain that tables consist of columns and rows and are useful in organizing information. Point out that the intersection of a column and a row is called a cell. Demonstrate how to insert a new table using the Insert Table command on the Table menu. Explain that a table may be modified at any time. Demonstrate how to add a cell, row, and column to a table using the Insert command on the Table menu. Explain that a single cell can be split to form two cells or two cells can be merged to create a single cell in a table.
Demonstrate how to split or merge selected cells using the Modify command in the Table menu. Demonstrate how to delete a cell, row, or column using the Delete command in the Table menu.
Alternative Method Explain that an alternative method for inserting a new table is the Draw Table command on the Table toolbar. Demonstrate how to add a row or column to a table using the command buttons on the Table toolbar. Demonstrate how to split or merge selected cells using the command buttons on the Table toolbar. Demonstrate how to delete selected cells, rows, or columns using the command buttons on the Table toolbar.
Formatting Tables:
Explain that a user can adjust width and height settings, set the alignment, set cell padding and spacing, and apply color and borders in tables. Explain how cell spacing, cell padding, the Float property, borders, and background relate to tables. Demonstrate how to select a portion of a table using the commands on the Table menu. Demonstrate how to set the layout properties of a table by accessing the Table Properties in Design View. Demonstrate how to align a table, column, row, or cell using the commands on the Formatting toolbar. Demonstrate how to make rows or columns the same size using the commands on the Table toolbar. Explain that Expression Web users can convert a table to text or text to a table. Demonstrate how to convert a table to text and how to convert text to a table using the commands on the Table menu.
Using Table Properties:
Explain that the Table Properties dialog box offers more detailed table control for the user. Point out that border color sets the border color for a table. Demonstrate how to modify border color using the Table Properties dialog box. Explain that border style sets the border style of the table. Demonstrate how to modify border style using HTML commands while in Code View. Point out that cell padding sets the amount of space between the contents of a cell and the cells border. Demonstrate how to adjust cell padding using the Table Properties dialog box. Point out that cell spacing sets the amount of space between cells in a table. Demonstrate how to adjust cell spacing using the Table Properties dialog box. Demonstrate how to modify table background color using the Table Properties dialog box. Demonstrate how to upload an image for a table background image using the Table Properties dialog box.
Lesson Quiz:
True/False 1. The intersection of a column and row is a junction. 2. Once a table is inserted into a webpage, it cannot be modified. 3. When a single cell is divided into two separate cells, a split occurs. 4. Expression Web enables text to be converted directly into a table. 5. Cell spacing sets the amount of space between the contents of a cell and the cells border.
Multiple Choice 1. In which two areas are the commands found to create a new table? a) Insert menu and Table toolbar b) File menu and Table toolbar c) Table menu and Table toolbar d) Insert menu and Insert toolbar 2. A table is made up of _____. a) Data and information b) Columns and rows c) Cells and spaces d) Cells and rows 3. _____ is creating a single cell from multiple cells. a) Merge b) Join c) Split d) Marry 4. Formatting a table includes all of the following except: a) Changing border color b) Entering text c) Modifying the font d) Modifying cell padding 5. When working with tables in Code View, which language should be used? a) HTTP b) PDF c) WWW d) HTML
Quiz Answers:
True/False 1. False. A cell. 2. False. Tables may be modified at any time. 3. True. 4. True. 5. False. Cell padding. Multiple Choice 1. C (Table menu and Table toolbar) 2. B (Columns and rows) 3. A (Merge) 4. B (Entering text) 5. D (HTML)
Class Projects:
Lesson 6Exercise 1 Tables can be used to organize clearly the presentation of information on a website. As a web design assistant, you must be able to create, format, and modify tables on webpages. Complete the tasks below to learn more about creating tables on webpages. 1. Open the site from the Websites folder named Terms. 2. Open all pages associated with the website. 3. Make the Lesson1.html page the active page. 4. Select all of the terms and definitions on the page. 5. Choose the Convert Text to Table option on the Table menu. 6. Select the Separator for text to be Other and type a dash (-) as the separator symbol. 7. Review the information to verify that it is a two-column table.
8. Select the table. 9. Activate the Table toolbar. 10.Set table borders to 3 pixels and the border color to #000080. Set the background color to any light color. 11.Select the first column in the table. 12.Set the cell alignment to Centered. 13.Save the page. 14.Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. 15.Make the Lesson2.html page the active page. 16.Remove the dash (-) from the term add-ins. 17.Choose the Convert Text to Table option on the Table menu. 18.Select the Separator for text to be Other and type a dash (-) as the separator symbol. 19.Review the information to verify that it is a two-column table. 20.Select the table. 21.Choose an appropriate table auto-format to apply to the table. 22.Save the table. 23.Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. 24.Save all pages, close the pages, and close Expression Web.
Lesson 6Project 1 123 Web Design website needs a little more organization before it is complete. Organizing the information in a table format will help the user to easily identify important items. Complete the tasks below to create hyperlinks on the website.
Open the site named 123WebDesign and all pages in the website. Make the skills.html page the active page. Create a new paragraph above the bulleted list. Create a 3 x 1 table with dark red borders that are 3 pixels wide. Select each bulleted item and drop into a cell in the table. Delete the remaining bullets. Set the font size to Medium for items in the table. Choose an appropriate light background color for the table. Preview the page using Internet Explorer. Close the Internet Explorer window when the review is complete. Change the cell padding and cell spacing to provide more space between items in the table. Review in the browser window to determine the spacing. Preview the using Internet Explorer. Close the Internet Explorer window when the review is complete. Be sure that you have saved the page and close Expression Web. Congratulations, you have completed your work building a basic website for 123 Websites!
The Microsoft Faculty Connection site offers resources to engage students in hands-on experience, self-paced lesson participation, and lesson reinforcement. Students can use these resources either in or out of class. Introduction to Web Design Using Microsoft Expression Studio 4: Module 6, The Design Process In Module 6, students explore web technology careers as they simulate a professional web design planning process for a real-world problem. Team collaboration, communication, and customer interactions are emphasized as students plan a website project for an organization. The project planned in this module is created in Module 7. Introduction to Web Design Using Microsoft Expression Studio 4: Module 7, The Production Process In Module 7, students produce the real-world clientcentered website planned and designed in Module 6. This module is lab intensive, with the educator serving primarily as a guide and supervisor while students further develop their collaborative and technical skills. The planning for this module occurs in Module 6. Introduction to Web Design Using Microsoft Expression Studio 4: Module 8, Web Publishing and Maintenance In Module 8, students experience the processes and techniques for selecting hosting services, evaluating the effectiveness and usability of websites, and providing maintenance over time. Personal reflection on the complete web design process, and the skills and characteristics valuable for web technology careers, is encouraged. The project produced in Module 7 is referenced within this module.

Microsoft Expression Web 4 Lesson Plans

Uploaded by

Document Information

Original Description:

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

Microsoft Expression Web 4 Lesson Plans

Uploaded by

Copyright:

Available Formats

IT ACADEMY LESSON PLAN

Turn potential into success

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4: Lesson Plans

Microsoft Expression Web 4Lesson Plans

Lesson 1: Understanding Microsoft Expression Web 4

Upon completion of this lesson, students will be able to:

Understand web concepts Explore sites Explore views Explore a webpage

Microsoft Expression Web 4Lesson Plans

Understanding Web Concepts:

Instructors should do the following:

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

3. How would you obtain a web address for your website?

4. What type of software program is Microsoft Expression Web 4?

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Faculty Connection:

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Lesson 2: Adjusting the Workspace

The User Interface:

Microsoft Expression Web 4Lesson Plans

User Add-ins: Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Using Menus and Toolbars:

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Faculty Connection:

Lesson 3: Getting Started with Microsoft Expression Web 4

Upon completion of this lesson, students will be able to:

Microsoft Expression Web 4Lesson Plans

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Using Editing Tools:

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Viewing Webpages in a Browser Window:

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Using an Existing Website :

Instructors should do the following:

HOT KEY Open a FileCtrl + O

Modify an Existing Page :

Instructors should do the following:

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Microsoft Expression Web 4Lesson Plans

Lesson 4: Using Images on a Webpage

Upon completion of this lesson, students will be able to: