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 <img> tag
selected.
© 2013 John Wiley & Sons, Inc.
4
5.6 Use Basic HTML Tags
2. Right-click (Windows) or Ctrl+click (Mac OS) the
<img> 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
<font> 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 <style> 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
<title></title> 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 <style>
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 <style> 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
<head> tag, which is now selected.
4. In the Coding toolbar click on the Collapse
Selection button to collapse the <head> tag and
all its content.
5. Click within your document and note that you
could begin to work in your HTML and the <head>
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 <b>
and the <i> tags (below).
© 2013 John Wiley & Sons, Inc.
16
5.6 Use Basic HTML Tags
3. Click on the first highlighted (invalid) code for the
<b> 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 timeconsuming 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.
