Part 1: Dreamweaver Overview
This section introduces the application and explains how to create and save a simple webpage. It covers:
When you run Dreamweaver for the first time, you will be asked to choose between Coder's View and Designer's View. Regardless of which view-type you choose, you will be able to switch back and forth between these three views:
- Code view shows the actual contents of the document, the plain text HTML (or other scripting language) that is sent to the browser for display. Dreamweaver color-codes this text to help you distinguish between tags and text that will display as content.
- Design view shows how the document will appear. Keep in mind that Dreamweaver is not an actual web browser, so sometimes the way things display in Design view is not always how they end up in the browser.
- Split view shows code in one half of the Document window and the design preview in the other half.
At the top of the Dreamweaver program you will see a Menu bar that gives you access to all the Dreamweaver tools and functions. The rest of the Dreamweaver workspace is setup as a series of panels. The arrangement of the panels is slightly different for Mac and Windows (see Figures 1 and 2). You can also move these windows around as you work.
Figure 1: Dreamweaver workspace in Windows XP
Figure 2: Dreamweaver workspace in Mac OS 10
Most of the time you will be working in the Document window (see Figure 3). This is where you type your code or text and insert page elements like images, links, and tables. At the top of the Document window is the Document toolbar , where you can click the buttons to switch between Code , Split , and Design views, define the title of your page, and access a few other tools.
Figure 3: Document window and Document toolbar
The easiest way to add elements to your page is by using the Insert bar (see Figure 4). On this bar you will see icons representing many of the most common page elements, like link, named anchor, table, image, and comment. Click in the Document window where you want the element to appear, then click the appropriate button on the Insert bar . Voila, the element will be added to your page and you can change its properties further.
Figure 4: Insert bar
To change the properties of individual elements, you use the Properties panel (see Figure 5). The Properties panel will change depending upon what element you have selected, since different elements have different attributes. Click on the element you would like to edit, and then specify the settings in the Properties panel .
For instance, if you inserted an image, you could select it, and then specify its width, height, alignment, a URL to link to, and so on. Just choose what you want in the Properties panel , and Dreamweaver will insert the appropriate code.
Figure 5: Properties panel
Above or below the Properties panel , you will see the Results panel . This panel will probably be collapsed, unless you are running a Find/Replace search or checking your code for errors. In this case, the results of your search/check will display in the Results panel .
The Design panel allows you to control the appearance of your page using CSS (Cascading Style Sheets) (see Figure 6). Select the CSS Styles tab, and use the small buttons at the bottom to attach an external style sheet, add a new style, edit an existing style, or delete a style. Working with styles through the Design panel allows you to control all the attributes through dialog boxes instead of editing the CSS code.
Figure 6: Design panel
The Code panel has two tabs (see Figure 7). Snippets will give you bits of prewritten code that you can insert into your webpage. Reference provides guides to many web languages, including HTML, CSS, Javascript, and PHP. You can look up individual tags and attributes to find out what they do and how to use them. This is very handy!
Figure 7: Code panel
You probably won't use the Application panel at this point. It allows you to control settings for elements on dynamic webpages.
The Tag Inspector panel is also for more advanced editing. The Relevant CSS tab provides another way to edit styles for your webpage, but the interface is trickier. It's probably best to use the Design panel to edit styles unless you are very familiar with CSS attributes and values.
The Files panel is extremely useful (see Figure 8). This is where you can manage all your website files without having to leave Dreamweaver. It works much like Explorer (on Windows) or Finder (on Mac). You can create folders, copy, move, and rename files, and upload and download files to and from your remote server. Part 2 of this tutorial contains some instructions on using the Files panel .
Figure 8: Files panel
This ends our introductory tour of the Dreamweaver workspace. There are many panels, tools, and menu options, so be sure to explore on your own and consult the Dreamweaver Help (at far right of Menu bar ).
Follow these steps to create a simple webpage in Dreamweaver:
- On the Menu Bar , go to File > New.
- In the New Document dialog box, make sure the General tab is selected. Under Category choose Basic Page and under Basic Page choose HTML (see Figure 9). You can also choose whether your document will be standard HTML or XHTML compliant by checking the box in the bottom right.
Figure 9: the New Document dialog box
- Click Create and the new webpage will open in the Document Window .
- Give your page a title by clicking next to Title: on the Document Toolbar (it should currently say "Untited Document"). This is the title that will appear at the top of the web browser window when someone views your page. It does not appear on the page itself.
- Add content to your page by clicking in the Document Window and doing one of the following:
- Switch to Code view and type the HTML code.
- Click a button on the Insert Bar , fill out the information requested by the dialog box, and click OK.
- On the Menu Bar , go to the Insert Menu , select the desired element, fill out the information requested by the dialog box, and click OK.
- Customize the page content as desired by clicking on elements and using the Properties Panel . You can also switch back and forth between Code , Split , and Design views if desired.
- To save your webpage, go to the File Menu and choose Save as. Browse to the location on your computer where you would like to save this file. Type a name in the File name: box (see "Naming Tips" below). When finished, click Save.
Webpage Naming Tips |
Follow these conventions to give your webpage a workable name:
|
The way that a document displays in Dreamweaver isn't always how it appears in an actual web browser. Different browsers may display elements with slight differences, and some scripted or hidden elements won't appear in Dreamweaver. Before publishing your page, you should make sure it appears correctly in several web browsers.
To preview your webpage in an external browser, follow these steps:
- Go to File Menu > Preview in Browser and choose the browser you would like to use.
- If the browser you want to check isn't in the list, choose Edit browser list. and add the browser. Click the + (plus sign) and fill out the required information. Click OK, then click OK again.
- Your webpage should open in the external browser. Make note of any irregularities and return to Dreamweaver to make adjustments.
We recommend that you check your page on Windows in Internet Explorer and at least one Mozilla-based browser (Firefox, Mozilla, or Netscape) and check it on a Macintosh using Safari and at least one Mozilla-based browser. You want to be sure all visitors can see your page, regardless of their operating system or web browser.
Continue to Part 2: Site Management »
Last updated August 26, 2005 by haw