Official Raz Veinz Blogsite

I Build 5 – Creating Webpage Template Using Dreamweaver

Posted on Monday, May 28th, 2012 at 4:02 pm

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:

<meta name=”description” content=”Raz Veinz Art” />

The following meta element defines keywords for a page:

<meta name=”keywords” content=”freelance,illustrator,drawing,art,raz,veinz,Mohd Razif Omar,graphic design,illustration,web design,” />

The intention of the name and content attributes is to describe the content of a page.

To be continue…

You can leave a response, or trackback from your own site.

Leave a Reply

*