ptg 72 HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web FIGURE 5.6 Copying the Amazon.com URL for the book can be done by right-clicking and selecting Copy from the context menu. Creating External Links and New Windows Now that you have created some internal links, it’s time to link your website to other external websites. You do this in much the same way that you created your internal links, but instead of selecting a file from your computer, you go to the link’s destina- tion and find its URL to insert. In the second paragraph of the home page (default.html) is a reference to the book Do Androids Dream of Electric Sheep? Some of the readers of this website might want to buy this book. Why not give them a link to the book’s page on Amazon.com? To do this, you first need the address. In your browser, go to www.amazon.com and search for Do Androids Dream of Electric Sheep? Click one of the search results to get to the book’s main page. Highlight the entire address in the address bar and copy it by using Ctrl+C (the universal copy shortcut), or right-click the address and select Copy (see Figure 5.6). Back in Expression Web 3, select the book title in the second paragraph, right-click the selection, and select Hyperlink as you did before. In the Insert Hyperlink dialog, select Existing File or Web Page and paste the Amazon.com URL into the Address field by clicking in the text box and either pressing Ctrl+V (universal paste shortcut) or right-clicking and selecting Paste (see Figure 5.7). Open the ScreenTip dialog and type Do Androids Dream of Electric Sheep? is available from Amazon.com. Click OK twice and save the new file. Test it in your browser. But here is a new problem: After the visitor clicks the link, she goes to Amazon.com. How does she get back to your site? Unlike the myDesk.html file, you can’t insert a home link in the Amazon.com page. How do you keep your visitor on your site and From the Library of Lee Bogdanoff ptg Creating External Links and New Windows 73 FIGURE 5.7 Pasting the Amazon.com URL for the book by right-clicking and selecting Paste from the menu. FIGURE 5.8 The Browsed Pages option gives you access to the recent browser history from Internet Explorer. still let her visit other sites? One solution is to edit your link so that the external page opens in a new window. 1. Right-click the Do Androids Dream of Electric Sheep? link you just created and select Hyperlink Properties. 2. In the Edit Hyperlink dialog, click the Target Frame button on the right. Using the Browsed Pages Option to Obtain Hyperlinks If you don’t want to copy and paste the URL from the browser, there is an alterna- tive built in to Expression Web 3: The application connects to the Internet Explorer browser history that means you can get the URL from right inside the pro- gram itself. To use this option go to the desired target location in Internet Explorer before creating the hyperlink. When inside the Insert Hyperlink dialog, click the Browsed Pages option (see Figure 5.8) in the main window to get the browsing history. From here you can select any of the pages you have visited with Internet Explorer recently, and Expression Web automatically inserts the URL to that page for you. From the Library of Lee Bogdanoff ptg 74 HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web FIGURE 5.9 The Target Frame dialog within Hyperlink Properties lets you define where the linked page opens. 3. In the Target Frame dialog, select New Window under Common Targets. This tells the browser to open a new window (see Figure 5.9). 4. Click OK twice, save the file, and test it in your browser. Now when you click the link to the book, the page opens in a new window or tab in your browser. This is a basic way to make links open in new windows. In Hour 16, “Using Behaviors,” you learn how to use behaviors to make more advanced new win- dows and pop-up windows. Creating Internal Links Within Documents Using Bookmarks Another type of link you can create is a bookmark (also known as an anchor), a hyper- link that points to a specific position in the current page. Designers most often use this type of link to help people navigate longer web pages by providing a menu that leads to different sections. Bookmarks are also effective for linking directly to footnotes. Before you make bookmark links, you have to insert the bookmarks in your docu- ment. In default.html, select the first subheading (Kipple: A Definition). Select Insert, Bookmark from the menu bar, or click Ctrl+G. This opens the Bookmark dialog. From here you can set the bookmark’s name. The name becomes the address of the book- mark and is included in the hyperlink. For that reason, underscores replace all spaces (see Figure 5.10). From the Library of Lee Bogdanoff ptg Creating Internal Links Within Documents Using Bookmarks 75 Did you Know? FIGURE 5.10 The Bookmark dialog lets you define a so- called “slug” for your bookmark anchor. Note the underscores between each word. You can change the bookmark name to whatever you want, but it’s a good idea to keep it consistent and meaningful, especially if your document has many book- marks. When you click OK, you see that the title now has a dotted underline in the Design view of the page. This is a visual reminder that the text has a bookmark attached and is visible only within Expression Web, not in the web browser. Follow the same process and attach bookmarks to the two other subheadings. Now all you have to do is make a menu with links to the bookmarks. This menu should go directly under the main heading. Make a new paragraph under the main heading by clicking the beginning of the first paragraph and pressing Enter. In the new first paragraph, create an unordered (bulleted) list. Each list item should be identical to the subheadings, like this: . Kipple: A Definition . Show me your kipple and I’ll tell you who you are . Every piece of kipple has a story Highlight the first bullet point and right-click to open the Hyperlink dialog. By select- ing Link to Place in This Document from the left-side menu, you open a list of the three bookmarks you created. Select the one that matches your title (see Figure 5.11). As before, attach a ScreenTip such as Jump to Kipple: A Definition to keep your page accessible. Finally, click OK and save your changes. Do the same with the two other menu items. When you are done, save and test in your browser. You see that when you click the links, the browser jumps to the book- marked section. Because the document is relatively short, it might not look like any- thing is happening when you click a link. But if you reduce the width of your From the Library of Lee Bogdanoff ptg 76 HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web FIGURE 5.11 The Bookmark option under the Insert Hyperlink dialog lets you link to a book- mark within the same page. window to about half the size of your screen and then click the links, you should see the page jump. Note that because a bookmark link is no different from any other link, the naviga- tion buttons in your browser work on it as well. This makes more sense if you look in the address bar after clicking on one of the bookmark links: When a bookmark link is clicked, the browser is directed to the page in question and the bookmark within that page, which is signified by a # symbol followed by the bookmark name like this: “My Web Sites/MyKipple/default.html#Kipple:_A_definiton” Creating an Email Hyperlink The final option in the Hyperlink dialog is the E-mail Address link. With this option, you can create a link that opens the visitor’s preferred email program and sets the To address and Subject line. This is the easiest way to provide contact information to your visitors because they don’t have to copy and paste or type out the email address themselves. To create an email hyperlink, you first need some text to work as a link. On the bot- tom of the home page, add a new paragraph and type If you want further infor- mation about my kipple, send me an e-mail. Highlight the send me an e-mail portion of the text and open the Insert Hyperlink dialog. Select E-mail Address from the left-side menu to open the email options. In the E-mail Address line, enter the email address to which you want the message to go. When you start writing, the pro- gram automatically inserts a block of code, mailto:, directly in front of your address. This code tells the browser that this is not a regular link but an email link. In the Subject line, type the default subject line that you want emails generated from the website to have (see Figure 5.12). The Recently Used E-Mail Addresses option displays From the Library of Lee Bogdanoff ptg Q&A 77 FIGURE 5.12 The E-Mail Address option under the Insert Hyperlink dialog lets you insert a receiving email address and a default subject line. the most recent email addresses you linked to within Expression Web 3. Remember to set a ScreenTip for your email link and click OK. When you test the page in your browser and click the new link, your computer opens your default email program and starts an email with the address and subject line you chose. Summary Hyperlinks are what set the World Wide Web apart from other informational sources. By enabling the user to quickly navigate through large amounts of content and instantly move from one source to another, hyperlinks have revolutionized the way we find and use information. In this hour, you learned how to create hyperlinks within your own site, to the outside world, and even within one document. Hyper- links are core components of any website and create navigation and links to the rest of the Web. You also learned how to create links that open in new windows. In Hour 16, you learn how to expand on this technique using Expression Web 3’s built in behaviors. Q&A Q. When I copied and pasted the subheading into my unordered list, the text kept the dotted underline. Is this a problem? A. If you copy and paste content such as text in Design view, all the associated attributes come with it. In this case, you copied not only the text itself but also the bookmark. To get rid of the bookmark, highlight the text, right-click, and select Bookmark Properties. Simply click Clear and Expression Web 3 removes the bookmark. From the Library of Lee Bogdanoff ptg 78 HOUR 5: Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web Q. Why are all my links blue and underlined? I don’t like blue and I don’t like the underline either. Can I change them? A. As with headings, paragraph, block quote, and other default styles, the link or anchor <a> tag has default properties in all browsers. That default is blue and underlined. Likewise, a previously visited link has a purplish color. In Hour 10, “Bringing Style to Substance with Cascading Style Sheets,” you learn how to style your links by changing their color, font style, and size, and by adding underline and other effects. Q. What is the difference between a menu and a link? A. A menu is just a series of links styled to look a certain way. On a website, any item that takes you somewhere else when you click it is just a link created in the same way you created links in this hour. The reason menus look different is that they have heavy styling and usually use graphics instead of just text. Workshop The Workshop has quiz questions and exercises to help you put to use what you just learned. If you get stuck, the answers to the quiz questions are in the next section. But try to answer them first. Otherwise you’ll be cheating yourself. Quiz 1. What kind of content can a hyperlink be applied to? 2. What are the three different types of hyperlinks and when are they used? 3. How does a bookmark differ from a “regular” hyperlink? Answers 1. Hyperlinks can be applied to any and all content in a page although it is advisable to restrict them to smaller items like short text segments or images. 2. The three types of hyperlinks are absolute, relative, and root-relative. Absolute links are used to link to pages that are not inside your current site. Relative links are used to link to pages that are within your site. Root-relative links are used to link to pages that are within your site when there is a chance the pages will be moved around without using Expression Web 3. From the Library of Lee Bogdanoff ptg Workshop 79 3. Bookmarks make the browser navigate to a certain location within the current page, so instead of loading a new page, it jumps down or up in the current page to a different location. Exercise Throughout the default.html page are several items that you can link to sites with further information. For instance, you could link the name Philip K. Dick to the Wikipedia.org page about the author and the name Blade Runner to the imdb.com page about the movie. Use the Web to find further information on these items and make links that point to these sources. Make sure you attach a ScreenTip to each link and that each one opens in a new window. From the Library of Lee Bogdanoff ptg This page intentionally left blank From the Library of Lee Bogdanoff ptg Introduction 81 HOUR 6 Getting Visual, Part 1: Adding Images and Graphics What You’ll Learn in This Hour: . How to import and work with a completed website in Expression Web 3 . What the main image file types are and when to use them . How to import an image into Expression Web 3 . How to insert an image into a page . How to change the placement and appearance of an image in a page Introduction Because the World Wide Web is a visual medium, making your website visually pleasing is important. The easiest way to do this is by adding images and graphics to the text. But images can be so much more than just eye candy. As hinted at in Hour 5, “Getting Connected With (Hyper)Links: The Cornerstone of the World Wide Web,” an image can also be used as a link or even as a navigational tool. If you dissect websites, you find images used as borders, backgrounds, buttons, underlines, and even text. The possibilities are endless. In the past, heavy use of images in websites was frowned upon mostly because peo- ple were on slow dial-up connections, and the images made the pages heavy and slow to load. But now that broadband Internet is becoming more and more prevalent throughout the world and image compression technology has evolved to a point where web-quality images take up little memory, web designers rely heavily on image elements to make their sites look better. The bottom line is this: Used correctly, images can be a great tool to enhance the look and feel of your website. From the Library of Lee Bogdanoff [...]... and the + icon reappears Expression Web 3 is quite finicky when it comes to image files If you add images into your website without importing them through Expression Web 3, they might not work properly in Design view, and you see a small square with a red X instead of the image This doesn’t mean that there is anything wrong with the image; in fact, if you preview the page in a browser, you see that... problem has to do with how Expression Web 3 handles files internally The best (and only) way to avoid this problem is to make a habit to import all image files properly through the Import File dialog Watch Out! Now that Expression Web 3 has imported the image into your project, it’s time to insert it into a page You can do this in Design view by dragging and dropping the image into the text To start,... page In addition to being visual elements, images in a web page can be functional elements if you turn them into links and buttons You can even designate separate areas within an image to interact with the user either by highlighting when the user hovers over them or by linking to other images or pages You do this by creating hotspots in your image From the Library of Lee Bogdanoff 96 HOUR 7: Getting... or that it needs cropping Normally this requires you to open the image file in an image editor such as Photoshop or Expression Design, make the necessary changes, reimport the image into Expression Web 3, and finally replace the image on your page with a new one Well, those days are over Expression Web 3 has a built -in set of tools to help you do simple image editing without leaving the program The Pictures... Bogdanoff Introduction 95 HOUR 7 Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots What You’ll Learn in This Hour: How to import and work with a completed website in Expression Web 3 How to use the Pictures toolbar to insert and edit images How to create thumbnails using the Auto Thumbnail function How to create and edit hotspots Introduction Now that you know how to import and insert... non-GIF image, Expression Web 3 converts the image to the GIF format and reduces its color depth Expression Web 3 warns you about this before performing any changes The Color button changes the image in one of two ways: grayscale or “washed-out,” which in image editing terms means desaturated, increased brightness, and reduced contrast The washed-out look in particular is good if you are making buttons... standard file browser window from which you select the file you want to insert FIGURE 7.2 You can use the Insert Picture from File option on the menu bar to insert an image at the current cursor location In Design view, place the cursor at the beginning of the heading in the eos1.html page Press Enter to make a new line over the heading and change the new line to a Paragraph using the Style menu on... hovering graphics in websites Some older browsers, in particular Internet Explorer 6, do not support PNG transparencies Importing and Inserting an Image Images are the most common nontext elements featured in web pages And because images are so heavily used, there are many different ways to handle them depending on how the designer plans to use them From the Library of Lee Bogdanoff 84 HOUR 6: Getting... Changing the aspect ratio distorts the image by making it either too squished or too stretched out In Hour 7, “Getting Visual, Part 2: Advanced Image Editing, Thumbnails, and Hotspots,” you learn how to use one of Expression Web 3 s built -in functions to create a thumbnail (small version of your image) that links to the larger version, thereby avoiding the need to manually resize your images ▼ Try It Yourself. .. help you do simple image editing without leaving the program The Pictures toolbar conveniently contains these tools (see Figure 7.1) FIGURE 7.1 The Pictures toolbar gives you instant access to all the image editing features in Expression Web 3 As you learned in Hour 1, “Get to Know Microsoft Expression Web 3, ” all you have to do to open the Pictures toolbar is select View, Toolbars on the menu bar and . make links open in new windows. In Hour 16, “Using Behaviors,” you learn how to use behaviors to make more advanced new win- dows and pop-up windows. Creating Internal Links Within Documents Using. with a completed website in Expression Web 3 . What the main image file types are and when to use them . How to import an image into Expression Web 3 . How to insert an image into a page . How. option under the Insert Hyperlink dialog lets you insert a receiving email address and a default subject line. the most recent email addresses you linked to within Expression Web 3. Remember to set