DreamWeaver Tutorial - Printing a webpage
Hi friends, here is another Dreamweaver tutorial on how to setup a site for printing documents without opening in other application. This video will teach you how to use Dreamweaver to print the documents from a website. We all know Dreamweaver is one of the most advanced and easiest softwares used to design the webspages and to edit them. Lets see how we can take a print of our website pages through Dreamweaver.
One of the biggest problems while dealing with web pages is to print that web page. Just take this page that we have open in Dreamweaver CS3 and see how it looks inside of the browser. While into the browser of course, first we are going to see the exact same page as we saw over in Dreamweaver.
For this particular case, this is using the – framework for Dreamweaver CS3 to display XML based data. When I go to print this page you will notice that the print preview shows me a page that will look nothing like the actual web page that we were looking at. Now we are going to use CSS to actually style a page that will look good when we print it and give us all the information that we actually want printed. To do this we are going to make sure that our style rendering tool bar is open. We do this by simply right clicking in our tool bar and choosing style rendering. Now this feature was introduced in Dreamweaver 8 and by switching to my print media type, you are going to see that the page renders very similar to what we just saw in the browser.
In other words with no styling what so ever, because all of our style sheets have been defined for use only when we are using the browser to view the page. To create a CSS style sheet for print we will first begin by choosing File->New and then creating a blank CSS file. Once we have saved this page we will save it as our print pages in our CSS folder. We will call this Events_print.css. Next we return to our index at HTML page and open our CSS panel. In the CSS panel we will use the link icon to attach a style sheet and we will attach that very same events_print.css file that we just created. But under the media type pop up we will choose print. Now we will click ok. Of course we see no change to the actual page itself because we are yet to define any styles.
Let’s begin by changing the way that this — looks. You can see that it is defined as a link so it is appearing as a blue underline. We are going to change that behavior for printing. We will click upon our new CSS style rule and choose to allow Dreamweaver to specify the actual id for that particular item and then choose the events_print.css file where we are going to place that new CSS rule. Clicking ok we can go through and fill out exactly how we want that to appear. Let’s choose Verdana. Let’s take off the underline. Let’s make sure that it’s a nice black color for printing and we will make it. Now while the key to working with a print style sheet is to remember that printers don’t work with pixels. Instead they work with points.
So we will choose points. Clicking ok you can see that our title has in fact changed. Now these links here in this div we don’t actually need these. So we are going to choose to remove them. I am gonna select the entire div and then once again choose to create a new rule here inside of the print CSS style sheet. We will go to our block section and choose the display pop up. Or we will choose none. And this will remove that entire element from the page for the purpose of printing. Now of course we could continue on perhaps doing the same thing for this, removing it by simply choosing once again block-> display none and ok. Now this events text we want to perhaps even position differently because one of the advantages of being able to redefine an entire style sheet for simply printing is that I can even move elements, change their position on the page. So we will take this entire div and once again we will choose to create a new rule in our print style sheet and this time we are going to first style this a little bit nicer, make it a little bit larger perhaps.
Once again – applying changes along the way but then under the positioning tap, I am gonna choose to position this absolutely. So an absolute position element I am going to place it. Let’s just start off wit may be 65 pixels down from the top of the page or again using points so that I know that my printer is going to understand that and perhaps we will move it in another 65 points from the side of the page. Clicking apply we can see that it has begun to move. Now of course that’s too far down so I am going to move that up a little bit. Let’s say 25 and some where in there is about where I would like to appear.
Clicking ok, finally I am gonna go down to this information, image and other information that I don’t really need on the entire printed page. So once againI will select that entire div and choose to remove that. Once again through the block-> display none section, and now I have got a very compact page, maybe even I would like to change the width of this table so we will choose that as well. Choose the table and under the box section we will just change its width, let’s make it oh I don’t know say 400 pixels, change to points, apply that and see that’s gonna be about good. But we wanna move it above on the page just a little bit spout in some padding on the left hand side and again and let’s try the same 65 points that we used earlier for the other element. And we will click ok and save. Now we will go to preview this page after saving our style sheet. We are gonna preview this page in the browser and we will do so. Oops and I noticed that my table dint move over. That’s probably because I had not chosen the proper element that I wanted so let’s get that content element padding there.
So we will add a little bit of padding on the left hand side again applying there you go moving that over, clicking ok we will save our events_print.css file. Go back to our index page and preview this in the browser. Make sure that we have loaded up a new version of the page and preview this in the browser. Make sure that we have loaded up a new version of the page. Choose our print preview and you can see that our page now looks completely different than it did before. And the elements are beginning to appear here as we had laid them out on the print style sheet. Of course, nothing has changed on the actual browser page. And we can see that by using the actual style rendering tool bar to take us back and display the page just as it would inside the browser. Of course we could continue this process to finish the layout for a print media type. Even for hand held media type as well as other media types supported by CSS.
Tags: wright dreamweaver, free online dreamweaver tutorial, dreamweaver tutorial video, macromedia dreamweaver 8, dreamweaver templates, dynamic tutorial dreamweaver mysql
Post a comment