Creating Web Pages using Photoshop and Dreamweaver
1. On your PC and USB Disk: create Folders named working and www ; and inside the www folder, create a folder named images .
2. Save all your files for the class (such as Illustrator, Photoshop, etc, files) into your working folder. Save all the images you want to use on the website (as .jpg) in the images folder.
3. The most convenient way to save a file for the web is to use the File/Save for Web... in Photoshop. To do this, open your images in Photoshop:
| A. File/Save for Web... your image. |
| B. (A dialogue box appears, and,) on the "Preset" pull-down (upper right area of screen), select "JPEG High"; then, select the "Image Size" tab and, if necessary, reduce/change the size of your image to the size you want, and then click "Apply" to complete the operation. (Note: the image you see on the screen will be approximately the same size on the web and remember that if your image is too large, scroll boxes will occur when viewing the image via the web) Lastly, click "Save" to save the file into your images folder. |
4. In Dreamweaver, create the following file: index
Include the following info: team name; people names/email; team portrait image; link to www.sprawlswarm.us homepage; links to other pages, etc.
(Note: use tables to organize images and text)
5. Upload your files to your team's web-folder based on these directions:
| A. In Dreamweaver, pull-down Site/Manage Sites... | ||||||||||||||||||||||||||||||||||||||||
| B. Select New (and Site) | ||||||||||||||||||||||||||||||||||||||||
C. Input the following info:
|
||||||||||||||||||||||||||||||||||||||||
| D. Press Done | ||||||||||||||||||||||||||||||||||||||||
| E. Go to the Files tab (on the right side of the Dramweaver interface) and press Connects to remote host button. | ||||||||||||||||||||||||||||||||||||||||
| F. Highlight the files you want to upload and press Put File (upward facing blue arrow). Be sure you are putting files into your team folder only! |
7. Visit your website and examine the changes (you may need to refresh the webpage).