Cookies and Code Snippets
To write a cookie, you need to use the readCookie and writeCookie functions that Dreamweaver provides in the Snippets panel.
View your page in Code view.
Figure 13.36 You don't want to splatter code all over your page.
From the menu bar, select Insert > Script Objects > Script.
The Script dialog box will appear (Figure 13.37).
Figure 13.37 We're not using this the way it was intended.
What we just did probably seemed pointless, but when you insert a script snippet, Dreamweaver doesn't automatically surround it with a <script> tag, so unless you add the tag, the script won't work. We could have manually typed the tag, but we're lazy.
Figure 13.38 You may need to drill down a little to find the snippet you want to insert.
Still in the Snippets panel, expand the folder containing the snippet you wish to insert onto your page.
Double-click on the appropriate snippet. The snippet will be added to your page, inside the script tag (Figure 13.39).
Figure 13.39 Now there's code in the right place.
For more information on the Snippets panel, see the Built-in Tag Writing Shortcuts section of Chapter 11.
Now, on to cookies. We'll make a page on which the user can select a color, which gets written to a cookie, and then open a new page which gets its background color from that cookie.
To write a cookie:
Create a new HTML file.
In Code view, click at the very top of the document (Figure 13.40).
Figure 13.40 We'll add the code at the very beginning of the page.
Follow the Steps 1-3 in the previous list to insert a <script> tag.
From the Cookies folder of the Snippets panel, insert Write Cookie.
From the menu bar, select Insert > Form to insert an empty form.
From the menu bar, choose Insert > Form Objects > List/Menu.
In the Property inspector, click the List Values button.
The List Values dialog box will appear (Figure 13.41).
Figure 13.41 Here's where you enter values for a list.
Click the + (plus) button to add a new element, and in the Item Label column, type red.
In the Value column, enter red.
Repeat Steps 7 and 8 for blue and green.
Click OK to close the dialog box.
In the Initially Selected list box on the Property inspector, select one of the colors to be the default color (Figure 13.42).
Figure 13.42 You should set a default value for the menu.
In the Property inspector, change the name of the menu to colormenu.
From the menu bar, choose Insert > Form Objects > Button to insert a button..
In the Property inspector, change the button's Label to Thank You.
In the Tag selector, select the <form> tag.
In the Property inspector, change the Action of the form to page2.html.
Select Default from the Property inspector's Method drop-down menu.
In Code view, find the HTML code for the button. It will look something like this:
<input name="thankyou" type= "button" id="thankyou" value="Thank You">
Click in the code right after the value="Thank You" entry, and type the following code:
onClick="writeCookie('pagecolor', document.forms.colormenu.value, '1');"
It should look like Figure 13.43.This line of code writes a cookie called pagecolor, assigns it the value of whatever the user chose in the menu, and sets it to expire in one hour.
Figure 13.43 This is the code that calls the code that writes the cookie.
Save the file as cookie.html.
That's all there is to the cookie-writing file. Now we'll create the file that reads the cookie and sets its background color from it.
To read a cookie:
Open a new HTML file.
In Code view, click at the very top of the document.
In Code view, find the opening <body> tag.
Directly after the <body> tag, type the following line of code (Figure 13.44):
Figure 13.44 Make sure this code is in the <body> section of the page.
In Design view, add some text.
Save the file as page2.html.
Preview cookie.html (Figure 13.45). Click on the Thank You button. The next page should use the color you chose in the menu as its background color.
Figure 13.45 Here's the color selector page. We won't show you the next page, because it'll just be gray in this book.