Create Web Pages
How to create website pages from your template page
Contact us
Custom Search
|
Share this Page
Cool Clicks
Create Web Pages
Create website pages from a solid foundation
When you create web pages, its best to start with a well-sorted master page, because any errors in your master will be duplicated into all your created web pages.
The two real benefits of creating web pages from a master web page are that it saves you time and helps create consistency throughout your website.
Every web page you create will have this master page as its parent. So the children will all look the same and behave the same. (Quite unlike our children).
But before we beget all these children, we have to consider another influence on their appearance and behaviour, the external CSS style sheet.
External CSS Style Sheet - What is it for?
An external CSS stylesheet file is a most useful way of ensuring consistency of style throughout our website. Styles affect the way images and text are displayed.
For images, a CSS style can determine position, margins, transparency, and background repeats.
For text, a CSS style can determine font style, font weight, font size and colour, background colour, text alignment, indentation and margins.
Using CSS you can define as many different styles as you wish, each one tailored to a specific use for images, or headings, paragraphs, lists or any other text.
Creating an external CSS file
If you have already included any style information in your master page's HTML code, it would be better to replace it with CSS styles in a single, external CSS file instead (before all those children arrive!)
If you have not yet used a CSS style and don't have an external CSS file, create a style now, perhaps for your top-level heading, and save it to a new file with a .css suffix. That becomes your external CSS file. Then link this CSS file to your master web page. (See articles in Links/Resources for detailed help with this.)
If you're a bit rusty about CSS, you might revisit our tutorial First Steps: Learn Basic HTML / CSS and choose one of the CSS courses listed there as a refresher.
After you create your web pages from your master web page, you will still be able to add styles into your external CSS file, or modify those that are already there. (Any changes you make will be applied automatically throughout your site).
Why shouldn't we leave the CSS style instructions in the master page? Because after we create all our web pages, that CSS coding is going to be duplicated into every page. If you then decide you want to change it, you will have to change it in every page you created, instead of just one place.
Choosing a suitable font (or fonts)
If you have not already done so, decide what font you are going to use for your text and for your headings. Use one font consistently for all your headings, and use one font for all your paragraphs. That's two fonts at most.
On web pages, text looks best in simple fonts like Arial or Verdana which have no serifs. (This site is all Arial.) Headings may look better in a font which has serifs, such as Times New Roman, but it's largely a matter of personal taste. Most people agree that mixing a lot of fonts on one page looks tacky.
Making a Test Page
Create one test page from your master page. It could be your home page or some other page-to-be in your site. Customise the test page, including updates to links, headings, images and text. (Create a paragraph or two of text). Do not change your master page.
Using your browser, view your test page. How does it look? Are the proportions, font styles, colours and sizes just right? If not, continue to adjust your test page, and your CSS styles. As you work, carefully list any changes which you make to your test page which could have been made to your master.
When you have finished, look at that list of changes. If the changes will be required by all pages on your site, apply these changes to your master page now. Then make another test page from your updated master. Keep repeating this process until you are satisfied that your master web page is as good as you can make it.
Create web pages
Your aim is to arrive at a master web page which you can use to create all the web pages of your site, leaving you to just add content to each page. You don't want to make changes later, to each web page, which could have been made to the master page.
It's hard to do. I've always had to make changes to every page on my site after I copied them from the master, because I was in too much of a hurry to create my web pages! This site has over 40 web pages, so I could have saved myself a lot of work!
I hope you do better.
So, when you're ready, go ahead and create web pages from your master page, one for each web page you have planned for your website. Give each created web page a short descriptive name (all lower case and no spaces) to help search engines appreciate what's inside. The suffix should be .htm or .html.
Of course you can repeat this process, as often as you need to, before starting to add content to the individual pages. That's why we are going to run a site test next. If the site test reveals any problems, we can still fix them and rerun the create-web-page process.
That brings us to the next tutorial...
Links / Resources
Articles on using external CSS files:
Creating and Linking External CSS files
External Style Sheets
Build Site: Create Web Pages Top Prev Next: Website Test
Create web pages as needed from your completed master page