Website Projects Due

Monday, May 6th: Your websites are due by the end of class — NO EXCEPTIONS! Add a link to your blog URL in the “comments” section of this post. These are worth 500 points!

Minimum of 4 pages: Home, About, Gallery and Contact (You can “name” the pages whatever you wish)

Make sure you have the following requirements:

Title and Meta tags on each page.

6 correctly sized photos in the gallery.

Contact form.

Unique current page nav link color.

The nav link font sizes are the same. The body link font sizes are the same. (active, visited and hover)

Color for active and visited links are matched. Unique color for the hover.

Centered container div, proper div margins and padding, proper div heights and widths.

Some sidebar content (text or image) on inner pages.

Set font size and color for <h1> and <h2> tags in CSS.

All files and images are named in lowercase.

Organized HTML code with element indentation and an organized CSS.

Advertisements

Gallery

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.

Validation
“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.

Options:
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

box-model

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;

Div: HTML and CSS

The div is a “block” element used for grouping other HTML elements. Divs require either an “id” or “class”. An id can only be used once on a page while a class can be used
more than once. You can only use an id or class name once in your CSS!!!

The HTML:

1. Div with an “id” applied to it:

<div id=”container”>

<p>Text inside the div</p>

</div>

2. Div with a “class” applied to it:

<div class=”block”>

<p>Text inside the div</p>

</div>

3. Divs inside of a div:

<div id=”container”>

<div class=”block”>

<p>Text inside the div</p>

</div>

<div class=”block2″>

<p>Text inside the div</p>

</div>

</div>

4. Div inside of a div, inside of a div:

<div id=”container”>

<div class=”block”>

<div class=”block2″>

<p>Text inside the div</p>

</div>

</div>

</div>

The CSS:

/* id css starts with a “#” */

#container {
background: #ff000;
float: left;
width: 950px;
height: 600px;
}

/* class css starts with a “.” */

.block {
background: #000000;
float: left;
width: 400px;
height: 400px;
}

.block2 {
background: #999999;
float: right;
width: 200px;
height: 200px;
}

Text: HTML and CSS

Remember, the stuff in < > is called a “tag” (eg. <p> = a paragraph tag). Also, Here are some hex color reference charts: chart 1 ,  chart 2.

The HTML

<h1> </h1>
Headline

<h2> </h2>
Sub Headline

<p> </p> (double space / hard return)
Paragraph

<br/>
Break (single space / soft return)

<span> </span>
Span – Creates different style within a <p> tag

<strong> </strong>
Bold

<em> </em>
Italic


The CSS:

body {
font-family: Arial, sans-serif;
font-size: 13px;
color: #000000;
line-height: 1.25em;
} /* body css sets the style for the <p> tag! */

h1 {
font-size: 24px;
font-weight: bold;
color: #000000;
}

h2 {
font-size: 18px;
font-weight: bold;
color: #000000;
}

p {
font-size: 13px;
font-weight: normal;
color: #000000;
} /* if you want a different <p> style than the body css! */

span {
color: #999999;
font-size: 14px;
}

Links: HTML and CSS

1. Create a new file and name it “links.html”

2. Add in the <head> tag, name your page: <title>Links</title>

3. Add the following code in the <head> tag below <title>Links</title>:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

4. Add in the <body> tag:

<p><a href=”Add full website url here” target=”_blank”>link</a></p>

5. Add to the css file:

/*link css*/

a:link {
color: #ff0000;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}

a:visited {
color: #ff0000;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #999999;
font-size: 13px;
font-weight: bold;
text-decoration: underline;
}

/*end link css*/

Visit the w3schools website for more info about link html.