Here's my own brief tutorial:
Getting started with Dreamweaver
Create a single page
One of the things that often troubles people when creating Web
pages is deciding and remembering where their files are stored. We are going
to
create
a page
and save it to your "m" drive. Before we begin,
however, I'd like you to create a folder in your "m" drive and name workshop. (Once
you get the hang of things, we can move files to your www folder so they
can be displayed on the web)
A
Note on filenames
Dreamweaver will allow you to create files with spaces in their names and
with a mixture of upper and lower case. So long as the files are on your
PC or Mac this will cause no problems, but as soon as you move them onto
the Web server the spaces will cause problems for the server, and the mixture
of upper and lower case will confuse things for you. So follow these rules
in choosing names for folders, web pages and image files:
- Keep the names short and meaningful
- Don't have spaces or special characters such as / & "
- Restrict
yourself to lower-case
To Begin:
- Launch Dreamweaver
- You should have a blank window with Untitled Document in the title bar
- There may also be some other small windows visible. Close these for now by clicking the x in the top right corner, but leave Property Inspector and the Objects Panel windows
- You should still have the Property Inspector and the Objects Panel windows — keep them open. The Property Inspector is the small unlabelled window shown at the bottom of the picture below. You can move it anywhere on the screen
- You should now see something like this on your desktop:
Save your page
Before you do
anything else--enter any text or graphics or whatever-- save
the file
- Choose "Save" from the File menu
- In the "Save As" dialog-box, go to the Save In box and locate the new folder that you created at the beginning (the "workshop" folder you created in your "m" drive)
- In the Filename box type a suitable name for your file, for example: workshop1
- Click "Save" from now on, as you make changes, you will save the file regularly.
Enter text and format it
- Now type some text into your blank page. For example, type: "My first Dreamweaver page" and press Return. You can use the mouse to select bits of text or to position the cursor, just as when you are using Word.You may also copy text from other programs such as Word and paste the text onto the page. You will have to do some editing and formatting of that text, but it's quite easy to do so.
- On the new line type your name and press Return
- On the next line type today's date and press Return
- Now click the mouse in the first line that you typed
- In the Property Inspector go to the box labelled Format and choose Heading 1 to format the paragraph as a main heading
- Now use the mouse to select the next two short paragraphs and click the bulleted list button in the Property Inspector
- Place the cursor at the end of the second bullet point (that is, after the date) and press Return — the new paragaph will start with a bullet
- You can cancel the bullet list by clicking the bullet list button again.
- Now save your document and do some more experimenting with typing text and using the different options in the Property Inspector. You can also use the various options in the Text menu to format your text.
Document title
If you look at the title bar of your Dreamweaver window
you will see that although you have given your file a name, it is still
referred to as an "untitled
document".
All Web pages should have a title — for example, if someone bookmarks your page it is the page title that appears in their list of bookmarks. This is simple web ettiquette; there is almost nothing more irritating than bookmarking a page to later find that it has no title and so you cannot locate it easily from your bookmarks or favorites lists. To title your page:
- Click in the box labelled Title in the toolbar at the top of the window (beneath the menubar)
- Delete the contents (it probably says "Untitle document") and type in a meaningful title for your page
- When you press Return or click the mouse somewhere in the body of your document, you will see your title shown in the title bar at the top of the Dreamweaver window
- Save your document again.
The Objects Panel
Apart from ordinary text, there are many other objects that you will want
to insert into your page. The Objects panel gives you a quick way of doing
this. Some of the objects are quite complex, but many of them are simple
enough.
The Objects panel has various different sections. The picture
here shows the "Common" section, containing the
most common objects. If you cliick on the box where the word "Common" appears
you will get a list of other sections that you can choose from. If you move
your mouse slowly over the buttons on the panel a note will be
displayed saying what each button is for.
Now, let's try a few things:
- In
the Common Objects section click the Insert
Horizontal Rule button
to
place a horizontal line across your page. This is a common device for breaking up
the text on long pages - Now
go to the Characters section. There are several characters
which cannot
be simply typed into the page — for example the "em-Dash." Find the button for
inserting the em-Dash. - There
are various other
parts of the Objects panel, and we will get to them
in later workshops.
Links and Images
Link to the class home page
Inserting a link from your page to another page is easy, but you have to
understand the difference between absolute and relative links.
This will be explained when we look at how to create a site. For now
we will create
a link to our class home page, giving the full URL. To do so,
- In your page type the following: English 372, Document Production
- Press Return
- Select the text that you typed, taking care not to highlight any spaces before or after the text
- From Dreamweaver's Modify menu choose the Make Link command
- The Select File dialog-box will come up
From here you can either choose a file on your local machine or enter a URL. We will enter a URL. To do so, do the following:
- Delete the text from the URL box in the dialog-box and replace it with
the following:
http://www.public.asu.edu/~kheenan/courses/372/sp03.html - Click Select
Now it is time to Check the link in a browser
- First save the page: choose Save from Dreamweaver's File menu
- Choose Preview in Browser from Dreamweaver's File menu, and then choose your browser from the sub-menu
- The page will be launched in your browser and you can click on the link and make sure it takes you to the class home page
- Now go back to your Dreamweaver window to edit your page further
Inserting
an image
later I'll show you how to use layers and tables to place images
precisely
on your page. For now we'll just place
an image in the middle of the text. We
shall use an absolute address for our image, as we did for
the hypertext
link. Later on you will
see how to
link to an image on your own site.
- Place the flashing cursor after your link to the home page and press Return
- Click the Insert Image button in the Objects panel (the "Common" section) or choose Image from the Insert menu
- You will
see a dialog-box very similar to the one for
the Link, and you should type the URL
for the
image into the URL box:
You will not see your image displayed on the page in Dreamweaver, but if you look in your browser it should appear (provided you are connected to the network).
Save your page
and preview it in the browser as you did before You should see this image:
Now, to Part 2
