Class 05

class 05 - ftp (file transfer protocol), image slicing, assignment 3: image slicing assignment

FTP (File Transfer Protocol)
Below is information about how to use FTP (File Transfer Protocol) to upload your Midterm Project and Final Project to the class server. I will email you the password to the class site on Wednesday, March 18. Please let me know if you do not receive my email. Please be sure you understand how to upload to the class server. I will only accept your Midterm Project and Final Project if it is uploaded to the class site.

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

1. With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
2. Select NEW > SITE
3. 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



4. 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.
5. Select OK to complete the creation of a new site.

6. CONNECT to the server using the “plug” icon

The window will probably appear collapsed on the bottom right hand side of the stage. Click on the expand/collapse window button (It’s circled in the image below). This will expand the window so there is a left and right pane.

Select the CONNECT button to access your FTP account (the connect button is located on the top-left of the site window, to the right of the site name — it looks like a plug. In the image above it is the the first icon in the same row as the expand/collapse icon.)

The left side of the SITE window (remote) will show all files currently on the server in the directory. The right side of the SITE window (local) will show your files on your computer.

On the server, any files you want available on the web should go in the main “root” folder/directory. Once you’ve connected to the server, you can upload your site files.

Uploading Files
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?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Video Demonstrations

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.

File Structure

FTP (File Transfer Protocol)

Additional Resources:
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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

This week we will discuss how to optimize your web images before you start to build your web site in Dreamweaver. Earlier we discussed the basic principles of compressing your images for the web. What do you do when you have all of your final design comps ready in Photoshop and you want to optimize all of the images you’ll need to build your web site? Saving each image one-by-one can be very inefficient. Slicing allows you to “cut out,” name, and optimize all of your images at the same time. This can save you a great deal of time and is easy to do.

Image Slicing
Here’s an example web page that demonstrates the image slicing approach.

Overview
Many web designers develop their page layouts in Photoshop (or Illustrator) before they use an application such as Dreamweaver to assemble the page in HTML. This approach allows the designer to use all of the powerful layout and design capabilities of Photoshop to work on the creative aspects of laying out the page. Once a design is solidified, the designer must translate their Photoshop layout into the realities of HTML and limited download time. This involves compressing different parts of the layout in different ways (e.g. some parts will be GIF while others will be JPEG), and leaving some parts of the layout for live HTML. To do this, it’s usually necessary to cut the original Photoshop image into smaller pieces. This is called image slicing.

In Photoshop CS2, an image slicing application called ImageReady is shipped with Photoshop, and the two programs are tightly integrated. ImageReady is a program specifically designed for image slicing, and contains many additional tools for this process.

In both Photoshop CS2 and Photoshop CS3, image slicing is also part of Photoshop. If you do not have Photoshop CS2 or CS3, you can also use ImageReady if it is included in the version of Photoshop you are using for this class.

Adobe Fireworks is another program designed for image slicing and has replaced ImageReady.

Advantages of image slicing
By slicing the page into smaller graphics, the designer can:

• Compose the page in Photoshop – rather than Dreamweaver
• Simulate layering – by compositing imagery in Photoshop, and avoiding the use of DHTML layers in the web page.
• Optimize the page – compress parts of the web page individually, and leave parts of the page “transparent” so the background color or background image shows through. For example, use JPEG for a photograph in one part of the page, use GIF for a logo with a transparent background where the page background color shows through.
• Use HTML text – leave parts of the page available for HTML text which requires very little download time compared to graphic text. HTML text can also be updated more easily than graphic text.
• Make graphic elements individual links – while his effect can be achieved with image maps, usually separate graphics
  or each link is better: better compatibility when the page is viewed without graphics (using the ALT text), better accessibility for the disabled, the ability to have rollovers for the links, and simpler updating of the page.
• Rollovers – rollover images can be created for each navigational element on the page which would not be possible if the page was one large image.

Example of sliced page:
Below is a diagram showing how the Photoshop image is sliced up to make the files that make up this web page.

Disadvantages of image slicing
Page slicing can create numerous problems if the designer is not careful:

• Page size – by letting a program create all of your images, it is easy to let the page size grow too large. Be vigilant about the total page size when image slicing!
• Page complexity – image slicing programs can create a large number of cells in the page. If this happens, the browser will take longer to display the page, and the user feels it is taking longer to download. Keep the number of slices to a minimum so the page is not too complex.
• More complex design process – image slicing creates a more complex process, and may add to the time it takes to develop a web site. In particular, it make take longer to make changes to pages developed with slicing.

Recommended Process.

Be methodical.
Creating the numerous image slices for a web page makes the designer’s job potentially very complicated. One has to keep track of the page layout, the precise dimensions of each graphic element, rollover highlights, etc. If any changes are made to the page after it’s initially constructed, these factors become even more acute. As a consequence, the designer must take a very organized and careful approach to developing web page graphics.

Here is one method:

1. Do the initial design and layout in Photoshop. (Note that in the Photoshop file “image_slicing.psd” that each element is on its own layer and all layers are named. You want to be sure to keep your psd file very organized and all elements on separate layers.)
2. Test the design in a web site by exporting a JPEG version of the entire page.
3. Based on the tests, revise the design in Photoshop and create a final comp.
4. Create rollover highlights as separate layers
5. In Photoshop –
   1. Determine how the page will be sliced up to:
      1. compress each section of the image most efficiently (with JPEG or GIF)
      2. make slices for each rollover (will discuss rollovers in a future class)
   2. Create the image slices using the minimum number of rectangles for dividing the page. Try to keep the total number of slices under 15. It is better to have fewer, larger slices than many small slices.
   3. Set the image format for each slice (JPEG, GIF, level of compression, etc.)
   4. Set the transparency for the slice, and set the matte color if applicable.
   5. Export all the slices along with an HTML file if needed. (Photoshop automatically creates a table that arranges the slices properly on the page). Save the image slices in a separate folder for each web page.
6. Create the HTML in Dreamweaver to finalize the page.

Slicing in Photoshop
An image is created and edited in Photoshop.

Open the Photoshop file and:

• Choose VIEW > SHOW RULERS, and create any guides you may need to make your slices consistent.
• Select the slice tool
• Draw a slice by clicking and dragging to create a rectangle for your slice
• Double click on the image to open the slice option palette, In the slice option palette, set the following attributes for the following sections:
  • Name: set the name of the file to be created for this slice (Photoshop creates a default file name, which I suggest you change)
    
• After you have named all of your slices, select FILE > SAVE FOR WEB to individually optimize every image. In the save for web palette, set the appropriate image coding for every slice. Don’t forget transparency and matte if they are appropriate. Use the slice select tool (the alternate for theslice tool) to select different slices.
• An easy way to remember the slicing process is as a 3 step process:
  Step 1- slice
  Step 2- name
  Step 3- optimize

Save Optimized Images
When you are ready to save your sliced images, you can create image files only, or create an HTML file with all of the images inserted in a table in the correct layout. We will cover saving a HTML file later in the semester. When saving, be sure to set the following items:

• Create HTML or not
• The directory for the images
• After you have completed steps 1-3 (slice, name, optimize) for every slice, you can save the files as images only. You do not need to change the name of the file. Save to a folder called “Photoshop.” Photoshop will create an images folder and will place your optimized images there. Note that image slicing often generates many images. In general, it’s recommended that you create separate image directories for each sliced page so you can keep track of the images better.Notice also the following settings:
• Settings : Default Settings
• Slices: All

Use separate image directories for each web page.
Sliced pages often have many images, and the pages are frequently regenerated with different slices. This process can leave many unused “orphaned” images that should be deleted. If several sliced pages have their images saved in the same directory, it is difficult to find the orphaned image slices. On the other hand, if the image slices are saved in a separate directory for each sliced web page, then after significant changes to the slicing, the entire directory can be deleted and a new set of images can be optimized and saved into a clean directory.

Video Demonstrations

I have created instructional videos for you that you can view two different ways.
1) You can download the entire demonstration in two QuickTime movie files: Part 1 (29 MB). Part 2 (32 MB). (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 4 videos from the YouTube site. I have posted the videos below.

Image Slicing | Part 1

Image Slicing | Part 2

Image Slicing | Part 3

Image Slicing | Part 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

I have also created a demonstration on image slicing your navigation only and saving out the images and the HTML from Photoshop.

Note: I’ve used this photoshop file in the below video demonstration.

Video Demonstrations

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. (39 MB). (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 3 videos from the YouTube site. I have posted the videos below.

Slicing Navigation | Part 1

Slicing Navigation | Part 2

Slicing Navigation | Part 3

Additional Resources:

More information about image slicing at Ten Ton Books.
This video is part one — it looks like part 2 is not out yet.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Image Slicing Assignment

Image Slicing exercise
From scratch, slice the Photoshop file contained in the download: image_slicing.zip

Using the Photoshop file, complete the following: slice all images, name, and optimize to save all images to a separate folder. Build the example web page using tables and the images you created in this exercise. Upload the zip file with your project folder to the Dropbox by noon on Tuesday, March 24.

copyright © 2006-2009, jamie cavanaugh

Advertisement