Page 1

London, WC2H 9EA

WHAT YOU

CONTENTS THE BASICS 5 CREATING A NEW DOCUMNET 7 CREATING THE HEADER 10 CREATING THE MAIN CONTENT 11 CREATING THE FOOTER 12 CREATING THE STYLE SHEET 14 BACKGROUND COLOUR 16 TYPEFACE 16 CENTRE THE WEBPAGE 18 BACKGROUND IMAGE 18 BACKGROUND IMAGE REPEAT 20 PADDING THE TEXT 22 SETTING A MARGIN 23 DIFFERENT TYPE SIZES 24 TEXT ALLIGNMENT 26 SETTING WIDTH AND HEIGHT 27

LINKING FIILES 29 ADDING IMAGES 31 CREATING TABLES 34 PHOTOSHOP IMPORT IMAGE 36 FINDING THE RIGHT HOSTING 39 UPLOADING ON YOUR HOST 44 GLOSSARY 47

WILL NEEED

TO MAKE A FULLY FUNCTIONAL WEBSITE

THE RIGHT AND THE WRONG WAY


SMILESDESIGN How do I make a website? Š Shane Miles

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any mean, electronic, mechanical, photocopying, recording or otherwise, without the prior permission of both the copyright owner and above publisher. The right of Shane Miles to be identified as the author of this work as been asserted in accordance with the Copyright, Design and Patents Act 1988 Typeset by Shane Miles Printed in Great Britain by Eco Print, Norwich SMILES DESIGN PUBLISHING SMILES DESIGN

34, Camden Street, London, WC2H 9EA


5

information to make up the page.

HEAD TAG

The head tag of a webpage isn’t as visual as the body tag but just as crucial. The head tag still stores information about your website but a different type of information. One of the uses of the head tag is to store a message or a greeting in the same bar as the address bar in your browser. For example if you went of hmv.com it would probably say “Welcome to HMV”. So therefore you can put a message in your head tag to say whatever you want. The other use is search engine optimisation, you can put meta keywords into your head tag so that when you use a serach engine e.g. google it can check your site for certain words to see if it matches up with the words someone has typed in to search.

THE DIV & BODY TAG

WITHOUT THE CONTAINER THE SMARTIES WILL GO EVERYWHERE

Div tags live within the body tag, these are the smarties which need a container. Div tags can be very useful for a number of things but these are basically mini body tags. Div tags are used to store the different sections of the website. In the most basic websites they consist of a header, a main content and a footer div tag. The body is basically a container which holds all the div tags and the content of the website. It’s the part that holds everything together which you see on a website. Imagine that it is a container and the div tags are smarties. Without the container all the smarties will go everywhere. This is what the body does, it is the container for the div tags. A webpage cannot function without a type of body. This is one of the most crucial parts of a webpage.


THE BASICS

WHATS, WHAT GET TO GRIPS OF WHAT MAKES UP A WEBPAGE

FIRST OF ALL To start I am going to run through a couple of basics for you. Each section is crucial and without them it is impossible to make a website. Websites are made up of a structure and to make a structure you need materials. The materials that make up a website are:

BODY TAGS/HEAD TAGS/DIV TAGS These are the three main sections which make a website. They hold infomation and structurise your website for a browser. Websites use a language called HTML. HTML stands for HyperText Markup Language and this is the language which browsers read to get the information to make up the page.

5


FIRST OF ALL YOU NEW DREAMWEAVER, GO TO WWW.ADOBE.COM AND DOWNLOAD A FREE TRIAL OF DREAMWEAVER

CREATING A NEW DOCUMENT: Everybody has to start from somewhere and so here we start by making a simple webpage using your head, body and div tags.

CREATING A NEW DOCUMENT

IS IT DIFFICULT, WHAT FILE TYPE DO I NEED, HOW DO I DO THAT?

7


DO I DO THAT? IT’S THIS SIMPLE:

OPEN DREAMWEAVER FILE>NEW HTML>NONE As you can see luckily Dreamweaver creates <head> and <body> tags. Also it shows the correct way of how to close tags. This is one of the most important things in web site building. If you start a tag e.g. <body> you must always close it at the end of the selection of infomrtaion you want using a / therefore say <body> Infomation </body>. So now you have the foundations of your building we now need to plan some rooms to go in it. By this I mean by inserting div tags into the body.We are going to create a header, main content and a footer tag. First of all we need to locate exactly where we are going to insert our div tags. Div tags need to go within <body> and </body>. If the div tags are out of this, then they will simply not show up. So always make sure whatever your putting in, lives in between <body> and </body>. Now you know that, we shall move onto the next step, inserting the div tags. You simply click after <body> and press return to make a new line then type <div> to make a div and then close this tag with a </div>. However, make sure that the </ div> is before the </body>, because if you close it after the body tag, it will confuse the browser and therefore muck up the layout basically.

7


9

SAVE AS INDEX.HTML THEN

TIME TO CREATE THE:

HEADER MAIN CONTENT & FOOTER REMEMBER A <DIV> IS ALWAYS CLOSED WITH A </DIV>


CREATING THE HEADER

A COUPLE LINES OF CODE AND YOUR WEBSITE HAS A SMILE YOUR WEBSITE NEEDS AN ATTRACTIVE SMILE WHICH WILL SUCK EVERYONE IN

1

This is a completely blank canvas, no information is shown yet. All it says at the moment is that it is a HTML document. We need to put information into it. To do this we use div tags which was discussed earlier on. To start off we are going to put a <header> tag in.

2 To do this you simply type withing <body> and </body>, <div id=’header’> followed by </div>. This will create a div tag

3 So time to put some content. For now we are just going to type Hello, This is a Header. Just to get a general feel of how it looks. To do this go between <div id=”header> & </div> and just type in: Hello, This is a Header.


WILL SUCK EVERYONE IN

Hello, This is a Header.

11

1 So you got a header, the next part which is the Main content. The steps are basically the same as the header, just this time for the main content you put <div id=”main”> rather that <div id=”header> and also make sure you use </div> afters to close the div. All divs must have a </div> at the end.

2 Like the header tag the main content has to have content in. For it to show up so put: Hello, This is the Main Contents.

3 You can put more content into this. The more you type the bigger the box will get. However when you type more content, make sure you type it into the code view screen rather than the deisgn view. When you need a new line use a <br> if you do it in design view it will create a new paragraph each time you press the return key. Also if you need a new paragraph put <p> at the end of each paragraph put a </p>. If you want certain words in bold then use <b> at the beginning of the word and then </b> at the end. The same with italics but use <i> followed by </i>.

CREATING THE MAIN CONTENT

EVERYBODY LOVES SOMEBODY WITH A BIT OF INFORMATION YOUR WEBSITE CAN HOLD WHATEVER INFORMATION YOU GIVE IT


1 So far you should have some code that looks like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose. dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/ html; charset=UTF-8”> <title>Untitled Document</title> </head> <body> <div id=”header”> Hello, This is a Header </div> <div id=”main”> Hello, This is a Main Contents </div> </body> </html> This will become a vital part of the website, the backup navigation links. However, for now just type the same as the the other to put, just this time <div=’footer’> instead of header or main so you have something like this: <div id=”footer”></div>. Then again put some content in like: Hello, This is the Footer

CREATING THE FOOTER

GIVE YOUR SITE A BIT OF DIRECTION NAVIGATION IS ONE OF THE MOST IMPORTANT PARTS OF YOUR WEBSITE, YOU DON’T WANT PEOPLE TO GET LOST DO YOU


13

2 So that is the foundations of your website. It looks pretty rubbish at the moment but in the next chapter we shall start work on making it look alot better. Before we move on just double check you got all the code right:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Untitled Document</title> </head> <body> <div id=”header”> Hello, This is a Header </div> <div id=”main”> Hello, This is a Main Contents </div> </body> </html> Before we move onto the next chapter we need to get a couple of things sorted. We need images to make into backgrounds for our divs tags. We need an image 120x900 pixels for the header saved as a JPEG. It can include your logo or anything you would like as a logo. Another image saved as a JPEG again but this one 5x900pixels for the main content but make sure that if it was tiled down the page that it would match up correctly. One final one for the footer. This one has to be 80x900 pixels and this one has to match up with the main content, so imagine that the the footer is the bottom part of the main contents.

A COUPLE OF WORDS BEFORE WE MOVE ON


TIME TO MAKE IT LOOK PRETTY:

CSSCASCADING STYLE SHEET SOUNDS BORING BUT AMAZING WHAT IT CAN DO TO YOUR WEBSITE


WARNING: LOTS OF INSTRUCTIONS ITâ&#x20AC;&#x2122;S ALL VERY IMPORTANT THOUGH

1 To create a CSS stylesheet, in Dreamweaver go to New > Document >CSS

2 Save this as: css.css Then in the css style tool bar you will see a chain icon, click on this , then browse then select css.css. This will link the two files together.

3 After the first bit of code insert this:

CREATING A STYLESHEET

WOMEN WEAR LIPSTICK, WEB PAGES WEAR STYLESHEETS SPRUCE YOUR WEBSITE UP WITH A FANCY STYLESHEET, IT WILL LOOK 100% BETTER GARANTEED

body { } #header { } #main { } #footer {

4 We are going to focus on the body, the body is basically the aspect of everything you see. The font, font size, background color of the site. We are going to target the background first. We are going to change the background color of the site. For this you need to go to the body part of the css and between the { and the } put backgroundcolor:#(color); for now we are just going to make it black so the color code is #000000. You can have it any color but it has to be done using the HTML colour code. (colour code chart back page)

15


LOOK 100% BETTER GARANTEED 5 So the code should now look like this:

body { background-color:#000000; } #header { } #main { } #footer { }

6 Now the background colour is done, we are now going to give a font to the overall site. The fonts are put into font families which are all web friendly. You canâ&#x20AC;&#x2122;t use any font, it has to be one of the web safe families. We want a san-serif typeface so to do this under the line you just done you put fontfamily: Arial, Helvetica, Sans-serif; So now you got:

body { background-color:#000000; font-family: Arial, Helvetica, Sans-serif; }

code. (colour code chart back page)

15


WHICH SHIRT/SKIRT TO WEAR? WHICH TYPE OF BACKGROUND SHOULD YOUR WEBSITE WEAR?

So now you got:

body { background-color:#000000; font-family: Arial, Helvetica, Sans-serif; } #header { } #main { }

DRESS YOUR WEBSITE UP WITH SOMETHING SPECIAL

#footer { } In design view the font should change to a sans-serif

7 Time to tackle the header now, first of all we want the header to float in the centre at all time so no matter how big the browser window is it will be in the centre. Itâ&#x20AC;&#x2122;s pretty simple, you just put margin: auto; into the header part.

body { background-color:#000000; font-family: Arial, Helvetica, Sans-serif; } #header { margin: auto;

17


#header { margin: auto; } #main { } #footer { }

8 Adding a image as a background for your header is easy aswell. Find the header image you prepared earlier on and to put it as your background image just type background-image: url(name of file);

body { background-color:#000000; font-family: Arial, Helvetica, Sans-serif; }

IF YOU WANT YOUR WEBSITE TO ALWAYS FLOAT IN THE MIDDLE OF THE BROWSER WINDOW USE: MARGIN: AUTO

#header { margin: auto; background-image: url(header.jpg); } #main { } #footer { }

17

how to make a website  
how to make a website  

A simple book on how to make a website

Advertisement