The Quick & Dirty Guide To Dreamweaver

The Quick & Dirty guide to Dreamweaver 8

By Chris Dillon. Version 7.1, 28/4/11. Latest version at: www.quickanddirty.org.uk This shows you how to set up a personal website in your UCL Web space, but most of it applies to any Dreamweaver website.

1. Logging in and file management  Login to WTS. (This guide should work for Cluster and Staff WTS.  First display your T: drive (which does not usually display) by going to run Start | Program | Utilities | Map Central Email-Unix Filestore (T drive).  Open Windows Explorer (Start | Programs | (Accessories |) Windows 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 T: drive.

2. Setting up a site in Dreamweaver  Open Dreamweaver 8 (Start | Programs | Software A-D | Dreamweaver | Macromedia Dreamweaver 8).  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), if necessary.  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 Note: If you are setting up access to a departmental site the host directory is usually www.  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, clicking Edit and then the Advanced tab if necessary.

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 in the left pane and HTML in the middle pane are selected. Click Create.

Type the following:

Homepage This is my first HTML page. I am [first name] [surname]. Resources Google! ISD Anchors Images etc.

 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. 1  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 pane, 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 pane.  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 pane. 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 Anchors, and click the icon in the Properties pane with the three squares and the three lines. You should now have a bulleted list.  Click above Resources and go to 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 or pressing Ctrl+W. 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 clicking 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 pane, type index.htm 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 ISD and in the Link box, type: http://www.ucl.ac.uk/isd/  Highlight Anchors and in the Link box, type: http://en.wikipedia.org/wiki/Fukushima_I_nuclear_accidents#References  Highlight your name and in the Link box, type: mailto: followed immediately by your e-mail address. Note: 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.ucl.ac.uk  Close index.htm by going to Close on the File menu. If prompted to, save any changes. 2  In the Files pane (on the right, go to the Window menu and click Files 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 File(s) icon. Do not include dependent files, if prompted to. Highlight more.htm and click the same icon.

The UCL server requires an additional step not normally necessary on other servers:  Go to Start | Programs | Software P-R 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 your browser at: www.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.

Note: The “Anchors” 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 document’s own file name e.g. index.htm will reload e.g. index.htm at the top.

8. Images  In your broser go to http://www.flickr.com/creativecommons and find an image you like. Right-click on it and click Save Image/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 pane.

Note: You can resize the image by dragging its corners. However, resizing should really be done in an image processing program such as IrfanView (see the Quick & Dirty guide to IrfanView!) or 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 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 pane to Top to get the text to appear at the top 3 of the cell. You may need to click the little triangle, bottom right of the Properties pane to expand the Properties pane 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 coloured square two to the right of Size in the Properties pane.  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 to the right of Header in the Properties pane, which needs to be expanded by clicking the 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. (Go to Window | Files if the Files pane is hidden.)  If you are not already connected to the server, click the Connects to remote host 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.

12. Post-course exercise  Have a look at sites like 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 of a table with links to all your main pages.  Are you going to put up any articles (in Word (.doc NOT .docx!) 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.

13. 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 4 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 depending on the page. 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 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.

14. CSS for font, size and colour CSS (Cascading Style Sheet) offers a more elegant alternative than those outlined in the sections above for the use of font, size and colour etc. on a site. Although it is possible to store the CSS commands in your HTML files, it is usually best to store them in a separate .css file which is then attached to HTML files or your template.

Tag styles CSS may be used to set all instances of a particular tag (e.g. h1 for Heading 1) to a particular colour, size and font. This approach is useful for giving a site a consistent look.  With an HTML document or template saved and open, create a style for your Heading 1s by going to Window | CSS Styles and clicking the + at the bottom right of that window.  Select the Tag radio button.  Select h1 in the Tag drop-down box.  Make sure Define in is set to New stylesheet file and click OK.  Make sure you are in the same folder as your homepage and name the file styles. Dreamweaver will add the .css extension.  The window that now appears allows you to set Heading 1’s font, size, color etc.  All Heading 1s in your HTML document or template should now have adopted the tag style you have just created.  To add more styles to your CSS file, click on + again, select Tag and select the tag you want to set up. This time it presumes you want to save your style in styles.css.  To attach other HTML documents to your CSS file, click the chain icon to the left of +. Click Browse, locate styles.css and click OK.

Class styles CSS may also be used to apply such a style to any piece of text, whatever its tag. This is useful, for example, when one has a style one wants to apply to a paragraph tag, a bullet tag and a table row tag. If a class style is applied to text which already has a tag style, the class style will dominate the tag style. The only difference when you are setting up class styles is that one clicks the Class radio button instead of the Tag radio button in the Tag Style procedure above.  To apply a class style to a piece of text, highlight the text and select the style in the Style drop-down box in the Properties pane.

15. Beyond this course You should now be in a situation to create basic Web sites. Use your area on the UCL server to practise. There are other useful resources at: www.ucl.ac.uk/isd/staff/websites