Hey everyone,
This guide/tutorial will show you the steps I followed in planning and designing a layout for my personal website which is set for launch on January 2010.
The main steps we will go through this 3 part tutorial will be:
- Planning the layout design
- Setting up and coding the basics
- Setting up the rest of the website pages
- Designing various elements of the website, e.g. header, footer, content boxes, etc. Using Adobe Photoshop
- Coding the navigation bar + JQUERY to enhance its effects
- Adding content
Part 1 and 2 of the tutorial will be up by Thursday 17th December
A sample of what we will be creating can be found at:
http://jaybonotan.site50.net/jbonotan/index.html
(Please note the site works best on firefox, this is just a sample file and by the end of the 3 part tutorial we will end up producing a fully working website which is validated and compatible with all browsers)
Regards,
Jason
In this tutorial I will show you how to validate forms using XHTML, CSS and Javascript.
What is form validation?
Form validation is a vital method used by web developers to ensure that the user has correctly filled out an online form. For example: A website contact form requires the user to fill out his/her name. If the user has not filled out his/her name a pop up from their web browser will appear indicating to them that they have not filled out the required fields.
A WORKING DEMONSTRATION CAN BE FOUND HERE
What you need:
Basic HTML knowledge – Forms.
Basic CSS knowledge – Styling.
Javascript knowledge -Pretty straight forward once you get the hang of it.
Step 1
Create the following files:
index.html – This will be your form
style.css – This will be the stylesheet to style your form, make it more attractive and professional!
script.js – The javascript file, this is important as the index.html file will rely on it to make sure the user has completed the required fields.
Step 2
The HTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script src=”script.js” type=”text/javascript”>
</script>
<title>Form Validation – Jason Bonotan</title>
</head><!–XHTML,CSS AND JAVASCRIPT FULLY TESTED ON FIREFOX–>
<body>
<!–START CONTAINER–>
<div id=”container”>
<h1>Contact Form</h1>
<p>Please fill out the form below and one of our representatives will get back to you shortly, Thanks!</p><!–START FORM CONTAINER–>
<div id=”form-container”><form id=”contactform” name=”contactform” method=”post” onsubmit=”return validate_contact_form ( );”>
<label>
*Name
<span>Enter your name</span>
</label>
<input type=”text” name=”first_name” id=”name”/><label>
Last Name
<span>Enter your last name</span>
</label>
<input type=”text” name=”lastname” id=”lastname”/><label>
<span>Enter your e-mail</span>
</label>
<input type=”text” name=”email” id=”email”/><label>
*Confirm E-mail
<span>Please confirm your e-mail</span>
</label>
<input type=”text” name=”confirmemail” id=”confirmemail”/><label>
*Address Line 1
<span>Enter your address</span>
</label>
<input type=”text” name=”address1″ id=”address1″/><label>
*Address Line 2
<span>Enter your address</span>
</label>
<input type=”text” name=”address2″ id=”address2″/><label>
*Postcode
<span>Please enter your full postcode(no spaces)</span>
</label>
<input type=”text” name=”postcode” id=”postcode”/><label>
*Your comments & enquiries
</label>
<TEXTAREA NAME=”comments” COLS=60 ROWS=7></TEXTAREA><input type=”submit” name=”submitdetails” onClick=”checkname()” value=”Submit”/>
</form>
<!–END FORM CONTAINER–>
</div><!–END CONTAINER–>
</div></body>
</html>
Step 3:
The CSS
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script src=”script.js” type=”text/javascript”>
</script>
<title>Form Validation – Jason Bonotan</title>
</head><!–XHTML,CSS AND JAVASCRIPT FULLY TESTED ON FIREFOX–>
<body>
<!–START CONTAINER–>
<div id=”container”>
<h1>Contact Form</h1>
<p>Please fill out the form below and one of our representatives will get back to you shortly, Thanks!</p><!–START FORM CONTAINER–>
<div id=”form-container”><form id=”contactform” name=”contactform” method=”post” onsubmit=”return validate_contact_form ( );”>
<label>
*Name
<span>Enter your name</span>
</label>
<input type=”text” name=”first_name” id=”name”/><label>
Last Name
<span>Enter your last name</span>
</label>
<input type=”text” name=”lastname” id=”lastname”/><label>
<span>Enter your e-mail</span>
</label>
<input type=”text” name=”email” id=”email”/><label>
*Confirm E-mail
<span>Please confirm your e-mail</span>
</label>
<input type=”text” name=”confirmemail” id=”confirmemail”/><label>
*Address Line 1
<span>Enter your address</span>
</label>
<input type=”text” name=”address1″ id=”address1″/><label>
*Address Line 2
<span>Enter your address</span>
</label>
<input type=”text” name=”address2″ id=”address2″/><label>
*Postcode
<span>Please enter your full postcode(no spaces)</span>
</label>
<input type=”text” name=”postcode” id=”postcode”/><label>
*Your comments & enquiries
</label>
<TEXTAREA NAME=”comments” COLS=60 ROWS=7></TEXTAREA><input type=”submit” name=”submitdetails” onClick=”checkname()” value=”Submit”/>
</form>
<!–END FORM CONTAINER–>
</div><!–END CONTAINER–>
</div></body>
</html>
The Javascript
// JavaScript Document
//Principles of Scripting – Jason Bonotan – Form Validation
//The function ‘validate_form’ will ensure that the user has filled out all the required fields within the contact form
function validate_contact_form ( )
{valid = true;
if ( document.contactform.first_name.value == “” )
{
alert ( “Please fill in the ‘First Name’ field to continue.” );
valid = false;
}if ( document.contactform.lastname.value == “” )
{
alert ( “Please fill in the ‘Last Name’ field to continue.” );
valid = false;
}if ( document.contactform.email.value == “” )
{
alert ( “Please enter your e-mail address to continue.” );
valid = false;
}//Make sure that the user has entered a valid e-mail into the contact form, if not the alert box will tell the user to enter a valid e-mail address.
var email=document.contactform.email.value;
if (email.indexOf(‘ ‘)==-1
&& 0<email.indexOf(‘@’)
&& email.indexOf(‘@’)+1 < email.length
) return true;
else alert (‘Invalid E-mail Address, please make sure you use @ and . symbols.’)if ( document.contactform.confirmemail.value == “” )
{
alert ( “You have not confirmed your e-mail address, please confirm your e-mail to continue.” );
valid = false;
}//Make sure that the user has entered a valid CONFIRMATION e-mail into the contact form, if not the alert box will tell the user to enter a valid e-mail address.
var email=document.contactform.confirmemail.value;
if (email.indexOf(‘ ‘)==-1
&& 0<email.indexOf(‘@’)
&& email.indexOf(‘@’)+1 < email.length
) return true;
else alert (‘Invalid Confirmation E-mail Address, please make sure you use @ and . symbols.’)if ( document.contactform.address1.value == “” )
{
alert ( “Please fill in address line 1.” );
valid = false;
}if ( document.contactform.address2.value == “” )
{
alert ( “Please fill in address line 2.” );
valid = false;
}if ( document.contactform.comments.value == “” )
{
alert ( “Please complete the comments & enquiries section.” );
valid = false;
}if ( document.contactform.postcode.value == “” )
{
alert ( “Please enter your postcode.” );
valid = false;
}//User must enter at least 4 letters/numbers in the postcode field, e.g. WC1H
if (document.contactform.postcode.value.length < 4)
{alert(“Please enter at least 4 characters in the postcode field.”);
contactform.postcode.focus();
return (false);}
}
//–>
Thats all there is! Try the demonstration i posted at the beginning of the tutorial, don’t fill out any of the fields and you should be able to see how form validation works.
E.g: The image below shows us what happens when a user has incorrectly filled out the e-mail field:
A more detailed explanation of this tutorial will arrive in the following days, its just that I am busy with other commitments at the moment. Any questions feel free to contact me via e-mail at jason.fbonotan@gmail.com or leave a comment below I will get back to you ASAP.
Welcome to part 2 of the dark navigation series. In this article I will show you how to convert a sprite image from Photoshop into a fully working navigation bar without having to use the traditional image slicing method.
A FULLY FUNCTIONAL DEMONSTRATION OF WHAT WE WILL BE DOING TODAY CAN BE FOUND HERE
ps – Thank you for the comments
What is a sprite navigation?
A sprite navigation simply uses one whole image which accommodates all the buttons of a navigational bar. For example if you are developing a navigation bar using the traditional image slicing way you will have to slice and save a number of images in order for your navigation to work. The sprite method makes things easier as all you need is two image files (the PSD which you will then convert to jpeg or png). Another advantage of the sprite method is that your server will only have to load 1 image in order for your navigation bar to be accessible. Examples of websites using the sprite method:
Apple
WWE
Yahoo
Does this mean I have to ditch the traditional image slicing method?
In my opinion, no. I prefer to use both methods from time to time as a variety. In fact many websites still use the image slicing method such as Styled-Menus.com, a popular website which provides excellent high quality navigation bars.
So to sum up, alternate between the two methods. Its good to have variety!
What you will need in this tutorial:
Photoshop CS3 or Photoshop CS4 – If you don’t have it don’t worry, you can download a free 30 day trial version of Photoshop CS4 from adobe.com.
HTML/CSS text editor – A 30 day trial of Dreamweaver CS4 can also be downloaded from Adobe.com Other good alternatives are:
TextEdit – Pre installed on Mac computers/notebooks
Notepad ++ – Free download Here
The pre-made Photoshop (PSD) file which can be downloaded Here. Please note if you have downloaded the PSD from Part 1 you will have to download this file as I have made some modifications.
Getting Started
Its important to be prepared, so open up your preferred HTML/CSS text editor and type or paste the following code in. If you are a beginner I advise you to type the code as this helps you in getting used to hand coding which will be helpful in the future.
Create a new folder and name it ‘SpriteNavigation’. Save the code above as index.html (File>Save As).
Create a new document, if you are using Dreamweaver simply click on create CSS on the new file wizard. Copy the code below:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” href=”stylenav.css” type=”text/css” media=”screen”/>
<title>Sprite Navigation – Designed and coded by Jason Bonotan</title>
</head><body id=”home1″>
<!–BEGIN NAVIGATION BAR–>
<div id=”Navbar”>
<ul id=”Nav”>
<li id=”home”><a href=”index.html”>Home</a></li>
<li id=”about”><a href=”about.html”>About</a></li>
<li id=”team”><a href=”team.html”>Team</a></li>
<li id=”services”><a href=”services.html”>Services</a></li>
<li id=”media”><a href=”media.html”>Media</a></li>
<li id=”contact”><a href=”contact.html”>Contact Us</a></li>
<li id=”twitter”><a href=”#”>Twitter</a></li>
</ul><p>Fully working navigation bar using the sprite method, 1 image XHTML and CSS. Validated using the W3C validator and Tested on Firefoex, IE7 and Safari. To see more of my work and tutorials as well as source files and coding visit my <a href =”http://jasonfb89.wordpress.com/”>Online blog</a></p>
<p>Any questions feel free to get in touch with me at jason.fbonotan@gmail.com</p>
<!–END NAVIGATION BAR–>
</div></body>
</html>
Once you have the code copied into your text editor save it as ‘index.html’. After that make a new folder and name it ‘Sprite Navigation’. Place the index.html file into the folder. You know have your main index file created, this file will contain your navigation. You can preview the web page by right clicking and opening it with a web browser of your choice, I recommend Firefox or Safari.
Next we will make our CSS file, the CSS file is vital as it contains all the styles of the navigation bar. Basically, the CSS file will determine how your website will look.
Copy the following code below:
@charset “UTF-8″;
/* CSS Document */body {background:#1f1f1f; font-family: Arial, Verdana; font-size: 13px; color:#313131;}
p {margin:10px;}/* Navbar Settings */
#Navbar { width:700px; height:150px; margin:25px;margin-left:auto;margin-right:auto;background-color:#F2F2F2;}
#Navbar #Nav { width:700px; height:40px; margin:0; padding:0; background:url(dark-nav-sprite.png) 0 0 no-repeat;}
#Navbar #Nav li { display:inline; }
#Navbar #Nav li a { float:left; outline:none; width:110px; height:0; padding-top:40px; overflow:hidden; }
#Navbar #Nav li a { background-image:url(dark-nav-sprite.png); background-repeat: no-repeat; }/* Link Properties */
#Navbar #Nav li#home a { background-position: 0 0;}
#Navbar #Nav li#about a { background-position: -110px 0; }
#Navbar #Nav li#team a { background-position: -220px 0; }
#Navbar #Nav li#services a { background-position: -330px 0; }
#Navbar #Nav li#media a { background-position: -440px 0; }
#Navbar #Nav li#contact a { background-position: -550px 0; }
#Navbar #Nav li#twitter a { background-position: -660px 0; width:40px; }/* Hover Properties */
#Navbar #Nav li#home a:hover { background-position: -0px -40px; }
#Navbar #Nav li#about a:hover { background-position: -110px -40px; }
#Navbar #Nav li#team a:hover { background-position: -220px -40px; }
#Navbar #Nav li#services a:hover { background-position: -330px -40px; }
#Navbar #Nav li#media a:hover { background-position: -440px -40px; }
#Navbar #Nav li#contact a:hover { background-position: -550px -40px; }
#Navbar #Nav li#twitter a:hover { background-position: -660px -40px; }/* Current State Properties */
body#home #Nav li#home a { background-position: -0px -80px; }
body#about #Nav li#about a { background-position: -110px -80px; }
body#team #Nav li#team a { background-position: -220px -80px; }
body#services #Nav li#services a { background-position: -330px -80px; }
body#media #Nav li#media a { background-position: -440px -80px; }
body#contactus #Nav li#contact a { background-position: -550px -80px; }
body#twitter #Nav li#twitter a { background-position: -660px -80px; }
Save the CSS file as ‘stylenav.css’ into the Sprite Navigation folder. Open up your index.html file with your browser and you should end up with the following page:
And there you have it, a fully functional navigation bar using CSS sprites.
Just one more step – Validation:
What is validation?
Validation is simply a method used to ensure that your web pages are free of errors. How do you validate? simply google W3C validator and follow the instructions from there.
After running the W3C validator with ‘index.html’ we can see that our web page is free from errors:
Thats all for now, I hope you enjoyed this tutorial. Try and set yourself a challenge/excercise by creating your own web page and linking it with the navigation bar. For example I’ve already done the index.html / home page for you. Try and make an about page (about.html) and code it to make it work with the navigation bar.
If you have any questions or problems please contact me at jason.fbonotan@gmail.com with “TUTORIAL” on the subject header.
So I was going through some previous Photoshop designs I’ve done in the past few weeks and I found this lying around.
I designed a quick website header with a navigation bar as well as having a search bar with a number of icons e.g. Twitter. Gaspari Nutrition is a leading sports supplement company based in USA although their products are popular around the world.
I decided to choose a real business instead of something made up, next month I’ll be designing a random website template based on this project.
Click on the image below for a full size view
A simple dark navigation bar i designed in Photoshop CS4. For Part 2 I will be converting this design into a fully working navigation bar where users can click on a link and enjoy some simple interactive features such as a hover effect. The navigation bar will be coded via HTML and CSS.
Click on image above to see full size
If you want to see how the navigation bar was designed or wish to make any of your own modifications feel free to download the PSD file Here
Depending on how much time I have there is a possibility that I may add a Part 3-Using JQuery to enhance the navigation effects. But for now keep an eye for part two which should be hitting your screens soon!
Source : jasonfb89[dot]wordpress[dot]com
0 comments:
Post a Comment