Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

How to make a scrolling Web Page in Dreamweaver CS4


Share this Dreamweaver Article:

In this Dreamweaver Tutorial we are going to make a scrolling web page which is a web page with scrolling text and a non moving background. So when you scroll down the page, the text will move up leaving the background stead fast in position. Take a look at a finished Scrolling Web Page.



We can make a scroll with page effect by using CSS styling to make the background stay in a fixed position while a div scrolls with the page. The scrolling code needed to make this effect work is one particular line of code so making the text area scrolling will be so easy to do! Ok let’s get started and make some scrolling text.

If you prefer, you can watch a Dreamweaver Video Tutorial explaining how to create a scrolling text web page.

If you would like to download the exercise files to make the scrolling page effect work then click here. It will open a zip file which should be extracted to your desktop or suitable location. We will be defining a new site in Dreamweaver so will need to know the location of the files.



If you aren’t using the exercise files then you can use CSS styling to color your page design.

Scrolling Web Page - How to use the Exercise Files

How to Download the Files

  • click on this link to download the Scrolling Page Example and Exercise Files
  • Create a folder on your desktop or suitable location and extract the zip file into the folder
  • Define a new site in Dreamweaver and call it 'scrolling page'. show Dreamweaver the location of the root folder and define the images folder too.

Defining the site root

Whats in the Free Download Zip File?

whats in the zip file


In the download file are a Funky green background image that we will use to style the body and a blue background we will put into wrapper div tag.




There is also some lorum ipsum text in a WordPad document which you can use to populate the scroll text page. There is an empty CSS folder which we will save our CSS document into when we have created it! I have also place into the zip file a finished version of what we will create. (Just in case you get stuck!).

Create a Blank web page for your Scrolling page

File > New to create a new web page



Go to File > New and create a blank XHTML web page. Don't create or attach a CSS file from here we will do that later.




split screen mode



Now split the screen so you can access the behind the scenes code by pressing the 'Split' button.



create wrapper and paragrah tags



Open up a space in between the body tags and create a div tag with an ID of wrapper. The wrapper div will make up the scrolling part of our web page design. Now create an opening paragraph tag and a closing paragraph tag inside of the wrapper div tag. Later we will be inserting our Lorum Ipsum text in between the paragraph tags.



create a new CSS rule


Ok it’s time to attach a style sheet so we can create the scroll with page effect on our web page. Put your cursor anywhere inside of the wrapper div you just created or highlight the wrapper div and then click on the file icon to create a new CSS rule.




define a new style sheet file

You will notice that the wrapper div tag has been targeted in the CSS rule definition dialog box. Now go to the drop down menu at the bottom and select to define a new style sheet file.



Name the CSS file ‘scrolling’ and save that into the CSS folder that came with the zip file.

select css file


Now select the CSS file from the menu at the top left of the screen, just to the right of the source code selector and under the file menu. We are now going to add some CSS selectors so that we can create our scrolling text effect to make the text scroll with the page while leaving the background fixed in place.


set height and width and centre the page

Inside the #wrapper selector we are going to specify the height and width of the div that will contain the scrolling text effect. So we will give it a height of 3000 pixels so that it will stretch a way down and we will give it a width of just 500 pixels to really accentuate the scroll text effect. While we are there we will centre the div tag in the middle of the document by setting the margins to auto.

Now click refresh or click inside of design view and you will see that the web page will centre itself in the middle of the document and you will also see the margins on either side. We will now create a body tag just above the wrapper div selector in the CSS file. Because it’s the body tag, we do not need to put a ‘#’ at the front of it because the body tag is not a div.

Inside the body tag we are going to attach one of the background images from the zip file. If you are not using the exercise files then you can either use your own images to populate the background or you can just style the body using a hexadecimal colour.

when you start typing 'background-image:' you will see that Dreamweaver will prompt you to browse for the image which is such a great time saver! So tell Dreamweaver where to locate the image which will be in the images folder of the root directory for 'scrolling page.'

setting the background body picture in CSS

Once the background image as been installed go into the wrapper div CSS selector and insert the blue background image using the same technique and directing Dreamweaver to the image file when prompted to do so.

Now click on the text file containing the 'Lorum Ipsum' text located in the files panel. It will open up next to the HTML file you are working upon. Highlight all of the text in the text document and copy it. Then close the text document and paste all of the text into the paragraph tag once you have switched back to code view from the CSS page.

Change the text colour to white by going back to your CSS file and creating a pseudo selector for the paragraph located in the wrapper div. You can do this by typing 'wrapper p { }'

We will change the text colour to white and add 10 pixels of padding to the top and bottom of the paragraph and 20 pixels of padding to the left and right:

text colour to white and padding the sides

Now we will finally add the line of code that makes it all work to make the background fixed while the rest of the web page scrolls. Go inside the body tag and add the following line of code just below the funky green image you inserted:

background-attachment


add margins to bottom and top


Optionally, Inside the wrapper div tag you can add a top margin of 60 pixels to bring the wrapper away from the top of the browser window and also add a bottom margin of 50 pixels to really make the scrolling text web page effect look great. 



So I hope you can now see how easy it is to make your text area scrolling in Dreamweaver! - James Brand





Related Dreamweaver Links:

Create Web page Scrolling Text in Dreamweaver CS4 - Video Tutorial



blog comments powered by Disqus

Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal