ptg 102 HOUR 7: Getting Visual, Part 2 FIGURE 7.6 You can resam- ple the image from the Picture Actions drop- down menu found under the inserted image. If you are not satisfied with your alterations, this is the time to start over. If you want to undo any of your changes or just want some practice, click the Restore button to return the image to its original state. If you click the Restore button by mistake, sim- ply go to the Edit menu and select Undo Edit Picture, or press Ctrl+Z on your keyboard. There is one final step left. You might remember from earlier in the hour that the Resample button becomes active only if you change the size of the image. You might also remember from Hour 6 that you should never make the browser resize your images for you. When you resized the eos1.jpg image earlier in this hour, you asked the browser to squish the large image down to make it fit certain dimensions. Now you want to resample the image so that the picture in the image file is of the correct dimensions. You can do this in two ways: Either click the Resample button on the Pic- tures toolbar, or select Resample Picture to Match Size from the Picture Actions drop- down menu found under the small icon attached to the image (see Figure 7.6). This function overwrites the old image file and replaces it with the reoriented, cropped, and resized image as it appears in Design view. To make the changes perma- nent (a.k.a. The Point of No Return), simply save the page. Expression Web 3 opens the Save Embedded Files dialog and asks you whether, where, and how you want to save the changed image file (see Figure 7.7). When you are sure the image looks the way you want it to look, click OK, and the new image replaces the original one. From the Library of Lee Bogdanoff ptg ▼ Using the Pictures Toolbar to Add and Change an Image 103 FIGURE 7.7 The Save Embedded Files dialog appears every time you make changes to other external files while modi- fying the page. you are currently saving. Try It Yourself Creating a Thumbnail Using Auto Thumbnail Because most web pages contain a lot of content and not all visitors are on high- speed connections, using smaller versions of images (commonly referred to as thumbnails) that link to the larger version of the image is common. Using thumbnails helps the page load faster because the browser doesn’t have to download large image files. In addition, thumbnails can help designers create manageable layouts because they can link to large images rather than inserting them in the page. More than just eye candy, you can use images to supplement the text. In this page a detail image of some of the damage on the camera seems fitting and lends more real- ity to the story. A second image called eos1Detail.jpg is in the lesson files. Using the same method as before, import this image and place it in the Images folder. When imported, place your cursor at the beginning of the third paragraph, and insert the new image there using one of the three methods previously described in this hour. You now have a page with two images, one on top and one in the body of the text. But as you can see, even though the new image is a web-friendly size (600 by 600 pix- els), it’s much too big and makes the page difficult to read. What you want is a small thumbnail of the eos1Detail.jpg image that links to the bigger version. In Expression Web 3, you can do this with a single-click of your mouse: With the eos1Detail.jpg image selected, click the Auto Thumbnail button on the Pictures toolbar or use the Ctrl+T shortcut. This creates a 100-pixels-wide thumbnail with a blue outline that, when clicked, opens the original full-size image in the same window. Because the thumbnail inher- its whatever styling you applied to the original image (and you didn’t apply any From the Library of Lee Bogdanoff ptg 104 HOUR 7: Getting Visual, Part 2 ▲ FIGURE 7.8 With the Wrap- ping Style and margins applied, the thumbnail appears as part of the paragraph. styling to the image), it appears at the top of the paragraph as part of the first line of text. You can quickly fix this by using the Picture Properties techniques you learned in Hour 6; on the Appearance tab set the Wrapping Style to Left and Horizontal Margin to 10. When you click OK the thumbnail places itself nicely to the left with the text wrapping around it, as shown in Figure 7.8. To finalize this process, it is necessary to save the page. When you save the page, the Save Embedded Files dialog you saw in Figure 7.7 opens and asks you to save a new file called eos1Detail_small.jpg. This is the smaller thumbnail file that Expression Web 3 created and inserted in your page. By default Expression Web 3 saves the thumbnail in the currently open folder, but you can pick a different folder by clicking the Change Folder button in the dialog. I recommend placing all images in the Images folder and maybe even separating the thumbnails by making a subfolder called Thumbs. Finally, click OK and preview the page in your browser. If you don’t want the thumbnail to have a blue border or you want it to be a different size, you can modify the Auto Thumbnail default settings from the Page Editor Options dialog. To do this, open the Page Editor Options dialog from the Tools button on the menu bar and select the Auto Thumbnail tab. From here you can define the size of the thumbnail by setting the width, height, shortest side, or longest side to a specific pixel length, changing the thickness of the border around the image (0 for no border), and even give the thumbnail a beveled edge. From the Library of Lee Bogdanoff ptg Creating Hotspots 105 Watch Out! By the Way ▼ Note that changes to the Auto Thumbnail settings apply only to new thumbnails and not to ones that already exist. Creating Hotspots A hotspot is a defined area or region within an image that has a hyperlink attached to it. There is no limit to how many hotspots with different hyperlinks you can set in a given image. Hotspots are a great tool if you want to provide further information about a certain element within an image or use an image as a navigational tool. Just so there is no confusion: What Expression Web 3 calls a hotspot is more commonly called an imagemap. Try It Yourself Create a Hotspot and Link It to a File In Expression Web 3, you can create and edit hotspots from the Pictures toolbar using the hotspot buttons: 1. In the myCameras.html file, click the camerasSmall.jpg image to activate the Pictures toolbar. 2. Click the Rectangular Hotspot button, and click and drag the image to draw a rectangle around the top middle camera (see Figure 7.9). This opens the Insert Hyperlink dialog. 3. In the Insert Hyperlink dialog, find and select the eos1.html page under the Pages folder. Set the ScreenTip to Learn about the camera that went to war and set the target frame to New Window. Click OK. Save the page and preview it in your browser. Note that although the cameras Small.jpg image looks unchanged, if you hover your mouse over the top middle cam- era, the mouse pointer changes to a hand indicating a hyperlink and a ScreenTip appears. If you click the hotspot, the browser navigates to the eos1.html page. To edit the hyperlink or ScreenTip attached to the hotspot, simply right-click the hotspot in Design view and select Picture Hotspot Properties. If you want to resize the hotspot, you can do so by clicking it, grabbing the resizing handles on any side of the From the Library of Lee Bogdanoff ptg 106 HOUR 7: Getting Visual, Part 2 hotspot, and moving them. You can also reposition the hotspot by clicking and drag- ging it to a different location within the image. Hotspots can also be circular or even polygonal. To create a circular hotspot, click the Circular Hotspot button, and draw the circle on the image in the same way you cre- ated the rectangle earlier. To create a polygonal hotspot, click the Polygonal Hotspot button, and use the mouse to define each corner of the hotspot until you outline the desired area. To finalize a polygonal hotspot, you have to set the last corner point on top of the first one. Doing so opens the Insert Hyperlink dialog. Because it can be hard to see exactly where all your hotspots are located, the Pictures toolbar features a Highlight Hotspots function. Clicking the Highlight Hotspots but- ton replaces the image with an imagemap in which the hotspots have black outlines and the remaining image is gray. If you select one of the hotspots, it turns solid black (see Figure 7.10). This tool is only a visual aid and does not affect the image in any way. To close the imagemap and see the original image, simply click the Highlight Hotspots button again, or click anywhere outside the image. FIGURE 7.9 Creating a rec- tangular hotspot around the top middle camera. From the Library of Lee Bogdanoff ptg Summary 107 ▲ Summary The ability to make quick alterations to images without having to leave the program is a feature that puts Expression Web 3 above the fold. Not to mention that it can be a real time saver as long as you think things through and make backups of your image files before changing them. In this hour, you learned how to use the powerful tools in the Pictures toolbar to edit the appearance of images in your page. You saw that the Reset button on the toolbar gives you the ability to experiment with different effects without ruining your files, and that scaling down large photos to make them fit in your page is a relatively simple task. You also learned how to use the Auto Thumbnail function to make linked thumbnails of your images with one click. Finally, you learned how to set and edit hotspots within an image to create a more interactive and immersive experience for your visitors. You now have all the tools necessary to create and edit the content of your website. In the next hours, you learn how to style the content to make it more visually pleas- ing and easier to read. FIGURE 7.10 The cameras Small.jpg image with the High- light Hotspots function From the Library of Lee Bogdanoff ptg 108 HOUR 7: Getting Visual, Part 2 Q&A Q. I imported the image as instructed, and I can see the image in the Folder List panel, but when I open the Insert Picture dialogue, I can’t find it anywhere. A. If you can see the image file in the Folder List panel but it doesn’t appear when you browse for it, try right-clicking in the browser window and selecting Refresh. This works 95% of the time. The remaining 5% is usually caused by the image file being corrupt. Q. I placed the image in the page, but all I get in Design view is a box with a red X in it. A. There could be two reasons for this: 1) The image is not a supported image file or is not in a supported color mode. The most common cause for this problem is that the image is stored as CMYK (cyan, magenta, yellow, kelvin) instead of RGB (red, green, blue). CMYK is the color mode for professional printing and does not translate to screen graphics. To correct this, you need to open the image in an image editor and change the color mode; 2) Expression Web 3 didn’t import the image properly. To test if this is the problem, preview the page in your browser. If the image appears in your browser, it means Expres- sion Web 3 messed up while importing the image and you need to reimport it. 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 the questions first. Otherwise you’ll be cheating yourself. Quiz 1. There are three different methods to insert an image into your page. Name them and explain how they are used. 2. Why should you always use the Resample Picture function when resizing an image on a page? 3. How many hotspots can you insert into an image? From the Library of Lee Bogdanoff ptg Workshop 109 Answers 1. To insert an image into a page, you can drag and drop it directly from the Folder View task pane, use the Insert Picture from File function found under Insert on the menu bar, or use the Insert Picture button on the Pictures toolbar. 2. If you insert a large image on a page and resize it using the Picture Properties dialog, you force the browser to resize the image for you. That means that the browser downloads far more image information than it displays. As a rule of thumb, you should always reduce the amount of information downloaded by the browser to an absolute minimum. That means you need to resample all your images so that the actual image dimensions match the displayed image dimensions. 3. In theory, there is no limit to how many hotspots an image can contain. In reality, however, the number of hotspots is limited to the number you can fit within the borders of the image. There is not much sense in inserting so many hotspots that the user can’t find them or discern one from another. Exercise Use the Polygonal Hotspot tool to create hotspots around the different cameras in the photo. Set the hyperlinks to whatever you want; for instance, the camera manufac- turer websites (the cameras are all Canon, Nikon, or Polaroid except for the huge one in the middle, which is a Hasselblad). Give the hotspots descriptive ScreenTips and set the hyperlinks to open a new windows. From the Library of Lee Bogdanoff ptg This page intentionally left blank From the Library of Lee Bogdanoff ptg Introduction 111 HOUR 8 Cracking the Code: Working in Code View What You’ll Learn in This Hour: . How to use IntelliSense to write quick and error-free code . What specialized tools are available to you in Code view and how to use them . How to use Code view as a learning tool . How to dissect code in Split view Introduction Until now you have worked almost exclusively in Design view using the WYSIWYG (What You See Is What You Get) editor without paying much attention to what goes on behind the scenes. This isn’t actually a problem because the code Expression Web 3 creates is clean and tidy enough that you don’t need to worry too much about it. But if you want to get a full understanding of how websites work and move beyond the basics, understanding at least the fundamentals of coding becomes vital. To this end, Expression Web 3 is a great learning tool because it generates standards-based code out of the box. You might consider Code view the exclusive domain of web developers and code experts, but the tools Expression Web 3 provides make it easy even for a novice to work in Code view. Not only is it helpful to understand the code end of your site when something doesn’t work properly, but you might also want to add custom ele- ments into your site that require access to the back end. From the Library of Lee Bogdanoff [...]... Split view In Hour 4, “Building a Home Page: A Look Behind the Curtain,” you learned that if you click an item in the WYSIWYG editor while in Split view, Expression Web 3 highlights the relevant section of code in Code view You already know how basic styles such as headings and paragraphs appear in Code view, so let’s concentrate on the new elements in the page Dissecting Hyperlinks in Code View In Hour... “file:///C:/Users/Morten/Documents/My Web Sites/MyKipple/Images/eos1Detail.jpg” > Note the commented section, which is shown in gray in Code view Expression Web 3 inserted this nonfunctional code to explain the origins of the thumbnail The comment is wrapped inside a special tag that starts with Images in Code View In Hour 3, “A Website Is Really Just Text: Build One in 5 Minutes,” you learned that all web. .. version you are working in If you want to change the IntelliSense settings, open the Page Editor Options under Tools on the menu bar, and select the IntelliSense tab You will be introduced to CSS in Hour 10, “Bringing Style to Substance with Cascading Style Sheets,” PHP in Hour 22, “Beyond the Basics, Part 1: PHP in Expression Web 3, ” and ASP NET in Hour 25, “Beyond the Basics, Part 2: Building a Site with... and write code in Expression Web 3 is IntelliSense In my view, IntelliSense is the most powerful and helpful tool in the application, and I am certain that when you see how it works, you will agree with me In short, IntelliSense is a tool that helps you write proper code faster The best way to understand exactly what it does is to see it in action In this example, you insert an image in Code view with... standard-setting body of the Internet weeded out or deprecated the styling elements that had made their way into HTML The idea behind standards-based code, which is what you make by using Expression Web 3, is to return HTML to its intended use as a markup language and separate it from the styling In other words, tables are to display tabular data and nothing else For example, rather than making a menu consisting... highlighted in yellow Why is that? A While you are inserting new code in Code view, you often temporarily break the code When this happens, Expression Web 3 immediately highlights the incorrect code to tell you something is wrong You’ll note that when you break the code, only small segments of code actually highlight Usually these are beginning or end tags This is because Expression Web 3 tracks the... link (that is, what window it should open in) is a new empty (blank) window If no target is set, the link opens in the current window You can also force the target to be the current window by setting it to _self At the bottom of the page you inserted a hyperlink to open the default email program on the computer: . It Yourself Introducing IntelliSense—Your New Best Friend Joining the Code view toolbar and the Toolbox panel on the list of tools to help you navigate and write code in Expression Web 3 is IntelliSense Follow Hyperlink button lets you navigate to the destination of the selected hyperlink within Expression Web 3. The Previous Code Hyperlink and Next Code Hyperlink buttons work in much the same. default.html file in Split view. In Hour 4, “Building a Home Page: A Look Behind the Curtain,” you learned that if you click an item in the WYSIWYG editor while in Split view, Expression Web 3 highlights