Date: March 25, 2008 Version: 2.0

Transcription

1 Date: March 25, 2008 Version: 2.0

2 Revision Control Document Control Project Name Project File Number Document Title Dreamweaver in the CBE Electronic File Name DREAM_WEAVER_v2.doc File Location Last Updated March 25, 2008 Document Author Michael Ohly Revision History Version Date Author Description 0.1 July 11, 2005 Mike Ohly Initial Draft 1.0 August 5, 2005 Mike Ohly Revisions 1.1 October 3, 2005 Mike Ohly Revisions based on Media Services suggestions. 2.0 March 25, 2008 Mike Ohly Updated connection settings Information Technology Services Page 2/16 11/26/2008

3 Table of Contents Document Control... 2 Revision History... 2 TABLE OF CONTENTS...3 INTRODUCTION...4 SETTING UP DREAMWEAVER...5 Managing the Site... 5 EDITING IN DREAMWEAVER...11 Opening the files Saving Adding Hyperlinks Insert Menu Uploading the Changed Files OTHER ISSUES...16 File Size File Duplication Information Technology Services Page 3/16 11/26/2008

4 Introduction The purpose of this document is for school tech s so that they know how to sync dreamweaver with the schools website. There is also some reference material on editing the site, but is only meant for reference and not a comprehensive guide. Templates were prepared for every school. Since Spring 2005, most schools have transferred over to this new design. In the past, Media Services encouraged the use of Microsoft Word to edit web pages. Newer versions of Word made this process very difficult In order for this method to be successful, we have had to develop the new templates using web editing software. The new school webpage template is clean, uncluttered and easier to edit using a Web Editor. Web Editors are inexpensive, and we are confident that schools will find it a much more efficient way to work if they are not already doing so. Please ensure that you have access to Macromedia Dreamweaver. If you are unable to obtain this software and have no web support at your school, please contact Media Services about maintaining your site for you. If you want to start from scratch for your website you can download your schools original template from the following link: Media Services has created several generic buttons that can be added to your website, these can be downloaded from the following link: Information Technology Services Page 4/16 11/26/2008

5 Setting up Dreamweaver Managing the Site Once you have launched Dreamweaver the first time you will want to configure your site. - First go to the Site menu and select Manage Sites (older versions will say Edit instead of Manage ) - Then select new, it will prompt you to select the type, you will still want to click on Site When the window comes up click on the advanced tab at the top. First you will configure the local settings. In these examples I will use Douglasdale school (B346), when you configure it use your school s code. - Enter in a name for your site, this is only for identification for you, so you can name it whatever you like. - Local Root Folder This is where the files will be located that you will be working on before you sync them to the server. You can have these saved on a network drive as well, just browse to the location. - HTTP address put down your schools website address, because this is douglasdale I used - for your website just change the number at the end to your school code. - Select Remote info in the column on the left. - Set the Access to FTP Information Technology Services Page 5/16 11/26/2008

6 Once you have set access to FTP the window will change to the same as above. Use the following settings for the remote configuration (where ### represents your school code). FTP Host: waftp.cbe.ab.ca Host directory: b### Login: cbeorg\inetmgr### Password: Call the helpdesk( ) if you need your inetmgr password. You will have to be the web delegate. Click on Firewall settings, select site and set the Firewall Port to 45. Click ok and close the preferences window Click on the Test button to confirm the settings are correct (mostly worried about the password). Click ok to close the site definitions window, then click ok to close Manage Site Window. For Dreamweaver CS3 please see next page. Information Technology Services Page 6/16 11/26/2008

7 These settings are for Dreamweaver CS3 Then proceed to next step. Information Technology Services Page 7/16 11/26/2008

8 - We re now ready to connect and sync with the server. On the file panel click on the expand/collapse button Please ensure expand/collapse is always open when uploading, so you can make sure local and remote are the same. - A File window will open showing remote site and Local Files. Click on the connect Button and this will show all the files on the server. - Now we re going to sync all the files from the web so you have a copy to work with locally. Click the Get Button and it will start downloading all the files. Information Technology Services Page 8/16 11/26/2008

9 Once the site is finished downloading you can shrink the file window again by clicking the expand/collapse button. Information Technology Services Page 9/16 11/26/2008

10 Your site is now ready for you to start editing locally. Information Technology Services Page 10/16 11/26/2008

11 Editing in Dreamweaver Opening the files In the file panel at the right now you have all the files that are associated with the site. To edit any of these pages all you have to do is double click on them in the file pane. You can open up multiple files and to navigate between them just double click on them in the file pane. You can start off editing text content in the design window. You will notice that the code view at the top will also reflect whatever you are working on. Generally though you should select just the design view, as dreamweaver will handle all the coding for you. For modifying your text content you can use the properties window at the bottom of the screen to make any changes you want to the format. If you look in the code view at the top you will see how it uses HTML tags to reflect formatting like bold, italics, size etc. Information Technology Services Page 11/16 11/26/2008

12 Saving I m sure I don t need to remind you to save often while working. If you are working with multiple pages you also have the option of Save All so that you don t have to go to each file individually to save. Adding Hyperlinks If you want to make a hyperlink in the text while you are working, all you have to do is select the text that you want the link to be, then in your properties window put the actual link in the Link field. If it is another page on your site you want to link to, you can click on the folder to browse to the file you want to select. For Linking to external sites, enter Target_blank in the Target field to open a new window, so that users do not leave the CBE site. Information Technology Services Page 12/16 11/26/2008

13 Insert Menu The insert window has multiple functions, in the beginning you will deal with the 4 most basic options (feel free to play with the other options as well). - Hyperlinks You have to have either text or an image selected first and it will allow you to set the link. - Links Same as the hyperlink you first to have content selected to act as the button. - Images When inserting images into the body make sure that you have the picture file in the Images folder of your site. When updating the site it will have to send this image file to the server as well (unlike word and other word processors it will not embed the file). - Tables When inserting tables it is very similar as to how tables work in word processors. Information Technology Services Page 13/16 11/26/2008

14 Once you have inserted a picture or other object into the document, if you select it you will notice that the properties window will change. With the picture above you are able to see the Source file, adjust size, make it a Hyperlink. With the Alt field any text you insert here will show up as a popup when you hold the mouse over it in a web browser. Information Technology Services Page 14/16 11/26/2008

15 Uploading the Changed Files Once you have made all the changes that you wanted and now are sure that you want to update the site on the web you upload it to the server. Select any of the files that you have changed in the file window(can hold down shift or ctrl to select multiple files). Then click on the put files button. If you have added any images or other objects to the file it will prompt you to Include dependant files? Select No if you select Yes it can cause duplication on the web server and cause space issues. You will have to select and put all the files. Information Technology Services Page 15/16 11/26/2008

16 Other Issues File Size When creating web sites you have to be conscious of the size of your files. When adding images to your sites you can resize them in Dreamweaver, but this only changes how they are displayed it will still load the entire image, also when resizing in Dreamweaver the image will look horrible, it is best to resize in an external program. For example if you have a 1 meg picture from a digital camera and put it onto your website it will download that entire image every time the page loads slowing things down considerably (even if you are only displaying the image as a 100x100 pixel size). What you should consider doing is taking any large images into an image editor (photoshop, iphoto, graphic converter, etc.) and resizing in the editor, then save it as a web image to optimize the file size. Once you have saved the file put it into your images folder for the site. File Duplication Remember when uploading, when it prompts to upload dependant files to select No as this will cause file duplication on the server. Information Technology Services Page 16/16 11/26/2008