Get documents about "The Quick _ Dirty guide to Dreamweaver
Document Sample
The Quick & Dirty guide to
Dreamweaver MX 2004
By Chris Dillon 04/03/10. Version 6.5. Latest version at: www.ucl.ac.uk/isd/staff/fiso/ah/courses
1. Logging in and file management
Login to WTS.
Open Windows NT Explorer (Start | Programs | Windows NT Explorer).
Create a folder (File | New | Folder) on the N: drive (immediately under N:) called
website and a folder called html.pub if it does not already exist, on the R: drive.
Close Windows NT Explorer.
2. Setting up a site in Dreamweaver MX 2004
Open Dreamweaver MX 2004 (Start | Programs | Software A-H | Dreamweaver |
Dreamweaver MX 2004).
Go to Manage Sites on the Site menu and click New and then Site.
Click the Advanced tab (at the top of the dialogue box).
Site Name is My Homepage
Local Root Folder is n:\website
Remove the tick from the Enable Cache box.
Click Remote Info in the pane on the left.
Select FTP in the Access drop-down box.
FTP Host is ftp.ucl.ac.uk
Host Directory is html.pub
Login is your UCL User ID. Password is your e-mail password.
Click OK.
Note: If your e-mail password changes, you will need to change your site password too, by going to
Manage Sites on the Site menu and clicking Edit.
3. Writing your first HTML page
Create an empty file, if there is not already one open, by going to File | New. Make sure that
Basic Page and HTML are selected. Click Create.
Type the following:
Homepage
This is my first HTML page.
I am [first name] [surname].
Resources
Google!
IS
HTML
Images etc.
1
In the Title row (at the top of Dreamweaver), replace Untitled Document with Homepage
of [your name]. This is what appears in the browser’s Title Bar and, if the page is
bookmarked, it will appear on the Bookmarks or Favorites menu in the browser.
Save the file as index.htm by going to Save on the File menu. Make sure that it is saving
in the n:\website folder. Click Save.
Go to the View menu and select Code and Design. This view is useful for trouble-
shooting. You can drag the line between the views up and down, and edit the page in
either view. Go to Design on the View menu to return to the original view.
Note: If a change is made in Code view you need to click in Design view before it takes effect.
4. Headings h1-h6
Display the Properties Window, if it isn’t already open, by going to Properties on the
Window menu. It appears at the bottom of the screen.
Highlight Homepage in the document and select Heading 1 in the Format box in the
Properties Window.
Highlight Resources and select Heading 2 in the Format box.
Note: h3-h6 also exist — the higher the number, the smaller the heading.
5. Formatting text
Highlight your surname and click the B icon in the Properties Window. Your surname
should appear in bold.
Tip: Do not use underline in HTML files, otherwise your users will think it's a link!
Highlight Google!, IS and HTML, and click the icon in the Properties Window with the
three squares and the three lines. You should now have a bulleted list.
Click above Resources and go to Insert | HTML | Horizontal Rule on the Insert menu.
You should now have a line across the page.
Save the file by going to Close on the File menu. Click Yes to save the changes.
Note: It is good to use plenty of headings and lists to make your pages easy to understand, and
accessible to disabled users.
Create a new file by going to the File menu and click New. Click Create.
In the Title row, type Images. Also create a Heading 1 with the text Images.
Save the file with the name more.htm
Tip: Keep file and folder names simple — only use 0-9, lower case a-z and hyphen. Do not use spaces.
6. Links
Still in more.htm, type the following line:
Return to homepage.
Highlight Return to homepage and in the Link box in the Properties Window, type
index.htm
2
Close the file by going to Close on the File menu. Save any changes if prompted.
Double-click index.htm in the right column to open it, highlight Images etc. and in the
Link box, type: more.htm
Note: In the case of the following links to other sites, you should select _blank in the Target box
(to the right of the Link box), so that the other site opens in its own window. Otherwise the visitor
to your site would have to click the Back button to return to your site.
Highlight Google! and in the Link box, type http://www.google.co.uk/
Highlight IS and in the Link box, type http://www.ucl.ac.uk/is/
Highlight HTML and in the Link box, type
http://www.homepages.ucl.ac.uk/~ccaacdi/knowhow/building.htm#html
Highlight your name and in the Link box, type mailto: followed immediately by your e-
mail address.
You can use similar techniques to link to any type of file — including PDFs, Word documents,
images and sound files (.wav or .mp3).
7. Putting your files on www.homepages.ucl.ac.uk
Close index.htm by going to Close on the File menu. If prompted to, save any changes.
In the Site pane (on the right, go to the Window menu and click Site if it is not there).
Make sure the drop-down box at the top of the Site pane says Local (NOT Remote) View.
Click the refresh icon (circular arrow, second icon from the left).
Highlight the file index.htm and click the blue up-arrow Put Files icon.
Do not include dependent files, if prompted to.
Highlight more.htm and click the same icon.
The UCL homepages server requires an additional step not normally necessary on other servers:
Go to Start | Programs | Software I-P and click Publish Web Pages.
Again, use your UCL User ID and e-mail password.
You should now be able to see index.htm and more.htm in Internet Explorer at:
www.homepages.ucl.ac.uk/~ccaacdi [or whatever your User ID is!]
Are your links working?
If not:
Open the file whose links are not working in Dreamweaver.
Fix the link.
Close the file, saving the changes.
Put the file again.
Reload the page in the browser by navigating to it and pressing F5.
Notes:
The “HTML” link goes to a place (an “anchor”) in an HTML file, not to the top of the file. If you
want to put an anchor in a file, go to the Insert menu, click Named Anchor and give it a name.
There must be no spaces or uppercase letters in anchor names. A link to an anchor has a #
before the anchor. It is not necessary to put an anchor at the top of a document, as linking to the
3
document’s own file name e.g. index.htm will reload e.g. index.htm at the top.
8. Images
In Internet Explorer go to www.ucl.ac.uk/ls/specdig and find an image you like. Right-
click on it and click Save Picture As. Give the image a name and save it in n:\website.
In Dreamweaver return to the bottom of more.htm.
Go to the Insert menu, click Image, locate your image and click OK.
Click the image to select it. Enter a description of the image in the Alt box in the
Properties Window.
Note: You can resize the image by dragging its corners. However, this should really be done in an image
processing program such as Photo Shop Elements (Start | Programs | Graphics Packages | Photoshop |
Photoshop Elements. If you resize an image by dragging its corners in Dreamweaver, it slightly slows
down the loading of your page. Images should be JPEGs or GIFs and not larger than 150Kb (check the
size in Windows NT Explorer).
9. Tables
The easiest way of controlling where images and text appear on an HTML page is to use a table.
At the end of more.htm, go to the Insert menu and click Table.
Enter the number of rows and columns (start with 3 and 2 respectively) you require.
Border should be 0 (NOT 1), as you do not want to be able to see the table's borders.
Set the table width to 100 percent.
Click your image and use Edit | Cut and Edit | Paste to move your image into the right-
hand cell of your table. If the image is large, you may need to drag the left edge of its cell
a little to the right to open up the left hand cell. Type a little text in the left hand cell, and
you will see how it all works. By default, text appears in the middle of a cell. Change
Default in the Vert box in the Properties Window to get the text to appear at the top of the
cell. You may need to click the little triangle, bottom right of the Properties Window to
expand the Properties Window so that you can see the Vert box.
Table formatting
If you want another row in your table, click in the last cell and press the Tab key.
To merge cells, select the row by clicking to the left of it. Wait until the mouse cursor
becomes a small arrow pointing right. Right-click and select Table and then Merge Cells.
10. Colours
You can change the background page colour and the font colour on an individual
webpage by first right-clicking on the page. Click Page Properties. Click the squares
next to Background color and Text color and select the colours.
You may also change the colour of a small amount of text by selecting it, and clicking the
square two to the right of Size in the Properties Window.
You may change the colour of the background of a particular cell by selecting all of the
contents of the cell with your mouse and selecting a colour in the Bg square two to the
right of Header in the Properties Window, which needs to be expanded by clicking the
4
arrow in its lower right corner.
11. Viewing and deleting files on the server
In the early days of learning HTML, you may wish to delete files on the server if you do not want
the search engines to find them.
Select Remote view in the Local view drop-down box in the Site pane on the right. (Press
F8 if the Site pane is hidden.)
If you are not already connected to the server, click the Connects to remote server icon
(first from the left; looks like two plugs).
Highlight any file(s) you wish to delete and press the Delete button on your keyboard.
Post-course exercise
Have a look at www.phon.ucl.ac.uk/home/wells/ or faculty.arts.ubc.ca/sechard/home.htm
for inspiration.
Write down the information you want on your site, organising it into hierarchies.
You will need to create a menu in a cell on the left (possibly top, if you do not have many)
of a table with links to all your main pages.
Are you going to put up any articles (in Word 2002 or PDF format)?
Have you any pictures you want to put up on your site?
In both cases, move them to n:\website and rename them, removing all spaces, upper case
letters and special characters.
What colour do you want the background of your pages to be? (Light colours are often
best …)
Create an empty page, called master.htm and get it just as you want it.
To create a new page, make a copy of master.htm by going to Edit | Copy and then Edit | Paste.
Rename the file you create, by clicking it and pressing F2.
Templates
In the long term, you will find it helpful to use a Dreamweaver template so that you can store
elements (i.e. the header, footer and site navigation menu) that should be the same on each
page in one file. If, for example, you want to add or remove a link from your navigation menu or
change your header or footer, you can update all the files in your site by editing the template file.
Save the header, footer and menu you want as a Dreamweaver template, by going to File and
clicking Save As Template. Name the file template and then click Save. Dreamweaver
templates live in a subfolder called Templates.
Now you need to decide which parts (“regions” in Dreamweaver speak) of the page will change.
The content area, probably in the right pane of your table, will certainly change in each page
you create using the template. Therefore click in it and go to Insert | Template Objects |
Editable Region. Name this region content. There may be other regions in the pages’ headers
5
and footers, e.g. a heading or a current date, which you want to be different on each page.
Create appropriate editable regions for these with Insert | Template Objects | Editable Region.
Beyond this course
You should now be in a situation to create basic Web sites. Use your area on the UCL server to
practise. For more complex Web sites, get hold of the excellent Dreamweaver Part 1 (and then
Part 2) workbooks from the Open Learning Centre or Help Desk.
6
