Expression Web 2 Concepts and Techniques Chapter 3 Working with Templates and Styles

Chapter 3: Working with Templates and Styles 2 Chapter Objectives Create an Expression Web site from a template Rename a page Rename a folder Add and delete pages Add and delete folders Replace content in the template Copy and paste text from an external document Edit the editable regions Make global changes with templates Define styles and style sheets Modify a style Create a style Apply a style

Plan Ahead Consider the purpose of the site Determine the structure of the site Determine, accumulate, and organize the content that you will use Distinguish the site using styles Chapter 3: Working with Templates and Styles 3

Starting Expression Web and Resetting the Workspace Layout Click the Start button on the Windows Vista taskbar to display the Start menu Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list Click Microsoft Expression on the All Programs list to display the Microsoft Expression list Click Microsoft Expression Web 2 to start Expression Web Click Task Panes on the menu bar to open the Task Panes menu, then click Reset Workspace Layout Chapter 3: Working with Templates and Styles 4

Creating a New Web Site from a Template Click File on the menu bar to open the File menu, point to New, then point to Web Site Click Web Site to open the New dialog box Click Templates in the left pane of the Web Site tab to display template options Click Personal 2 from the list of templates to view a thumbnail of it Click the Browse button to open the New Web Site Location dialog box Navigate to the location where you store your data files in the New Web Site Location dialog box Chapter 3: Working with Templates and Styles 5

Creating a New Web Site from a Template Click the Open button to select your location Click after the folder name in the Specify the location of the new Web site text box Type marysite Click the OK button to close the New dialog box and open a new site that contains multiple pages and folders in Design view Double-click the default.html filename in the Folder List to open it Chapter 3: Working with Templates and Styles 6

Creating a New Web Site from a Template Chapter 3: Working with Templates and Styles 7

Renaming a Folder Click the about_me folder name in the Folder List, then click the folder name again to select it Type about_mary, being sure to type the underscore between the two words, as the new name Press ENTER to change the folder name Chapter 3: Working with Templates and Styles 8

Renaming a Folder Chapter 3: Working with Templates and Styles 9

Renaming a Web Page Click the about_mary plus sign in the Folder List to expand the folder and view its contents Click the about_me filename in the Folder List, then click the filename again to select it Type about_mary.htm, including the underscore Press ENTER to open the Rename dialog box In the Rename dialog box, click the Yes button to update references to the page Chapter 3: Working with Templates and Styles 10

Renaming a Web Page Chapter 3: Working with Templates and Styles 11

Deleting a Web Page Click the contact folder plus sign in the Folder List to expand the folder and view its contents Click the contact.htm filename in the Folder List to select it Click Edit on the menu bar to open the Edit menu, then click Delete to open the Confirm Delete dialog box In the Confirm Delete dialog box, click the Yes button to delete the file Chapter 3: Working with Templates and Styles 12

Deleting a Web Page Chapter 3: Working with Templates and Styles 13

Deleting a Folder Right-click the contact folder name in the Folder List to display the shortcut menu, and point to Delete Click Delete to open the Confirm Delete dialog box In the Confirm Delete dialog box, click the Yes button to delete the contact folder Repeat the first two steps to delete the links and photo_gallery folders Chapter 3: Working with Templates and Styles 14

Deleting a Folder Chapter 3: Working with Templates and Styles 15

Adding a Folder Click the marysite folder name, which is the top folder name in the Folder List Click the New Folder button on the Folder List to create a new folder in the Folder List Type portfolio as the new folder name Press ENTER to rename the folder Chapter 3: Working with Templates and Styles 16

Adding a Folder Chapter 3: Working with Templates and Styles 17

Adding a Web Page Click File on the menu bar to open the File menu, point to New, then point to Create from Dynamic Web Template Click Create from Dynamic Web Template to open the Attach Dynamic Web Template dialog box Scroll down, if necessary, then click master.dwt to attach it to the new page Click the Open button to create a new, untitled Web page Click the Close button to close the alert box Right-click the Untitled_1.html page tab Chapter 3: Working with Templates and Styles 18

Adding a Web Page Click Save to open the Save As dialog box Double-click the portfolio folder in the right pane of the dialog box to open it Select any text in the File name text box, then type portfolio.html to name the page Click the Save button to name the new page and save it in the portfolio folder Right-click the portfolio page tab Click Close to close the page Chapter 3: Working with Templates and Styles 19

Adding a Web Page Chapter 3: Working with Templates and Styles 20

Replacing Template Placeholder Text If necessary, click the default.html page tab Click in the words, Heading 2, to select the h2 div Click the h2 tag on the Quick Tag Selector bar to select all of the placeholder text within the heading Type Who am I? to customize the placeholder If necessary, use the horizontal scroll bar to move the page view to the right Click in the words, Heading 4, to select the sidebar heading placeholder for editing Click the h4 tag on the Quick Tag Selector bar to select all of the placeholder text within the heading Type Objective to customize the placeholder Click in the paragraph below the word, Objective Chapter 3: Working with Templates and Styles 21

Replacing Template Placeholder Text Click the tag on the Quick Tag Selector bar to select all of the placeholder text within the paragraph Type To obtain a job as a Web designer in which I can combine my technical background and business knowledge to create Web sites that are attractive, easy-to-use, and meet the needs of my clients. Click the tag below the text you just typed to select the second paragraph in the sidebar, then press DELETE to delete it Press CTRL+S to save the page Chapter 3: Working with Templates and Styles 22

Replacing Template Placeholder Text Chapter 3: Working with Templates and Styles 23

Pasting Text Click the Start button on the Windows Vista taskbar to display the Start menu Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list Click the Microsoft Office folder on the All Programs list to display the Microsoft Office list Click Microsoft Office Word 2007 to start Word and open a blank document Press CTRL+O to open the Open dialog box If necessary, navigate to your Data Files, open the mary_documents folder, and then select the hometext.doc file Chapter 3: Working with Templates and Styles 24

Pasting Text Click the Open button to open the file in Word Press CTRL+A to select all of the text in the document Click the Copy button in the Clipboard group on the Ribbon to copy the selection to the Clipboard Click the Expression Web button on the taskbar to return to Expression Web Click in the div below Who am I?, then click the tag on the Quick Tag Selector bar to select the placeholder text Click Edit on the menu bar to open the Edit menu Click Paste Text to open the Paste Text dialog box Click Normal paragraphs with line breaks Chapter 3: Working with Templates and Styles 25

Pasting Text Click Paste Text to open the Paste Text dialog box Click Normal paragraphs with line breaks Click the hometext.doc Word program button on the taskbar to return to Word Repeat the second through sixth steps to open the resume.doc file and copy its contents to the Clipboard and then return to Expression Web Click the resume folder plus button in the Folder List to view its contents Double-click the resume.htm page in the Folder List to open it Click the content div to select the text Chapter 3: Working with Templates and Styles 26

Pasting Text Press DELETE to remove the placeholder text from the content div Click Edit on the menu bar to open the Edit menu, then click Paste Text to open the Paste Text dialog box If necessary, click Normal paragraphs with line breaks Click the OK button to paste the text Click CTRL+S to save the resume.htm page Chapter 3: Working with Templates and Styles 27

Pasting Text Chapter 3: Working with Templates and Styles 28

Closing Microsoft Word Click the hometext.doc Word program button on the taskbar to return to Word Click the Close button to close the file and the program Click the resume.doc Word program button on the taskbar to return to Word Click the Close button to close the file and the program and return to Expression Web Chapter 3: Working with Templates and Styles 29

Closing Microsoft Word Chapter 3: Working with Templates and Styles 30

Editing Text Use the vertical and horizontal scroll bars, if necessary, to view the sidebar Drag to select the sidebar title, Résumé, then type Contact Me to replace the placeholder text Drag to select the sidebar text Press DELETE to delete the placeholder text Type Mary G. Anderson, then press SHIFT+ENTER to start a new line in the p div Type 9845 West Elm St., then press SHIFT+ENTER Type Duxbury, WA 98472, then press SHIFT+ENTER Type (509) cell, then press SHIFT+ENTER Chapter 3: Working with Templates and Styles 31

Editing Text Type then press the spacebar to create the hyperlink Click after the word, Bookstore, in the div that contains the résumé (about one-third of the way down the document) Press BACKSPACE four times to change the word to Books Double-click the word, Freelance, which is the first word on the fourth line of the content div, to select it Press BACKSPACE to delete the word Press CTRL+S to save the page Chapter 3: Working with Templates and Styles 32

Editing Text Chapter 3: Working with Templates and Styles 33

Finding and Replacing Text Click Edit on the menu bar to open the Edit menu, then point to Find Click Find to open the Find and Replace dialog box If necessary, select any text in the Find what text box and type Caterpillar Click the Find All button to display the search results in the Find pane at the bottom of the editing window Click Edit on the menu bar to open the Edit menu, and then click Replace to open the Find and Replace dialog box If necessary, select any text in the Replace with text box and type Mariposa Chapter 3: Working with Templates and Styles 34

Finding and Replacing Text Click the Replace All button to replace the text Click the Yes button in the alert box to proceed with the replacement Click the Close Window button on the Find task pane to complete the find and replace operation Press CTRL+S to save the résumé page Right-click the résumé page tab to open the shortcut menu Click Close to close the page Chapter 3: Working with Templates and Styles 35

Finding and Replacing Text Chapter 3: Working with Templates and Styles 36

Making Global Changes to a Template Right-click the default.html page tab, then click Close to close the page Double-click the master.dwt page in the Folder List to open it in the editing window Select the text in the Website Name div Type Mary G. Anderson to customize the site name Select the text in the Website description div, then type Web Design to reflect the site’s purpose Scroll right if necessary, click in the Copyright div, select the year, then type 2010 to update the year Chapter 3: Working with Templates and Styles 37

Making Global Changes to a Template In the footer, click after the word, Contact, and then select the word, Contact Press DELETE to remove the link Select the word, Links, and the vertical lines before and after it, then press DELETE to remove the link Select the words, Photo Gallery, then type Portfolio to change the link name In the navigation bar below the Web Design div, click in the word, Contact Click the tag on the Quick Tag Selector bar to select the div Chapter 3: Working with Templates and Styles 38

Making Global Changes to a Template Press DELETE to remove the contact link Select the Links div, then press DELETE to remove the link Select the words, Photo Gallery, then type Portfolio to change the link name Drag to select the word, Portfolio Click Insert on the menu bar to open the Insert menu, then click Hyperlink to open the Edit Hyperlink dialog box Chapter 3: Working with Templates and Styles 39

Making Global Changes to a Template Double-click the portfolio folder to open it Click the portfolio.html file to select it Click the OK button to update the hyperlink Repeat the previous steps to update the portfolio link in the bottom navigation bar Press CTRL+S to save the master.dwt page and open an alert box confirming that the changes will be made to all site pages Chapter 3: Working with Templates and Styles 40

Making Global Changes to a Template Click the Yes button in the alert box to update the four attached files Click the Close button to close the alert box Right-click the master.dwt page tab, then click Close to close the master template Double-click default.html in the Folder List to open the default.html page and see the changes you made on the master.dwt page Right-click the default.html page tab, then click Close Chapter 3: Working with Templates and Styles 41

Making Global Changes to a Template Chapter 3: Working with Templates and Styles 42

Modifying a Style Double-click the master.dwt page in the Folder List to open it In the Apply Styles task pane, point to the #navigation style, then click the arrow to open the menu Click Modify Style on the menu to open the Modify Style dialog box Click the font-weight box arrow, then click bold to apply bold to the navigation bar Click the font-variant box arrow, then click small-caps to change the lettering style Click the OK button to close the Modify Style dialog box Chapter 3: Working with Templates and Styles 43

Modifying a Style Save and close the master.dwt file Press CTRL+S to save the layout.css file Right-click the layout.css page tab to display the menu Click Close on the menu to close the layout.css file Open the default.html page to view the modified navigation bar Close the default.html page Chapter 3: Working with Templates and Styles 44

Modifying a Style Chapter 3: Working with Templates and Styles 45

Creating a Style Right-click the layout.css page tab, then click Close Double-click the resume.htm page in the Folder List to open it Click the New Style link on the Apply Styles task pane to open the New Style dialog box In the Selector text box, type category to name the new style for the general headings in Mary’s Resume Click the Define in list arrow, then click Existing style sheet to add the new style to a pre-existing style sheet Click the URL box arrow, then click styles/style1.css to specify style1.css as the style sheet to which the new.category style will be added Chapter 3: Working with Templates and Styles 46

Creating a Style Click the font-size box arrow, then click large to make the new style large Click the font-weight box arrow, then click bold to make the new style bold Click the font-variant box arrow, then click small-caps to change the new style to small caps Click the OK button in the New Style dialog box to save the new style rules Click the New Style link on the Apply Styles task pane to open the New Style dialog box and create another new style Chapter 3: Working with Templates and Styles 47

Creating a Style In the Selector text box, type dates to name the new style for the dates that appear in Mary’s resume Click the font-size box arrow, then click small Click the font-weight box arrow, then click bold Click the color box arrow to display the color palette Click Silver on the color palette Click the OK button in the New Style dialog box to save the new.dates style Click the New Style link on the Apply Styles task pane to open the New Style dialog box and create another new style In the Selector text box, type jobtitle to name the new style for the job titles in Mary’s resume Chapter 3: Working with Templates and Styles 48

Creating a Style Click the font-style box arrow, then click italic Click the OK button to close the New Style dialog box Scroll in the Apply Styles task pane to see the new styles in the task pane Press CTRL+S to save the style1.css file Right-click the style1.css page tab, then click Close to close the style sheet Chapter 3: Working with Templates and Styles 49

Creating a Style Chapter 3: Working with Templates and Styles 50

Applying a Style Select the word, Experience, at the top of the résumé Click.category in the Apply Styles task pane to apply the.category style Apply the.category style to the words, Education and Technical Background Select the words, MGA Web Designs Branch Center, WA Click.dates in the Apply Styles task pane to apply the dates style Apply the.dates style to the words, Mariposa Books Duxbury, WA Chapter 3: Working with Templates and Styles 51

Applying a Style Apply the.dates style to the words, Branch Center Community College Branch Center, WA Apply the.dates style to the words, R. G. Russell High School Branch Center, WA Select the words, Web Designer Click.jobtitle in the Apply Styles task pane to apply the job title style Select the words, Sales Clerk Click.jobtitle in the Apply Styles task pane to apply the job title style Press CTRL+S to save the resume.htm page Chapter 3: Working with Templates and Styles 52

Applying a Style Chapter 3: Working with Templates and Styles 53

Previewing the Site Click the Preview in Browser button arrow on the Common toolbar, then click Windows Internet Explorer 7.0 (1024 x 768) to open the Resume page in Internet Explorer Click the Home link on the navigation bar to test the link and open the Home page Click the Close button on the browser window title bar to close Internet Explorer Chapter 3: Working with Templates and Styles 54

Previewing the Site Chapter 3: Working with Templates and Styles 55

Closing a Site and Quitting Expression Web Click File on the menu bar to open the File menu, then click Close Site Click File on the menu bar to open the File menu, then click Exit Chapter 3: Working with Templates and Styles 56

Chapter 3: Working with Templates and Styles 57 Chapter Summary Create an Expression Web site from a template Rename a page Rename a folder Add and delete pages Add and delete folders Replace content in the template Copy and paste text from an external document Edit the editable regions Make global changes with templates Define styles and style sheets Modify a style Create a style Apply a style