Better Dreamweaver Tutorial

Teaching Resources Center, University of California, Davis
Creating a Course Web Site Using

Macromedia Dreamweaver MX 2004
PC version
The objective of this 5-part tutorial is for you to create a course webpage.
Part I deals with the basic tools.
Part II tells how to put the material online.
Part III pertains to site management, and more advanced topics.
Part IV explains how to construct a style sheet
Part V is a ready-to-use model for a course website
This tutorial was created for instructional use by the Teaching Resources Center at UC Davis by
Barbara Sommer, with the assistance of Julie Waldren, Richard Walters, and Victoria Cross.
Feel free to use it for non-profit purposes. We would appreciate acknowledgement of authorship
with its use.
trc@ucdavis.edu (530) 752 6050
Teaching Resources Center October 2004
Using Dreamweaver
2
Terminology: Select is done with a single click. Highlight requires a click-and-drag movement
to highlight test. A sequence of menu steps is indicated by >, (e.g., for a new page, use File >
Open).
NOTES:
With Dreamweaver software, you can create, view, and organize an entire web site. Although it
is possible to start constructing a web site by composing individual pages, it is best to define and
set up the general site structure ahead of time.
When posting information to the Web, you should always use Web-Friendly File Names: Use
only A-Z, a-z, 0-9, and _ in the file name. Do not use spaces or other punctuation. Always add
the file extension (.htm, .jpg, .pdf, etc)
When navigating the web, the first page that opens in any folder is called either default.htm or
index.htm. Using these file names for your home page and the home page in every folder
will simplify your URL (web address).
We recommend that you always maintain an exact replica of your web site on your local
computer. Having the file names, folder names, and organization identical between your remote
site and local site simplifies editing and updating.
Mac users - for the right-click command, use control + click. For PC keyboard commands that
use the control key, Mac user substitute command (Apple key).
Part I Create Your Site ...........................................................................................................................................3
I.A Basic Course Page Creation -----------------------------------------------------------------------------------------3
I.B Additional web pages -------------------------------------------------------------------------------------------------8
I.C Linking------------------------------------------------------------------------------------------------------------------9
I.D Working with Images------------------------------------------------------------------------------------------------ 11
Bells and whistles -------------------------------------------------------------------------------------------------------------- 14
Part II Publish Your Site........................................................................................................................................18
II.A MyUCDavis ---------------------------------------------------------------------------------------------------------- 18
II.B Using Dreamweaver to put your website on a server ----------------------------------------------------------- 21
Suggested folder organization for your server space ---------------------------------------------------------------------- 22
Part III Manage Your Site..................................................................................................................................23
III.A Folders and files using the Files list------------------------------------------------------------------------------- 23
III.B Templates------------------------------------------------------------------------------------------------------------- 24
III.C Synchronize ---------------------------------------------------------------------------------------------------------- 28
III.D Managing links ------------------------------------------------------------------------------------------------------ 29
Part IV Cascading Style Sheets (CSS)...............................................................................................................31
IV.A Using Style Sheets --------------------------------------------------------------------------------------------------- 31
Part V Course website model.................................................................................................................................36
V.A The TRC model ------------------------------------------------------------------------------------------------------ 36
Using Dreamweaver
3
Part I Create Your Site
Before starting this tutorial, you need to retrieve 5 images.
On your computer, create a folder titled dreamimages.
A. Go to http://trc.ucdavis.edu/trc/tutorials/dreamimages/
B. Right-click each image and download it to your dreamimages folder.
I.A Basic Course Page Creation
I.A.1 Setting up the web site
1. Open Macromedia Dreamweaver.
2. Click Dreamweaver site under the Create New
column.
If you do not see this window, Top menu: Edit >
Preferences. Check Show Start Page box. Quit
Dreamweaver, and re-open it.
3. Name the site. Type a name in the text box.
4. Click Next
5. Leave the next panel as is, and click Next. We
will not be using Server Technology for this
tutorial site.
6. Choose a location to store your site on your
local computer. Change the default location
by clicking on the yellow folder to the right
of the text box.
7. Click Next.
8. Select FTP in the pull-down menu.
These settings are for our workshops. When you
are setting up your course site, get specifics
from your tech support for username,
password, etc.
9. Fill in as shown using your own last name.
Password: studio
Using Dreamweaver
4
10. Test the Connection. Do not proceed
until you receive a confirmation that you
have connected successfully.
11. Click Next.
12. Leave last 2 panels as they are, clicking Next and then Done.
I.A.2 Create a home page
1. Select HTML under the Create New column.
2. Or Top menu: File > New >Basic Page > HTML
3. A new blank page will appear.
4. With the cursor in the blank area, type
University of California, Davis.
5. Press Enter to move to the next line.
6. On the next line, type a course name, and press
Enter.
7. To format the text (e.g., increase size, make it bold, change fonts, etc.) you will use the
Properties window. It should be visible as a
separate panel below the page.
If you dont see it, select Window >
Properties.
You will be using the Properties window often. Its choices change, depending on what
you have selected.
8. Highlight the course title that you typed.
9. In the Properties window, click the arrow next to
the Font blank. Change the font to Verdana, et al.
10. Then explore the Size options. Choose x-large.
11. Next, explore the Font Color options Click on
the unmarked box next to font size. Your cursor
will be shaped like an eye dropper, and a palette
of colors appears. Select a color by clicking on it.
Note that you can sample a color from anywhere on your screen,
however, not all colors are created equally. The palette is showing
you a standard set of web-friendly colors. Stick with those and
your site will be universally viewable. Other colors, may differ on
other computers.
12. Save the page - select File > Save.
Using Dreamweaver
5
13. A dialog box appears. Note that you are
saving in the folder you specified when
you defined your site.
14. Name your home page file index. htm (or
use default.htm), and save it.
15. The page name will appear on the tab in
the upper left hand corner of the page.
IMPORTANT naming conventions:
Use only A-Z, a-z, and 0-9.
Do not use spaces or special characters. Dash (-) or underscore (_) are OK.
Always use the extension .htm or .html for each page.
Use lowercase only -- most servers are case-sensitive.
If you accidentally close Dreamweaver, re-open the program. Top menu: File > Open (or Open
Recent). Open a page by double clicking its filename in the Files list on the right.
I.A.3 Creating a table
The web does not recognize tabs and spaces in the way that a word processor does. In order to
layout your page horizontally, use tables to define the spaces for text and images.
1. Place the cursor below your second line of text (the course title).
2. Click the Table hot button.
3. Or, select Insert > Table.
4. In the dialog box, type in the number of rows and
columns desired.
5. You can easily add or delete more later.
6. For invisible table lines, set Border thickness to zero.
7. Click OK. You will adjust the column widths later.
8. We will use the left-hand cell to create a
navigation list which will be consistent on all
your course pages. The right-hand cell will
contain the information specific to this page.
9. Place your cursor in the left cell of the table.
Type a list of page names that you are likely to
want to create (e.g., Schedule, Contact
information, Lecture notes, Assignments, etc.)
Type a Return between each item.
10. In the upper right cell, type information that orients viewers to this site.
Using Dreamweaver
6
I.A.4 Formatting table cells
1. To change the cell width or height, place the cursor on the boundaries until it changes to
parallel lines with arrows. Click and drag the
right-hand edge further to the right.
2. Or, specify percentage or pixel width in the
Properties window. W for width, H for height.
NOTE on column width settings. Using percentage allows
the cell to expand or shrink with the viewer's screen size. Using pixel width sets it at the
specified width (and may require the viewer to scroll if the screen is small).
3. To change the justification of text (or images) within a table (left, center, right AND top,
middle, bottom), select the cell by either placing the cursor in the cell you wish to
change, or select multiple cells with click-and-drag (they will become outlined)
4. Adjust the horizontal and vertical justification using
the Properties window box at the bottom of the
screen. Set Vert to Top.
5. If you don't see all 4 lines of the Properties window, click
the triangle/arrow in the corner.
6. To add or delete columns and rows to the table, place the
cursor in the row or column you wish to delete (or want to
add to). Select Modify > Table, which brings up a list of choices. Combine and divide
table cells by selecting them, and using the Properties window.
7. To combine table cells, select both and, using the
Properties window, click left icon shown. The split icon
next to it divides the cell.
8. To select the entire table (and bring up the Properties
window)
a. Place cursor somewhere on the table.
b. Top menu: Modify > Table > Select Table.
c. You can change many of its characteristics.
9. Save your work. Top menu: File > Save.
I.A.4.1.1 Take some time here to experiment with tables
Using Dreamweaver
7
I.A.5 Previewing your page in a browser
It is time to see how the page will look when viewed on
the web.
1. Use the Preview in Browser hot button on the
page menu bar.
Or, Top menu: File > Preview in Browser > Internet Explorer/Mozilla/ Netscape)
2. If you do not see the toolbar at the top of the
page, select View>Toolbars>Document
3. Your page should look like this.
This is what will appear on the Internet.
4. Close the preview window (click on corner X).
I.A.6 Formatting text
Use the Properties window (at bottom of the screen) to
format text in the table.
If you lose the Properties window, Top menu: Window > Properties
If you prefer, you can format using the pulldown menu, Text, at the top of the page.
Typing Note: To avoid a space between lines, press Shift + Enter, rather than just Enter.
1. Changing alignment
a. Highlight the first line, University of California, Davis.
b. Top menu: Text > Align > Right.
c. Or click the Right Align icon on the
Properties window.
2. Indent (and Outdent)
a. Highlight the lines in the right cell under TRC 101.
b. Indent using either Top menu: Text > Indent, or the Properties window.
c. Return them to former position using
Outdent.
3. Lists and Bulleted Text
a. Highlight the list in the left cell.
b. On the Properties window, click the Unordered list button. Then try the Ordered
list button.
c. Menu lovers can use
Text > List > Unordered List and
Text > List > Ordered List.
SAVE your work often.
Using Dreamweaver
8
I.A.7 Other Options
1. Spell check - Top menu: Text > Check Spelling.
2. Page Title Add a page title in the Title text box.
It will appear at the top when people browse your page,
and is used in the Bookmarks list.
If you do not see the toolbar at the top of the page, Top menu: View > Toolbars (at the very
bottom of the list) > Document
3. Task Pane Note that there is a task pane on the right-
hand side of your Dreamweaver window. Each task is
opened by clicking on the small triangle preceding the
task name.
a. Open the Files task list
b. Be sure
1) the Files tab is selected (not Assets).
2) your site name is showing in the left-
hand segment
3) Local view is showing in the right-
hand segment
If you do not see the task pane at the right of the page Top menu: Window > Files
I.B Additional web pages
I.B.1 Adding a new page
1. Top menu: File > New
2. In the window that appears, be sure the
General tab is selected.
3. Select Basic Page>HTML.
4. Click the Create button, at the bottom.
5. Save (File > Save
a. Be sure you are in your Dreamweaver folder/directory)
b. Name the file schedule.htm. The .htm extension is added automatically.
c. Leave it open.
I.B.2 Using index.htm as a template
1. Return to index.htm, Top menu: Window > index.htm. If you closed it, double-click it
in the Files list (on the right panel).
Using Dreamweaver
9
2. Select the entire page
a. Place the cursor somewhere outside of the table.
b. Top menu: Edit > Select All.
c. Copy it, Top menu: Edit > Copy
3. When it is entirely selected, copy it, Top menu: Edit > Copy.
4. Bring schedule.htm to the front (Top menu: Window > schedule.htm), and paste the
copied page, Edit > Paste.
5. This allows you to use index.html as a template. It saves having to re-type the navigation
column on the left. Now your schedule page looks just like your home page, index.htm.
6. To delete the contents in the right cell,
highlight the text and press the
Backspace or Enter key.
7. Fill in the Title: box at the top of the page
something like "TRC 101, F 04
schedule."
8. Type a schedule, as shown. Or copy and
paste a schedule from a Word or Excel
file.
9. Save your work.
I.C Linking
I.C.1 Creating links between your pages
1. In schedule.htm, highlight the text Home in the left
cell.
2. In the Properties window, click the folder icon to the
right of the Link space.
3. In the dialog box, find and select (one click)
index.htm on your computer.
4. The name of the file to which you are linking
appears in the Filename space. Click OK.
5. The word Home on the web page is now blue
and underlined, indicating that it serves as a
link.
6. When the cursor is on Home, the linked filename appears in the Link box in the
Properties panel.
Using Dreamweaver
10
7. View your page in the browser, File > Preview in Browser > your choice, and click on
the link. It should take you to the home page.
8. Close the browser window.
9. Close schedule.htm.
10. Return to or re-open index.htm (File> Open) and create a link to schedule.htm in the
left navigation column.
I.C.2 Creating links using Point to File
An alternate way to create links within your website is to use
the Point to File icon (small target/scope icon to the link text
box).
1. Highlight the text that you wish to make into a link
2. Click and hold on the Point to File icon
3. Drag to the target file in the Files list on your Task Pane (to the right)
I.C.3 Creating links to other websites
1. Return to or open your home page, index.html.
2. Highlight the line on your home page that reads University of California, Davis.
3. Keeping it highlighted, move the cursor to the Properties window, placing it in the Link
space.
4. Type http://www.ucdavis.edu
You can also copy and paste URLs (web
addresses) into the Link space.
5. The highlighted line is underlined and blue.
6. View page in the browser, File > Preview in Browser >your choice.
You are now linked to the UC Davis home page.
7. Close index.htm.
I.C.4 Adding an e-mail link
1. From the top menu select File > New
2. In the window that appears, be sure the
General tab is selected.
And select Basic Page>HTML.
3. Click the Create button, at the bottom.
Using Dreamweaver
11
4. Save the page as contact.htm
5. Create a table (see above) with enough rows and columns to accommodate your contact
information and your TAs contact information.
6. Type your e-mail address on the webpage.
7. Highlight it, and in the top menu, select Insert
> Email Link.
8. A dialog window appears. In the Text: box you
can leave the address as is, or put a name,
leaving the actual e-mail address hidden on the web page. Click OK.
Consider leaving it as is, to communicate
clearly to the viewer that this is how you can
be reached.
9. View page in the browser, File > Preview
in Browser > your choice. An e-mail form
will appear if the viewer's browser has been set to manage e-mail.
Note: In the labs on campus, you will NOT see it - which underscores the value of showing the
actual e-mail address. Viewers can copy and paste it into another e-mail program.
10. In a similar fashion, you can add links to a personal webpage, a research unit, or the
department website. Use Insert > Hyperlink.
Take a little time here and create your own contact page. Save and Close it.
I.D Working with Images
I.D.1 Adding images
Images for your webpage should be in either a .gif or .jpg format (as indicated on the extension).
GIFs are good for solid blocks of color, JPEGs for photos, but there isn't much difference
between the two. Computer monitors do not show high resolution. Therefore, it is unnecessary to
use high resolution images (which are large in filesize). They slow the download time for the
page. Try to keep your images small, both in size and in resolution (72 pixels per inch is
standard).
Be sure you downloaded the images from
MyUCDavis>MyTools>MySpace>Barbara Sommer>Dreamimages.
1. Minimize the Dreamweaver window.
2. Locate the images folder/directory (downloaded at beginning of class) on your computer.
Drag-and-drop it into your site folder/directory.
3. Return to Dreamweaver..
Using Dreamweaver
12
In the Files window list on the task pane (right side of the window), you will now see the images
folder. A single click on the + next to it will reveal its contents. If you don't see the images folder
and you know it is there, close and re-open Dreamweaver.
4. Create a new blank page (File > New)
5. Save as lecture1.htm.
6. Insert a table. Top menu, Insert > Table
or use the Table hot button.
7. Set it for 3 rows and 2 columns.
8. Click OK.
9. Place the cursor in the upper left cell of
the table.
10. Click the Images hot button on the
Common toolbar (along the very top
menu).
Or Top menu: Insert > Image
11. In the dialog window that appears
a. locate and open the images,
folder
b. select fish_talk.jpg.
c. Click OK.
d. The image will appear in the
table cell.
I.D.2 Editing Images
1. Select the image (single click). The handles on the edges of the
image will show.
2. Click and drag the handles to resize the image. To maintain the
aspect ratio, hold down the shift key while dragging the corner
handle..
3. Click and drag the center of the image to move it to
a different table cell or out of the table.
4. To delete an image, select it with a single click, and
press Backspace.
Remember that you can always use Edit > Undo to reverse your last action.
Using Dreamweaver
13
SRC stands for Source and
indicates the name and folder
location of the image.
I.D.3 Image Properties
When an image is selected, the Properties window (near the bottom of the page) will show the
image attributes.
1. Add Alt text: Type in a
meaningful text label for the
image in the Alt box.
This allows users to view your
web pages with the image
function turned off (e.g.,
computers with slow
connections, or for the visually-impaired).
This is particularly important if you use the image
as a link or if it contains key information
2. To adjust the horizontal and vertical
alignment of the image within the cell,
click off of the image into the cell, the
Properties window changes
accordingly.
3. Save and close lecture1.htm.
I.D.4 Rollover Images
Rollover refers to another image's appearing as the cursor rolls over something on the page. It is
simply a link, with the computer being instructed to bring up the new image on a mouse rollover
rather than a mouse click. The result is rather magical.
The image can be a picture or a piece of text but the text must be made into an image - either a
.jpg or .gif image. You cannot simply type it into the webpage. The other requirement is that the
two images, the "before" and "after," must be of the same dimensions.
1. Create a new page (File > New).
2. Save as roll.html.
3. On the new page, type Vocabulary lesson,
and press Enter.
4. Top menu: Insert > Image Objects >
Rollover Image.
5. In the resulting dialog box, give the
image a meaningful name.
6. Place cursor in the Original image
space.
7. Click Browse and find butterfly.gif in
your images folder.
Using Dreamweaver
14
8. Place cursor in the Rollover image space.
9. Click Browse and find butterfly_on.gif
(_on or_ over are conventions for labeling the image that appears on mouse rollover).
10. Fill in the Alternate Text box (for those who will not see the image).
11. Note that you can use the rollover to link, just as you would a normal image or piece of
text. In the When clicked go to URL text box, type in the URL for another website,
copy and paste from the browser address bar, or browse to a page in your site.
12. Click OK.
Your web page will only show the butterfly image the
rollover only appears when you preview your page.
13. Save the page and view in browser (File > Preview
in Browser > your choice).
The only difference between the two images that you
added to your web page was the added text
Butterfly. The text appears as the mouse rolls over
the image.
14. Close the browser page.
15. Create a rollover with the arach.gif images.
16. Close roll.htm
I.E Bells and whistles
I.E.1 Adding the date last modified
1. Open index.htm (File > Open Recent> index.htm)
2. Place the cursor where you would like a date to appear.
For example, in the lower left cell.
3. Type Updated (or Last Modified:) with a space after
it.
4. From the top menu, Insert > Date.
Or use the date hot button on the Common
toolbar.
5. Select your preferred format.
6. If you want the date to be automatically updated
when you subsequently revise the page, check the
box.
Using Dreamweaver
15
7. Click OK.
8. Close index.htm.
I.E.2 Size considerations
The numbers at the bottom right of the page show the
window size.
1. Place the cursor on the vertical boundary
(small grab space) and move it to a width of
approximately 800 pixels.
2. Move the horizontal bar up to about 600
pixels.
This gives an idea of how the average viewer will see
your page. If your page is too wide, the viewer will
have to scroll across (annoying).
Keep your text and images within the 800 pixel width boundary.
Scrolling down is less of a problem, but put the key information near the top of the page where it
is immediately visible.
I.E.3 Anchors (Links within a page)
You can set anchors to jump from one section to another section on a page. For example, if your
page is long (requires scrolling down), you can insert a Return to top link at the bottom.
1. Open schedule.htm.
2. Add more topics to the list, to reach 20.
3. Place the cursor at the very top of the page (in
front of University of California, Davis).
4. Insert an anchor. Top menu,
Insert > Named Anchor.
Or click the Anchor icon in the top Common menu.
5. When the dialog box appears, type top (you can
give it any name that you wish). Click OK.
6. An anchor icon will appear in the cursor location
(it will not show up on the web page).
Using Dreamweaver
16
Next step is to link to the top anchor.
7. Place the cursor at the bottom of the page (below Lesson 20), type Return to top.
8. Select Return to top (to create a link).
9. In the Properties window type #top
(no spaces) in the Link space.
The rule is #destination anchor name.
10. Check your link in the Browser Preview
Or, use this alternative way to create the link using the Properties window:
1. Below the Return to top link, type To top and highlight it.
2. Without de-highlighting it, scroll to the top of the page so that the top anchor is in view.
3. In the Properties window, hold down
the mouse on the Point to File symbol,
(the small circle immediately in front of
the folder icon) and drag to the anchor
at the top of the page.
4. #top will appear in the link box. The link has been established.
The link will be underlined.
5. View the page in the browser, and check the link.
You can put anchors anywhere in the document. For example, you can link from a contents list
at the top to specific sections further down on the page.
I.E.4 Linking to an anchor on another page.
1. In schedule.htm place the cursor immediately in front of Lesson 15 and
insert an anchor.
2. Name it lesson15 (no spaces, lowercase).
3. Save and close schedule.htm.
4. Open index.htm.
5. In the bottom right hand cell, type To Lesson 15.
Highlight it (in order to make a link).
Using Dreamweaver
17
6. In the Properties window click on the folder
icon next to the link box, and locate
schedule.htm.
7. When schedule.html appears in the URL box,
type in #lesson15 (so that it immediately
follows schedule.html without any spaces).
If you do not see schedule.html listed, make
sure that All Files shows in the Files of type
box.
8. Click OK.
9. Preview in browser (File > Preview in Browser > your choice), and check the link.
It isnt precise in that the anchor point may not appear at the top of the screen, but it will
be visible on the page.
10. Close the browser window.
I.E.5 Targets
When viewed online, links take the viewer to a new page, closing the previous one. Use target to
bring up the new page in a second window (leaving both pages visible, though overlapping, on
the screen).
1. Open index. html.
2. If you have not already done so, create a link to schedule.htm (see Section F on links).
3. Place your cursor on Schedule,
4. In the Properties window,
schedule.htm appears in the Link box.
5. In the Target space in the Properties
window, type sched (or any word you
choose it will not show up anywhere).
6. Save the page and view the link result in the browser.
Part II Publish Your Site
Some terminology:
Upload (or Put) refers to moving files from a desktop or laptop computer to a server (remote).
Download (or Get) moves files from a server (remote) to your local computer.
II.A MyUCDavis
For more detail on using MyUCDavis than is presented here, please see our tutorial on Website
Builder, available at our website http://trc.ucdavis.edu in the Resources > Tutorial and Handouts
section.
II.A.1 Uploading pages
1. Log in to MyUCDavis http://my.ucdavis.edu
(requires your Kerberos login and password).
2. On the top bar, under MyClasses,
click Website Builder.
3. If offered a choice between the type
of courses you want to view, Select My
Courses or Guest Courses.
4. Select quarter in the pulldown menu.
5. Select course in the pulldown menu.
6. Click Upload files
7. Click Browse next to the first file space.
8. Navigate your local computer to locate
index.htm. Click Open.
9. Select the html radio button.
10. Click Upload files button at the bottom of the
screen.
Using Dreamweaver
19
11. The uploaded file will be listed on the left hand side
of the page. Give it a few seconds.
12. Click on the name index.
13. In the Page Name box, give it a meaningful
name, e.g., "TRC 101," or "Click here to
start."
14. Scroll down and click Save Page.
II.A.2 Viewing your MyUCDavis
site
To view the course site to see how the page will
look to the students,
1. Select Welcome Page on the left site
navigation menu.
2. Click the VIEW PAGE button.
3. Your newly uploaded file appears as a link
towards the bottom of the page. Click on it
to open your file.
4. Click the MyUCDavis tab in the upper
left to return to Welcome Page Edit
(where you are working).
II.A.3 Adding other pages
1. Upload contact.htm and schedule.htm
(remember to select Welcome page and click the html radio button see steps 6-10 above).
2. Give them meaningful names by selecting each and filling in the Page Name box.
3. If a file ends up in an Uploaded Files folder (as
shown here), rather than on the Welcome Page,
move it by selecting the file name on the left,
and locating the desired placement page in the
Move file to folder window.
4. Click SAVE FILE INFO.
Using Dreamweaver
20
II.A.4 Hiding a page
A hidden page is not visible when browsing the website. You can use this to control access to
your course materials. Remember to come back and uncheck this box when you do want your
students to see this information.
1. Back in Welcome Page edit, select schedule from the list on the left.
The HTML Page Editor Edit Page appears.
2. Under the Page Name space, check box
by Hide link to this page?
3. Scroll down and click SAVE PAGE.
4. Select Welcome Page on the left, click VIEW PAGE. Notice the formatting change, and
check the remaining link(s).
II.A.5 Update a page
Unless you got it perfectly right the first time, you may want to update a page that you have
uploaded to MyUCDavis. CAVEAT. Files with the same name are not written over. Instead
MyUCDavis adds a number (e.g., index1.html, to the duplicate, index2.html to a second
version, and so on). This can break the links between your pages. Make sure you have only one
file per filename on the MyUCDavis page.
Therefore, to update a page, you must first remove all trace of it before you upload the newer
version.
1. Select the page you want to replace
2. Click Delete,
3. Note that the page has moved into the Trash
4. Click to Empty the trash.
5. Then upload the new file.
II.A.6 Linking to another site
You may chose to serve your pages from a system other than MyUCDavis (described in the next
section). If so, you can still use the ease of finding your
site in MyUCDavis by adding a link to your new site.
1. Go to the Welcome Page Edit
2. Enter the URL in the Link to Your Site: space on
Welcome Page Edit.
3. Click Save Page
Using Dreamweaver
21
II.B Using Dreamweaver to put your website on a server
We have already set up Dreamweaver to use FTP (File Transfer Protocol) to put your files
temporarily on the TRC server. You may be able to do the same on your department server, but
you will need to get the necessary FTP address and password from the technical support staff in
your department. Or, you may apply for permanent course web space on the TRC server at
http://trc.ucdavis.edu/trc/services/courseWeb.html.
See next page for a suggest schematic of website folder
organization.
II.B.1 Connecting to the Server and
Putting Files
1. In the Files window on the right, click the Connects to
Remote Host icon.
That establishes a connection between your computer and the server.
2. Click the pull down menu to toggle the view
between Local and Remote to see the files on
your local computer and the server.
If you are unable to connect
1. Select Site > Manage Sites.
2. Select your site and click Edit.
3. Follow the instructions at the beginning of Part I of the tutorial..
3. Click the Expand/Collapse hot button. This
allows you to view both local and remote files at
the same time.
4. Select your site folder in your Local Files list.
5. Put the files on the server by selecting them, and
clicking the Put arrow (up).
or select from the top menu, Site > Put
Now your files are on both the local and remote sites.
The website is now out for the world to see.
To view it, open a browser and type your URL http://trc.ucdavis.edu/studio/yourname
Using Dreamweaver
22
II.C Suggested folder organization for your server space
index.html
John Q. Faculty
University of California, Davis
Welcome to my website!
See information on classes I teach
Class 101
Class 102
See information on my research interests
Contact me
images
101
index.html
syllabus.html
images
102
index.html
syllabus.html
images
Research
index.html
publications.html
Using Dreamweaver
23
Part III Manage Your Site
This section covers tools for creating consistency across site web pages and for managing and
updating them
III.A Folders and files using the Files list
1. If not already open, click the Files tab on the right-hand
task pane.
The first space should show your site name.
2. In the second space, select Local View.
3. Right-click the Site folder at the top of the list. A drop-
down menu appears which provides a convenient list of
operations. (New File, New Folder, etc)
4. Add a new folder to your site name it lectures
The Files window provides easy file management. You can
move folders and files on the Files list by selecting and dragging
them to the desired place.
5. Move the page lecture1 into the folder lectures. Click
and hold on the name lecture1 and drag it into your
new folder
6. Dreamweaver will automatically update
links to and from the page (saving your
having to do each individually).
Click Update to use this feature.
7. To delete files or folders, select and press
Backspace.
Using Dreamweaver
24
III.B Templates
If you plan to have a number of pages on your site and want to have a consistent appearance,
make a template page. It allows for a uniform appearance, navigation bar, and makes updating
your pages much easier. Once in place, a Save sends a change in the template to all pages using
it.
III.B.1 Creating a template
To create a template, use any existing page, or start from a blank page, putting in the elements
that you want to appear on all pages the table layout, names of all your links, etc. As an
example, we will use the index.htm.
1. Open index.htm.
2. Remove excess information and structure
that is irrelevant to a basic template. Use
top menu Modify > Table to remove
unwanted rows and columns.
Here is a "bare bones" page.
3. Change the name in the Title box, as it is no longer your home page.
4. Be sure that the left cell alignment (navigation list) is set to top
(see Properties window).
5. From the top menu, select File > Save As Template.
6. Name it (in the Save as box) and click Save.
7. If you are asked to Update Links, click YES
(otherwise, re-insert them later).
Note that in your file list there is now a folder named
Templates and it contains your template page. If this does
not show up, click the circle-arrow hot button to refresh the
view.
Using Dreamweaver
25
III.B.2 Adding an Editable Region
The next step is to specify the Editable Region. This is the area where you will be able to
add information specific to each page. The other regions cannot be modified (except on the
Template).
1. Place the cursor in the upper left hand corner of the
space you wish to make editable. We will specify
the right column..
2. At top menu, select Insert >
Template Objects > Editable
Region.
3. Name it, and click OK.
4. The typed name appears on your page within a
turquoise-blue outlined box.
5. Place the cursor within the box at the end of the typing
(use the keyboard arrow key if you have trouble with
cursor placement).
6. Press Enter several times.
You will see an expanding space outlined in turquoise blue. This is the Editable Area.
7. Save the template page, and close it.
III.B.3 Using a template
To create a new, blank page using the template:
1. Click File > New from the pull-down menus.
2. Select Templates from the top tabs.
3. Select your template name from the list in the
right-hand column
4. Click Create
You can now add text to your Editable Region on this new page.
Using Dreamweaver
26
III.B.4 Applying a template to an existing page
1. In the right window in the Files list, open
contact.htm by either double-clicking it or selecting
it and pressing Enter.
2. From the top menu, Modify > Templates > Apply
Template to Page.
3. Select the template in the dialog box, and click
Select.
4. Select Document body to indicate the Editable
Region.
5. In the lower menu, use the pulldown menu to
locate the editable region name that was used on
the template.
6. The template is applied. Save it by clicking OK.
7. Preview contact.htm in browser (File > Preview in Browser > your choice). The
detailed template formatting does not show onscreen.
8. Close contact.htm.
III.B.5 More on applying a template
When you adopt a template after having created a page, you may have duplicate information on
the page and on the template. Heres a way to clean it up:
1. Open schedule.htm.
2. From the top menu, Modify > Templates > Apply Template to Page.
3. Select the template in the dialog box, and click Select.
Before you continue, you need to resolve the
region names.
4. For Document body, use the editable
region you created in the template- use
the pulldown menu to locate it.
Using Dreamweaver
27
5. For Document head, select head as the
editable area (again, using the pulldown
menu).
6. Click OK.
7. Clean it up. To delete the redundant information in the
top of the right cell highlight it, and press Backspace.
8. Copy the content in the table that you wish to keep, and
paste it outside the table, but in the add content
(editable) region.
9. To delete the old table - place cursor somewhere in it,
then at the top menu, select Modify > Table > Select
Table.
10. Press Backspace to delete.
11. When the page looks OK, save and close schedule.htm.
III.B.6 Modifying a template
Any changes made on the template will automatically propagate through all documents using
that template. Changes may include font, background color,
adding or editing links, etc.
1. In the Files pane on the right, open the template page
(template1.dwt).by double-clicking it, or pressing Enter.
On the page, notice that only Schedule is linked in the navigation bar on the
left. We will add another link and all the pages using the Template will be
automatically updated.
2. Highlight Contact information on the navigation bar.
3. Create a link to contact.html. Use the Properties window. (See Section F, Creating
Links.)
Using Dreamweaver
28
4. Save the template.
5. An Update Template Files dialog box appears
showing a list of the pages currently using the
template. Click Update.
6. A log appears showing that schedule.htm
has been updated.
7. Close the Update Pages log window.
8. If you close the template without saving it, this box appears. Click Yes. And the Update
Template Files dialog box (shown above) appears.
9. Open schedule.htm. Note that there is now a link to the contact page.
10. Close schedule.htm and any other open files, but leave Dreamweaver running.
III.C Synchronize
The synchronize feature is used to update the web pages on the server. It is particularly useful
when you are working from different locations, or when others are working with the same site. It
reduces the likelihood of writing over more recent files.
1. In the Files list on the right (with Local View selected),
right-click on the site folder, and select Synchronize from
the pull-down menu that appears.
2. A dialog box appears. In the top pull down menu,
choose the set of files that you wish to synchronize.
Select Entire Dreamweaver Site.
3. In the lower pull down menu, select Put newer files to
remote.
Using Dreamweaver
29
Put newer files to remote means to take the newer files from your computer and put them
on the server (remote).
Get newer files from remote means to take the newer files from the server and put them
on your computer. You would use this if you or someone else had put files on the server
from another location (as they would be more recent).
The above can also be done with the arrows Put (up) and Get (down).
4. Click Preview.
5. A dialog box confirms that there is a more recent file on your computer. If not, a message
saying that Synchronization is not necessary would appear.
6. Click OK.
7. A final dialog box shows a log indicating that the Synchronization is complete.
8. Click Close.
You can synchronize individual folders and files (instead of the entire site) by right-clicking and
selecting Synchronize. It saves time if you have made only a few changes.
III.D Managing links
III.D.1 Checking links
Dreamweaver can check your site for broken links.
1. Right-click the site name in the files task pane and select Check
Links > Entire Current Site.
2. The Results appear in a window below the
Properties window. This one is empty
because there were no broken links.
3. If there were, you would see a
message like this, which shows that
on contact.htm the link to
lecture.htm is incorrect.
4. If you see a broken link listed, correct it here, or go to the file, and make the correction.
Using Dreamweaver
30
III.D.2 Change links
Dreamweaver is good about updating links as you move your files around within your site.
However, external links may change, or you may have some reason to change the name of a link.
The Change Links feature allows you to make the correction across all of your files in a single
operation.
1. Top menu: Site > Change Links Sitewide.
2. In the top space, type in the existing link or
URL (web address), or click the folder icon to
browse your computer (for local links).
3. In the second space, type in the correct destination (e.g., the URL), or browse as above.
III.D.3 Keywords
Search engine robots collecting keywords with which to identify sites. Therefore, choose a few
keywords (e.g., course topic, or the discipline) -- whatever best describes your site content.
Avoiding keywords will not keep the site from the search engines, so you might as well be
helpful. Keywords are embedded in a page area referred to as the head. It exists in the code,
but you wont see it on the page
1. Open the template page (template1.dwt).
2. From the top menu, select Insert > HTML > Head
Tags > Keywords.
3. Enter 3 or 4 descriptive terms, separated by commas -
no point in adding a lot of terms as most search engines
limit the number they attend to.
4. Click OK.
5. Save the template, and update the files using it. You can put specific keywords on individual
pages following the same steps.
Using Dreamweaver
31
Part IV Cascading Style Sheets (CSS)
A style sheet gives you further control over appearance, and provides consistency in style across
your web pages (e.g., font sizes and style, color, link appearance, etc.). You set up a basic page
format and then apply it across your site. A subsequent change in a style sheet is automatically
transferred to all pages to which it is attached. There are many CSS attributes and functions that
are not covered here. In usual software fashion, there are at least 2 and sometimes 3 ways of
doing the same thing. This is minimal need-to-know information
IV.A Using Style Sheets
IV.A.1 Creating Style Sheets
1. Open a page in an existing Dreamweaver file.
2. You will be using the Design panel in the upper right corner.
3. Click the New CSS style button (+).
The first style will be to set the basic text for the page content.
4. Name the particular style in the New
CSS Style window. Leave other
settings as shown.
5. Click OK.
6. Locate the folder in which you want to
save the file.
7. In the File name window, name your
style sheet (e.g., myCSS or some
other title that will cover the
individual styles that you set up).
8. Click Save.
Using Dreamweaver
32
7. Be sure that Type is selected in the
left hand column. First style will be
that for the basic text on the page.
8. Select a Font from the pull-down
menu
9. Use pull-down menus to select text Size
and other desired attributes
Default (blank) settings are "normal."
10. Other options are available in the
Category list on the left (these are not
covered in this tutorial).
11. Click OK
12. Note that the style sheet has been added in the upper right panel.
13. Add another style (+) in the CSS Styles
pane.
14. Name it caps
15. This one creates an initial capital letter and
lower case text of medium size in bold.
".caps" is now added to your style sheet list. Dreamweaver automatically
places a period before the style name.
Using Dreamweaver
33
IV.A.2 Links - changing appearance
1. Click for a new style (+)
2. Select the Advanced radio button.
3. In the Selector blank use the pull-
down menu and select a:link
4. Click OK
5. To remove the standard underline, check
the None box.
6. Clicking the Color box gives you a choice
of hues.
7. Using these choices, links will be in the
same font and size as the small text, but
will be bold, and teal blue in color.
Standard link colors are blue for a link,
and purple for a visited link. There is
some value in staying close to this
convention, and also keeping the
underline. That is up to you.
8. Click OK.
9. Set the visited link (go back to Step 1 above) this is the appearance of the link after the
viewer has used it.
10. You can also experiment with the active link (when link is clicked) and
hover (when cursor passes over the link).
11. Each style will be added to the list in the upper right pane.
Using Dreamweaver
34
IV.A.3 To change an existing style
1. Select the individual style that you wish to change.
2. Click the Edit Style button in the CSS Styles pane (logo with pencil).
3. The Definition window appears and you can make
changes in the particular style.
IV.A.4 Attaching a style sheet to a page
1. To take effect, the style sheet must be attached to the individual file
(page).
2. Open a different Dreamweaver page or create a new one.
3. Click the Attach Style Sheet button on the Design panel next to the one
you used to create a new style.
4. In the File/URL box, Click Browse and locate your style sheet on your computer. Click OK.
5. Leave the Link radio button checked.
6. Click OK.
7. You will then see the style sheet listed in the Design panel.
Using Dreamweaver
35
IV.A.5 Applying the style sheet
1. Once the sheet has been attached, its options will be available to you in the Properties panel
(bottom of window) in the Style pull-down/pop-up menu.
2. Highlight some text and click small text in the styles
box in the Properties panel.
3. Create links in the usual way, and you will
see the style applied automatically.
Any subsequent changes that you make to the
style sheet will be automatically applied to
ALL of the files/pages to which that particular
style sheet is attached.
Using Dreamweaver
36
Part V Course website model
These instructions (and model pages) will help you set up a basic website for your course. You
will be able to modify it in accord with your needs. We assume that you have been through the
Dreamweaver tutorial, and have a grasp of the basics.
V.A The TRC model
V.A.1 Getting the model
1. On your computer, create a folder titled sitemodel.
2. Within that folder, create 2 more folders, one titled templates and the other titled images.
3. Download the HTML pages that you will use as the basis for your website
a. Open a browser (Mozilla, Explorer, etc.) and go to
http://trc.ucdavis.edu/trc/tutorials/sitemodel.html You will see a list of files with
the extension .htm. These must be downloaded to your computer.
b. To download each page, right-click (Mac: control + click) on the link. Do not open
these pages. The task is to download them as HTML pages to your computer.
c. In the menu that appears, select Save Target As ... (or Save Link Target As, or
Download Link to Disk)
d. Locate the folder site model in the Save in:
blank.
e. Leave bottom of window as is.
f. Click Save.
g. You may see the Download Complete
window. If so, close it.
h. Follow the same procedure to download the
8 files to your folder sitemodel, along with
the .gif file in the images folder and the .dwt
file in the templates folder (or assemble
them there after downloading them).
4. You can leave the browser (Internet) now.
V.A.2 Create the website on your computer
1. Open Dreamweaver
2. Top menu: Site > Manage Sites > New > Site
3. Click New button, and select Site in the pull-down menu
that appears.
4. In the screen that appears, select the
Advanced tab (may be already visible)
5. Give the site a name of your choosing
(no blank spaces or funky characters)
Dont worry about the other blanks.
Leave as is for now.
Using Dreamweaver
37
6. Click the folder icon next to the Locate root folder: box.
7. Locate the sitemodel folder on your
computer. Double-click so that it appears in
the Select: space.
8. Click Select.
9. Click OK in the remaining window.
10. You will now see your course listed in the Manage Sites
window.
11. Click Done.
12. You now have a Dreamweaver site. The files are in the left panel.
V.A.3 Using the model
1. In the Files panel on the right (if not open, click the small
triangle preceding "Files")
a. Locate the templates folder, open the sample.dwt
(double-click it in the Files list)
b. Type course number and name where indicated.
c. The navigation bar on the left is constructed using a
table.
1) Modify links as needed by typing your information in
the cells
2) to add or delete cells, at the top menu, select Modify >
Table > select desired action.
d. SAVE sample.dwt.
e. An Update Template Files window
appears. It lists the files that use the
template.
f. Click Update.
Using Dreamweaver
38
g. You will see a confirmation. The
formatting has been changed on all the
pages that use the template.
h. Click Close.
i. For more information, see Template
section (IIIB) in Dreamweaver tutorial.
j. Close sample.dwt.
2. Open index.htm and make it yours. This will
be the course home page.
3. Open and adapt other files as needed. See D3 below for renaming files (pages).
V.A.4 To create additional pages, select existing page in file list
1. Right-click (Mac: control + click) > Edit > Duplicate
2. Select the copy (probably at the bottom of folder list in the Files window)
3. To rename the file, Right-click (Mac: control + click) > Edit > Rename
4. Type new name in gray area, keeping the .htm or .html extension
5. To delete a page, Right-click (Mac: control + click) > Edit > Delete
V.A.5 To modify tables within sample pages,
top menu: Modify> Table > select desired action
V.A.6 When your site is ready to be placed online,
see Part II. Publishing Pages on the Web
#

Better Dreamweaver Tutorial

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Better Dreamweaver Tutorial

Caricato da

Copyright:

Formati disponibili

Teaching Resources Center, University of California, Davis

Creating a Course Web Site Using

Potrebbero piacerti anche