Dreamweaver Website 1: Managing a Website with Dreamweaver

Transcription

1 Page 1 of 20 Web Design: Dreamweaver Websites Managing Websites with Dreamweaver Course Description: In this course, you will learn how to create and manage a website using Dreamweaver Templates and Library Items. This makes it easy to quickly build a complex website, while minimizing the amount of time that it takes to update and maintain your site in the future. Intended Audience: This course is intended for OU faculty, staff, and students who want to publish a multi-page website. Prerequisities (if any): You should complete Dreamweaver 2: Webpages before beginning this course. Required Software (if any): Dreamweaver MX lists for $399, but it is available for only $99 (academic discount price) in the OU Bookstore. You can also download a 30-day free trial evaluation copy from the Macromedia website. Required Hardware (if any): No special hardware is required for this course. Dreamweaver 2: Websites Introduction 1. Managing a Website with Dreamweaver 2. Creating a Folder and Saving Images 3. Defining a Site in Dreamweaver 4. Working with Templates and Library items 5. Adding Images to the Library 6. Creating a Navigation Bar in the Library 7. Creating a Template for Your Website 8. Modifying a Template 9. Editable Regions & Stylesheet for the Template 10. Using a Template to Create Webpages 11. Creating More Webpages 12. Modifying the Navigation Bar 13. Creating a New Template & Adding Pages 14. Checking Site Links, Files and Images 15. Synchronizing and Publishing Class Handout Dreamweaver Website 1: Managing a Website with Dreamweaver Last week, you created a webpage in Dreamweaver and published it in your faculty-staff webspace. That webpage had a link to a style sheet, which is a special file that helps web browsers like Explorer and Netscape to display your page the way that you want (for example, you can set your font styles and sizes using a style sheet). This week we will talk about websites. What is a website? Well, a website is really just a collection of webpages that are linked to one another. A website usually has a home page, and there are links that allow you to move from page to page within the website. This page-to-page navigation is one of the biggest challenges in a building a website: how is a visitor to your site going to get from one page to another? And how are you going to make sure that your visitors know how to do this? Another concern when building a website is how to create a "look and feel" that is consistent throughout the site. The website should have a consistent design while at the same time allowing each page to make its own distinctive contribution to the site's content. Finally, in addition to defining your website you also need a way to maintain your site and to update it easily. You

2 Page 2 of 20 need to be able to make sure that the webpages are correctly published, and you want to be able to make changes both to the content of individual pages and to the design of the site as a whole. Dreamweaver is an excellent tool for all of these purposes. Here are the features we will learn about today: using Templates to create new webpages easily and to perform global updates to the site using Library items to centralize content that is used on more than one Template using Dreamweaver's "check links site wide" to confirm that all internal links are functioning using Dreamweaver's "orphaned file" report to make sure that all files are included in the site's navigation using Dreamweaver's "synchronization" procedures to manage the publishing of your website In order to do this, we are going to create a very simple site. Let's start by creating a folder for the website and grabbing some images from the Internet. Dreamweaver Website 2: Creating a Folder and Saving Images You will want to create a folder on your computer where you can keep your website for this workshop. Go ahead and create a folder in My Documents called "OU Webpage" (if you are looking at the desktop, you can click on My Documents, and then select File - New - Folder. Now that you have a folder ready to go, you will want to right-click on each of the images here in order to save a copy of the image inside your folder. (The images here come from the OU Visitor Center Photo Gallery at

3 Page 3 of 20 You can also find images at The Public Domain Photo Archive at the Gimp Savvy website at another great place to look for all kinds of images. Dreamweaver Website 3: Defining a Site in Dreamweaver So now that you know everything about your OU web server and your path, you can "define a site" in Dreamweaver. When you create a webpage in Dreamweaver, you always begin by defining a site (and later you will begin by opening the site that you have defined previously). Create a folder. When you define a site, you are telling Dreamweaver what folder you are going to keep your webpages in. Luckily, you don't have to name this folder after your dotted name! Your folder on the server might be named "John.Sooner-1" but you do not have to use this same name on your computer. You can create a folder inside MyDocuments and name it whatever you want: MyWeb, Dreamweaver Webpages, OU Webpage, whatever. So, go ahead and create a folder that you will keep your work in. Click on My Documents on the desktop, and then click on the new folder icon or choose File - New Folder to create your folder. Start Dreamweaver. Now you are ready to open Dreamweaver. The first thing you will do is click on the Site menu option along the top of the screen. If you are using Dreamweaver 4 you will see a single dialog box; if you are using Dreamweaver MX you will be taken to a "wizard" that will ask you a series of questions. You will need to supply two kinds of information: information about your local computer as well as some information about your web server (your "remote site" or "host"). Local information. Here is the local information you will need: Site name. You can call the site whatever you want; this is just a name that is internal to Dreamweaver. You might find it easiest just to give your site the same name that you gave to the folder on your computer ("OU Webpage," for example). Local folder. Click on the yellow folder icon and browse until you find the folder you created for your webpages inside the My Documents folder. Click on the folder to open it, then click on the Select button. You will see the name of the folder displayed in the dialog box. HTTP address. The HTTP address is where your pages will be published. For example, the HTTP address of my webpages is: (you can find your HTTP address by checking in the OU Directory or in one of the web directories at faculty-staff.ou.edu or at students.ou.edu). Remote information. Here is the remote information you will need: Access. You will be using FTP access to publish your webpages. Host. The name of your web server host is either faculty-staff.ou.edu or students.ou.edu. Log-in. Your log-in is your OUNet ID (your "4x4"). The OU web server will automatically access your path based on your OUNet ID, so you do not have to actually type the path here. Password. Enter your password. If you are working on a lab computer, you probably do not want to click the "Save password" box. Click OK and Done when you are finished.

4 Page 4 of 20 NOTE for Dreamweaver MX on OU faculty-staff.ou.edu server: Dreamweaver MX will walk you through a 'wizard' program as follows: Site Definition Window. Name your site - OU Webpage 1. You do NOT want erver Technology - Select Option NO Edit Local Copies on my machine, then upload to server when ready - Select Option 1 for using FTP 3. When on your computer do you want DW to store local copies of your files? 1. Select MY Documents/OU Webpage folder 2. Automatically upload files to my server every time I save? - If you choose yes, you will write directly on the server file. If you choose no, you will have to upload your files to the server. How do you connect to remote server? Provide server and account info: How do you connect to remote server? - FTP What is hostname or FTP address - faculty-staff.ou.edu What folder on server to store files? - none What is your FTP login? - OUNetID (4x4) What is your FTP password - OUNetID password Click the TEST button to confirm connection! if successful - continue... Do you want to enable check in/out? - NO for single user site. REVEW SUMMARY PAGE - CLICK OK WHEN DONE. Dreamweaver 4. If you are using Dreamweaver 4, you will now see the Site Page displayed. On the left hand side of the Site Page you will see the files on your local computer. On the right hand side, there is space to display the files on the remote web server. If you want to test your connection to the remote web server, you can click on the "Connect Remote" icon. This will activate a connection to the server and display the contents of your remote folder in the same way that the contents of your local folder are displayed. Dreamweaver MX. If you are using Dreamweaver MX, the local and remote file information is displayed in a panel on the right hand side of the screen. You can use the dropdown menus to view either the local information (the default view) or the remote server file information. You can also move from one site to another using a dropdown menu in this panel. Example of Dreamweaver MX Site Menu - you select your various sites with the pulldown menu option. You can choose Local or Remote View in the right - pulldown menu.

5 Page 5 of 20 Dreamweaver MX Interface - Some main Windows #1 - refers to the Page editing window - whatever you type here will reflect in the HTML window with tag information. #2 - refers to the HTML editing window - whatever you type here will reflect in the Page editing window also. #3 - refers to the Site Manage window - you can view Local and Remote files - from pulldown menu. You can open any site from these pulldown menus. #4 - refers to the Properties Window - most common DW Window - shows information about any selected item in an editing window. It will change based on what object is selected such as image or table info. Dreamweaver Website 4: Working with Templates and Library items Okay, you are ready to get to work on your website! You have defined the site in Dreamweaver. What next? Let's

6 Page 6 of 20 think about what kind of webpages you want to have in this site. We know we want a Home page that provides information about you and your interests - like the electronic business card we made in the previous class. In fact, we can easily copy that info into this new template Home Page. Then we'll need a page for your resume. (so you can give prospective employers a link to your website!) We also might make a page called projects or porfolio. This will give us three pages to work with. So what we want to do is create a main template for our website. We will then 'create pages' from this template that we will save as specific pages such as index.htm, resume.htm and projects.htm. This template that we will create will have two important types of information: Information and images that we want on every page in our website Navigation links for all the pages in our website. This way we can edit the template and this will update the information on each page using that template. If we add a new page to our website later on, we can just edit the template where we setup the navigation links and add that new page lik. It is that easy! So here is a good rule of thumb: any item -- text or image -- that appears on more than one Template should be stored in the Library. In this case, we are creating one template, but if you want to create additional templates that use some of the text and/or images from the 1st template, you should put these items in a library. So we'll start by putting that material in the Library so that it will be ready to use. Dreamweaver Website 5: Adding Images to the Library The directions that follow apply to Dreamweaver MX You can create a library item from any element in the body section of a document, including text, tables, forms, Java applets, plug-ins, ActiveX elements, navigation bars, and images. Start with a blank screen (it will probably say Untitled Document across the top of the screen). We'll do the images one by one, opening them in this page, adding the alt text information, and then depositing them in the Library. Steps for Adding objects to Library So go ahead and open your Library window now: select Window - Library. You'll also want to have your Properties window open, since that is how we will add the alt text information. Open the Properties window by choosing Window - Properties. 1. Select the image to save as a library item. 2. Do one of the following: 1. Choose Window > Library and drag the selection into the Library category of the Assets panel. 2. Click the New Library Item button at the bottom of the Assets panel (in the Library category). 3. Choose Modify > Library > Add Object to Library. 3. Enter a name for the new library item. Okay, let's do the Evans Hall pic. Select Insert - Image and then browse until you find the EvansHall image, which is named evans2_thumb.jpg (unless you changed the name when you saved the image into your folder). Click OK. You should now see the Evans image on the screen. Click on the evans image in order to select the image (when the image is selected the IMG tag in the Tag Selector at the bottom of the screen will appear in bold). Since the image is selected, you will see the image options in the Properties window. Type a verbal description of the image into the Alt box. I also added a border to the image, this will give the appearance of a frame around the image.

7 Page 7 of 20 Now you are ready to drag the image into the Library. What's great about this is that the alt text information is contained inside the image tag, so you can use this image over and over again, and it will always have its alt text information with it. In order to add the image to the Library, just click on the image and drag it and drop it into the Library or use one of the other methods described above under Steps for Adding an Object to the Library. When you first place an item in the Library, it will be untitled. You can give the Library item any name that you want. In this case, I have gone ahead and named the Library item "evans". Notice that the Evans image looks different now. It is a Library image which means that you have to edit it from inside the Library. If you click on the evans image now, you will be prompted to "open the Library" item if, for example, you want to change the alt text information or some other property of the image.

8 Page 8 of 20 But for now you do not need to edit the evans image. In fact, you can delete it, and move on to the next image. Repeat this step for 4 images; add the ALT text and a border of 2 (frame) around the images, so that you will end up with all 4 images stored in the Library. Dreamweaver Website 6: Creating a Navigation Bar in the Library Now we'll make a navigation bar to use on all our pages. We'll do something really simply to begin with, just a horizontal listing of all the site's pages. Since we have not created the pages yet, we cannot make the navigation links. Dreamweaver lets us build the navigation now and add the links later (and we can change the navigation bar later on if pages are added or removed from the website). So I will just create a simple table, with one row and one column, so that I can put some good padding around the navigation. That will keep it from just plopping on top of the upper part of the page. So I'll choose Insert - Table. I'll select one row and one column. The table will go across the whole page (100% width), with a 0 border. For cell padding, I'll choose 10. That's it. Then inside that table I will type the names of the site pages and I'll make it bold and centered. Now I am ready to put this into the Library. Since I want to take the whole table, I will click inside the table and then click on the TABLE tag in the Tag Selector. This will cause the entire table to be selected. Since it is a little bit harder to drag and drop a whole table, I'll add the item to the Library using the menu. Choose Modify - Library - Add Object to Library. Just like with the images, I'll need to give the Library item a name. I'll call this one navmenu.

9 Page 9 of 20 We'll also want to create some contact information that will go at the bottom of every page. I'll include my name and address, plus I'll add an update date. I can select Insert - Date and click on the "Update Automatically" option, so that the date will be adjusted whenever I republish the webpage. Do you remember how to use the Insert - feature to quickly insert an address? Select Insert - Link. Here's what my contact information will look like: Contact Cathy Pierson for more information (cpierson@ou.edu). Updated: 19-Aug-2003 I will highlight this chunk of text and drag and drop it into the Library. I'll name this time "contactinfo". Now the Library has everything we need! Dreamweaver Website 7: Creating a Template for Your Website The next step is to create our Templates. Make sure you have a blank page to begin with. (To easily clear the current page, just click Control - A to select all, and then hit the Delete key). The basic layout I would like to use for my general web Template is this: a main table, with a left column and a right column (one row only) in the left column: insert another table, one column and 6 rows, to hold the images in the right column: insert another table, one column and 3 rows (navigation, page title, page content) So I'll start by creating the main table: one row, two columns. I'll make the cell padding 5. I'll highlight the row and set the Properties to "top" vertical alignment - this is easy to forget and very important once you start adding more tables with content inside this main table. A table cell default alignment is automatically set to the middle. You will want all the information to line up at the top of the cells so you need to set this vertical alignment option to 'top'.

10 Page 10 of 20 In the left column, I'll insert a table with 4rows and one column. This time I'll make the cell padding 0. In the right column, I'll insert a table with 3 rows and one column. This time I'll make the cell padding 5. Now since this is going to be a Template, I only want to add material here that I want to appear on every single page that is created from this Template. I want the images to appear on every page, so I'm going to insert the Library items into the rows of the left hand column's table. I'll put my cursor in the top row of that table, and then I'll open the Libraries window. I'll select the image I want to insert, and then right-mouse click on that item. I'll choose the option Insert Item. Or, I can click on the images and drag them onto my page into the cells.

11 Page 11 of 20 There you go! The image should now appear where you had left your cursor. Repeat this for all the images. Your page should now look something like this: Dreamweaver Website 8: Modifying a Template Now we are going to work on the right-hand table. In this case, the information that we want to appear on every page is the navigation bar and the contact information. Take a look at the following example of what we want. Navigation Menu Go ahead and insert the navmenu from the Library. You can insert the text item the same way that you inserted the image items. Click inside the table (top row) where you want the navigation menu to appear, and use the Library window to insert the navmenu library item. You should now see the navigation information in the table (it will be highlighted in yellow because it is a Library item: it cannot be edited here). Contact Information

12 Page 12 of 20 Another item you want to have on every page is the Contact Information, which is the contactinfo item in the Library. This would probably work best at the bottom of the page. In fact, you probably want to put that outside the main table. So go ahead and click with your mouse on the far right hand side of the table. Do you see how the cursor is outside the table? (If you are not sure, check the Code view: your cursor should be just on the other side of the /TABLE tag, which marks the end of the table.) Now select Insert - Horizontal Line. You should see a horizontal line that runs all the way across the screen, just below the bottom of the main table. Go ahead and can click on the far right end of the line, just as you did with the table. As soon as you add something it will bounce from the end of the horizontal line, appearing below the line. In this case, we are going to add the contactinfo item from the Library. So go ahead and insert the contactinfo from the Library by highlighting the item in the Library window, and then Inserting the item. You should now see the Contact Information down along the bottom of the page. It will also appear in yellow, just like the navigation information. This is because it is a Library item and cannot be edited here. If you want to edit a Library item, you have to edit the item inside the Library, which will then update all the pages in which the Library item is included. Next we will learn how to save a template and create editable regions. Dreamweaver Website 9: Editable Regions & Style Sheet for the Template Okay, now we have all the standard information that we want on our general web Template page. That's a good moment to save the file and give it a name. Choose File - Save As Template (!), and give your Template a name. I'll call this general Template "ouweb". When you save a file as a template (*.dwt), Dreamweaver automatically creates a folder called 'Templates' and puts this template file in it. Note in the example below - the template file name is shown as [<< Template>>(ouweb)] (in the blue bar). In order to be useful, a Template has to have some place where new information can be entered when you create a new page based on the Template. Otherwise a Template would just be the same page over and over again! The information that we will put on each new page is the page's content and a title heading for the page. So here's what I'll do. For the content part of the page, I'll type the word "content" in the second row of the table in the right hand column. Then I'll click on the word "content" to highlight it. Then I will right-mouse click on the cell or row and choose Template - Add New Editable Region. I'll give the region a name: content. Then I'll click OK. That's it! Creating a Style Sheet for your Template

13 Page 13 of 20 Now would be a good time to add a style sheet to your template. If you add it to the template than all the pages you make using the template will have the styles set for it. If you don't remember how to create a style sheet, then review the DW1 class - lessons 9 through 11. Quick Steps for a Style sheet: 1. Click on the CSS Styles Tab in Right panel 2. Select the New CSS Styles Icon (at the bottom of panel window) 3. Click on the Redefine HTML Tag & pick the TD tag 4. Name your style sheet (dw2.css) 5. Select Arial 10 point font 6. To Edit the Style Sheet: 1. In The CSS Styles Window - double-click on the style sheet name (dw2.css) 2. Click on the New Button 3. Click on the Redefine HTMLTag & pick the A tag (for link color changes) 4. Choose a new font color for links You are ready to close the page. Select File - Close, and Dreamweaver will prompt you to save the changes you have made to the Template file. Dreamweaver Website 10: Using a Template to Create Webpages Let's go ahead and make some pages we want to generate from this Template. We'll make the Home page first. Choose File - New From Template. Choose the "ouweb" Template. You should see a preview so you pick the right template. You can have several templates in one website. You will now see your Template file displayed, but the only part of the page you can modify are your editable regions. In this case, the editable region is called content (you can also edit the HTML title information which is

14 Page 14 of 20 contained in the page's header portion). So, let's type in a title. I'll say "Welcome to the My Web!" Then for the content I'll just type whatever I want to say about the your website. I can insert lists here, format my text, use different headers, and insert images. As long as I stay inside the editable region, I can do whatever I want. My page will look more or less like this: I'm going to go ahead and add the HTML title information too: I can always add more content to this page, but for now I am going to save it. If you are using this as your site's main page, then save it with the name index.htm otherwise, give it another name. (We could have put this website inside its own folder in your webspace and then given it it's own index.htm page. We don't want to overwrite the index.htm page that you might have published already). Dreamweaver Website 11: Creating More Webpages Okay, we've created one page from the Template. Now we are going to create another page: the resume page. I'll select File - New From Template, just like before. Choose the "ouweb" Template again. I'll enter the page title and the content that I want to include. Then I'll enter the HTML title information. My page will look something like this:

15 Page 15 of 20 I'll go ahead and save this page with the name resume.htm (remember: you cannot use spaces or punctuation in your webpage files names). Create another page with this template and call it the Project Page and save it with the name project.htm. If you want to create any other pages, feel free to do so. Dreamweaver Website 12: Modifying the Navigation Bar Okay, now let's see what we can do with the power of Templates and Library items. Remember how we did not have any links in our navigation menu? Now we can have some links: we can link to the Home page and to the Resume and Project pages. In order to edit the Library item, open the Library window. Then click on the item in the Library. This will open the Library item. Now highlight the part of the navigation where it says Home. Then click on the yellow folder in the Properties window. This will allow you to link to one of the web files that are stored in your website folder. Browse until you find your OU Web folder, and then click on the index file that you see displayed there. Click OK. Now do the same thing for Resume. Highlight the text, click on the yellow folder in the Properties window, and make a link to the resume.htm file.

16 Page 16 of 20 The entry that you should see in the link box is../resume.htm (this was automatically filled in for you by Dreamweaver). The../ means that the resume file is located one file folder higher than the Library item. Dreamweaver manages all this relational navigation for you, which is why you should click on the yellow folder and browse, instead of typing the name of the file in the box by yourself. Okay, now let's preview the Library item to make sure that the links work. Click on the F12 Key in order to preview your Library item. Click on the links. Do they work? Great! Close the browser preview window. Now you are ready to save the Library item. Click on File - Close and Dreamweaver will prompt you to save your changes. It will also ask you if you want to Update pages that contain this Library item. Say yes! You should see Dreamweaver updating the pages that contain this Library item: thetemplate page, the the resume.htm page and any other pages using that template. Just to prove to yourself that the update worked, you can open one of your other pages. Open the Resume page, for example. You should have functioning links in the navigation menu! Now you just need to create any other pages, and add those links to the navigation menu. Dreamweaver Website 13: Creating a New Template & Adding Pages You can create additional templates for other pages in your website. You may want to setup a project page with a different template, perhaps you don't want all those images going down the left side of the page. You can change it in most any way you like. Just remember to always provide navigation back to the Home page.

17 Page 17 of 20 First follow the same basic layout as the general web Template. First, I'll open a blank page and insert the content of the Template that will appear on every page made from this Template. choose a main table layout in which you will place other tables for images and/or content place the other tables inside your main table and select one for navigation purposes Quick Steps in Creating a New Template 1. File - New to create a blank page 2. Insert a table with 1 row, 2 columns, 0 border, 0 cell padding. 3. I'll set the vertical alignment to "top" for this row. 4. In the left column, I'll insert a table with 3 rows, 1 column, 0 border, 5 padding. 5. I'll insert the navmenu in this table cells; I added a background color to the Home cell 6. In the right column, I'll insert a table with 3 rows, 1 column, 0 border, 5 padding. 7. I'll insert 4 images in the first row; I also changed the size of the images by click & drag to a smaller size 8. I changed the background color of the first and last row to give more contrast. 9. Now save this work as a new template page - Select File - SaveAs Template - name file project.dwt 10. Create an editable region 1. Place cursor in 2nd row under images 2. Right-click - select Template - New Editable Region - name region content & save your template 11. Now create new pages from this template 1. File - New - New from Template - select project.dwt 2. In the Content region - I'll type the words PROJECT HOME RUN!! and other text, and format them as Bold etc. By the time I am finished, my new Template pages should look more or less like this: I can create a Project Name page, a team and purpose page from this template. When I click on the Home Link, it will return me to my sites main home page. Including New Pages in the Site Navigation Now there is one last task: I need to modify the navigation bar to include the links to all the project pages. This time, I will open the project template and add the links to the navigation table in the template. I don't need to use a library item for this template. Once I create the pages using the project template, I can return to the project.dwt file and update the links. When I save the template, it will prompt me to save any pages using this template. Dreamweaver Website 14: Checking Site Links, Files and Images Okay, you are ready to publish your website! But before you do that, you should run some basic tests in Dreamweaver to make sure that your site is in good shape.

18 Page 18 of 20 If you are using Dreamweaver 4, go to the Site Page (if you have closed the site page, select Site - Open and choose your Web Zoo site). If you are using Dreamweaver MX, you can run these reports from the Files panel on the right hand side of the screen. Select Site - Check Links Site Wide. This will generate a report listing any broken internal links in your site. If you have any broken internal links, you absolutely must fix them before publishing your site. Hopefully you will not have any broken links. If you do have some broken links, I would suggest that you choose Site - Recreate Site Cache and then run the report again. When you recreate the site cache, you can sometimes solve some broken link problems that are not really problems after all. There is a tab on this report that allows you to check for Orphaned Files. This is a list of any files that are not "connected" to the rest of the site. In other words: you can't get there from here. If you have some image files you are not using, they may show up as orphaned files, which is fine. But if you have any webpage files (htm files) which are orphaned, something has probably gone wrong in your navigation design. An orphaned webpage file needs to be connected, somehow, to another page in your site, creating a navigational path that will allow users to reach this page. There is one other report you might want to run in Dreamweaver. If you choose Site - Reports you can choose "Missing Alt Text Tag" (make sure you are running the report for the whole site, not just for a single document in the site). This report will let you know if you need to add alt text information to any of the images in the site. If you followed the directions for the Web Zoo, all of your images should have alt text information already. Dreamweaver Website 15: Synchronizing and Publishing Okay, you've checked your site and it is super clean: you have no broken internal links, you have no orphaned html files, and you have alt text information for every image in the site. You are ready to publish! To publish a website in Dreamweaver, we will use the Synchronize feature, just like we did when we published a single page last time. If you are using Dreamweaver 4 you will want to go to the Site view (if you have closed the Site view, select Site - Open Site). If you are using Dreamweaver MX you will find the Site view in one of the panels on the right-hand side of the screen. Remember that when you synchronize, you need to tell Dreamweaver whether you want to synchronize the whole site or just selected files. And you need to specify whether you want just to put the newest files (publish, upload to the server), or whether you just want to get the newest files (download copies from the server), or whether you want to get and put, based on whichever version of the file is the newest. When you know what you want to do, choose Site - Synchronize and then fill in the choices in the Synchronize dialog box. For the purposes of this class, you probably want to choose Entire Local Site and Put.

19 Page 19 of 20 After you have chosen the files you want to synchronize and the direction (Put/Get), you must click the Preview button. Dreamweaver then generates a list of all the files that will be moved, and displays that list to you in another dialog box, giving you the option of skipping any of the files that for some reason you do not want to put (or get) at this time. After you have looked at the Preview list, you can click OK and Dreamweaver will transfer the files, putting copies of the files on the server and/or getting copies of the files from the server. And that's it! When the process is finished you can Close the dialog box. There is no need for you to save a record of the transfer log. You should be able to look at your website on the Internet now. Use the OU Search page to go to your webspace. Fingers crossed: this should take you to your site on the web! Did it work? CONGRATULATIONS!!! You are a webmaster!

20 Page 20 of 20