Designer Today - Graphic Design Magazine
Designer Today is the premiere graphic design magazine and tutorial resource for designers

Web Design Tutorials


 


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



Be the first to bookmark or share this

 

 

 



Web Design Tutorial Section

In this section you will find excellent web design tutorials and training, as well as web design tips, tricks, techniques and effects. Our writers work hard to provide free web design training for you! Our tutorials cover several different html editors and many styles and types of web design and programming. Visit the Designer Today resource directory for more web design and web graphics tutorial resources. You can also find more Web Design Tutorials at Tutorials Today.










Fun Meme

Designer Community Forum

Monthly Newsletter


Search and register domains at 123 Domain Names UK, Domain Name Registration UK
and the
UK Domain Name Registration Centre

Designer Today - The Graphic Design Magazine for 2D and 3D graphic designers Hundreds of graphic design
and graphic design software tutorials, product reviews and design articles for the graphic designer


Graphic Design Articles | Graphic Design Newsletter | Graphic Design Training  
Photoshop Tutorials | Illustrator Tutorials | After Effects Tutorials


Also be sure to visit
Fun Meme Jokes and Humor | Favorite {fvrit} Blog |
Poser World | The Poser Gazette
Favorite Media |
Stock 3D wiki | Statesboro Magazine | Five Million Dots | Small Business Consumer

Privacy Policy | Website Copyright and Terms & Agreement | Contact | Information | Site Map | Advertise | Submissions

DesignerToday.com runs on a Content Management System by GMP Services
Copyright © 1998-2008, GMP Services, Inc. -
Media Publishers of Statesboro Georgia, All Rights Reserved