Professional Documents
Culture Documents
Introduction To Dreamweaver 8: Tutorial 1
Introduction To Dreamweaver 8: Tutorial 1
T-1
T-2
Tutorial 1
Introduction to Dreamweaver 8
T1.1
The Dreamweaver workspace features components designed to improve productivity, including the menu across the top of the window, an insert bar below the file menu, dockable panel groups on the right-hand side, and the property inspector in the lower portion of the window. This section will examine some commonly used components. On the opening page, locate the Create New column and click HTML to begin a new page and launch the document window. Your display should look similar to the one shown in Figure T1.2.
T1.1
T-3
T-4
Tutorial 1
Introduction to Dreamweaver 8
XHTML. One of the advantages of Dreamweaver is the ease of customization. You will learn to configure Dreamweaver to create XHTML later in this tutorial. The lower half of the document window displays the Design View, which is a WYSIWYG (what you see is what you get) editor. Notice the Code, Split, and Design buttons in the top bar (document toolbar) of the document window. Click the Split button and the split view displays, as shown in Figure T1.3. The bottom panel of the document window shown in Figure T1.4 contains the tag selector, window size, and document size/download information. The tag selector (on the left) displays the HTML tags associated with a selected element. Figure T1.4 shows that a <body> tag has been selected.
The Select tool arrow icon is the default cursor, which allows you to select elements on the page. The Hand tool allows you to scroll or move a page that is larger than the current document window. The Zoom tool magnifying glass icon allows you to zoom and enlarge the page in the document window. The Set Magnification drop-down list provides a way to change the size of the page displayed in the document window. The default is 100% normal page size. The window size pop-up menu displays the measurement of the document window in pixels. It includes a drop-down arrow that can be used to change the size of the document window quickly. See Figure T1.5 for a detailed view. This feature is helpful when designing for various screen resolutions.
The document size/download indicator, on the far right, displays the current size of the document and a download time of 28.8 Kbps. Figure T1.4 shows that the document file size is 1 K and that it will take 1 second to download.
T1.1
T-5
The document toolbar contains a variety of buttons and icons. You can place the mouse pointer over a button for a description of its purpose. The three buttons on the left control the view shown in the document window. The Code View button, shown in Figure T1.7 () is the shortcut key) changes the display in the document window to all code.
The Split Screen View button, shown in Figure T1.8 displays both Code View and Design View in the document window.
Figure T1.9 shows the Design View button. This changes the display in the document window to the Design View.
T-6
Tutorial 1
Introduction to Dreamweaver 8
The Title text box (shown in Figure T1.6) provides a convenient spot to modify the document title. The Validate Markup button (shown in Figure T1.10) will immediately test your code for correct syntax.
Other buttons that are useful on the document toolbar are the Preview/Debug in Browser button (Figure T1.10), the Refresh Design View, and the View Options buttons (Figure T1.11).
Figure T1.11 The Preview Debug in Browser, Refresh Design View, and View Options buttons
The Preview/Debug button allows you to configure and select the browsers in which you will test your Web pages. ' is the shortcut key to preview a Web page in a browser when you use Dreamweaver. The Refresh Design View will update the Design View with modifications typed in Code View and new versions of image files. The View Options button configures features including word wrap, line numbers, and rulers in the document window.
T1.1
T-7
FAQ
Does Dreamweaver have documentation for HTML, CSS, and JavaScript? Yes, Dreamweaver is bundled with a number of online reference manuals. Select WindowReference from the menu bar to display the Reference tab of the Results panel. The online references are context-sensitive and searchable. A partial screenshot of the OReilly HTML Reference panel is shown in Figure T1.13. What handy material to have at your fingertips!
Figure T1.13 The online reference can be found within the Results panel in the lower
portion of the Dreamweaver workspace
This concludes our brief tour of the document window and its related areas. Next, we discuss another important panelthe property inspector.
T-8
Tutorial 1
Introduction to Dreamweaver 8
context-sensitive and dynamic. Select an object, XHTML element, or string of text and its properties will be displayed in the property inspector. You can modify them and see the changes instantly in the document window. In the example shown in Figure T1.16, the text Hello World was highlighted and the property inspector was used to choose Arial font, size large, italic, bold, and the color red (#ff0000).
Figure T1.16 The document window Design View, tag selector, and property inspector
Review the property inspector and notice the style area. As the font face, size, and other properties were selected, Dreamweaver automatically created an embedded style sheet in the document and created a new style called style1 to contain the property settings. Dreamweaver 8 allows Web developers to configure CSS using a point-and-click method! Figure T1.17 shows the Code View containing the embedded style, style1. Later in the tutorial you will work through this process yourself and also configure a descriptive name for the styles you create. Some elements, such as images, have a large number of properties. The most commonly used properties are always displayed. There is a small trianglular button, shown in Figure T1.18, in the lower-right corner of the property inspector; click this when you need to access additional properties.
T1.1
T-9
Figure T1.18 Click this button to display additional properties in the property inspector
Figure T1.19 The insert bar is a tabbed interface with many options
The area at the left of the insert bar is a drop-down menu with the categories of Common, Layout, Forms, Text, HTML, Application, Flash elements, and Favorites. See Figure T1.20 for an example of this menu expanded.
T-10
Tutorial 1
Introduction to Dreamweaver 8
The category selected will determine which configuration buttons appear in the insert bar. To determine the function of a button, place the mouse over the button and wait for a brief description to appear. In Figure T1.19, the mouse was placed over a button with a picture. The description indicates that this is the Image button. The Image button is used to add an image to a Web page. This tutorial will concentrate on the most commonly used features of the insert bar. Common, shown in Figure T1.19, is used to work with a number of components including hyperlinks, e-mail links, named anchors, tables, layers, images, and media. You will work with many of these components in the tutorials. Text is used to configure text and to insert special characters such as a copyright symbol and a non-breaking space into a Web page. The Forms tab, shown in Figure T1.21, is used to create forms and form elements. You will use these and other panels as you complete the Dreamweaver tutorials.
T1.1
T-11
Figure T1.22 shows the panel groups in their closed position. Notice the expander arrow at the left side of each panel. To expand a panel, click this arrow. The CSS, Files, and History panels have been expanded in Figure T1.23.
Figure T1.23 The panel groups with CSS, History, and Files panels expanded
The Design panel is most often used to configure Cascading Style Sheets (CSS) and to add JavaScript behaviors to a Web page. The CSS panel configures Cascading Style Sheets (CSS). In Figure T1.23, the Current button on the CSS Styles tab was clicked to display the style1 rule created for the Hello World text.
T-12
Tutorial 1
Introduction to Dreamweaver 8
The Histor y panel displays a list of your recent actions within Dreamweaver, such as typing text or applying a font. These actions can be selected and replayed. The Files panel offers a Files tab, an Assets tab, and a Snippets tab. The Files tab is used to organize and work with Web site folders and files. The Assets tab is used to manage components of a Web site visually, including images, multimedia files, colors, and scripts. The Snippets tab is used to add common code snippets to a Web page. You have completed the whirlwind tour of the Dreamweaver workspace. This tour has touched on some of the commonly used windows, inspectors, and palettes. The next section explores using the Files panels Files tab to set up a Dreamweaver Web site.
T1.2
T1.3
Figure T1.25 Your Manage Sites dialog box will have different sites listed
T1.3
T-13
Select NewSite to display the Site Definition dialog box, as shown in Figure T1.26. The Site Definition dialog box, as shown in Figure T1.26, appears. If the Advanced tab is not already selected, click the Advanced tab. You will now configure properties of your Dreamweaver site.
You will use the Site Definition dialog box to configure the name, location, and preferences of your site. Configure the name of your site: type HelloWorld in the Site name text box. Configure the location of your site: click the folder icon next to the Local root folder text box. Drill down through your hard drive and/or removable drives and decide where you will add the new site. In the example, the new site folder will be located in the My Documents folder. See Figure T1.27.
T-14
Tutorial 1
Introduction to Dreamweaver 8
Figure T1.27 Once you have found the location for your new site folder, click the Create New Folder icon
Click the Create New Folder icon as shown in Figure T1.27 to create a new folder for your site. The dialog box shown in Figure T1.28 will display.
Name the folder HelloWorld and click Open. Click Select. The Site Definition dialog box redisplays with your new information. Continue with your configurations. Leave the Refresh Local File List Automatically box checked, do not enter a Default images folder, do not enter an HTTP address, and leave the Enable Cache box checked. The site cache keeps track of links and assets in your site so that Dreamweaver can update them quickly. Click OK and the Manage Sites dialog box displays with your new site highlighted, as shown in Figure T1.29. Click Done.
T1.4
T-15
The Files panel, as shown in Figure T1.30, displays. This panel provides a means to create, view, organize, and publish your site. It also provides quick access to the Windows desktop. The Files panel currently shows that your site has no pages. The next step is to add a page to your site.
T1.4
T-16
Tutorial 1
Introduction to Dreamweaver 8
Figure T1.32 The View Options menu for the Files panel displays
The Files panel (see Figure T1.33) shows the new file as untitled.htm.
Note: A new file can also be created by using the menu bar. Select FileNew to open the New Document dialog box. Select Basic Page and click the Create button. Double-click index.htm to open it in the document window, as shown in Figure T1.35. Notice how the folder name and file name appear in the title bar of the document window.
T1.4
T-17
Notice that the Code View shows HTML. Since XHTML is the most recent version of HTML, many Web developers prefer to follow XHTML coding syntax. It is easy to configure Dreamweaver to use XHTML instead. Use the menu bar and select FileConvertXHTML, as shown in Figure T1.36.
Now the Code View should contain XHTML, as shown in Figure T1.37.
T-18
Tutorial 1
Introduction to Dreamweaver 8
Dreamweavers preferences can be changed to use XHTML always. Use the menu bar and select EditPreferences to display the Preferences dialog box. Select the New Document category, as shown in Figure T1.38.
Leave the default document type as HTML, but make sure that the Default Document Type (DTD) is set to XHTML 1.0 Transitional. Click OK. From this point on, Dreamweaver will use XHTML 1.0 Transitional syntax for all new Web page documents. Now that the code is set to XHTML, you are ready to use the Dreamweaver workspace to edit the page. Lets start by adding a title. A quick way to create or edit a page title is to type directly in the Title text box in the Document toolbar. Type Hello from (your last name here). Next, click anywhere in the white space of the document window and you should see the page title update in the text box and display in the title bar of the document window, as shown in Figure T1.39.
T1.4
T-19
Figure T1.39 Use the Title text box in the document toolbar to modify page titles
Place your cursor in the Design View section of the document window, type Hello from Dreamweaver and notice that the Code View updates automatically. If you press the e key after your text, Dreamweaver will place paragraph tags around your message and create a new empty paragraph below it. See Figure T1.40.
Figure T1.40 Dreamweaver writes the code right before your eyes
You have been working in the split screen view during this tutorial. The split screen view is one of the most powerful features of Dreamweaverany change you make to either view (Code or Design) is immediately applied to the other. XHTML coders like this feature because it allows them to see the effect of a tag immediately. Remember that you can change the view using the Code View button (Figure T1.7) and Design View (Figure T1.9) on the Document toolbar.
T-20
Tutorial 1
Introduction to Dreamweaver 8
Most of the code should be familiar to you. The page begins and ends with <html> tags, and contains <head>, <title>, and <body> tags. Remember that Dreamweaver allows you to modify the code, even to change the syntax to XHTML. Lets concentrate on what Dreamweaver generated for you. The page title you configured was converted to XHTML code. Dreamweaver added a meta tag to identify the character set and encoding of the XHTML. As you create more complex Web pages with Dreamweaver in later tutorials, you will notice other tags added by Dreamweaver. Feel free to modify the code if you need to. As you move your cursor in one view, it is moved in the other. Experiment by adding an exclamation point after the Hello from Dreamweaver text. Notice that the exclamation point is displayed in both views. Delete the exclamation point. You will have opportunities in later tutorials to work more with Dreamweavers split screen feature. Save the page by selecting FileSave. Test the page in a browser. Dreamweaver provides two shortcuts for this task:
G G
Press the ' key. Click the Preview/Debug in Browser button (Figure T1.10) in the Document toolbar.
Return to Dreamweaver and click the Design View button (Figure T1.9) in the Document toolbar. In the next section you will explore the Page Properties dialog box and the property inspector while you modify your page.
T1.5
Figure T1.41 Selecting Page Properties The Page Properties dialog box appears, as shown in Figure T1.42. This is a convenient tool for applying properties such as title, background image, text and link colors, and margins to a Web page. Lets change the background color. If you have an exact hexadecimal color value, you can type it directly in the text box. Many times you dont have a value or you need to match the color of part of an image or another Web page. This is when the color palette is convenient. Click the Background color drop-down box to display the color palette. When it first displays, the color palette shows an eyedropper tool that can be used to match color on another portion of the desktop. To use the eyedropper, move it to an area that is not on the color palette and clickyour color value is automatically entered in the background text box.
T1.5
T-21
The color palette is displayed in Figure T1.43. Another method used to choose a color is to place the cursor over a color box in the color palette and clickyour color value is automatically entered in the background text box.
Figure T1.43 The color palette Choose a light tan (#CCCC99) or another pleasing light color. Click OK to close the Page Properties dialog box. Your page should look similar to the one shown in Figure T1.44.
T-22
Tutorial 1
Introduction to Dreamweaver 8
By now you should be familiar with the Page Properties dialog box. Another method for displaying the Page Properties dialog box is to right-click anywhere in the Design View and select Page Properties from the pop-up menu. The next section continues your Dreamweaver tour as you explore the property inspector.
T1.6
If the property inspector is not currently displayed, select WindowProperties from the menu bar. Using the Design View document window, select the text Hello from Dreamweaver by highlighting it. Use the property inspector to change the format from Paragraph to Heading 3 by using the drop-down list next to Format. Your page should look similar to the one shown in Figure T1.46.
Figure T1.46 Changes made in the property inspector are immediately applied
to the Design View
Now might be a good time to discuss the Undo feature of Dreamweaver. When you need to back out of a change, use the menu bar and select EditUndo. Before you continue formatting the text, lets take a quick tour of the property inspector.
T1.6
T-23
As mentioned earlier, the property inspector displays different properties depending on what object is selected. Figure T1.46 shows the Property Inspector panel when text is selected. The parts of the property inspector are listed in Table T1.1.
Table T1.1 Property Inspector Components Component Format list box Purpose Configures the block level format; select None (browser default), Paragraph (puts text in a paragraph), Headings 1 through 6, or Preformatted (places text between <pre> tags) Configures a font for text display Configures a style (CSS) Configures the text size; select None (browser default) or a numeric text size Displays the CSS panel Text color palette Arrow is used to select a color visually, text box accepts typed in color value Toggles text to bold and back to normal Toggles text to italic and back to normal Aligns text to the left, center, or right Launches Dreamweaver Help Configures hyperlinks and targets; type directly in the link and target boxes, click the arrow to display a list of links (or targets) already used on the site, or display a file list by clicking on the folder icon Creates a bulleted (unordered) list Creates a numbered (ordered) list
Bold button Italics button Alignment buttons Dreamweaver Help button Hyperlink and Target text boxes
Text Outdent and Text Indent buttons Increases or decreases the indentation of text Quick Tag Editor Invokes the Quick Tag Editor (not used in this text) Displays the Page Properties dialog box
Now that you are familiar with the property inspector, set the font to Arial, Helvetica, sans-serif (note how Dreamweaver automatically provides backup fonts in case your visitor does not have the primary font installed). Do not set the size for your text. Click
T-24
Tutorial 1
Introduction to Dreamweaver 8
the Color Palette icon to set the text color to a dark blue. Center the text with the center alignment button. Next, remove the highlight from the text by clicking anywhere else on the document window. Your page should look similar to the sample shown in Figure T1.47.
Click anywhere on the heading and examine the property inspector. Your page should look similar to the one shown in Figure T1.48. Notice the configuration of style1.
Dreamweaver has created a default style name (style1) for you. You will find it easier to work with CSS if the names of the style rules are descriptive. Rename the style1 to MainHead. Click in the Style list box to display a drop-down menu and select Rename, as shown in Figure T1.49.
The Rename Style dialog box will display. Enter the new style name (MainHead) as shown in Figure T1.50. Click OK.
T1.6
T-25
The property inspector now shows MainHead as the name of the style for the heading on your page. See Figure T1.51. Notice also how the name of the style is displayed with the characteristics of the style.
Click the Code View icon to examine the XHTML and CSS that Dreamweaver created. It should be similar to the one shown in Figure T1.52. Notice how the background color for the page is also configured with CSS. Take a moment to examine it.
T-26
Tutorial 1
Introduction to Dreamweaver 8
When you are ready, save your page (FileSave) and test it in a browser. (Did you remember the ' shortcut to preview your page?) This tutorial continues with an example of closing your Web page document, exiting Dreamweaver, launching Dreamweaver, and accessing your Dreamweaver site.
T1.7
Exiting Dreamweaver
To close a Web page document, use the menu bar and select FileClose or click the Close ( ) button at the upper-right corner of the document window. To exit Dreamweaver, use the menu bar and select FileExit or click the Close ( ) button at the upper-right corner of the Dreamweaver workspace. When you relaunch Dreamweaver, the most recent site you worked on will display in the Site panel. If you have not already done so, close the index.htm file and exit Dreamweaver.
T1.8
Alternatively, you can use the menu bar, select SiteManage Sites to display the Manage Sites dialog box, as shown in Figure T1.54, then select the name of your site, and click Done.
Summary
T-27
Summary
By now you should be familiar with creating a site, modifying a Web page, previewing a Web page in a browser, and closing and reopening a site. A solid foundation in these skills will help you with other features of Dreamweaver. Dreamweaver Tutorials 2 and 3 introduce topics such as adding pages and images, using lists and tables, creating hyperlinks, and adding Flash buttons. You have completed Adobe Macromedia Dreamweaver 8 Tutorial 1!