Microsoft Expression Web-Illustrated Unit C: Adding Text and Links

Objectives Insert a text file into a Web page Paste text into a Web page Type text and insert symbols Check spelling and use the thesaurus Create an internal link Microsoft Expression Web - Illustrated

Objectives Create an external link Create and link to a bookmark Create an link Copy and paste content between pages Microsoft Expression Web - Illustrated

Inserting a Text File into a Web Page Text file  Has a.txt file extension  Consists of basic text such as font faces, colors, and sizes; bold; or italics.  Good for Web page creation Allows formatting to be controlled through Expression Web Microsoft Expression Web - Illustrated

Inserting a Text File into a Web Page Adding Text  Working in Design view allows more control over how the text is added to the page.  Make sure to add content to the correct div by using the visual aids and quick tag selector as guides Microsoft Expression Web - Illustrated

Inserting a Text File into a Web Page Options for Pasting Text Microsoft Expression Web - Illustrated

Pasting Text into a Web Page Pasting text into a Web page allows for more formatting control than inserting it.  The Paste Options button has options for controlling pasted formatting. Microsoft Expression Web - Illustrated

Pasting Text into a Web Page Open a Word document to choose text from Press [Ctrl][A] to select the text Press [Ctrl][C] to copy the text Close Word In Expression Web, right-click in the page_content div and click Paste Choose an option from the Paste Options Button Microsoft Expression Web - Illustrated

Pasting Text into a Web Page Options for Pasting Text Microsoft Expression Web - Illustrated

Typing Text and Inserting Symbols Adding Text to a footer  Insert cursor in the footer div and add text  Add a symbol Click Insert on the menu bar Click Symbol Microsoft Expression Web - Illustrated

Typing Text and Inserting Symbols Include text-only navigation links at the bottom of each page that duplicate image-based navigation  Helpful to disabled viewers  Helpful to users accessing the site via cell phones or handheld devices  Provides convenient alternate method of navigation Microsoft Expression Web - Illustrated

Checking Spelling and Using the Thesaurus Right-click on a word that could be misspelled in the page_content div, as shown below Microsoft Expression Web - Illustrated

Checking Spelling and Using the Thesaurus The word appears spelled correctly on the shortcut menu Click the properly spelled word Microsoft Expression Web - Illustrated

Checking Spelling and Using the Thesaurus Click a word and then click Replace Right-click a synonym you’d like to use and click Add, Save your page Microsoft Expression Web - Illustrated

Creating an Internal Link Select a word in the footer Right-click the selected word, then click Hyperlink in the shortcut menu Microsoft Expression Web - Illustrated

Creating an Internal Link Click the location of the spot you want to link to under Link to, then click OK Microsoft Expression Web - Illustrated

Creating an Internal Link Internal Links  links between pages or files within the same Web site A working link has 2 parts  Source anchor The word, phrase, or image on a Web page that, when clicked, leads to another page or file  Destination Anchor The file or page that opens when a visitor clicks the link Microsoft Expression Web - Illustrated

Creating an Internal Link URL  Defines the location of a file Absolute URLs  Used by external files  Contain a path that describes the protocol, domain name, and file path  Example: Relative URLs  Used by internal files  Contain a path that describes only the location of the file being linked relative to the source file  Example:../contact.htm Microsoft Expression Web - Illustrated

Creating an External Link Select the text to be hyperlinked, right-click the selection, then click Hyperlink The Insert Hyperlink dialog box opens, as shown on the following slide Microsoft Expression Web - Illustrated

Creating an External Link Microsoft Expression Web - Illustrated

Creating an External Link In the Address box, type the URL you are linking to, then click Target Frame Microsoft Expression Web - Illustrated

Creating an External Link Click New Window in the Common targets list if you want the link to open in a new window Click OK, then click OK again To make changes to a hyperlink  Right-click the link in Design view  Select Hyperlink Properties from the shortcut menu Microsoft Expression Web - Illustrated

Creating an External Link Target  the browser window or frame in which the destination file opens  You can target internal or external links but not links Pop-up blocker  Software that prevents new browser windows from opening Microsoft Expression Web - Illustrated

Creating and Linking to a Bookmark Select the link to be bookmarked, click Insert on the menu bar, then click Bookmark Microsoft Expression Web - Illustrated

Creating and Linking to a Bookmark Right-click the text you want to hyperlink Click Hyperlink on the shortcut menu Click the correct location under Link to Select the bookmark and click OK Microsoft Expression Web - Illustrated

Creating and Linking to a Bookmark Microsoft Expression Web - Illustrated Creating a link to the bookmark

Creating and Linking to a Bookmark Bookmark  Also known as a named anchor  A marker at a specific spot on a Web page that can be used as a destination anchor  Often used to create a table of contents  Can also be used to link from one section of a page to another section of that page Microsoft Expression Web - Illustrated

Creating an Link Select an address Right-click the selection Click Hyperlink Microsoft Expression Web - Illustrated

Creating an Link Click the Address button under Link to in the address text box Type a description in the Subject text box, Click OK Save changes to the page Microsoft Expression Web - Illustrated

Creating an Link Microsoft Expression Web - Illustrated Creating the link

Copying and Pasting Content Between Pages Click the default.htm tab, click at the end of the copyright line in the footer div, press [Spacebar], type [│], press [Spacebar] again, right-click after the space, then click Paste The text is pasted as shown in the figure on the following slide Microsoft Expression Web - Illustrated

Copying and Pasting Content Between Pages Select the text to be copied Click Copy on the shortcut menu Position the cursor where you want to paste the copied text Click Paste Microsoft Expression Web - Illustrated

Copying and Pasting Content Between Pages When text is pasted between pages, the formatting and links are maintained. Microsoft Expression Web - Illustrated