 |
WEB DESIGN SKILLSModule Study Guide
|
Session 3
Introduction to Dreamweaver
On this page:
What is Dreamweaver?
"Dreamweaver is a WYSIWYG (What You See Is What You Get) programme used for creating .html pages. This means that you don't need to write a single line of html code yourself!
As a professional HTML editor it can be used for visually designing and managing Web sites and pages.
Dreamweaver's visual editing features also let you quickly
add design and functionality to your pages. You can view all your site elements
or assets and drag them from an easy-to-use panel directly into a document."
Ref: Using Dreamweaver - Macromedia
Define Site using Dreamweaver
Dreamweaver has a facility called 'define site' which defines where the 'root folder' is located on your hard drive. This allows it to maintain access to your files and update any changes that occur.
You should always define a site whenever you open Dreamweaver. Site definitions are lost between sessions, so you will have to redefine your site each time (this doesn't take long). If the definition is long you can save it somewhere and then reload it when you start up again.
To define a Dreamweaver local root folder:
- Create a root folder on your hard drive using 'Windows Explorer' or 'My Computer' on a PC or 'Finder' on a MAC. Give the folder a name such as 'demosite'.
- In Dreamweaver, choose 'Site>Manage Sites>New>Site'. The Site Definition
dialog box appears. (Select 'advanced' rather than 'basic'.)
- In the Site Name box, enter a descriptive name for your Dreamweaver site.
- In the Local Root Folder box, specify the folder you created in Step 1.
You can enter a path or click the folder icon to browse to and select the folder. - If you want, complete the other options in the Local Info category (they are not required to make the site work).
- Dreamweaver creates the initial site cache, and the new Dreamweaver site appears in the Site panel
- You are now ready to create the files for your site. Save your first HTML page in the root folder.
- To save the definition for later use, go to 'Site>Manage Sites', make sure that the correct site is selected (if you have more than one) and then click on 'Export'.
Note: Do not move your root folder. If this happens then redirect Dreamweaver to the new location.
The Files panel
The Files panel enables you to view a site, including all local, remote, and
testing server files associated with a selected site. The local site appears
by default; change the Files panel layout to view the remote site or testing
server. Expand the Files panel to get a split view. (Use the 
icon at the top of the Files panel.)
Use the Files panel for standard file maintenance operations, such as:
- Creating new HTML documents
- Viewing, opening, and moving files
- Creating folders
- Deleting items
- Transferring files among local sites, remote sites, and testing servers
Ref: Using Dreamweaver - Macromedia
Creating a new page in Dreamweaver
Once you have opened Dreamweaver and defined your site, go to 'File>New'. This brings up the following dialogue box:
Select 'Blank page' > 'HTML' > 'none' then click on 'Create'.
You will then be presented with a blank page, ready for you to
add your content. Note that here you do not need to type in HTML tags - just
type the text as you want it to appear. Dreamweaver allows you to view your
page in 'Code' view, 'Design' view or 'Split' view. The 'Design' view is what
the page will actually look like (roughly), the 'Code' view shows the HTML,
and the 'Split' view shows both at once. Switch between the views using the
controls at the top left of the screen. 
Using the Properties box
Your Dreamweaver screen should show a 'Properties' dialogue box, probably at the bottom. If it doesn't show, go to the 'Window' menu and tick the 'Properties' option.
The 'Properties' box changes in appearance depending on what is currently selected on the page. When you are typing in text it looks like this:
Here you can quickly alter text characteristics without having
to remember the appropriate tags and attributes. The controls act in a very
similar way to Microsoft Word or any other text editing program. In the 'Format'
box you can select any of the heading tags (Heading 1 to Heading 6). The 'B'
button will make selected text bold (using the <strong> tag)
and the 'I' button italicises the text (using the <em> tag).
The align buttons to the right of these two apply the 'align' attribute to
the paragraph. There are other controls here whose functions we will cover
later.
Exercises
- Open Dreamweaver and define your local root folder using the 'define site' dialogue box.
- Create a new HTML document and save it in your root folder using an appropriate name.
- Add some text and practise using the Dreamweaver controls to produce the same effects you created in HTML (headings, rules, etc.). Use the Dreamweaver help files and tutorials if necessary. Notice that you can easily look at the code that Dreamweaver has created by switching to Code view (top left of the screen).
- Keep previewing your pages using a web browser such as Internet Explorer. ('File>Preview in Browser')
- Notice that you can also open the pages you made earlier using raw HTML.
