Introduction To Dreamweaver 8: Tutorial 1

TUTORIAL
Introduction to Dreamweaver 8: Tutorial 1
Adobe Macromedia Dreamweaver 8 is a Web authoring

application that allows you to create and publish Web sites. Dreamweaver offers some handy productivity features, including the ability to edit the HTML and the Web page document side by side, the ability to access reference material, automatic generation of JavaScript for commonly used interactivity, easy generation of Flash text and Flash buttons, and publishing using built-in FTP. Dreamweaver can be used to organize Web page files and can automatically change links when you rename or move files within your Dreamweaver site. Dreamweaver also can check your pages for Section 508 and WAI accessibility compliance. Although it is beyond the scope of these tutorials, Dreamweaver supports the advanced Web developer with point-and-click generation of server-side processing using ColdFusion, ASP.NET, ASP, and PHP Web applications. A Web site created with Dreamweaver can be published to any Web server. In Tutorial 1, you will become familiar with the Dreamweaver graphical user interface and create your first Dreamweaver site.
T-1
T-2
Tutorial 1
Introduction to Dreamweaver 8
T1.1
The Dreamweaver Workspace

The Dreamweaver workspace as it initially displays is shown in Figure T1.1. It shows a page that provides links to recent documents, options for creating new documents, design samples, and links to tours and tutorials to help you become comfortable using Dreamweaver.
Figure T1.1 The Dreamweaver workspace
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
Figure T1.2 The document window
The Document Window

You edit Web pages in the document window. Figure T1.2 shows the document window that is part of the Dreamweaver workspace. The document window can show the Code View and the Design View simultaneously, which allows you to move back and forth between coding and designing quite easily. As you view Figure T1.3, notice that the top half of the document window displays the Code View. The code created by Dreamweaver when it is first installed is HTML, not
Figure T1.3 The document window in split view
T-4
Tutorial 1
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.
Figure T1.4 The bottom panel of the document window
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.
Figure T1.5 Configuring the window size
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

The document toolbar, shown in Figure T1.6, is located above the document window in the Dreamweaver workspace. It contains buttons and pop-up menus that provide different views of the document window (such as Design View and Code View), a text box to configure the page title, and some operations, such as previewing in a browser.
Figure T1.6 The document toolbar
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.
Figure T1.7 Code View button
The Split Screen View button, shown in Figure T1.8 displays both Code View and Design View in the document window.
Figure T1.8 Split Screen View button
Figure T1.9 shows the Design View button. This changes the display in the document window to the Design View.
Figure T1.9 Design View button
T-6
Tutorial 1
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.
Figure T1.10 Validate markup button
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.
The Menu Bar

The menu bar, shown in Figure T1.12, controls functions such as saving files, copying, inserting images, modifying tables, formatting text, selecting commands, configuring the site, and displaying various windows. Dreamweaver Help is also accessed from the menu bar and contains searchable help files. This area also includes a Whats New presentation and tutorials to get you started with the application.
Figure T1.12 The menu bar
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
The Insert Bar

The insert bar, shown in Figure T1.14, contains buttons for inserting components such as links, images, tables, and forms into a document. For example, you can insert a table by clicking the Table button in the insert bar. We will examine the insert bar in detail later in this tutorial. If the insert bar is not currently displayed, select WindowInsert from the menu bar.
Figure T1.14 The insert bar
This concludes our brief tour of the document window and its related areas. Next, we discuss another important panelthe property inspector.
The Property Inspector

As you work with Dreamweaver, you may find that the property inspector (see Figure T1.15) is most useful. If the property inspector is not visible in your Dreamweaver workspace, select WindowProperties from the menu bar. The property inspector is
T-8
Tutorial 1
Figure T1.15 The property inspector
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.17 The Code View showing the embedded CSS
Figure T1.18 Click this button to display additional properties in the property inspector
Explore the Insert Bar

If the insert bar is not visible in your Dreamweaver workspace, select WindowInsert from the menu bar. As shown in Figure T1.19, the insert bar has a number of options displayed.
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
Figure T1.20 The insert bar category menu
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.
Figure T1.21 The Forms tab on the insert bar
The Panel Groups

The panel groups are located on the right side of the Dreamweaver workspace and provide additional functions under a number of categories, including CSS, Files, and History. Your display may appear different from Figure T1.22. If so, use the Window option on the menu bar to display panels. For example, select WindowCSS to add the CSS panel to the panel groups area.
T1.1
T-11
Figure T1.22 The panel groups
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
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
Creating a New Dreamweaver Site

While you can edit Web page files outside of a Dreamweaver site, it is recommended that you work within a Dreamweaver Web sitereferred to here simply as the site. Each time that Dreamweaver is launched it displays an empty untitled document in the document window. If you do not need this document, click the Close button ( ) at the upper-right corner of the document window. Since you will be creating a Dreamweaver site in this tutorial, close the untitled document now.
T1.3
Defining the Dreamweaver Site

You are ready to define your first Dreamweaver site. Using the menu bar, select Site Manage Sites as shown in Figure T1.24. This will display the Manage Sites dialog box, as shown in Figure T1.25. Expect your list of sites to look different.
Figure T1.24 Using the Site option on the menu bar
Figure T1.25 Your Manage Sites dialog box will have different sites listed
T1.3
Defining the Dreamweaver Site
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.
Figure T1.26 The Site Definition dialog box
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
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.
Figure T1.28 Name your new folder
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
Adding a Page to a Dreamweaver Site
T-15
Figure T1.29 HelloWorld is highlighted on the Manage Sites dialog box
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.
Figure T1.30 The Files panel for HelloWorld
T1.4

There are a number of ways to perform most tasks using Dreamweaver, including adding a page to a site. In this part of the tutorial, we will use the Files panel to add a Web page document to the Dreamweaver site that you just defined. The icon on the top-right of the Files panel is called the View Options icon. See Figure T1.31. Click this icon to display the View Options menu, as shown in Figure T1.32.
Figure T1.31 Select the View Options menu
T-16
Tutorial 1
Using the menu shown in Figure T1.32, select FileNew File.
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.
Figure T1.33 The new file is added as untitled.htm
Rename the file index.htm, as shown in Figure T1.34.
Figure T1.34 The new file has been renamed index.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
Figure T1.35 The document window now contains index.htm
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.
Figure T1.36 Converting a document to XHTML
Now the Code View should contain XHTML, as shown in Figure T1.37.
T-18
Tutorial 1
Figure T1.37 The Code View now uses XHTML
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.
Figure T1.38 Select the New Document category under Preferences
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
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
Exploring Page Properties

To access the Page Properties dialog box, use the menu bar and select ModifyPage Properties. See Figure T1.41.
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
Exploring Page Properties
T-21
Figure T1.42 Page Properties dialog box
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.
Figure T1.44 The index.htm page with a background color
T-22
Tutorial 1
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
Exploring the Property Inspector

Lets begin by using the property inspector (Figure T1.45) to modify the text on the page.
Figure T1.45 The property inspector
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
Font list box Style list box Size list box
Bold button Italics button Alignment buttons Dreamweaver Help button Hyperlink and Target text boxes
Unordered List button Ordered List button
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
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.
Figure T1.47 Setting additional properties with the property inspector
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.
Figure T1.48 The property inspector has configured a style
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.
Figure T1.49 Renaming the default style
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
Figure T1.50 Use the Rename Style dialog box
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.
Figure T1.51 The property inspector with the named 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.
Figure T1.52 Code View of Hello World page
T-26
Tutorial 1
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
Opening a Defined Site

When you launch Dreamweaver it automatically displays the Files panel with the defined site you most recently worked with. Since you just worked with the HelloWorld site, it should display in the Files panel. Double-click the index.htm file to open the page in the document window. When you are finished, close the document and exit Dreamweaver. If you work with multiple sites you need to know how to select a particular Dreamweaver site. As shown in Figure T1.53, use the Files panel, select the Site dropdown list to view the available sites, and select the site you need to work with.
Figure T1.53 Using the Files panel to select a site
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
Figure T1.54 Using the Site panel to select a site
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!

Introduction To Dreamweaver 8: Tutorial 1

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Introduction To Dreamweaver 8: Tutorial 1

Загружено:

Авторское право:

Доступные форматы

TUTORIAL

Introduction to Dreamweaver 8: Tutorial 1

Adobe Macromedia Dreamweaver 8 is a Web authoring

The Dreamweaver Workspace

Figure T1.1 The Dreamweaver workspace

The Dreamweaver Workspace

Figure T1.2 The document window

The Document Window

Figure T1.3 The document window in split view

Figure T1.4 The bottom panel of the document window

Figure T1.5 Configuring the window size

The Dreamweaver Workspace

The Document Toolbar

Figure T1.6 The document toolbar

Figure T1.7 Code View button

Figure T1.8 Split Screen View button

Figure T1.9 Design View button

Figure T1.10 Validate markup button

The Menu Bar

Figure T1.12 The menu bar

The Dreamweaver Workspace

The Insert Bar

Figure T1.14 The insert bar

The Property Inspector

Figure T1.15 The property inspector

The Dreamweaver Workspace

Figure T1.17 The Code View showing the embedded CSS

Explore the Insert Bar

Figure T1.20 The insert bar category menu

Figure T1.21 The Forms tab on the insert bar

The Panel Groups

The Dreamweaver Workspace

Figure T1.22 The panel groups

Creating a New Dreamweaver Site

Defining the Dreamweaver Site

Figure T1.24 Using the Site option on the menu bar

Defining the Dreamweaver Site

Figure T1.26 The Site Definition dialog box

Figure T1.28 Name your new folder

Adding a Page to a Dreamweaver Site

Figure T1.29 HelloWorld is highlighted on the Manage Sites dialog box

Figure T1.30 The Files panel for HelloWorld

Adding a Page to a Dreamweaver Site

Figure T1.31 Select the View Options menu

Using the menu shown in Figure T1.32, select FileNew File.

Figure T1.33 The new file is added as untitled.htm

Rename the file index.htm, as shown in Figure T1.34.

Figure T1.34 The new file has been renamed index.htm

Adding a Page to a Dreamweaver Site

Figure T1.35 The document window now contains index.htm

Figure T1.36 Converting a document to XHTML

Figure T1.37 The Code View now uses XHTML

Figure T1.38 Select the New Document category under Preferences

Adding a Page to a Dreamweaver Site

Exploring Page Properties

Exploring Page Properties

Figure T1.42 Page Properties dialog box

Figure T1.44 The index.htm page with a background color

Exploring the Property Inspector

Figure T1.45 The property inspector

Exploring the Property Inspector

Font list box Style list box Size list box