LIBRARY: Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Spry Menu Explained

Spry Menu Explained
A Creative COW Dreamweaver Tutorial

Richard Williams: Spry Menu Explained
Richard Williams
Richard Williams
Kent, United Kingdom

©2009 Richard Williams and CreativeCOW LLC. All rights reserved.

Article Focus:
In this tutorial, CreativeCOW leader Richard Williams explains the principles of the Spry Menu and answers the most commonly asked questions.

Introduction: Why is the spry menu so problematic
Inserting a Spry Horizontal Menu
Positioning your Spry Horizontal Menu Bar
Editing the look of your Spry Horizontal Menu
Setting the Height of the Spry Menu Bar
Changing the colour of your Spry Menu
Changing the colour of the Spry menu Hover/Rollover Rule
Making the Spry Menu Transparent: The problems in IE
Common Problems with the Spry Menu seen here on the forum
Width Setting of the Spry menu to suit the different title Lengths
Spry Sub Menu Not displaying in the correct position in IE
Can I have a different colour in my Spry Submenu
Multiple Issues with Spry Menu Bar
Resetting the Spry Menu CSS
Useful Tips


Ok, it hasn't gone un-noticed that there are several posts in this site asking for help with spry menus. I have a few comments to start with before we get on with this tutorial.

  1. Many people are very opinionated over the spry menu, and its apparent problematic issues within Dreamweaver and or cross browser compatibility.
    I completely disagree with these statements, the spry menu is VERY stable in my opinion, it is only ever an issue when people alter things without really understanding what they are doing, and then not undoing the multiple changes they make.

  2. This is my First tutorial, so please bear with me on this, I apologise if I go off on tangents on some of the explanations, but they are points I feel are important to understand before delving into editing a spry menu. This whole tutorial is really ideally meant for reading throughout, so just take the 20mins or so it will take and please feedback how you found it.

I am going to explain some of the most common issues I see here in the forum, and the reasons behind them. Please take the time to read through this tutorial, it will help you to understand many different things, including a little bit of CSS Styling too which should help you out in your general designs too.


Inserting a Spry horizontal Menu

Here you are in Dreamweaver, you have downloaded and installed the spry add-ons, and now you want to use it.

You click on the Spry Tab, and select Menu, here im going to demonstrate the horizontal menu. So, for this example, I have inserted a spry menu into a container div to show you how the settings work, usually I would create a div and position it where I want the menu to appear but I will explain this more later

So you see now in the above image, that a spry horizontal menu has been inserted into the DIV as requested. Now there are two things of interest to note here... Look at the files tab on the right...

Once you have saved the file, Dreamweaver inserts a new folder called SpryAssets. Inside this folder are all the controlling JavaScript files and CSS style sheets that make the menu work

Also, notice the properties panel at the bottom of your page...

USE THIS! Its pretty self explanatory, but most people do not use this panel. This is the properties of the spry menu, notice that there is no option to change the text colour, font sizes, backgrounds etc... that's because you can't; or rather you shouldn't alter the spry menu in this way. The trouble a lot of people have is the change the spry appearance using the WhatYouSeeIsWhatYouGet functionality of Dreamweaver, but it goes totally against the idea of CSS. People complain that this doesn't make sense but then you alter the spry menu in the exact same way to alter everything else in CSS, so this is a duff argument...

Editing the Postion of the Spry Horizontal Menu

Ok, so lets open up the CSS window and select the SpryMenuBarHorizontal.css from the menu.

OK, we are going to go through some of the different settings... Highlight the first item in the CSS, which is ul.MenuBarHorizontal

So, the options in here are as shown above. Cursor type, Font Size etc...

The width is set to auto. This is the width of the main menu, and auto is a pretty good setting to have in here, so I would leave it as auto most of the time unless it is absolutely essential you want to specify the width. The main thing here to look at is the margins and paddings. It is important to understand what these settings mean.

In the CSS rules, you have Margin/Padding TOP, Margin/Padding RIGHT, Margin/Padding BOTTOM and Margin/Padding LEFT. You can of course, add these 4 different settings in yourself if you want to, if it makes things easier for you, but Margin or Padding written on its own, represents ALL FOUR settings.

What you also need to understand is that a setting of MARGIN 0 actually is exactly the same as writing Margin-top 0, margin-right 0, margin-bottom 0 and margin-left 0.

The whole reason for this to be added in this way is to make the CSS shorter, and thus loading time shorter. You must understand though that this 0 is repeated four times by the browser. So with a single 0, this represents 0 0 0 0. Its important to remember this in CSS... because lets say you wish to alter the top padding and the right padding... If you added margin 20px 50px, which seems to be correct for asking for 20px margin in the top of the menu, and a 50px margin on the right of the menu..., BUT... because you are missing the other two values, the CSS will repeat... so it's the same as writing 20px 50px 20px 50px.

If you wanted to add margins to top and right, you need to type it as 20px 50px 0 0

Ok, so, I personally would insert a spry menu into a DIV, or indeed a table cell, and alter this to position it, but it is possible to position the spry menu using these settings. So, I want to put the spry menu at the bottom of the orage boz, past the site title. Im going to do this by adding padding to the ul.MenuBarHorizontal Im going to add 170px to the top, and 450px to the left of the menu. If you roll your cursor over the padding settings, the words padding-top padding-right padding-bottom padding-left will appear to remind you of the order... So I type 170px 0 0 450px.

I commonly see that people have put numbers in here, but no reference to what the numbers are for... eg. 170 0 0 450. This is non-sense... You have to define that you are moving by px, if indeed that's what you are working with, so don't forget to include the px after a whole number.

I again have to mention CSS rules here. If you have added a width to the menu, remember that the total width of a DIV is equal to margin+padding+width.

So, if you have a padding of 450px to the left, and a width setting of 400px, the total width of your div = 850px.

This is a sticking point for people on numerous occasions. That's it!


Changing the Appearance of my Spry Horizontal Menu Bar

Now I'm going to skip straight down the ul.MenuBarHorizontal a rule to change the appearance.

Now to understand a little better what this rule is, and indeed what we are doing with CSS, look at the code.

Because your menu is automatically set up to link to other pages or other sites etc, it is linked... and to link, normal HTML adds <a>tags to an item. So, EVERY part of your menu is wrapped in an a tag <a>item</a>

So, if I want to change something that affects every item in the spry menu, I select the ul.MenuBarHorizontal a style. (simple when you understand isn't it...) So, lets say I want to make all the text centralise.... I add the rule, text-aligh center to the ul.MenuBarHorizontal a.

You see all text is now centred.

Setting the Height of the menu Bar

Now I draw your attention to the padding setting here in the ul.MenuBarHorizontal a.

You see that the padding is set to 0.5em 0.75em Remember what we discussed earlier, that css will repeat, so this is the eqivilant of writing 0.5em 0.75em 0.5em 0.75em, or padding-top 0.5em, padding-right 0.75em padding-bottom 0.5em padding-left 0.75em. This represents the padding around the text.

This is important to know, because some of you might be fitting your menu into a set height image on your design... this is where you control this. FOR EXAMPLE: Setting the height of the menu item

Lets say I want to ensure my menu fits into a background image or something that we know to be 30px in height.

The way we do this is... Set the px of the text we are using for the menu. Again we continue to do this inside the ul.MenuBarHorizontal a rule. So, lets use a font size of 12px. We will ADD the rule height=12px to match the font Now, alter the padding to make up the rest. 30-12 = 18. So we need a padding top and bottom to equal 18px. 18/2 = 9

So lets add 9px to the padding top and 9px to the padding bottom... or lets do it as it is set out already, and change the current 0.5em padding setting to 9px which will automatically repeat and add 9px to both the top and bottom of the menu items.

This is now 30px high.. although you may need to adjust the position again of the menu to ensure it is aligned correctly, by altering either your DIV or your ul MenuBarHorizontal padding's as we did in the beginning.

Changing the colours of my Menu

The ul MenuBarHorizontal a is also where we change the colour of the normal text, and the normal background colour of our Menu items (normal being in its normal state, not its hover/rollover state).

Making the Menu Bar Trasparent

Now, many people ask about making the menu colours transpatent. You can select this in the usually way using the colour swatch... Basically setting the background colour to nothing... and this works perfectly fine in firefox and safari browsers... but to get it to work in IE, you have to remember that there are a lot of IE hacks in the spry css, so we need to delete one of them...

Right at the bottom of the rules, you will find ul.MenuBarHorizontal li.MenuBarItemIE There is a background setting here... set to white (#FFF).

Delete the whole background rule by highlighting it and clicking on the dustbin at the bottom


Changing the hover/rollover looks

Now... the only other rule that you need to know is ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

In here are the settings for the background and text colour of the hover function.

That's it. There are not many other option you need to worry about. If you stick to these rules, then you will achieve total browser compatibility with no problem.


Now I am going to go into some of the other common questions that come up on this site regarding menu bars.

Changing the width of my menu items to suit the text.

At the moment you have the settings of the width of each item in the main menu set in the ul.MenuBarHorizontal li rule. Its common that people adjust this width to suit the longest item title, increasing the pixle width of the rule... but the problem with this is that all the other menu items increase in width with it...

Set this setting to auto will make bring the menu item widths different sizes depending on the length of text. This will give you this...

To space them out a little better, alter the left and right padding settings in the ul.MenuBarHorizontal a style, NOT in the ul.MenuBarHorizontal li rule.

Sub Menus not displaying correctly

The submenu setting width is set in the ul.MenuBarHorizontal ul

By setting this to auto you can match the effect you just made on the main menu items. The trouble is though, this then causes an issue with the look of the submenus in IE...

You see now, the submenu doesn't drop vertically, it shows up horizontally. To rectify this, add the following code into the SpryMenuBarHorizontal.css...

ul.MenuBarHorizontal li ul li{ 
    clear: left; 

If you are going to make the ul.MenuBarHorizontal ul width auto, then the ul.MenuBarHorizontal ul li should also be set to the same setting. (these two should always be the same width settings).

Spry submenu does not drop down from the correct position in IE

There are two reason I see for this on here.


1. Using the WYSIWYG functionality to alter the look of the spry.

Look at the code highlighted above.

<li><a href="#">Item 2 is much longer in text</a></li>

Ok... now look what happens to that code when I press text align center...

The code changes from:

<li><a href="#">Item 2 is much longer in text</a></li>




<div align="center"><a href="#">Item 2 is much longer in text</a></div>



You have created a div around the <a> tag, inside the <li> tags. This then causes the CSS to get confused now in IE, and the submenu drop downs start to drop from the top left hand corner of the browser. The only way to rectify this is to go through the code and delete out all the DIVs that have been inserted manually... or delete the menu then insert a new one.


2. The other reason I see, is putting numbers into the ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible top or left settings.

These settings should STAY as top 0, and left auto.


Can I make my Spry Submenus a different colour.

Of course, now hopefully you understand a little more about CSS, let me show you how to use dreamweaver to help you add your own things to the menu. Lets say we want to have the main menu text white, but we want the submenu text RED...

Click on the spry menu and select a submenu item (notice please that I did not highlight the 1st item (1.1) because this is a submenu with another submenu)

Now look at the code at the bottom of the window. <ul.MenuBarHorizontal #MenuBar 1><li><ul><li><a>

Ok, so we know the spry has rules such as ul.MenuBarHorizontal li and ul.MenuBarHorizontal ul and ul.MenuBarHorizontal ul li etc, so if we add our own rule ul.MenuBarHorizontal li ul li a then we can control our submenu separately from the other menu items.

Add this rule to your SpryMenuBarHorizontal.css and add colour #FF0000 and all the menu sub items will now turn red.


Can you now change the sub-sub menu...? See the picture below and give it a go yourself.

Multiple issues with my Spry menu

OK, so your spry menu has well and truly lost its way.. what can you do...?

Listen, let me give you some history of myself and Spry Menus. I am not a website, nor am i a spry or dreamweaver expert. Far from it. I am a guy, who likes to know how to do things, isnt affraid to experiment, and loves to challenge himself. I started out like many of you, visiting this forum looking for answers, but i believe it is right to come and use these forums, but also to feed something back into them. So, becuase i had so many questions, i made a point of coming back to the Dreamweaver forum every day, seeing if there was any new posts, and trying to help solve tose issues, but trial and error. It just so happens that nearly all problems at the time were about spry menus. And you wanna know how i worked it out.. i used to open the pure SpryMenuBar css, open it along side posted css' that had been fiddled with and altered, and compare the two side by side. everytime i saw a different value in the posted css to the pure one, i would change it, test it, and see if it solved the problem. It used to take me AGES to do this, but this is what i did. Ok, so admittedly, now, i pretty much look at the code and can spot the problem, but only because i have seen about a million over the past year and a half. One day, the penny just dropped for me, and with the help of others, such as Abraham and Fernando here on the Dreamweaver forum, i have learnt massive amounts...

My adivice if you have totally lost your way and found yourself here, is to reset the spry CSS files, and start again, this time, hopefully understanding a little bit more about what you are doing.

The way to do this is in the site menu, select Spry updater

Tick the menu Bar box and press update...

if you still have your files open, The following message will come up

Click yes. This message will only come up if you have been working on the CSS and it is still currently open.. but eitherway, after you have done this, close all your files down and then re-open them.

The spry menu should now be back to its original state, but your old files will now have been restored into new folder called spryassets_backup, incase you want to refer back to them at some point.


Some Useful Tips:

If you're like me, you are used to making changes to your site, and changing your mind over the change, and hitting ctrl Z or the equivalent, to undo your last change. BEWARE!!!! This is no good when you are altering css from your HTML. You see what alot of people fail to notice, is once you start to alter an external style sheet from within an HTML document, what dreamweaveer actually does is opens up that external css in the background, and makes the changes. While you are merrily altering the CSS within the HTML document, you are clocking up changes in another folder. So, you decide youve lost your way and you hit undo 300 times from within your HTML... expecting all the recent changes to revert back to the beginning... but they DONT! you need to click on the css files tab at the top of the screen, THEN hit undo to roll everything back! DONT FORGET THIS!!!!


Open up and READ the SpryMenuBarHorizontal.css
There are uselful hints against each rule, explaining what each important rule does and why certain settings are set in the way they are.





Re: Spry Menu Explained
by Koen Dolron
i have a problem with the sub menu's...

it sais at ul.MenuBarHorizontal ul that it goes 1000em (or 16000px) to the left, but if i show it in my browser there is this huge scroll bar on the bottom of the page because my page is 16000px wide...

is there any way this can be fixed? like it goes from invisible to the submenuplace directly? instead of from 16000px to the place it has to be?
Re: Spry Menu Explained
by Tracey Hovey
I found under this heading the answer to my frustrating problem of making the menu widths appropriate for the different length text. But! when I hover the position is still all wrong. Can anyone help me out with the correct menu options I need to change (eg: which one do I change to auto and which one do I update the padding - ? ul.MenuBarHorizontal a:hover ?????)
Hope someone can help as it can be frustrating when you know what you want it to do but not sure exactly how)
@Tracey Hovey
by Tracey Hovey
Forgot to paste in the heading I was referring to
- Changing the width of my menu items to suit the text
Re: Spry Menu Explained
by Dave Smith
Follow up on my last on adding GIF images to my buttons.
Here is what I have made up as an example of what I want to use for the Up and Hover buttons on my MenuBar :

The UP Button:

The HOVER Button:

Hope this can be done . . . ;)
Re: Spry Menu Explained
by Dave Smith
Richard I am just getting started with the new update of Spry in my DWCS3.
I was wondering if you know of a way to use a GIF image for the up and hover of the buttons in the Horizontal Menu Bar?

I would like to use some buttons in GIF format instead of the flat square looking buttons if possible.
Re: Spry Menu Explained
by Aidan Mackesy
Hopefully someone can help me with my issue with IE and a spry menu I'm using for the following site:

Issue in IE(9)all the menu links are .pngs w/transparencies and I can't seem to get rid of this awful white background. I deleted the CSS rule ul.MenuBarHorizontal li.MenuBarItemIE from the Spry css but it's still didn't work. Can someone please help me? thanks !!
Re: Spry Menu Explained
by Martyn Shanks
I created this for some beginners, don't know if anyone else will find it useful.

Re: Spry Menu Explained
by Michelle Considine
I have to post more gratitude here. Not only did your Spry Menu Explained get me beyond a majorly time consuming headache, you directed us newbies to just open up the css page of the menu and take a look. This exercise helped me to get rid of the annoying gray borders on the sub menus!!

Thank you again.

Re: Spry Menu Explained
by Michelle Considine
I spent way too much time trying to figure out the IE spry menu issue of the sub menu displaying horizontally instead of vertically. I am quite certain that I would have never figured this out on my own. A huge thank you for putting this together and making it so accessible!!!

cheers, Michelle
Re: Spry Menu Explained
by Jabeen Shahul
I am new to Spry ..i have a issue with my sublinks not linking to the html that I assign y is that?
Re: Spry Menu Explained
by Carolyn Borjon
My images hide my drop downs. Is there a fix?
LOST in spryville
by peter fato
Hi. Am fairly new to CS5 Dreamweaver. Have been playing around in Spry for a few days and I seem to have done something wrong. Adding spry menus now only brings up one single menu, though in properties field down below it lists 4. I've tried deleting all menus and starting from scratch, deleting the files i was playing in to no avail. When I open a new file and add a spry menu I get the same one I deal with in the current file. Have also tried resetting the width on the one menu that comes up but that doesn't bring any other menus into view. Please note there is a folder sitting on my desktop called "spry assets" not sure how it got there, only that i had a hand in the matter. Please help? Thank you,

Re: Spry Menu Explained
by Caroline Norton
Thank you! Thank you! Thank you! I have been fighting the problem with IE & Chrome to make the submenus of a horizontal menu bar to display vertically. This bit of code

ul.MenuBarHorizontal li ul li{
clear: left;

did the trick. Again did I say thank you? THANK YOU!
Re: Spry Menu Explained
by Robin Eyre
Richard, you rock! I was searching literally for hours trying to find a way to remove the white background from the menu in IE. It was working fine for other browsers. I'm new to web design and I'm using CS3 and have IE 9 Beta so the message at the bottom of the CSS about 'Hack for IE ... 5.0' I just disregarded. However it appears as though it's relevant for IE 9 Beta as well.

Many thanks. I can now sleep peacefully.
Re: Spry Menu Explained
by Stevn De Lozada
I still need to know how correct my issue with IE browsers going crazy with my horizontal menus.

Stevn De Lozada
San Jose Fashion Week
Re: Spry Menu Explained
by sean wilson
I created a vertical spry menu which has several top-level items with submenus under them (by Dreamweaver cs4). Whenever you hover over a top-level item, the submenu appears properly below it together with other top-level items. However, as soon as you click on one of the submenus, some of the top-level items disappears under submenus, just for a second and then back to the normal position. And more important is that when you move the mouse away from these submenus, the same top-level items again disappear or hidden under those submenus.

For example: publication, presentation, research, teaching experience and industry are top-level items, and publication has three submenus: journal, book, working paper. When I hover over publication, these three submenus (journal, book and working paper) appears below it, with other top-level items. But, as soon as I click on one of these three submenus, the top-level items(presentation, research and teaching) disappeared for a second and then appeared. And when I move the mouse away from those submenus again these three items (presentation,...) hidden and just industry can be seen.

I attached some prints screen for your review and consideration.

spry menu bar in basic format:

hovering on publication and appearing submenus properly below it together with other top-level items:
(As I mentioned above after clicking on submenus, these three top-level: presentation, research,…, disappeared just for a second and then appeared which is not possible to show this phase…)

moving mouse away from submenus and disappearing presentation, research, teaching experience:

Honestly I have no idea how to control it... I’m not able to proceed to next level without having your comments. This is second time which I submit my request but I didn't receive any answer....
Thank you in advance for any help.

Re: Spry Menu Explained
by Georgette Rogers
Thank you. I believe I am back to "default" settings, I have all of my properties intact. All of this is good. However, I still cannot maintain my background color once a page is selected. (Unsure if this is ID'ed as active or focus). Indicators say that the hover and focus state color is modified - as I programmed it to be, but active is not. How can I effect that state, so that when a viewer has selected a page from the menu, it is identified with a color.

This is tremendously helpful. Thank you again. I've been trying to figure it out on my own, but the end of the day finds me where I was first thing this morning.

Georgette A. Rogers
Re: Spry Menu Explained
by Georgette Rogers
Hi, Thank you for such precise instructions. I determined to reimport a spry menu using the Spry Updater that you suggested. I am working in CS5 and did not have that option in my menu. It seems that just deleting the menu was not sufficient. Upon reimporting a Spry Menu, all of my properties came back, along with all of my corrupted code. I had done a number of command-z edits. I know not to rely on that in the future, but I still have a tainted menu. Is there another way to fully clean the spry programming out of my file?
Many thanks, Georgette
@Georgette Rogers
by Abraham Chaffin
I generally create a completely blank HTML Doc and insert the same Spry menu in and then save the file. When DW creates the extra files I take those.

Good tutorial
by Ian Lester
Well done Richard, you explain it extremely well i just wished i had read it prior to tackling the problems i had. Thank you for resolving nearly all of myn problems i will address the latter ones now i have a better understanding of the SPRY!
PAT, Please post on the dreamweaver
by Richard Williams
Please post on the dreamweaver forum your issue then we can take a look
@Richard Williams
by Rajesh Biswas
There are 2 spry menus in all of my pages in the web site The menus and submenus are displayed correctly in the firefox and ie7 but in ie8 the 2nd menu’s submenus are displayed wrongly. There is a huge gap between the menu and submenu.

Pls help to solve this problem.
Thank you
by Pat Kehler
You solved my problem with the horizontal submenus trailing off to the right rather than stacking.

I am still wondering how to make my submenus, in IE8, have a consistant color background. The text is great, but the background is only as wide as the text so it looks messy. Any thoughts?

It is good in firebox, Opera, and Safaria. Of course IE8 is the only problem.
Thanks so much for taking your time to write this.
by Angela Weeks
I've made a few and deleted just as many when I came across this article. What a great explanation. I actually created my menu and understood what I was doing at the same time. I wish I understood other things this clearly. Thanks soooo Much!
Thanks for the +ve comments guys.
by Richard Williams
Thanks for the +ve comments guys. Fopr some reason i havent picked these up through my mail, but i just stumbled across them, so thanks alot.
(stevn) If you recieve this, i will reply to you tomorrow, its late right now.
Richard, you are a SPRY god!
by Ron Lindeboom
What an incredibly valuable tutorial. This one makes the subject of spry menus one that even I can ALMOST understand. With two or three read-throughs and I will be able to.
WOW do I need this
by John Lee
I am too tired right now to review this but I am certainly going to come back with fresher gills later to breath in some wisdom ..... 6:45am....time for some sleep.
I like the pedagogical approach of
by evrard blom
I like the pedagogical approach of going from the pupils' point of view.

CSS is great when compliance to standards matter. Now the engineers leave too much work on the user's shoulder. Ultimately one of those releases streamline the whole process and harness CSS down to property boxes.

Meanwhile, very great eyes-opening and helpful tutorial.
Very Nice!
by Abraham Chaffin
Good work Richard. Great to see the hundreds of threads in the DW forum finally turned into an article.

Well done =)
Richard, So glad you made this
by Stevn De Lozada

So glad you made this section. I did develop a problem where there was no problem before. It doesn't seem to make a difference on the IE or Firefox sites, but in dream weaver design mode it is mega ugly and pushes everything down below the length of the Fashion Menu link.

Let me know if this is something you'd have time to look at, it has to do with incorrect overlapping code, I don't know how this happened.

Happy Holidays,

Stevn & Natalia
San Jose Fashion Week
Great tutorial!
by Fernando Mol
I think this is going to be a hit on the web. An extensive, well explained and really needed tutorial.

Related Articles / Tutorials:
Adobe Dreamweaver
Bridging Web Design and Development with Adobe Extract

Bridging Web Design and Development with Adobe Extract

Adobe Extract, released in August 2014, is a feature in Photoshop 2014 CC, Dreamweaver 2014 CC and Creative Cloud that has the potential to transform the way web designers and developers work together. If the designer does have a Creative Cloud membership, it opens up a new possibility: uploading a PSD file (one received via email, for instance) to Creative Cloud and getting the assets and CSS information out to to your project.

Editorial, Feature
Michael Hurwicz
Adobe Dreamweaver
Using PHP To Obtain Data from a MySQL Database

Using PHP To Obtain Data from a MySQL Database

Showing how to use PHP to access a MySQL database. Building a real world application, this tutorial is interesting in that it shows how to narrow a search based on 2 different criteria (2 different MySQL fields). Finally, this tutorial ends with giving complete code for an HTML page as well as the PHP files.

Demetri Tashie
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 4

Working with Photoshop Slices in Dreamweaver - 4
  Play Video
In part 4 of this video tutorial series, Richard finalizes the web page inside of Dreamweaver. Topics covered in this tutorial are repeating background images, background color, site load speed up and expandable site construction.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 1

Working with Photoshop Slices in Dreamweaver - 1
  Play Video
In part one of this video tutorial series, Richard Williams shows you the process of designing a website in Photoshop, exporting it as image slices and then importing the slices into Dreamweaver.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 2

Working with Photoshop Slices in Dreamweaver - 2
  Play Video
In part two of this video tutorial series, Richard Williams explains how to export the rollover state of buttons from Photoshop and import them into Dreamweaver to then be applied to the site being designed from part one.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 3

Working with Photoshop Slices in Dreamweaver - 3
  Play Video
In part three of this video tutorial series, Richard Williams shows how to convert images to background images and put text over the top of them inside of Dreamweaver. Richard then applies CSS styling to the HTML text to match it with the design created in Photoshop.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Rollovers in Adobe Dreamweaver CS3Rollovers in Adobe Dreamweaver CS3

In this Dreamweaver CS3 tutorial, Abraham explores the capabilities of Dreamweaver to create dynamic rollover functions on a web page. What before might have taken special scripting is easily accomplished through a few slight alterations of the rollover behaviors built into Dreamweaver. Part two of this tutorial shows how to embed pop up videos into your web page.

Abraham Chaffin
Adobe Dreamweaver
CSS Basics in Adobe DreamweaverCSS Basics in Adobe Dreamweaver

This tutorial is designed to introduce the concepts of using CSS in Adobe Dreamweaver and HTML for web designers who are not familiar with CSS in web design. CSS stands for Cascading Style Sheet and is a system for adding styling to your web pages and web page content.

Abraham Chaffin
Recent Articles / Tutorials:
Adobe After Effects
Create an Arrow or Pointer preset for After Effects

Create an Arrow or Pointer preset for After Effects

In this video tutorial, Graham reveals a really quick way to use Shape Layers to make an arrow preset that you can use to point to anything in Adobe After Effects.

Graham Quince
Adobe After Effects
Realistic Water Movement with Fractal Noise

Realistic Water Movement with Fractal Noise

In this tutorial video, Andy Ford shows you how to use the Fractal Noise effect in After Effects to add movement to water in a still photo

Andy Ford
© 2020 All Rights Reserved