Transcript Microsoft Expression Web

Microsoft Expression Web-Illustrated
Unit L:
Using Code Tools
Objectives
Work in Code view
Remove a tag
Use the Quick Tag Editor
Insert HTML comments
Microsoft Expression Web - Illustrated
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
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
Working in Code View
HTML code with and without color coding
Microsoft Expression Web - Illustrated
Working in Code View
Invalid code highlighted in Code view
Microsoft Expression Web - Illustrated
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
Removing a Tag
Show Code View
Microsoft Expression Web - Illustrated
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
Removing a Tag
Microsoft Expression Web - Illustrated
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
Using the Quick Tag Editor
Click Edit on the menu bar, then click
Quick Tag Editor
Microsoft Expression Web - Illustrated
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
Inserting HTML Comments
Microsoft Expression Web - Illustrated
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
Inserting HTML Comments
Example of
inserted
comment
Microsoft Expression Web - Illustrated
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
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
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
Using the Find and Replace Feature
Find and Replace Feature
Microsoft Expression Web - Illustrated
Using the Find and Replace Feature
Example of a results list
Microsoft Expression Web - Illustrated
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
Commonly Used Options
on the Replace Tab
Microsoft Expression Web - Illustrated
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
Using the Tag Properties Task Pane
Microsoft Expression Web - Illustrated
Using the Tag Properties Task Pane
If necessary, click the Tag Properties tab
to make it the active task pane
Microsoft Expression Web - Illustrated
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
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
Using Code Hyperlinks to
Locate CSS Code
Press and hold [Ctrl], click the code
footer, then release [Ctrl]
Microsoft Expression Web - Illustrated
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
Using the CSS
Properties Task Pane
Microsoft Expression Web - Illustrated
Using the CSS
Properties Task Pane
Microsoft Expression Web - Illustrated