Creating a Website in Dreamweaver
Suzanne Stillwell,
October 12, 2007
MITC Conference
30
Day Trial of Dreamweaver is available to download from the Adobe website at
https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en%5Fus&product=director
This version of the handout reflects the additional topics* that we worked on
during the session. I hope that having a
written resource to go with your notes will help you as you continue to work in
Dreamweaver. I also added this linked
contents table to make it easier to find topics in this resource.
Thanks!
- Defining a Site
- Working and Uploading
a Site
- Creating a New
Page
- *Tables
- Hints: Line Spacing | Multiple Consecutive
Spaces
- Email Link
- *Last Updated Date
Stamp
- File Naming
Conventions
- Web page Document
Title
- Setting
Page Properties
- Hints: F12 to view in browser | Making a
Library Item
- Making more pages
for your web site
- Referenced Link
- Link to an External Web
Site *(Special Note to those who attended this
workshop: We had a discussion about
whether it is mandatory that you contact a web site for permission before
linking to it. I followed up with
MOREnet. They agreed that you do not
need to ask permission to link to sites. However, if you are saving images or text
from a site or editing a site like a webquest to use in your in your site,
you should contact the author and get written permission or follow the
site’s Terms of Use guidelines carefully to fulfill copyright
requirements. One thought is that
there could be some confusion during discussions on using images from
sites. Many free image sites
request that people do not link directly to an image on their site to use
an image, but give directions to copy and save the image for use. Then those same sites ask to be credited
through a link back to their full web site. Hope this helps clear up the confusionJ
- Working with Images
- *Creating a Photo
Gallery
- *Creating a Drop Down
Menu
- Resources
Defining a Site in
Dreamweaver:
When
you first start using Dreamweaver on any given computer, you must first define
your site. If you have started a web page,
you will already have a folder in your own user workspace. If you
are starting a new site, you will need to create a folder before you
begin.
Creating
a Web Site Folder:
1. Go to My Computer
from the Desktop or Start menu. Select
(double click) the drive where you will be working. Select the My Documents folder.
2. Right click on an empty space in the My
Documents folder.
3. Go to New > Folder.
4. A new folder will appear
where the mouse was clicked. Type a name
for this folder using one word and all lowercase letters. (for example,
stillwellweb)
5. Open the new website folder
and create a subfolder inside it by repeating the procedure above (right click
in an empty space, go to New > Folder).
Name this folder images. This
is where you will put any clip art, graphics or photos that you want to use on
your site.
6. If you already have some
files that you want on your website, put them in your web folder or image
folder.
Open
the Dreamweaver program.
In
the main menu at the top of the screen, click Site > Manage Sites.
|
|
If you have an existing site, go to Edit… If this is your first time setting up your site on this computer, go to New… and fill out the wizard. |
1. Give the site a logical name and click Next.
2. Choose No, I do not want to use a server
technology and click Next.
3.
Choose Edit local copies…[recommended]. Under Where on your computer do you want
to store your files? Click on the
small file folder and browse to your website folder. Then click Select.
|
|
|
4.
Under How do you connect to your remote server? Click on the
drop-down arrow and select FTP. Enter
the other information as given to you by your web site host. Click Next.
This is where your username goes. You can enter your password here, but it’s best not to
save it. Dreamweaver will prompt you
for it when you connect later.
5. You will get a Site
Definition window for “Sharing
Files, Part 2”. Leave this on “No, do
not enable check in and check out.” Click Next.
6. Finally, you will get a Site
Definition window summarizing your site info. Click Done to define the site. Click Done
again. Dreamweaver will load your files and your web folder
contents should appear in the panel at the right of the screen and your
computer should be set up to upload within Dreamweaver.
Working and
Uploading Your Site – To work on your files, double click on them in the file list and
they will open in you Dreamweaver editing window.
When
you have finished editing your pages, you can upload them to your site by
clicking on the icon that looks like two plugs.
When clicked, they will look connected.
You will be prompted to enter your password to connect to the server
where your files are stored. To send a
file or files up, select them in the window and click the blue arrow. To bring down copies of files from the
server, expand to see both the local and remote view by clicking the
Expand/Collapse icon on the right.
Select the files that you want to bring down from the Remote side and
click the green arrow to bring them down to your computer.
There is an option to
“synchronize” your site. You can right
click on your site or a folder within your site and choose synchronize. It will let you choose whether you want to
send newer files up to or get newer files from the Remote site. This is a good option when you have done a
lot of work and aren’t sure which files need to be updated on either your local
computer or your remote site.
Notes:
Actually uploading (above)
should come a lot laterJ.
Creating a new page - Here are some basics to get you started making your web page.
To create a page, go to
Create New (center column) and choose HTML.
This editing window looks
much like a blank document in Word. The
menus for centering, setting text size, color, etc. are at the bottom in the
Properties window.
The Properties window is
always there in Dreamweaver. It changes
depending on whether you are working on a blank page, in a table (then it shows
table properties), or working on a picture.
There are 3 main parts to
your webpage: the header, body, and
footer.
·
The header is
really just like a title. You can make
that font larger and center it.
·
The body has the
content of the page and can take any format that you want.
·
The footer is a
way for people to know who made and maintains the page. It should also give contact information, at
least an email address.
One option is to capture your
content within a table (or tables within tables). If you would like information on working in
tables, continue on here. If you prefer
to go on more simply, jump to “simple page”
Tables - Capturing your content in a table can make the look of your web page
more consistent even if people are viewing it in different screen
resolutions. You can also guarantee that
your page will print easily, if you set it up within a table. That’s the format we will explore here.
Insert a table on your web
page by either going to the Insert menu on the menu bar and choosing to insert
a table OR by clicking on the icon that looks like a 2 column table up on the
Common tool bar. You will get this pop
up table formatting window.
Set the Rows and Columns to 1
and Table width to 675 pixels. So that
no boarder line will show around your table, set the border thickness to
0. I also leave cell padding and spacing
on 0. I do not use the Header setting
(make sure it is on None) or change the Accessibility settings.
Click OK and your table will
appear on you page. Don’t worry about
the table height. It will adjust to
expand as you put things on your site.
Note that while the table is selected,
the Properties window shows the settings for the table. If you want your table centered on the page,
look for Align in the Properties window and change it from Default to Center.
This table will capture your
web page in an easily printed size.
Making tables within tables is a good
option to organize the content of your page.
In this example, we will make a table for page with a top navigation
bar, a two column body for side navigation and main content, and a footer at
the bottom.
Click inside your 675 pixel
table. Insert another table with these
properties: 
You can choose whether to set
border thickness so that borders show or not.
Cell padding would make the space between cells thicker. Cell spacing puts space between text and the
borders of the cells. Those are options
you might want to explore. I still
recommend leaving the Header option on None and not changing the Accessibility
settings.
Your table will have two
columns of equal width. An easy way to
adjust this is to grab the center bar and pull it to the left so that you have
a narrower column for your side nav.
You will want to merge the
top row of the table to one cell so that your top navigation can center across
your entire page. To do this, select the
row. Look in the Properties window and
find Row. The small rectangle that looks
like two cells will merge your two cells into one cell. (The other small image is used to split one
cell into two.)
Repeat this merge process to
make the bottom row one cell for your footer.
Now you can format the
heading of your page, add text to the body, create side navigation and format
your footer.
One easy way format your side
navigation is to insert a table within the cell.
Click in the cell. Insert a table with these properties.
This concludes the tables
approach to setting up your web page.
You can skip the Simple Page Example below, but don’t miss the HintsJ!
Notes:
·
Enter will show a
double space between lines. To get a
single space between lines, shift enter.
·
Dreamweaver
defaults to allowing single spaces only.
If you want to be able to space several times in a row, go to Edit on
the top menu bar, Preferences, in the General Category, check the box to “Allow
Multiple Consecutive Spaces”.
Making an email link – So that
people can contact you through your web site, you should include your email
address. To make your email address a
clickable email link, select the address text and click on the 2nd
row icon that looks like an envelope. Fill
out information in pop-up formatting window.
Or: Select the text, like your name,
that you want people to click on to email you and type in the Link box of the
Properties Window. Type mailto: followed immediately by your email address (no
space between the colon and the email address.
Formatted Date Stamp – To show when
you last updated your page, there is a formatted date stamp feature in
Dreamweaver. This is often included in
footers of web pages. If you insert the
date in this manner, whenever you work on a given page and save it, Dreamweaver
will automatically change the date to show that you have updated the page. To do this:
Type : Last updated
followed by one space.
Instead of typing the current date,
insert the date stamp by clicking on the Date icon up on the Common tool bar
(it looks a 19 on a flip calendar). You
can pick the Date format and add a Time format as well. To make this keep up with the date of your
last update, be sure to check the box to “Update automatically on save”.
File Names for Web Pages - Your home page should always be saved as a file
named index.html. This allows for web
browsers to automatically find the page to start from in your website. So, File, Save as… index.html Be
sure to type in the html on this one.
Dreamweaver defaults to htm for file endings and some web browsers do
not recognize that as the same file. For
other files, it is not important whether you use html or htm.
File names of web pages
should always be one word or two words connected by an underscore with no
spaces in the name. It’s also a basic to
use all lowercase letters in file names.
Title of Web Page - Now you
also need to Title each page. This is
different and naming the htm or html file.
It’s what will show on the top of the browser window. This title needs to be grammatically correct
with capital letters and spaces. You put
that in the Title box where it now says “Untitled Document” at the top of the
edit window. Do this and save your
file. File, save (no need to save
as). Note that now the title of your
page is at the top of the Dreamweaver window on the blue bar.
Explore Page Properties
by clicking on the button in the Properties window. Sometimes it’s tricky to find. If it’s not there, click on a small triangle
at the bottom of the Properties window and see if it expands to show the
button.
In page properties, you can
set default fonts for your page, colors of text, background colors, colors of
links and more…
Notes:
Your website will need more
than one page usually.
Ideas for other pages: Class news, Calendars, Favorite Sites…
·
F12 is a shortcut
to save and view your page in the browser.
In this view you can test your links to see if they work and watch for
formatting issues.
·
Items like your
top and side navigation and footer will be the same on all of your pages. There is a feature in Dreamweaver called a Library. You can make parts of your page a Library Item and insert it on all of
your pages. The advantage is that if you
decide to change something about that part of your page, Dreamweaver will make
the changes and automatically update it on all of your pages that contain the
given Library Item.
To do this, select the text or table that will be repeated on several pages, go
to Modify on the top menu bar, Library, Add Object to Library. An Assets window will open up on the side
panel. Name your library item and enter.
Notice that you now have to go back to the file tab to see your file list in
the side panel.
Notes:
Making a new page - To make more pages for your web site, you can do File, Save as and name the new file. Then change things like the Heading, Title
and content. This is especially useful
if you have set a lot of specific page properties that you want to repeat or
when you have formatted tables within your web page in a way that you want to
continue on other pages. File, Save as
maintains all those settings from page to page and saves you from having to
repeat the process manually.
However, you can start fresh
if you want a new look to your new page.
To make a new file from scratch, go to File, New
Pick Basic Page, HTML and
click Create. Then design your page as
we did the index. If you made you
navigation and footer a Library Item, put your curser
where you want them on your new page and insert them from the Assets side
panel.
Notes:
Be sure to give it a title so
it won’t be called Untitled Document on the browser top blue bar. Save this new page.
Referenced Link - To
link this page to your index, we will do a referenced link within your site:
Go to your index page. Type in the words you want them to click on
to go to your new page. Select the
text. Look in the Properties window and
find the little circle to the left of the Link box. Click and drag up to the file name of your
new page. Let go and the path will show
in the Link box.
F12 to save and view in the
browser. Click on your link and see that
it goes to your new page.
Make a “Back to Home Page” referenced
link on the new page.
Notes:
Making a Link to Another Web Site
You will also want to link to
good Internet resources for your students to use from your web site. To make an external link, go to the web site
in your browser and copy the url. Go
back to Dreamweaver and type the text that you want them to click on to go to
the web site on your web page, select the text, and paste the url in the Link
box in the Properties window. To make
that link open in a new Browser window, set the Target to _blank. 
Notes:
When you work with images in
Dreamweaver, you must first save the image files in an images folder in your
working web folder. Right click on your
site folder, New Folder, and name it-
images.
Sites to search for
images: http://www.hallsville.org/elementary/stillwell/curriculum/webresources.html
Or…. Google for some. Be sure to check the Terms of Use policy on
the individual websites before copying images to use on your site. Some sites charge for usage. Some sites ask you to link to their site in
exchange for free usage. Follow the site
guidelines carefully.
Right click on the image and
save image or picture as…Save it in your image folder.
Now you can go to the insert
menu and insert image. Once the image is
inserted, you can set the image properties in the Properties window. Here you can resize the image, link it to
another page or site, put a border around it, etc. Note that if the image file is too large, it
will load slowly when your site is uploaded.
You should resize the image in a photo editing program like Fireworks
and save it in a smaller file size. Jpeg
or gif are two file formats which work best on web pages.
Be sure that when you upload
your site, you include your web pages and the images that you have
inserted. There is much more to be
learned about images for your web site.
Working with images could be a separate workshop by itself.
Notes:
Photo Gallery
- There is a built-in feature in Dreamweaver to create a photo gallery.
1.
It’s best if the
images are a consistent size, but they do not need to be resized before you start.
2.
Collect the
images that you want to show in a folder.
This folder will be called your Source Folder.
3.
Create a new
folder within your images folder named after the collection of photos. i.e. girls_golf (Remember no spaces or capital letters.) This folder will be you Destination Folder.
4.
Open a
Dreamweaver page in the editing window and go to the Commands menu and down to
Create Web Photo Album.
5.
Fill in the
information for the Title, Subheadings, and browse for your Source and
Destination Folders. Select the size
that you want for your thumbnails and uncheck show filenames. Select the number of columns you want the
thumbnails to be in.
6.
I recommend going
the default of jpeg – better quality for both the thumbnails and Photo
format. It’s VERY IMPORTANT to decide how much smaller you want the images that
will be uploaded and shown on your web site to be in comparison with their
original size in the Source Folder. Many
digital cameras will produce pictures 10 times larger than needed for web
images. Try for pictures around 200 X
300 and no larger than 400 X 600 pixels.
Set the Scale % accordingly.
7.
When you click
OK, Dreamweaver will automatically launch Fireworks and the programs will work
together to create an index page for your photo gallery along with a folder
of very small thumbnail versions of the
pictures, a folder of the resized images, and a folder of navigation pages for
each picture.
8.
Once the album is
created, you can format the index page for color, links back to your home page,
and insert your footer.
9.
To show the
gallery, you need to link to the index page from one of your other web pages
and upload everything.
Creating a drop down menu – With your curser in the spot where you want the
menu, go to Insert, Form, Jump Menu.
In the Text: box, type the name of this
menu (like Elementary Teachers) or something generic and instructive, like Jump
to… Note that in the Options, you can
select a Go button to be included along with the drop down.
To add items to this menu, use the +
sign. Type in the name of the page and
tab to type in the url or browse to the page to jump to. Continue until all pages are listed. To change the order of the pages in the list,
use the up or down triangles to move a selected page up or down the list. Click OK.
View in Browser. View when drop
down is clicked.
To edit, go back to
Dreamweaver, select the jump menu to view the Properties window. Click on List Values to get the editing
window to add or edit pages and link information.
My Website:
www.hallsville.org/elementary/stillwell
Look in Tech Tips and Topics for Webpage Resources and
Clip Art.
eMINTS
http://www.emints.org/ethemes/index.shtml
Search for Internet Resources on any topic for any
grade level.
eTheme with Dreamweaver tutorials
http://www.emints.org/ethemes/resources/S00000694.shtml
http://www.emints.org/ethemes/resources/S00001139.shtml