There are only 3 sections left on your web page that are currently not marked as editable. The "Header", which should contain your website's name and logo, the side navigation menu bar and your "Footer", which probably currently contain your copyright notice.
You will probably not want to mark the "Header" portion as editable, since your site name will be the same no matter which page on your site your visitor happens to be on.
Likewise, the navigation menu bar in your side panel should probably also be the same throughout your website. To do this, just select the year portion for example, select "" if that is the year you typed before , click "Insert Template Objects Editable Region" from the menu, and enter something like "Copyright Year" into the "Name" field. Save the template by clicking "File Save" from the menu. You will probably get a verbose dialog box popping up, informing you that putting an editable region like the "Page Title" , inside a block tag will prevent users from creating new blocks in the region.
Click "OK". If you have heavily customized your web page, so that you have even more sections that I did not mention above, you can make those sections editable using the same method described above. Give each section a different name, but make it descriptive of what it contains. The name is not displayed in your "live" website, but is shown in Dreamweaver CS4 when you edit your site, so the more descriptive the name is, the more help it will be to you when you maintain your site.
Before you go on to create a new page using the template, you will need to re-create your home page. Don't groan -- it's very easy this time. We need to do this because your current home page is not regarded by Dreamweaver as being created from the template you just made. 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.
Click "File New". The dialog box that you saw when you first created your website in Chapter 1 appears. This time, however, look for the item "Page from Template" in the leftmost column, and click it. You should now see the name of your site in the second column, the "Site" column, and the template you made previously in the third column "index".
A preview picture of your template appears in the window on the right. Make sure that there is a tick in the checkbox "Update page when template changes" in the rightmost column. Then click the "Create" button. A new unnamed web page, based on your template this time, will appear. This page should be identical to your index. All you did was to mark certain parts of the page as "editable". Click "File Save As In the "Save As" dialog box that appears, click the "index. Dreamweaver will issue a warning that the file already exists, and asks you whether you want to overwrite the file.
Click "Yes". With this step, you have replaced your old "index. As far as your visitors are concerned, your home page will not look any different in a web browser. However, internally, Dreamweaver will have inserted certain invisible markers so that it will be able to update the page whenever you make a design change in your template.
We will now proceed to create another 2 pages for your website: the "Site Map" and the "About Us" page. Unlike the creation of your Home Page in chapters 1 to 6, however, making these 2 pages will be much easier, since we've already done most of the hard work. Click "File New Then click "Create". Look at the "Title:" field of the Dreamweaver window, just above your web page see the picture below, copied from chapter 1, if you've forgotten where to find it.
Replace whatever text you have in that field with "Site Map". Alternatively, if you want the name of your website in the title as well, call it "Site Map - Example Company" where "Example Company" should be replaced by the real name of your site. Actually, you can call it what you want, but it's best to have "Site Map" somewhere in that title, since it's the name used by practically everyone for such a page.
Replace the text and pictures in your "Page Content" section with a list of links to the rest of your site. The easiest way is to select the existing content, hit the DEL or backspace key to remove it, then type every page name on a separate line.
Then select each line separately, and make them into links pointing to their respective pages. I realise that at this point in time, since you have so few pages, a site map probably seems very silly to you, especially since every page listed in the map is already linked to from your menu bar in the left column. However, the site map will become more useful to your visitors as you add more pages to your site.
It also adds professionalism to the site, and makes it easier for search engines to locate all the pages of your website. Nothing will appear to happen visually, but if you immediately type "Feedback" after that, you'll see that "Feedback" is placed in a new line below "Home" without an intervening blank line. For the curious, the reason for this is that the ENTER key creates a new paragraph, hence the extra blank line, while "line break" merely moves what follows to the line below.
Do not change the name, add spaces or change the capitalization: type the name as-is. This is because you have already used "sitemap. Note that this section is only optional if you have decided in the previous chapter not to insert an "About Us" item into your navigation menu bar. If you already have an "About Us" menu item, you should go ahead and make your "About Us" page now.
By this time, you should have no trouble creating new pages for your website from your site template. Create another one now. In the "Title:" field above your web page , enter "About Us: Example Company", replacing "Example Company" with the name of your website. V" or anything that you feel best describes the page you're making. Replace the "Page Content" editable region with whatever information you wish to publish about your company or yourself.
If this is a personal website, be circumspect about what you put here. You don't know who's going to be reading your website. It may be your future employer or some nutcase living in your neighbourhood.
Save the page as "aboutus. Again, this is the filename you used in your navigation menu and site map, so you should not get creative and use another name or your links will point nowhere. Now that your website is nearly complete, with multiple pages, it is no longer efficient to use the old "Site Put" method to publish your website. That method was useful when you only had one page to upload. When you have multiple pages, you will prefer Dreamweaver to automatically figure out which pages have been modified, and publish them for you without your having to manually open and publish every single one.
A dialog box, "Synchronize Files", appears. The "Synchronize" field should read something like "Entire 'Example Company' Site" where 'Example Company' is replaced by the name of the site that you gave Dreamweaver in chapter one.
The "Direction" field should read "Put newer files to remote". If any of these is not the case, click the down arrow key in the appropriate drop down box to select the correct option. Dreamweaver will immediately attempt to connect to your website to check the files that have previously been published. When it is complete, it will show a dialog box with a list of files that need to be uploaded. Unfortunately, this list of files includes your website template, which does not actually need to be published, so we will have to remove it from the list before we allow Dreamweaver to proceed.
A menu will appear. Click the "Ignore Selection" item in the menu. When Dreamweaver has finished uploading your pages, test your website using your web browser. This time, be sure to click the "Home", "Site Map" and "About Us" buttons in your menu bar to make sure that they lead to the correct pages. Your website is nearly complete. All it lacks is the feedback form, which we will create in the next chapter.
If at some future point in time, you feel the urge to redesign your website , you will need to do it by loading your template file and modifying it from there.
Let's briefly go through the steps for this, so that when you need to do it, you will know how to. You have more control over a Dreamweaver Template page. The content of these regions can be edited on pages using the template as a master page - so your menus, headers etc remain unalterable, whilst the actual content of the page can be chopped and changed. This is automatically added and means no prizes for guessing d ream w eaver t emplate.
The most useful working view in Dreamweaver is the 'Split' View, accessed by clicking the 'Split' button in the top left of the working document window figure 2. This view enables you to simultaneously view the Code as well as the rendered Design View. If you select a word in the Design View you'll see it highlighted in the Code View - and vice versa. The fact that you don't have to constantly flick between modes like in Adobe GoLive saves a great deal of time.
In Dreamweaver CS4 the code window appears at the top of the working window. This was changed to a side view in the subsequent CS5 version - which works better. I also find it useful when working in Dreamweaver to keep the Head Content visible, especially when working with templates:.
As you'll see in figure 2 above, sandwiched between the Code and Design Views is a horizontal area containing a few little icons. The ones that are encased in a blue box will be editable in pages that are based on this template.
Any icons outside the blue boxes will not be editable outside this template. We'll get into what the icons represent in a later article Anything that'll remain unchaged site-wide remain uneditable.
0コメント