This week in class we reviewed the lesson from Week 9 focusing on images and building the ‘gallery’ section of your site. We reviewed the concept of using Lightbox. I also introduced how to build a form for your contact page.
A. Review Lightbox galleries
Here are two worthwhile websites
B. Create roll-over images
Here is a good tutorial for that:
http://webdesign.about.com/od/dreamweaverhowtos/ss/dw-rollover-img.htm
C. Build a ‘contact’ form
Here’s a good, detailed tutorial I recommend watching;
http://www.youtube.com/watch?v=7soyO5DwJMY
-> We will follow this simple tutorial to build our basic form in Dreamweaver:
http://dreamweaverspot.com/adobe-dreamweaver-tutorial-contact-forms/
For the contact form, you will need to download a PHP script provided in the tutorial. PHP is a server-side scripting language that is embedded in html to perform all sorts of tasks. In our case we will download an existing PHP file: ‘FormToEmail.php’ from the tutorial. Make sure the file is saved in the same folder as all your existing html files for your site.
Follow these steps. (Use the tutorial listed above.)
- Drop the FormToEmail.php file into the same folder as your contact.html page.
- Edit the php file as instructed in the tutorial. You will have to change the email address in the form to be yours. (Please note: you cannot test the form until it is up on your server.)
- Create your form in Dreamweaver.
- Add any styling you want to add.
- Publish your files to your site and test them by sending yourself an email
The basic from that we are building in class is not secure, meaning it does not prevent against spam. If you would like to explore other options you might check out this link here:
http://www.freecontactform.com/free.php
Homework:
1. I would like you to post a first draft of your site to your URL and send me a link by Sunday. The site does not have to be 100% complete but by Sunday you should have the homepage built and at least one link of the navigation should be working.
If you need help uploading your site here is a quick refresher:
http://www.vineyardesigns.com/resources/dreamweaver/test_upload.shtml
2. And if I did not yet receive your statement and your work descriptions, please be sure to bring a printed copy of that for me this Monday.
