Introduction: How to Build Your Own Website
More by the author:
About: A Northern Ireland based maker with a propensity to cause trouble and freshly constructed family.
A fully covered guide to getting from paper to the web, for free if you want, especially if any friendly webmasters owe you a few favours but even with little experience and knowledge you can build a site and get it on to the web like so:...
Step 1: Tools, Materials and Basic Skills.
Fo making your site you will need:
Tools
- A computer, preferably less than five years old
- A copy of dreamweaver (optional) but it's what I know and will be showing you on that
- A copy of photoshop, non essential but definitely a must for anyone who wants a nice looking site
- A connection to the internet on your computer, preferably a fast one (because it makes things quicker)
Materials
- An idea
- Some Disk space, depending on what your site's for
- Time, yes it's a material a valuable one at that
- A working E-mail adress if you need one they're free from Gmail and hotmail
Basic skills
- A basic knowledge of how to use your computer, the internet
-This is a codeless intstructable, it's for people that want to make a site but don't have any idea how
- Some design skills would be handy
- Knowing how to use photoshop would be nice, paint.NET or GIMP
Tools
- A computer, preferably less than five years old
- A copy of dreamweaver (optional) but it's what I know and will be showing you on that
- A copy of photoshop, non essential but definitely a must for anyone who wants a nice looking site
- A connection to the internet on your computer, preferably a fast one (because it makes things quicker)
Materials
- An idea
- Some Disk space, depending on what your site's for
- Time, yes it's a material a valuable one at that
- A working E-mail adress if you need one they're free from Gmail and hotmail
Basic skills
- A basic knowledge of how to use your computer, the internet
-This is a codeless intstructable, it's for people that want to make a site but don't have any idea how
- Some design skills would be handy
- Knowing how to use photoshop would be nice, paint.NET or GIMP
Step 2: Let's Get Started
Once you know what kind of site you want to make you make your design decision.
Think about the base coolers for the site, the style of it and how you want people to navigate it.
If you're making it for a business or club it's probably best that the site reflects the company/club coolers and has features that mimic or are based on things about the company, like menu buttons reminiscent of something they sell if it's a business.
Your sites navigation could be several things, generally the three main types use are left and right sidebar menus and top bar menus (they go across beneath the header like this site's)
If you're making the site for yourself then pick colours and design features you like and go from there
Word of warning though. don't use really conflicting colours and girls try not to go for fluorescent pink (not being sexist that just happens alot) You could even be running a business through your site if you want, I have little experience in doing this but it might be easier using something like the yahoo stores that this site uses.
Think about the base coolers for the site, the style of it and how you want people to navigate it.
If you're making it for a business or club it's probably best that the site reflects the company/club coolers and has features that mimic or are based on things about the company, like menu buttons reminiscent of something they sell if it's a business.
Your sites navigation could be several things, generally the three main types use are left and right sidebar menus and top bar menus (they go across beneath the header like this site's)
If you're making the site for yourself then pick colours and design features you like and go from there
Word of warning though. don't use really conflicting colours and girls try not to go for fluorescent pink (not being sexist that just happens alot) You could even be running a business through your site if you want, I have little experience in doing this but it might be easier using something like the yahoo stores that this site uses.
Step 3: Starting the Site
Right this is where we start, go in to My documents and make yourself a folder called 'My website or use the name of the site, Inside that folder make a folder call 'images' one called 'pages' and another called 'files' (the one called file is for all other files you might be using in the process of making your site.)
Now Fire up dreamweaver and along from file a bit you'll see a menu item called site so click that and choose new site, use the advanced tab (because it's easier to go through), now put the name of your website into the box for site name.
You'll see a box labeled 'local root folder' this is the folder you made under your site name.
The next box is labeled 'Default images folder' choose the folder named images in your root folder.
Leave the two check boxes alone, they're both the way they should be.
Now Fire up dreamweaver and along from file a bit you'll see a menu item called site so click that and choose new site, use the advanced tab (because it's easier to go through), now put the name of your website into the box for site name.
You'll see a box labeled 'local root folder' this is the folder you made under your site name.
The next box is labeled 'Default images folder' choose the folder named images in your root folder.
Leave the two check boxes alone, they're both the way they should be.
Step 4: Lets Get Stuck in Then
After you've made all your main decisions on the site it's time to make a template for all your pages, this is exacvtly what it sounds like, a template for making pages, a website should look similar thorughout so as to avoid both confusion to viewers and it saves alot of time and wasted effort.
In your template you'll need to make a header, this is the main banner that runs across the top of the page, it usually has the title of the site/company name, a slogan and weither a picture or logo reflecting the site's subject. The best measurements I can give are 760 x 100-200 the height is preference and also depends on where the menu bar will be going. The width is 760 so it fits in browser windows even when running 800x600 res on displays (it's no use if you can't see half the site)
Your menu button (if you choose to make them shouldn't be too tall I reccomend about 30 pixels in height and the width is dependent on lots of things but mine are usually between 100 - 1500 pixels.
Then again you may be using flash buttons which require zero effort on your part. (For dreamweaver that is)
In your template you'll need to make a header, this is the main banner that runs across the top of the page, it usually has the title of the site/company name, a slogan and weither a picture or logo reflecting the site's subject. The best measurements I can give are 760 x 100-200 the height is preference and also depends on where the menu bar will be going. The width is 760 so it fits in browser windows even when running 800x600 res on displays (it's no use if you can't see half the site)
Your menu button (if you choose to make them shouldn't be too tall I reccomend about 30 pixels in height and the width is dependent on lots of things but mine are usually between 100 - 1500 pixels.
Then again you may be using flash buttons which require zero effort on your part. (For dreamweaver that is)
Step 5: Making the Template...
So now we choose our site's colours and whatnot by right clicking on our blank page and going to page properties. For mine the background is going to be black, the text white and put the title as template now. You'll note in the picture that all my link colours are set as blue, I suggest using blue aswell because blue is the traditional link colour and using odd link colour was high on the list of things that annoy people about websites and what make them unprofessional.
Step 6: Making the Template Continued. the Layout
Now we start our layout of the template.
Click on the insert table button or the draw table button. Now just drag to make a table, choosing 3x3 is a handy place to start. First thing you should do is make you table 800 pixels wide, you can see the width in the properties bar at the bottom, now highlight the top row of cells and right click, go to table in the right click menu and choose merge cells, make the newly formed cell the height of your header picture. At this pint go to your table properties and put the value of zero in for 'cellpad' and 'border' values. This means that the table is non-existent to the end user but holds everything in place.
Now we stick it in the header image which should be saved in the site images folder but if it's not dreamweaver will ask if you want to copy the file to there. To insert an image look along your buttons bar (the tab above them should be on common) find the button with a picture of a tree in a box (most programs use a similar symbol) click on it and a dialog box will come up, just browse for your file and double click it. If your image appeared in the wrong place the cursor was in the wrong cell.
Now that you're getting the hang of table split yourself a cell along the side you want your menu bar, remember rows are across the way columns down the way. Make the box for your menu buttons table as wide as your think looks good then make your buttons the right width (ignore this if you're wanting flash buttons) Now make a table inside your cell with 1 row and as many columns as there are buttons (you should know this from your site plan, I can't help you at all there it's your choice) or for a horizontal menu 1 column and as many rows as there are buttons.
Click on the insert table button or the draw table button. Now just drag to make a table, choosing 3x3 is a handy place to start. First thing you should do is make you table 800 pixels wide, you can see the width in the properties bar at the bottom, now highlight the top row of cells and right click, go to table in the right click menu and choose merge cells, make the newly formed cell the height of your header picture. At this pint go to your table properties and put the value of zero in for 'cellpad' and 'border' values. This means that the table is non-existent to the end user but holds everything in place.
Now we stick it in the header image which should be saved in the site images folder but if it's not dreamweaver will ask if you want to copy the file to there. To insert an image look along your buttons bar (the tab above them should be on common) find the button with a picture of a tree in a box (most programs use a similar symbol) click on it and a dialog box will come up, just browse for your file and double click it. If your image appeared in the wrong place the cursor was in the wrong cell.
Now that you're getting the hang of table split yourself a cell along the side you want your menu bar, remember rows are across the way columns down the way. Make the box for your menu buttons table as wide as your think looks good then make your buttons the right width (ignore this if you're wanting flash buttons) Now make a table inside your cell with 1 row and as many columns as there are buttons (you should know this from your site plan, I can't help you at all there it's your choice) or for a horizontal menu 1 column and as many rows as there are buttons.
Step 7: Adding the Menu Buttons.
There are a few ways to do this. If you want simple picture buttons (a clickable picture that looks like a button) Then you insert image as normal and for now that's all. later we'll add links to them.
If you want rollover buttons (the image changes when the cursor is over the button picture then you need to make to images for each button, say you have some nice dark grey buttons that you want to light up when the user puts the mouse on them then you make a second set of buttons which are lit up.
You then go to the add rollover image button in the toolbar (beside or close to the image button) and choose the dark one for image one and the light one for image 2, again leave the link for now because you havn't made a single page yet.
If you want flash buttons you need to click on to the media tab along the top of the button toolbar and click on the insert flash button symbol (flash logo with little bar in the bottom corner.), It'll ask you to save the document before going on so save it as 'base template' or something that you know means the main template for your site.
If you want rollover buttons (the image changes when the cursor is over the button picture then you need to make to images for each button, say you have some nice dark grey buttons that you want to light up when the user puts the mouse on them then you make a second set of buttons which are lit up.
You then go to the add rollover image button in the toolbar (beside or close to the image button) and choose the dark one for image one and the light one for image 2, again leave the link for now because you havn't made a single page yet.
If you want flash buttons you need to click on to the media tab along the top of the button toolbar and click on the insert flash button symbol (flash logo with little bar in the bottom corner.), It'll ask you to save the document before going on so save it as 'base template' or something that you know means the main template for your site.
Step 8: Creating the Template for Use.
Right we're nearly done with our template and can get started on our pages very soon, now it needs editable regions (Places for page content to go) We add these by right click and going to the template drop down menu in the right click menu, choose new editable region and a message will come up saying that the document will be converted to a template. This is good. Do this with the cursor in the table cells where content will be going (the ones under and beside the menu bar in mine)
Now save the document, close it and go to new file and click on the templates tabs at the top, your template should be there, make sure the update page when template changes box is ticked (saves alot of work later.)
Now save the document, close it and go to new file and click on the templates tabs at the top, your template should be there, make sure the update page when template changes box is ticked (saves alot of work later.)
Step 9: Add Some Content.
Make your pages add your content and remember to save them in the folders your made for pages and put your images into the images folder you made aswell.
Just repeat the last bit of step 8 about making the page from a template every time you make a page.
Note the fake content I used, it's called Lorem Ispsum and it's a story about good and evil in latin, web and graphic designers use this to give an idea of what the product will look like with real text. it can be found at Lipsum.com
Those blue boxes are the editable regions you have those too, I hope.
Just repeat the last bit of step 8 about making the page from a template every time you make a page.
Note the fake content I used, it's called Lorem Ispsum and it's a story about good and evil in latin, web and graphic designers use this to give an idea of what the product will look like with real text. it can be found at Lipsum.com
Those blue boxes are the editable regions you have those too, I hope.
Step 10: Now We Make Our Links.
Open up your template that you used (remember that tick box, now it comes in to play) At the minute your menu buttons are just pictures (if they're flash ones then look below) Now that you have pages they can be real buttons, whether they're rollover or normal pictures right click on your home button and go to change link or make link (depends on version) a dialog box will come up, just browse for the file of your home page and double click on it. now it's linked to the page, repeat for the rest of your buttons and save the document, if dreamweaver ask if you want to change all the pages based on the document say yes.
For flash button you'll remember we ignored the link bar so all we do is right click on the button and hit edit you'll be presented with the screen from before, simply hit the browse button beside the link bar and find your file.
Now you should have a pretty much working site, the next step is filled with a few tricks and things for photo pages etc. to make things easier and run better.
For flash button you'll remember we ignored the link bar so all we do is right click on the button and hit edit you'll be presented with the screen from before, simply hit the browse button beside the link bar and find your file.
Now you should have a pretty much working site, the next step is filled with a few tricks and things for photo pages etc. to make things easier and run better.
Step 11: A Few Tips and Helpful Ideas.
If you're working on XP (possibly vista included) there's an XP powertoy called image resizer that will allow you to custom resize your pictures by right clicking and you can do batches and add thumb to the end of each name. For a photo gallery use the thumbnails you made as the pictures on the main page and link them like buttons to the bigger picture file, this allows for way quicker loading and less gallery pages.
For pages with loads of content on them, it might be worth splitting it up page and previous page links, this is simple to do and all you do is link them to eachother and put the start one in as the template link or from whatever page it is linked from.
I'll come back and add more as I think of them or as people suggest them that's just the start.
For pages with loads of content on them, it might be worth splitting it up page and previous page links, this is simple to do and all you do is link them to eachother and put the start one in as the template link or from whatever page it is linked from.
I'll come back and add more as I think of them or as people suggest them that's just the start.
Step 12: Create an Index Page.
Right now most web hosts require an index page this can either be a replica of the home page called 'index.htm' (that's what you'll have to name it) or make a funky page with enter site on it (if you're good at flash you could have an animation to liven things up.
You must feel it getting close to that special moment.
Go here...
You must feel it getting close to that special moment.
Go here...
Step 13: Let's Get Us a Host.
Now you'll find yourself on the site I sent you to, I chose it because as far as free hosts go it's great and allows an awful lot of stuff, aswell as 8gig storage and something like 300GB bandwidth/month.
So follow the registration steps and activate your account, don't even look at that file manager we will not be needing that.
Right go to your account and take down the name of your FTP account, the username and the password (same as your password for the hosting account)
Got to sites, edit sites and choose yours go on to the advanced tab and go to testing server (I know mine's on remote info but testing server is the easiest way to upload the site), enter your information as shown in the picture.
So follow the registration steps and activate your account, don't even look at that file manager we will not be needing that.
Right go to your account and take down the name of your FTP account, the username and the password (same as your password for the hosting account)
Got to sites, edit sites and choose yours go on to the advanced tab and go to testing server (I know mine's on remote info but testing server is the easiest way to upload the site), enter your information as shown in the picture.
Step 14: Can You Feel It?
It's time to upload the site... You're about to have a website.
Go over to your site files/assets bar, it no doubt looks very different right now, click on the little drop down menu of views and choose testing server. Now dreamweaver has already saved your FTP password. Click on the connect to remote host button (the one with three funny shapes). once it says your connected click the put up files button., that's the button thats an upward pointing arrow. (For later use you can log on to the account and use get files to get files you may have lost on your computer.)
When you hit this it'll ask if you want to put the entire site up, damn right you do with all that work, for minor updates you can send replacement files instead. When it gets as far as 'index.htm' it will ask should it replace it, say yes otherwise your site will go down after 15 days, that's why we made our site first.
Go over to your site files/assets bar, it no doubt looks very different right now, click on the little drop down menu of views and choose testing server. Now dreamweaver has already saved your FTP password. Click on the connect to remote host button (the one with three funny shapes). once it says your connected click the put up files button., that's the button thats an upward pointing arrow. (For later use you can log on to the account and use get files to get files you may have lost on your computer.)
When you hit this it'll ask if you want to put the entire site up, damn right you do with all that work, for minor updates you can send replacement files instead. When it gets as far as 'index.htm' it will ask should it replace it, say yes otherwise your site will go down after 15 days, that's why we made our site first.
Step 15: Now You Want a Name?
So the Idea of being a subsite is affecting your ego, you have options, buy a domain name (not expensive without hosting and you can do .com .org .co.uk and .net choose the one that fits your name best.
Or for the guy who wants it all free just go to the dot tk site They simply mirror your pages so when you make that make your home page or your index page the site link. and choose say killerjackalope.tk got it?
Or for the guy who wants it all free just go to the dot tk site They simply mirror your pages so when you make that make your home page or your index page the site link. and choose say killerjackalope.tk got it?
Step 16: Any More for Any More?
Now this is in answer to a burning question and is being put in to the laser cutter contest (last minute) but if you have any question or want any extra explanations than just ask, if it's small I'll reply to you and if it's a good one then I'll add a step so everyone has the answer to your question.
Also I know it's from the ex tutorial but I'm sure this is what happens when you attempt to make a site in frontpage, it's awful and I'd rather tell you to steal dreamweaver then buy frontpage.
Next instructable, how to make funny hulk pictures.
Also I know it's from the ex tutorial but I'm sure this is what happens when you attempt to make a site in frontpage, it's awful and I'd rather tell you to steal dreamweaver then buy frontpage.
Next instructable, how to make funny hulk pictures.