Techniques you learn here is only applicable to this site. I am giving you full permission to copy any template on this site for exercise or for use on your website.
DO NOT APPLY THIS METHOD TO ANY OTHER SITE! I can only give you permission to steal from this site...
If you liked a layout there are 2 ways to get it:
- Write in for permission
- Buy one that is similar and customize it
Learn how to view page source
Whether you decide to use any template on this site or not, this is one skill you'll have to learn. Make it a habit. Whenever you're looking at a webpage, view the source code after reading each page.
That gives you an idea of how each page is coded.
I cannot over emphasize this. Especially when you'll going to be a site owner and be your own webmater. Develop this habit: After reading/scanning a page, take a peek at the source code.
The step-by-step guide to copying a template from this site:
The steps in short:
- View page source
- Control A to select all
- Copy - Control C
- Open notepad
- Paste to notepad
- Save file as .html
- Come back to the view source page
- Click stylesheet - .css
- Control A
- Copy
- Paste
- Save as css file
Steps in Detail
1 View Page Source
You do this with the browser while viewing a webpage. In this case, you are browsing this page.
- If you are using Chrome, right click, and click view page source.
- If you are using Firefox, right click, and click view page source.
- If you are using Internet Explorer, right click, and click view source.
2 Control-A
Press Ctrl-A. Press the button CTRL, hold and press A. That will highlight all the text on the page.
3 Copy All
Press Ctrl-C to copy all the highlighted text.
4 Open notepad
If this is the first time you open up Notepad, you have to locate it at Start -> All programs -> Accessories -> Notepad
If you had previously opened up Notepad, you should be able to locate it once you hit Start. I suggest you right-click on the Note and choose "pin to start menu." That will make life easier.
5 Paste all
After you have opened Notepad, press Ctrl-V. That is to paste all the copied text onto the blank Notepad you'd just opened.
6 Save file As
Once the source is copied onto a notepad, hit CTRL-S. The dialog box will ask for the type of file to be saved. You'll want to save it as .html, but before you do that, ensure that it the folder you want to save your template. Else direct it to a new location or create a folder for this purpose.
For this exercise, let's save it at:
c:/mytemplate/2columntemplate.html
or
d:/mytemplate/2columntemplate.html
7 View page source again
Go back to the view page source again. The page should still be highlighted. Just click any blank space and it should go away. You may also choose to ignore it.
8 Stylesheet
This time look look for the line :
<link rel="stylesheet" href="../_css/webscom141.css" type="text/css" media="screen" />
In Chrome and Firefox, it is a clickable link. Click it and you will be brought to the css file.
9 Control A again
You are now familiar with this step - Press Ctrl-A
10 Copy
Ctrl-c to copy all the CSS codes.
11 Paste
Open another notepad and press Ctrl-V.
12 Save file as
Save the file with extention .css
Do this step carefully.
You won't want to save this file as websidy.css as it means nothing to you. Suppose you saved it as style.css, go to the html file you previously saved and change it to style.css
<link rel="stylesheet" href="css/style.css" />
Now, we are not finished yet. Look at the line carefully. It says that style.css is saved in a folder css, which is the subfolder of /mytemplate/.
It means if your html file is saved at:
c:/mytemplate/2columntemplate.html
you css file will be at:
c:/mytemplate/css/style.css
If you had saved the css file in the same folder as your html file, then the path would be:
<link rel="stylesheet" href="style.css" />
Is downloading a template easier?
I could make it easier if I prepared all the templates in a zip file for you to download. Once you unzip the template file, all the files will go neatly into its respective folders. By that's too easy for you.
Do remember that I am providing you with this step-by-step instruction so that you could learn how to do it yourself and not depending on someone else. Sure, you will make mistakes and will have to work through all the steps again should you gotten it wrong. So what if you've messed up. You will acquired the skill eventually.
Enjoy: Super Blogger