Share Email. Top clipped slide. Download Now Download Download to read offline. Sutinder Mann Follow. Dtp Using Publisher Dtp Basics And Design Rules. Optimising Graphics. Using Templates2. Cascading Style Sheets.
Creating Forms2. Related Books Free with a 30 day trial from Scribd. Related Audiobooks Free with a 30 day trial from Scribd. Elizabeth Howell. How to use a Template in Dreamweaver CS3 1. Diagrammatic Representations of what they do. Consider updating loads of pages Both do a similar Job but Templates are easier to set up and use and do not involve adapting any code.
A document that is created from a template remains connected to that template unless you detach the document later. You can modify a template and immediately update the design in all documents based on it. Templates 7. Insert Table and reduce Border 8. Modify Table and Add Website Banner 9. Set up according to your Design Plan for House Style Select the required font for the Heading and make it Editable.
Here is the final Template. Note the Banner region remains fixed. Page based upon Template as follows Another Template Pages from Template. Heather Carter Dec. Kapil Mohan Feb. Technical Architect at SlideShare. This chapter assumes that you have completed all the steps mentioned in the earlier chapters. To make it easier for me to refer to different elements on your web page for this tutorial, I shall use the sample page shown in the picture below as a point of reference.
Your page will of course look different. However, since both the sample and your page were created using the same procedure given in my Dreamweaver tutorial , the basic layout of the page should be fairly similar. Start up Dreamweaver, if you have not already done so. Open your index. Click "File Save as Template" from the menu.
That is, click the "File" menu, and when the menu appears, select the "Save as Template" item. In the dialog box that appears, click the "Save" button.
Another dialog box will appear asking you whether you want to update links. Click "Yes". Dreamweaver will create a new folder in your computer's website folder called "Templates". If you look at the filename displayed at the top of the window, you will notice that Dreamweaver has replaced the current file with the template file.
This is what we want, since we need to configure the template. By default, Dreamweaver creates a template that has no editable regions. That 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. Select the large bold text "Welcome" in the main content section of your document by dragging your mouse over it. Your page may not have the word "Welcome" of course, but if you look at the picture above, you should be able to locate its equivalent on your site. We will mark this text, "Welcome", as editable so that it can replaced with the title of whatever page you are creating.
A dialog box will appear. Type "Page title" into the box and click OK. Dreamweaver marks that section with a visual cue to show you that it is editable. Select the paragraph under that page title and mark it editable as well. When prompted for a name to give that editable section, supply it "Page description". Since the "Products" 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 "Products" subtitle, the picture underneath and the block of text beside the picture with your mouse. You can give this section whatever name you wish, since the content of your block will differ from my sample page. 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. At present, your home page, the index. Since we want Dreamweaver to handle all the mundane and tedious job of updating all our pages every time we change the design of our site, we need to associate the page with the template. The least troublesome way to do this is to overwrite your old index.
You can do this with no loss of data since your template was created from the index. Click "File New". A dialog box appears. You saw this dialog box in chapter 1. This time, look at the left column and click "Page from Template". The middle columns will show information about the template you created earlier, and the rightmost column will show a thumbnail picture of your template.
Make sure that the checkbox for "Update page when template changes" is checked. Click "Create". Click "File Save As". A dialog box opens allowing you to specify the filename. Enter "index. Click "Save". A message box appears asking if you want to overwrite the existing file.
That's it. You have replaced your old index. Many sites, especially companies selling some goods and services on the Internet, have a page known as an "About Us" page.
This page basically tells the customers more about the company and its business. On some personal sites, the "About Us" page contains information about the author of the site. It may even contain a brief resume or curriculum vitae CV.
Click "File New" again and select "Page from Template" if it is not already selected. Once again, click "Create". Above your document, in the line with "Code", "Split", "Design" and "Title", replace the existing text in the "Title" field with "About Example. In the editable region which currently holds "Welcome" or the equivalent on your page , replace it with "About Us". In the editable region labelled "Page Description", enter whatever information you wish displayed about your company or yourself.
Note that you are not restricted to a single paragraph. For the purpose of this tutorial, I have used the following text. However, I strongly suggest you create your own content. There's no point waiting till the end of the tutorial before starting. With this chapter, you will have completed most of your website except for the "Contact Us" feedback form page.
Example Company was created in some century in some country for the purpose of something. At the moment, what that purpose is eludes us. We do know however that we exist. Or do we? In any case, if you are reading this and are wondering what manner of company or website this is, know this: you are not alone.
Seriously, this is just an example site created with the help of the Dreamweaver CS3 tutorial on thesitewizard. If you have defined an optional region like I have with the "Products" listing see picture near the start of this article , and you wish to turn it off, select "Modify Template Properties".
A dialog box appears showing you the optional region you have defined. Select it if it is not already selected by clicking on its name.
0コメント