Dreamweaver Template Customization Guide
Customizing the News Scroller
- In Dreamweaver, open template.dwt (inside the Templates folder) in Code View.
- Delete all HTML code between the comment tags: <!--
Start Of News --> and <!-- End Of News
--> and place your HTML News text between them.
- Alternatively, if you would like to just modify the existing News items
to maintain the display format, do the following:
- Cut the code <!-- End Of News --></div></div> and paste it after <!-- Start Of News -->.
- You will now be able to view the news in the design view (that is, close
the code view window to see the existing news items in the design view).
- Now you can replace the existing news text/table with your own news.
- Once you have finished undo step 1. That is, cut the code <!--
End Of News --></div></div> (found after <!--
Start Of News -->) and place it after you news text/table ends.
Follow these steps whenever you need to modify the news.
- Important Tip: One easy way to maintain the News
(since it will probably change often) without needing to update the template
each time is to place the HTML of the news in a Server Side Include (SSI)
file. Thus only this file will have to be uploaded to your server with any
changes instead of all the pages using the template. Click on Learn
how to use Server Side Include files for our easy-to-learn tutorial
on using include files.
- Changing Position of the News Scroller Display Box - Locate the
following Style just above the <body> tag:
#NewsBox{position:absolute; width:210; height:170; overflow:hidden; top:195; left:12; clip:rect(0,210,170,0);
visibility:hidden}
You can change the position (top & left values) and dimensions
(width & height values) of the visible 'News Scroller'
Box.
Important: The clip dimensions should be
the same as the width & height of the news box (as shown above).
- Changing Position, Looping and Speed of the News Scroller Text - Locate
the following JavaScript between the <head> .. </head> tags:
startPos=30 // Starting Position of First line
in Pixels
loop=true // Loop Scrolling (T/F)
iSpeed=180 // Speed of scrolling: Increase to reduce speed
pxStep=1 // Number of Pixels per step
You can change the values for start position (startPos value), looping
of scroller (loop = true/false) and Speed (iSpeed & pxStep values) of the visible 'News Scroller' Text.
- Save the changes. When you save a template in Dreamweaver, a pop-up window
will appear where you will be asked if you want to update all pages using
the template. Click the Update. When all the pages are updated click
the Close.
SmartWebby.com Template Customization Guide Steps
