Using Dreamweaver and Spry for Collapsable Divs

May 22nd, 2008 daniel Posted in Basic Tutorials, CSS, Web Design 3 Comments »

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.

AddThis Social Bookmark Button

Join Me On The JQuery Bandwagon

May 21st, 2008 daniel Posted in Web Design 11 Comments »

peek-a-boo!
Creative Commons License photo credit: P?rcel???g?rl°

Over the last few weeks I have been reading a lot about jQuery and how easy it is to use and that it adds some great functionality to a website. So I though I would take the plunge and spend a bit of time seeing what all the fuss is about. Over the coming weeks I will be giving you some more insights and tutorials on JQuery and you can make your mind up whether it is something that would benefit your site.

What I am trying to do here at Dreamweaver Spot is share with you the things that I am learning on my journey to becoming a better web developer. So make sure you SUBSCRIBE to MY RSS Feed so you can come on the journey with me an learn some great stuff along the way too.

Now I have really been a javascript person, but I have had it mentioned to me on numerous occasions that this jQuery stuff is pretty easy to learn so what the heck. To get started you will first need to download the jQuery File. After the download place the file into a folder in your website maybe a scripts folder, you need to add a couple of lines to the <head></head> tags of the page.

<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
// Your jQuery Stuff goes here
</script>
</head>

What made me think of using jQuery in the first place was that on a project I am working on at a local High School they are using Sharepoint Portal and on the particular page that I was working on, the screen real estate is very important and I needed to fit a few things in that would not have fitted ordinarily. Hense I wanted to create some collapsible divs and I know that with jQuery this is possible.

Now that we have the references to the jquery.js file in place we are ready to use it. In the above code you should see where we will put the code. In between the script tags we will put what they call a “ready event” which basically checks that the document is ready to be manipulated. This ready event looks like this;

$(document).ready(function(){
// All your code goes in here..............
});

Read the rest of this entry »

AddThis Social Bookmark Button

How To Connect To A Database in Dreamweaver CS3

May 15th, 2008 daniel Posted in Basic Tutorials, Web Design 8 Comments »

database
Creative Commons License 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 »

AddThis Social Bookmark Button

Email Newsletter Subscriptions Using PHP and Dreamweaver - Part 2

May 7th, 2008 daniel Posted in Basic Tutorials, Web Design 3 Comments »

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 »

AddThis Social Bookmark Button

Email Newsletter Subscriptions Using PHP and Dreamweaver

May 6th, 2008 daniel Posted in Basic Tutorials, Web Design 24 Comments »

Good PR from Apple: If You're Happy We're Happy
Creative Commons License 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 »

AddThis Social Bookmark Button

Do You Still Hand Code Your Cascading Style Sheets?

April 30th, 2008 daniel Posted in Basic Tutorials, CSS, Web Design 2 Comments »

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 »

AddThis Social Bookmark Button

What Everyone Ought To Know About Liquid Layouts

April 23rd, 2008 daniel Posted in CSS, Web Design 2 Comments »

day28 v2
Creative Commons License 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 »

AddThis Social Bookmark Button

Web Standards Support And Accessibility in Email

April 17th, 2008 daniel Posted in Blog Design, CSS, Web Design No Comments »

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 »

AddThis Social Bookmark Button

Contact Form Validation The Dreamweaver Way

April 16th, 2008 daniel Posted in Basic Tutorials, Web Design 14 Comments »

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.


Dreamweaver ASP Contact Form Tutorial

Read the rest of this entry »

AddThis Social Bookmark Button

How To Create A Contact Form In Dreamweaver CS3 Using ASP

April 15th, 2008 daniel Posted in Web Design 99 Comments »

On the back of my tutorial on How Create a Working Contact Form In Dreamweaver CS3 which used PHP. There have been a few requests from readers here at Dreamweaver Spot if I could provide an article on How To Create A Contact Form in Dreamweaver using ASP. So for all you people that have sites hosted on a server that has ASP Support then you will find this article of great use.

There are quite a few of these around but I found, especially when I was looking at this that most of them are very hard to configure and follow. So I have written this in an easy to follow way. You can download the files for this Article from Heres.

NOTE: This form does not have any Form Validation as yet. This is the Topic of an upcoming article so make sure you Subscribe To The RSS Feed so you don’t miss it.

Step 1. Setup the Contact Form
Create a New Page in Dreamweaver. File > New > Blank Page > HTML > Create. Insert a Form. So From the Insert Menu Select Form.
Dreamweaver ASP Form To Email Contact Form Tutorial
From the Form Dialog Box that pops up give the Form an action of contact_us.asp (this will be the name of the page that we send this info to to process it and send you an email). Also change the Method to Post.
Read the rest of this entry »

AddThis Social Bookmark Button

« Previous Entries