Site
Now that we have created a web page, and converted it into a template, if we have any data on the original page that we want to keep, we'll need to move it into a page made using the template, so any site changes will also be reflected on that page in the future.
New Web Pages
Lets begin by making a webpage based on the template. Go to the FILE MENU and choose NEW.
In the New Document Dialogue Choose PAGE FROM TEMPLATE in the first column, your SITE in the second and your TEMPLATE from the third and click OK. Save this document in the main website folder you created earlier, the one with the CSS file and the images folder and call this page 'index.html' without the quotes. Do not save this in the Dreamweaver Templates folder, that's only for templates.
Now you should have a blank page, ready for content. If there are any changes you'd like to make to the header, you will not be allowed to in this page. You would have to open the DWT file in the Templates folder.
Moving the Data
I recomend opening the original page we created at this point, and then select all the information in the content area and COPY it. Switch over to the New Template based index and Paste the content into the maincontent Editable Region.
Then copy the sidebar information from the original page into the new template sidebar Editable Region.
Your new page should be exactly the same as the original except embedded into the template. You should Preview the page to make sure the transition worked properly. Test your links to make sure they all work properly.
Making More Pages
Now we have our first page, let's make the rest. Using the File > New from Template technique used above create a page for each of the links at the top of your page. So, create a new page from the template and save each one in the site folder, with a name to represent the link.
My site now has six html pages. START, TEMPLATE, SITE, GALLERY, GLOSS and LINKS. I've also deleted the original page we created as my new START page since it contains the same infomation and is not linked to the template.
Finishing the Template
Now that we have all the pages for the site, we can finish the links we made earlier in the navigation bar. Remember originally we just put a # sign in the LINK field to have Dreamweaver turn the list items into linked list items. Now we'll return to the Template, update the links, and when we save the file, Dreamweaver will automatically update the links in all of our vaious pages that were created using the Template.
Open up the template by finding it in the FILES PANEL and double click it. Click anywhere within the first link in the navigation bar on the page. Then in the PROPERTIES PANEL drag the Link CROSSHAIRS to the appropriate file in the FILES PANEL. Dreamweaver will insert the necessary code and file path into the Link field.
Repeat the process for each of the Links in the nav bar to each of the various pages in the site. Then Save the File.
After saving the template the Update Template Files Dialogue will appear. Genereally speaking you ALWAYS want to update any links you've changed on your template. Click Update.
Dreamweaver will run through the affected files and make the updates to the site. This usually doesn't take too long, and the dialogue will remain open until you click CLOSE. Verify it's finished by seeing the word DONE in the field after Show Log. You can close the template file now.
Open up one of your pages based on the template and preview it in the browser. You should be able to navigate between the various pages using the links at the top. After you've had fun with that, start filling in the content of your various pages Just click and type to add text into the content area of the site and drag and drop images from the FILES PANEL to add them. It's all pretty simple from here on out.
The next section of this site covers how to create Image Galleries, but the same techniques can be used to show off a variety of information as well. So of the concepts can be applied to catalogues or information packets.
