Welcome to the UK Window Cleaning Forums

Starting or own a window cleaning business? We're a network of window cleaners sharing advice, tips & experience. Rounds for sale & more. Join us today!

Building your own website

laddergarder

Well-known member
Messages
1,536
Location
Greenock, Scotland
Ok, so you have a thriving window cleaning business and you want to take it that step further and create a website for it. Ok, well this is my guide and tutorial on everything you need to know.

There is way to much information to post up all at once so I am going to do this in stages and post up little bits at a time, hopefully with a few screen shot to guide you through it, so there will be more posts to follow.

I will assume that you know nothing about websites and how they are created and try to explain as many terms and techniques as I can, so I apologize to anyone know has a bit more of a knowledge base, just skim the stuff you already understand.

Can I ask that forum members avoid replying to this topic until the website example has been finished, as I don't want to see the main contents of the tutorial getting lost in reply's. However if you are unsure about a particular stage, and need more clarification, post away.

 
What will you need and how much will it cost?

So to build at website, you are going to have to get your hands on a few tools. Or software should I say. While building this website, I am going to use the following:-

Dreamweaver

Photoshop

There is alternatives that you could use to both of these tools, some of which are free, however you can also download free trials of both these pieces of software from adobe.

For a Photoshop alternative, GIMP is one of the most common free alternatives, http://www.gimp.org/.

For a Dreamweaver alternative http://net2.com/nvu/ comes highly recommended.

Member comment (NearlyClean): Also Komposer is good free wygiwys editor and is very similar to the older dreamweaver.

However please be aware that I will be using the adobe products listed above and the methods developing sites will be different in different software suites so I would recommend you get your hands on a copy of the adobe suites mentioned above.

So how much will it cost, well, for the sake of cost efficiency I would use a trial, as adobe products are expensive, you can get an old version like cs3 for under £100 on some sites, and Dreamweaver Cs5 is available from Amazon for just over £100.

At that is all you will need, however when hosting your site you may need an FTP client. I think I paid about £40 for CuteFTP, however fileZilla is also a good client ans is free. I will go over what and FTP client is and what it does at a later date, lets just focus on creating the site first.

 
Creating your canvas for your work of art

So the first thing you are going to have to do is create a new page in Photoshop, this will be where we will draw out the website design to be ported into Dreamweaver. There is allot to explain in that sentence, but for now lets just get a page opened, now set the width to 1366 pixels and the height of the page to 1600 pixels. You will want a resolution of at least 300, and set the background to transparent.

There you go, that is your blank canvass ready and waiting for your work of art.

Ok, so lets explain a little bit fist, the only thing we are going to do is create a basic shape, that will resize as the page is resized on the users screen. So for this tutorial we are not going to look at shapes with patterns, for functionality we are going to keep it fairly simple.

So what do I mean by porting it into Dreamweaver? Basically once we have drawn out our design, we will slice the image up which I will explain later, and rebuild the image in Dreamweaver using Divs and some CSS - Cascading style sheets. In a way which will allow the page to be reshaped to work on any screen.

Have a look at my website,(link in my profile page) press the restore down button to the left close button on your browser and grab a corner with your cursor and change the size and watch how the page extends the backgrounds etc.

That is what we have to consider when creating this design, how will the page be changed and how while the design be adapted to different screen resolutions.

 
Guides

When creating a design in Photoshop, its is fairly important that the design is centred and not centring it can lead to all different kinds of problems later on.

Ok so what is a guide? a guide is an invisible line, of sorts. It is visible on the screen, but it will not be visible when printing or saving the file to Jpg etc. You can move the lines around as well.

What we need is a line right down the middle, so we know our shape is in the centre of the screen, so here is what you do, go to [view] then click [new guide]. Select a vertical orientation, and right click the value in the box and select pixels. Now we know our page width is 1366 pixels, so to create a guide that is half way along just type in, 683 pixels then press [ok].

That you just created your first guide in Photoshop.

 
Photoshop - The basics

So before we dive into making shapes and designing our brilliant website, we need to go over some basics about Photoshop. If you have a fair understanding of Photoshop just skip this post.

Obviously I cant describe every aspect and you wouldn't want to read that, I'll just give a brief overview of the different tools and techniques you are going to use, then its up to you, to get on to youtube and google and start looking in to any bits you cant figure out, you can also pm me, and i'll do my best explain.

Layers

The first thing you should notice is the layer 1 with the little eye next to it on the right hand side. Layers are brilliant, and very handy when it comes to creating website designs. I use layers with almost everything I do in Photoshop. Think of layers as pieces of transparent paper that you can draw on. They sit on top of one and other to create the final picture or design.

There is a few basics that you should notice about layers, firstly the eye. If you click that you can make it visible or invisible. To create a new layer, just click the new page at the bottom of the layers box. The delete as layer, just drag it to the little bin at the bottom of the layers box. Finally to change the transparency of a layer, type a percentage into the little box next to the word opacity.

Now that is about it, there is allot more you can do with layers but that is the basics.

Shapes

Shapes are brilliant, lets just create and example to show you what you can do, on the left hand side you should see a whole bunch of tools, near the bottom about the fifth button up, there is a little box, right click that, and click the eclipse tool, then just left click on the screen and drag out a circle. There you go you have just made you first shape. Now do the same again for a square. Place it some where over the circle. Notice that you now have two layers, that is your two shapes. click the box to the left of shape two in the layers box and change the colour to a different colour from the circle. Now right click on shape two, and click [create clipping mask]. You see what has happened, the shape is now inside the boundaries of shape one. The is very powerful and will come in very handy later.

5cb2ab8a42073f4dc88c.jpg


more Photoshop basics to come....

 
Vectors

Ok so this is a huge topic on it own, but you can get plenty on youtube videos on this, so I will try to be brief. You should understand a little bit about the interface the Photoshop has now, and can see that on the left is your tools pallet. When you select a tool, you will have a number of options along the top for that tool.

So the next tool we are going to look at, is our vector drawing tool, which looks like a little fountain pen. Go ahead and click on that. What we are going to do is create shape using the square inside the circle as our guide.

if it makes life easier, you can click on the little magnafing tool and zoom in, then just click the fountain pen again. OK, so lets go round the circle, left click at the start of the curve, then left click again about half way around the curve, BUT DONT LET GO this time, hold it in, and drag in along a little further. see how you can create the curve.

Ok so it might not match perfectly, here is what you do, hold down you control key on your keyboard, and grab one end of the line that has come out and change the curve until it matches. Now if you wwere to just click the other end of the curve Photoshop would follow that curve but we dont want that. So hold down your alt key and click the second point you have made. notice how one half of the line has disappeared. That means that you now have the option to create a line or a curve.

So now do the same again to finish of the curve. then follow the shape around until you get back to the first point. There you go your shape is almost done. You can now click the little eye next to your first two shapes to make them invisible.

I want to show you one more thing that may stump you later. If you look up to the options for the pen tool, you will see something that says [auto add/delete] and next to that there is four little boxes, if you ever want to cut a shape out of a shape you have to select the third one along, then create shape inside the shape. Go ahead and try this, and draw a box inside your new shape.

There you go, you have now created your first vector drawing!

6ff1785fef9f62b65248.jpg


Ok so that might not seem that impressive just yet, but with that simple little bit of knowledge have a look at this vector drawing I have done of my van, this was created for the guys that did the sign writing for me. Which has all been done using simple shapes.

011e45acca466320abec.jpg


 
Blending Options

Blending options are brilliant, there is so much in there that you can do with layers in Photoshop, lets show you one or two important ones you might like. Here is what you do, right click on the layer for your little shape you have made, and click [blending options...]. A little layer style box should show up, and as you can see there is loads of stuff you can do there. But for now I will just show you one thing which we may use later in our design.

Lets select Colour overlay, tick the little bos next to it and then click colour overlay to see the options. Now select a medium grey for the colour, and press ok, you shape should now turn grey. Now I want you to select the layer just under our new shape, a click the little icon that looks like a page in layers box, this should give you a new layer just under your object. Select your paint brush tool to the left, and then hold down your alt key to bring up your sampling tool, while holding the alt key click somewhere on the grey object. There you go, you have now selected a new colour for your brush. Now to change the size of you bush, just lick the circle with the number under it in your tools options pallet, and change the master diameter to about 600 pixels for a good large brush. Now just paint your new layer grey. That is you just created a background layer for your object.

Now let go back to our object and change something else, go into blending options again, and look at the bevel and emboss options, change them to the settings I have in the following picture...

4fa2219e5700949562ab.jpg


Then just click ok, and you should have something like the following...

41450f415e52afa80642.jpg


This is quite a cool effect that can make you objects and writing look like stamped plastic, and as you can see fairly easy to do, later I will cover more effects you can do with Photoshop, but I would recommend that you play around with blending options and look at how all the various options available will change your shape, you can create textures, shadows, outlines, and much much more, so have a little fun with it.

 
Ok, one last thing before diving straight in to our design, I want to show you how to stroke a path. You see you can create solid shapes with your vector drawing tools, and you can even use the blending options to stroke a line around the shape. But sometimes you want to just draw a nice clean line, and know you hands will not be steady enough. So you can create a path, then stroke the path with your bush. You can even simulate pressure so your line can tapper off at the end.

Stroking a vector path

So here is how its done, when you have selected your pen tool you can also use it to just draw lines, but before we do anything with that we have to go to our paint brush, set up which colours, size of brush etc as these will be the settings used to stroke our path. So once you have done that, go a ahead and go to your fountain pen. You will have to change one little setting, up on your options pallet there is three little boxes, just after the fountain pen icon, you want to select the middle one, its the box with the fountain pen over it, with points at each corner.

443a63231c3339bac59c.jpg


You can use this tool as normal now, then all you have to do is right click your line, then click stroke path, you will see a check box for simulating pressure, this can be very useful. Give it a try.

e1d0f4e17727b81730ba.jpg


And thats about it, thats enough for you to make your own design using Photoshop. I know you think nahh, but bear with me, it will come together.

 
Our design

This is the bit were you just have to be creative, there really isn't any trick or rule, you just have to use simple technique to create some nifty vectors and drawing to build up your design. One thing you can do is go on to other websites and look at them for inspiration. I find template monster really good for inspirations and ideas for website and logo designs.

Ok, so using only the tools I have describe here is the design I have come up with to begin porting into Dreamweaver, which we will be starting next :rolleyes:

403fb56ba972b8a8b85d.jpg


 
Slicing

Slicing is the next stage in our tutorial, so lets go over it first. I will shortly upload the Photoshop design that I have done, to let you download it and have a look at how its all put together. But for now we'll just start by giving you some foundations about what slicing is. Your slicing tool is 6th button down on you tool pallet, and should look like a little modelling knife or scalpel.

If you click that you will see very little options, for this tool. None of which we are going to change, so leave the style set to normal on your tool options pallet. Now how we slice this image up is really important for this to work. The pieces that will cause problems will be the nav bar, and you will soon understand why our design had to be perfectly centred.

When you make a slice in the image, your tool doesn't just slice a straight line like you might imagine, you drag out a box over the image, and the little box/es will become the separate image/s. The next thing you really want to make sure is that your slices are on the exact pixel you want the image to be sliced on, so once you think you have them done zoom right in and take a look, and make sure your not chopping off any pixels from another shape.

Ok so where to slice, with the design I have done, I need one right down the left hand side for the background, then the header, then the nav, with a separate slice for each button, then one for the page image, one for the top of the contents box, the main body of the contents box, and finally one for the contents box.

You might think we would need one for each corner of the box, one for each side, and one for the main contents. But it doesn't really work like that, because of the the way Divs work which we will talk more about later, but it means that it is simpler to just take on slice for the top bar of the contents box, one for the main, and one for the bottom bar which I will show you shortly.

Now I will talk allot more about programming, html, javascript and php, even object orientated programming, but for now just have faith that this is the best way to do it and you will understand why once we start porting this into Dreamweaver. One thing to mention here is that even though you have centred your objects using guides you may still find that when slicing you boxes and various parts of you design are slightly out of alignment, this is your opportunity to move them and resize them slightly to ensure that they all line up correctly. This is important to make sure that your slices are good, and will avoid problems later on.

9f2f4f3159fd6e29888d.jpg


 
Ok guys and girls to download the Photoshop document before slicing click here,

http://www.mcmanuswi...o.uk/design.psd

Hopefully a few members have been or will follow this and create a design of there own, but if you just want to work with this design for now, and see how it is all done, the you can use that example.

Everything should line up ok there, so you should not need to move anything or resize things, all you have to do is slice it up as I have.

 
Ok the next step is to export our slices to jpeg images, but we first need somewhere for those images to go, so we may as well set-up our site directory in Dreamweaver first.

Getting started with Dreamweaver

Ok so you open dreamweaver, and a box opens with a list of recent items, create new, and create from samples. We want to click, [Dreamweaver site] at the bottom of our Create New list.

Now you can name your site, but leave the other stuff for now, and just click next. Leave [no I don't want to use server tech] selected and click next again. Ok now on the next screen there should be something checked about "edit local copies on my machine" leave that checked, then on the next part select a folder for your website files to go, and click next. Set "How do you connect to your remote server" to "none" and click [next]. Then click [done].

And that is you, you have just setup your websites directory. Now we just need some files. One thing to notice, is to the bottom right, you should see a box that says files, then a little green folder with you website name after it. This is a view of everything that is in your directory so you can quickly open them when you need to.

Ok that is that bit done. Now find and open the actual folder on your computer, and create two folders, one called "slice images", then another called "slice images mouse over".

Now lets get back to Photoshop...

Exporting our first set of images

I supposed you have guest that we are going to create two versions of our slices. 1 for our normal site, then another for when certain parts of the design like the buttons have the cursor over them.

So lets get this first bit done for now. Go to Photoshop and open your design again, now at this point you should have all your slices set up. Go to [File] and select [save for web & devices] hit ctrl+a on your keyboard to highlight all the slices then click [save] then select your folder you created called "slice images".

That it done, if you go to that folder, you will now see all the separate jpeg files

394215a5ad735a6f15ca.jpg


Now lets create our mouse overs for our nav bar. This bit should be simple now that you understand blending options and layers, even creating and exporting slices. You will be PH pro in no time /emoticons/biggrin.png. All you have to do is select the text for each nav button, i.e. [home],[about],[services] etc. Go into blending options for each of them and set to the setting in the following image. Note that I have changed the colour my outer glow to the background colour, if you click the little colour box, a colour selector will come up, if you then move your cursor over your design your colour sampling tool will appear. Just click somewhere on the background to select that colour.

73f825ab621e4ce9095f.jpg


Now here is a little trick to make this job easier once you have done one, all you have to do, is right click on the word [effect] under the text layer you have just changed and then click [copy layer style]. You can now right click each of the other text layers and just paste this new style over to them. Easy :huh:.

Ok so now you have to repeat the process for exporting the jpegs, by click [file], then [save for web...] and so on as before, except this time you want to send then into the folder you called "slice images mouse over".

Now that everything you need from Photoshop, the rest of the work will be done using Dreamweaver, well done!

 
A very brief introduction to programming principles and what object orientated programming actually means

Before we get into Dreamweaver I want to try to give you a foundation about programming and OOP to help explain CSS later on. Dreamweaver is basically an interface to help churn out the code from your website. But ultimately you could do the exact same thing, without Dreamweaver, it would be a headache to do and take allot longer, but the actual tasks wouldn't be difficult. What we are going to do is use Dreamweaver to produce the HTML files for our website, as well as a few others things as well.

While doing this we will be flicking between our design view and they actual code of our site, as sometimes, its just simpler to amend the code than go through the interface. So to avoid losing you completely later on, lets talk a little about programming. I will be assuming here that the reader as never really encountered any actual code or understand much about coding, other than what they have seen on the matrix /emoticons/biggrin.png.

Ok, so I guess programming IMO started with Allan Turnings paper on the computability of the Entscheidungs problem. The Entscheidungs problem refers to a paper written by a mathematician called David Hilbert, who wrote a set of mathematical problems, which are all solvable bar one, the Entscheidungs problem. This was possibly an attempt to point out that not all the problems we face are solvable, and has stumped mathematicians for the last 84 years and remains unsolved today.

Allan Turning wrote a paper on this problem, suggesting that a machine could be build to calculate this equation and to once and for all find out if it can be solved. He wrote an incredible set of mathematical procedures which ultimately describes the fundamentals of what computers are to today.

Its very hard to explain in one paragraph, but there really isn't anything mystical going on inside your computer, its hard wired and does what its designed to do, which is store, manipulate, and display data. To a computer, data is nothing more than an electrical switch. However in today's CPUs there are over 15000 of them and the mathematics going on inside them now is enormously complex. But none the less, built by us.

In early computers there was no programming languages, you had actual switches to punch in your instructions, so as you can imagine, programs took a fair bit of time to type in, and calculating these instruction was not exactly something you could just do in your head, so programmers began to write a sort of short hand on paper, to logical go through there program, before converting this into machine code. Its wasn't long before programs were written in machine code to take these logical short hand instructions and convert them automatically to machine code. This type of program is called a compiler. One of the very first languages was called assembly which was developed in 1951.

Assembly is a fairly low level programming language, and far from the high level programming languages of today, but most languages regardless all do basically the same things. Which is why most follow similar fundamentals that translate between them. We I will now try to explain in as few words as I can, I promise /emoticons/biggrin.png.

The first thing to understand is program flow, this is the order in which a program is executed, which is never really as simple as left to right, top to bottom. Programs jump between processes, which can then call four other process, which can be on that program, or they can be called in from another program on another file somewhere completely different.

Data

All programs will have data of some sort, or use memory to be precise. But this data, will be stored temporarily as a variable. This is a piece of data that can be changed. It may also have some constants, which is data hard coded within the program that will not change during the execution of the program. All variables can have a type, that type can even be an object which I will cover shortly. But common types that you may encounter will be things like Strings which is just text, or and Integer, which is just a number.

Logical operators

Data can be compared and manipulated using logical operators, for instance if we have a variable called number1 then another called number2. We could say If number1 < number2 then exit. the sybmol < stands for less than. There are lots of operators, and all programming lanuages use slight variations of these, but the main thing is that you understand, that these symbols are what is used to compare and assign variables.

Statements

Statements for instance, the if...then..else statement are use to control the flow of a program. there are lots of statements you can use, another for instance is the repeat....until statement. They are fairly self explanatory in more cases, and we don't need to cover them too much for the time being.

Procedures & Functions

These are basically small programs within a program that do a little job, the great thing is that if you are going to be doing something, 10 times within a program you can simply write a little procedure or function and call it when you need it, rather than writing out the same code over and over again. They can use variables, you can sent variables into them, even objects into them, and you can have them return a result for you.

Objects

Ok so objects, this will be the most relevant topic. As I have explained you can have variables which are of a certain type, either number, or text or some other type. You can also have procedures and functions doing little jobs. Well you can also create an object which is made up of a standard set of variables, and even has some procedures or functions, even other objects.

For instance, a button is an object, there is some little bit of code that has created a new instance of that object, called the a couple of procedures, one of which will be a little program to draw out the button of the screen for us to see. Even one to draw another image when we hover over it.

The simplest way of describing an object is that it is a little template, written out for you use in your programs. It will have parameters, date which you can set, and even little routines like on click events which you can customize. This is important because when we create a div for our website, it will have loads of little settings, which we will look at, even little event handlers for us to use. Everything we will use, for instance forums, tables, and buttons, are all basically an object made up of data and little procedures, which in turn, is nothing more than instructions for the computer to execute.

Have a little look at this...

$message = build_message($_REQUEST);

$message = $message . PHP_EOL.PHP_EOL."-- ".PHP_EOL."";

$message = stripslashes($message);

$subject = "FormToEmail Comments";

$headers = "From: " . $_REQUEST['email'];

mail($my_email,$subject,$message,$headers);

this is a little snippet of the php program that sends me emails from my website. Notice that there is a variable called message which is created by calling a few procedures, the variable subject is set to a basic string, the headers are set by calling a another little program, and look, to simply send an email using php, all you have to do is call a function called "mail" and send it some data.

This is the kind of thing you will see and hopefully with a little knowledge you wont be completely lost. We will avoid coding as much as possible, but you will touch on it.

This is only to give you a rough idea of what programming is, it might not come together for you just yet, but later we can look at the actual html, javascript and php code for the site which hopefully you will see and go ohh, that's just a procedure, or an object I can use.

 
Lets get back to our site for a bit now and get another little bit done!

Setting up our first page

Open up Dreamweaver and create a new html file in you directory and save it as index.html. This will be the first page of your website, and will be your websites homepage when its all uploaded. So its very important that this page is called index.html.

The first thing we want to do is setup the page properties, which you will see a button for in the properties pallet at the bottom of the screen. I have attached the screen shot from you to see, the main thing is that you select the first slice we took right down the side of our design as the background. You then set it to repeat on the x axes of the screen. But as we have a little banner at the top of out background, we dont want that to repeat on the y axes as we input our contents onto our pages, so we will just set the background colour to the same colour as the back ground slice to handle this.

Its basically like the background is the colour, then at the top of the page we have an image overlapping the background colour, which will be repeated left to right depending on the width of the screen. This is one of the things we have to consider when designing backgrounds for site, can I easily extend it to work on different monitor settings, and browser widths.

f75059e8067f037ce338.jpg


7b11fdf19809675af915.jpg


 
CSS - Cascading Style Sheets

This is the next stage in our development, so firstly I will do my best to give you a rough idea of what a cascading style sheet is. Its name pretty much describes it perfectly which you'll understand in a moment.

When we add new object to our design like divs, we will give them names, for instance you will create a div to hold the elements of our navigation bar. This div will be used on every document as its part of our template that we have created. So rather than creating a new div on every page, with all the various settings for this div on every page, we can create a style sheet to store this information.

By doing it this way, just like procedures and functions, it cuts down on code and it also means, that if we every want to amend those settings, we only have to do it through the style sheet, in one place. Can you imagine if you had a huge site, and you have to go through every page to make an amendment to a simple little thing like an incorrect setting. It would be a ***htmare, and this is what CSS avoids.

For large sites they are invaluable, and very dynamic. You don't have to have only one style sheet for your website, you can have as many as you want, however you can only assign one style sheet to one page.

So lets get into it... Over to the right of Dreamweaver's console, there is a CCS Styles box. Then at the bottom there is four little icons, one is a chain link, the second is a page with a plus sign on it, then on the third there is a pencil, and the last is a bin. Click the page with a + on it. Select [Advanced (Ids, pseudo-class selectors)] then enter a star sign for the selector, and click [Ok].

b7a93ce177887ee596f1.jpg


That is it you've just created a style sheet, you'll be asked to save your style sheet, which you can just call stylesheet.css, and click [save], then you should now see another box with a few settings. For now, just change the Font to "Tahoma" and click [Ok].

So now that is out the way, we can begin creating divs and piecing out template back together.

 
Html

Html, is a language just like any other however, unlike javascript and php. Html works completely around tags. A tag looks like this...

...

As you can see there is a begining tag, and an end tag. everything in between is contained within that tag. There have been a number of changes recently with the introduction of HTML5 with regards to what the standard is. For instance, you now now longer need to put in your end tag for the headers, but as you do for some things its still a good habit to do it.

Now I wont do into HTML in any length here, but you should understand what a tag is and how the hierarchy works. This is important, as you will be able to clearly see what tags are contained within what tags. Which Divs are just that.

Now as I have said before, objects have allot under the bonnet, and divs are no different, they are objects which we can customise.

Have a look at this, this is the complete code for our template.

design-slicing_02.jpg


...

design-slicing_11.jpg


design-slicing_12.jpg


design-slicing_14.jpg


I have taken out a few bits to avoid any confusion, but as you can see, all the divs have id's a couple have images in them, some are empty for the time being, but this is the basic structure of our template.

Divs broken down

Div 1 - this is out container, we only use this to centre this design.

Div 2 - Our PageContain, this is for all the elements of the page,

Div 3 - Our Header, this is within the Page container, and holds our header image

Div 4 - Our Nav, this is also within the Page container, and holds the mouse overs for our nav.

Div 5 - Our PageImage, again within the PAge Container, and hold the ***le image for the page.

Div 6 - Our Contents, will be for the contents box and holds two divs, one for the side menu, and one for the main

Div 7 - Our Page Footer, this is not within the Page Container as we want this to span the whole width of the page.

Ok, so this is what we are going to show you how to do next, its simple enough, but easy to get stumped if you change the wrong setting on div somewhere. So this bit although easy will take a little time, but the end is near.

Here is a screen shot of our complete design, within a browser, which you'll soon be able to do yourself.

865b096ac5158fb9d932.jpg


 
Creating your first Div

Ok so the first div we have to create is our container. In Dreamweaver the button to create a div is the 5th one in from the left on the common tab, near the top of your console.

666adcfd0e899438ba40.jpg


click that, then give it an id as follows...

6143bd3379999998f6de.jpg


Now we need a CSS rule for it, so click the little page is the CSS box, then click [next] at the following dialogue. You should see the div name in the id box. Then you will get the settings box for that div. All we have to do here, is set the text alignment to [centre] in the block category, and click ok.

That is your first Div created. /emoticons/biggrin.png

c767835d241516d0e1f3.jpg


Ok so to explain again, the html for the div, is on the page index.html file, but the setting for it is stored in our stylesheet.css file. So if you look at the style sheet you should see this.

#Container {

text-align: center;

}

That is the code that has been created by doing what you have just done.

If you were to switch to the code view if your index.html you should see ...

Content for id "container" Goes Here

 
Our Page Wrapper

The next div you have to create is our page wrapper to hold the elements of our design. The first thing you have to do is make sure your cursor is in the right position before creating the next div to ensure that it is created inside the container div. When we created our container div, Dreamweaver created a little bit of text to show you where to put the contents for the div saying "Contents for id 'container' goes here", we dont need that, so go ahead and highlight it and click the new div button.

Create a div called 'pageContainer' and then create a new CSS rule for it by clicking the little page in the CCS Styles box to the top right of your console. The important thing when doing this is to ensure that you are selected in the correct div before click the little page. you can tell this by looking at the little tree view of your divs on the grey bar at the bottom of your design.

c5ebdba6213060280315.jpg


So next go ahead and set the CSS Style of your 'pageContainer' as follows...

ece82e207457dfd5999b.jpg


Ok, we are making progress, but lets explain this little bit first, the width that we have set is just the width of the slices that make up our design, you can just take that from the header image slice, which you can see in the properties box the shows at the bottom of a folder once you select an image in windows. Alternatively you could use your ruler tool in Photoshop, but if you are using the same design, which I have uploaded for you guys to download, then the width of the design is 927 pixels. I will show you how to use the ruler tool a bit later on.

The margins which I have set is to ensure that the Div centres within our 'container' as Divs are not effected by the text-alignment setting, only things like pictures and text are effected by this. So if you ever want to centre a div, you should set the margins of the div like this.

We will be putting in our first image slice next...

 
Ok, so do the same again by highlighting the auto text that Dreamweaver has now created for the pageWrapper as again we don't need this, but it is helpful as it lets us know we are in the right position before creating the next div. Which I want you to create now and call it 'header'.

Header Div

This time we don't actually need any CSS for this Div, its just going to be used to position our header image. So again you will get auto text say "the contents for div id 'header' goes here". Highlight that, and then insert your header image by clicking [insert] then [image] from your file menu.

c13b144ca7c21a9cb9cc.jpg


Now find your header image in your slice images folder, the one with the logo on it, and click [ok].

That is your first slice inserted, well done.

Now just so you can see it all coming along, in Dreamweaver, you can press F12 on your keyboard to preview your index in your browser. Later we will do testing before we starting to enter all the contents of the site, to ensure that the site displays correctly on different browsers. We will also cover a little about doc types and meta tags, before you go creating the various pages to our site. But that is all for later, for now we want to complete our working template which is now well under way.

 
Navigation div

This time we wont have any auto text to show us were we want our div to go, so we need to go into our code view, just under the page tabs, you will see three buttons, code | split | design. Design is the one you are on right now. Click the code view to have a look at the code so far...

b0151cb658903c24daeb_2.jpg


Code:
[img=slice images/images/design-slicing_02.jpg]
What we need to do is create a div just under our header div, but still within the page wrapper div. So possition your cursor in the correct locations as you can see from the code example above, then follow the same methods you used to create the header div. Now your 'Nav' div wont have any CSS either. Again its just for positioning the images for our nav. So if you felt confident, you could even just type in the code the line "

" and this would do the exact same thing, and work all the same.

Once you have created your nav div, highlight auto text and start inserting the slices for you nav, or if you typed it in /emoticons/smile.png just place your cursor between the start tag for the nav div and the end tag. Once you get to your buttons, you want to use the [insert], [image objects], [image roll over] option, as we want this to be a mouse over image.

fab8fae7395039cd5af5.jpg


e3eacda0cebca4bdb694.jpg


Now as you can see from the dialogue, you want to select one image for the normal state, then another for the mouse over image. For the normal state image select the home button in your 'slice images' folder, then for the mouse over, select the home button in your 'slice images mouse over' folder. Obviously the ends of the nav can be just inserted as a normal image, we don't need a mouse over object for those images.

Go ahead and repeat this process for the remaining buttons, and you should end up with a working navigation bar, the buttons wont do anything just yet, but the mouse overs should work for you now.

b0151cb658903c24daeb.jpg


 
Back
Top