1. Microsoft Expression Web-Illustrated Unit L: Using Code Tools

2. Objectives Work in Code view Remove a tag Use the Quick Tag Editor Insert HTML comments Microsoft Expression Web - Illustrated

3. Objectives Use the Find and Replace feature Use the Tag Properties task pane Use code hyperlinks to locate CSS code Use the CSS Properties task pane Microsoft Expression Web - Illustrated

4. Working in Code View When working in Code view, it helps to understand  Color coding  Line numbering  Code highlighting  HTML and white space  HTML tag order and nesting Microsoft Expression Web - Illustrated

5. Working in Code View HTML code with and without color coding Microsoft Expression Web - Illustrated

6. Working in Code View Invalid code highlighted in Code view Microsoft Expression Web - Illustrated

7. Removing a Tag The best way is to remove the tag manually in Code view Launch Expression Web, open the site you’ve been working on, then open the home page Select a word in heading, click the Show Code View button Microsoft Expression Web - Illustrated

8. Removing a Tag Microsoft Expression Web - Illustrated Show Code View

9. Removing a Tag Click anywhere in the span tag, point to the span tag in the quick tag selector, click the selector list arrow, then click Remove Tag as shown in the figure on the following slide Click the Show Split View button Save your changes Microsoft Expression Web - Illustrated

10. Removing a Tag Microsoft Expression Web - Illustrated

11. Using the Quick Tag Editor The Quick Tag Editor allows you to quickly edit an existing HTML tag Open the menu page, click the Show Code View button to display the page in code view, then click anywhere in the text Microsoft Expression Web - Illustrated

12. Using the Quick Tag Editor Click Edit on the menu bar, then click Quick Tag Editor Microsoft Expression Web - Illustrated

13. Inserting HTML Comments Any text surrounded by HTML comment tag is displayed in Code view, but not browser or design view Good to comment liberally for other designers can be guided Working in Design view, click the home button on the menu page, click div#left_col on the quick tag selector, then click the Show Code View button Microsoft Expression Web - Illustrated

14. Inserting HTML Comments Microsoft Expression Web - Illustrated

15. Inserting HTML Comments Click just after the code where you would like comments inserted Click Edit on the menu bar, point to Code View, then click Insert Comment Type your comments Microsoft Expression Web - Illustrated

16. Inserting HTML Comments Microsoft Expression Web - Illustrated Example of inserted comment

17. Inserting HTML Comments Click the Show Design View Button Save your changes, then preview the page in a browser Close the browser window, then return to Expression Web Microsoft Expression Web - Illustrated

18. Using the Find and Replace Feature Search for any piece of text or code Make the home page the active page, select a word in the heading, click the Show Code View button, click Edit on the menu bar, then click Copy Click Edit on the menu bar, then click Replace Microsoft Expression Web - Illustrated

19. Using the Find and Replace Feature Click in the Find what text box after the word you decided on, press [Backspace], type e, right-click in the Replace with text box, then click Paste In the Search options section, under Find Where, click the All pages option button In the Search options section, under Advanced, click the Match case check box to add a check mark Click Find All Microsoft Expression Web - Illustrated

20. Using the Find and Replace Feature Microsoft Expression Web - Illustrated Find and Replace Feature

21. Using the Find and Replace Feature Microsoft Expression Web - Illustrated Example of a results list

22. Using the Find and Replace Feature Click the Find and Replace button in the Find 1 task pane, click the All Pages option button, click Replace All, then click Yes when the warning message opens Click the Close button on the Find 1 task pane, then save changes to all pages Microsoft Expression Web - Illustrated

23. Commonly Used Options on the Replace Tab Microsoft Expression Web - Illustrated

24. Using the Tag Properties Task Pane Provides easy access to all attributes of a selected HTML tag Shortcut to these properties Make the home page the active page if necessary, click Show Split View, then click a photo in the design view pane as shown in the figure on the following slide Microsoft Expression Web - Illustrated

25. Using the Tag Properties Task Pane Microsoft Expression Web - Illustrated

26. Using the Tag Properties Task Pane If necessary, click the Tag Properties tab to make it the active task pane Microsoft Expression Web - Illustrated

27. Using the Tag Properties Task Pane In the Tag Properties task pane, click in the text box to the right of the alt attribute Press [Delete], type a new tag, then press [Enter] Click the Show Tag Properties button on the Tag Properties task pane Click OK, to close the Picture Properties dialog box, then save your changes Microsoft Expression Web - Illustrated

28. Using Code Hyperlinks to Locate CSS Code Quickly jump from code in the page to the corresponding style rule Quick and easy to go from viewing HTML code to editing CSS code Press [Ctrl] while clicking a code hyperlink Opens style sheet and highlights corresponding style rule Microsoft Expression Web - Illustrated

29. Using Code Hyperlinks to Locate CSS Code Press and hold [Ctrl], click the code footer, then release [Ctrl] Microsoft Expression Web - Illustrated

30. Using the CSS Properties Task Pane Safer way to change CSS properties quickly while in Code view Convenient way to change all possible options without opening the Modify Style box Similar to Tag Properties task pane Microsoft Expression Web - Illustrated

31. Using the CSS Properties Task Pane Microsoft Expression Web - Illustrated

32. Using the CSS Properties Task Pane Microsoft Expression Web - Illustrated