Building your own website

[laddergarder]

pageImage Div

Now for the next part we have to create a div for the pageImage slice. So just as before go into the code and right after the end tag for the nav div insert the following.

You will see allot of code which has been created for our mouse over images, but don't worry about it. If you are not sure where it starts and end, place your cursor some where over the code for the nav, then click the button on the tree view at the bottom we showed you before. This will highlight all the text for the nav and show you exactly where to type in you pageImage div.

Then all you have to do is insert the slice for the page image, but remember to place your cursor between the start and end of the pageIamge tag, on our design its the slice with the man abseiling while cleaning windows.

 

[laddergarder]

Contents Div

This is the first div we are going to create, that contains other divs. It should be placed just after your PageImage div and still within the pageWrapper div. You may have noticed when I am talking about variables like 'pageWrapper' I dont use spaces, this is because often programming languages don't allow this, so you use 'bumpyCaps' to make it readable. This is when the first word is not capitalised at all, then every word there after begins with a capital letter, to improve readability.

So the three divs it is going to contain, is one called contentsHeader, one called contentsBody, and another called contentsFooter. The header and footer will just contain images, and the contentsBody will contain two other divs will we will go over once we have completed this little bit.

The only one with any CSS here will be the 'contentsBody' div. So again the easiest way to show you how to do this, is just to get you to type in the code again. Remember click the 'pageImage' then select its div in the little tree view at the bottom, if your lost and don't know where it ends.

[img=slice images/images/design-slicing_12.jpg]




[img=slice images/images/design-slicing_14.jpg]

Now to create the css for the contentsBody, just place your cursor on the id in the code view, then click the new page button, in the CSS box the same as before.

Now here is the changes you have to make...

Obviously the box width will likely be different if you have created you own design, this is just the width of the example design. What we have done here is to ensure that as we type text into the the divs that we are going to create within the contentsBox div to hold our all the text and pictures for our site, the contentsBox div's height will be set depending on how much stuff we type in to it.

Now that last thing to set here is the background image...

this time we wont be just inserting the image as we want to be able to type over it, so we use the background image parameter of the contentsBox div to do this, as shown above.

Below I have drawn a box around the slice that you want to use for the background image.

Once you have done that go ahead and insert the slices for the top of the box with the curved corners into the div called contentsHeader, and the slice for the bottom of the box into the div called contentsFooter. You can see these images in the code example above.

Next we will address a constraint that you have when using divs, have you noticed what it is?

 

[laddergarder]

The 'side' and 'main' div

Ok so the constraint, is that divs naturally stack on top of one and other. Which is fine, but it does limit us a little as we may want to put things side by side. Now if you remember way at the start when we were doing our slicing, we talked about how we really on needed three slices for our box, rather than one for each corner, each side then our main box.

We even have a side menu to deal with that I have included, but as you may have spotted I didn't bother taking a separated slice for the side, and one for the main area of the box.

What we are going to do is create two divs that will sit side by side, they wont have any background pictures as our 'contentsBody' deals with that, they will be transparent, and for the sole purpose of containing the contents of our website, ok so here is the code.

Now just to let you in on another little programming secret. My tab spacing isn't a coincidence, you can use your tabs when coding to display the relationship between objects. By coding this way you can clearly see that the 'side' and 'main' are child's of the 'contentsBody' div.

Ok so lets look at the CSS rules for our next two divs.

CSS for the side div

CSS for 'main' div

Now lets talk about this for a second, obviously its the float left and right, that does most of the work here, but it is also important that you set the correct width. The 'contentsBody' has a specific width, and these two div's width should add up to that exact width. If they add up to more then the second div will be pushed below the first one. If they add up to less than this, then your measurements are of, and your contents wont line up, with the background.

So how do we find these measurements, we go back to our design in Photoshop and use our ruler tool I mention previously. Ok so, in Photoshop, two buttons up from the magnifying tool on our tools pallet you'll see the little colour sampler tool we used earlier, right click that and you'll see a few other options, one of which is the ruler tool.

Use that to measure the width of your elements. If you created your page using pixels for your dimensions, then the measurements shown at the top will be in pixels, and as you can see I have just rounded up to one decimal place, you wont notice that your contents is 0.03 pixels out :wacko:.

Your almost there, the only thing let to do now is out footer div and that is our basic template done bar a little bit more coding.

 

[laddergarder]

Ok so the last and final div /emoticons/biggrin.png is the footer div. Now earlier I said that we wanted this one to span the whole width of the page, and as the pagWrapper is set to the width of the design, our Footer cant be within the pageWrapper. So this time we will place this after the end of the pageWrapper but still within the containerDiv.

...

CSS for the pageFooter

Set the width in the box category to auto and then set the the background colour in the background category to #383838 (if you are using our design example, if not the colour is really up to you).

Done :wacko:

That is the design completely ported into Dreamweaver.

Next we will look at what adjustments we have to do to the code to make sure its search engine friendly like meta-tags, keywords, and what doc types are.

 

[laddergarder]

Doc Types

Your document type can be found at the top of your page in code view. If you haven't created a page previously in Dreamweaver this piece of code may not be there automatically when you create a page so you should add it in, I explain why in a second but here is the code.

It should be placed above the start of the head tag as shown in the code snippet above. Now when creating websites, it used to be that tables where used to create the various elements of a page, before the introduction of divs will the CSS1 standard which was released in 2005.

So with the various standard that are released its important to let the browser know which standard was used when developing the site, so that it can display it correctly. Just as I mentioned earlier with the new HTML5 standard that is be introduced there is loads of new things you can get away with and new elements you can use. So if you used an old document type, but used standards set out by HTML5 your website may not display correctly.

Here is a good article on what doc types should be used with various standards...

http://www.w3.org/QA/2002/04/valid-dtd-list.html

If you want to know more about HTML5, then check this out...

http://www.w3schools.com/html5/default.asp

 

[laddergarder]

Meta Tags /emoticons/biggrin.png

This is the next things we have to knock up for our page design, our meta tags. These tags are brilliant, and have loads of different uses. Here is the meta tags I have written out for our page design.

Ok so, the first thing there, the 'http-equiv' meta tag, this sets the encoding to be used for the page. Once your site is uploaded to a server, that server will encode the page, then sends the page to the browser letting it know which character set has been used when encoding it, to allow the browser to then decode the page and display it correctly.

The example above, shows how to create a page redirect, which we will use later. When I show you how to setup online payments you can send your users to a thank you page which can then redirect the users after 3 seconds back to the home page. Obviously if you want to give then 5 seconds, just change the number 3 to a 5.

The other lines there are self explanatory except the last line, which I will get to in a second. The only thing I would say here is when you put in your page description make sure you mention the words that are mostly likely to be used to find your site. So for you index page, mention your company name, window, cleaner, cleaning, & the towns you work in. This will help you page possition in google.

There are lots of conflicting information out there about what helps your ranking when it comes to keywords, IMO its best just to keep it to words that relate to you and your business, and try stay away from generic words like 'professional' that will likely not be used when searching for a window cleaner.

Now the last one...

This is to prevent google and other search engines for displaying this page. Or at least they shouldn't, there is one more thing you have you should do to keep googles eyes of the page, using a file called a robots.txt file which is something I will cover later. But for now we can do this with any pages we dont want dhowing up in results.

Ok so why? Well for instance, you don't really want pages like your terms and conditions showing up in results. Instead if your like me, you will rather your sites users find you home page, then navigate to the terms & conditions through the site, rather than through a search engine. Another reason is, the last thing I want is my terms and conditions page showing up before my contact us page. So the best thing to do is add this meta tag in to pages you dont want showing up.

the only pages I have a searchable is my home, about, service, contact & faqs. I would recommend that you do the same. We can also disallow documents and dirrectories but that can only be done through the robots.txt file which we will go over later.

I intend on uploading this example for you guys when this done, so you will see this in all the pages code, but this is only because its just an example, and I don't want it to display in engines, but this shouldn't be there as standard.

Now one last thing with this stuff...

Climb Window Cleaning

this little line should also be in the head of each document. This is the text that will display on the tab at the top of the browser. Personally I use my business name for my index, then the actual page name i.e. 'about' for our about page, 'services' for our services page.

 

[laddergarder]

Favicons

A favicon is the icon file used next to your page ***le and also if your page is bookmarked, so its a great little touch to add to your site. I recommend you create a Photoshop page that is 32 by 32 pixels, with a resolution of 300, and a transparent background. Don't worry if it looks pixel'y it will look good once you've added it.

When you save your little icon design all you have to do is save it as a png file. Select interlace when saving, this is recommended.

Now all you have to do it is convert this to a png file. I recommend you use convertICO.com, is free and easy to use. Once that's out of the way, place this icon in your directory that hold your index.html file, and make sure you upload it and that's it.

Testing

The next thing you want to look at before we go any further here is testing. You want to make sure that your page template displays correctly in multiple browsers. Trust me when I tell you its better to find a problem now rather than later. I always check that my designs display properly in a least Google chrome which I use as my default and in IE, safari is also a fairly popular browser worth checking, by if it works in IE & Chrome it should be fine, which our design does.

 

[laddergarder]

Our footer

Yip, we back to that again. Let me explain.

We could just leave it as it is, come up with a design for it, and paste the code onto every page, but if we ever want to change our footer, we will have to change every page in the website. So IMO its not the best way to handle this. What I am going to show you next it how to set up an iframe for our footer so we only have to change one page if we every want to.

IFrames

These are basically like a frame, but rather than just a segment of the page, like a side panel, or a header. Its inside the page. Think of it like a little box any where you want the page, any width any height. The only constraint is that it has to be square/ rectangular, so no custom shapes, but if that's what you want there is ways to make it look like that.

What we want to do is create a new page, and call that page footer.html set the background to the same background colour as our footer div, which in our design is #383838. Then centre the text on that page.

Now back at our index.html, insert this code into the footer div.

Sorry your browser does't support iframes.

not set a new CSS rule for that object as follows...

#Container #PageFooter #footeriframe {
height: 250px;
width: 927px;
}

you literately can just paste that into your stylesheet.css file, then just save it, rather than going through the interface, but that up to you want you prefer.

And that is that done, you will notice that I have just set a fixed height, so if you contents extends beyond that height you have to go into your CSS and change that height. For the hassle of trying to code it to self adjust based on the contents in the footer.html file, this is just simpler, easier to do, and allot lot quicker.

Just another note if your ever wanting to know what parameters you can set on a tag when your in code view if you just go to add a parameter, by placing your cursor just after the end of the ID of the tag then hit the space bar, a little list of parameters will drop down. It will even filter this list of parameters for you as you type.

Next we will setup all our pages and finish setting up our navigation bar.

 

[Njones]

Loads of effort gone into this tutorial,.. BUT:

Using a big image & slicing it up into Dreamweaver is often very unfriendly for search engines. Google reads text, it doesn't read images (or text contained in an image), so taking this approach, even when you use meta tags, can end up with a dismal google ranking. There's no point having a pretty website if no one can find it.

My personal recommendation would be using a template. There are new "responsive" templates available which automatically re-arrange their layout when viewed on tablet devices & smart phones etc which are becoming ever more popular for internet browsing - the responsive templates aren't easy to work with, but its worth the effort to maximise your audience:

http://www.templatemonster.com/website-templates.php?from=1&features=responsive-design&type=1

Just change the photo's, text, page ***les, meta tags etc etc to suit your company. /emoticons/tongue.png

 

[laddergarder]

njones

There is no text there in any of those images bar the logo which is the same on your own site, this is just the design stage I havent finished with this tutorial so I don't want to start a debate here, but this method wont affect your Google ranking, the only text that wont be typed will be the logo, which if you were building a site then hosting it, your business name(i.e. climb window cleaning) would be the address of the website and would show up no problem. All the text and contents will be added to this template shortly and will be searchable by Google, keep reading, if you disagree and want to debate it, please start another thread if you don't mind, its just that I don't want the contents of this tutorial to get lost in replies, once I have finished I'll leave it open to anyone who wants to comment.

Kind regard

Ladder

 

[laddergarder]

The next thing we have to do now is create all the pages then link them together with our navigation bar. Down in your files box you want to copy and paste the index.html file, the option isn't there if you right click it, but it will still work if you just use ctrl+c then ctrl+v to paste it. This will give you a new file called copy of index.html. Now just rename that as about.html.

Repeat this for all our the pages you want, for this tutorial I am going to use a an about, services, contact us and faqs page.

Now I am sure you've guessed, but we are going to have to go into the meta tags for each page, and change, the ***le and the description. I am only going to change the ***les as this is just an example but you should write out a little description about each page as well.

Now want we need to do is set the links for the buttons on our nav, and unfortunately this has to be done for each of the key five pages on our navigation bar, but not to worry its easy enough.

Click the first image of our navigation, and you'll see some properties at the bottom. There should be a box called link, with a little target sign the the right of it. Click that and drag to target to appropriate page in the files box. That it all done, now just do that for the five links, the the five links of each of the other pages, then we are sorted. /emoticons/smile.png

What we could have done is write the links out before the pages existed then copied & pasted the index.html file but I wanted to show you the little target thing for lack of technical name for it. /emoticons/smile.png

next we will get all the contents typed out for the website, and it will be very search engine friendly, both my own sites rank no1 in google and where created this way.

Here is a little fake footer I have typed up for this example...

next I will get allot of example contents typed up for this for each page, and I'll host it in a sub folder of my own site to let you guys visit the site and take a look, then we will go on to setting up paypal payments, contact forums, galleries and much more /emoticons/smile.png

 

[laddergarder]

While I work on some the the contents for the site example. lets show you how to do something else.

Twitter

Most of us use it, so how can we embed it into our website? well actually its pretty easy. But we don't want to just use a twitter widget, we want to make our own little design to style it to our website. So here is what you have to do.

You need to go back into photoshop and create a little design for a box to hold your tweets, then (save as) a new ps document, and call it something like twiiter box. Then all you have to do, is crop the page, then slice up the design as we did before. I will attached the slices for the box I have created for those of you that are following this example.

Then just create the divs as before to hold the design...

[img=twitterboxslices/images/twitter_01.jpg]





[img=twitterboxslices/images/twitter_03.jpg]

Now the Div called twitter_padding needs explained here. The same as before we have the twitter main, which will have a background picture to handle the expendable background for the box depending on the contents, then we have the twitter padding div to hold the text. the reason we cant just put the text in to the same div that has the background. Is because once you add cell padding in chops off the background picture where the padding is. So to get round this, we use one box(div) for the background, then another inside it to hold the contents, that way we can add cell padding and don't have to worry about the background slice.

here is the CSS for these divs, to show you what I have done...

#Container #pagewrapper #contents #contentsBody #main #twitter #twitter_main {
font-family: Tahoma;
font-size: 12px;
background-image: url(twitterboxslices/images/twitter_02.jpg);
background-repeat: repeat-y;
text-align: left;
display: table;
width: 601px;
margin: 0px;
}
#Container #pagewrapper #contents #contentsBody #main #twitter #twitter_main #twitter_main_padding {
text-align: left;
width: 480px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

^ rather than adding padding here I just dropped the width of the box.

Now once you have a little box designed and setup its time to add the code...

To do this we are going to use a little javascript, nothing daunting though so dont worry, all you have to do is paste the following code, just above the tag. Where your see the word CHANGE, you have to change that to the name of you twitter account.

Now in you main_padding div add a

• called "twitter_update_list" as follows...

[img=twitterboxslices/images/twitter_01.jpg]



[/list]


[img=twitterboxslices/images/twitter_03.jpg]

Now for my twitter box, I didn't like the look of the bullets and tabbing, so I have removed those but adding the following CSS to my style sheet.

#Container #pagewrapper #contents #contentsBody #main #twitter #twitter_main #twitter_main_padding #twitter_update_list {
list-style: none;
margin: 0;
padding: 0;
}

And that is it, have a look...

Now it might seem like some black magic just went on there, but it really didn't. There isn't really anything special about the tag, it stands for unordered list, and that really is all its for, displaying lists. The only reason our tweets have been feed into that is because we called it twitter_update_list. All the magic happens on another file somewhere on the twitter servers that we have made use of with our little bit of JavaScript that we called up.

View attachment 402

View attachment 403

View attachment 404

 

[laddergarder]

Here is the basic page up, I still need to do a bit more on the example contents, but this will at least let you see the nav bar working, the twitter feed etc. I'll put this link at the bottom of each post to let you visit it and see the changes as we go through setting up contact forums, and paypal buttons for your site designs. Then we can finished by talking about uploading your site, robots.txt files and all the stuff /emoticons/biggrin.png

http://www.mcmanuswi...limb/index.html

 

[laddergarder]

Setting up a paypal button

The first thing you have to do is set-up a Paypal account for your business account and get it verified. There are loads of info on this from paypal's end, so I wont spend any time here going over that stuff. All I want to show you is how to set up a paypal button through paypal, then add the code to your site.

Once you have signed into paypal, click [merchant services] then [manage your account], then click the button under [my selling preferences]. You should see a t-i-t-le called selling online, and under that an item called [paypal buttons] at the end there is a link to 'update' them.

Then all you have to do is click [create new button] in the 'related items' section. Now I know you will want a pay now button, which there isn't an option is the choose button type tab, just choose 'buy now' for now. Give your button a name and leave the price empty, as we want the customer to enter this. The item name will be seen by the customer when paying, so I called mine window cleaning /emoticons/wink.png.

Now there is a little link called 'customise text or appearance' click that, and you should see a option at the bottom for select button text, you can change your button to a pay now button with that.

Now if you select [customise advanced features(optional)] and look at the options there, you should see an option to redirect customers to a page on your site when they cancel and order, and another for when they finish there checkout. Which is something I would recommend you setup for your buttons.

Then its easy, just click [create button]. They then give you the code to paste into your design.

Now I wont set this up on the example as its obviously would be linked to my account, and will happily take your money, so to see this type of button in action, you can visit my home page, link in my profile. "but don't complete a payment", no refunds /emoticons/wink.png, no but seriously, you are fine to click the button and have a look at what the page design looks like.

Security

Using buttons created this way is about as secure as you can get IMO, as allot of the customisation that we have did there is held at paypal's end and not in that code, there is no personal information in the code like your email address that you use for your paypal login, which I have seen before. The only thing that is there is a little reference number that paypal looks up, when someone click the button to find the settings and preferences for it.

Customising your payment page

On your my account tab, click the link at the side called 'My Business Setup' then click the [customise] button under 'customise my buyers checkout experience'. In there you'll see all the setting for adding logos and changing colour schemes, what you want you buyer to see, like your contact number, and what information you need from them, like the address /emoticons/smile.png .

And that's about it, if you've followed this tutorial you wont need me to show you how to setup a div to contain your button and how to paste the code in, you'll be pro at that now /emoticons/biggrin.png.

 

[laddergarder]

Some Important Info before we start contact forms

I want to give you a rough idea of what injections hacks are, so you understand later on when you see code for strippingSlashes etc when we are creating our contact form for our site.

I am going to use a little sql example from a book I read last year to try explain it, the book which I would highly recommend and is called oreilly learning php, mysql, and javascript.

This would be the sql for a user login

SELECT * FROM users WHERE user='fredsmith' AND pass='mypass'

Now here is the hack, in SQL the syntax for a comment is this,

#'comment'

so if someone entered this as the username and nothing as the password... admin' #

look what it has done

SELECT * FROM users WHERE users='admin' #' AND pass=''

Its completely commented out the password check, which is why when you create forms on webpages of any kind you need make sure that the information coming in is not malicious, in any way.

So when date comes in it is generally put through a few procedure to strip out any symbols that could cause problems, to prevent this kind of thing happening.

 

[laddergarder]

Ok, so here is a basic example for a contact form, I have kept the code as simple as possible, and rather than using the CSS sheet that we have used up to now, I have more simply done all the formatting through the code. I have done it this way because these elements won’t repeat on any other pages, so in this case we don’t really have to worry about CSS.

Enter your name: 

Select type of job:

Residential
Commercial

Enter your email:

Enter your telephone number:

Enter your message:

So as you can see, our contact form, calls a little php program that we have to now create to make this work. When this is called, your users will see this page, so it is worth while to create a page, using your normal page template that we have created, and put up a little message saying "we will deal with you query as soon as possible" or something along those lines. But for the sake of this example I will just write the code, to make it as easy as possible to follow.

First of all the following code snippets should be within a php tag like this...

The only two pieces of code you have to change in this example is the following two variables, the rest you can leave as is...

$my_email = "enter your email address";
$continue = "enter your homepage";

I have attached the php file for you to fill out your details, then all you have to do is upload it to your server, remember this wont work until you upload it though, as php is server side script.

http://www.mcmanuswindowcleaning.co.uk/climb/contact.html​

myPhpProgram.php