Making your Web Pages Printable

Have you ever seen a web page that you wanted to print but that had so many graphics or things that you actually did not want to print.  Well you could always highlight the content you want to print and print selection only but this was time consuming and doesn’t always give you the results you want.  This week in Web Design we learned a way that the designer can optimize the page for print and include a "Print" link on the page so that they can be printed more effectively using the style rendering tool bar and a cascading style sheet made just for printing.

In Dreamweaver:

1.      In the Files panel, double-click on the main css file to open it.

2.       Choose File > Save As.

3.      When the Save As dialog box opens, type print_styles.css in the File Name

4.      Click Save.

 Open the page you want users to be able to print.

Click the icon circled below to attach the print.css file to the page.

5.      Click ‘Browse

6.     Choose print.css from the list.

       7.    Add as link and choose print media.

8.      In the Style Rendering toolbar, click the Render Print Media Type shown circled below.

9.    In the CSS Styles panel, double-click the .siderbar in the print_styles.css rules.

      10. From the Block category, choose none from the Display field menu. Click OK.



The sidebar disappears from the document window but the div> has not been deleted. Dreamweaver has simply stopped rendering it long as the Print Media Type icon is selected.

      We will do the same thing to the header to make it dissapear also.

      Click F 12 to view the page in the browser.

      This how the page appears.

Right Click and choose Print Review:

             This is what will print:







 



Making Forms in Dreamweaver

This week I learned how to make an accessible for on a web page and validate one of the fields to assure it is filled in correctly.  Dreamweaver makes this so easy.

 Above is the form tool bar that I used in Dreamweaver.

The first circled icon is to define the form itself.   This is what it looked like after I clicked on it and enter the information.

The second circled icon is to enter individual text fields as shown below.

The third circled icon is tor the text area where the user can enter paragraphs of information.

The last circled icon is for the submit button.

After I finished making the form I decided I needed the email field to be filled in.  I did this by using a validation Spry. 

I clicked in the email field and then clicked the circled icon above. I then made the changes in the properties panel shown below.

Here is a copy of my contact page.  I put the curser in the email field and clicked submit.  Since I hadn’t entered anything into the field, I got the message that it was required.

Of course there is a lot more that need to be done to make the form completely workable but that is out of the scope of this post and probably even the class I am taking at Northwest Vista.  This require additional coding that is usually done by a different department.

Learning About Sprys in Dreamweaver

This week we learned about SPRYs in my Web Design class.  A Spry is a set of CSS and JavaScript files that make building interactive applications easier.  Once nice thing is that in Dreamweaver, you don’t have to know anything about JavaScript to make things like menu bars, tabbed panels, Accordion panels and the tooltips.  Sprys are also used to validate forms and passwords.  I think this is the most exciting thing I have learned in Web Design so far.

For my project I made roll-over images. I inserted the 3 images shown below and with a few strokes of my mouse, made them where they could be viewed larger when clicked on in the web page.

 After  selecting the thumbprint of the picture I want to enlarge, I went to the Behaviors panels and select swap image.

Select Browes and find the image and click ok.

Then since I wanted the this image to only load if somebody clicks on the thumbnail , I went back to the behaviors pane and grabbed that pull down menu and chose onClick.  that is all there was to it. It is really that simple.  

Here is a screen shot of my completed page.

This week in my web 2 class we learned how to create templates.  A template is a page that you want other pages in the site to be based on.  Templates make designing a site easier and all the pages are more uniform.  Creating templates is a two-step process. First, I created a page that I want all of my other pages to be based on; I saved the file as a template, and then created its editable regions. When a file is first saved as a template, you cannot build any new pages using the template until the editable regions are defined.  Dreamweaver creates a folder called templates that all templates are stored in.

The Templates directory is a very important directory and should not be moved or deleted as Dreamweaver is going to reference the files in this directory for all the pages are build off the templates.

Creating an editable region is really just as simple as highlighting the regions that you want to be able to change in your web pages and making an editable region out of them. Dreamweaver makes this so easy.  After highlighting the area that I want to change in all my pages I  went  to Insert >

Template Objects > Editable Region use the keyboard shortcut, Ctrl+Alt+V and when prompted named the area content1. All editable regions have to have a unique name; I called mine “content1” since this is where my main content will go on each page based on this template.

Any area can be made into an editable region.  I created two, header and content because that is all I want to change in each web page. 

To build a new page using the template all you have to do is go to file>new>page from template>create.  When the page opens save it as an html and make any changes needed. Below is a screenshot of one of the pages I created using my template.  Every thin at he top and on the right stays the sam and cannot be edited.