HTML in 10 Steps or Less- P25

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

Thêm vào BST

Báo xấu

78
lượt xem 7
download

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

HTML in 10 Steps or Less- P25: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- P25

456 Part 15 Task 214 Using the Preload Images Behavior T he Preload Images behavior loads images into the visitor’s browser cache. Once the images are loaded, the browser loads the rest of the page and the entire document appears at once. This provides a more uniform experience for the visitor, so they don’t have to watch the site construct itself in front of their eyes. notes 1. Attach the Preload Images behavior to the body section of your doc- • This step assures you that the JavaScript code the ument by selecting the tag on the tag selector in the lower- behavior wrote works with left corner of the document window (see Figure 214-1). not only current browsers but previous ones as well. Of course, selecting really old browsers limits the effects you can use. • If you don’t click the plus button before attempting to Figure 214-1: Selecting the tag in the document window’s tag selector enter another image, the 2. Open the Behaviors panel by selecting Windows ➪ Behaviors from image you last chose will be replaced by the next the menu bar. image you choose. 3. Click the Behaviors panel’s plus button and choose Show Events For ➪ 4.0 and Later Browsers. 4. Click the Behaviors panel’s plus button a second time and choose Actions ➪ Preload Images. This opens the Preload Images dialog box (see Figure 214-2). Figure 214-2: The Preload Images dialog box Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 457 5. Click Browse to locate an image file to preload or else enter an image’s pathname in the Image Source File field. 6. Click the plus button at the top of the dialog box to add the image Task 214 from the Image Source File field to the Preload Images list. This clears the Image Source File field so you can select another image. 7. Repeat Steps 5 and 6 for each image you want to preload for this document. 8. To remove an image from the Preload Images list, select the image in the list and click the minus button. 9. When you’ve selected all the images you want to preload, click OK to close the dialog box. cross-reference • See Part 10 to learn more about how to write this kind of JavaScript yourself. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
458 Part 15 Task 215 Using the Open Browser Window Behavior T he Open Browser Window behavior opens a pop-up browser window that goes to a URL you specify. You can specify all sorts of properties for this window, such as dimensions, window name, resizability, and appearance of notes menus, tools, and scroll bars, and so on. • If you want a window to open when the document 1. Select the element to which you want to attach a pop-up window. you’re working on opens, select the tag and 2. Open the Behaviors panel by choosing Windows ➪ Behaviors from use an onLoad behavior. If the main menu bar. you want a pop-up window triggered by a link, select 3. Click the Behaviors panel’s plus button and choose Show Events For the link text or image and ➪ 4.0 and Later Browsers. use an onClick behavior. 4. Click the plus button again and choose Open Browser Window from the submenu. This opens the Open Browser Window dialog box • If you specify no attributes for the window, it opens (see Figure 215-1). with the same dimensions and attributes as the window that launched it. Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on. Figure 215-1: The Open Browser Window dialog box 5. Click the Browse button to locate the file you want opened in the new window. 6. Use the Window Width and Window Height fields to set the dimen- sions for the new window. 7. Set any of the following options by marking the corresponding check box: • Navigation Toolbar: The row of standard browser buttons (Back, Forward, Home, etc.) • Location Toolbar: The window’s address field • Status Bar: The window’s status bar, where messages like remaining load times and link URLs appear Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 459 • Menu Bar: The standard menu bar (File, Edit, View, Go, etc). • Scrollbars as Needed: Scroll bars, which appear if content extends beyond the viewable area Task 215 • Resize Handles: Window that users can resize either by drag- ging the lower right corner of the window or by clicking the maximize button (Windows) or size box (Macintosh) in the upper right corner • Window Name: Name of the new window object, which allows you to target it with links or manipulate it with JavaScript 8. Click OK to close the Open Browser Window dialog box. 9. Choose the event handler you want to trigger the behavior. Figure 215-2 shows a pop-up window triggered by a hyperlink. Figure 215-2: A simple pop-up window (right) triggered by clicking on a link (top left) cross-reference • Dreamweaver behaviors can also validate the entries visitors place in form fields (see Task 216). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
460 Part 15 Task 216 Using the Validate Form Behavior T he Validate Form behavior makes sure your visitors have entered the right kind of data into specified text fields. If the visitor enters any bad data (data of the wrong type for a field’s specifications), the JavaScript in this behavior pre- vents the form from being submitted to the server. notes 1. Attach the Validate Form behavior to the tag of your docu- ment by selecting it with the tag selector in the lower left corner of • Selecting Anything without also choosing Required has the document window (see Figure 216-1). no effect. • The Anything option is the default value for a required field. It only makes sure that content is indeed entered into the field by the visitor. Figure 216-1: Selecting the tag in the document window 2. Open the Behaviors panel by choosing Window ➪ Behaviors from the menu bar. 3. Click the Behaviors panel’s plus button and choose Show Events For ➪ 4.0 and Later Browsers. 4. Click the Behaviors panel’s plus button again and choose Validate Form from the submenu. This opens the Validate Form dialog box (see Figure 216-2). Each text field in the form appears in the Named Fields list box. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 461 Task 216 Figure 216-2: The Validate Form dialog box, showing all fields in the form 5. Select a text field from the Named Fields list. 6. Click the Required check box if the field must be filled in by the visitor. 7. Choose one of the following Accept options: • Anything: For a required field accepting basic text content, like names or street addresses • E-mail Address: To check that the field contains the @ symbol • Number: To check that the field contains only numbers • Number From: To check that the field contains a number in a specific range, which you enter in the fields to the right 8. Repeat Steps 5 through 7 for each field you validate. 9. Click OK to close the Validate Form dialog box. cross-reference • Behaviors make use of JavaScript. To learn more about JavaScript, see Part 10. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
462 Part 15 Task 217 Using the Set Text for Status Bar Behavior E very browser has a status bar. It typically runs along the bottom of the browser window and displays what the browser is currently doing. For example, when you run your mouse over a link, the URL the link points to note appears. When you click a link, the status of the download appears too — • If you want a message to appear when the document typically the phrase, “Downloading http://...”. The Set Text of Status Bar behavior writes a message to the status bar in response to some action taken by you’re working on opens, the site visitor. select the tag and use an onLoad behavior. If you want a message to 1. Select the element you want the to trigger the status bar message. appear when the mouse pointer hovers over a link, 2. Open the Behaviors panel by choosing Windows ➪ Behaviors from select the link text or the menu bar. image and use an onMouseOver behavior. 3. Click the Behaviors panel’s plus button and choose Show Events For ➪ 4.0 and Later Browsers (see Figure 217-1). Figure 217-1: The Show Events For submenu 4. Click the plus button again and choose Set Text ➪ Set Text of Status Bar from the submenu. This opens the Set Text for Status Bar dialog box (see Figure 217-2). caution • Browsers cut off messages if they’re too long for the Figure 217-2: The Set Text for Status Bar dialog box status bar. Keep yours short and sweet. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 463 5. Type your message in the Message field. 6. Click OK to close the Set Text for Status Bar dialog box. 7. Choose the event handler you want to trigger the behavior. Task 217 cross-reference • One of the most time- saving tools in Dreamweaver is the Assets panel (see Task 218). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
464 Part 15 Task 218 Working with Assets T he Assets panel provides a list of the weapons in your Web design arsenal — images, colors, sounds, movies, URLs, templates — that you can use in Web pages. Any of these items you add to pages are automatically added to your Assets list. You can also add items from the Assets panel or Favorites folder to your Web page quickly and easily — it’s just a matter of drag and drop. notes 1. Before you can use your Assets, you have to display them. Choose • Press F11 to display the Assets panel. Window ➪ Assets, or click the Assets tab in the Files panel. • Colors are stored when- ever you apply them to 2. For a page that already has some images and other elements inserted, the Assets panel will already have some items in it you can use. To anything — text, table cells, borders — but only apply view them for each of the categories (see Figure 218-1), click the but- directly to text using the tons on the right side of the tab. drag-and-drop method. If you want to use an asset color for anything else, click Add to Favorites the Properties inspector color field for the element Refresh list of Assets you want to color and then take the eyedropper up to Assets panel Shows assets for entire site the Assets panel to grab the color you want to use. Figure 218-1: Assets stored in nine categories (right side) 3. To use an asset, click the category it belongs in and drag it from the Assets panel onto the page (see Figure 218-2). 4. To move an asset to the Favorites folder, simply click on it and click the Add to Favorites button in the lower right corner of the Assets panel. Figure 218-3 shows the current Favorites folder for a particu- lar site. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 465 Task 218 tips • You can also click once on an asset and then click the Insert button in the lower left of the Assets panel. • Favorites can be grouped in folders, creating logical associations among like items — such as images with a common theme, col- ors for particular elements, and so on. To create a Favorites folder, click the New Favorites Folder at the bottom of the Assets panel and type a name in the box Figure 218-2: Reusing an image from the Assets panel by dragging it onto the page that appears in the list of favorites. Once you create a Create a folder Edit Favorites Remove from Favorites folder, you can drag exist- ing favorites into it. • The Add to Favorites button changes to Remove From Favorites when you select an existing favorite. cross-reference • FrontPage has similar tools for accessing graphics that are used repeatedly throughout a Website. Find out about the Picture and Clip Art task panes in Part 16. Figure 218-3: Your most-used images, colors, and other page elements in the Favorites folder for easy access 5. To take an asset out of the Favorites folder, select it and then click the Remove From Favorites button. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
466 Part 15 Task 219 Setting Up a Remote Host W hen it’s finally time to upload your site to a Web server, you need to pre- pare for it first. After you tell Dreamweaver how you will connect to your Web server, you establish login and security settings for the connection. 1. Choose Site ➪ Edit Sites. The Site Definition dialog box (Basic tab) appears (see Figure 219-1). If you already see the Advanced tab, go to Step 2. Figure 219-1: Setting up the site’s definition 2. Click the Advanced tab in the Site Definition dialog box and select the Remote Info category. The Web server information appears on the right (see Figure 219-2). 3. Choose your access method. cautions 4. In the FTP Host box, type the physical location of your FTP server — • If you work in a non-secure location and worry that an IP address or something like ftp.domain.com. coworkers or others could 5. If there’s a particular directory within the FTP server you need to log in and access your Web server, don’t save your connect to, enter it in the Host Directory box. password. If you work at home or in a secure office, it’s probably safe to save your password. • Automatic uploading is risky. Don’t upload anything until you’re absolutely ready to do so. It’s probably best to leave Automatically Upload unchecked. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 467 Task 219 tips • Using FTP is easiest if you’re not physically con- nected to your Web server on a network. The other options in the Access list assume some sort of con- nection other than dial-up or broadband connection to a remote server provided by a Web hosting company. • Your password appears as asterisks (“***”) so that if people stand nearby, they Figure 219-2: Establishing Web server settings can’t see your password. Click the Save check box only if you don’t want to 6. Type your login name — typically a user ID or username — and enter your password every enter your password. time you log on. 7. Check any of the three additional options — Use Passive FTP, Use Firewall, or Use SSH Encrypted Secure Login. • If you’re not sure which option(s) to select, check with your Web host’s tech- 8. If you want your edited files to be automatically uploaded whenever nical support staff. They you save them, click the Automatically Upload Files to Server on can tell you whatever you need to know about logging Save option. in and successfully trans- ferring your files. 9. If you work in a group and want to make sure two people can’t work on the same file at the same time, click the Enable File Check In and Check Out option. 10. Click OK to save your remote server settings. cross-references • Check In and Check Out is covered in Task 221. • Check Part 16 for informa- tion on how FrontPage handles uploading pages to the server. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
468 Part 15 Task 220 Downloading and Uploading Files O nce you set up a remote folder, you’re ready to upload your files to the Web server. You can also move files in the other direction, from the Web server to your local drive — either to back up what’s on the server or to replace local files with what’s stored remotely on the server. Uploading and downloading are referred to, respectively, as put and get. note 1. Before using Get or Put, you must activate the Files panel and click • As the file you’re getting is downloaded, a progress bar the Site tab. To display the Files panel, choose Window ➪ Site. appears. The file(s) may transfer so quickly that you 2. To put your files on the remote server (or into a local or network don’t get a chance to folder), click the right-most drop list (to the right of the Site drop watch the progress or it list) and choose Local View (if it’s not selected already). Then select may go slowly if the files are large, there are a lot of the folder/s or file/s you want to upload (see Figure 220-1) them, or the connection speed is relatively slow. caution Figure 220-1: Selected files in a folder for uploading • Never click the “Don’t show me this message again” check box in the Dependent 3. Click the Put button (with the blue upward arrow), and then choose Files dialog box because Remote View from the right-hand drop-down list. you’re likely to forget that a page you’re about to upload 4. Click the Refresh button to see your remote server or local/network has dependent files, and file and the uploaded files there (see Figure 220-2). only this prompt will remind you. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 469 Task 220 tips • Another way to display the Site tab of the Files panel is to press F8. • You may see a prompt after clicking the Put button, ask- ing if you want to “include dependent files.” If you’re uploading a page that includes images or anything other than HTML code, click Yes to send the image and other files as well. On the other hand, if you’re part of a Web design team and don’t know if you’re about Figure 220-2: Viewing files on the remote server to upload the latest versions of files others may be edit- 5. To get, or download, files from a remote server or another local/ ing, click No. network folder, select the content you want to download. • Always disconnect if you leave your desk, do other 6. Click the Get button (with the green downward arrow). work where you might bump the keyboard or mouse, or 7. When your Get/Put session is complete, click the Disconnect from are away from your com- Remote Host button. puter for a while. Disconnecting prevents accidental puts or gets, and keeps others from using your computer to upload or download files you may not want them to access. cross-reference • Appendix F covers the process of uploading files to your host’s Web server. Check it out online at www.wiley.com/compbooks/ 10simplestepsorless. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
470 Part 15 Task 221 Using Check In/Check Out W hen two or more people edit pages in a particular site, it makes sense to use Dreamweaver’s Check In and Check Out feature. Much like taking books out of a library, the Check In and Check Out system ensures that if one person checks out a file, no one else can work on it at the same time (they can view it, however). Check In and Check Out makes the process of multiple designers note uploading files to the Web server more orderly. • As soon as you turn on Check In and Check Out, 1. To use Check In and Check Out, first turn Check In and Check Out fields appear in the dialog on. Select Site ➪ Edit Sites. box allowing you to enter your identifying information. 2. The Edit Sites dialog box opens (see Figure 221-1). Select the site you want to edit. Figure 221-1: Choosing the site to control with Check In and Check Out 3. Double-click the site you want to edit, or select it and click the Edit button. 4. In the Site Definition dialog box, click the Advanced tab if it isn’t already selected. 5. Click the Remote Info category (see Figure 221-2). 6. Next to Check In/Out, click both the Enable File Check In and Check Out option and the Check Out Files When Opening option. caution 7. Type your name in the Check Out Name text box and also enter an • If you don’t check out the dependent files as well, you e-mail address in the Email Address text box. Click OK to close the can end up with an HTML dialog box. document but no access to the images and other elements included in the page. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with Dreamweaver 471 Task 221 tip • Be considerate of the other members of your team and make efficient use of Check In and Check Out. Don’t forget to check files back in after you’ve edited or uploaded them — otherwise, coworkers will be unable to access a file overnight, over a weekend, or even for a crucial hour during the day. Figure 221-2: Accessing advanced settings in the Site Definition dialog box 8. To use Check In and Check Out, go to the Site tab of the Files panel and select the file(s) you wish to edit or upload (put) to the Web server. 9. Click the Check Out Files button (the green downward arrow with the check mark). Depending on your situation make your selection in the Dependent Files dialog box. 10. When you finish editing the file, select it in the site list and click the Check In button (the blue upward arrow with the padlock next to it). Again, depending on your situation, make your selection in the Dependent Files dialog box. cross-reference • Dreamweaver is the only application we’re covering in this book that offers any controls for file sharing. If you’re working alone and don’t have file sharing concerns, check out our HomeSite coverage in Part 14 for more informa- tion on opening existing HTML files for editing. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Part 16: Working with FrontPage Task 222: Setting Up a Web Site Task 223: Creating and Rearranging Blank Web Pages Task 224: Naming and Saving Pages Task 225: Viewing and Changing Page Properties Task 226: Applying Themes Task 227: Creating a New Theme Task 228: Creating and Using Templates Task 229: Inserting and Formatting Text Task 230: Proofing and Improving Web Page Text Task 231: Inserting Clip Art and Pictures Task 232: Adding Alternative Text to Images Task 233: Drawing and Formatting Shapes and Lines Task 234: Adding Flash Content to Web Pages Task 235: Creating WordArt Images Task 236: Adding Navigation Bars Task 237: Inserting and Aligning Page Banners Task 238: Creating Interactive Buttons Task 239: Changing Page Backgrounds and Colors Task 240: Creating Bulleted and Numbered Lists Task 241: Applying Borders to Text Task 242: Applying Shading to Text or Blank Lines Task 243: Inserting Tables Task 244: Adding and Deleting Table Rows, Columns, and Cells Task 245: Splitting and Merging Table Cells Task 246: Resizing and Reformatting Table Cells Task 247: Populating a Table with Graphics and Text Task 248: Creating Frames Task 249: Adding Layers Task 250: Building Page Bookmarks Task 251: Setting Up Keywords and Page Description Text Task 252: Publishing a FrontPage Web Site Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
474 Part 16 Task 222 Setting Up a Web Site M icrosoft FrontPage is a Web design tool that uses a WYSIWYG interface to allow you to design your pages and sites graphically. You can also get a good look at the code, too, and preview your work in a browser window to check your progress as you design. FrontPage is famous for its themes, the preset styles that control the buttons, background, and overall look of sites designed with the prod- note uct. This speeds and simplifies the design process, but also creates sites that are immediately identified as “FrontPage sites,” which isn’t usually a good thing. You • The first page you insert is automatically designated can also design from scratch, avoiding the potential pitfalls of a site with graphics the home page. To add that thousands of other FrontPage designers will have also used. When beginning subpages after that, click the design process in FrontPage, it’s best to set up a site, and to do so following a the Home Page icon and then click the New set of prescribed steps. It’s also important to realize that a Web site is more than a Page button. collection of pages. It’s a cohesive, logical structure that incorporates pages, graphics, and links into a functioning system. The need to build a functioning Web site locally is key to uploading the site to a remote server and having all the pages and their components appear and function properly. 1. With FrontPage launched, choose File ➪ New. This opens the New task pane (see Figure 222-1). Figure 222-1: The New task pane gives you options for starting a new page or site. 2. Click the More Web Site Templates link in the middle of the task pane to access the Web Site Templates dialog box. 3. Double-click the Empty Web Site icon to create a new site (see Figure 222-2). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Working with FrontPage 475 Task 222 tip • Empty Web Site is a good choice if your site will not include a prescribed group of pages, such as the stan- dard “About Us” or “Contact Us” pages (although you can still add such pages to your site). It gives you total freedom to build the pages you need in the order you want to create and Figure 222-2: View a list of existing sites (if any) and your new site’s starting folder connect them. structure, which includes an images folder. 4. Click the Navigation button at the bottom of the window to access tools for a hierarchical view of the pages in your site. Figure 222-3 shows the resulting view and tools. New page button cross-reference • Part 15’s coverage of Dreamweaver contains instructions for building a Web site utilizing yet another graphical web design environment. Figure 222-3: Click the New Page button to add your first (and subsequent) page. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.