71
Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Embed Size (px)

Citation preview

Page 1: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Lesson 3: Adding Text and Images

Introduction to Adobe Dreamweaver CS6Adobe Certified Associate:

Web Communication using Adobe Dreamweaver CS6

Page 2: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 2

Overview

Page 3: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

3

1.4 Website Accessibility Standards

• The Internet allows users all over the world to access information remotely. However, there are often technical obstacles on a web page that prevent users with disabilities from accessing this information.

• Website accessibility, therefore is defined as the practice of providing equal access to the information and functionality of your website by people of all abilities and disabilities.

© 2013 John Wiley & Sons, Inc.

Page 4: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 4

1.4 Website Accessibility Standards

• Thinking about accessibility up-front in the design process is well worth your time. In addition to being the morally right thing to do, all websites strive to achieve the largest audience possible.

• In the United States, there are laws that apply toward federally- or state-funded websites. These laws include the American with Disabilities Act, the Individuals with Disabilities Education Act and Sections 504 and Section 508 of the Rehabilitation Act of 1973.

• Many international laws also address accessibility.

Page 5: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 5

2.4 Usability, Readability, and Accessibility

Principles • Provide appropriate alternative text. This provides

a text alternative to non-text content such as images. It is useful for people who are blind or visually impaired and rely on a screen reader to have content read aloud.

• Ensure users can complete and submit all forms. Form elements (text field, checkbox, drop-down menus) should have a label using the <label> tag.

• Label links. Add a title attribute to your links. The title attribute contains descriptive information about the link (such as the destination), can be read aloud by screen readers, and appears in most browsers when a user hovers over a link.

Page 6: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 6

2.4 Usability, Readability, and Accessibility

Principles • Allow users to skip repetitive elements. You

should provide a method that allows users to skip repeated elements such as navigation providing a “Skip Navigation” or “Skip to Content” link at the top of the page which jumps to the main section.

• Do not rely on color alone to convey information. Users who are colorblind may not be able to perceive it and it will be unavailable to screen readers.

• Keyboard equivalents. The accesskey attribute can be added to certain form elements, including area, button, input, label, legend, and textarea.

Page 7: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 7

2.4 Usability, Readability, and Accessibility

Principles Screen reading devices are designed to read aloud the content of a page. But how does a screen reader handle images? In HTML an image can be referenced in the code like so:<img src="tree.jpg">This tag has support for the alt attribute, whose job is to provide a text alternative for non-text objects, so within the code it looks like this:<img src="tree.jpg" alt="Maple tree">

Page 8: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 8

2.4 Usability, Readability, and Accessibility

Principles Whereas accessibility is concerned with providing equal access to the information and functionality of your website, usability is concerned with removing the obstacles to the information on your site. Here are a few general principles:• Visual hierarchy. Hierarchy is defined as

organizing content into levels of importance. • Consistent location of repeating items. Place

elements such as navigation menus, search boxes or any other content that is visible on all the pages in the same place to avoid user disorientation.

Page 9: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 9

2.4 Usability, Readability, and Accessibility

Principles • File size (page load time). Be judicious when

adding content that can affect page load time such as animation, video, or audio.

• Place the most important information above the fold. “Above the fold” refers to the top half of a newspaper where the most important information is. A website has a vertical cut-off point (the fold) beyond which users must scroll.

Page 10: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 10

2.4 Usability, Readability, and Accessibility

Principles • Regardless of what type of website you

have, it is important to have an understanding of basic Readability rules. Web Readability is defined as how well your users can process the information within your content. There are some basic concepts to be aware of:

• Contrast. Good contrast makes text easy on the eyes. Black text on a white background is the standard and most safe level of contrast.

Page 11: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 11

2.4 Usability, Readability, and Accessibility

Principles • Font Size. The smaller the font, the harder is to

read. Readability is partially based on other factors such as your target audience and the amount of text within a given section. For body copy, the general rule of thumb is that anything less than 10 pixels for font size is too small for most readers.

• Serif versus sans-serif. A conservative way to choose fonts is to use serif fonts (such as Times or Georgia) for your body copy and sans-serif fonts (such as Verdana or Trebuchet) for your headings. y.

Page 12: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 12

2.4 Usability, Readability, and Accessibility

Principles • Paragraph line-height and line length. Line-

height is the amount of space between the lines in a paragraph. Too much line-height can cause readers to lose their place. Too little causes text to look cramped. If line length is too long the user works hard to stay on track. If lines are too short users have to retain information as their eye skips to the next line.

• Organization of content. On the web the user is often “scanning” your text instead of truly reading it. To make your copy scannable, use headers and hierarchy and provide focus points to guide the user through the content.

Page 13: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 13

5.3 Modify Text and Text Properties

1. Launch Dreamweaver CS6.2. Make sure your

dw03lessons site is open in the Files panel.

3. Double-click on the events.html file in your Files panel to open it in the Design view.

4. Place your cursor in front of the word There’s in the first paragraph. Type OrganicUtopia Events and press Enter (Windows) or Return (Mac OS) to create a line break as shown above.

Page 14: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 14

5.3 Modify Text and Text Properties

5. Click and drag to highlight the phrase you just typed. Now format your text using the Property Inspector, at the bottom of the screen.

6. Choose Heading 1 from the Format drop-down menu. The text gets larger and becomes bold.

Page 15: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 15

5.3 Modify Text and Text Properties

• Although you are working in Dreamweaver’s Design view, you have actually changed the HTML code for this page. The text OrganicUtopia Events originally had an opening and closing tag defining it as a paragraph. The code looked like this:

<p>OrganicUtopia Events</p>• In the previous step, you changed the formatting

of the text from a paragraph element to a Heading 1 element, and the HTML code changed to this:

• <h1>OrganicUtopia Events</h1>

Page 16: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 16

5.3 Modify Text and Text Properties

7. Click anywhere inside the headingOrganicUtopia Events; you do not need tohave it selected. In the Property Inspector, click on the CSS button to access the formatting options. Choose Verdana, Geneva, sans-serif from the Font drop-down menu as shown above.

Page 17: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 17

5.3 Modify Text and Text Properties

The New CSS Rule dialog box appears.• From the Selector Type

drop-down menu, choose Tag. In the Selector Name text field, the selector h1 has been chosen because you placed your cursor inside the text formatted as H1. Press OK. Your heading is now styled in Verdana.

Page 18: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 18

5.3 Modify Text and Text Properties

• Dreamweaver allows you to format text in a way similar to desktop publishing and word processing applications, but there are important differences. When you chose the styling, Verdana, Geneva, and sans-serif, they were listed as one option.

• When a web page is rendered in a browser, it uses the fonts installed on the user’s computer. Assigning multiple fonts allows you to control which is used if the user doesn’t have a specific font installed.

• In this case, if the user doesn’t have Verdana, Geneva displays instead. Sans-serif is included as the last option in case the user doesn’t have either Verdana or Geneva. A generic font family (either sans-serif or serif) is listed at the end of all the options in the Font drop-down menu.

Page 19: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 19

5.3 Modify Text and Text Properties

There are additional HTML text formatting options. Select text on your page and try some of the following formatting.• Blockquote. This element will indent selected

text slightly to the right, thereby setting it off from the rest (Choose Insert > HTML > Text Objects >Blockquote.)

• Abbreviation. This element describes an abbreviated phrase, giving useful information to browsers, spell checkers, translation systems, and search-engine indexers.

Page 20: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 20

5.3 Modify Text and Text Properties

9. Highlight OrganicUtopia Events and click on the Text Color button to the right of the Size drop-down menu. When the Swatches panel appears, hover over the color swatches. At the top of the panel, a different hexadecimal color value appears for each color. When you locate the value labeled #9C3, click once to apply the color.

Page 21: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 21

4.12 Import a Word or Excel Document

• You may open a Microsoft Word file and save it as Plain Text (.txt) and then open it in Dreamweaver by choosing File > Open. Keep in mind that .txt files do not support Microsoft Word styles.

• You can also copy selected text in Word (by choosing Edit > Copy) and then switching to Dreamweaver and choosing Edit > Paste Special. The Paste Special dialog box gives you multiple options for how you want the text to be formatted when you click OK.

Page 22: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 22

4.12 Import a Word or Excel Document

• You may open a Microsoft Excel file and save it in a delimited format such as a comma separated value file (.csv) and then open this file n Dreamweaver by choosing File > Open.

• The other method for importing data is by copying selected text in Excel (by choosing Edit > Copy) and then switching to Dreamweaver and choosing Edit > Paste Special. As with Word, you bring in data as plain text or with structure and formatting styles. If you choose to bring in data with the “structure” options, the data will be pasted as a table.

Page 23: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 23

4.12 Import a Word or Excel Document

• You can also link elements such as text or images to Word and Excel documents. Select the object to link and choose Insert > Hyperlink. In the Hyperlink window, click on the Folder icon in the Link section and navigate to a Word or Excel document.

Page 24: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 24

5.3 Modify Text and Text Properties

Follow these steps to format text using CSS:1. Click on the Split

button in the Document toolbar.

2. Click quickly three times in the para-graph beneath OrganicUtopia Events in the Design view. In the Code view the text is high-lighted between the opening and closing paragraph tags.

Page 25: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 25

5.3 Modify Text and Text Properties

3. Make sure you have CSS selected in the Property Inspector at the bottom of your page and choose 18 from the Size drop-down menu. The New CSS Rule dialog box appears again.

4. From the Selector Type drop-down menu, choose Tag. Since there are different categories of CSS rules, Dreamweaver wants to know which to use. In the Selector Name text field, the selector p has been chosen because your cursor was inside a paragraph. Press OK to apply the changes.

Page 26: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 26

5.3 Modify Text and Text Properties

5. On the right side of the Code view, scroll up by clicking on the up arrow or by clicking the scroll bar and dragging upward. Toward the top of the page, you are looking for a few lines of code that look like this:

<style type="text/css">h1 { font-family: Arial, Helvetica, sans-serif; color: #9C3;}p { font-size:18px;}</style>

Page 27: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 27

5.3 Modify Text and Text Properties

Between the two <style> tags are all the CSS rules you have created. 9. In the Code view, locate the line “font-size:18px”

in the rule for p, and select the value18 by clicking and dragging over it. Type 14 to change the value. Although you made a change in the Code view, it has not yet been updated in your Design view. You need to refresh your page to see the changes occur in the Design view.

Page 28: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 28

5.3 Modify Text and Text Properties

7. In the Property Inspector, press the Refresh button to apply the changes; your paragraph text becomes smaller asshown at right.

Page 29: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 29

5.3 Modify Text and Text Properties

8. Click inside the first paragraph in the Design view. In the Property Inspector, click on the color swatch, and in the top-left corner, locate the dark gray swatch, which is hexadecimal color #666. Click on the swatch to apply the color. Notice that not only does the appearance in the Design view change, but in your Code view a new line of CSS has also been created (color: #666).

9. Click the Design view button to return to Design view.

10.Choose File > Save.

Page 30: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 30

6.1 Conduct Technical Tests

Follow these steps to preview your page in a browser:1. With events.html open in Dreamweaver, choose

File > Preview in Browser and select a browser from the available options. This list varies, depending on the browsers you have installed on your hard drive.

Page 31: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 31

6.1 Conduct Technical Tests

2. When events.html opens in your browser, look for differences between it and the Design view preview.

• Another method to preview your pages is the Live View feature. Live View allows you to preview your page without leaving the Dreamweaver workspace.

Page 32: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 32

6.1 Conduct Technical Tests

3. Press the Live button in the Document tool-bar at the top of your page. You won’t see a big difference, but text may shift slightly. Select the first heading in the window and try to delete it; you will be unable to, because Live View is a non-editable workspace.

Page 33: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 33

6.1 Conduct Technical Tests

4. Click the Live button again to deactivate this view. While Live View is a useful addition to Dreamweaver, it does not replace the need to preview your page in a browser. Web pages might be rendered differently depending on browsers, and so it is a good habit to check your page occasionally as you make changes.

Page 34: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 34

4.6 Linking Web Content1. In the Property Inspector, click on the HTML

button.2. In the first paragraph, highlight the word

products.3. In the Property Inspector, type products.html in

the Link text field. Press Enter (Windows) or Return (Mac OS).

Page 35: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 35

4.6 Linking Web Content4. Choose File > Save and then File > Preview in

Browser.5. Click on the new products link. The products page

appears in your browser window because a page named products.html is located in this folder. Now visitors can easily navigate to the products page, but what happens when they want to go back to the events page? You’ll need another link.

6. Return to Dreamweaver and double-click on products.html in the Files panel. Click to the right of the word Produce and press Enter (Windows) or Return (Mac OS) to create a new line. Choose Insert > Hyperlink to open the Hyperlink dialog box.

Page 36: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 36

4.6 Linking Web Content7. Type Events in the Text

field (right).8. Click on the Browse

button to the right of the Link text field to open the Select File dialog box. The dw03lessons folder you defined as the root for this site should be selected by default. If not, click the Site Root button. Select events.html and press OK (Windows) or Open (Mac OS).

Page 37: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 37

4.6 Linking Web Content9. Click inside the Title field and type Organic

Utopia events page. Titles are optional for hyperlinks, but they improve accessibility. Adding titles to your hyperlinks can also improve your site’s search engine rankings. Click OK to commit the changes; notice that a link to events.html has been created using the text entered into the Text field in the Hyperlink dialog box.

Page 38: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 38

4.6 Linking Web Content• To create and link to a Named Anchor: 1. Place your cursor in front of the first letter of the page

element you want to link to.2. Choose Insert > Named Anchor or click the “Named

Anchor” icon in the “Common” toolbar.3. Give your anchor a name; type best99.4. Click OK. 5. To link to the named anchor you need to select the

element you want linked (such as a text).6. In the Properties Inspector, use the Point to File icon

and drag it to the name anchor. You could also type in the anchor name within the Link field of the Properties Inspector, like so: #best99.

Page 39: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 39

4.6 Linking Web Content• You may be surprised by the simplicity of linking

events.html and products.html. Instead of entering a long directory path in the Link text fields, you merely typed the name of the file. This kind of link is called a relative hyperlink.

• Now you’ll create an absolute link allowing visitors to access the Adobe website to learn more about Dreamweaver CS6.

1. Click on the events.html tab above the Document toolbar. Scroll down to the bottom of the page. Using the Design view window, create a new line after the text that reads “Occasionally we gather...”, and type: This page was created with Adobe Dreamweaver.

Page 40: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 40

4.6 Linking Web Content2. Highlight the words Adobe

Dreamweaver and in the Common section of the Insert panel on the right side of the screen, click on the Hyperlink icon to open the Hyperlink dialog box.

3. The Hyperlink dialog box opens. Notice that Adobe Dreamweaver has been entered into the Text field. In the Link text field, type http://www.adobe.com/products/dreamweaver.html. Make sure to include the colon and the appropriate number of forward slashes.

Page 41: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 41

4.6 Linking Web Content4. Choose _blank from the Target drop-down menu.

Choosing the _blank option will cause the hyperlink to the Adobe website to open in a new, blank browser window or tab.

Page 42: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 42

4.6 Linking Web Content5. Press OK to close the Hyperlink dialog box.

Choose File > Save, then File > Preview in Browser, or press the Preview/Debug in Browser button in the Document toolbar.

6. Click on the Adobe Dreamweaver text. Unlike the Events and Products links you created earlier, this link causes your browser to open a new tab or window, and it is pointing to an external web page on the Internet.

Page 43: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 43

4.6 Linking Web ContentFollow these steps to create a link to an e-mail address• 1. Place your cursor at the end of the last line, then

hold down your Shift key and press Enter (Windows) or Return (Mac OS). This creates a line break, or a soft return, and the text begins below the previous line. Type Contact [email protected] for information on Dreamweaver classes.

• 2. Highlight the text [email protected] and click the Email Link button in the Insert panel.

• 3. The Email Link dialog box opens with both fields populated. Press OK. You may preview this page in a browser if you choose.

Page 44: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 44

5.3 Modify Text and Text Properties

Follow these steps to create a list in HTML:1. On the events.html

page, highlight the four lines below Spring Events.

2. Make sure you have the HTML button selected in the Property Inspector at the bottom of your page, and click the Unordered List button (above). The highlighted text becomes indented, and a bullet point is placed at the beginning of each line.

Page 45: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 45

5.3 Modify Text and Text Properties

3. Click the Ordered List button to the right of the Unordered List button. The bullets change to sequential numbers.

4. Choose Format > List > Properties to open the List Properties dialog box. Choose Bulleted List from the List type drop-down menu to return to your first style of list. The Numbered List and Bulleted List options also allow you to switch between ordered and unordered lists.

Page 46: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 46

5.3 Modify Text and Text Properties

5. From the Style drop-down menu, choose Square. This changes the default circular bullets to square bullets. Press OK to exit the List Properties dialog box.

Page 47: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 47

5.3 Modify Text and Text Properties

6. With all four lines still highlighted, click on the CSS button in the Property Inspector at the bottom of your page. Click on the arrow to the right of the Size field. Choose 14 from the Size drop-down menu in the Property Inspector. The New CSS Rule dialog box appears..

7. From the Selector Type drop-down menu, choose Tag. In the Selector Name text field, the selector ul has been chosen; ul is the HTML tag for an unordered list. If ul is not chosen, type ul inside this text field. Press OK to apply the changes.

Page 48: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 48

5.3 Modify Text and Text Properties

8. In the Property Inspector, if the Targeted Rule drop-down menu does not read ul, choose ul from the menu. Click on the color swatch and in the top-left corner of the colors panel, locate the dark gray swatch, which is hexadecimal color #666. Click on the swatch to apply the color.

9. Choose File > Save.

Page 49: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 49

5.3 Modify Text and Text Properties

• A third type of HTML list used less frequently is the Definition list. A Definition list is a list of terms and corresponding definitions. For example:

Professional sports teams of Boston Boston Red Sox Boston Celtics Boston Bruins• To create a definition list, place your cursor on a new line

where you would like to add the list and choose Insert > HTML > Text Objects > Definition List. Type your definition term (this is the dt tag). If you would like the next line to be a Definition Description, press Return and Dreamweaver will automatically add one (this is the dd tag).

Page 50: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 50

1.3 Standard Copyright Rules

When publishing to the Web be aware of legal issues involved. In general, unless you have created the content (such as text, images, video, music or any other media) you need the permission of the creator. There are exceptions to this principle, although they are very rare.• Intellectual property: Refers to unique content for which

a set of exclusive rights are recognized under law. Under intellectual property law, owners are granted certain exclusive rights to a variety of intangible assets, such as musical, literary, and artistic works; discoveries and inventions; and words, phrases, symbols, and designs.

• Copyright: Copyright is one type of Intellectual Property and is a legal concept giving the creator of original work exclusive rights to it, usually for a limited time.

Page 51: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 51

1.3 Standard Copyright Rules

• Fair Use Doctrine: Fair use is a doctrine that permits limited use of copyrighted material without acquiring permission from the rights holders. General examples of this would include news reporting, commentary, criticism, and for some educational purposes..

• Derivative work: A derivative work is material that is “based on or derived from” another work such as a painting of a scene from a movie. You may not distribute a derivative work of a work under copyright without the original author’s permission unless the content meets certain criteria of fair use.

Page 52: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 52

1.3 Standard Copyright Rules

• The World Wide Web is built on hyperlinked documents, making it easy to link to or embed content from other websites. An informal citing of material can be a mention in your text, e.g., “On April 24, 2012, Newsweek had listed on its website . . .”.

• If a more formal citation is required, follow the examples below. Try to include relevant information such as the date visited or modified:

1. “Adobe Privacy Policy,” Last updated on July 14, 2009 http://www.adobe.com/misc/privacy.html

2. “5 easy ways to make money on the Internet,” YouTube, accessed April 20, 2012 http://www.youtube.com/watch?v=oHg5SJYRHA0

Page 53: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 53

4.5 Insert Images on a Web Page

The three most common image formats on the Web are JPEG, GIF, and PNG.• The JPEG format’s sole purpose is to compress

photographic images. It uses glossy compression, which means that it selectively discards information, to reduce file size. Because JPEGs were designed to handle photographic images, they can significantly reduce the size of images containing gradients and soft edges, without producing noticeable degradation. However, reproducing sharp edges and solid areas of color often requires a higher quality setting.

Page 54: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 54

4.5 Insert Images on a Web Page

• GIF is an acronym for Graphics Interchange Format. Unlike the JPEG format, GIFs do not use glossy compression. Instead, GIFs rely on a maximum of 256 colors to reduce the size of images. This means that images with a limited number of colors can be reproduced without degradation.

• The PNG format has become increasingly popular because it incorporates many of the best features of JPEGs and GIFs. The PNG format is closer to GIFs in that it offers lossless compression and comes in two categories: 8 bit and 24 bit. This means it can be used quite effectively for simple graphics as well as continuous tone photographic images.

Page 55: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 55

4.5 Insert Images on a Web Page

• In the Image Tag Accessibility Attributes dialog box, you can type in the Alternate text field.

• The Alternate text field corresponds to the Alt attribute of an <img> tag. Including a description of the inserted image in this field is not technically necessary, but it is good practice.

Page 56: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 56

5.4 Modify Imagesand Image Properties

• Although you can scale an image in Dreamweaver, you need to be very careful doing so. The width and height attributes of an image are automatically pulled from the dimensions of your web graphic. You can scale a graphic in Dreamweaver two ways:

1. By modifying the Width and Height values of a selected image within the Properties panel

2. By clicking and dragging one of the corners of a selected image in the Design view.

Page 57: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 57

4.5 Insert Images on a Web Page

Follow these steps to insert an image on a web page:1. Double-click on products.html in the Files panel or

click on the tab, as it’s still open. Place your cursor after the word Produce and press Enter (Windows) or Return (Mac OS) to create a new line.

• 2. Choose Insert > Image. The Select Image Source dialog box appears. If your site folder does not open automatically, click the Site Root button, and then double-click the images folder. Select beets.jpg and press OK (Windows) or Open (Mac OS).

Page 58: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 58

4.5 Insert Images on a Web Page

Another way to insert an image:• Double-click on the images folder in the Files

panel to reveal its contents. In the document window, click to the right of the beets image and press Enter (Windows) or Return (Mac OS) to create a new line. Click and drag cucumbers.jpg from your Files panel directly below the beets image in the Design view. When the Image Tag Accessibility Attributes dialog box appears, type Cucumbers into the Alternate text field. Press OK.

Page 59: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 59

4.5 Insert Images on a Web Page

A third way to insert an image:• Click to the right of the cucumber

image to place your cursor, and press Enter (Windows) or Return (Mac OS) to create a new line. Click the menu at the top of the Insert panel and choose Common from the list. Click on the Images: Image option, and then Select Choose Image from the Images drop-down menu in the Common section of the Insert panel. Navigate to the images folder if necessary, select the eggplants.jpg image, and press OK (Windows) or Open (Mac OS).

Page 60: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 60

6.4 Manage Assets, Links,

and Files for a Site Follow these steps to link images:1. In products.html, click on the image of the beets

to select it. In the Property Inspector, type images/beets_large.jpg into the Link text field. Press Enter (Windows) or Return (Mac OS).

Manually typing in the link is one way to link to the image, but can introduce errors. You can also use Dreamweaver’s Point to File feature:

Page 61: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 61

6.4 Manage Assets, Links,

and Files for a Site • Click on the image of the cucumbers to select it.

In the Property Inspector, locate the Point to File icon next to the Link text field. Click and drag this icon into the Files panel (below).

Page 62: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 62

4.10 Build Image MapsTo add active links within a graphic, you use image maps. Sometimes called “hotspots,” an image map is one or more defined areas within a graphic that are hyperlinked to unique documents. To create an image map area:1. Select an image in the Design view. At the

bottom of the Properties panel you will see the map section.

Page 63: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 63

4.10 Build Image Maps2. Select either the rectangle, circle or polygon

hotspot tool and draw the shape over the area you would like to make active. When you first click, a dialog box will appear prompting you to add “alt” text for your image map. Click OK.

3. You can reshape the boundaries of the hotspot by clicking on the Pointer hotspot tool then clicking and dragging any of the anchor points that appear.

4. When done drawing and modifying your shape with your shape type relevant text into the Alt field that appears in the Hotspot section of the Properties Panel.

Page 64: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 64

4.10 Build Image Maps5. To add a link to document, you can type a url in

the Link field or use the Point to File icon or Browse for File button just like you would with a standard hyperlink.

6. Locate the Map field in the Properties panel and type an appropriate name for your image map. This map name is used for a single map and should be unique, especially if you have more than one image map on a page.

Page 65: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 65

5.4 Modify Imagesand Image Properties

Follow these steps to optimize an image1. In the Files panel, click on the

belgianchocolate.jpg file to select it. From the Files panel menu, select Edit > Duplicate. A new file named belgianchocolate - Copy.jpg appears in the images folder.

2. Click on the belgianchocolate.jpg image in the document window, then click the Edit Image Settings button in the Property Inspector.

Page 66: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 66

5.4 Modify Imagesand Image Properties

3. Click the preset menu and choose GIF for Background Images. The optimization settings appear. Click the Color menu and choose 4. The image of the chocolate changes to a preview of these settings, and the image has become flat with most of the detail removed.

4. Click the Format menu and choose JPEG. The default value is 80 and you can see the file size has changed to 9K. Drag the slider left to a quality of 10. The image quality changes instantly. Again, this is too drastic a trade-off. Drag the quality slider to 90. The image looks slightly better than it did at 80, and you have a file size of around 14K (roughly 50% of the original).

Page 67: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 67

5.4 Modify Imagesand Image Properties

5. You can optimize in Photoshop. Click the cucumbers image, and then in the Property Inspector, click the Photoshop icon if available.

6. The image will open in Photoshop. You can make any changes you want and use the more in-depth controls of the Save for Web feature.

Page 68: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 68

4.5 Insert Images on a Web Page

• Photoshop’s .psd format is not valid for the web, however you can insert a .psd file using Dreamweaver’s Smart Objects feature.

• Inserting a native Photoshop file into Dreamweaver will trigger an automatic conversion into a suitable web graphic such as JPG, PNG, or GIF. The original PSD file is still linked, however, and the converted.

• Smart Objects are labeled with a unique icon in Dreamweaver’s design view.

Page 69: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 69

3.3 Use the Property Inspector

Follow these steps to update an image:1. Right-click (Windows) or Ctrl+click (Mac OS) on the file

named belgianchocolate - Copy.jpg in the Files panel and choose File > Rename. Type belgianchocolate_original.jpg and press Enter (Windows) or Return (Mac OS).

2. Click on the chocolate image in the Design view to select it. In the Property Inspector at the bottom of your page, highlight the text that reads images/belgianchocolate.jpg in the Src text field.

3. Click and drag the Point to File icon to the belgianchocolate_original.jpg image you just renamed. The compressed image is replaced with the copy you made earlier.

Page 70: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 70

Lesson Summary

Page 71: Lesson 3: Adding Text and Images Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

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.