Inside
WI
> Biocomputing >
Graphics > Web
Design > Dreamweaver
Designing
with Dreamweaver
Dreamweaver
won't solve all your web page problems, but it can be a very powerful
tool to create web pages quickly, consistently, and easily. It will
also help you to manage your website and keep it organized. It will
help you to develop a website that looks consistent across many platforms.
You can use the WYSIWYG (What You See Is What You Get) interface to
construct your web pages, while Dreamweaver writes the code and checks
to make sure it works. At the same time, it allows you to view and edit
the HTML source code yourself. It has some built in whiz-bang effects,
but also allows you to customize the program to your own needs, adding
outside applications and extensions.
But, before
even opening the Dreamweaver program, it is wise to go through some
crucial (and, in the long run, time-saving) steps:
Step
1: Planning! ...........Back
to top
After
you have decided that you want a web page, you must decide:
Who
is your audience?
(scientists? sports enthusiasts? children? kangaroo fanciers?) What
kind of equipment will they be using?
What
you want to display (pictures? text?
diagrams? downloadable games? an interactive forum?)
Where
you will put things (draw a site map!)
Why
you are doing this (to convey information?
to persuade an audience? to strut your stuff)
How
will the web page function? (what kind
of navigation will you have? Hotlinks, dropdown menus?)
Drawing
out a diagram:
(My webpage
will be about that terrific legume, the humble pea. Here’s my vision.)
Now draw
or have in mind a picture of the home page. Draw it on your computer
or draw it on a napkin--doesn’t matter.
(It doesn’t
have to be perfect, just an idea so you can find or create the graphics).
Step
2: Assembling your stuff.............Back
to top
You
will need:
1. Your
text
2.
Pictures (jpg or gif images)
3.
A text editor or WYSIWYG editor (Dreamweaver)
4.
A way of linking to the internet so
you can publish your website (email desktop support for your name and
password for the Whitehead server)
Step
3: Creating a place for your website .............Back
to top
All of
your website should be stored in a convenient place, called the Root
Folder:
My root
folder is called ‘peas’
You should
keep your file names short and to the point, with no spaces (although
you can use dashes, underscores, or periods to separate words)
Store
your root folder somewhere on your hard drive where you can access it
easily...
Public
or Private?
You need
to decide whether your page will be seen by anyone in the world or only
people within Whitehead.--Or you can make some pages public and some
private. The next step is to create two new folders within your root
folder. The Whitehead-only folder should be named "wi" and
the public folder should be named "pub" (lowercase, no punctuation).
Later
on you will save your home page into this folder as well. All the rest
of your pages and images will be saved into either the pub folder, which
can be accessed from inside or outside Whitehead, or into the WI folder,
which can only be accessed from within Whitehead.
None of
our peas pages are top secret, so we will put them all into the pub
folder. The last thing we need to do is put a folder inside the pub
folder for all our images.
Step
4: Open Dreamweaver ..........Back
to top
1.
Install Dreamweaver. If the application
freezes when you try to launch it, go to your System Folder > Preferences
and throw out the Dreamweaver preferences. Dreamweaver will recreate
these preferences after you launch the program.
2.
Define the local information for your site.
When you launch Dreamweaver, it may tell you that no sites have been
defined. The first thing to do is go to the Site menu and choose "New".
You will see this palette:
Type
in a name for your site. Next, to define your Local Root folder, click
on the folder icon to search for and select the folder you made in
step 3 for your site. This will be your Local Root folder. If you
ever need to move the files for your site, you can move this folder
around without breaking links, but don’t remove or move folders
within this folder.
3. Define
the remote information for your site.
First
send email to desktop support to
get your host directory, login and password. Then fill out this window
as follows. (You can wait to do this until you are ready to upload
the site to the server).
Step
5: The Interface.............Back
to top
In Dreamweaver,
you can open a new or existing file and work with it as if it was a
layout or word processing document. With every word or image you add,
html code is generated, but you don't see it unless you want to see
it. The key to Dreamweaver is understanding how the user-friendly palettes
relate to the code that will run your web page in a browser. You can
get a feeling for this by switching back and forth between the WYSIWYG
(What You See Is What You Get) interface and the "code inspector",
a window that shows you the html version of your page.
Each browser
will interpret the html slightly (or radically) differently. You can
preview your page in a browser of your choice as you work. If your page
is to be viewed on multiple browsers, it is a good idea to preview in
as many of them as you can. To preview, go to File > Preview in Browser.
Palettes:
Launcher
Palette: This palette contains shortcuts
to opening other palettes:
Properties
Palette:You can use this palette to define
attributes of text and images you have selected. This is also where
you make links from your page to other web pages.
Object
Palette: Click on the icons to insert
different objects
Step
6: Creating your page............Back
to top
View your site:
Go to
the Window menu and make sure the "Launcher" window is open.
It looks like the bar below. Click on the Site icon to open the split
window, which allows you to view your site.
The Site
button opens this window:
Here we
see the pub folder with all the files pertaining to the Peas site.
The next
step is to create an html document that will be your home page, and
save it into your Root folder as seen in the site map above.
Create
a new document: Go to File > New. Each
time you create a new HTML page, enter a title in the field at the top
of the window and save the file immediately into the appropriate folder.
In this case the file should be named "home.html" and saved
directly into the root folder. Because it is the only html file in the
root folder (without going deeper into other folders) you can have a
shorter URL. Since this root folder is called"peas", The URL
for our Peas site will be " web.wi.mit.edu/peas".
Change
the page/text/link color: The default
color for a web page is dove gray and the default text color is black.
To change the background color of a page or text, or use an image as
wallpaper, go to Modify > Page Properties.
Import
images:Go to Insert
> Image. Select a GIF or JPEG from
your site folder. OR use the shortcut button 
on the Object Palette.
Make
links:To link text or image to another
file, either in your site or from the world wide web, open the Properties
Palette (Window > Properties). Highlight the text or object you would
like to link, and
1. Type
or copy the destination URL in the "link" field in the Properties
window,
OR
2. Click
on the folder icon to the right of the field to search your files for
the correct link. You will probably want to link to another html document,
although links can be made to images and PDF files as well.
Make
rollovers:Go to
Insert > Interactive Images > Rollover Image
OR click on the shortcut button 
on the Object
Palette. (You must have already created the two separate 'before'
and 'after' images or text within Photoshop or other graphics application.)
Make
a table: Go
to Insert> Table OR click on the shortcut
button 
on the object palette.
Use
layers: Go to Insert
> Layer OR click on 
in Object palette.
(Layers
are used much the way tables are used: to more precisely lay out text
or graphics on a page.)
Step
7: Uploading to the server.............Back
to top
When you
are finished with your page, the final step is to copy or upload the
files to the server. There are two steps to this process:
1.
Go to the Site menu and choose "Define Sites". Select
your site and choose "Edit". Click on "Remote Info".
Here is where you will enter the information sent to you by desktop support).
Type in
the FTP Host, your directory on the server, your login and password.
Check the "save" box so that you won't have to enter this
information each time. When you are done, click OK.
2.
Now you are ready to upload your files.
Click on the "Site" button on the Launcher Palette. This opens
the site window. Click on the "Connect" icon, shown below.
Your site on the server will also have a pub and WI folder. Drag and
drop the files into their mirror locations on the server.
For example,
if you have been working on the file "pea.pictures.html" and
now want to update that file on the server, you would drag that file
from the right half of the window into the left half, making sure to
put it in the correct location. Because the file is in the pub folder
on your machine, you drag and drop it on the pub folder icon on the
left half of the screen.
You can
copy the entire site, or just selected files and folders, depending
on what you have changed since the last upload. You can also download
files, or bring them from the server to your site.
Please
DO NOT attempt to open or work with files on the left side of the window
(on the server), as this will crash the server.
You
can also select a file and click the "put file" 
button at the top of the Site window.
Dreamweaver will decide where to put the file on the server.
More
Help with Dreamweaver.............
The Help
menu within Dreamweaver takes you to a great interactive online help
page made by Macromedia, the makers of Dreamweaver. This site can give
you more in-depth help in learning the site.
In addition,
you can borrow Dreamweaver books from room 215. These books explain
Dreamweaver features and can be very helpful.
For
quick tutorials and explanations on web design, www.webmonkey.com
is a very useful and well-written site.
Back
to top |
