Background Info and Basic Directions
WAIT!!! Do NOT use a template until AFTER the midpoint of the class. It is important that you go through all of the stages of setting up a Web page and a Web site first. You must understand HTML code and CSS styles before you are able to make all your desired modifications to a fully customizable template. You will cripple yourself in this class if you use a template before the Midterm. I can recognize most templates and I will not accept your early work if you use a template for the first half of the course.
It is relatively easy to copy the content (the text and images) from your first 8 weeks of work into a new template.
Also sometimes, it is easier to just start over; what may have taken 8 weeks while you were learning may only take a few hours to completely redo - and it may end up much better.
You can use one of the free template sites listed below or do a Web Search on "Free Web Page Templates." You may choose to use all or only part of the template - such as only the Masthead or the Nav.
Use a template that can be easily modified using the assignments given and tools provided in class - so that the template is truly customizable - ANY way YOU want.
What I would suggest if you use a free online template is:
Preview it, Copy it, and Save it - so you know exactly what you have.
- Make a folder called YourNewSite and make an images folder inside YourNewSite
- Choose the option to Preview the online template
- Right-click and View Source - if the code looks like the "well-formed" code we have used in our class -
Copy the source HTML code, paste it to Notepad or Visual Code, and save it to the YourNewSite folder - Right-click and View Source and double click the css file to open it. (The CSS file link is in the <head> section.)
A sample is: <link href="abcSite.css" rel="stylesheet" type="text/css"> - Select All (Ctrl + A) and Copy (Ctrl + C) the css stylesheet.
- Paste it to Notepad or Visual Code, and save the CSS file to the YourNewSite folder
- Right-click on any images that you may want to temporarily use - and Save As to the NewSite images subfolder
(You may have to use the CSS file to find the image name and path of some images, especially Nav bar images.) - Finally, someplace on your page - give credit to the person who gave you the template:
Ex: <!-- Original template from http://NiceGuy.com, but modified by me --> - Now customize the template to do what you want - experiment and play!
Some Free Web Page Template Links |
|
Do not pick the first template you like - browse through several sites first so that you might pick the best template. Look for more "Free Web page templates" on the Web. |
|
| W3Schools Templates/ | <!-- Always a great source of information --> |
| Bootstrap Templates/ | <!-- Excellent templates --> |
| 2820Web/SamplesCSS_Styles/ | <!-- Simple all-in-one CSS code by F J Winters --> |
| http://www.steves-templates.com/ | <!-- A favorite: clean, simple, well-formed code --> |
| http://www.freewebsitetemplates.com/ | <!-- Stylish --> |
| http://www.oswd.org/ | <!-- May need to use Developer tools to see CSS --> |