|
|
 |
 |
|
| | / | | |
| |
|
|
 |
Using our templates with Adobe Dreamweaver
Adobe Dreamweaver is a popular WYSIWYG (What You See Is What You Get)
HTML editor for both Windows and Macintosh. Like other WYSIWYG editors such as Microsoft FrontPage,
it also has a large number of features and tools to aid in web development. That said, this guide will only cover
the basics of using Dreamweaver to edit your new template. The last section of this guide
has links to more in-depth Dreamweaver resources.
To begin this guide, first make sure you have unzipped your template. If you haven't done this
yet and don't know how, please refer to our QuickStart
guide.
First, start up Dreamweaver and move on to opening the template >>
Opening the template is simple:
- Go to File / Open.
- Browse to the folder containing your template.
- Select the index.html file and click Open.
The template will now open in Dreamweaver. We can now go on to explaining the interface >>
The Dreamweaver interface you see should look similar to the screenshot below:
The area you see your page displayed is known as the document window, and it's
where you will do most of your editing (either by directly editing HTML code or using
your mouse). The topmost portion of this area has three buttons that allow you to switch
between different editing views. Below is a short summary of each view:
- Design
This is the view the majority of users will want to use. It shows the entire
page and allows you to edit/reorganize it using your mouse (as shown in the screenshot above).
You can drag and drop elements (pictures, text, etc.) directly on the page without
having to deal with any HTML code.
- Code
This view shows the actual underlying HTML code of the page. If you are comfortable
using HTML you can work in this view to write/edit the HTML directly.
- Split
Sort of a compromise between the above two views, this view shows the page's HTML
code in the upper portion of the window and the actual design view in the lower
portion.
In this guide we'll be dealing with the Design view.
The buttons on the right allow you to open up various panels that provide
tools and information about the current page. For example, opening up the Design panel allows you to view and
edit CSS and layer definitions used in the page.
At the very top you will see a standard menu bar, and beneath it is a toolbar:
The toolbar has shortcut icons that let you quickly perform certain
tasks by clicking on them. For example, clicking on the chain icon lets you insert
a hyperlink. To the left of the icons there is a drop down menu that
allows you to switch to other toolbars. The default is Common, which provides some
basic editing tools. The others, such as Layout and Text, provide
more specific tools for specific aspects of editing.
The Properties panel (beneath the document window) allows you to choose font settings.
You can change
the font, font size, attributes (bold, italic, underline), as well as your text's
justification on the page.
Now that you have a basic understanding of Dreamweaver's interface, you can start
editing the template >>
Editing your template is obviously the most important part of this process.
We won't be able to cover everything you will want to do to your template, but
we will cover the basics.
Editing Text
Dreamweaver makes editing text extremely easy. Simply click on the text you wish
to edit and make your changes as shown below:
As shown in the image above, you can also do this to change the actual content
of your pages.
Labeling Buttons and Images
If the text you want to add isn't regular HTML text but
rather written on an image, you can use an external image editor. Dreamweaver
allows you to easily switch to this editor for a given image.
In order to do this, you will first need to set up your image editor
of choice by going to Edit / Preferences... / File Types & Editors. Once
you've done this, follow the steps below:
- Right click on the image you wish to edit. You will see a menu option named Edit with [your image editor].
Click on this option.
- You will now see the image you selected opened up in your image editor of choice
(in this example, Paint Shop Pro). Use your image editor to write your text on
the image. In this example, we are writing our company name on the header image.
- Save and exit from your image editor.
You will be returned to Dreamweaver and the correctly labeled image should be shown.
Note: There are two ways to label images if you're a Dreamweaver user. The first
way is the way described above. The second way is to start your image editor, open the image you
wish to label, write your label, and save the image. Both ways will work, but the first
way is generally easier for most people to do.
Once you have finished editing, you can
save the template >>
To save the page you are working on, simply go to File / Save. If you want to save
the page as a copy, go to File / Save As..., enter the new name for the page, and click
OK.
As explained earlier, this guide isn't meant to be too extensive as Dreamweaver is a very
large application with dozens of features. To get the most out of this editor, we would
highly recommend referring to the excellent Dreamweaver resources listed below.
- Adobe Dreamweaver
Adobe's own Dreamweaver site.
- Dreamweaver FAQ.com
A large resource that caters to the Dreamweaver community. Offers tutorials and frequently asked questions
for web designers of all skill levels.
- CommunityMX
A web development resource site that offers a large assortment of tutorials for Dreamweaver, as well
as many other Adobe products.
|
|
|
|
|
 |
|
