Week 03

September 9, 2008 — Jamie

week 03 – page layout assignment due, navigation, rollovers, image maps, design process, preparing design comps, image slicing, css, Assignment 3, Quiz 3.

Special Announcements:
1) You have 3 assignments due by noon, Tuesday September 16. See the end of the class notes for details on your assignments.

2) I HAVE EXTENDED THE DEADLINE FOR THE MIDTERM PROJECT TO MIDNIGHT ON FRIDAY, SEPTEMBER 19. Please be sure to upload your midterm project to the class server by this new deadline. See the week 02 class notes for information on how to connect to the class server. Please be sure you know how to upload your midterm_lastname folder there before the final deadline.

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

Today we’re going to talk about navigation– both how to design navigation and also how to insert navigation into your web pages. Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

Navigation design
Helping the user do what they want

The following are general rules to follow when designing navigation in a web site. The are only rules, and as the saying goes, rules are made to be broken–just have a good reason to break them!

  • Consistency
      People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

    • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
    • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

    • Note: Some people create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

  • 7 +/- 2 rule
    • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that if you have more than 5-9 links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:
  • Group Navigation
    If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

    • Proximity. Place similar navigational elements together on the page, separated from other groups.
    • Style. Give each group of navigational elements its own visual design.

Exercise
Below are 10 links for an auto site. How would you organize them for clear and useful navigation?

contact, cars, customer service, dealers, about us, trucks, jobs, investor info, financial services, suvs

  • Keep it simple
    Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

    • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
    • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.
  • Where are we?

    • Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

    If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the heirarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

  • Multiple Navigation
    There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

    • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
    • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
    • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accomodate both techniques, and again, sometimes more than one navigation system is needed.
    • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.
  • Hide versus show sub-nav
    • Use sub-headings as part of the primary navigation
    • Rollovers or pop-outs to reveal sub-nav

    • Depending on the amount of content and number of sub-pages underneath the main sections of the web site, the navigation design should reveal the sub-navigation in some way.

Required Reading:
Designing Web Graphics 4 by Lynda Weinman: Navigation

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

Next, let’s review how to insert images into a web page. Then we’ll go over how to insert a rollover image into a page. This is important because many times your navigation will be built using rollover images. And finally, I show you a way to insert a “swap inage” into your web page. You may want to design your web site using this behavior. If so, the instructions below will be helpful.

Insert images
Here are some images to use for this exercise, one is a JPEG, and one is a GIF file.

gorilla scratchinggorilla.jpg
gorilla.gif

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, which
    you 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


Make the graphics for Insert Rollover example below.
Download: rollover.zip (18K)

The download contains two Photoshop files needed for creating the images used in the rollover and swap image exercises below.

Open these files in Photoshop, and save out the following files: rollover1.gif, rollover1_over.gif, rollover2.gif, and rollover2_over.gif. The files with the “_over” suffix are the highlight files that show when the cursor is over the graphic.

For the rollover1.psd file, you’ll need to copy the text layer and change it’s color for the highlight version. For both files, turn layers on and off as appropriate for the normal and highlight versions of each image. Use Photoshop’s FILE > SAVE FOR WEB function to create the images.

Insert Rollover

Create a rollover the easy way

  • Position the cursor where you want the graphic rollover to appear in your page, and click to set the insertion point.
  • Click on the “Insert Rollover Image” icon in the objects palette
  • Type in a name for the image (the name should have no spaces or special characters). This name will be used to reference this image from the JavaScript that is performing the rollover behavior.
  • Browse to the “Original Image” file. This is the image that is shown when the cursor is not over the graphic.
  • Browse to the “Rollover Image” file. This is the image that is shown when the cursor is over the graphic.
  • Normally, you check the “Preload Rollover Image” box. This ensures that the rollover image will be downloaded when the rest of the page loads. If this checkbox is not checked, the rollover image will download when you first rollover the graphic.
  • Type in the alternate text associated with this graphic
  • Browse or type in the link you want associated with this graphic. If you don’t want to link anywhere, just put a “#” in this space.

Required Resources – Please read and view the following:
Dreamweaver CS3 Hands-On Training by Garrick Chow: Learning the Basics
Adobe Video: Inserting images
Adobe Video: Creating rollovers in Dreamweaver

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

Image maps

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

Explorer Blue Lines
You may find that when the user clicks on an image map in Microsoft Explorer, an outline appears showing the shape of the image map. To remove this outline, edit the HTML and add a small amount of JavaScript.

  1. Find the <map> tag associated with the image you want to fix.
  2. Within the <map> tag, find the associated <area> for this hotspot.
  3. Inside this <area> tag, add the code onFocus=”this.blur()”
  4. For example,
<img src="table_files/lit_side.jpeg" width="140"  height="320" border="0"usemap="#mymap" align="left" hspace="10"><map name="mymap">

<area shape="rect" coords="2,115,138,152"

href="http://www.brickmag.com/" onFocus=”this.blur();”>

<area shape=”rect” coords=”0,166,143,204″

href=”http://www.thinkoutside.com/” onFocus=”this.blur();”>

<area shape=”rect” coords=”1,219,138,253″

href=”http://www.jacketmagazine.com” onFocus=”this.blur();”>

<area shape=”rect” coords=”1,273,144,307″

href=”http://www.artcenter.edu/” target=”_blank” onFocus=”this.blur();”>

</map>

Exercise
Download the imagemap.zip file.

Using the enclosed Photoshop file, complete the following:

  1. In Photoshop, crop the top header including the logo and navigation and optimize the image.
  2. In Photoshop, crop and optimize to save the center photos.
  3. In Dreamweaver, build the page using tables, use the “Image Map” properties in the Property Inspector for the logo, main navigation, and sub navigation.
  4. In Dreamweaver, add a nested table in the main body and add HTML text.

Additional Resources:

See my CSS video(s) below for a demonstration on how to create an image map.

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

Design process
Developing a methodology for designing web sites.

There is a definite process for designing web sites. The web design process is similar to print design but is different in some very distinct ways. Organizing and designing navigation is one of the most distinct differences between print and web design. As a designer you need to be conscious of the user experience and design with that in mind. Below I have outlined the design process for smaller, personal projects and then I detail a more professional approach called the “Core Process.” For those of you how are interested in working for a design studio or agency, it will be a benefit to understand this more complex process. Most larger firms use some variation of the Core Process as outlined by lynda.com and Kelly Goto.

It’s useful to develop your own standard methodology for designing web sites. This helps you be efficient, and able to produce consistently good work even when inspiration doesn’t come. There are many approaches to designing a web site. The following is one approach:

  1. Project Research.
    The beginning of the design process is the research phase. In this phase, the designer immerses themselves in the project requirements, client needs, and the fields related to the web site.

    1. Define the client goals and requirements
    2. Define the audience
    3. Define the scope of the web site
    4. Compare and contrast existing web sites with similar characteristics
    5. Educate yourself about the field(s) related to the web site
    6. Define the attitude of the web site and organization/brand it represents

  2. Information Design.
    Before visual design can begin, it’s important to understand how the material on the site is going to be organized. This requires study and planning in the following ways:

    1. Define the most clear organization of content, featuring the most important categories and achieving the requirements defined in the research phase. Keep in mind the 7+-2 rule discussed previously.
    2. Consolidate similar sets of content under one category
    3. Don’t assume that the client’s current organization is the best one for the web
    4. Consider how the categories relate in terms of importance and quantity of content
    5. Create sub-categories if necessary, but keep the levels of hierarchy to a minimum

  3. Design Research.
    Before you start the formal visual design, collect and develop a broad range of design elements to work with and gain inspiration from. The idea is to have more than enough material to experiment and sketch with.

    1. Collect magazines, web sites, and other materials that have great design ideas. They should be both related and unrelated to the field of the web site. Use these design concepts for inspiration.
    2. Get photographs/drawings/etc. of products or concepts used on the site
    3. Based on your project research, develop several themes, concepts and rules that will inspire and constrain your design choices.
    4. Brainstorm design elements
      1. Sketch design elements and layouts
      2. Gather or create logos, shapes, forms, and other graphic elements that can be used in the design
      3. Develop several possible color palettes

  4. Sketch page designs.
    Experiment with elements you’ve gathered and create several different sketches of the site
    home page.

    1. Try pencil and paper as well as Photoshop/Illustrator. Don’t use Dreamweaver–it’s not meant to be used as a web design tool.
    2. Select a major theme or concept for the home page, considering your research and information design — visual
      style, audience, attitude, site goals, navigation, and categories
    3. Consider how the home page will relate to the sub-pages
    4. Tie all the elements together on the page
    5. Don’t incorporate every element and idea — be willing to throw out good ideas that don’t fit.
    6. Remember the basic principles of design, including proximity, alignment, repetition, and contrast
    7. Cut, refine, simplify, and clarify your designs

  5. Produce the home page.
    Select your best design sketch, and create a formal version in Photoshop.

    1. Select the design that best communicates the attitude and goals defined in the project research phase
    2. Refine the page composition and color palette as you create the new version
    3. Consider download time
    4. Consider how the page will be sliced

  6. Produce the sub-pages. Incorporate some major design elements into the sub-pages designs.
    1. Sketch several sub-page designs, using important design elements from the home page
    2. Modify home page elements to fit the sub-page — reduce, change color, rotate, stretch, cut up, etc.
    3. Make the navigation clear, functional, and out of the way of the content. Consider making it smaller (navigation is often too large)
    4. In most cases, content should dominate sub-pages more than on the home page
    5. Select the best designs and implement them in Photoshop.
  7. Slice the images and build the pages in Dreamweaver. Building the pages in Dreamweaver is the last step of the process.
    1. After building the design comps in Photoshop, slice the images and optimize them for the web. (We will talk about this later in the semester.)
    2. Set up a proper file structure. Create an folder named “images” and place your optimized images in this folder.
    3. Create the index.html page in Dreamweaver.
    4. Create the rest of the page using the index.html file. You can use the index.html and do a “save as” to create the remaining pages.
    5. Use the navigation you created in the index.html file for the additional pages. (Once you’ve created your index.html page, you shouldn’t need to re-create pages from scratch.

Learn about a more in-depth design process for the web called the Core Process by the author of ReDesign 2.0, Kelly Goto. Click on the link under number 2 called Core Process Overview.


Core Process
Phase 1: Define the project
Phase 2: Develop the site structure
Phase 3: Design the visual interface
Phase 4: Build and integrate
Phase 5: Launch and beyond

Additional Resources
Designing Web Graphics.4 by Lynda Weinman
Web Aesthetics
Navigation

Preparing Design Comps
As we discussed, 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.
  • Notice the navigation “buttons” have both an “off” and “on” state on seperate layers. Again this is important when you are slicing– you want to be able to turn specific layers on or off.
  • 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.


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

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.

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

This week we’re going to cover CSS (Cascading Style Sheets). CSS will allow us to style text in a web page (and will also help us place and style AP divs later in the semester.) I have detailed notes below but have also outlined required reading and videos. I would like you to cover these materials. I have also given you a few additional resources you may want to read if you want more information on the subject.

CSS
CSS – style definitions applied across a document or entire site

Cascading Style Sheets (CSS) are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

Introduction
Cascading Style Sheets (CSS) enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called “coolstyle” which has the following characteristics defined: font, size, bold, text color, background color, and underline.

CSS Features
Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

  • Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height.
  • Style Sheets can define new styles which can be applied to any text selection.
  • The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).

CSS HTML
The definition in the css file for coolstyle is:

.coolstyle {
font-family: “Courier New”, Courier, mono;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FF3300;
border: 1px dotted #000000;
background-color: #FFFF99;
}

One method for applying the style to text is:

<span class=”coolstyle”>text to be be styled</span>

Creating Styles in Dreamweaver
Select TEXT > CSS STYLES > NEW. You will see the dialog box below:

  • Note in the dialog box above that you are asked to select the type of selector. You can select either a class, a tag selector,
    or you can create an ID or pseudo-class. We’ll use mostly “Class” and “Advanced” when we create the link, visited and hover states.

    1. Type a name for the selector in the name field (or choose the type of pseudo-class if you are creating a link state.) Be sure to create useful names that are easy to remember and make sense. Don’t use names like style1. Remember no spaces in the names, only underscores.
    2. Be sure to select the radio button for “Define in (New Style Sheet File)”
    3. Select OK
    4. The dialog box will ask you to name the CSS file and to save it to your folder. Be sure to add the extension .css to the end of the file name and save it in the folder with your HTML files.
  • Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. We will talk
    about all of these properties in more detail.
  • Use the APPLY button to see how your style will look in your document (assuming the style is already applied somewhere)
  • Select OK from the Styles dialog box. Applying CSS
    If you’ve modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.
  • If you’ve created a new style, then:
  • Select the text you want to apply the style to and:
    1. Click on the desired style in the Style drop down in the Properties window
    2. OR, you can do this by selecting TEXT>CSS STYLES> and select the style
    3. OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

    • Note: CSS styles may not apply as expected. You should always check your code to see if the CSS tag has been applied properly. You should also preview in both Safari, Firefox, and Explorer to verify that the styleis formatting consistently on both platforms and multiple browsers.

    Creating a hover state
    Many websites now use links that display no underline, but when the user rolls over the link, the underline shows. This is achieved using the “hover” feature of CSS.

    1. Select TEXT>CSS STYLES
    2. Select NEW
    3. Select USE CSS SELECTOR: Advanced
    4. Select name from pull down menu > a:hover
    5. Select OK and then select text decoration>underline or whatever changes you want in the hover state.

    An interesting alternative to the underline is to set the hover state to have a dotted underline. To do this, don’t use text decoration>underline, instead:

    1. Go to the BORDER section
    2. Uncheck all the SAME FOR ALL
    3. Set the bottom border style to dotted, width 1 pixel, and color to your choice.

    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 (53MB). (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.

    Styling Text using CSS | Part 1

    Styling Text using CSS | Part 2

    Styling Text using CSS | Part 3

    Styling Text using CSS | Part 4

    Required Resources – Please read and view the following:
    Read pages 171-189 in our textbook Adobe Dreamweaver CS3 How-Tos: 100 Essential Techniques (How-Tos) (Paperback) by David Karlins (Author) May 2007, Adobe Press ISBN: 0321508939.

    Additional Resources:
    Adobe videos:
    “Using CSS”
    “Styling Text using CSS”

    Readings from lynda.com
    Cascading Style Sheets
    Getting Started
    Understanding CSS

    Recommended Readings from lynda.com
    Selectors and the Cascade
    Using CSS to Affect Page Layout

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


    Two Assignments & Quiz (Must be posted to “Dropbox” on smconline.org site by noon on Tuesday, September 16)

    1) Cafe Townsend project

    Using your files from the Adobe Tutorial for the Cafe Townsend project, read part 3 of the Adobe Tutorial: Creating your first website. In part 3: Adding content to the page, you will learn how to insert content into your page. (Please note this section has eight pages). Using your files from last week, reproduce the page as detailed in part 3. Also complete the part 4: Formatting your page with CSS exercise. Read part 4 and follow the directions on how to format your page using CSS.

    2) Image Slicing exercise

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

    Using the enclosed Photoshop file, complete the following:
    In Photoshop, slice all images, name, and optimize to save all images to a separate folder.
    Keep the following in mind as you slice this image:

    • Slice neatly!
      • make a minimum number of slices
      • match up the edges of slices to produce the simplest table
      • don’t leave any spaces between slices
    • Set the optimization for each slice
    • Save the sliced images

    Slice, name and optimize all the images for the example from the Image Slicing video demonstration using the image_slicing.zip file. Build the example web page using tables and the images you created in this exercise.

    3) Quiz 3

    Also, answer the question in the attached Quiz 3 and upload to the “Dropbox” on smconline.org site by noon on Tuesday, September 16. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

    Specials Announcement:
    I HAVE EXTENDED THE DEADLINE FOR THE MIDTERM PROJECT TO MIDNIGHT FRIDAY, SEPTEMBER 19.

    Midterm Project: Must be posted to the class server (see week 02 notes) by midnight on Friday, September 19.

    You have a lot of work to complete this week. This is always true for a 8-week class. Please do not fall behind. And let me know if you have any questions.

    copyright © 2006-2008, jamie cavanaugh

    Posted in Uncategorized. Tags: . Comments Off
    «

    »