Dreamweaver web 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 web development tool, enabling users to efficiently design, develop and maintain standards-based websites and Applications. Dreamweaver uses hyper-text mark-up language (html)

Setting a Site Name Every file you create in Dreamweaver must be saved to a site folder. You have already created 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 project you 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 the server. (On Dreamweaver 8 you can do this directly through Dreamweaver – with older versions you had to upload documents separately from dreamweaver.) To access your server space, you will connect to the server gseacademic.harvard.edu Then you will enter your user name and password to get to your server space Username: beginning of your harvard address eg. johnstca Password: your mulberry 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 user name and under password your password You can hit test to see (if says successful good…if not you have a typo) If the test is fine hit ok You might get a dialogue box telling you the cache has been recreated, hit ok. A new dialogue box will appear, hit done

Viewing your files In the right hand side of your dream weaver page, now you will be able to see local view (the file folder you’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 and FTP 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 the dreamweaver 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 tab that says modify and select page properties. A new box will appear. Make sure that appearance is selected Now you can set a color for your type and set a background Click Ok.

Playing around with the style Here is where you can see that dream weaver is a lot like Microsoft word. Type some text and highlight 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, click images and type in A subject for an image you want, hit return Right click on the image you like And choose save picture as, find the folder you have created on 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 Insert Tab on the toolbar. Scroll down and click image A box will appear.In the Files of type bar scroll and select all files Your image which you have just saved should appear Highlight, the name will now appear in the file name 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 link Create 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 create You might want to create an external link on your website to a website such as your past work place which is a link 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 of clicking on the folder icon to the right, you will type in (or cut and paste in) the URL (link) for the site you want to link your web project to. You will need to put in or whatever the site is – you need the 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 Tables Now you want to make some tables. Go to the insert tab button on the toolbar, scroll down and select table. One strategy which works for manipulating information is to insert a table inside a table. Your first table you can treat like your background by creating one row and one column, setting your table width to 100 and then choosing percent instead of pixels from the scrolling option beside the table width bar, and selecting zero for your border thickness so you have no border.

Tables continued Once you’ve created your background table you can insert a table within your table by putting the cursor inside the table you’ve created and going to insert table. Now you can change the number of cells, merge cells, add background color all using the properties 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 up on 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 folder Harvard site on the left side On right local files (on your computer) If you go to remote view instead of local view (the bar directly to the right of the bar with your folder and name) you will see the harvard server. Local view shows you what you have placed on your computer. Remote view shows you what is on the Harvard server. You will be asked if you want to put the whole site folder 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 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 the Anchor sign. A box will appear. Name the anchor (eg. bottom) Go back to the space where you want to create the link that when you click it it will go to where your anchor is, something and highlight. Now In the link bar (which you’ve used before, type #bottom and hit return) Now preview in browser and you’re link should connect to your anchor.

Rules of Thumb You can go back to dream weaver and continue to design your webpage. Save your webpage to disk after each session you work on it and then upload it to the public server. You can upload it each time but if you treat the public folder like a storage space 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 transferring them to dream weaver, do not save your Microsoft word document as html and in fact, upload your images and links into dream weaver directly. The html code in word does not transfer well to dream weaver and so your images and links won’t show up when you upload your website. Ideally, work in dream weaver as much as you can for the big stuff even if you use Microsoft to type out your text and create your tables. If you want to work from home you can download a free thirty day trial of dream weaver.

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