Designing and Optimizing Graphics in Java

Make QR Code ISO/IEC18004 in Java Designing and Optimizing Graphics

After creating a wireframe and prior to building the site in Dreamweaver, you may also want to create a mock-up or comp of the site design on paper or in a graphics program such as Adobe Photoshop, Adobe Illustrator, or Macromedia Fireworks A key benefit to designing a mock-up in a graphics program is that after the client approves the mock-up, you can use it to generate many if not all of the graphics A mock-up differs from a wireframe in that the mock-up is a design of the site that contains all the graphical information for the Web site layout including company identity, navigation, headers, text, and other graphics In other words, the mock-up should have all the elements the client has requested for the site For instance, clients may tell you that they want the logo on the top of the page, the navigation below that, an area for links to frequently accessed pages, and a section for a photo gallery In response to these needs, you plan the layout of the page and the site Then you show the mock-up to the client to make sure the design meets their needs

After the design is finalized, the next step is to slice and optimize graphics Slicing and optimizing describe the process of dividing a large flat mock-up into individual pieces, or graphics, that are then compressed into GIF or JPEG graphics The number of graphics overall should be limited to ensure the page loads quickly in a browser If you re considering rollover button functionality and other interactive features on the site, create the graphics for these elements at this stage of the process, in advance of optimization

Before adding graphics to Web pages, you need to compress them, because in their native format (PSD, PDF, TIFF), the file sizes are much too large to download over the Internet For compressing images for the Web, you can choose from three graphics formats: GIF, JPEG, and PNG, as shown in Table 2-4 Web browsers widely support GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group) Each uses a different compression format to crunch data and create smaller file sizes With both formats, the compression goal is to achieve the best image quality possible while reducing the file size Fortunately, because the Web displays images at low resolution (72 ppi or pixels per inch), most of the loss in image quality from the compression is hard to see Only the most current browsers support the third graphic format, PNG (Portable Network Graphics), which creates good quality images at smaller file sizes Therefore, for now, use PNG files on your Web pages only if your target audience will be using the most current browsers to view your site

Table 2-4

Maximum of 256 colors (8-bit); both animation and background transparency Millions of colors (24-bit), but not animation or transparency Millions of colors (48-bit); background transparency, but not animation

Photographs and graphics with lots of color and gradient blends Not as widely supported by browsers, although it has been recommended for replacing GIFs by the W3C

Use an image-compression program such as Adobe ImageReady to optimize the images ImageReady, which comes bundled with Adobe Photoshop, allows you to slice, optimize, and export graphic files and HTML Other compression programs and plug-ins are also available, such as Spinwave (wwwspinwavecom), Boxtop (wwwboxtopsoftcom), Fireworks (www macromediacom/software/fireworks), and Equilibrium s Debabelizer (wwwequilibriumcom) Whichever program you choose, be sure to consult the program s Help files for further instruction on image sizing and optimization

Understanding how Web sites are put together Setting up a managed site the basic way Setting up a managed site with the advanced method Keeping track of multiple sites

Web site is a group of pages that are linked together and share common features such as design, content, and purpose Dreamweaver enables you to organize all the pages and assets of your site in one convenient location To take advantage of Dreamweaver s great site-management features, such as uploading files and managing links among many others, first you need to create or manage your site in Dreamweaver When creating your site, you ll likely adopt a general Web site structure and opt for either a root-level or document-level organization for your files In this chapter, you find out how to create and manage a Web site, gain an understanding of root-level and document-level site organization, review the settings in the Site Definition dialog box, and discover how easy it is to manage multiple sites in Dreamweaver