BONUS LESSON: 15 WORKING WITH CODE In this lesson, you’ll learn how to work with code and do the following: • Select code elements in new ways • Collapse and expand code entries • Write code using code hinting • Use Code Navigator to identify and edit CSS code • Use Live Code to test and troubleshoot dynamic code • Use the Inspect mode to identify HTML elements and associated styling • Access and edit attached files using the Related Files interface This lesson will take about 60 minutes to complete. Download the project files for this lesson from the Lesson & Update Files tab on your Account page at www.peachpit.com and store them on your computer in a conve- nient location, as described in the Getting Started section of this book. Your Accounts page is also where you’ll find any updates to the lessons or to the lesson files. Look on the Lesson & Update Files tab to access the most current content. BL-2 Dreamweaver’s claim to fame is as a visually based HTML editor, but its code-editing features don’t take a back seat to its graphical interface and offer few compromises to professional coders and developers. BL-3 P Note: If you have not already Code tools overview downloaded the project files for this lesson to As the leading WYSIWYG HTML editor, Dreamweaver allows users to create your computer from elaborate webpages and applications without touching or even seeing the code that your Account page, make sure to do so now. does all the work behind the scenes. But for many designers, working with the code See “Getting Started” is not only a desire but a necessity. at the beginning of the book. But Dreamweaver also makes it as easy to work with a page in Code view as in Design view. Although the program is geared toward visual designers, P Note: If you are Dreamweaver offers significant productivity tools for coders and developers, too. starting from scratch In fact, it helps to unify the entire web development team by providing a single in this exercise, see the platform that can handle almost any needed task. “Jumpstart” instructions in the “Getting You’ll find that often a specific task is actually easier to accomplish in Code Started” section at the view than in Design view alone. In this exercise, you’ll learn more about how beginning of the book. Then, follow the steps in Dreamweaver makes working with the code an effortless task. this exercise. 1 In Dreamweaver, open tips.html from the site root folder. 2 Switch to Code view. P Note: The Code view 3 Choose View > Code View Options, and examine the options available. options are selectable only when Code view is active. BL-4 LESSON 15 Bonus Lesson: Working with Code Code view options • Word Wrap—Wraps long lines of code to fit it in the code window, making it easier to read and edit. • Line Numbers—Displays numbers at the left margin of the code window to help quickly identify specific lines of code. • Hidden Characters—Displays icons representing spacing and breaks within the code that are normally invisible. An invaluable option in certain applications where line breaks and whitespace can affect the way the code operates. • Highlight Invalid Code—Visually marks code that is improperly constructed. • Syntax Coloring—Formats specific types of code to display in color to help you quickly identify tags and other markup from content. • Auto Indent—Automatically indents child code elements to make the markup easier to read. • Syntax Error Alerts in Info Bar—Displays a warning at the top of the Code view window identifying any structural errors in the code and pointing to the line on which the error occurs. These seven options help to simplify code editing and improve productivity when working in the code. Note any check marks appearing beside the options, indicating that it’s already selected. For most purposes, you’ll want to have Word Wrap, Line Numbers, Syntax Coloring, and Syntax Error Alerts in Info Bar selected. 4 Select Word Wrap, Line Numbers, Syntax Coloring, and Syntax Error Alerts in Info Bar to enable the options, if necessary. Code view and Design view are closely integrated, and many of Dreamweaver’s features work identically in both. For example, you can use tag selectors in Code view to help quickly and easily select entire code elements. Selecting code Dreamweaver provides several methods for interacting with and selecting code in Code view. Using line numbers You can use your cursor to interact with the code several ways. 1 Scroll down and locate the following code: <li>Wash clothes in cold water</li>. ADOBE DREAMWEAVER CC CLASSROOM IN A BOOK BL-5 2 Drag the cursor across the code. Using the cursor in this way you can select the code in any portion or in its entirety. However, using the cursor in this way can be prone to error, causing you to miss vital portions of the code. At times, using line numbers to select whole lines of code is easier. 3 Click the line number beside <li>Wash clothes in cold water</li>. The entire line is selected within the window. 4 Drag down the edge of the window to select the next four lines of code. Dreamweaver highlights all four lines completely. Using line numbers can save a lot of time and avoid errors during selection, but doesn’t take into account the actual structure of the code elements, which may begin and end in the middle of a line. Tag selectors provide a better way to select logical code structures. Using tag selectors One of the easiest and most efficient ways to select code is to use the tag selectors, as you have frequently done in previous lessons. 1 Scroll down and locate the following code: <li>Wash clothes in cold water</li>. 2 Insert the cursor anywhere in the <li> element. Examine the tag selectors at the bottom of the document window. The tag selectors in Code view display the<li> tag and all its parent elements, the same way they do in Design view. Note how some elements are dimmed, indicating that they are part of the template and therefore locked. 3 Select the <li> tag selector. The entire<li> element, including its content, is highlighted in Code view. It can now be copied, cut, moved, or collapsed. The tag selectors clearly reveal the structure of the code, even without referring to the Code view display. The <li> element is a child of <ul>, which is in turn a child of a <div>, which is a child of <div#Accordion1>, and so on. This element contains the <li> but also the jQuery Accordion with all of its content. Although manually selecting the entire BL-6 LESSON 15 Bonus Lesson: Working with Code <li> element within the Code view window would be easy, selecting the entire list or the <div> that contains it would be more difficult. But the tag selectors make the chore a simple click. 4 Select the <ul> tag selector. The code for the list under the heading At Home is entirely selected. 5 Select the <div> tag selector. The code for the content window of the top Accordion panel is selected. 6 Select the <div#Accordion1> tag selector. The code for the entire Accordion is now selected. Using the tag selectors allows you to identify and select the structure of any element on your page, but it requires you to select the parent tag yourself. Dreamweaver offers another tool that can do it for you automatically. Using parent tags Using the Parent Tag selector in the Code view window makes the job of selecting the hierarchical structure of your page even simpler. 1 Choose View > Toolbar > Coding to display the Coding toolbar, if necessary. 2 Insert the cursor anywhere in the tip text Wash clothes in cold water in the <li> element. 3 In the Coding toolbar, click the Select Parent Tag ( ) icon. The <li> element is highlighted. 4 Click the Select Parent Tag ( ) icon again or press the Ctrl/Cmd-[ (left bracket) shortcut. The entire<ul> element is selected. 5 Click the Select Parent Tag ( ) icon again. The entire<div> element is selected. 6 Press Ctrl/Cmd-[ (left bracket) to select <div#Accordion1>. Each time you click the icon or press the shortcut key Dreamweaver selects the parent element of the current selection. Once you’ve selected it, working with long sections of code can be unwieldy. Code view offers other handy options to collapse long sections to make them easier to work with. ADOBE DREAMWEAVER CC CLASSROOM IN A BOOK BL-7 Collapsing code Collapsing code is a productivity tool that makes a simple process out of copying or moving large sections of code. Code sections are also collapsed when coders and developers are looking for a particular element or section of a page and they want to temporarily hide unneeded code sections from view. Code can be col- lapsed either by selection or by logical element. Use the Collapse Selection ( ) and Expand Selection ( ) icons on the toolbar on the left edge of the Code view window to collapse or expand sections of code. 1 Select the first three items in the unordered list, starting with <li>Wash clothes in cold water</li>. These items are part of a long list of tips within an unordered list, within an Accordion panel. Note the selection markers by the line numbers on the left. The minus/arrow ( ) icons indicate that the selection is currently expanded. 2 In the Coding toolbar, click one of the minus/arrow ( ) icons on the left or the Collapse Selection ( ) icon to collapse the selection.