HTML in 10 Steps or Less- P23 pps

Creating Lists L ists come in three varieties: ordered lists (also called numbered lists), unordered lists (bulleted lists), and definition lists. 1. Select your list — any series of lines of text or paragraphs. 2. To create a bulleted list, click the Unordered List button. 3. To create a numbered list, click the Ordered List button. Figure 194-1 shows an unordered list created from four lines of text. Figure 194-1: An unordered list implies a series of equally-important items with no implied priority between them. 4. Delete items in your list and observe the changes in the list itself. If your list is numbered, the number sequence updates automatically. 5. Add items to your list and observe the changes to the number of bul- leted items or the number sequence of list items. 6. To create a definition list, select the text and choose Text ➪ List ➪ Definition List. As shown in Figure 194-2, the items in the list alternate between being terms and definitions. notes • There’s a difference between unordered and ordered lists. If you give instructions, such as dri- ving directions, use an ordered list so that readers know how to perform the tasks in sequence. If your list has no order or priority implied, use an unordered list. • When you build a definition list, every other line is des- ignated as either a term or definition. Definitions are indented automatically to link them clearly to the terms above them. • If you insert a new line at the end of an unordered or ordered list, you’ll get one more bulleted or numbered line. Press Enter twice to exit list mode. 416 Part 15 Task 194 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Create a quick Q & A list by placing the questions in the terms and the answers in the definitions. Figure 194-2: Building a list of terms and definitions Working with Dreamweaver 417 Task 194 cross-reference • Find out how to create bulleted and numbered lists in FrontPage. See Part 16. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Proofing Page Text D reamweaver’s spell-check feature works very much like that in any word processor. Words not found in the internal dictionary are listed as misspelled, and you have the opportunity to choose an alternate spelling or edit the text directly. 1. To spell-check just one part of your page, select the text and choose Text ➪ Check Spelling. If you want to check the entire page, just choose the command without first selecting any text. 2. In the Check Spelling dialog box (see Figure 195-1), each misspelled word appears, one by one. Figure 195-1: Mistakes found within the selected text or on a page appear in the Word Not Found in Dictionary text box. 3. Select an alternate spelling from the Suggestions list or type a correc- tion in the Change To text box. 4. Click Change or Change All if you want to implement the change. Spelling suggestions list Edit text here caution • Use care when clicking the Add to Personal button. If you aren’t absolutely sure the word is spelled cor- rectly, verify it before adding it to the personal dictionary. Otherwise, your misspelling won’t be flagged the next time you make the same mistake. 418 Part 15 Task 195 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • Your choices for dealing with spelling errors include Change and Change All to correct one or more errors, and Ignore or Ignore All if you know the word is spelled correctly.To add a word to your personal dic- tionary (which is checked at the same time the main dictionary is checked), click Add to Personal. • To stop a spell-check pre- maturely, click the Close button. 5. Ignore a word you know is spelled correctly by clicking Ignore or Ignore All. 6. If you spell-check a selection, you’ll be prompted that the selection has been checked (see Figure 195-2). Figure 195-2: Checking just a portion of your text, or checking all of it if you wish 7. When the spell check is complete and the entire page has been checked, the dialog box closes. Working with Dreamweaver 419 Task 195 cross-reference • TextPad offers a spell checker, and you can find out how it works in Part 12. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Using Find and Replace to Edit Page Content U pdating a Web page or Web site for the new year (changing copyright refer- ences), changing someone’s name, and bringing product or service references up-to-date are all great uses of Find and Replace. It helps you get a tedious, error-prone job done quickly. 1. To find text and replace it with other text, open any page you want to change. 2. Choose Edit ➪ Find and Replace. The Find and Replace dialog box opens (see Figure 196-1). Figure 196-1: The Find and Replace dialog box provides all the controls you need to make global edits to your page or site. 3. In the Find In list box choose the scope of the Find and Replace ses- sion: Current Document, Entire Current Local Site, Selected Files in Site, or Folder. 4. In the Search For list box specify if you want to look for anything other than text. Your choices include Source Code and Specific Tag. 5. Type the text you’re looking for in the text box to the right of the Search For list box. 6. Type what you want the found content to be replaced with in the Replace With text box. note • To control which replace- ments are made, use the Find Next button. For each item found, click Replace (to replace it with the Replace With text) or Find Next to skip that occur- rence and move on to the next one. 420 Part 15 Task 196 caution • Use care when typing your Search For and Replace With text. If spaces, special characters, and capitaliza- tion don’t match perfectly, no replacements will be made. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • Press Ctrl+F to open the Find and Replace dialog box. • If you first select text before choosing Edit ➪ Find and Replace, that selected text will appear in the Search For field. That’s especially handy for specific text phrases that repeat across the site. In Code view, that feature is great for replac- ing long code strings (or HTML tags) with something else. • The options Match Case, Ignore Whitespace Differences (selected by default), and Use Regular Expressions control what searched text meets the Find criteria and therefore what’s replaced with the Replace With text. Your situ- ation and Web page or site content will dictate which options you need. 7. Click the options below to refine your Find and Replace session. 8. Click Replace All to do a global Find and Replace for the scope of your site selected in the Find In list box. 9. Click OK to respond to the confirming dialog box (see Figure 196-2), which indicates which areas of the site were checked and how many replacements occurred. Figure 196-2: Results of performing a requested Find and Replace Working with Dreamweaver 421 Task 196 cross-reference • TextPad offers a handy Find and Replace tool, too. Read more about it in Part 12. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Importing Word HTML M icrosoft Word makes it easy to convert Word documents into HTML. Unfortunately, Word adds extraneous code that bloats HTML files. Dreamweaver makes it easy to work with Word-converted HTML files by taking out the code that Word puts in, making a much cleaner HTML file in the process. 1. In the page into which you wish to import a Word HTML docu- ment, choose File ➪ Import ➪ Word HTML. The Clean Up Word HTML dialog box opens (see Figure 197-1). Figure 197-1: The dialog box that says it all: “Clean Up Word HTML” 2. On the Basic tab, view the list of cleanup tasks that will be performed and uncheck any that you don’t want done. 3. On the Detailed tab (see Figure 197-2), view the specific Word ver- sion information that Dreamweaver will use to clean up the code, and check the CSS cleanup options as well. Uncheck any items you don’t want done. note • Once you import and clean up a Word HTML document, use Dreamweaver to cus- tomize the document’s content and design. 422 Part 15 Task 197 caution • Much, if not all, of the for- matting applied to text in Word will be stripped out when you import the HTML document into Dreamweaver. Be prepared to reapply the formatting that was lost. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tip • Leave all the basic cleanup tasks checked. If you turn off any of the cleanup steps, you may cause problems for Dreamweaver, which requires very clean code. Figure 197-2: Choosing the version of Word used to create the imported HTML document 4. Click OK to perform the cleanup and import the Word HTML file into Dreamweaver. A prompt appears (see Figure 197-3), telling you what was done to the imported document. Figure 197-3: A rundown of the unnecessary code Dreamweaver stripped out of the Word HTML document Working with Dreamweaver 423 Task 197 cross-reference • Find out more about how clean CSS code should look (see Part 9). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Importing Data Tables from Other Applications S uppose you need to take a Microsoft Excel worksheet or a table from a Microsoft Word document — or even a data table from Microsoft Access or another database management system — and import it into a Web page. This task requires importing the tabular data — located in a table, one piece of data per cell — and inserting it so it’s legible and accessible within Dreamweaver. You can easily make that tabular data appear in a Dreamweaver-created table using the Import Tabular Data command. 1. Open the page you want to import tabular data into and choose File ➪ Import ➪ Tabular Data. This opens the Import Tabular Data dialog box (see Figure 198-1). Figure 198-1: Choosing the source of the tabular data and informing Dreamweaver how you want to use and display it 2. Click the Browse button to select your tabular data file. This opens the Open dialog box (see Figure 198-2). Figure 198-2: Navigating to the data file you want to import into your Web page notes • Your tabular data must be in a format that Dreamweaver understands. The most common format is tab- or comma-delimited text. In an Excel worksheet, for example, copy the work- sheet to a new file, choose File ➪ Save As, and save just that one sheet. (You can’t use multisheet text files.) This format satisfies Dreamweaver and keeps the original worksheet intact. • Tab delimiters are good if your data comes from a Word table, Excel work- sheet, or Access table after the files have been saved as text files. 424 Part 15 Task 198 caution • Numeric data is very hard to read. When in doubt, add some cell padding (2 or 3 pixels) so that num- bers in cells won’t run into cell walls. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tips • In case your delimiter isn’t listed in the dialog box, go back to your source text file and use Find and Replace to change the delimiter character to something Dreamweaver accepts. • By telling Dreamweaver to fit the table it creates to the data you’re importing, you prevent data in two or more cells from combining into one, or the appear- ance of extra, empty columns and rows. 3. Select the file you want to import and click OK. This returns you to the Import Tabular Data dialog box. 4. Choose the delimiter that separates the individual pieces of data within your source document. Tab is the default. 5. Leave the Table Width setting in its default condition: Fit to Data. 6. Insert any cell padding or cell spacing you feel enhances the legibility of your data. 7. If your top row is the column headings (field names from the data- base), you may want to choose Bold from the Format Top Row list box. 8. Click OK to import the tabular data and create a table in the Web page (see Figure 198-3). Figure 198-3: A database of employees becomes a table of names and numbers in Dreamweaver Working with Dreamweaver 425 Task 198 cross-reference • You can paste table con- tent from Word into a FrontPage document. Explore more of the ways that FrontPage is similar to Word in Part 16. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... the line or within the table cell that contains it 8 Enter a number in the Border field, indicating the pixel width of any border that surrounds the image Click the Insert Image button on the main toolbar to see the Select Image Source dialog box (It’s the button with a tree against a blue sky.) Once you set a default image editing program (see Task 203), clicking the Edit button in the Properties inspector... relevant name in the Properties inspector 7 Adjust the alignment of the button This changes its horizontal alignment on the line or within the table cell that contains it cross-reference • Figure 202-3: Changes occur in Flash buttons when the mouse pointer hovers them You can preview your pages in a browser window, testing all of their features, through any of the text editors covered in this book For example,... how it changes in response to the mouse actions Figure 202-1: Flash button settings in the Properties inspector 3 Click in the text box under the words “Flash Button” on the left side of the Properties inspector Enter a name for the button That name will appear in the HTML code that refers to the button (see Figure 202-2) 4 Enter new height and width settings for the button, as needed, using the H and... the inspector is in its expanded state) caution • If you don’t store the image within the site, it may not appear when you preview the Web page in a browser It will also complicate the process of uploading the image to the correct folder on the Web server later on 6 Give your image a name for use within the HTML code by clicking in the text box under the word “Image” and the image size Type a short... Part 15 Inserting Flash Buttons F lash buttons are really cool graphic buttons or tabs that contain text (which you provide) in any number of visually compelling styles You can choose the button style, color, and font, and determine where the button links to 1 In Design view click to position your cursor where the Flash button should appear 2 Choose Insert ➪ Interactive Images ➪ Flash Button The Insert... skip that one You can assign more than one program for each file type Select one in the Editors list and click the Make Primary button above it The primary editor will launch by default (it becomes the default by being first in the list) when you click the Edit button in the Properties inspector cross-reference • Learn more about image editing in Part 3 Figure 203-3: Choosing the application you want... Part 15 Inserting Flash Text W hen you click on Flash text in a browser, it changes color, creating a subtle level of interactivity Flash text can function as an interactive link too You can create Flash text quickly and easily in Dreamweaver 1 In Design view, click to position your cursor where the Flash text should appear 2 Choose Insert ➪ Interactive Images ➪ Flash Text This opens the Insert Flash... setting instructs Dreamweaver where to display the linked page or file The best choice for pages outside the current site is “_blank” because it opens a new browser window and keeps your site visible to your visitors Figure 200-1: All the tools you need to build interactive Flash text in the Insert Flash Text dialog box 3 Choose a font and size for your Flash text The first font in your operating system’s... image in Design view Click the Reset Size button in the Properties inspector to snap the image back to its correct size cross-reference • Find out how to insert and position an image through HTML in Part 3 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 428 Task 200 notes • • For both the Color and Rollover color, you can enter a hexadecimal value if you know it Part 15 Inserting... folder determines the default font; size 30 is the default size 4 Apply bold (B), italic (I), or underline (U) styles to your text and set any alignment changes (Left, Center, or Right) to the text Left is the default 5 Click the Color button to choose a color for the text in the resulting palette 6 Click the Rollover Color button to choose the color that the text turns when someone points to it with . watermark. tips • Your choices for dealing with spelling errors include Change and Change All to correct one or more errors, and Ignore or Ignore All if you know the word is spelled correctly.To add a word to your. Word puts in, making a much cleaner HTML file in the process. 1. In the page into which you wish to import a Word HTML docu- ment, choose File ➪ Import ➪ Word HTML. The Clean Up Word HTML dialog. convert Word documents into HTML. Unfortunately, Word adds extraneous code that bloats HTML files. Dreamweaver makes it easy to work with Word-converted HTML files by taking out the code that Word