Find Web Developers
Find Web Developers

A Beginner’s Guide to Building and Hosting a Web Page

A beginner’s guide to Building and Hosting a Web Page Web design and development is incredibly fun. For those just getting started, I’ve developed the following guide to take you through all of the steps necessary to successfully embark on your web design and development adventure!

A) Index:

PRE: The 3 D’s

1. Gathering
2. Concept
3. Photoshop
4. Client Approval #1
5. HTML (front-end)
6. Code (back-end)
7. Client Approval #2
8. Uploading & Testing

B) Tools Required: (I’ll go through all of these tools in detail below)

1. Pencil
2. Paper
3. Photoshop (or other design tool)
4. Dreamweaver (or other web-development tool)
5. Copies of all the common browsers (see below for more info)
6. Filezilla (or other FTP tool to communicate with your web server)
7. Domain Name (your www. address)
8. Web Host such as GoDaddy (or something similar)
9. A computer
10. A passion for being creative!

——————————————————————————–

A) Index:

PRE: The 3 D’s

All websites in the world require 3 things.

A Domain Name. Through companies like GoDaddy, you can purchase names for small fees per year. If the name you want is something popular, consider purchasing it at the beginning of your build-process, after all, it’s good for a year.

A Dedicated Host Once you’ve selected a hosting package, you’ll have to log in and set everything up. You’ll have to point, or park your domain name at your hosting setup as well. Once all of that’s done, setup your FTP program so you’re connections to your server are working.

A Designed, and Developed Web Site (your stuff!). This tutorial will cover off on this one!

1. Gathering

The type of site you use and the tools you’ll need will vary a lot depending on the requirements of your client. A website built to do nothing but show pictures will have significantly different technology in the back-end than a page built to allow for discussions. Likewise, a site built for security with employee data and a login system will look entirely different yet.

Knowing what your client needs is the first real step in the building process. Make yourself a checklist and take it with you when you speak with your clients. Over time develop the checklist into a comprehensive consultation document. Be prepared for additional chat though. The most critical component of early web building is proper communication to ensure you and your client remain on the same ‘design’ page. The last thing you want to do is misinterpret their interests and spend 5-6 hours building something they didn’t want in the first place.

2. Concept

You’ve got all of your initial information. Now it’s time to sketch our concept design. You DO NOT need to be an artist for this. The purpose of this concept phase is to remove the computer and other distractions so you can visualize the design in your head.

Throughout this stage, we’re looking for general themes. What colours will we use, what header / body / footer layout will we go for? 2 column vs 3 column? Fixed or Liquid layout? Will the news display over here, or over there? What kind of navigational menu do we want, image based or CSS based? Sketch until your pretty little fingers bleed. You want to have an actual design on paper, something you’re pleased with. It’s incredibly easy to start over while your using a pencil but 3 hours into a designing session in Photoshop is NOT where you want to be when you realize eggplant yellow and rounded corners weren’t the way to go…

3. Photoshop

So we’ve got our concept on paper, now it’s time to transfer this design into Photoshop (or other similar program).

This phase is critical to ensuring we have a flexible method through which to make changes later on. It’s also paramount in ensuring our web page is cross-browser compatible later.

I’ll assume you’re using Photoshop and I’ll also assume you know something about it, ie: what layers are the general process of creating a graphic by using multiple layers to keep elements separated. If you not familiar with this process, head on over to HERE and spend some time learning the ground-work.

Assuming all of that (I assume a lot, I know!) let’s begin…

Typically if I were to create a picture in Photoshop, of a house on a lake, with a sun overhead I would do the following:

1. Delete the background later.

2. Create a new later ‘page’ to hold everything.

3. Create a new layer ‘house’.

4. Create a new layer BELOW that ‘lake’.

5. Create a new layer BELOW both of those ‘sun’.

In this way, I’ll have automatically setup the depth of my picture. The sun will appear behind the lake, which will appear behind the house. I can then design within each layer to keep things organized.

When designing a web site, you follow these same principles, but in a much more complete way.

If we think of the typical web page as having 4 components, those components would be: PAGE (or WRAP) to hold everything, HEADER, BODY, FOOTER. Keeping this in mind, in photoshop we create ‘layer groups (or sets in older versions)’ which follow the same flow.

1. Create a new layer group called ‘page’.

2. Within that, create new layer groups called ‘header’, ‘body’, and ‘footer’.

3. Within each of those, create individual layers (not sets) to break apart the various design elements.

When you’re done in Photoshop, if you look on the right, you should literally have a collapsible hierarchy of design elements that all collapse up into one top-level

element called ‘page’. Clicking that one layer group should reveal 3 layer groups within called header, body and footer. I’ve left out navigation and sidebar etc but those would have their own layer sets as well if you are building them.

By following this method, you’ll have a very organized and clear layout. You can come back and edit specific sections later on without having to worry about layering, depth, or moving the wrong components etc.

4. Client Approval #1

It’s not time to show our client our Photoshop (or similar) design. At this point it’s a picture only. We should have placeholder text and links in though so it appears exactly as a full, written web page would look. Use fake pictures if you need to. We want this to represent the web page as closely as possible.

We’ll go back and forth in this phase until the client approves of our graphical design. Once that’s done – congratulations! The design work is complete!

5. HTML (front-end)

Open up Photoshop and ensure all of your individual layers are saved as .GIF or .JPG or .PNG, or whatever format you want to use. We’re going to need everything in that format for the web.

NOTE: When saving in Photoshop, ensure you choose ‘save for web or devices’ as this offers some additional compression options for low bandwidth environments.

Open Dreamweaver (I know, I know, you’re EXCITED!) and create a new XHTML page. Yes, I said XHTML, not HTML (though they can be labeled the same when picking from the Dreamweaver ‘new’ menu. If you’d like to know why, check out this article. In a nut shell, it’s better, cleaner, more proper, and will ensure your code is more functional and valid.

Your new blank web page will look something like this:

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </body> </html>

Start by creating our basic layout with DIV’s. It should look like this once complete.

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&#8243; /> <title>Untitled Document</title> </head> <body> </p> <div id="page"> <div id="header">This is the header!</div> <div id="body">This is the content!</div> <div id="footer">This is the footer!</div> </p></div> <p> </body> </html>

Once that’s complete, build your page, placing the design elements into their appropriate spots. Once you’ve got this single, XHTML page working, in multiple browsers, you can stop if you wish at this point. However, there are a few more steps we can take to further clean up our code.

Currently, this page is large and unwieldy. As we add content, it will become difficult to discern where on the page certain things begin and end. To combat this, we can use PHP files to store our content and simply include them in our index page. Note, to do this you’d need to change your index page from a XHTML page to a PHP page.

I won’t get into includes, but this is essentially what the page could look like after you’ve finished including everything.

<?php include('header.php');?> <?php include('navigation.php');?> </p> <div> This is the only actual content on our page. Everything else is being included using PHP. It doesn&#8217;t matter how large the other files are, this is all we&#8217;ll ever see when we&#8217;re working in development mode on this page. Clean eh!?! </div> <p> <?php include('sidebar.php');?> <?php include('footer.php');?>

REMEMBER: Nothing is dynamic at this point, we’re building a basic, static page, with default news, fake pictures, etc. Nothing is coded in the back-end at this point.

Regardless of how little or how much organization you work into your page layout, the goal of this entire phase is to have a STATIC page, that looks exactly like our photoshop page, that works in multiple browsers. If we’ve gotten this far, we’re almost there!

6. Code (back-end)

Aside from the navigation buttons working, everything else on the site is probably broken. We’ve manually written in all of our text, and none of our gadgets work.

At this point we want to start coding in the back end, gadget by gadget.

For example. If we have a news section on our page, right now in our static page we’ve simply written that news in there. Instead, we’d like that news to be automatically entered when we create a new article, with some automatic program that doesn’t involve opening Dreamweaver each time. This is what we call a ‘Content Management System’ or CMS.

There are various forms of it out there. I won’t get into it at all, but Joomla and WordPress are great ones to begin with.

Alternatively, if you’re like me and like learning how the gears work from the bottom up, you might challenge yourself to learn MYSQL and PHP more extensively and simply write a little news gadget that reads and writes to a databases – it’s completely up to you!

Either way, the important part of this phase is to leave the design alone and work on adding life to all the gadgets and widgets on your page. Create that login system, create that user system, how about a gallery, a calendar, a CMS, maybe a guest-book or a comments box… it’s completely up to you. Remember, for every gadget, you should have designed it FIRST so you have it in Photoshop as a design. That way the design component is gone and you’re just coding the back end.

If you get caught up trying to design, AND code something in at the same time, trust me… it can sap your days away as you struggle to fight with misaligning CSS boxes etc.

Design it, then Develop it. Rinse. Repeat. Success.

7. Client Approval #2

It’s time to go back to the client and show them the development work you’ve been doing. Show off your login system, show off your gallery. WOW them! If they aren’t WOW’d, go back and tweak some stuff, sometimes all the way back to the design phase.

Rinse and repeat until you, and your client, are comfortable and satisfied with the current site.

8. Uploading and Testing

Up to this point, you would have either built everything locally and uploaded it piece-wise to test on the web server, OR, you might have used a program like WAMP to run a local server.

If you’ve been uploading everything to the web server, you’re finished! The website will already be up there.

If you’ve been running everything locally and using something like localhost to test the site, you’ll now need to upload everything to your web server. Once that’s done, you have to test everything again. MYSQL databases will likely be broken and need re-pointing, likewise things might operate slightly differently on that server for whatever reason.

Go through and ensure everything works up on the server.

Once that’s done, you’re finished! Congratulations on building and uploading your first web page!

——————————————————————————–

B) Tools Required:

1. Pencil

A pencil or pen, it doesn’t really matter. You’re going to need something to do the conceptual design with.

2. Paper

To go with the pencil or pen

3. Photoshop (or other design tool)

You’ll need something to do the graphical design with. Photoshop it self is quite pricey. If that’s not an option for you, or if you don’t have access to it via some shared resource, then do some research and find some free or cheap alternatives. I won’t comment on those here as I personally use Photoshop.

4. Dreamweaver (or other web development tool)

This is your bread and butter. This is the tool you’ll spend most of your time in. This is the tool that allows you to actually build the web pages, to write the code, to create your functions, to tie your graphical genius in with your buttons, forms and dynamic content.

To be quite honest, Dreamweaver it self is the most complete and by survey, most popular tool for the job. If you’re planning on getting into design and development seriously, this is worth the money.

However, there are alternatives if you can’t afford that. Again, do some research and you’ll find some cheaper/free alternatives that will do the job as well.

5. Copies of all the common browsers

I’m not going to specifically reference the browsers you should code for. The intention of this article is to be valid for more than just the several months in which it was written.

That said, visit this WC3 resource to get a listing of the currently used browsers and their market share of the internet. The list as of today, looks like this:

2010 IE8 IE7 IE6 Firefox Chrome Safari Opera

April 16.2% 9.3% 7.9% 46.4% 13.6% 3.7% 2.2%

March 15.3% 10.7% 8.9% 46.2% 12.3% 3.7% 2.2%

February 14.7% 11.0% 9.6% 46.5% 11.6% 3.8% 2.1%

January 14.3% 11.7% 10.2% 46.3% 10.8% 3.7% 2.2%

If I were building a site today for a client, I’d ensure it was compatible with Firefox, Chrome and IE 7+. That’s 85% of the market. Personally I don’t believe in backwards designing sites to reach back 3 browser revisions (IE 6). The types of hacks and fixes needed to get a site to operate correctly back that far are not worth the time. Shoot for 85% and you’ll be golden.

6. FileZilla (or other FTP tool)

You’ll need a tool like this to upload and download files from your web server. This is going to be a common task for you once you begin so find something you enjoy using and stick with it.

7. Domain Name (your www address)

Every site needs a registered name. I’ll get into the specifics more in the instructions but essentially, you will at some point need this before you can complete your client’s website.

8. Web Host (such as GoDaddy)

Every site needs physical space on the web somewhere. Hosting companies provide this. Companies like GoDaddy sell you space on one of their servers on which you can park your website files. For this you pay a small monthly fee.

Personally I’ve had incredible success with GoDaddy, but there are many out there to choose from.

9. A computer

Sorry folks, not optional. Laptops work great as well for you coffee-shop coders

10. A passion for being creative!

Corny, but true. This is NOT a business to get into simply because you want to pay the bills and have good computer skills. If you’re not really vested, and interested in the work your doing, it’ll show in the lackluster designs, rushed coding, and sloppy work you do.

Do yourself a favour, ask yourself this question: “Could I build websites as a hobby and enjoy it?” If you answered “yes” then this is a great business to get into.

Comments are closed.