2: Setting Up a Web Site with Dreamweaver in Java

Maker QR Code JIS X 0510 in Java 2: Setting Up a Web Site with Dreamweaver

Although you can specify any font you want for text on your Web pages, you don t have complete control over how that font appears on your visitor s computer That s because the font can only display if your visitor has the font on his or her hard drive To help ensure your text appears as you intend, Dreamweaver offers collections of similar fonts, such as Arial, Helvetica, sansserif, or Georgia, Times New Roman, Times, serif Here s how it works When you apply a collection of fonts like these, the browser displays the formatted text in the first font available on that list For example, if you choose the font collection that starts with Georgia and your visitors don t have Georgia, the text displays in Times New Roman; if they don t have that font, it displays in Times; and if they don t even have Times, then the browser looks for another serif font (In case you re not familiar with font terms, serif is used to describe fonts such as Times that have those little curly things on the edges of letters; sans serif means no curly things, which is what you get with a font such as Arial) You can create your own font collections by selecting the Edit Font List option The collection of fonts included in Dreamweaver represents some of the most common fonts and thus the ones most likely to appear on any user s computer The only way to ensure that text appears in the font you want is to create the text as a graphic in a program such as Photoshop or Fireworks and then insert the graphic with the text into your page That s not a bad option for special text, such as banners or logos; but it s usually not a good option for all your text because graphics take longer to download than text and harder to update later

two most common image formats you can use on your Web page are GIF and JPEG (which is often shortened to JPG) You can use any image on your Web site, as long as it s in GIF or JPEG format If you don t have an image handy and want one to practice the following exercise with, you can download a free JPEG from my Web site at wwwDigital Familycom/free (you find instructions for downloading images in 5) Most browsers also support BMP, but most designers never use it because BMP files don t optimize as well PNG is also an accepted image format on the Web, but Web designers rarely use it because Internet Explorer for Windows has not supported PNG fully Unless you have a compelling reason to use one of these formats, you ll do well to stick with JPEG and GIF You need to do two important things before inserting an image on a Web page: Save the page and ensure the image is in the proper folder Saving your page in your Web site s folder on your hard drive is important because Dreamweaver can t properly set the link to your image until it identifies the relative locations of the page and the image

For this same reason, you need to make sure that the image file is in your main Web site folder (the folder you identified in the site setup process at the beginning of this chapter) Many designers create a folder called images so they can keep all their image files in one place If you are working on a very large site, you may want an images folder within each of the main folders of the site An important thing to remember is that if you move the page or image to another folder after you place the image on your page, you risk breaking the link between the page and the image, and an ugly broken image icon appears when you view your page in a browser If you move files or folders in the Dreamweaver Files panel, it keeps the links up to date, but if you move them outside of Dreamweaver, the links break If for some reason you do end up breaking an image link, simply click the broken image icon that appears in its place, and use the Browse button in the Properties inspector to find the image and replace it on your page Okay, assuming you ve saved your page and the image you want to link is saved within your main Web site folder, you re ready to follow these steps to place an image on your Web page: 1 Click the Image icon located on the Common Insert bar at the top of the work area and choose Image from the drop-down list (Hint: The icon looks like a small tree) The Image dialog box opens 2 Click the Select button The Select Image Source dialog box opens, displaying files and folders on your hard drive 3 Navigate to the folder that has the image you want to insert 4 Double-click to select the image you want The image automatically appears on your Web page If you haven t already saved your page, a warning box appears to tell you that Dreamweaver cannot properly set the link to the image until you save the page You see this message because Dreamweaver needs to know the location of the HTML page relative to the image to create the link If you see this box, you have two options You can click Cancel, save your page by choosing File Save, and then repeat the preceding steps Or, you can go ahead and choose the image, and after you save your file, Dreamweaver tries to automatically update the image link If you ve already saved your page, another common problem is that the image is not located within your main Web site folder Dreamweaver offers you the option of creating a copy of the image in your main site folder Click the Yes button if you want Dreamweaver to copy the image to your root folder (this helps ensure the image transfers to your server correctly when you upload your site to your server)