Setting up your file structure
When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as project1.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named proj1_yourlastname, midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.
To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.
Uploading your site using FTP
Using the site window in Dreamweaver
Define a site in Dreamweaver
- With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
- Select NEW > SITE
- Be sure you have the “Advanced” tab selected and not the “Basic.” With LOCAL INFO selected
- Set SITE NAME to “jamiecavanaugh” or “mysite”(or whatever you want)
- Set LOCAL ROOT FOLDER to where you the main folder where your files are located. Do Not set this folder to the folder where your web files are. If you do, you will be unable to move the entire folder. Always set the Local Root Folder to a folder ABOVE your project folder at least.(For example, select the projec1 folder not your project1_yourlastname. Your “project1” folder should contain your project1_yourlastname folder.
- Leave HTTP ADDRESS blank
- Set the CACHE to be checked
- With REMOTE INFO selected. (It is located in the left hand side navigation)
- Set SERVER ACCESS to FTP
- Set FTP HOST to: ftp.everythingaboutweb.com
- Set HOST DIRECTORY to: (leave blank)
- Set LOGIN to : grdes66online
- Set PASSWORD to: (I will email this to you)
Please note the login and password information in the above image is incorrect. Please use the information I have given you in the text above.
Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: “Use Passive FTP” located under thepassword field.
- Select OK to complete the creation of a new site.
6. CONNECT to the server using the “plug” icon
To upload files to the server, click on the folder or file you want to upload, and drag it from the right side to the left side. Or you can select “put” by right clicking to upload the files. For example, you should see your entire projec1_yourlastname folder. Drag this complete folder to the top blue folder.
In most cases, you will upload the complete web site as a directory. Drag this folder to the left hand side, and drop it when you’ve placed it over the top folder .
Dropping the folder on the ” / “folder ensures that you place the folder in the correct place. If you drop a file or folder onto another folder, the file will be placed inside of that folder rather than replacing it.
If you want to move a single file up to the server, then drag this file and drop it onto the correct directory on the server (or you can drop it on top of an old version of the same file).
When you move HTML files in the Site Files window, Dreamweaver will ask if you want to Include Dependent Files? If you say yes, Dreamweaver will look in your HTML files, and copy any images in referenced in those files, even if you don’t select them for the copy. In general, if you are copying a folder of a complete site, there is no reason to copy dependent files, since you are already copying all the files needed for the site (because they are all in the folder). But if you are copying an individual HTML file, then in general it’s good to answer yes to including dependent files, to make sure that any images in that page are properly uploaded.
Once you have uploaded your folder, please view your site at the following web address: http://www.everythingaboutweb.com/grdes66online
Uploading existing files on the server:
If you need to make changes and re-upload you may do so. Please note the following:
When you upload and replace files that are already on the server, there are several issues you should note:
- Be sure you save the new file before you upload it, so your changes get to the server.
- Dreamweaver (and other FTP programs) will not ask you if you want to replace them. It will just write over the old files. Be sure you want to replace the files on the server before you upload the new files.
- After you upload the new versions of the files, you should check to make sure they are on the server. View the web pages on the Internet at their real web address, and don’t rely on the Dreamweaver preview of the local file. If the web page is already open on the browser, use the Reload/Refresh button to view the page.
- Sometimes when you replace a file and view it, you don’t see the changes. This is because the browser has cached the file, and you are looking at an old copy stored on the local computer, not the new one on the server. To fix this, try using the Reload/Refresh button. If this doesn’t work, hold the shift key and press Reload/Refresh to force a newer version. If that doesn’t work, you will have to clear the cache. This is usually in Edit>Preferences>Advanced>Cache. If this doesn’t work, you probably didn’t upload the file correctly, or to the right location.
Rules for the Shared server
Please be courteous to your fellow students by following the guidelines below:
- Be careful not to overwrite a fellow student’s files or the index file for the shared site.
- All student files are considered private and you cannot download other student’s files from the server without permission.
What if I’ve read through all the instructions above and I still don’t understand how to connect to the server?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). The advantage of the download is the video is much larger and easier to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.
2) Or, you can view the 2 videos from the YouTube site. I have posted both videos below.
FTP (File Transfer Protocol)
1) Please read pages 14-28 in the texbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques
2) I also suggest you read the following information from Dreamweaver CS3: Hands on Training by Garrick Chow.
3) Please watch the YouTube: Dreamweaver Tutorial- Define Local Root/Site Folder located in the Media section of this site. This video covers more than you need to know for this class, but can be very helpful.
copyright © 2006-2009, jamie cavanaugh