19 November 2012
Welcome to Part 4 of this six-part tutorial series on creating your first website. The first three parts showed how to define a site in Dreamweaver CS6, create the basic structure using
<div> elements, and begin styling the home page with CSS. So far, the only image used was added as a background. In this part, you’ll learn how to add images in the HTML structure using the
<img> tag. You’ll also add more text and style it, as well as create a translucent background and rounded corners with CSS.
If you completed the first three parts of this tutorial series, continue working with your existing files. If you’re not sure whether your HTML and CSS is correct, you can download the first_website_pt4_begin.zip sample file, and use it to replace your existing files.
In this part, you'll add the remaining content to the home page for Check Magazine, a fictional publication, by inserting images using the HTML
<img> tag and formatting text. You’ll also add a translucent background and rounded corners to the main text area using CSS3 techniques. Figure 1 shows what the page will look like in a modern browser at the end of Part 4.
You can use any of several methods to add images to a web page in Dreamweaver. In this section, you'll explore three commonly used methods to add images to the Check Magazine page.
One of the most common ways to add assets to a page is through the Insert panel or Insert menu.
<div>. Make sure the insertion point remains inside the
<div>(see Figure 2). (In other words, make sure you don't click anywhere outside the
<div>after you've deleted the placeholder text.)
<div>, and click the Split button to see what has happened in the underlying code. Dreamweaver has inserted two paragraphs (
<p>tags), each with
inside them (see Figure 3).
is the HTML entity (code that represents a special character) for a nonbreaking space. It’s there to make the paragraph easier to select in Design view. Dreamweaver normally deletes it automatically as soon as you start typing or insert anything into the paragraph.
Note: Figure 4 is from the Creative Cloud 12.1 update. The options are slightly different in earlier versions of Dreamweaver. After the first time, Dreamweaver remembers your most recent choice. To choose a different option, click the small down arrow to the right of the icon in the Insert panel.
Alternatively, choose Insert > Image or use the keyboard shortcut Ctrl+Alt+I (Windows) or Cmd+Opt+I (Mac OS X).
imagesfolder, select the car.jpg file, and click OK (Windows) or Choose (Mac OS X).
The image appears in Design view, and Dreamweaver inserts the necessary HTML in the underlying code, removing the nonbreaking space in the process (see Figure 5).
The Property inspector is context-sensitive. Since you have the new image selected, it displays the most important properties for the car.jpg image. You can see that the Property inspector displays the file path (Src) to the image, the alternate text (Alt) that you specified in the Image Tag Accessibility Attributes dialog box, and the width (W) and height (H) of the image (see Figure 6). There are also options for giving the image an ID, converting it into a link or image map, and some simple image editing tools. See Edit images in Dreamweaver in the Help documentation for details of the available tools.
Note too that the
<img> tag is selected in the Tag selector (at the bottom of the Document window) — yet another way that Dreamweaver communicates the precise selection of page assets.
Now you’re ready to add the remaining images.
To insert an image by dragging:
<div>. Make sure the insertion point remains inside the
imagesfolder) and drag it to the insertion point in the center_column
<div>(see Figure 7).
Note: Make sure you drag the data_addict.jpg to the insertion point at the top of the center_column
<div>. It's easy to mistakenly drop the image in the lower half of the
<div> when dragging.
To insert an image from the Assets panel:
<div>. Make sure the insertion point remains inside the
The Assets panel displays assets for the site associated with the active document in the Document window. In the screen shot, you can see that the Assets panel displays the selected image asset in the preview area.
For more information on working with the Assets panel, see Working with Assets in Dreamweaver Help.
Now you'll add text to the columns. You can type text directly in the Document window or you can copy and paste text from other sources (such as Microsoft Word or plain text files). Later, you'll use CSS to format the text.
assetsfolder and double-click the file's icon to open it in Dreamweaver.
You'll notice that this window is in Code view and that the Split, Design, and Live buttons are disabled (see Figure 10) because it’s not an HTML file.
<div>below the car image, placing the insertion point in the same place where you created space earlier (see Figure 11).
The text is displayed in the
<div> (see Figure 12).
The text automatically inherits the font style that you set on the <body> element in Part 3 of this tutorial series. It needs some more formatting, but you’ll come back to that later.
<div>below the data image, placing the insertion point in the same place where you created space earlier.
Xin its tab. (The X is on the left in the Mac version of Dreamweaver, and on the right in the Windows version.)
<div>below the helmet image, placing the insertion point in the same place where you created space earlier.
Your three columns are now filled with text (see Figure 13).
Beginners often create class rules and apply them to each block of text, but that’s a very inefficient approach. It can also create problems for search engines, which rely on the HTML markup to understand how the content is structured. In Part 2, Creating the page structure, you used the Format pop-up menu in the Property inspector to format the main Check heading as Heading 1, which Dreamweaver wrapped in
<h1> tags. The Format menu offers six levels of headings, which wrap the selected text in
<h2>, and similarly named tags through to
<h6>. Browsers automatically display text in these tags in bold, progressively decreasing the font size for each level, with
<h6> being the smallest. Inexperienced designers often use these heading tags to format bold text of a particular size, not realizing that search engines rely on these tags to determine the importance of the text inside them. Broadly speaking, a page should have one
<h1> heading at the top, with
<h2> tags introducing the next level of content, and
<h3> tags used for subheadings. You rarely need to use
<h6>. As you have already learned, you can use CSS to change the default look of headings and other text. So, there’s no reason to misuse heading tags. CSS gives you much greater control over the look of text.
Note: The new HTML5 standard proposes using
<h1> tags for the main heading in each section of a page, but this currently creates problems for search engines and assistive technology for the blind. For the foreseeable future, it’s best to stick with the hierarchy of headings I’ve just described.
The text that you copied from the main.txt file contains line breaks, but there’s no distinction between the headings and the rest of the text. In the following steps you’ll fix that, starting with the main_text
<div> that’s superimposed on the main image.
<div>to position the insertion point at the end of the first line (after "OPERATIVE WORDS"). Notice there’s a heavy blue border around the
<div>with a small rectangle at the top-left corner, as shown in Figure 14.
This indicates that the element is absolutely positioned. The rectangle at the top-left is a handle that lets you drag the element to a different position, changing the offsets in your style sheet. Although some designers find this useful, there’s a danger of accidentally moving an absolutely positioned element when it’s selected in Design view. Keep clear of the handle when working with absolutely positioned elements.
<div>and the phrase "OPERATIVE WORDS." An even larger gap appears beneath it.
When you pasted the text from main.txt, Dreamweaver placed it between the
<div> tags. Pressing Enter/Return at the end of the first line split the text into two paragraphs. Browsers automatically add to paragraphs a top and bottom margin equivalent to the height of one line. That’s why the gap appeared at the top of the
The larger gap below the phrase "OPERATIVE WORDS" is caused by the
<br> tag before the word "Stumbling." The
<br> tag causes a line break in text. Dreamweaver replaced the newline characters in the main.txt file with
<br> tags when you pasted the text into Design view.
<br>tag, in Design view press the keyboard down arrow once to move the insertion point in front of the "S" of "Stumbling" and press Backspace. The
<br>tag disappears, and the distance between the paragraphs is reduced.
Note: Although paragraphs have default top and bottom margins, the vertical space between two paragraphs is the equivalent of only one line because adjacent vertical margins merge to the height of the largest one. (Remember, this is what caused the main heading to push the header
<div> away from the top of the page in Part 3.)
Some web designers who don’t like the space between paragraphs use the keyboard shortcut Shift+Enter/Shift+Return to insert
<br> tags all the time, but this is extremely bad practice. The HTML markup should reflect the logical structure of the page content. You can easily adjust the vertical distance between paragraphs by changing the margin properties in CSS.
<br>tag by pressing the down arrow once to move the insertion point in front of "The" and pressing Backspace.
<div>. The first two need to be formatted as Heading 2 and Heading 3 respectively.
<p>tags around "OPERATIVE WORDS" to
<p>tags around "Stumbling into Mark S.’s Inner Circle" change to
<div>moves down below its correct position. Design view gives only an approximate rendering of the page layout.
#main_texth3 as the value for Selector Name. It doesn’t need to be so specific, so click Less Specific twice to change it to
#main_text h2, and click OK.
<div>also needs adjusting. Click anywhere inside the paragraph, and click the New CSS Rule icon in the CSS Styles panel.
#main_textp. Then click OK to open the CSS Rule Definition dialog box.
14px. Then type 1.2 in the Line-height field and select
multiplefrom the pop-up menu alongside (see Figure 17).
<div>is now formatted, but there is no space around the text (see Figure 18).
Note: If the paragraph at the bottom of the main_text
<div> looks squashed up, you probably set the value of Line-height to
1.2px. Reopen the CSS Rule Definition dialog box, and select multiple from the menu to the right of the Line-height field. Although you can use pixel values for the
line-height property, using a
multiple produces more consistent results.
#main_textin the All Rules pane of the CSS Styles panel, and click Add Property in the lower pane.
<div>(see Figure 19).
All modern browsers support CSS effects that would have involved complex structures and background images until very recently. Two very simple effects are giving an element a translucent background and rounded corners. The effects won’t be seen by anyone using an old browser, such as Internet Explorer 8 or earlier. But that’s no reason to avoid giving users of modern browsers an enhanced experience.
To create a translucent background, you need to specify the color using what’s known as RGBA format. RGB represents the red, green, and blue components of the color. The A represents the color’s alpha transparency, expressed as a value between 0 (fully transparent) and 1 (fully opaque). Because older browsers don’t understand RGBA format, you need to specify two background colors: the first using hexadecimal or RGB format, which is used by old browsers; the second using RGBA, which overrides the first value in modern browsers. Old browsers don’t understand the second value, so they ignore it.
#main_textin the All Rules pane of the CSS Styles panel, right-click, and select Go To Code from the context menu.
#main_textstyle rule (see Figure 20).
background-colordeclaration (line 74 in Figure 20).
background. (Don’t select
background-colorbecause of a bug in old versions of Internet Explorer.)
Note: The Color Format submenu is not available in Dreamweaver CS5 or earlier. You need to type the RGBA value manually in older versions of Dreamweaver.
rgba(255,255,255,1). Add a semicolon after the value.
Note: The semicolon is extremely important. If you forget it, the
#main_text rule is invalid and will be ignored by browsers.
1inside the parentheses to 0.8.
Note: Dreamweaver remembers your most recent choice for Color Format. You’ll need to remember to switch back to hexadecimal or RGB format when setting other colors. Otherwise, old browsers won’t render them.
#main_textis still selected in the All Rules pane of the CSS Styles panel, and click Add Property in the lower pane.
border-radius. This adds a little icon that looks like a plus sign and triangle in the value field on the right.
<div>become more and more rounded (see Figure 23).
10pxlooks good to me), click outside the panel to close it.
To fix the text in the three columns at the bottom of the page, you need to separate the headings from the rest of the text in the same way as in the main_text
<div>, place the insertion point after the ® symbol at the end of the first line, and press Enter (Windows) or Return (Mac).
<h2>heading in the main_text
<div>. The text is black, and it still has a top margin that separates it from the image of the car (see Figure 24).
This is because the
#main_text h2 style rule affects only
<h2> headings in the
<div> with the ID main_text.
<div>to format the remaining headings (see Figure 25).
The home page of the Check Magazine site is almost complete. In Part 5: Adding another page, you’ll create and link to a second page that uses most of the same styles, but looks very different.
Tutorials and samples