| |
Your First Site (p2) - Dreamweaver Tutorial
| Dreamweaver: Your First Site (Part 2, the Editor Window)
Tim Carden | 1 | | | • tutorial written with: Ultradev 4 (win) • works with other versions of Dreamweaver • assumes basic site management | Make sure you have completed part one of this tutorial first to set up your site appropriately. This tutorial takes a first look at the basic page editing tools in Dreamweaver. Note that these tutorials are written using Dreamweaver Ultradev which is the same as Dreamweaver only with some additional extensions. Some icons and dialog boxes are different between the two programs — just look for the most similar option in your version. You will need your site window open. To open the site window, if it is not already open (look on your Windows Taskbar for a Dreamweaver window call "Site") select Window | Site Files from any open window, or press F8. The Site window will open. Load your "NewDWCreations" site by selecting it from the Site drop-down list in the site window. |  | 2 | | To open a file into the editor, simply double-click on it. Do this now on the default.htm page. The blank page will open into the Dreamweaver editor window. |  | 3 | | You can edit this page using the following tools: - Typing and clicking directly in the editor window
- Switching to source view and editing the HTML source code
- Changing properties using the properties window and various floating palettes
- Adding new elements using the Objects toolbar.
|  | 4 | | One of the first and most important aspects of a page is the page title and body properties. We will set these first. There are many ways to set the body properties, the following is a method that will work for most other elements as well. At the bottom of the editor window will be the text "<body>". If you click on this, Dreamweaver will select the entire page body. The "<body>" text on the status bar will go bold to indicate it is selected.  T I P | This is one of most useful and intuitive interface features of Dreamweaver. As you add elements to the page and nest tables within tables, you can use the tags at the bottom of the page to select the exact element you want to edit. | |  | 5 | | The most efficient edits are done via the properties window. You can open this by selecting Window | Properties (Ctrl+F3). You will note that at the left-hand side of the window there are two vertical tabs. Click on the second one to activate properties matrix. This lets you set all attributes for the selected element. |  | 6 | | You can select attributes from the first column and give them values in the second column. For example, but default the bgcolor attribute (the page's background color) is set to #FFFFFF (white). You can change this by clicking on the white color swatch on the far right, next to the #FFFFFF. For this page we will set the background to black and the text to white. |   | 7 | | To set the page title, select the text in the text box labeled "Title" at the top of the editor window. Type a new title (call this page "Welcome to NewDWCreations") and press Enter to set it. Press Ctrl+S to save your file.  T I P | You can also set the page properties by selecting Modify | Page Properties... (Ctrl + J). In this dialog box you can set most common attributes for the page including the title. | |  What did you think? Did you like this tutorial? Was it easy to follow? Do you have suggestions for future tutorials? Have you seen an effect in Print, web or Flash that you would like to know how to achieve? Please feel free to contact me (Tim) on tiem@healthposts.com.au with your Corel technique query. Note that unfortunately I do not have the resources to offer one-to-one technical support but your query may become the basis for a future tutorial. | Copyright 2002, Tim Carden, All Rights Reserved |
|