HTML in 10 Steps or Less- P23

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:20

Thêm vào BST

Báo xấu

61
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

HTML in 10 Steps or Less- P23:p Welcome to HTML in 10 Simple Steps or Less. Our mission in writing this book is to provide a quick and accessible way for you to learn Hypertext Markup Language — the lingua franca of the World Wide Web. We hope this book provides a resource that beginning and intermediate HTML coders can use to improve their Web development skills. It is also our hope that it fills multiple roles as both a teaching tool and a reference once you expand your skills.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: HTML in 10 Steps or Less- P23

416 Part 15 Task 194 Creating Lists Lists 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. notes • There’s a difference between unordered and 3. To create a numbered list, click the Ordered List button. Figure 194-1 shows an unordered list created from four lines of text. 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. 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 417 Task 194 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 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.
418 Part 15 Task 195 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. Edit text here Spelling suggestions list 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. 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 419 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 Task 195 has been checked (see Figure 195-2). tips • Your choices for dealing with spelling errors include Figure 195-2: Checking just a portion of your text, or checking all of it if you wish Change and Change All to correct one or more errors, 7. When the spell check is complete and the entire page has been and Ignore or Ignore All if checked, the dialog box closes. 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. 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.
420 Part 15 Task 196 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, note error-prone job done quickly. • To control which replace- ments are made, use the 1. To find text and replace it with other text, open any page you want to Find Next button. For each change. item found, click Replace (to replace it with the 2. Choose Edit ➪ Find and Replace. The Find and Replace dialog box Replace With text) or Find opens (see Figure 196-1). Next to skip that occur- rence and move on to the next one. 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. 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.
Working with Dreamweaver 421 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. Task 196 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. tips • Press Ctrl+F to open the Find and Replace dialog box. Figure 196-2: Results of performing a requested Find and Replace • 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. 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.
422 Part 15 Task 197 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. note 1. In the page into which you wish to import a Word HTML docu- • Once you import and clean up a Word HTML document, ment, choose File ➪ Import ➪ Word HTML. use Dreamweaver to cus- tomize the document’s The Clean Up Word HTML dialog box opens (see Figure 197-1). content and design. 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. 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.
Working with Dreamweaver 423 Task 197 tip • Leave all the basic cleanup tasks checked. If you turn off any of the cleanup steps, you may cause problems for Dreamweaver, Figure 197-2: Choosing the version of Word used to create the imported HTML which requires very clean code. 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 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.
424 Part 15 Task 198 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 notes task requires importing the tabular data — located in a table, one piece of data • Your tabular data must be in a format that 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 Dreamweaver understands. the Import Tabular Data command. The most common format is tab- or comma-delimited text. In an Excel worksheet, 1. Open the page you want to import tabular data into and choose File for example, copy the work- ➪ Import ➪ Tabular Data. sheet to a new file, choose File ➪ Save As, and save This opens the Import Tabular Data dialog box (see Figure 198-1). 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. 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). 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. Figure 198-2: Navigating to the data file you want to import into your Web page Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 425 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 Task 198 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. tips 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 • In case your delimiter isn’t listed in the dialog box, go back to your source text file list box. and use Find and Replace to change the delimiter 8. Click OK to import the tabular data and create a table in the Web character to something page (see Figure 198-3). 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. Figure 198-3: A database of employees becomes a table of names and numbers in Dreamweaver 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.
426 Part 15 Task 199 Inserting and Formatting Images I nserting an image into Dreamweaver is almost too easy. It’s also easy to change the image’s dimensions and alignment, and apply a border to the image. 1. In Design view, click to position your cursor where the image should be placed. note 2. Choose Insert ➪ Image. The Select Image Source dialog box opens. • Although you could enter new width (W) and height 3. Navigate to the image you want to use. A preview of it appears to the (H) numbers for a given right (see Figure 199-1). image placed on a Web page, don’t do this. It makes the browser work too hard and it doesn’t improve image quality. Resize the image in an image editor such as Adobe Photoshop or Macromedia Fireworks and then resave it with the same name so that the image is updated on the Web page. Figure 199-1: Navigating to the folder containing the image you want to use — known as the image source 4. Click OK to insert the selected image on the Web page. If you choose an image that’s not already stored in the current site, a prompt appears asking if you want to copy the file to the site folder. Click Yes. 5. Once the image is in place, click to select it (see Figure 199-2). The Properties inspector displays various image-related options (be sure the inspector is in its expanded state). caution 6. Give your image a name for use within the HTML code by clicking • If you don’t store the image within the site, it may not in the text box under the word “Image” and the image size. Type a appear when you preview short name in the box. 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 427 Type name for the image here Change vertical and horizontal alignment Task 199 Dimensions Observe image dimensions Type alternate text here tips • Click the Insert Image but- ton 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 launches that application with the selected image already loaded in it so you can edit it. • By using a name such as “customerservicerep” (for a picture of a customer ser- vice representative), you can spot references to the image quickly and easily within your code. Figure 199-2: Image options in the Properties inspector • After you resize an image in an external image editor, you may see strange arti- 7. Use the Alignment tools (three buttons and an Align list box) to repo- facts in Dreamweaver — sition the image on the line or within the table cell that contains it. choppy edges or oddly col- ored pixels along the edge 8. Enter a number in the Border field, indicating the pixel width of any of the image in Design view. border that surrounds the image. 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 Part 15 Task 200 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 notes should appear. • For both the Color and Rollover color, you can 2. Choose Insert ➪ Interactive Images ➪ Flash Text. enter a hexadecimal value This opens the Insert Flash Text dialog box (see Figure 200-1). if you know it. • The Target setting instructs Dreamweaver where to dis- play 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 Font 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 the mouse. 7. Type the Flash text in the Text field. 8. Type or browse to the URL or file that this Flash text should link to. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 429 9. Establish your target setting for the linked page/file. 10. Click the OK button to create the Flash text and see it on the Web page (see Figure 200-2). Task 200 tip • The Show Font option is checked so that you can preview in the dialog box how the Flash text will appear once it’s placed onscreen. Figure 200-2: Flash text generated by Dreamweaver appears under the image. cross-reference • You can insert text buttons in FrontPage, applying interesting color and 3D effects to the buttons. Read about it in Part 16. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
430 Part 15 Task 201 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 notes should appear. • Size 12 is the default text size, which is based on the 2. Choose Insert ➪ Interactive Images ➪ Flash Button. The Insert average size of the buttons. Flash Button dialog box appears (see Figure 201-1). You may want to stick with this number until and unless you see that the text is too small to be legible at high screen resolutions. • To preview your button on the page, click the Apply button and move the Insert Flash Button dialog box out of the way so you can see the inserted button on the page. If you want to start over, click Cancel in the dialog box and begin again. Figure 201-1: Creating a Flash button in the Insert Flash Button dialog box 3. Scroll through the Style list and click on individual style names to see them in the Sample box. 4. When you find one that you like, leave it selected. 5. Click in the Button Text box and type the text that should appear on the button face. 6. Choose a font for the text, and also a size by entering a number in the Size text box. 7. In the Link text box, enter or browse to a URL or file that the Flash Button should link to. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 431 8. Click OK to create the button and see it on the Web page (see Figure 201-2). Task 201 tips • If you want the linked file or page to appear in a new window, choose “_blank” from the Target list box. • If there’s too much text to fit on the button, consider a text link instead. Flash buttons (and any graphical button, for that matter) are better used for short phrases and single words. Figure 201-2: Flash button with the text, font, and size you choose cross-reference • You can make any graphic (photo, button, anything) into a link (see Part 5). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
432 Part 15 Task 202 Testing and Formatting a Flash Button O nce you create a Flash button, you can use the Properties inspector to test and change its appearance and placement on the page. You can also name your button so that the related HTML code is easy to spot within Code view. 1. Click on the Flash button to select it. Handles appear around it. notes 2. Observe the Properties inspector (see Figure 202-1) and be sure it’s • This name needn’t be more than a single word, such as expanded to show all of its tools. Once you expand it and leave it that “amazonlink” for a button way, it should remain in the expanded view. that links to Amazon.com. Name it so you can easily spot HTML code that refer- ences it. • The Play button changes to a Stop button, which you can click when you mouse over your button a few times and see 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 W boxes. 5. Adjust the Quality of the button image. High is the default and your best choice. 6. Click the Play button to see how your button reacts when the mouse pointer goes over it (see Figure 202-3). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 433 Task 202 tip • For a browser’s-eye view of the Flash button, use the Preview in Web Browser shortcut (press F12 to open your default browser) and mouse over the button. Figure 202-2: References to a Flash button in code after giving it a short, relevant name in the Properties inspector 7. Adjust the alignment of the button. This changes its horizontal align- ment on the line or within the table cell that contains it. cross-reference • You can preview your pages in a browser window, test- ing all of their features, through any of the text editors covered in this book. For example, HomeSite has a preview command, discussed in Figure 202-3: Changes occur in Flash buttons when the mouse pointer hovers them Part 14. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
434 Part 15 Task 203 Assigning an External Image Editor Y ou probably have a favorite application for creating and editing graphics. Dreamweaver displays an Edit button in the Properties inspector (visible whenever a graphic is selected), which you can set to open the graphics-editing application of your choice. Clicking the Edit button launches the designated application and opens the selected graphic to await your changes. note 1. Choose Edit ➪ Preferences to open the Preferences dialog box (see • If you want to use Adobe Photoshop to edit your Figure 203-1). graphics, browse to the Adobe application folder (likely in C:\Program Files) and double-click the Photoshop.exe file. Figure 203-1: Customizing many areas in Dreamweaver 2. In the Category list, select File Types/Editors. The right side of the dialog box changes (see Figure 203-2). 3. In the Extensions list, click once on the first Web-safe graphics file format you see: GIF, JPG, or PNG. 4. Check the Editors list next to the Extensions list; the application (if any) associated with that file type appears. 5. To change programs, select the unwanted application and click the minus-sign button on the Editors side of the dialog box. The current application name disappears from the list. 6. Click the plus-sign button above the Editors list to open the Select External Editor dialog box (see Figure 203-3). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 435 Task 203 tips • Assuming you have both GIF and JPG images in most of your Web pages, be sure to set up an assigned editor for both types. If you never use PNG images, you can skip that one. • You can assign more than one program for each file type. Select one in the Figure 203-2: Choosing file types and selecting programs that edit them Editors list and click the Make Primary button above 7. Navigate to the application folder of the program you want to use for it. The primary editor will launch by default (it editing graphics, and double-click the executable file. You’re returned becomes the default by to the Preferences dialog box. being first in the list) when you click the Edit button in 8. Repeat Steps 3 through 7 for each of the file types (GIF, JPG, PNG) the Properties inspector. you want to assign to a specific editor. cross-reference • Learn more about image editing in Part 3. Figure 203-3: Choosing the application you want to associate with a selected file type Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.