1. Microsoft Expression Web - Illustrated Unit B: Creating a Web Site

2. Objectives Research and plan a Web site Plan the page layout Create a Web site Create a Web page and set CSS options Microsoft Expression Web - Illustrated

3. Objectives Add a title, page description, and keywords Manage Web pages Add a folder to a Web site Change the Web site view Microsoft Expression Web - Illustrated

4. Researching and Planning a Web Site Developing a Web site involves the following steps  Research and plan the site  Design the site Site map: A diagram depicting how a Web site’s pages are related within the site Page layout: The placement of content, graphics, and navigation on each page  Build and test the site  Publish and market the site Microsoft Expression Web - Illustrated

5. Researching and Planning a Web Site Microsoft Expression Web - Illustrated Steps in the Web site development process

6. Researching and Planning a Web Site Microsoft Expression Web - Illustrated

7. Planning the Page Layout Sketch it on paper first Draw on existing conventions Be consistent Keep it simple Focus on navigation Decide on a size  Fixed page design  Liquid page design Microsoft Expression Web - Illustrated

8. Creating a Web site 1 st step is to create a root folder  Root folder is a folder on your hard drive, USB drive, or network drive that stores all the files that make up your site 3 options for creating sites  Simple Web site with one blank page  Empty Web site to add pages to  Entire Web site based on templates that generate all pages of the site Microsoft Expression Web - Illustrated

9. Creating a Web Page and Setting CSS Options Using CSS positioning  Create div elements in HTML document  Use style sheets to position them on them on the page  Divs are rectangular areas that can be positioned on the page to hold content, including text and images Microsoft Expression Web - Illustrated

10. Creating a Web Page and Setting CSS Options Expression Web includes prestructured, browser-tested CSS page layouts Microsoft Expression Web - Illustrated

11. Adding a Title, Page Description, and Keywords The contents of the title element are not displayed on the page itself  Displayed in the title bar of the visitor’s browser  Displayed as the title in a browser’s list of favorites or bookmarks if added The description is a brief explanation of what visitors can find at your site Keywords are terms that describe the content of your site Microsoft Expression Web - Illustrated

12. Adding a Title, Page Description, and Keywords Click File on the menu bar, then click Properties Type your Title in the Title text box, Click in the Page description text box and type in a description for the site Add keywords to the Keywords text box Click the Save button on the Common toolbar Microsoft Expression Web - Illustrated

13. Adding a Title, Page Description, and Keywords Microsoft Expression Web - Illustrated

14. Managing Web Pages Create a copy of an existing page by using the New From Existing Page command Microsoft Expression Web - Illustrated

15. Managing Web Pages Links in Expression Web  A warning is sent if files are deleted that have links to other pages  Files are moved or renamed in order to fix broken links Microsoft Expression Web - Illustrated

16. Managing Web Pages When a new page is created from an existing page, the description and keywords from the original page are retained. Microsoft Expression Web - Illustrated

17. Adding a Folder to a Web Site Right-click the path of the root folder in the Folder List task pane Microsoft Expression Web - Illustrated

18. Adding a Folder to a Web Site Point to New, then click Folder Type assets, then press [Enter] Microsoft Expression Web - Illustrated

19. Changing the Web Site View Click the Remote Web Site View button at the bottom of the editing window Microsoft Expression Web - Illustrated

20. Changing the Web Site View Click the Reports View button Microsoft Expression Web - Illustrated

21. Changing the Web Site View Click the Recently added files link in the Site Summary report Click the list arrow next to the Recently Added Files report name, point to Problems, then click Unlinked Files Click the Hyperlinks View button at the bottom of the editing window Microsoft Expression Web - Illustrated

22. Changing the Web Site View Click the file you need in the Folder List task pane Microsoft Expression Web - Illustrated

23. Changing the Web Site View Click the Folders View button Click File on the menu bar, click Close Site, click File on the menu bar, then click Exit Microsoft Expression Web - Illustrated