May
I Build 5 – Creating Webpage Template Using Dreamweaver
Posted in My Internet Life | No Comments »A web template is a tool used to separate content from presentation in web design, and for mass-production of web documents. It is a basic component of a web template system. Web templates can be used to set up any type of website. In its simplest sense, a web template operates similarly to a form letter for use in setting up a website. Source : http://en.wikipedia.org/wiki/Web_template
Example below showed how I build my simple webpage template (raz-veinz.com) © Mohd Razif Omar
1. Folder
Open Dreamweaver, first we need to create root folder (website’s project folder),
Click Site (Alt+s) –> New site…(n) –> Advanced –> Local info –> Site name : (Any name that you prefer) –> Local root folder : (Any location that you prefer) –> Default images folder : (optional)
–> Click OK (Enter)
2. Blank Template
So now, we are ready to make the template,
Click File (Alt+f) –> New (n) –> Blank template –> Template Type : HTML (HyperText Markup Language) template –> Layout : <none> –> Click Create (Enter)
Basically, The web page is then further subdivided into two main sections which are the ‘head’ and the ‘body’. The head section begins with the <head> start tag and terminates with the </head> end tag. Immediately following this comes the <body> start tag and just before the html end tag comes the </body> end tag.
The head section or document head has little content and mostly contains HTML coded instructions on how to title, categorize and ‘run’ the web page. The body section or document body on the other hand contains almost all of the content that you will put on your web page and this content —usually text but can also be pictures and sounds— is formatted using more HTML code. All text that you place outside of any angle brackets will become ‘visible text’ and will be displayed by your web browser on your web page. By placing that text in between the start and end tags of certain HTML elements, you can instruct a web browser where and how to display that text.
At the ‘body’ section, insert “Editable Region”,
Click Insert (Alt+i) –> Template Objects –> Editable Region ( Ctrl+Alt+v) –> Name: (Any name that you prefer) –> Click OK (Enter)
Editable portions of the template can be changed from page to page, allowing you to use the template for different pages on your website. Editable regions will appear wherever the text cursor is pointing, so move the cursor to the area you want to make editable.
Save (Ctrl+s) –> Save as: (Any name that you prefer) –> Click Save (Enter)
The file is saved in the Templates folder with a .dwt extension.
3. Title
Adding a title element to Webpage, This title is created using the <title>...</title> tags which are themselves always nested within the <head>...</head> tags. All text appearing after the <title> start tag and before the </title> end tag will be displayed as your web page title.
4. Meta Element
Used for a couple of different functions inside the HEAD section. For example, to make search engines like Google and Yahoo! or web browsers to know about important keywords inside the document such a page description, keywords, author of the document, last modified, and other metadata.
Some search engines will use the name and content attributes of the meta element to index your pages.
The following meta element defines a description of a page:
The following meta element defines keywords for a page:
The intention of the name and content attributes is to describe the content of a page.
To be continue…
