TOPIC:
DIY - Everything about creating a website using templates
2 / 3 pages
Step 2: Create a site in Dreamweaver
Firstly, define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar and click "New Site...". A dialog box will appear with words "Site Definition for Unnamed Site 1".
At the top of the dialog box is the "Basic" tab. Click on it to select it.
In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. If you are not sure what name you want for your site, use your domain name or any name you have in mind for your new domain name.
Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", your website address will be "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.
Click the "Next" button at the bottom of the window to proceed. Accept the default "No, I do not want to use a server technology" for now.
The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on your own computer. If you don't know what to do here, just accept the default.
When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "Done".
Step 3: Creating template in Dreamweaver using a prebuilt web page.
To make it easier, you may like to download this template beautycompany.zip. Start up Dreamweaver and open the file index.html. Index.html is a general page, which is often referred to as main page when someone type in your domain name in a browser. Save this as a template using Dreamweaver by clicking "File | Save as Template". A dialog box will appear asking you whether you wish to update links. Click "Yes" and Dreamweaver will create a new folder in your computer's website folder named "Templates".
The filename displayed at the top of the window showed that Dreamweaver has replaced the current file with the template file, which needs to be configured.
Dreamweaver by default creates a template that has no editable regions. Editable region is when you create a page based on the template you just saved, you will not be able to change anything on that page. To fix that, we will need to specify areas of the template that can be modified.
Type in the word "Welcome" with a large bold in the main content section of the document and mark this text, "Welcome", as editable so that it can be replaced with the title of page being created.
Select "Insert | Template Objects | Editable Region" from the menu. Type "Page title" into the dialog box appeared. Dreamweaver marks that section with a visual cue to show you that it is editable.
Next, select the paragraph under that page title and mark it editable. When prompted for a name to that editable section, type in "Page description".
As the "Page description" subtitle and the section that follows may not be present in the other pages of the website, we will mark the entire of this section as an "Optional Region". To do this, select the entire block comprising the "Page description" subtitle, the picture underneath and the block of text beside the picture with your mouse. Click "Insert | Template Objects | Optional Region". A dialog box will appear. You can give this section whatever name you wish. If in doubt, just accept the default name given.
Save the template by clicking "File | Save" on the menu. You will be prompted with a message that putting an editable region in a block prevents users from creating new blocks in that region. Click OK.
