Using VSD, how do I create Email,...

User 488057 Photo


Registered User
130 posts

I have a 30+ page website that I created using VSD on Windows XP, and most of my pages contain an article or information text that potential visitors may want to print, save, or email to a friend. I've seen such links on other websites, but some I know use a service of clickability.com, which I don't want to do. Instead, I want to use the method that is used on the pages at http://webstyleguide.com (scroll to the bottom to see the print links). In other words, to print an article, I want to have a link that opens a new browser window with just the text of the article and without all the graphics. Any idea how I would do this? I'd also like to know how to have a save link for saving just the article and an email link that allows the viewer to send someone a link to a particular page or article.
User 462238 Photo


Registered User
144 posts

You'll probably get a few ideas here. I personally copy my text into a text program, format, then save as a .pdf. Link the print button to the .pdf in your directory and Adobe Reader opens it in a new window with all it's options....print etc.

If you can't save text as .pdf, there are many free web conversion sites
User 355448 Photo


Ambassador
3,144 posts

netbids,

The link you provided is a lot of work. There are two pages to maintain, one that everyone views, and then you click the link to go to the printable page without any graphics, just the text. If you want to go to that trouble, use the suggestion of Hobbyist and create a PDF.

One option that works great is to create a print style sheet and set it to only print the parts of the page you want printed.
User 488057 Photo


Registered User
130 posts

billr wrote:
One option that works great is to create a print style sheet and set it to only print the parts of the page you want printed.

So, what is a print style sheet, Bill, and how do I create one?

Hobbyist, I like your suggestion to create a PDF, but there's one problem. Everyone doesn't have Adobe Reader. Perhaps it would be best to create another page without the graphics. If I do this, and create a "Print" link to the second page, is it possible to make the "Print" link a mouseover that displays a message like "Print the full article"?

Tom
User 355448 Photo


Ambassador
3,144 posts

Tom,

When you create a print style sheet, it is a CSS file that you link to in your head section. Just set the style to not print everything except specific tags such as the paragraph tags <p></p> and everything between those tags. I just noticed that you are using VSD, so that will make things a little different that what I normally do.

Using your favorite text editor, create a file that you will name print.css. Put something like this in the file:

@charset "utf-8";
/* CSS Document */
body {
color : #000000;
background : #ffffff;
font-family : "Times New Roman", Times, serif;
font-size : 12pt;
}
a {
text-decoration : underline;
color : #0000ff;
}

This is just a start, and eliminates any color background and sets the text to black 12 point Times New Roman.

Depending on the code on your page, you can set various things to not display, such as eliminating images with:

img {
display : none;
}


With VSD, you will need to add the link to the print.css file using the html tool and add this to the head:

<link rel="stylesheet" href="print.css" type="text/css" media="print">

As for the tooltip like display, you can get that by adding a title="Print the full article" in the code for the link.

Hope this helps.
User 488057 Photo


Registered User
130 posts

Bill,

Your last post was a bit over my "head" (pun intended) because I'm not familiar with the code or structure of HTML. So, I had to do some research before I could grasp the mechanics of implementing your suggestion. In the process, I discovered another option that I felt more comfortable with because it freed me from having to jam my head (no pun intended) with the technicalities of learning to write code.

What I discovered is that I could easily view and modify the source code that VSD creates of my own web site pages in Notepad (after I had saved them in VSD), and then reinsert that code back into an HTML Tool object in VSD. Of course, I had to figure out some of the syntax so I could understand what was going on in there. I did this by copying and pasting some of the code sequences to other parts of my document, resaving the .html file in Notepad, and then clicking on the refresh button on my browser (IE7) in which my document page was being displayed (similar to what HTML Editor does) so that I could instantly see the effects of my changes. This enabled me to figure out how to center both my title and the text of a song and also how to indent three numbered lists while keeping the rest of the article left justified. (As every VSD user knows, this can't be done directly in VSD because it only allows for one format style [left, center, or right] per text block.)

Before I could identify which code sequence to copy and paste, I had to compare the source for a page that had centered text to the source for a page that had left justified text (I used the same text in both to make it easier to recognize the differences). To simplify things, I created a new two-page web document in VSD with only two paragraphs of text from my article on each page and no graphics whatsoever. I also had to read a few online articles that explained how to create an indented list and learned that there are about ten different ways and that each method has its drawbacks. I ended up choosing the <DD><DL> method for my lists and the <BLOCKQUOTE> command for a paragraph of text I wanted to indent.

Anyway, to make a long story short, I was able to use the HTML tool to create a text only page of just my article with all the formatting I wanted in it (including the curly quotes and em dashes I had asked about in my other thread) for my visitors to print. I also created a link to a PDF of my article that my visitors could save if they so desired. (I was reluctant to do this at first because everyone doesn't have Adobe Reader, but I changed my mind when I read hobbyist's suggestion in another thread to also add a link for visitors to download the program.) But when I put my text only page to the test, I discovered a major problem: The first page and part of the second page is completely blank (except for the title on the first page) when I select Print Preview! The rest of the article (about 5 pages) displays fine. And when I printed the first page, it matched the Print Preview display: no text except for the title (and the header and footer). Any idea what the problem might be? I suspect it has something to do with the HTML object itself, which is 759 pixels wide x 2000 pixels high (my page is 760 x 6200). What are your thoughts (or anyone else's)?

Tom
User 355448 Photo


Ambassador
3,144 posts

Tom,

If you can post a link, I can look at the code you generated and see if I can figure out what is happening.
User 488057 Photo


Registered User
130 posts

Bill,

Sorry for taking so long to reply, but I didn't have a link to give you because I haven't launched my website yet and the article I'm working on is unpublished material. So, I tried to create a test page to upload for you to view by replacing the text of the article with generic text that identified which part of the page would print and which part wouldn't print. In the process, I discovered that if I deleted the first line of text that would print, the entire article would print and display correctly except for the last paragraph (which came immediately after the text of a song that I had centered on the page). But by the time I had replaced all the text of my article with generic text, deleting that line of text no longer solved my problem. Instead, it shifted the text that would print and display properly to the beginning of the third page and left the first two pages blank (except for the title). So there must be other problems with the code.

I also found out this procedure will cause some lines of text to print on two pages. In other words, the entire line will be cut in two horizontally with the upper part printing on one page and the lower part printing on the next page. This is unacceptable, so I'm thinking of abandoning this procedure and just using hobbyist's suggestion of a PDF file---unless there's a quick and easy solution you or someone else can suggest.

Tom
User 355448 Photo


Ambassador
3,144 posts

Tom,

Sounds like you need to use PDF.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.