Lesson 12: Working with Code-editing Features Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Overview © 2013 John Wiley & Sons, Inc. 2

5.6 Use Basic HTML Tags The Quick Tag editor is generally for users more familiar with their code. It offers an easy way to add CSS class or ID names as well as attributes to the code without having to leave the Design view. The Quick Tag editor works in conjunction with the tag selector. © 2013 John Wiley & Sons, Inc. 3

5.6 Use Basic HTML Tags Follow these steps to use the Quick Tag editor: 1.Open the oldcode.html file, and click on the beets image. In the bottom-left of the document window is the tag selector, which now has the tag selected. © 2013 John Wiley & Sons, Inc. 4

5.6 Use Basic HTML Tags 2.Right-click (Windows) or Ctrl+click (Mac OS) the tag in the tag selector. A contextual menu appears with all the tag’s code. Choose Quick Tag Editor from the menu. The Quick Tag Editor appears, displaying the code for this tag (below). © 2013 John Wiley & Sons, Inc. 5

5.6 Use Basic HTML Tags 3.Click once after the align="left" code and press the spacebar. A code-hinting menu is triggered. Double-click the class option; the code will be written for you. Notice that the only option, floatright, is listed; press the Return (or Enter) key to apply this class. Your image now has the class applied and is floating to the right. © 2013 John Wiley & Sons, Inc. 6

5.6 Use Basic HTML Tags 4.Click inside the main paragraph of your document. In the tag selector, click on the tag and then right+click (Windows) or Ctrl-click (Mac OS) and choose the Remove Tag option. © 2013 John Wiley & Sons, Inc. 7

5.6 Use Basic HTML Tags Follow these steps to insert a tag with the Tag Chooser: 1.Switch to Code view by choosing View > Code or by pressing the Code View button on the Document toolbar. 2.Click in line 5 immediately before the tag and press return. Now click back in the empty line 5. 3.Right-click (Windows) or Ctrl+click (Mac OS) and select Insert Tag. © 2013 John Wiley & Sons, Inc. 8

5.6 Use Basic HTML Tags 4.Expand the HTML tags library, and click the Page Composition subcategory; click the General category, and then click the tag. Click the Tag Info button to expand this window. © 2013 John Wiley & Sons, Inc. 9

5.6 Use Basic HTML Tags The Tag Chooser is a great way to view and access all HTML tags. You can learn more about their exact function using the Tag Info description. The Page Composition section includes HTML tags such as html, head, body and title The Formatting and Layout section includes HTML tags such as the h1–h6, p, em, and strong tags. The Lists section includes HTML tags such as ol, ul, dl and li tags. The Tables section includes HTML tags such as table, tr and td. © 2013 John Wiley & Sons, Inc. 10

5.6 Use Basic HTML Tags Follow these steps to collapse or expand tags and code blocks: 1.Make sure you are in the Code view. Scroll to the top of the screen and click between lines 6 and 14, which is the tag that contains all your CSS. 2.Click the Collapse Full Tag button in the coding toolbar. You can also choose Edit > Code Collapse > Collapse Full Tag. The tag is now collapsed (see above). Click on the plus sign (Windows) or arrow (Mac OS) on the left to expand the code again. © 2013 John Wiley & Sons, Inc. 11

5.6 Use Basic HTML Tags 3.In the Coding toolbar click on the Select Parent Tag button. This will select the code that is nesting your existing selection. In this case, the parent is the tag, which is now selected. 4.In the Coding toolbar click on the Collapse Selection button to collapse the tag and all its content. 5.Click within your document and note that you could begin to work in your HTML and the tag will remain collapsed until you access it. © 2013 John Wiley & Sons, Inc. 12

5.6 Use Basic HTML Tags 6.Double-click the head tag to expand it again as shown at right. © 2013 John Wiley & Sons, Inc. 13

5.6 Use Basic HTML Tags You can use Dreamweaver to find tag or syntax errors. This is called validating code. Dreamweaver can validate documents in many languages, including HTML, XHTML, PHP, ColdFusion Markup Language (CFML), Java Server Pages ( JSP), Wireless Markup Language (WML), and XML. You can validate the current document or a selected tag. © 2013 John Wiley & Sons, Inc. 14

5.6 Use Basic HTML Tags You can set Dreamweaver to highlight invalid code (in yellow) in the Code view. When you select a highlighted section, the Property Inspector offers information on how to correct the error. Invalid code is not highlighted by default in Code view. To view the invalid code, you must enable this option in the View menu. © 2013 John Wiley & Sons, Inc. 15

5.6 Use Basic HTML Tags Follow these steps to auto highlight invalid code: 1.Select View > Code View Options and turn on the Highlight Invalid Code option by selecting it from the menu. 2.Two tags become highlighted in yellow the and the tags (below). © 2013 John Wiley & Sons, Inc. 16

5.6 Use Basic HTML Tags 3.Click on the first highlighted (invalid) code for the tag. This has been identified as invalid markup because there is an unclosed or overlapping tag as shown below. © 2013 John Wiley & Sons, Inc. 17

5.6 Use Basic HTML Tags 4.Correct the error by removing the incorrect markup. Select each of the four highlighted tags and then delete them. You can now style them correctly either in the Design view or the Code view; for now, leave them as is. © 2013 John Wiley & Sons, Inc. 18

5.6 Use Basic HTML Tags You can further change the look of your code by formatting it. This is done by specifying formatting preferences, such as indentation, line length, and the case of tag and attribute names. Dreamweaver helps automate certain code formatting tasks that would otherwise be time- consuming and tedious. © 2013 John Wiley & Sons, Inc. 19

5.6 Use Basic HTML Tags Follow these steps to set preferences for automating code formatting: 1.Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS). 2.When the Preferences dialog box appears, select Code Format from the Category list. The Code Format preferences appear on the right as shown above. © 2013 John Wiley & Sons, Inc. 20

5.6 Use Basic HTML Tags 3.In the Advanced Formatting section, click the CSS button; the CSS Source Format Options window appears (right). This window allows you to specify how your CSS code is written. © 2013 John Wiley & Sons, Inc. 21

5.6 Use Basic HTML Tags Dreamweaver offers indentation options for you as you write and edit code in the Code view or the Code Inspector. You can change the indentation level of a selected block or line of code, shifting it to the right or left by one tab. Follow these steps to change the indentation level of code: © 2013 John Wiley & Sons, Inc. 22

5.6 Use Basic HTML Tags 1.In the Code view, click in front of the div element for the header and press the Tab key twice. 2.To outdent the selected block of code, press Shift+Tab, or you can select Edit > Outdent Code. © 2013 John Wiley & Sons, Inc. 23

Lesson Summary © 2013 John Wiley & Sons, Inc. 24

Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.