Preview Website Layout


Click here to see the completed version of the website example I’ve been using in class. You can see what the internal page structure will look like as well as what the contact form and gallery will be.



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!

CSS: Borders


Borders are used on divs and  images.

1. Border on all sides:

border: solid 1px #cccccc;

2. Border variations:

border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;

3. Border on 3 sides but not the bottom:

border: solid 1px #cccccc;
border-bottom: none;

CSS: Padding and Margin


Padding is space given to the elements INSIDE the div.

1. You can add an equal amount of padding to the top, bottom, right and left sides like this:

padding: 20px;

2. You can just add a specific amount of padding to one side using one of these properties:

padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;

3. You can add padding on 3 sides but not on the 4th:

padding: 20px;
padding-bottom: none;

4. There is also this method to shorten the CSS code:

padding: 0 0; (combines top/bottom and left/right)
padding: 0 0 0 0; (clockwise: top, right, bottom, left)

Margin is space given to the OUTSIDE of the div.

margin: 20px;

The same property variations that apply to padding are used with margin.

Adding Images: HTML and CSS

The first thing you have to do is place the photo, logo or icon you wish to “source” into your images folder. Remember, to save at 72 dpi and that only images go into the images folder!

1. Adding Your Image as Content:

Here is the basic HTML: <img src=”images/your_photo.jpg” alt=”discription”>

To have text wrap around the image, apply the float property and some padding. See example:

<p><img class=”photo” src=”images/angry_cat_meme.jpg” alt=”Angry Cat”> Your text goes here.</p>

Here is the CSS:

.photo {
float: left;
padding-right: 15px;

Note: The <img> tag is empty, which means that it has no closing tag.

2. Adding Your Image as a Div Background:

Here is the HTML: <div class=”div1″> Your text goes here.</div>

Here is the CSS for an image displayed only once:
.div1 {
background: url (images/angry_cat_meme.jpg) no-repeat;

Here is the CSS for an image repeated horizontally:
.div1 {
background: ur l(images/angry_cat_meme.jpg) repeat-x;

Here is the CSS for an image repeated vertically:
.div1 {
background: url (images/angry_cat_meme.jpg) repeat-y;

Here is the CSS for an image repeated vertically and horizontally:
.div1 {
background: url (images/angry_cat_meme.jpg) repeat;

Here is the CSS for an image displayed only once with a red background:
.div1 {
background: url (images/angry_cat_meme.jpg) #ff0000 no-repeat;

We can also position the image within a div using and will cover this later.