How to Use Google Mapmaker


Watch the video here for a general overview of how it works, login to Google and add your points of interest on the map. Add a text or a photo hyperlink to the map from your website (use the “short URL” option when linking).



For our website gallery page, we will be using a javascript image gallery created by WooThemes called the Flexslider.

1. Download the files and code you will need here. I will help you set it up.

2. Prepare at least 6 images that are 586px wide. The images can be as tall as you want but all the images must have the same height.

Contact Form

html-contact-formThe example we are using in class is simplest of contact forms. We are using this so you understand the basic concept of form action, input fields, and submit. DOWNLOAD FILES.

Coding from scratch a “modern” contact form is beyond the scope of an intro web design class. Why? 2 main reasons: Spam Prevention and Validation.

Spam Prevention
The basic form does not offer any CAPTCHA to protect your email inbox from spam. Spam Bots will eventually find your form and start submitting ads for Canadian Pharmacies, Obscure Dating Sites and other useless crud. Adding CAPTCHA to a form requires more extensive programming knowledge.

“Valadating” a field means you want to require that certain fields are filled out or the form will not submit. This is done using javascript, and again, is beyond the scope of this class.

1. You can use and customize a free, pre-coded form such as this one.
2. Setup a free JotForm account, design your own form using their WYSIWYG tool and embed the form on your website.

If you would like to attempt to substitute one of the above options for the basic contact form in your website, serious extra points will be awarded!

Class Project #2: Website Home Page Design


Website Home Page Design
Due Tuesday, March 5th
100 Points

The Breakdown:

Layout your website home page design using the PSD template. Add colors, logo, text and images.
(Max points: 50pt)

Overall design aesthetics (look it up if you don’t know what it means).
(Max points: 40pt)

Create a jpg (saved for web and devices).
Upload to your WordPress blog media library.
Add a link to your jpg in the comments of this post along with your name.
(Max points: 10pt)

Relevant Terms


Can you feel a quiz coming in your near future???

This is the “address” of your website (exp. You buy a domain name from a domain registry company (GoDaddy, BlueHost, etc.) for a period of 1 to 10 years typically.

Hosting / Host Server:
This is where your website files are kept so that they can be accessed via the internet by web browsers. You need to purchase BOTH a domain name and web hosting for a website. This can be either with the same company as the domain name or separate company altogether. Terms are typically 1 to 5 years. Costs vary greatly, but you should be able to get a domain name and basic hosting for about $10/month.

Short for File Transfer Protocol, FTP is the most common method used to download files from a host server or upload file to a host server using the internet. This is how you will add your website files to to the host server.

FTP Client:
A program that performs the FTP function. Adobe Dreamweaver is both a programming tool as well as a FTP client. Other programs, such as FileZilla, just perform FTP.

Local / Remote:
The website files on YOUR COMPUTER are “local”. The files located on your HOSTING SERVER are “remote”.

Web Browser:
The software you use to access online content. Google Chrome, Mozilla Firefox and Safari are all examples of web browser programs. It’s important to make sure your web browser is automatically updating to the most current version available since older browsers are often unable to display design elements that new programming code provides.

Creating a New Website: The Process

Here’s a simple breakdown of the process to create a new website:

1. Pre-Planning — Who is your audience? What is your message?

2. Create a Sitemap — Decide what pages you need and how they will link to each other.

3. Sketch out a Wireframe — Decide what elements will go where on the Home page and key internal pages.

4. Decide on a style Plan out  text/link and highlight colors, choose fonts (web safe or @font-face), font sizes, backgrounds, etc.

5. Collect site “Assets” — Images, logos, text, icons, etc.

6. Design layout in Photoshop — Design and then “chop up” (I don’t mean Slices!!!) the doc for the elements you will need for the website.

7. Setup Web Hosting and Domain Name

8. Start programming!