This chapter is from the book
This chapter is from the book
This chapter is from the book
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 in several ways.
Open myfirstpage.html, if necessary, and switch to Code view.
Scroll down and locate the <nav> element (around line 11).
Drag the cursor across the entire element, including the menu items.
Using the cursor in this way, you can select any portion of the code or 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.
Click the line number beside the <nav> tag.
The entire line is selected within the window.
Drag down the line numbers to select the entire <nav> element.
)
Dreamweaver completely highlights all seven lines. Using line numbers can save a lot of time and avoid errors during selection, but it 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 will frequently do in upcoming lessons.
Scroll down and locate the following code: <a href="#">Link 1</a>
Insert the cursor anywhere in the text Link 1.
Examine the tag selectors at the bottom of the document window.
The tag selectors in Code view display the <a> tag and all its parent elements, the same way they do in Live or Design view.
Select the <a> tag selector.
The entire <a> 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 <a> is a child of the <li> element, which is a child of <ul>, which is in turn a child of <nav>, which is a child of <div#wrapper>, and so on.
The tag selectors make it a simple chore to select any part of the code structure.
Select the <ul> tag selector.
The code for the unordered list is entirely selected.
Select the <nav> tag selector.
The code for the entire menu is selected.
Select the <div#wrapper> tag selector.
)
)
)
The code for the entire page 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 identify and select the parent tag yourself. Dreamweaver offers another tool that can do it for you automatically.
Using parent tag selectors
Using the parent tag selector in the Code view window makes the job of selecting the hierarchical structure of your page even simpler.
Choose Window > Toolbars > Common to display the Common toolbar, if necessary.
Insert the cursor anywhere in the text Link 1.
The Select Parent Tag option may not be displayed by default in the Common toolbar. If you see the tool icon, skip to step 4, otherwise you will need to enable this tool before proceeding.
Click the Customize Toolbar icon
and enable the Select Parent Tag tool before proceeding to step 4.In the Common toolbar, click the Select Parent Tag icon
.The entire <a> element is highlighted.
Click the Select Parent Tag icon again or press Ctrl+[/Cmd+[ (left bracket).
The entire <li> element is selected.
Click the Select Parent Tag icon.
The entire <ul> element is selected.
Press Ctrl+[/Cmd+[ until <div#wrapper> is selected.
)
)
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, you may find working with long sections of code unwieldy. Code view offers other handy options to collapse long sections to make them easier to work with.