DreamweaverDreamweaverweb page development softwareweb page development software

1. Creating a folder on the hard drive – c drive

Go to the c drive under my computer on the desktop

Create a new folder by going to file - new – folder

Save your new folder as your name using lowercase and no spaces

The computers in Gutman are wiped clean after every logout so save your

work to disk (the computer you are working on will not save your folder once you log out)

Opening Dreamweaver 8

Click on start button

Go to programs

Macromedia

Macromedia Dreamweaver 8

(there are older versions but these instructions are for Dreamweaver 8)

Dreamweaver start page

Dreamweaver 8 is a webdevelopment tool, enablingusers to efficiently design,develop and maintainstandards-based websites andApplications.

Dreamweaver uses hyper-textmark-up language (html)

Setting a Site NameEvery file you create in Dreamweaver must be saved to a site folder. You have alreadycreated a site folder on the desktop (c drive or e in multimedia lab), and named it.

Now that you are in Dreamweaver, go to the Site menu

Select Manage Sites

Select New

Under New select site

Click on advanced (not basic)

The category should be at local info

Write your name where it says site name with no capitals and no spaces

Click on the yellow folder next to local root folder and select the folder you made on the c drive earlier

Check Enable Cache. Click OK, click OK again

Next you will define your site….

A new dialogue box will appear, click Done

Defining How to Connect to Harvard’s Server

Next you want to define how to connect to Harvard’s server so that you can upload the projectyou make in dream weaver onto the Web.

Every student has 20MB of free server space on gseacademic.harvard.edu

You will be using File Transfer Protocol (FTP) software to upload your entire site folder to theserver. (On Dreamweaver 8 you can do this directly through Dreamweaver – with older versionsyou had to upload documents separately from dreamweaver.)

To access your server space, you will connect to the servergseacademic.harvard.edu

Then you will enter your user name and password to get to your server space

Username: beginning of your harvard email address eg. johnstcaPassword: your mulberry email password

Setting remote info

Go back to the site tab on the tool bar

click manage sites again From the list, select the site you

have already created (eg. samjohnston)

This time, click edit (not new) and

the site definition box will appear which you used before to define your site (make sure you are on the advanced, not the basic tab.)

Now, you are going to select remote info (not local info like before)

Under the access bar, select FTP

Under access you have selected FTP

FTP host bar type gseacademic.harvard.edu

Under host directory type public_html

Under user enter your email user name

and under password your email password

You can hit test to see (if says successful good…if not you have a typo)

If the test is fine hit okYou might get a dialogue box telling you the cache has been recreated, hit ok.

A new dialogue box will appear, hit done

Viewing your filesIn the right hand side of your dream weaver page, now you will be able to see local view (the file folderyou’ve created so far)

and remote view (the file folder that will be uploaded to the web).

But, you haven’t created any files yet so let’s do that next.

Think of dream weaver as the canvas where you are going to create your work andFTP as the means by which you can display it.

Dream weaver has many of the features that Microsoft word has (e.g., create table)so don’t worry about it being too unfamiliar.

You are going to want to know how to do five things in Dreamweaver

1. Open a new page and modify its appearance

2. Insert an image

3. Create a hyperlink

4. Make a table

5. Preview in a browser

Creating your index page

In dream weaver you are going to open a new html page by either picking Create new Html from the list in front of you

or

going to the file tab

selecting new

When the box appears select

html and

click create

Your dreamweaver page

Split view gives you the html code ( i.e., the language dream weaver writes in to create your document),

or code view which is just html code that is writing what you are making

You can look at your dreamweaver page in different views

design view which is just thedreamweaver page and you

don’t see html

Saving your index page

save your new page as index.html

Go to file save as (it should go right to the folder with your name you created on the c drive at the beginning) and type where it says file name: index (it will save to the site you already created (eg. samjohnston)

Under the save as type bar scroll and select html Documents

Hit save

Modifying page properties

Go to the tabthat saysmodify andselect pageproperties . A new box willappear. Makesure thatappearance isselected

Now you can seta color for yourtype and set abackground

Click Ok.

Playing around with the styleHere is where youcan see that dreamweaver is a lot likeMicrosoft word.

Type some text andhighlight it

Now play around with the property bar at the bottom of your screen to change the font, size, style, color etc.,

Inserting an image

Go to google images, clickimages and type inA subject for an image you want , hitreturn

Right click on the image you likeAnd choose save pictureas, find the folder you have createdon the c drive under your name, and

save your image to your folder by naming it and saving it as a jpeg (if it saves as a .gif or .png and you don’t want to change it to a .jpg that’s ok – it just means that that is the format your image was created as)

Image continued

Go to the InsertTab on the toolbar.

Scroll down andclick image

A box will appear.Inthe Files of type barscroll and select allfiles

Your image whichyou have just savedshould appear

Highlight, the namewill now appear in the filename bar.

Accessibility

In dreamweaver 8 a dialogue box appears asking you if you want to create alt text

for your image. This is an opportunity to create a written description of the image for

visually impaired users of your web-site. The can use text to speech software to

read the description of the image. Most government agencies now have

accessibility standards on their web resources that require alt text. All public

schools require by law that students have access to the curriculum to the maximum

extent possible. If you are using web pages in your teaching and not using alt text,

then you are not complying with this law.

Type in a short description of the image you are using and you can provide a link to

a longer description if one exists, then click okay

Resizing your image

You can resize your

Image without changing

the scale by holding down

the shift key while you

drag from the bottom right

hand corner

Creating a linkCreate a second page by going to File, new select html (it should default to this) and then click create

Now type some text on your second page

Save this page as second.html By typing second in the file name bar and scrolling to HTML in the Save as type bar, click save (it should save to your site folder)

Go back to your index page (first page you created). Type on that page “click here to go to second page”. Highlight what you have just typed

This will bring up a dialogue box and allow you to select the second.html page you have just saved.

Click on second.html

And click ok

In the properties bar, click on the yellow folder next to the link button

Preview in a browser

You won’t be able to see your link working until you preview in a browser.

Click on the button that looks like a globe and select preview in iexplorer, preview in firefox or

edit the browser list and add other browsers if you want to see how your website is going to look

in safari, netscape etc.,).

This will let you see your website in different browsers and you can test your link.

Create a link to a page you didn’t createYou might want to create an external link on your website to a website such as your past work place which is alink you yourself have not created.

Again you will type text, highlight it and put the link address in the link bar.

In the same link space in the properties bar which you used before, instead ofclicking on the folder icon to the right, you will type in (or cut and paste in) theURL (link) for the site you want to link your web project to. You will need to put inhttp://www.atutor.ca or whatever the site is – you need the http:// part). If you want the link to open in a new browser page (then below where you enter the link under target, select _blank

You can now save changes and preview your new link in a browser.

Making TablesNow you want to make some tables. Go to theinsert tab button on thetoolbar, scroll down and selecttable.

One strategy whichworks for manipulatinginformation is to insert atable inside a table. Your first table you cantreat like your backgroundby creating one row andone column, setting yourtable width to 100 andthen choosing percentinstead of pixels from thescrolling option beside thetable width bar, andselecting zero for yourborder thickness so you haveno border.

Tables continuedOnce you’ve created your background table you can insert a table within yourtable by putting the cursor inside the table you’ve created and going to inserttable. Now you can change the number of cells, merge cells, add background color all using theproperties bar and the modify table tab

Changing Table Properties

You will have to specify differences for your inner table if you do not want it to take on the

properties of your outer table.

Look down at the information in the properties bar to check if you have properly clicked on the

right corner of the table you want to edit it.

Notice the property bar above is for table one and below is for table two

Uploading your dream weaver document to your server space

Next you want to put your dream weaver creation upon line (save before you do anything)

You should see two panes on your dream weaver canvas. On the right click on the connection plug

Now you will just see public_html folderHarvard site on the left sideOn right local files (on your computer)

If you go to remote view instead of local view (the bardirectly to the right of the bar with your folder andname) you will see the harvard server. Local viewshows you what you have placed on your computer. Remote view shows you what is on the Harvardserver.

You will be asked if you want to put the whole sitefolder up or just some files.

If you say yes, it will upload the entire site folder and if no it will upload just some files which you must select.

You can see that your dreamweaver page is now visible in the remote view

Now go into internet explorer or another web browser and test the web address to see if you have successfully uploaded your work

http://gseacademic.harvard.edu/~johnstca/indexhprt.html

If it’s wrong check for typos etc. and then try again

Your dreamweaver document is now a web site

Tips and Tricks

The following are some additional pieces of information

and recommendations to make the process easier or

your pages fancier.

Creating an anchor

Create the anchor by going to theAnchor sign. A box will appear. Name the anchor (eg. bottom)

Go back to the space where youwant to create the link that when youclick it it will go to where your anchoris, something and highlight. NowIn the link bar (which you’ve usedbefore, type #bottom and hitreturn)

Now preview in browser andyou’re link should connect to youranchor.

Rules of Thumb

You can go back to dream weaver and continue to design your webpage. Save yourwebpage to disk after each session you work on it and then upload it to thepublic server. You can upload it each time but if you treat the public folder like a storagespace you will have to re-upload documents every time you make changes.

If you are making things in Microsoft word and then you plan on transferringthem to dream weaver, do not save your Microsoft word document as htmland in fact, upload your images and links into dream weaver directly. Thehtml code in word does not transfer well to dream weaver and so your images and linkswon’t show up when you upload your website. Ideally, work in dream weaver as muchas you can for the big stuff even if you use Microsoft to type out your text and createyour tables.

If you want to work from home you can download a free thirty day trial of dreamweaver.

Other programs which can help you make your web page

Photo shop is a good program to get to know if you want to edit your images. It is

available on all GSE lab computers.

If you want to go low tech for an image but don’t want to just save your image (maybe

you want the image and some of the page) you can use the print screen button on your

keyboard (upper right hand side) or the grab tool on a mac. This will print the entire computer

screen you are looking at. You can then go to paint under programs, accessories, paint and

click paste.

You can then play around with the screen you’ve printed, cut out what part you like,

spray paint, whatever and then cut and paste back into your dream weaver document

(that is what I used to make this power point presentation).

Dreamweaver online resources

http://webdesign.about.com/cs/dreamweaver/a/aadwbuildsite.htm