close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

CSS Menus Starter Kit for Photoshop

Tutorial created by Ray Borduin, WebAssist

Categories: CSS, Design

rating
1 ratings | Sign in to rate this tutorial | View comments

Learn how to design and prepare a graphic menu composition within Photoshop, convert your menu graphic to a CSS menu, and overcome browser compatibility issues. The Menu Starter Kit is a 90-minute interactive video tutorial. Learn at your own pace and watch unlimited times.

The tutorial includes a sample menu comp (Photoshop file) with start and finish sample files plus a bonus menu comp.

next sectionarrow down
arrow downTraining Topics

The CSS Menus Starter Kit for Photoshop covers a range of topics.

Use Photoshop to:

  1. Create normal menu state
  2. Create hover menu state
  3. Comp multi-state sub-menus
  4. Slice and export graphics



Use Dreamweaver to:

  1. Create HTML structure with unordered (bulleted) lists
  2. Add CSS reset rule
  3. Develop CSS rules with compound selectors
  4. Integrate background graphics



Create backwards compatible menus

  1. Address Internet Explorer issues
  2. Apply conditional comments
  3. Switch browsers with JavaScript



Instructions on modifying menus

  1. Changing menu appearance
  2. Repositioning menu labels

next sectionarrow down
arrow downRequirements

You will need the following in order to fully utilize the CSS Menus Starter Kit for Photoshop tutorial.

  1. Adobe Flash Player 7 or higher.
  2. Photoshop CS3 or higher.
  3. Dreamweaver CS3 or higher.
  4. Windows or Mac platform.
  5. Start_Here.zip
  6. Movies_1.zip
  7. Movies_2.zip
  8. Movies_3.zip
  9. Movies_4.zip
  10. Exercise_Files.zip
The movie files have been separated into multiple .zip files to resolve bandwidth issues.

next sectionarrow down
arrow downSetting up the movie files

Once you have downloaded all of the movie files, extract the contents of each zip and ensure that the files are stored in the appropriate location.

Step 1: Extract the Start_Here.zip file

The first step in setting up the movie files is to unpack the Start_Here.zip file.

  1. Locate the Start_Here.zip file on your computer.
  2. Extract the file by either right-clicking and selecting 'Extract all' (PC) or double-clicking and have the files automatically extracted (Mac).
    You can also you the compresstion program of your choice. Just make sure the contents are extracted to their own folder.
  3. Locate the newly extracted folder 'Start_Here'.
  4. Open that folder and look for a subfolder called 'swfs'. That is where the movie files are going to be placed.

Step 2: Extracting the rest of the movie files.

Now you will need the unpack the rest of the movie files. Each 'Movies_*.zip' file contains a portion of the tutorial.

  1. Extract the 'Movies_1.zip' file.
  2. Open the extracted 'Movies_1' folder.
  3. Select all the .swf files. (Ctrl A for PCs, or Cmd A for Macs).
  4. Copy all the selected files. (Ctrl C for PCs, or Cmd A for Macs).
  5. Locate and open the 'Start_Here/swfs' folder.
  6. Paste the .swf files in that folder. (Ctrl V for PCs, or Cmd V for Macs).


Repeat this process for 'Movies_2.zip', 'Movies_3.zip', and 'Movies_4.zip'.

next sectionarrow down
arrow downExtract the Sample Files

As an optional step, you may unpack the sample files and use the contents when viewing the tutorial. Or, you may also use your own content if you prefer.

  1. Locate the 'Exercise_Files.zip. file on your computer.
  2. Extract the file by either right-clicking and selecting 'Extract all' (PC) or double-clicking and have the files automatically extracted (Mac).
    You can also you the compresstion program of your choice. Just make sure the contents are extracted to their own folder.
  3. Locate the newly extracted folder 'Exercise_Files'.

arrow downViewing the training video

Once you have moved all the necessary swf files, view the interactive tutorial by double-clicking the 'index.htm' file located in the main '/Start_Here/' folder. This will launch the page in your primary browser. The presentations will start immediately. You can jump to any desired topic by clicking its link in the table of contents.

The index.htm file will open in your default browser on your machine. Depending on which browser is set as default, you may encounter some security setting alerts. Simply clicking OK, or choosing Allow Blocked Content will allow you to proceed with the CSS Menus Starter Kit.
If you are still unsuccessful in getting your training to load properly, you may need to add the location that the files are being stored to your Flash Security Allow list.
1. Go to the following URL http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html.
2. Choose Add location from the menu list.
3. Browse for the folder that contains your Starter Kit files
4. Click Confirm.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
1 ratings | Sign in to rate this tutorial

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top