Step 1: Tools, Materials and Basic Skills.
- 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)
- 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
- 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
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
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
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...
Step 6: Making the Template Continued. the Layout
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.
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.
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.
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.
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.
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.
You must feel it getting close to that special moment.
Step 13: Let's Get Us a Host.
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?
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?
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?
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.