Week 02

Week 02– Topics

Midterm Project assignment
Preparing Design Comps
FTP (file transfer protocol)
Dreamweaver introduction
Inserting images
Inserting Links
Image maps
Review: Tables
Page weight
Screen size
Image optimization & slicing
Quiz 1

Assignment 2

Here are your assignments (due next week by noon, Tuesday, May 2).

READ

1. Read ALL of the class notes for Week 02. (Of course!)
2. Read the following chapters from your textbook:
Chapter 1: Creating a Web Site
Chapter 2: Creating Web Pages
Chapter 6: Formatting Text
Chapter 7: Working with Images

WATCH

The total viewing time of the 10 videos below is approximately 80 minutes. So plan your time accordingly. These are the same videos located in the body of the class notes.

1. My video on File Transfer Protocol (FTP). You can watch it here: http://www.youtube.com/watch?v=jotXiTmHL1M
Or download it. I have created an instructional video for you. You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). You’ll need QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

2. What is Dreamweaver?
3. Defining a New Site
4. Creating New Documents
5. Adding Structure to Text
6. Managing Assets in Dreamweaver
7. Placing images On The Page
8. Creating Links in Dreamweaver
9. Working with Photoshop and Dreamweaver
10. Quickly Transform Photoshop Layers

Several of the videos above are Closed Captioned. You can also make the videos Full Screen by clicking on the icon located in the bottom right hand corner of the control bar.

EXERCISES

Working with Photoshop and Dreamweaver

As you’ll probably realize this week as you go through the materials about Dreamweaver, there are many ways to do the same thing. You can use Dreamweaver along with Photoshop to optimize your images, There is awesome integration between Photoshop and Dreamweaver that make it possible to copy, paste and optimize slices from PSD files.

Follow the instructions in the “Working with Photoshop and Dreamweaver” video and complete the exercise using the Sample Files. You can “Download the Sample Files” from the right hand navigation next to the video located on this page:
http://tv.adobe.com/watch/learn-dreamweaver-cs4/working-with-photoshop-and-dreamweaver/

  1. Download Sample Files
  2. Open both index.html and blog.html files. Be sure to define your site so that you can keep the Files window open and see all of your assets. Defining local files only is fine, you don’t need to set up remote site.
  3. PSD files are located in Assets folder.
  4. Replace the header with banner from PSD file. Check to make sure your cursor is between opening and closing divs tags for <div id=”leaderboardBanner”></div>.
  5. Save files before you do second part of this which is to update header and notice how DW updates the image on all pages.  Control Click to get to “Update from Original” selection.
  6. Crop image (316 x 130) from Photoshop and paste into Dreamweaver. Edit the image and replace it again (use Copy merge like in video).

When you have completed the assignment, please upload the project folder as a zipped file to the drop box located in the smconline.org site. Please be sure to include your last name in the name of the file when you upload it to the drop box. Please name your file: assignment2_yourlastname. Please upload your zipfile to the “Dropbox” on smconline.org site by noon on Tuesday, May 3.

2. If you haven’t done so already, sign up for WordPress. Post the URL to your WordPress blog in the comments section below.

Sign up with WordPress.com and start your blog for this class. Be sure to view the videos posted in the WATCH section for more information on how to do this.

3. After getting my feedback on your midterm project, start working on the design comp for your midterm project. The design comp is due  by noon on Friday, May 6.

WRITE

Post to your WordPress blog, your thoughts about the following:

1.  Read through the Web Design Best Practice Checklist. For each of the following 3 categories from the checklist: 1) Navigation, 2) Color and Graphics, and 3) Content Presentation, find a website that is an example where the designer did NOT follow Web Design best practices in that category. For example, find a website where the content presentation is done poorly, another website where the navigation is not effective, and another where the color and graphics do not follow best practices. Post to your blog and discuss.
2. Discuss your alternatives for your midterm project with me by posting your ideas for the midterm project to your blog.

QUIZ

Click here to take Quiz 1
Complete Quiz 1 by noon on Tuesday, May 3.

Midterm Project (Due Week 5)
Website Redesign

Identify a website with at least 10 pages that does not follow web design best practices then redesign and rebuild 5 pages of the site. Here is a link to a list of  Web Design Best Practices for you to refer to: http://terrymorris.net/bestpractices/

Specifications for the site:

  • Consider the business and communication objectives of the organization, and present the content in a manner that is consistent with these goals
  • Employ a design aesthetic appropriate for the organization
  • Introduce the organization on the home page
  • Direct traffic to key locations in the website from the home page
  • Contain a contact page that provides a contact form that users can email the organization through (this can be a graphic only… you do not need to build a functioning form for this project).
  • Follow basic usability principles to help the user identify their location and find their way around the site (page headings titled to match global navigation, current page identifier in navigation, redundant navigation at the bottom of pages, etc.)
  • Use CSS-based layout for the pages (no tables for layout)
  • Use an external stylesheet to style the entire site
  • Optimize your design for an 1024×768 display (remember this means the finished width should be 990 px and that “the fold” is 560 px but the height of the pages can and probably need to be longer.)
  • Discuss your alternatives with me by posting your ideas to your blog.
Use of logo and images

For this project, please replace the actual name of the company/organization with a fictitious name and replace their logo and images with copyright free images. We need to do this because we don’t have permission to use another company/organization’s assets and content.

I suggest taking advantage of the Creative Commons license on the Flickr site.
http://www.flickr.com/creativecommons/

What is Creative Commons?
Creative Commons (CC) is a non-profit organization headquartered in San Francisco, California, United States devoted to expanding the range of creative works available for others to build upon legally and to share. The organization has released several copyright-licenses known as Creative Commons licenses free of charge to the public. These licenses allow creators to communicate which rights they reserve, and which rights they waive for the benefit of recipients or other creators. An easy to understand one-page explanation of rights, with associated visual symbols, explains the specifics of each Creative Commons license. This simplicity distinguishes Creative Commons from an all-rights reserved copyright. Creative Commons was invented to create a more flexible copyright model, replacing “all rights reserved” with “some rights reserved. – Wikipedia

Basically you have permission to use images on this site that allow attribution, share alike and/or non-commercial usage. You should still give credit to the photographer. Check the “Share This” pull down located next to Favorites & Actions to check the availability of an image to be shared.

In “Advanced Search” you can click to view Creative Commons images only, and your searches should show just those images.

You could also take a look at the Commons library on Flickr. There are images that are part of the public domain and can be used without attribution.
http://www.flickr.com/commons/

If you don’t find what you need on Flickr remember you must make use of royalty free images for your project. You CANNOT use images of found on other Web sites. You may use your own original artwork and/or photography if you prefer.

Other possible sources for images:

* Veer: Wonderful selection of stock photography
* iStock Photo
* Morgue File: Free!
* Stock Xchange
* Stock Vault
* iStock Pro
* Open Photo
* Getty Images
* Index Stock Imagery
* Absolute Vision

Lastly, in preparation for midterm, upload a folder to our class server named: lastname_first. You will upload your midterm project to your folder on or before the due date Noon, Tuesday, May 17.

Preparing Design Comps

As we’ll discuss, Dreamweaver is not a design tool so therefore, the design of your site must be created in Photoshop. Download a sample design comp and note the following:

  • Be sure to set the width and height of the document in pixels , the color mode to RGB, and the resolution should be 72 dpi for most web files.
  • Be sure to create a Photoshop file with elements on separate layers. This is important because you may want to edit certain elements separate from the rest of the document, or turn specific layers on or off.
  • Insert any photographs or graphics into the design file at 72 dpi. This will prevent the weight of the Photoshop file from getting too large.
  • Any HTML text should also be added to the file on a separate layer. Remember you will use this Photoshop file to get final design approval from a client so you’ll want the page to represent the look of the final HTML page as closely as possible.
File Transfer Protocol (FTP)

A typical folder structure is like the following:

file structureWhen building a web site, it’s essential to create a folder/directory structure on your computer (or flash drive) to accommodate your whole project. Inside this master directory structure (which has more than will be on the web server) there will be folders for master art files (e.g. photoshop docs), flash files, sound files, etc. In addition, there will be a folder that only contains the html files, GIF files, and JPEG files that are part of the web pages–this sub-folder will mirror the structure on the web server. 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.

Photoshop files 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. 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

ftp local

  1. With the SITE window of Dreamweaver open, select SITE>MANAGE SITES.
  2. Select NEW > SITE
  3. With LOCAL INFO selected
    Set SITE NAME to “website” 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.
    Leave HTTP ADDRESS blank
    Set the CACHE to be checked

    ftp remote
  4. With REMOTE INFO selected
    Set SERVER ACCESS to: FTP
    Set FTP HOST to: ftp.everythingaboutweb.com
    Set HOST DIRECTORY to: (leave blank)
    Set LOGIN to: grdes66
    Set PASSWORD to: WebDev4grdes (remember, this is case-sensitive)
    Important: PLEASE BE SURE THAT YOU CHECK THE BOX THAT READS: "Use Passive FTP" located under the password field.
  5. Select OK to complete the creation of a new site
  6. CONNECT to the server using the “plug” icon

ftp expand

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 (at the top-left of the site window, to the right of the site name — it looks like a plug. In the image above it 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 [web] directory.
Files can be viewed at:
http://www.everythingaboutweb.com/grdes66

Once you’ve connected to the server, you can upload your site files (or download files from the server to your local computer).

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.

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/export 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. Note that dragging the top level folder from the right side of the window will not copy that folder, it will only copy the files inside the top level folder.

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.

Uploading existing files on the server:

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. If this doesn’t work, you probably didn’t upload the file correctly, or to the right location.
Video Demonstrations

I have created an instructional video for you. You can download the entire demonstration in one QuickTime movie file (18MB). (You can right-click to download to your desktop). You’ll need QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

File Structure
IFRAME Embed for Youtube
FTP (File Transfer Protocol)
IFRAME Embed for Youtube

What if you’ve read through all the instructions above, and viewed the video demonstrations and you still don’t understand how to connect to the server?

Additional Resources
  1. Please read pages 5-19 in our texbook Adobe Dreamweaver CS4 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.
  4. Post any questions you have to the Discussions section of the smconline.org site.
Dreamweaver introduction
Getting Started: 01 What is Dreamweaver



http://tv.adobe.com/watch/learn-dreamweaver-cs5/getting-started-gs-what-is-dreamweaver-cs5-/

Dreamweaver is an HTML editor and an application for creating web pages. All web pages are simple text files that use HTML (and sometimes JavaScript) to describe the page. HTML (Hypertext Markup Language) is a standardized language that can be viewed with any web browser or other web page application.

Because web pages are made up of HTML, Dreamweaver does not create special Dreamweaver files. On the PC, you may find that if you double click on .html files, they will open in Explorer or Safari rather than Dreamweaver. As a result, it’s best to open your .html files from within Dreamweaver.

Dreamweaver is just a page formatting application, and is not capable of creating any media elements other than text. You must use Photoshop, Flash,  or other applications to create images, animations, sounds, etc. Dreamweaver does not create the page for you — you need to understand the basics of page structure and layout in order to understand how to best use Dreamweaver. When it comes to building a web page, Dreamweaver is not smarter than you. Similar to the application InDesign which does not design a brochure for you, Dreamweaver does not automatically build a website for you.  Both of these applications are only tools. You have to understand how to build a website in order to best use Dreamweaver.

Getting Started: 02 Defining a New Site



http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs01-defining-a-new-site/

Getting Started: Creating New Documents

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs02-creating-new-documents/

Creating a new web page in Dreamweaver
  • Select FILE>NEW
  • Immediately save the file in a good location on your disk before you do anything else. Select FILE>SAVE, and browse to the location on your disk. It’s necessary to save first because many web page features (such as showing images) rely on links to other files. These links only make sense in terms of where the web page is in relation to the linked file.
  • Give the file a name. This name should be all lower case, and have no spaces between words.
  • SAVE the file
  • There are two windows to use when creating web pages:
    Document
    . This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.
    Code Inspector
    . This window shows the raw HTML (and other code such as JavaScript). You can write HTML directly in this window, and any changes you make will be reflected in the Document window when you switch to the document window, press F5, or perform a Save (control-s for PC or command-s for Mac).
Previewing in the browser

Dreamweaver is a WYSIWYG (What You See Is What You Get) authoring tool, and you can see how your web page is going to look in the Document window. But it is not perfect or complete in the way it displays web pages. As a result, you must preview your web pages in a real web browser such as Safari or Firefox. When you have built a page to the point where you want to check how it looks, save your file, then select FILE>PREVIEW IN BROWSER>SAFARI (or Explorer or Firefox).

Dreamweaver Windows

Document. This window shows you what the web page will look like – more or less. It is also the place where you can place text, images, and other elements. Any changes you make here will be automatically reflected in the HTML Window.

Properties. This window is one of the most important and is used to show and set any properties of the currently selected element (image, table, text, etc.). For example, when you have some an image selected, you use this window to set the vspace and hspace.

Insert. This small palette is a shortcut menu used to place items into the current web page. For example, in the COMMON section, click on the icon with the tree to place an image in the document (at the current insert location). Each tab in the Insert menu brings up a different set of features for working with your document.

Site. This window servers two main purposes. First, it shows the way files are organized in your web site, and it allows you to open files without using the File>Open dialog. Second, it’s an FTP (File Transfer Protocol) client, which enables you to transfer your HTML files from the computer where you create them, to the web server where the files will be visible from the Web.

Behaviors. This window shows where interactive actions are added to text or graphic elements in the page. The most common behavior to add in Dreamweaver is for swap image, where an image changes when the user moves the cursor over the image. Two things are defined for each behavior, an event and an action. The event is the situation that causes something to happen. The action is what is activated when the event occurs.

Page properties

Every web page has global properties that can be set in the menu MODIFY>PAGE PROPERTIES… Important properties to be set are:

  • Title. This text does not appear in the body of the document. It sets the text to be displayed in the top bar of the browser window. You can also set the page title in toolbar of the document window.
  • Background Color. If this property is not set, the background color of the web page is undefined (although most web browsers will display it as white). Set this property to control the color of the background.
  • Background Image. This optional property allows you to use an image as a repeating, tiled background for the entire page.
  • Page margins. There are settings which control the margin at the top and left of the page. Most designerslike to eliminate these margins so they have complete control over the page layout. To do this, set LEFT MARGIN, TOP MARGIN, MARGIN HEIGHT, MARGIN WIDTH all to zero (there are four settings to accomodate Explorer).
The document toolbar

The Dreamweaver toolbar contains some common commands related to your view selection and your document’s status, plus a field for setting the page title. The Options menu items (button located on the right) change depending on the view you select.

document toolbar

Of particular note are the three buttons on the left. They allow you to quickly change the window view:

  • Design View – where you see how the page will appear in a browser
  • Code and Design View – a split page view where you see the code at the top, and the design at the bottom
  • Code View – where you see only the code that describes the page

Getting Started: Adding Structure to Text



http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs03-adding-structure-to-text/

Getting Started: Managing Assets in Dreamweaver

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs04-managing-assets-in-dreamweaver/

Getting Started: Placing images On The Page

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs05-placing-images-on-the-page/

Inserting images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To copy an image from a web page, place the cursor over the image, and right-click (pc) or control-click (Mac). A menu will pop-up, and you can select “Save Image As…”. Browse to the location on your disk where the web page is, and save the file in the same location as the web page. Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

flowerflower.jpg flower.gif

Image: FreeDigitalPhotos.net

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, click on the image icon in the Insert palette. It will request the name of the image, whichyou can use the open dialog to set. Once the image is displayed on the page, you can set it’s characteristics in the Property Inspector.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section. You may also want to put a zero in the Border section to prevent the blue line that will appear around an image to indicate it is a link.
  • Flowing text around an image. By default, text does not flow nicely around images. To enable text flowing, select the image, and then set the Align setting to Left or Right. This will place the image on the left or right of the browser screen, and text will flow around it. You may need to reposition the image to get text to flow around the image at the point you want.
  • Adjusting the margins around an image. When text flows around the image, it “hugs” the image very closely by default. You can increase the margin around the image by adjusting the horizontal and vertical spacing. Select the image, and then put the number of pixels of space you want in the Vspace and Hspace sections of the Property Inspector.

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the

lower right hand corner of the palette. Experiment with the following:

  • Change the height and width of the image
  • Reset the size of the image to its natural size by clicking on the “W” and “H“. When the width or height number is bold, the dimension is different from the natural size.
  • Change the alignment so text wraps around the image
  • Set the alt attribute of an image
  • Make the image a link
  • Change the VSpace and Hspace to change the margin around an image when text if flowing around it
Image maps

Image maps are links created inside of images.

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

This is especially useful when mocking up a website. Rather than taking time to create many separate images (by slicing or other means), you can quickly create your complete web pages in Illustrator or Photoshop and export them as complete pages. Then use image maps for any links on the page.

In Dreamweaver, create an image map by clicking on the image, then naming the imagemap in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

The following image has four links, one over the logo and over each navigational “button”.

Making an image map:

  1. Click on the image
  2. Set the name of the map in the lower left of the property inspector (lowercase, no spaces, no special characters!)
  3. Select a shape (rectangle, circle, or polygon) from the lower left
  4. Draw a shape with the drawing tool
  5. Dreamweaver will create a translucent shape for your hotspot
  6. Enter a URL or local web page file name in the Link section
  7. If you want a link to open in a new browser window, set the “Target” selection to “_blank”
  8. Set the “ALT” section to the desired alternate text
  9. Create additional hotspots by repeating steps 3-8
  10. When you’ve finished, click on the arrow in the lower left of the property inspector to turn off the map drawing.
Getting Started: Creating Links in Dreamweaver

http://tv.adobe.com/watch/learn-dreamweaver-cs5/gs06-creating-links-in-dreamweaver/

Web page weight

Recommended page weight: total size (html/images/flash) for a web page should be around 60-100K although we often visit web site like Amazon and Ebay where page size is often much larger. And for Flash sites, the web page weight is often larger (300k +). That is why it is necessary to have a loading animation while a .swf (Flash) file is loading.

Some typical download times under ideal conditions, which rarely happen:

Size of File 56Kbps Modem 256Kbps DSL 1500 Kbps Cable
50Kbyte 8.0 secs 1.6 secs < 1 sec
100Kbyte 16.0 secs 3.1 secs 1 sec
300Kbyte 48.0 secs 9.3 secs 3 sec
1meg 160.0 secs 31.3 secs 6 sec

Note: Pew Internet Project 2010: 66% of American adults have a home broadband connection in 2010, little changed from the 63% who did so in 2009.

Checking page weight

You can check the size of your pages by looking at the display in the bottom-right corner of the document window, next to the page dimensions.

Screen size design

Your pages will be displayed on screens with a variety of screen resolutions – from 800 horizontal x 600 vertical pixels to 1024 x 768 and beyond. As a designer, you need to be sure your pages will look OK when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!

The situation is more complicated than simply screen resolution:

  • Explorer and Safari have different amounts of space available for pages
  • Macs and PCs have different amounts of space available for pages
  • The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
  • If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)

Based on all the variations, I’ve created a guide for designing pages for the three major screen resolutions, 640×480, 800×600, and 1024×768. Designing with these recommendations will ensure that all your page content within the pixel dimensions will be visible in the worst case situations. My recommendations are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:

  • In the vertical direction, you can have additional information beyond the specification, just keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold”. In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important articles and headlines.
  • In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can designto 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide

The size recommendations below are smaller than the actual screen size is because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.

  • Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
  • Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
  • Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)
  • Recommended maximum page dimensions for larger than 1024 pixel width: 1020 x 750 (sample page)*

*Resolution Sizes Resource: Pixelloom

Previewing page sizes in Dreamweaver

You can preview how your page will look by selecting your page size dimensions in the pull-down at the bottom-right of the document window in Dreamweaver. This will size the document window to the dimensions so you can judge your design in regard to its dimensions.

If the dimensions you want to view aren’t available by default, you can edit the defaults by selecting EDIT SIZES in the pull-down. Or, you can also simply resize the page to the right size.

Review: Tables
A cell an image with some text in the cell
cell cel

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells can contain text and graphics, and have a specific or relative size specified.

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

  • Number of rows
  • Number of columns
  • Width in Percent or Pixels
  • The width of the border (the beveled edge on the outer part of the table)
  • The cell padding (the text margin, left, right, top, bottom)
  • The cell spacing (the width of the cell walls)

Table properties

Table properties are accessible by selecting the whole table.

Table Cell properties

Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixels.
If the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table. In general, it is best to use pixels for all tables.

Flowing text around tables
For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.
Table format
The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.
Border size
The setting of the table border in pixels affects the width of the border around the edge of the table.
Cellspacing size
The setting of the table cellspacing affects the width of the border around each cell
Cellpadding size
The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom
Selecting a table
There are three ways to select the whole table.
  • click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
  • click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
  • click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.
Row and Column Span
Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.
This cell has a row 

span of two.

This cell has a column span of 

two.

Changing the style of text in multiple cells
You can select multiple cells and change the text style by clicking and dragging across multiple cells, or shift selecting. Alternatively, you can control-click to select individual cells, even if they are not next to each other. Note that the only way to set the text style across multiple cells is to place a <font> tag in each cell. Dreamweaver does this for you, but if you are hand-coding HTML, be aware that you can’t simply put a <font> tag around the whole table–this will not change the style of the text inside the table.
Cell alignment — horizontal and vertical
The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.
The contents of a cell affects its size
Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.
Clear row heights or column widths
When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.
Convert table widths to pixels or percent
If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.
Nesting tables
You will find that it is often difficult to design a table that places elements exactly where you want them. One way around this is to put a table inside of a table cell. In other words, you use the outside table to set the general location, and the place a table inside the appropriate cell to do your exact positioning. To do this, just place the cursor inside the appropriate cell, and click on the Insert Table icon in the object palette.
This table is inside another table
Optional Reading

Read pages 53-66 in our textbook Adobe Dreamweaver CS4 How-Tos: 100 Essential Techniques

Image Optimization / Image Slicing
Working with Photoshop and Dreamweaver



http://tv.adobe.com/watch/learn-dreamweaver-cs4/working-with-photoshop-and-dreamweaver/

Working with Fireworks and Dreamweaver

Adobe Fireworks CS5 software enables you to create expressive, highly optimized graphics for the web or virtually any device — from smartphones to kiosks to embedded displays. Produce websites, user interfaces, and rich prototypes that are editable in both vector and bitmap modes. If there is one other application I would encourage you to learn for Web it would be Fireworks. The video below give you an idea of one of the ways it can make the production process easier.

Quickly Transform Photoshop Layouts

http://tv.adobe.com/watch/everyday-timesavers-web/quickly-transform-photoshop-layouts/

Review: Image slicing

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.

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.
  • 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.

Suggested Reading

How to Make Slicing Suck Less

Optional: Watch lynda.com video
Optimizing photos as JPEGs
Photoshop CS5 for the Web | by Jan Kabili

View this entire Photoshop course and more in the lynda.com Online Training Library®.


Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66