lesson 12: working with code-editing features introduction to adobe dreamweaver cs6 adobe certified...
TRANSCRIPT
Lesson 12: Working with Code-editing
FeaturesIntroduction to Adobe Dreamweaver CS6
Adobe Certified Associate:Web Communication using Adobe Dreamweaver CS6
© 2013 John Wiley & Sons, Inc. 2
Overview
3
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.
4
5.6 Use Basic HTML TagsFollow 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.
5
5.6 Use Basic HTML Tags2. 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.
6
5.6 Use Basic HTML Tags3. 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.
7
5.6 Use Basic HTML Tags4. 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.
8
5.6 Use Basic HTML TagsFollow 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.
9
5.6 Use Basic HTML Tags4. 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.
10
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.
11
5.6 Use Basic HTML TagsFollow 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.
12
5.6 Use Basic HTML Tags3. 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.
13
5.6 Use Basic HTML Tags6. Double-click
the head tag to expand it again as shown at right.
© 2013 John Wiley & Sons, Inc.
14
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.
15
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.
16
5.6 Use Basic HTML TagsFollow 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.
17
5.6 Use Basic HTML Tags3. 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.
18
5.6 Use Basic HTML Tags4. 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.
19
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.
20
5.6 Use Basic HTML TagsFollow 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.
21
5.6 Use Basic HTML Tags3. 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.
22
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.
23
5.6 Use Basic HTML Tags1. 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.
© 2013 John Wiley & Sons, Inc. 24
Lesson Summary
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.