ptg Working with Web Page Text Introduction Now that you've created a Web page, it's time to throw in some text to get the message across. Text comes in many forms: from headings and paragraphs, bulleted points, and body text written especially for the Web. Your job as a Web designer is to make it all flow together in a logical, attractive, understandable fashion. Many designers who come from the professional printing industry are surprised at the lack of typographic control on a normal Web page. Specific fonts are suggested, not specified, sizes are relative, and line spacing seems to be imaginary. Designers of print-to-paper are used to exacting standards and control. For example, tell a print designer that although he specified the Benguiat font to be used in his brochure design, the readers might wind up with Times New Roman , or Garamond . That designer would be out the door and look- ing for a new print shop. Yet, that's what sometimes happens on the Internet. Some Web designers, to achieve the desired look, respond by converting their text into graphics, but don't. For one reason, text converted into graphics bloats the size of the page and increases download times; another reason is that text converted to graphics is not searchable. Cascading Style Sheets (CSS) are more and more becom- ing a real option and give the Web designer almost as much control as the print designer. In this chapter we're going to talk about text as it relates to standard Web page construction: adding text to a page, modifying text, using text to attract attention, formatting text, checking text… text, text, text. 5 5 What You’ll Do Add Text to Web Pages Import Tabular Data Import Content from Microsoft Documents Insert Special Characters and the Date Select Text Copy and Paste Text Set Copy/Paste Preferences Modify Font Combinations Format Characters and Paragraph Text Control Line Spacing Insert Horizontal Rules Create Ordered and Unordered Lists Create Definition Lists Modify Lists Apply and Create Text Styles Find and Replace Text or Code Check Spelling Use Undo and Redo Set Font Preferences 91 From the Library of Wow! eBook From the Library of Michele Renth ptg 92 Chapter 5 Working with text is not just about placing letters on a page; it's about using text as a page design element and it's also about readability. What's the use of adding text to a Web page if it's too small to read, or the font is not one that renders well on a pixel-based monitor? Remember, there are fonts that look good on paper, and fonts that look good on a computer monitor. Dreamweaver is going to help us out with the formatting part of the equation; it's up to you to make the words sound good. The cool thing about working with text in Dreamweaver is the choices you have; for example, you can choose to type text directly into a page, or copy and paste the text from a word processing docu- ment. Text is added to the Web page in several ways: you can open up a blank Web page and just start typing; however, you have very little control over text formatting. Another way is to create a table, and insert the text into the individual table cells. This gives you the ability to con- trol your margins and paragraph formatting. The newest way is through the use of individual layers. Layers not only give you the ability to con- trol your paragraph formatting; in addition, they give you the ability to move the layers, even stacking one layer on another. Adding Text to Web Pages Add Text to a Web Page Open the Web page you want to add text. In this example we use a Web page with an inserted table. Click with your mouse in the table cell that you want to add text. Begin typing the text that you want to add. Press the Enter (Win) or Return (Mac) key to start a new paragraph. Dreamweaver adds text based on its default formatting parameters, and automatically wraps the text when it comes to the end of the table cell. 4 3 2 1 2 3 From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 93 If you have data in tabular form, such as a database or spreadsheet, you can import the data as delimited text files. Before you can import the data, you need to export or save the data in the database or spreadsheet as a delimited text file, which is a file format with the data separated by tabs, commas, colons, or semicolons. From here, you can import the data file to your page in Dreamweaver and format it as a data table. When you import the data, you can specify the table layout and formatting options you want. Importing Tabular Data Import Tabular Data Open the Web page you want to import content. Click in the location where you want to insert content. Click the File menu, point to Import, and then click Tabular Data. Click Browse, navigate to the location with the file you want to import, select the delimited file, and then click Open. Click the Delimiter list arrow, and then select the delimiter type you used when you exported or saved the file. Click the Fit To Data or Set To option. If you selected the Set to option, enter a specific width or a percentage of the browsers window width you want (in pixels). Enter the cell padding and cell spacing you want (in pixels). Click the Format Top Row list arrow, select the formatting option you want, and then enter the table border width you want (in pixels). Click OK. 9 8 7 6 5 4 3 2 1 7 4 5 6 8 9 From the Library of Wow! eBook ptg 94 Chapter 5 If you're a Windows user you can import Microsoft documents directly onto your Web pages. You can use the Import submenu on the File menu to import content from Microsoft Word or Microsoft Excel docu- ments into your Web pages. If you want to create a link to a Microsoft Word or Excel document, you can simply drag the document file to where you want the link in your page. If the document file is not located inside the local root folder, Dreamweaver prompts you to copy the file to the root to maintain proper site organization. In addition, when you upload your page to your Web server, you need to make sure you also upload the Microsoft Word or Excel document, so the link works properly. Importing Content from Microsoft Documents Import Content from Microsoft Word or Excel Open the Web page you want to import Microsoft content. Click in the location where you want to insert content. Click the File menu, point to Import, and then click Word Document or Excel Document. Navigate to the location with the Microsoft document you want to import. Select the document. Click Open. 6 5 4 3 2 1 4 5 6 See Also See “Cleaning Up Word HTML” on page 464 for information on cleaning HTML in a Word document. From the Library of Wow! eBook ptg Chapter 5 Working with Web Page Text 95 Create a Link to a Microsoft Word or Excel Document Open the Web page where you want to create a link to Microsoft content. Drag the Word or Excel file from its current location to your page and position the link where you want it. ◆ You can use the Files panel to drag a file to the Document window. Click the Window menu, and then click Files. Click the Create A Link option. Click OK. If the document file is not located inside your root folder, click Yes to copy the document to the site root. The Copy File As dialog box opens. Click Save. The name of the linked file appears as the link text, which you can change. 6 5 4 3 2 1 2 Drag here 4 3 From the Library of Wow! eBook . read, or the font is not one that renders well on a pixel-based monitor? Remember, there are fonts that look good on paper, and fonts that look good on a computer monitor. Dreamweaver is going. sometimes happens on the Internet. Some Web designers, to achieve the desired look, respond by converting their text into graphics, but don't. For one reason, text converted into graphics. understandable fashion. Many designers who come from the professional printing industry are surprised at the lack of typographic control on a normal Web page. Specific fonts are suggested,