You can see my outcome here:
http://template72test.zymichost.com
I have used Template #72 From Zymic's Free Templates as it is the most popular and my favorite...However you can easily do the other templates using this tutorial.
For this I am using:
Adobe Dreamweaver CS3 (Don't have it, Download a trial Here)
Adobe Photoshop CS2 (CS3 Will work, Download a trial Here )
Filezilla FTP Download Here )
Step 1 : Setting up
Before you go making pages you need to edit the navigation and a couple other things.
Now open up index.html in Dreamweaver:
Screenshot
And go to the Design Viewer
Screenshot
Now with your curser highlight the slogan
Screenshot
Type what you want to put there.
Next we are gonna do the navigation, Highlight the Home part and select properties
Screenshot
Type index.html
Screenshot
Now for other ones just do the same thing and put the pagename then .html after it for the link.
Screenshot
Then highlight where it says Latest Article Headline and type what you want to go in that header:
Screenshot
Do the same with the text in the content boxes
Screenshot
Now click to view the code and go to around line 18
And delete the following:
Screenshot
That will remove the login box at the top of the screen...Unless you have a need for users to login, in which case you will know enough to do that yourself.
Now go around and do the side navigation the same way I showed you on the top one and do the side boxes just like I showed you on the main boxes. Also edit the footer and add your name in (Leaving the Zymic Link in!)
Now that index.html is ready we are going to make our other pages by copying and pasting the index.html page:
Screenshot
Paste:
Screenshot
And rename them according to what you put for your page name (Do not put .html after it, just page)
Screenshot
Screenshot
And here is what my folder looks like now that I have all my pages renamed.:
Screenshot
Now go through and put whatever content you want on all the pages.
Now lets install the fonts used to make this template...First open up the folder in the template root named Fonts and now go to Control Panel
Screenshot
Go to the fonts folder:
Screenshot
Position your windows like this and select all of the fonts by clicking and dragging your mouse curser:
Screenshot
Now click and drag the icons into the fonts folder like this:
Screenshot
The fonts will automaticly install now and after that you can close the fonts window
Now go to Photoshop Files + Blank Image Files folder and open up top_logo.psd into Photoshp
Now since you probubly won't be using the Register and forgot password parts you can take them off by clicking the little visibility eye:
Screenshot
Do that same with Forgot Password and register text layers
Now with your text tool modify the Sitename text to what your site's name is and the slogan to your slogan and click the visibility eye on layer two, its a text shine layer and will not look right on your text, If you wish to have a shine on your text use This Zymic Tutorial But its not necessary to get your site up, and can be added later on...Now save the file in your images folder as top_logo.gif, and when it asks you if you would like to overrite it say yes. now save your top_logo.psd and you now have your top logo done.
Now for uploading to your Zymic Hosting Account, if you do not have one sign up for one on the main site.
Open up filezilla, fill out the quick connect and connect like this:
Screenshot
On the left is what is on your computer's harddrive and on the right is on Zymic's Servers.
On the left navigate to your template folder, click and drag to select all, and right click then selet upload:
Screenshot
You should now have your site uploaded and ready for you to start adding things to it, You can see what mine looks like:
http://template72test.zymichost.com
I will be making a tutorial soon for those who want:
A news system
A hit counter / other statistics
Affiliates System
Forums and how to let users login on the front page (Using text boxes at top)
and how to optimize your navigation, header, and sideboxes changing process using php include...
Let me know if you have any problems or don't understand something in the tutorial by replying here