View Demo (opens in a new window) | Bookmark & Share
FREEWebPlate is a completely FREE, Open Source
and Customizable PHP Website Template... Enjoy.
© 2010 FREEWebPlate.org. All Rights Reserved. | Valid CSS | Valid XHTML | Designed By: calmest_ghostDESIGN
Visit the FREEWebPlate Google Group for Help & Discussion | Looking For More Freebies?
Last Updated: July 22, 2010
FREEWebPlate has everything out-of-the-box (with a few extra popular features) needed for small to medium size websites. The hopes for this template, is that you'll take it and completely make it your own, or that it may serve as a good learning/practicing tool for web design; the following instructions (below features list) serve to help those that know little to nothing about web design and just want to put together a website for themselves with the template as is:
1. Download FREEWebPlate
2. Locate and unzip the "FREEWebPlate" Zip file with WinZip or your built in compression software.
3. Locate the unzipped FREEWebPlate folder and open it, then open up the images folder and replace the "logo" png image file with your own. The easiest way to do this is to create a png version of your logo and name it "logo" that way it will simply overwrite the other Logo file. Now, the current Logo place-holder image is 150 x 55 pixels. You'll want your own Logo to be roughly the same size (there's room to make it wider) so that it fits comfortably in the Header.
4. Open the stylesheet, the file named "style" inside the css folder, to do this, simply right click on the file and open with Notepad, the same will go for most of the other files. Now in this file you can control all the colors, fonts and font sizes. All the graphics in FREEWebPlate are partially transparent png images, so by simply changing the body, header, content or footer background colors you will change the appearance of the graphics.
5. Open the "contact-actions" file inside the php folder, this is the file that controls the contact form functions. You simply need to change youremail@gmail.com to whatever email you want to receive messages at. You'll also want to change the subject; Website.com - Inquiry to whatever you want.
6. Open the "footer" file inside the includes folder. You'll want to replace Your/CompanyName.com with your own information. Now, just before the body tag, you'll notice a large script, this is the Google Analytics script. I highly recommend that you first download and start using Firefox, then signup for Gmail (you'll need it anyways) and finally, signup for Google Analytics. You'll want to add your website to Google Analytics and then replace the script with your own, otherwise you can just remove the code.
7. Open the "header" file inside the includes folder. Replace Your/Company Name in the title with your own info. Near the bottom, you'll find that you can change the website and page link titles.
8. Next, should be the "index", "page2", etc. files. Open these files and simply change the page titles, descriptions and keywords and fill with your own content.
9. Once you've made your edits, upload all the files inside the FREEWebPlate folder (but, not the folder itself) to the root folder of your website (often called public_html) via FTP. If you do not yet have hosting, I highly recommend HostMonster, it's what this very website is hosted on.
10. Now, find the "robots" and "sitemap" files. I highly recommend that you create your own, for robots.txt, use this robots.txt Generator. For your sitemap.xml, use this sitemap.xml Generator. Then upload these files to the same folder as the rest of the files. ( please pay special note to at least the .htaccess file instructions in the additional tips below )
TIPS ONCE YOUR SITE IS FINISHED AND LIVE:
Submit your website to Google
Submit your website to Yahoo
Submit your website to Bing (formerly MSN)
Submit your website to DMOZ
Submit your website to hengine
Submit your sitemap to Google Webmaster Tools
Submit your sitemap to Yahoo! Site Explorer
Submit your sitemap to Bing Webmaster Center
HELPFUL NOTES: You'll notice that there are certain files that I didn't mention at all, and this is because for general use, changes to these pages really isn't required. For the RSS and "rss-feed" page, this is for those who will have large information websites, like news and blogs. No changes need to be made to the Google Search function, it will automatically recognize your website and search it once your pages have been indexed.
The ".htaccess" file is useful if you'd like to display your website as http://www.yourwebsite.com/ instead of http://yourwebsite.com/ no matter how users reach or search your website. Also, if someone makes a typo linking to or typing your website like; yourwebsite.com/conact it will redirect them to your sitemap instead of an error page. I've also added a feature to strip .php off pages to have cleaner URLs. If you do not wish to use this feature, you must delete and not upload ".htaccess" and you'll need to add .php back to nav links and other internal links or it will cause your website problems.
The "external" file is used for when you would like to open a link in a new window; simply add this tag to links just after href="" rel="external". External links are now set to automatically open in a new window, but you can still use rel="external" to open internal links like PDFs in a new window.
When you'd like to be able to enlarge images for example in a gallery, simply add rel="galbox" after href="" in image links.
NEW FEATURE: Social Network Links; set links to your LinkedIn, Twitter, Facebook and MySpace profiles. Open "header" from inside the includes folder and find the 4 spots; yourusername to change to your various usernames / profile names.
Note that your website will only be searchable when Google has indexed your pages. The primary goal with FREEWebPlate is to make it as simple as possible while still having desirable features without the use of a database. Again these instructions are very basic. There is a wealth of knowledge out there about Web Design, SEO (Search Engine Optimization) and Marketing. For more in-depth help, please visit the FREEWebPlate Google Group.
GOOGLE LEARNING LINKS:
Webmaster Guidelines | Search Engine Optimization
CODING / DESIGN LEARNING LINKS:
Learn XHTML | Learn CSS
CHECK YOUR WORK:
W3C XHTML Validator | W3C CSS Validator
FREEWebPlate is a completely table-less and valid standards-compliant CSS/XHTML strict website template.
This website template's purpose is to serve as a lightweight blank slate for any website, it's appearence is pretty bare bones for you to fully customize, the core importance of the template is the solid/clean code that brings it together with components of well accepted accessibility, cross-browser compatibility, user-friendliness and seo-friendliness.FREEWebPlate has everything out-of-the-box (with a few extra popular features) needed for small to medium size websites. The hopes for this template, is that you'll take it and completely make it your own, or that it may serve as a good learning/practicing tool for web design; the following instructions (below features list) serve to help those that know little to nothing about web design and just want to put together a website for themselves with the template as is:
Features List
- No Database Integration or Expert Knowledge Needed
- Most Features will Automatically Adapt to any Domain and Server without Any Changes Needed
- Dynamic for Easy Updates
- Standards Compliant
- Valid XHTML Strict
- Valid CSS
- Table-less
- User-Friendly
- SEO-Friendly
- Cross-browser Compatible
- Cross-screen-resolution Compatible
- Accessiblity for those Hard of Sight
- Language Translation (without leaving the site)
- Integrated Search (without leaving the site)
- Contact Form
- Canonical Links
- Sitemap
- RSS Feed
- Social Network Links
- Social Bookmarking
- External Links Automatically Open in a New Window
- Easily Setup Attractive Photo Galleries
- Ready to go for Embedding Google Webmaster Tools and Analytics
- Easily Customizable Template and Stylesheet
- The Best Part is that FREEWebPlate is completely Free and Open Source; No Copyright, No Comments, just Clean Lightweight Code
- There are plenty more features already and plenty more to be added in the future, enjoy
Instructions - 10 Steps
NOTE: Although it isn't necessary in order to use FREEWebPlate, it would be helpful if you knew a little about coding so that you do not incur any problems or break validation. There are many elements in this template that will dynamically adjust to you without any changes needed. However, there are elements that require you to make changes manually. These instructions are only meant to offer basic guidance, you may edit your template in any way you see fit.1. Download FREEWebPlate
2. Locate and unzip the "FREEWebPlate" Zip file with WinZip or your built in compression software.
3. Locate the unzipped FREEWebPlate folder and open it, then open up the images folder and replace the "logo" png image file with your own. The easiest way to do this is to create a png version of your logo and name it "logo" that way it will simply overwrite the other Logo file. Now, the current Logo place-holder image is 150 x 55 pixels. You'll want your own Logo to be roughly the same size (there's room to make it wider) so that it fits comfortably in the Header.
4. Open the stylesheet, the file named "style" inside the css folder, to do this, simply right click on the file and open with Notepad, the same will go for most of the other files. Now in this file you can control all the colors, fonts and font sizes. All the graphics in FREEWebPlate are partially transparent png images, so by simply changing the body, header, content or footer background colors you will change the appearance of the graphics.
5. Open the "contact-actions" file inside the php folder, this is the file that controls the contact form functions. You simply need to change youremail@gmail.com to whatever email you want to receive messages at. You'll also want to change the subject; Website.com - Inquiry to whatever you want.
6. Open the "footer" file inside the includes folder. You'll want to replace Your/CompanyName.com with your own information. Now, just before the body tag, you'll notice a large script, this is the Google Analytics script. I highly recommend that you first download and start using Firefox, then signup for Gmail (you'll need it anyways) and finally, signup for Google Analytics. You'll want to add your website to Google Analytics and then replace the script with your own, otherwise you can just remove the code.
7. Open the "header" file inside the includes folder. Replace Your/Company Name in the title with your own info. Near the bottom, you'll find that you can change the website and page link titles.
8. Next, should be the "index", "page2", etc. files. Open these files and simply change the page titles, descriptions and keywords and fill with your own content.
9. Once you've made your edits, upload all the files inside the FREEWebPlate folder (but, not the folder itself) to the root folder of your website (often called public_html) via FTP. If you do not yet have hosting, I highly recommend HostMonster, it's what this very website is hosted on.
10. Now, find the "robots" and "sitemap" files. I highly recommend that you create your own, for robots.txt, use this robots.txt Generator. For your sitemap.xml, use this sitemap.xml Generator. Then upload these files to the same folder as the rest of the files. ( please pay special note to at least the .htaccess file instructions in the additional tips below )
TIPS ONCE YOUR SITE IS FINISHED AND LIVE:
Submit your website to Google
Submit your website to Yahoo
Submit your website to Bing (formerly MSN)
Submit your website to DMOZ
Submit your website to hengine
Submit your sitemap to Google Webmaster Tools
Submit your sitemap to Yahoo! Site Explorer
Submit your sitemap to Bing Webmaster Center
HELPFUL NOTES: You'll notice that there are certain files that I didn't mention at all, and this is because for general use, changes to these pages really isn't required. For the RSS and "rss-feed" page, this is for those who will have large information websites, like news and blogs. No changes need to be made to the Google Search function, it will automatically recognize your website and search it once your pages have been indexed.
The ".htaccess" file is useful if you'd like to display your website as http://www.yourwebsite.com/ instead of http://yourwebsite.com/ no matter how users reach or search your website. Also, if someone makes a typo linking to or typing your website like; yourwebsite.com/conact it will redirect them to your sitemap instead of an error page. I've also added a feature to strip .php off pages to have cleaner URLs. If you do not wish to use this feature, you must delete and not upload ".htaccess" and you'll need to add .php back to nav links and other internal links or it will cause your website problems.
The "external" file is used for when you would like to open a link in a new window; simply add this tag to links just after href="" rel="external". External links are now set to automatically open in a new window, but you can still use rel="external" to open internal links like PDFs in a new window.
When you'd like to be able to enlarge images for example in a gallery, simply add rel="galbox" after href="" in image links.
NEW FEATURE: Social Network Links; set links to your LinkedIn, Twitter, Facebook and MySpace profiles. Open "header" from inside the includes folder and find the 4 spots; yourusername to change to your various usernames / profile names.
Note that your website will only be searchable when Google has indexed your pages. The primary goal with FREEWebPlate is to make it as simple as possible while still having desirable features without the use of a database. Again these instructions are very basic. There is a wealth of knowledge out there about Web Design, SEO (Search Engine Optimization) and Marketing. For more in-depth help, please visit the FREEWebPlate Google Group.
GOOGLE LEARNING LINKS:
Webmaster Guidelines | Search Engine Optimization
CODING / DESIGN LEARNING LINKS:
Learn XHTML | Learn CSS
CHECK YOUR WORK:
W3C XHTML Validator | W3C CSS Validator