loading
So I've previously written about this before, the old one is worth reading first, it contains instructions on photoshop and dreamweaver that this doesn't, however it misses a lot of points out compared to this one. 

These days there are tonnes of services for building websites with and there are also a lot of sites and communities well suited to those not wanting to go through the effort of building an entire site from scratch. 

If you just need a site to showcase your stuff then chances are you could put one together over an afternoon, for a more complex site it'll take more time.  

I have since revamped my website - it's now at http://killerjackalope.com/ 

My actual site is here - killerjackalope.co.nr
Which is a redirect of - killerjackalope.zxq.net

gh

Step 1: Tools, Materials, Skills

Tools
 - A computer running
      - Photoshop or your image editor of choice (you may need to download plugins to output                   HTML)
      - Dreamweaver or your editor and FTP client of choice
      - A decent internet connection
 - An email address, if you don't have one I doubt you'll make it through this
 - You'll likely need a camera
 - Pens and paper

Materials
- Content - I'll talk on this more later but you'll certainly need to fill your site with something
- Spare space on your HDD
- Time and patience.

Basic skills
- A basic knowledge of how to use your computer, the internet
- The majority of this requires very little coding knowledge, so don't be intimidated
- A sense of design
- Knowing how to use photoshop would be nice, paint.NET or GIMP

Step 2: Planning Your Site

Before you start hitting the computer, looking for design cues and knocking together ideas and templates, sit down with a piece of paper, work out everything you want in your site and how you'll get to it. 

My index page is the same as my home page, a personal choice, intro animations aren't me.  The top level pages - Home, Projects, Photography, About, Contact are all linked in the header - You can get to these from anywhere in the site. 

Coming off these are sets of pages, from projects each project has a page which can be gotten to from the projects page. (they're also linked in the sidebar of each project page but that's not relevant now) 

Below the contact page I've got pages for links - simply to represent that the visitor can go somewhere from there. 

This is a pretty standard and simple model, but it helps you work out what you want to put where in your site - it's also a useful way to make sure your site is easily navigable. 

Don't try and draw every link in, the problem is that creates a recursive and inifinite loop that makes dreamweaver's map view wet itself, never mind your piece of paper. 

Step 3: Design Decisions

Before getting in to colours, fonts and whatnot you'll need to consider a layout. 

How many columns will your site have? I went with three on the home, project and photography pages with images as links, my navigation bar is horizontal, along the bottom of the header.

You could also have a navigation menu that sits vertically along the left or right hand side like a column. 

My project, blog and photography pages have two columns - a main one with content and a smaller one on the right with an advert and appropriate links, in the blog page it has recent posts down the left hand side. 

The more columns and rows you have over the layout the more you risk a cluttered look, though I've went with quite a sparse and minimal design overall. 

Columns and rows can be brilliant formatting tools, you can add and subtract whitespace to make your pages look better, separate blocks of text and images, certainly take the time to experiment with them, sometimes adding a little cell that creates a holding space is the perfect thing to set two piece of content apart.

Step 4: Colours, Fonts and Imagery

This all depends on the kind of vibe you want your site to give off. 

Fonts

I've chosen two fonts over the site, one I really like called eight-one and for the content text a simple, readable Franklin Gothic Book. Your header and nav links can have a signature font, something you like that's eyecatching and a bit different, it should still be plenty readable though.

Your content font should be clean, very readable and attractive. 

At no point will you use comic sans or papyrus, just don't. 

Colours


You should stick to a few main colours, they should be complementary to each other and not too garish, my choices where white, black, red and a touch of grey. 

Imagery

In your header and background you can have images - well you can put them anywhere really, if you're going to have an image in your header I would suggest something abstract and interesting or something simple and representative of your site, like my ickle jackalope... 

Take care with your use of images, when done right they can be really effective, multiple images in a header doesn't work often but a big image indicative of the site can work really well, background images can be used really effectively too, however image choice is important, something natty or too busy can make for a visually confusing site. 

Step 5: Building Your Designs.

Fire up photoshop... 

Start knocking together some ideas.  

To do this make a new file, I use 1024 X 786 for this site, because it's 1024 pixels wide. Having the room below lets you get more of a notion of how your page might pan out. 

So make a new document as wide as the site. 

Fill the background with your background colour, now make a new layer and name the layer header. 

Pull out the selection tool and make a box the size you reckon your header will be, as a note it shouldn't be too big, my nav bar and header come in just shy of 150px together, I'd say 200-250 would be the upper limit on these... 

If your header's the same colour as your background still fill it in with the colour. That way it exists... 

Title your header, choose your font from the last step, you can make this quite large - it should be readable and recognizable over someone's shoulder at the least.  I'd try a few colours with the text layer before sticking to one. Place it where it looks good and link it to the header layer - we do this so that if you move one you move both, by linking layers together you can keep them in order easily. Alternatively you could use layer groups. 

Step 6: Building Your Designs Contd.

Add any images you plan to have in your header, try moving them about and test different positions - originally my jackalope was at the end of the header text, I think it ended up looking much better at the right hand side. 

Now set up your nav bar, new layer, select the area you want for it - fill it in with the colour you want, now make a text layer, choose your font and write in each of your links, try different orders to see what works best, your home link should always be first on the left, unless it's in a language where writing is read right to left. 

Do a little moving around, try and work out the best layout. For now save it as .PSD. 

Now start over - new colour combinations, slightly different layouts and fonts, make a few different templates. 

After making a few different ones, leave the computer and do something else for a while, even sleep on it - come back and choose your favourite, look for any ways it could be improved before committing... 

Step 7: Taking It From Photoshop to Dreamweaver

Or whichever programs you're making the jump with... 

Open up your favourite template and get to work with the slice tool, make a slice that encompasses the entire header. 

Now slice up your navigation bar, cut out each link as a slice, cut the ends either side too, to create a nice clean cutout - leave the big empty piece at the bottom there for now. 

To export the page you'll need to go to save for web, use gif settings (size is best smaller) and when you hit save make sure to hit the dropdown to save images and HTML. 

At this point you should have or make a document in my documents - name this folder "killerjackalope site" as an example, save the page in here, PS will automatically make an image folder, which is handy. 

Step 8: Making Your Site

Start your chosen editing and site management program. 

Now, go to site > New site, click it. 

Set your local root folder to the one you made and your default images folder to the one made for your base design. 

From now on, everything, every image and other file associated with pages in your site goes inside these folders, I make a folder for templates, one for pages and another called scripts for any scripts DW needs to make or any I need to add to pages. 

For my individual project, blog posts and photography pages there are subfolders in the page folder. 

My image folder has subfolders for project images, photography folders and a folder called inpage, which is where I keep one off images. 

Step 9: Your First Templates

Open that base page in your editor, delete the big blank square below the header for a start. 

Now for your main template I would suggest adding an editable region called content, saving it as a template and calling it at that, this is the template you can do whatever you want with.

Making some more focused templates makes sense - for example my blog template has a table in it, with a main column for content, there's an editable region there, an ad box on the right and below that links to all my recent posts, so each time I add a new one I only update my template. 

I have a similar setup for projects. 

For each type of template you'll need set it up before making your content pages, this will save you a lot of grief later on, you'll be able to say I need to update all my blog pages and do it with one template.

Step 10: Main Pages

You should make a new file from the appropriate template for each of your main pages - don't worry about adding content yet, we just need the files to be there. 

Now open the templates and link the files to the appropriate nav bar images. 

Save the templates and say yes to updating pages. 

On opening your pages you'll see the links have been added...

Step 11: Building Up Your Pages

You'll need time for this, don't just throw any old rubbish in to your home page, it should be a page full of the best of your site - the most popular or interesting subjects on your site. 

Here are some general content rules: 

 - Check your spelling
 - Use paragraphs
 - Break text up with appropriate images
 - Link content together, if you have a page on biscuits and another on tea then link them with a line like "check out this page about tea if you want something to dunk these awesome biscuits in"
 - You have use of italics, bold, subscript, superscript, everything, don't automatically resort to caps lock. 
 - Make your content interesting, but make it your own

Step 12: Index Page

You should make an index page in your root folder, it can simply be a carbon copy of the home page or you could have an intro animation or some such. 

To make a carbon copy of the home page simply open the home page, hit save as and browse to the site root, call it index and save, make sure to hit yes when it asks to update links - this saves you from having to change all the links relatively. 

Step 13: Adding Images and Image Management.

Images are a big part of a website, you should keep a handle on them. 

I'd suggest downloading an image resizing tool like PIXresizer to help with this. 

For my website the images are no wider than 720px, this is because my widest content columns are that wide, resizing them to this size is logical. 

When you resize an image in a WYSIWYG editor almost all of them display the image at the new size but your visitors still have to download a larger file to view it, which is hard on loading times and a waste of your bandwidth. 

Remember what I said before about the site folders? That's really important, anything outside it won't get zapped up to your site and you'll be left with a broken image link. 

Step 14: Embedding Video and Other Content

Embedding video, instructables and all content is pretty simple. 

Set your cursor to where you need the video in the design view, now flip to the code view and paste in the embed code for your content. 

When you go back to the design view you'll see a box where the video should be, should you wish to check it simply click on it and at the bottom in properties you'll see a box with a green arrow marked play - click that and the video should load up, it'll be rather slow inside the editor because it's not a web browser. 

If you need to move the video a bit you can just drag the box in design view now that it's there. 

Step 15: Setting Up Hosting and FTP

Setting up a host is pretty easy, I'm using Zymic at the moment, 110mb.com have died, which I used to use, ala my older website instructable

Once you get your details from them, they'll be displayed somewhere in your account you can get to business. 

Open the site pane and hit edit, now go to remote info and add your info in to the setup. 

You'll see below the box I mean, I've blanked certain fields out but it's a pretty simple login box. 

Step 16: Uploading the Site

Uploading your site is relatively simple, right click the site pane or click the put button with nothing selected. 

You'll get a prompt "do you wish to put the entire site?" hit yes and go for a walk or something. 

When it's done about ten minutes later you'll be able to see your site on the servers, it may take longer depending on how quickly they refresh, if it's not changed after half an hour empty your web cache and try then. 

Step 17: Additions and Little Touches

There are a lot of little things that can make a site a little bit more, you. You can also add social media plugins to your site to help advertise it, or add advertising.

 - Add a custom 404 error page

 - Add a facebook profile badge
 - Add a facebook like button
 - Add google adsense ads 

These three are essentially just setting up on their site and pasting code in. 
<p>seems easy so far</p>
<p>i am trying to get the hang of it</p>
Step 7 says &quot;open up your template&quot; What template? Where is it?
I meant the layout you'd been working on in your image editor, that was a failure of wording...
I need help with my website. I know you will laugh by my saying but I am a rogue personal trainer attempting to take fitness to the internet. <br>I started my website 4 months ago and am learning as I go. www.fitnesspatterns.com <br>My goal is to offer personal training instruction in photo and video format. <br>My website layout SUCKS because it is WordPress hosted. Can anybody offer me suggestions???? <br>Thanks bunches, <br>Justin
Check out my site www.thephotobank.webs.com
Dreamweaver is the best, that's how I got started myself.
Ahh, lucky you - I started with some text editing of pages just arsing about. Then horror of horrors. <br><br>Frontpage... <br><br>Dreamweaver was a godsend...
<br> This covers some of the design skills and process required to set up a website, but from experience having a site designed professionally is the way forward.<br> <br> (If you need any help or a quote for a website, please get in touch, I'm a <strong><a href="http://www.stevesims.com">uk website designer</a></strong> and have been for over ten years.)<br>
I'd certainly say that trying to make a website from scratch for commercial purposes shouldn't be taken lightly, with no experience it's very likely best to leave it to the pros. <br><br>I'd love any comments on the design itself, still a work in progress to date, there are always little things that need touched up. <br><br>I clicked on your link and was thoroughly impressed, I've seen a lot of companies producing sub-par websites or very dated looking ones but that portfolio is great.
I think a more accurate title would be &quot;Build your own website using Dreamweaver and Photoshop&quot;...<br> <br> Extra columns and rows can be extraordinarily helpful for visual blank space so that, for example, words in one column aren't butted up against the words in another column.<br> <br> More and more often, background images are being incorporated as part of the header (<a href="http://btemplates.com/2011/blogger-template-hippy-n-surf/demo/">example</a>) and shouldn't necessarily be avoided even on a minimalist site.
I am wondering if I could not do this with the gimp, bluefish, or a host of open source alternatives. Actually most of my website front page was done with a text editor and gimp. You can also add other software to make the site more powerful.<br><br>https://www.instructables.com/id/Uses-for-your-own-private-cloud/
You can use Microsoft word to make a website, I haven't read this yet so I'm not sure how it explains it, but in word you can build a page any way you wan't and it just shows up that way, although you don't get to do all of the deep coding changes.
Since I access my server (out of the way in a closet without a monitor) remotely via ssh, i just use vim from the command line to edit files. I keep a browser open and refresh it when I have made updates. Use sfp to transfer files (i.e. pics) over to the server. Once you have a bit if code as a base, it is not really that hard to do it this way. <br><br>w3schools.com and http://www.htmlcodetutorial.com/ were a big help to add to the base of code to work with.
Duh, I just realized you where listing photo editing software.
There are many ways to skin a cat which is why titles are so important.
Exactamundo! But I do like to look at other ways people do it, then apply those ideas with the tools I have. Photoshop has really helped me to learn the Gimp. So far I have not found anything the Gimp could not do. Need to learn bluefish, but using vim and or gedit (or notepad for mswindows users) to cut and paste code is so easy to do,
Gimps got a lot going for it, I use it a lot less than photoshop but only because I prefer the interface and working with large numbers of files is easier...
Good points, I think the header image bit needs reworded - I was trying to get across that lots of images or a cluttered image could be bad, maybe I'll grab some sample links and knock together some visual cues too. <br><br>Maybe another section on layouts and how to make use of them effectively should be added, it's pretty late now but I'll likely make a start anyway because I don't leave things alone... <br><br>More accurate but also unwieldy, it's also making me think I should add documentation for different program options.
How about &quot;Build a website with Dreamweaver&quot;? That's what most of it boils down to.&nbsp; Photoshop isn't really necessary - a reader would just need some sort of program for working with images to use on the site.&nbsp; You are using Photoshop in particular, but it could be GIMP, Picasa, Inkscape, etc.&nbsp; Expanding beyond Dreamweaver might as well be a separate Instructable.<br>
Aye, that certainly sounds better, I'm going to look at Gimp and check for that bit. <br> <br>Dear god I just checked out publisher, it's been years since I opened it up, new '07 edition and it's still every little bit as awful. Along with my foray in to the world of netobjects fusion I'm starting to believe that DW is the only way to make a site other than coding... <br> <br>In the morning I'll make all the changes, wrote up the bit on columns and the wording is a total wreck. <br> <br>By the way, what's that project? On 365 I saw what looks like plastering but something said fireproof about the material...
There are plenty of options for making a website such as blogging &quot;software&quot;, Joomla!, Drupal, etc., and then there are the open source alternatives to DreamWeaver.&nbsp; And of course, there's Flash and all that business.&nbsp; I wouldn't recommend trying to take all of that on.&nbsp; There are whole books dedicated to using DreamWeaver alone.<br>
I know of these books, had to read them for class, between them and generally cirruculum approved photoshop books I've never come across such bad instruction in most cases. <br><br>Hmm, a spammer said something about a Drupal extension for dreamweaver on my old 'ible. Added some notes about the columns and images. <br><br>I've been meaning to look in to wordpress, I've not been updating my blog because I'm doing it on the site but I'd rather incorporate my wordpress blog in to the site...
I'm a bit surprised that you didn't use WordPress as your site since there's so much you can do with it.
I guess I like making my own site better, though I know I could have added a lot of functionality for a lot less effort...
on websites all the time i always see them overlaying images over flash documents and such how do i do that?
Awesome instruction. Thanks!
Thanks, let me know if you run in to anything that looks like trouble...
Thank you ever so much for this and the other one, I can actually understand this, I am going to try doing it.
Brilliant - If you get stuck at any point let me know, can improve it and generally help. I'd love to be able to get together an 'ible that can definitively describe building a website because there's such a mess of incomplete or conflicted advice on it, my old 'ible included...

About This Instructable

154,068views

159favorites

License:

Bio: A Northern Ireland based maker with a propensity to cause trouble and freshly constructed family.
More by killerjackalope:Stroboscopic Zoomography Balsamic Chilli Sweet Potato Fries Wire Belt Hook for Drills 
Add instructable to: