Adobe Dreamweaver CC Classroom in a Book BL-5 2 Drag the Cursor Across the Code

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:

Wash clothes in cold water

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

Wash clothes in cold water

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:

Wash clothes in cold water

. 2 Insert the cursor anywhere in the

element. Examine the tag selectors at the bottom of the document window.

The tag selectors in Code view display the

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

tag selector. The entire

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

element is a child of

, which is a child of , and so on. This element contains the

but also the jQuery Accordion with all of its content. Although manually selecting the entire

BL-6 Lesson 15 Bonus Lesson: Working with Code

element within the Code view window would be easy, selecting the entire list or the

that contains it would be more difficult. But the tag selectors make the chore a simple click. 4 Select the

tag selector. The code for the content window of the top Accordion panel is selected. 6 Select the 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

element. 3 In the Coding toolbar, click the Select Parent Tag ( ) icon.

The

element is highlighted. 4 Click the Select Parent Tag ( ) icon again or press the Ctrl/Cmd-[ (left bracket) shortcut. The entire

element is selected. 6 Press Ctrl/Cmd-[ (left bracket) to select . 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 collapsed 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

Wash clothes in cold water

. 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.

The selection collapses, showing only the

code element and a snippet of text from the collapsed code. You can also collapse code based on logical elements, like

. 3 Insert the cursor in the

BL-8 Lesson 15 Bonus Lesson: Working with Code Expanding code

When the code is collapsed, you can copy, cut, or move it like you would any other selected element. You can expand elements one at a time, or all at once. 1 If necessary, insert the cursor in the collapsed

Windows Macintosh

The

elements collapsed earlier are still collapsed. Dreamweaver provides a method to expand all elements at once. 3 In the Coding toolbar, click the Expand All ( ) icon. All collapsed elements are now expanded. Code can be added, edited, or deleted in Code view.
Adding new code
Code view isn’t just for tweaking or troubleshooting the code, it’s a fully function- ing code writing environment with numerous productivity enhancements for coders. Code view can not only color-code the tags and markup to make it easier to read, but it also offers code hinting for 10 different web development languages, including but not limited to HTML, CSS, JavaScript, and PHP. Coding hinting for HTML markup is extensive and includes support for CSS, too. In this exercise, you will create a hyperlink to jump to the top of the page as in Lesson 10. 1 Open news.html. Switch to Code view, if necessary. 2 Scroll down and insert the cursor before the following code:
Shopping green saves energy
.
Adobe Dreamweaver CC Classroom in a Book BL-9 3 Type <
The code hinting window appears showing you a list of HTML-compatible codes you can select from. 4 Type p and press the spacebar to insert a space. The code-hinting window opens again; this time it displays compatible HTML attributes for the
element. 5 Double-click the class attribute.
Code hinting now shows a list of available CSS classes. 6 Double-click the CSS ctr class.
Dreamweaver inserts the ctr class within the quotation ("…") marks and moves the insertion point outside the closing quotation mark. 7 Type > The opening
tag is complete. Now you can build the hyperlink. 8 Type
BL-10 Lesson 15 Bonus Lesson: Working with Code 10 Type #top When you enter code manually, you have to move the cursor manually outside the element before you can continue. 11 Press the Right Arrow key to move the cursor outside the closing quote (") mark. 12 Type >Return to top
This closes the opening tag and creates the link text. 13 Type tag. You can now close the
element, too. 14 Type
The
closing tag is created automatically by Dreamweaver, and the element and link are complete. 15 Copy the entire
element, including the hyperlink, and paste copies after each of the news items. 16 Save all files. As you can see, Dreamweaver simplifies the task of writing code by providing a variety of productivity enhancements, including code hinting and automatic code completion. These features work in a similar fashion for all the supported lan- guages. Another task that you can do as easily in Code view as you do in Design view is troubleshooting your CSS styling.
Identifying CSS styling
Code Navigator and CSS Designer work equally as well in Code view as they do in Design view. You can work in confidence knowing that these tools have your back.
Using Code Navigator
Code Navigator is an essential tool for troubleshooting CSS problems and identi- fying pertinent CSS rules for specific markup. It functions identically in Design, Code, or Live view.
Adobe Dreamweaver CC Classroom in a Book BL-11 1 Click the document tab for tips.html to bring it to the front, or open it from the site root folder. Select Split view. The document window splits, showing both Code and Design view side by side. The document features a jQuery Accordion containing three sections of green tips. 2 In the Design view window, right-click the text Green Tips. Choose Code Navigator from the context menu. The Code Navigator window appears. 3 Note the names and order of the CSS rules displayed in Code Navigator. 4 Repeat step 2 in the Code view window with the
Green Tips
code.
The names and order of the rules in Design and Code view are identical. You can even use it in Live view. 5 Click the Live view button. Test the functionality of the Accordion panels on the Design view side of the split. The Accordion panels open and close interactively. Note how each panel displays a hover effect when the cursor passes over the panel tab. You can use Code Navigator to help identify the CSS rules that format the Accordion structure. Code Navigator can be accessed in any view of Dreamweaver. 6 Position the cursor over a closed tab. Note how the tab changes color when the cursor passes over it. 7 Right-click the tab, and choose Code Navigator from the context menu. Examine the names and the order of the rules that appear. In Live view the list of CSS rules is much larger, indicating that much of the styling is applied dynamically via JavaScript. Note that the last rule displayed in the window is one that formats the a:hover behavior of the tab. 8 Position the cursor over an open tab. Note how the heading is styled in white and does not display the hover effect when the cursor passes over it.
BL-12 Lesson 15 Bonus Lesson: Working with Code 9 Right-click the tab and choose Code Navigator from the context menu. Note that the last rule displayed in the window is one that formats the a:active behavior of the tab, overriding the styling applied by the a:hover rule. Code Navigator was able to identify the various rules that play a role in the format- ting of the Accordion. But Code Navigator is a static tool, you have to go out of your way to activate it to check your CSS styling. The new CSS Designer plays a similar role but actually displays the CSS styling dynamically.
Using CSS Designer
CSS Designer plays two major functions: It allows you to create CSS styling visually and then displays the rules applied to or affecting any selected element live. 1 If necessary, open tips.html, and turn off Live view. CSS Designer works the same way in Code or Design view. 2 Select Split view and insert the cursor into a heading of an open tab in the Design view window. Note the display in the CSS Designer Selectors pane. The Selectors pane shows a list of CSS rules that are formatting thea:active tab behavior. 3 Insert the cursor into a heading in the same element in the Code view window.
The list of CSS selectors remains the same. 4 Insert the cursor in the heading of a closed Accordion tab in Code view. Note the list of CSS selectors. The Selectors pane displays the rule formatting thea:hover state of the Accordion tab. 5 Insert the cursor in the heading of a closed Accordion tab in Design view. Note the list of CSS selectors. The list of CSS selectors remains the same. The CSS Designer works equally well in Design and Code views, allowing you to troubleshoot your styling no matter where you are at the moment.
Adobe Dreamweaver CC Classroom in a Book BL-13 Working with Live Code
Checking the styling and effects of static CSS styling by using the CSS Designer is a relatively easy matter. But the jQuery Accordion and other types of processes use JavaScript and other dynamic processes to apply CSS styling. Since these behaviors occur only in a browser with user interaction, troubleshooting these processes is impossible using the methods you’ve learned so far in this book. Live Code permits you to view how the code actually functions when it is displayed live in the browser. This is especially helpful for all interactive processes or web applications that can alter the code through user interaction, such as with the JQuery Accordion widget. 1 If necessary, open tips.html, and display the page in Split view with Live view turned off. Observe the code that comprises the headings for the jQuery Accordion tabs. Each heading is composed of an
element containing a hyperlink placeholder. None of the headings features any class or ID attributes. 2 Switch to Live view and click the Live Code button. The Code view side of the document window changes color, indicating that Live Code is active. The HTML code can’t be edited when Live Code is active. 3 Examine the same Accordion tab headings again. The headings now display dynamically applied class and ID attributes. 4 Click a closed tab to open it. Observe the code applied to the Accordion tab.
Parts of the code will flash pink for a moment as the attributes change before your eyes based on your selection. The attributes are applied dynamically by JavaScript. 5 Click the At Home tab to open it. Move the cursor over and off the tab and observe how the code changes. Although the tab is open and doesn’t display any hover effects, the jQuery behavior still applies the ui-state-hover class to the element whenever the mouse cursor passes over it.
BL-14 Lesson 15 Bonus Lesson: Working with Code You have already learned that many times effects you see within a webpage are the results of multiple CSS rules applied to multiple elements, sometimes one nested inside the other. Although you can use Code Navigator and/or CSS Designer to iden- tify the specific elements and rules at play, Dreamweaver provides a tool—Inspect mode—that makes the job of tracking down the specific rules quick and easy.
Using Inspect mode
Inspect mode works together with Live view to quickly survey your page content and visually connect HTML elements to the pertinent CSS styling. Inspect mode can work with Live view alone, or combined with Live view and Live Code. 1 If necessary, open tips.html, switch to Split view, and choose View > Split Vertically. 2 If necessary, open the CSS Designer. 3 If necessary, select Live view and Live Code. 4 Click the Inspect button. E Tip: If you click an element in the document When Inspect mode is invoked, Dreamweaver highlights elements in color window, Inspect within Design view as the cursor passes over them. At the same time, the mode is disengaged automatically. selected element is highlighted in Code view, and the CSS Designer displays the pertinent styling information. 5 Pass the cursor over the headings within the Accordion tabs, the text items within the bulleted list, and other elements on the page. Dreamweaver highlights each element in Code view and displays the appropriate formatting in the CSS Designer. Notice how hyperlinks are displayed differently than the element containing them. 6 Position the cursor near but not over any of the bullets in the list. Dreamweaver now highlights the
- element is highlighted. Once the elements or formatting is identified, you can also use Code view to edit the HTML or any of the files.
  Adobe Dreamweaver CC Classroom in a Book BL-15 Working in related files
  The Related Files interface is practically black magic for coders and developers. It provides access to most of the attached files without having to look for them on the hard drive or server, or even to open them. Each of the related files is displayed at the top of the document window and is basically only a click away. For example, you can use the Related Files interface to access the CSS formatting right inside Code view. 1 Click mygreen_styles.css in the Referenced Files display. The mygreen_styles.css file appears in the Code view split. You can edit the CSS rules directly in this window. Code Navigator can also help to locate specific rules. For instance, the rule formatting the
  element is stored in mygreen_styles.css. Using Code Navigator, you can locate the appropriate rule with a single click. 2 Right-click the Green Tips heading, and choose Code Navigator from the context menu. Select h1 from the Code Navigator window. The Split view code window focuses on theh1 in mygreen_styles.css rule. Code Navigator will focus on the pertinent rule no matter what file it is stored within. E Tip: Changes 3 Right-click the At Home tab text. Using Code Navigator, select the made in any related .ui-helper-reset file are not saved rule. when you save the HTML document itself. When you close the document, Dreamweaver will prompt you to save these files. Be sure to click Yes. Choose File > Save All at regular intervals to prevent the loss of any changes should the program crash.
  Dreamweaver loads the style sheet jquery.ui.core.min.css and focuses on the .ui-helper-reset rule automatically. If desired, you can access CSS formatting and work on the source code in Code view simultaneously.
  BL-16 Lesson 15 Bonus Lesson: Working with Code Accessing Split Code view
  Why should coders be denied the ability to work in two windows at the same time? Split Code view enables you to work in two different documents or two different sections of the same document at once. Take your pick. 1 Choose View > Split Code. Turn off Live view. The document displays two Code view windows: one focusing on the source code and the other on the CSS style sheet. You can use Code Navigator in Code view to access CSS formatting as you did in Design view. 2 Right-click one of the

Adobe Dreamweaver CC Classroom in a Book BL-5 2 Drag the Cursor Across the Code

Shopping green saves energy

Green Tips