loading
Picture of How to Build your own website
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:...
 
Remove these adsRemove these ads by Signing Up

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

Step 2: Let's get started

Picture of 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.

Step 3: Starting the site

Picture of 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.

Step 4: Lets get stuck in then

Picture of 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)

Step 5: Making the template...

Picture of 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

Picture of 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.

Step 7: Adding the menu buttons.

Picture of 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.

Step 8: Creating the template for use.

Picture of 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.)

Step 9: Add some content.

Picture of 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.

Step 10: Now we make our links.

Picture of 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.

Step 11: A few tips and helpful ideas.

Picture of 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.

Step 12: Create an index page.

Picture of 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...

Step 13: Let's get us a host.

Picture of 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.

Step 14: Can you feel it?

Picture of 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.

Step 15: Now you want a name?

Picture of 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?

Step 16: Any more for any more?

Picture of 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.
1-40 of 62Next »
Drupal Dreamweaver extension for theming
Check our extensions and tutorials to edit Drupal themes in Dreamweaver http://themegenie.net/
bigfootduck7 years ago
emails r also free at yahoo.com
killerjackalope (author)  bigfootduck7 years ago
Yahoo are really spam susceptible...
u are rite. i use gmail :D
bdblock946 years ago
I cant find the "sites" link youre talking about
conrad24686 years ago
ok i want to make a website that will allow you to buy time slots to feed fish in my tank can you help me with that? cause its gonna require some code....maybe
killerjackalope (author)  conrad24686 years ago
I don't quite understand what you want to do, are you wanting to sell people feeding time or what?
oi plans changed ok here it is people pay to see the fish get fed the people who dont pay get an "off line for feeding if you want to see the fish get fed buy a time slot" message so only people who pay can view the camera @ say 12-12:15 only during feeding...i need a fullscreen mode so it can be as original as the fireplace on dvd if this still complicates you let me know and ill try harder..
lol.
What undoable?
what are you talking about?
I really have no idea
lol
bounty10126 years ago
I need the link to download dreamweaver
killerjackalope (author)  bounty10126 years ago
It's on macromedia but you only get 30 days, unless you buy it or somehow enter the correct keys without using such evils as a KEYGEN...
Im just going to use google pages but the link to download would be nice and for some reason I cant download it.
this might seem stupid, but... what is a flash button?
killerjackalope (author)  bobo_the_clown6 years ago
A flash button is a simple button made in flash, they can have fancier effects and animations as they're made as animations...
Charger_067 years ago
what is the web site where u get the free web hosting
killerjackalope (author)  Charger_067 years ago
110mb.com It gives you 5GB storage and 300GB bandwidth/month and it's fast and doesn't seem to go down much
Thanks! I've been looking for a good one for a while now
killerjackalope (author)  LinuxH4x0r7 years ago
Well I hope to see a good site from you soon...
half assed one right now

http://photosbycyrus.110mb.com

How did that tk thing work? I tried and it didn't let me (it has the picture with the word, and it doesn't like me)

Thanks
killerjackalope (author)  LinuxH4x0r7 years ago
You make your .tk domain thing, the name bit that is and simply add the URL of your homepage, it seems to be a litle bit funny, mine used to navigate off the .tk on to the actual site, linking tot he index page helps sometimes, if you want I'll set it up for you...
Yeah, that would be great. It didn't like the captcha (? is that the right word for the picture of the letters?), and wouldn't let me make it. Thanks so much!
you can use co.nr
cool, thanks!
killerjackalope (author)  LinuxH4x0r7 years ago
umm PM me your email and details of the account you want...
If you are partial to scripting in PHP, 110mb.com offers it too. Doubt you will find a free one that allows you to script in .NET or ASP.
killerjackalope (author)  blodefood7 years ago
They let you script in alot of languages and allow advanced SQL's but you have to activate them, not at any cost it's just them keeping server demand acceptable.
do u have any more cause this one don't work i cant fill out the registration form or will u make me and account
killerjackalope (author)  Charger_067 years ago
sure can you giv me an email and you'll get the confirmation form (just PM the address to me and if you want legit the name of you and adress... not worth the bother...) What do you want it to be called ?
bdblock947 years ago
you can also upload your own
killerjackalope (author)  bdblock947 years ago
Oh right they didn't have that option before when I last used them... By the way there's a reply button at the bottom right of comments, otherwise people wont know you replied, I knew because this is my 'ible but in future the reply button is the way to go....
bdblock947 years ago
you can also use freewebs.com
killerjackalope (author)  bdblock947 years ago
Aye but they make you use templates....
V-blue7 years ago
Hey where do i get dreamweaver?
killerjackalope (author)  V-blue7 years ago
Macromedia, it's not a free program unlesss you use certain downloading services...
like their own site, you can get a pretty full featured trial
killerjackalope (author)  theburn77 years ago
Aye for 30 days...
1-40 of 62Next »