Collecting content for a Dreamweaver site
Table of Contents
Collecting site content
Preparing text for web pages requires bridging the gap between formatting markup language that translates into print formatting (usually PostScript), and formatting markup language that is supported by web pages. There are several ways to move text to a web page, but none of them is completely satisfactory. This is because type formatting in a word processor, like Microsoft Word, has features that are not available in Web formatting, and vice versa. There are three basic options for bringing type to a Web page:
- Copying relatively unformatted text into Dreamweaver, and formatting it in Dreamweaver
- Using export tools in your word processor, and import tools in Dreamweaver to translate the markup language from PostScript to HTML
- Saving the text file as an Adobe PDF or FlashPaper file, opening the file in a browser using plug-in software, and defining links to the file in a Dreamweaver Web page
There are important advantages to using the first two options listed above. If you copy and paste text from your word processor into Dreamweaver, you can avail yourself of all the formatting tools provided by Dreamweaver. These tools are designed to apply formatting that can be interpreted well and consistently by browsers. The downside of this method is that you’ll need to reapply formatting in Dreamweaver.
On the other hand, saving your word processing file as an HTML file (some word processors have a Save As Web Page option) allows you to bring as much formatting as possible with the text as you move it into Dreamweaver. The downside of this method is that the formatting generated by your word processor is unlikely to hold up as consistently in browsers as text formatted in Dreamweaver.
Tip: If you’re not using Microsoft Word, other word processors like TextEdit, WordPerfect, and OpenOffice all save to Word format. Or, you can copy and paste text from any source (including a Web page that is open in a web browser) into a Dreamweaver page in the Design window. If you copy and paste, you will lose most or all of your formatting.
Importing spreadsheets and Word documents in Dreamweaver CS3 for Windows
The Windows version of Dreamweaver allows you to import Microsoft Word (and Excel) files directly to web pages. This saves the step of opening the file in a word processor and saving it as an HTML file. To import a Word or Excel file, open the web page to which you are importing the file, and choose File > Import > Word Document (or Excel Document). The Import Document dialog opens, and you can choose a few options for importing, ranging from Text Only (no formatting) to Text with Structure Plus Full Formatting (which retains the most formatting).
If you save a Word file as an HTML page, or if you use the Windows-only option for importing a Word file into a Dreamweaver Web page, you can clean up the HTML that results by choosing Commands > Clean Up Word HTML. From the Clean Up HTML from pop-up menu, choose a version of Word. Then accept the default check-box settings. Doing this will strip from the generated HTML any coding that would confuse browsers (Figure 1).
Figure 1: Cleaning up imported HTML code.
Many programs (Adobe Photoshop® and Photoshop Elements being the most prominent) allow you to export image files to JPEG, GIF, or PNG format. These programs provide you with advice on when to use which format. Here, I’ll list a few basic attributes of the various formats:
- JPEG images support millions of colors and are best for photographs. Progressive JPEG files “fade in” as they download, rather than appearing line by line.
- GIF images support far fewer colors than the JPEG format, and are not usually used for photos. But GIF images support transparency, which allows the background of a Web page to show through empty spots in the image. GIF images can be defined as interlaced. Interlacing, like the progressive attribute in JPEG images, allows the image to fade in as it downloads.
- PNG images support more colors, like JPEG, and allow you to define a transparent color, like GIF files. However, PNG format is generally not acceptable for photos because it lacks the JPEG format’s capacity to manage colors and photo detail.
Programs like Photoshop allow you to preview how images will look in all three formats, with different settings for quality. Higher quality preserves color and image quality. But higher-quality images (and larger ones) take longer to download than small or lower-quality images.
Differences between print and web images
Preparing images for the web presents a separate set of challenges than preparing images for print. There are several major differences between images and on the Web and images prepared for print documents. These differences include these parameters:
- Web images are usually saved at 72 dpi (dots per inch), while print images are routinely saved at 300 dpi and higher resolution.
- Web images are saved using the RGB (Red, Green, Blue) color system, while print images usually use CMYK (Cyan, Magenta, Yellow, Black) color mode.
- Web images are saved to JPEG, GIF, or PNG format, while print images are often saved in the TIFF format.
Programs like Adobe Illustrator®, Photoshop, and Photoshop Elements have Save for Web features that can assist you in preparing images for the Web.
Lower-quality images are generated using compression. Compression “looks for” pixels in an image that do not need to be saved as part of the file information, and it reduces file size by saving less of the image definition.
Where to go from here
For more information about setting up a Dreamweaver CS3 site, check out the following resources:
- Define a local site in Dreamweaver, by David Karlins
