Yesterday I wrote an article on using jQuery to create a collabsable div effect. Now if you are like me and are not a javascript kind of person yet then in Dreamweavers CS3 you can use what is called a Spry Collapsable Panel to acheive a similar effect with a few simple clicks and changes to a CSS (Cascading Style Sheet) file you can get the desired result. Check out this simple example here.

I am going to start this example with a new blank page, but this could quite easily be inserted into an existing page or template. With your page open go to the insert menu at the top and select the Spry Collapsable Panel (see below).

You will then see something like this inserted onto the page.

As a default the Panel is set to be displayed in an OPEN State so if you have a look at the Property Inspector you will notice that you can change this state to CLOSED. Go ahead and Save the file now and you will notice that you will be asked to Copy the Dependant Files.

If you know take a look in Code View you will notice that Dreamweaver has inserted some div elements on the page that correspond to the CSS File that is located in the Spry Assets Folder. Open up the CSS File that is placed in the SpryAssets Folder you will see that the file is fully commented and easy to understand! which is what we want.

Ok, what if you want to change the speed at which the Panels Open?. Well if you open the javascript file that is also located in the SpryAssets Folder and go down to Line 341 you will see a line that says

this.duration = 500;

Play around with this value and you will notice the speed go faster or slower. This setting is in milli seconds and the higher the number the slower the speed and vice versa.

If you liked this article you may want to check out the Spry Navigation Bar Article I wrote as well.

Daniel Anderson
Budding Spry Expert

Don’t Want to Miss a Tip or Article? Why not Sign Up for the Weekly Blog and Web Design Tips Newsletter.

Recommended Wed Hosting - Web hosting at Network Solutions - Network Solutions

photo credit: midi8

Readers here at Dreamweaver Spot will have noticed that there have been a few changes to the design over the last week. I have been playing around with a few new things that are coming out in the new CSS 3 Web Standard which at some stage will take over from the current CSS 2.

Let me tell you there are some great enhancements that I am exited about and the one that tickles my fancy at the moment is the ease at which rounded corners can now be created. For me when learning CSS getting rounded corners to work they way you wanted them to I found was a pain the the butt.

CSS 3 introduces a range of new things that you can do with borders, including gradients, shadows and border images. If you take a look at the Navigation Bar at the top, if you are using a modern browser like Fire Fox then you will notice that the corners are rounded, but if you a browser, lets say Internet Explorer 7 it degrades OK and just displays as a normal square corner. But with the imminent release of IE 8 it should work.

Have a look at the code below and there are no images or special spans or anything like that just a couple of extra lines of code to the CSS. I love it!!!

#navbar{
height:35px;
background-color:#191D26;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Try it out for yourself and let me know how things go….I would love to hear from you.

If you want to check out a good series of articles on CSS 3 then head over to Design Shack and check out their articles on it

Daniel Anderson
CSS 3 Fan

My last article was about creating a Pure CSS Flyout Menu. In this article I want to teach you how you can integrate that concept into your WordPress Theme so that when ever you create Pages or Sub Pages the menu structure will automatically be created. It really is SIMPLE to do.

If you haven’t read the previous article on How To Create the CSS Flyout Navigation Menu then I suggest you read that one first as I am not going to go over how to set it up from scratch.

Ok, so you have a horizontal navigation structure in your WordPress theme and you want to take advantage of the pages and sub pages facility built into WordPress and create a navigation structure to suite that facilitates the sub pages as well as the main pages in a drop down menu format. Here is how we can achieve that using PURE CSS!

First we need to find where in your WordPress Theme the navigation is located. You will usually find it in the header.php or index.php files depending on your theme. In this example mine was in the header.php file. Look for a line of PHP code that looks something like this:

<?php wp_list_pages('sort_column=menu_order&title_li='); ?>

It may not be exactly the same but it will have wp_list_pages in the line of code. This WordPress Template Tag lists all the WordPress Pages and displays them as links. If you would like to read more about this template tag, you can do so here.

All I did next was copy the CSS Code that I created for the CSS Flyout Menu (see article here.) and paste it at the end of the style.css file of the WordPress Theme and to make it easier on yourself at a later date add some commenting so that you know what that section is all about.

Read the rest of this entry »

photo credit: Foxtongue

For some time now I have been using a few CSS Flyout Menu’s on different projects by just copying and pasting code from different websites that I have come across. Some of you may do just that with this article. But in a project I am currently working on I thought I would sit down and actually understand what is going on behind the scenes in the CSS to make this happen. During the early days of my development this is what I used to do to get by copying and pasting examples from other sites trying to get things done as quick as possible, well not any more. Feel free to copy and paste away with this but I urge you to take the time to read what I am about to write and take it all in so you to can understand what is involved.

I have wanted to write a pure CSS flyout menu for a while now so I though now is a good a time as any to get it done. In this example I will so you how to create it. You can have a look at the end result here. I have made the different elements different colors to separate them and make it easier to look at it in the CSS markup

Read the rest of this entry »

I reading an article published in the New York Times the other day and they were talking to Design Director Khoi Vinh and he mentioned in an answer to a question that their web designers still “hand code” their site rather than using programs such as Dreamweaver. In response to that here are 3 things why I think Dreamweaver is the way to go when creating your CSS. I haven’t fully handed coded a website for a very long time and tend to disagree with the fact that he thinks it “yields better and faster results.”

I would love to know how everyone else writes their code. Do you still use a text editor or use a program such as Dreamweaver? Let us know and post a comment with what you use and why.

1. The Template Pages Are Actually Quite Good
If you a beginner or even an intermediate or advanced CSS developer and are not all that confident with the whole CSS Layout thing and moving from a table based layout then this improved feature may just be your answer. Not everyone has the time to learn new things to get things done. I have written previous articles on creating CSS Layouts for a 2 Column, 3 Column, Liquid Layouts, and also Centering a Layout. But if you don’t have the time to learn these techniques then this section is for you.

File > New bingo there right in front of you are a plethora of CSS Templates to choose from. All of which provide great inline commenting so you can learn as you go. All these layouts render well in Firefox (Windows and Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0, 9.0; and Safari 2.0.

Read the rest of this entry »

photo credit: kygp

In previous articles I have outlined how to center a design using auto margins and negative margins, How To Create a 2 Column Layout Using Floats, and also the Holy Grail of CSS the 3 Column Layout.

For the CSS Beginner and even for the more experienced, liquid layouts can sometimes be confusing. In this article I will explain the pros and cons and also show you how to create a 3 Column Liquid Layout Using CSS. Let’s get a few definitions out of the way first. Let me just explain what a Liquid Layout really is and then we can get your toes wet and create a Layout of our own.

What is a Liquid Layout?

In a Liquid Layout the Sites dimensions are set using percentages instead of pixels and therefore allows the site to scale in relation to the size of the browser window. So as the browser window gets bigger the sites columns get wider and when the browser window gets smaller the columns will reduce their width. Sounds pretty good, but there are a few drawbacks, for example when the browser window get to small the line lengths can become ridiculously narrow and vice versa, if the site expands to the full width of the browser window the line lengths become far to long and end up being very difficult to read. But we can use the min-width and max-width properties to combat that.

Read the rest of this entry »

A couple of days ago I wrote an article on Creating a HTML Newsletter using CSS (Cascading Style Sheets) I mentioned that different email clients render CSS differently and trying to make things look the same in all client was just about impossible.

Well The Email Standards Project is trying to do something about this, which is great for us designers and developers.

“Our Mission is to drive the use and support of web standards in email, working with email client developers to ensure that emails render consistently.”

The site is a great resource if you are interested in developing an email marketing campaign for your business or you are a designer trying to design a newsletter. If your business or blog has an email newsletter that goes out on a weekly, fortnightly, or monthly bases then there are golden opportunities for you generate some income by making some ad space available on your newsletter. Using HTML Emails are ideal for this!! Make sure you do not miss the boat and grab a piece of the action.

Jupiter Research projects that e-mail marketing spending will grow from $1.2 billion in 2007 to $2.1 billion in 2012 So getting it right will be very important.

Let’s delve a bit deeper into a few popular email clients to see how they rate. Now what the Email Project does is send an email “Acid Test” similar to that of the Web Standards Group to different clients to test a limited number of CSS properties constructed with proper markup. Read the rest of this entry »

Do you have a weekly or monthly Newsletter that goes out to Customers on an email list? Well if you do then you will be interested in this article. With most modern email clients (Outlook Express, Outlook etc etc) are able to display Email as HTML and Text then why not take advantage of that. I thought I would share with you how I use Dreamweaver CS3 to create my HTML Newsletters and then use an email auto responder service to distribute them.

The Email Responders Service I use for all my sites Email Newsletter is AWeber. You may use a different type of service but nevertheless they should allow you to create a HTML Email. If you haven’t got yourself and email opt in on your site for your readers and or customers then I would highly recommend that you do.

With this article I will be using the Aweber interface but if you use another service then I am sure that they would have a similar facility.

A Word on CSS and Email Clients

All the email clients render CSS differently and if you have ever tried to do this you will know what I am talking about. If you haven’t then making it look correct in every reader is more painful than making a site design cross-browser compatible. So here is what I suggest you do.

I know this goes against all the web standards groups but it will make your life a lot easier. Use TABLES, I know, I know everyone tells you not to and I don’t ever use them in Website Design and Development, but in this situation I do.

Read the rest of this entry »

Now, I am from the old school of the CSS Coding circles where I generally like to open the CSS File and edit the file itself. But Adobe Dreamweaver CS3 has a pretty cool feature that I have been using quite a bit of late. I cannot believe I haven’t used it more often.

In the last couple of projects of mine I have been using the “CSS Panel” on the right hand side of Adobe Dreamweaver CS3.

From this panel you can Attach a Style Sheet, Add a New CSS Style Rule to and already attached Cascading Style Sheet. But the best thing I reckon is the ease at which you can make changes to the CSS File. Read the rest of this entry »

In Part 1 of this series on Creating a Spry Navigation Bar Menu in Dreamweaver CS3 I outlined the easy process involved in creating the horizontal or vertical navigation bar. In this article I will show you how you can change the default style of the menu with just a few changes to the Cascading Style Sheet that is associated with the navigation menu.

Step 1. Open the Cascading Style Sheet (CSS).
Remember in the previous article that when you insert a SPRY Menu Bar that there was a directory that was automatically created called SpryAssets? Good. Well inside that folder you will see a file called SpryMenuBarHorizontal.css, lets begin by opening that file. From the Files Panel on the right hand side open the CSS File.

Step 2. Spry Menu Design Information
Ok now that we have the file Open, the first part of the CSS File we will look at is the Design Information Section. Now this starts on Line 77 and you should see the commenting that describes this. Read the rest of this entry »