Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.
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)
Creating a folder if you are in the Multimedia Lab (Gutman 3rd floor) • If you are working in the Multimedia lab rather than anywhere else in Gutman or at home, you • will create your new folder on the e drive rather than the c drive
E drive • The new folder should be your name in lowercase letters and no spaces
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 • Now that you are in Dreamweaver, go to the Site menu • Select Manage Sites • Select New • 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. • Under New select site
Next you will define your 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 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 email address eg. johnstca • Password: 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 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 You can look at your dreamweaver page in different views • Split view gives you the html code ( i.e., the language dream weaver writes in to create your document), design view which is just the dreamweaver page and you don’t see html or code view which is just html code that is writing what you are making
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 pageproperties • 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 In the properties bar, click on the yellow folder next to the link button 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
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 http://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 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 http://gseacademic.harvard.edu/~johnstca/indexhprt.html If it’s wrong check for typos etc. and then try again
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 Microsoftword 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 • http://webdesign.about.com/cs/dreamweaver/a/aadwbuildsite.htm