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.

photo credit: Tim Morgan

This article came about via a few emails I have had over the last week from readers asking for an article showing how to connect your website application to a back end database. It really is not all that difficult to do and once you have read this article you will have all the knowledge you need to achieve it.

Step 1. Set Up Your Local and Remote Site.

The first thing you need to do is set up your site in Dreamweaver CS3. If you do not know how this is done then I would recommend you SIGN Up for my Weekly Design and Blog Tips Newsletter where you will immediately receive a copy of my E-Book - “How to Create a Working Contact Form”. In that it outlines how to set up a site in Dreamweaver CS3.

Once you have your site set up then we can connect to a database. Now most hosting providers like BlueHost will give you a number of databases with your hosting account. In this article I have created a new database called Example, and also a user for the database, example.

Step 2. Let’s Get Connected

Now that we have your site set up and a database to connect to let’s connect to it. Over on the right hand side you will see the APPLICATIONS Tool Pane (see below) that is where we will be doing all the work.

Step 3. Use The Connection To Retrieve Data.

Now that we have a successful connection to the database you can start doing some funky stuff. Just for this article I will pull the data from a table that I had created and display it on the web page.

For that, we need to create a Record Set. So form the Application Panel > Bindings Tab click the (+) Button and select Record Set. Give the Record Set a Name and select the other fields as you can see below.

Read the rest of this entry »

The other day I posted an article on creating an Email Newsletter Subscription Application using PHP and Dreamweaver, today I want to share with you how you would go about building a page that gives the user the ability to unsubscribe from that list.

First of all if you haven’t completed Part 1 then I suggest you visit the link above and set that up first.

Create a page confirm_unsubscribe.php. Now this page is going to use a Record Set to define a single record using a Dreamweaver Server Behaviour., similar to the Subscription confirmation page. The only difference is that on this unsubscribe page the record will be deleted instead of inserted.

Place a Form on the Page Insert > Form with a hidden field that has a name if “ID”. This hidden field is going to get the value passed to it from the URL String. To do that, Insert the Hidden Field onto the page and then from the Bindings Tab (the tab that is under the Application Tool Pane on the Right), Click the + Icon and Select URL Variable. Once you have done that, while the hidden field is selected click the Bind Button to bind that value to the hidden field.

Next Step is to create a Record Set that will return the correct record.

From the Bindings Panel again, click the + icon and select Record Set, give the record set a name, select the connection and the table. Where we need to make some adjustment is the Filtering. So lets change the filtering section to pull the URL Parameter “ID” from the URL String. See below.

Read the rest of this entry »

photo credit: Yandle

I had an interesting email from a reader recently who said that he designs simple sites for non profit organizations and whether or not the Contact Forms Using PHP or ASP would be the way to go for a Email Newsletter opt in?

In my opinion, I wouldn’t use those forms for that purpose but in this article I will show you how you can achieve this through the use of Dreamweaver CS3 and PHP.

NOTE:This is a 2 Part Series so make sure you Subscribe so you don’t miss the next article.

First thing we need to do is create a database to insert the records into. Now that I have XAMPP Installed on my Windows Vista box I can do all this locally. For this example I have created a database called EmailSubscriptions with one table called ESubscriptions.

This table has 4 fields, ID, Name, Email, Subscription. The ID column is the Primary Key and it auto incremented. The Name field is there to hold the name of the user, The Email field is a text field and will hold the users email address and the Subscription field will handle whether the user is subscribed or not, it is a Boolean field and 1 indicates subscribed, 0 means unsubscribed.

Next Step is to open up Dreamweaver and connect to the newly created Database. Here we go.

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 »

Over the past couple of weeks I have written two articles on Creating Contact Forms with Dreamweaver using PHP and ASP. These articles have been quite popular. The one thing that these forms lacked was form validation, meaning that visitors could enter anything into the fields they liked. This is not really what we want and leaves the door open to a ton of spam and automatic form fillers the ability to easily send us crap!

In Dreamweaver CS3 there is a very easy way to apply form field validation and in this article I will so you exactly how to achieve this.

Step 1. Create The Form or Open an Existing One

In this example I am going to use the form that I created when doing the ASP Contact Form Example.

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 here is a simple and easy way to use Dreamweaver CS3 to create a great looking Navigation Menu without having to know anything about CSS, HTML, Javascript etc. This is a function in Dreamweaver CS3 that goes widely unnoticed. And it wasn’t until recently that I had a play with it.

In Dreamweaver CS3, you can insert a SPRY Navigation Bar with just a few clicks! How easy is that. Follow this article and you will have a nice looking functional horizontal navigation bar in a matter of minutes

Step 1. Create a Page or Open an existing One
I am going to create a New Page for this example. File > New > Blank Page > HTML. Save the file. I have saved it as spry.html

Step 2. Insert the Spry Navigation Menu
How easy is this, go to the Insert Menu up the top and then Select SPRY.

Then hover over the icon that is 4th from the right and it will say “Spry Menu Bar”, Click it and then you will be presented with the option of creating a Vertical Menu Bar or a Horizontal Menu Bar. Read the rest of this entry »

I was blown away with the responses that I have received regarding the article I published Dreamweaver Tutorial - Create a Contact Form In Dreamweaver. Many people have thanked me for the article via email . For those of you who are using Wordpress as a CMS or for your blog, I thought I would go through a Contact Form Plugin that you can’t live without. If you have a non Wordpress site and have not got a contact form on it then be sure to check out this Dreamweaver Contact Form Tutorial.

Wordpress Plugin CFORMSII

This plugin is Gold!!! and there is no way I could live without it when using WordPress. As I have mentioned before a Contact form on your site is a MUST if you want to interact with visitors and prospective clients. First of all the plugin is ready for Wordpress 2.5, and the best thing about it is that it allows you to have multiple forms throughout your site or even on the same page. It allows you to add as many additional fields to the form as you wish and also allows you to use Simple Text Inputs, Check Boxes, Radio Buttons, Drop Down Lists, Captcha Fields etc. It also allows the user a File Upload!

Read the rest of this entry »

It’s official, WordPress 2.5 has been released on the world and I got a chance to get my first look and feel of it when I upgraded one of my sites. I thought I would share with you the process of upgrading your site to Wordpress 2.5 and also 5 reasons why I made the switch and why you should do yourself a favor and upgrade.

First thing is first, MAKE SURE YOU BACK UP YOUR SITE. If you need a hand with backing up your Wordpress Site then have a read of this.

Next Thing you will need to do is make a note of what plugins you have Activated and then De Activate them all. Then delete these 2 folders wp-admin and wp-includes. Then copy the new files up to your server making sure you overwrite the old ones. The other file that you might want to get a copy of is wp-config.php just in case. This is the file that holds all your database connection settings.

Now that you have upgraded the files it is time to visit the upgrade page that you will find at the following URL http://yourdomain/wp-admin/upgrade.php - That’s It all upgraded. Why should you do all this?

1. New User Administration Interface

This is a massive change from previous versions and I must say I love the new look. Jefferey Zeldman and the team at Happy Cog Studios have done a magnificent job here. Even if this was the only improvement it would be worth the Upgrade.

Read the rest of this entry »