Image source: https://www.webmonkey.com/wp-content/uploads/2010/04/dw_cms.jpg
article 6/6
Open up Dreamweaver and as usual you will find your files and folders menu on the extreme right-hand side of your Dreamweaver workstation/interface etc.Click on your already built dreamweaver template ( dwt--dreamweaver template), and it will open up to reveal your formed table with its header image, and the navigation menu that you created in the last lesson, and follow the following steps :
1.On the third menu down, which is located at the top of your dreamweaver workstation, there is an icons menu with a hyperlink, email icon etc.Navigate to the editable regions icon, sub menu or drop down menu opens up and you are given various choices, click on editable region, and name your editable region body.Make sure that your cursor is flashing in the place that you want to place your editable region within your template page,( eg just below your navigation menu), whilst doing this and save changes.
2.As usual you will have your top control panel/navigation menu :
file
edit
view
insert
modify
text
commands
site
windows
help
Click on file---sub menu opens up---and click on new---another sub menu opens up and you will be faced with the following choices ( a ) blank page ( b ) blank template ( c ) page from template ( d ) page from sample ( e ) other.
Click on page from template and in the next box to it you will see a site box with all the different names of the sites that you have created ( hopefully at this point you have only created one ), and so click on it.
4.You should see a preview of your website now, and so just click on create.
5.Click on file again in the top menu bar ie
file
edit
view
insert
modify
text
commands
site
windows
help
and scroll down the sub menu until you come to save as ( not save,not save as template,but save as ) and click on it.
.A properties box will open up in which it will ask you to save an untitled document ( by default its untitled ).Erase the name untitled and type in index.html and then press save.You will notice now that in your files and folders on the extreme right-hand side of your dreamweaver workstation an index.html file has been created.This will represent the so called homepage of your website.
6.Again, repeat this process above by clicking on file in the top menu bar
file
edit
view
insert
modify
text
commands
site
windows
help
, and follow the same steps but instead of typing in index.html for the untitled document when you are asked to save it, type in aboutus.html ( this is the second button that you created for your navigation menu in the last lesson ).You will notice now that another file called aboutus.html has been created in your files and folders on the extreme right-hand side of your dreamweaver workstation. So we have now created two separate pages representing the first two buttons that you created in your navigation menu in the last lesson :
home
about us
8.Repeat the same process for all the buttons that you created in the last lesson, so that you will have a separate html page for every one of those buttons ie contactus.html, and so on.
9.Remember from the last lesson that we linked all the buttons that we created within the navigation menu to the template.dwt file.Well now we have to change this and link each individual button to their respective html pages : steps : (a).Click on the dwt.template file ( will be entitled with your chosen name ie : name/template.dwt ) within your dreamweaver workstation which, again, is located on the very right-hand side of your dreamweaver workstation---this will open up your dwt template. (b).Click on your home button and go to the properties inspector, which is located at the very bottom end of your screen ( remember the properties inspector reflects the structure of your template ), and you will see the word link written with a search box next to it and a folder icon next to the search box.This box should show the link which we inserted in the last lesson ie template.dwt.Change this to index.html by browsing through your folders and clicking on the index.html file of your so named website or just eraze template.dwt and insert index.html,and then just save the changes.When these changes are saved dreamweaver will automatically update every file associated with or created by the template. (c).Do this for every different button.For example the contact us button will be linked to the contactus.html file and so on, and just save all the changes.
In order to view what you have just done you can use the virtual internet icon to see how your website will appear when it is uploaded onto the web.This icon is represented by a small blue globe, which is located in the menu next to where you have the code view, split view, design view and title.
If you have done everything correctly all the buttons, when clicked on, should navigate to their respective pages, eg contact us button should navigate to the contact us page, about us button should navigate to the about us page, and so on.The fact that there is nothing in these pages at present is completely academic.
Thats it, you have created a fully functional structured website,and this structure represents the backbone of all websites on the worldwide internet.
In my next lesson I will show you how to insert text and images into your index.html page ( homepage )
signing out for now Brochure Website Design,Ireland
