Common Sense Computing 101 aka "Why in the world would you lose your publisher file?"

As an MVP for Publisher over some 5 years, it has never ceased to surprise me how many times I’ve read this question – “I lost my pub file (insert long story here), how do I get my web site back from the html files on the server?”


It’s obvious that a lesson in common sense (computing) is needed. So I’ll get on my soapbox before I delve into answering the particular question.


First, the maxim. “If the file is important to you, have more than one copy.”


Simple, seems common sense to me. After all, think of all the various things that are important to you. I bet you have some sort of protection for them.


Me personally, in all my years of computing I’ve lost 3 hard drives. Where they just go kaput. I’ve misplaced, deleted, or otherwise lost, a file I was working on more times then I know. Yet I’ve never “lost” a file. The worst case scenario is redoing some recent work in an older version of the file in question.


“If the file is important to you, have more than one copy.”


My computing workflow goes like this…


If the file is very important, I make a copy of it before I begin modifications to it. You can do this in various ways. What I do is open Windows Explorer and right click the file and select copy, then in the folder I want the copy of the file I right click and select paste. Sometimes I leave the file name as is, other times I may append the filename. For example – myprojectname_bku010106.pub . Where that would be the date I saved the file off before making a change to the original copy. Other times I may describe the change I’m going to make to the original copy – mycustomerfile_before I whacked half of it out.pub. But that’s how I do it, like I said there are different ways, like opening the file and then going to File, Save as, and simply saving off a copy that way. Though the difference in that is you’ll open up the copy version of the file, ready for editing. Where I prefer to use the copy version of the file as a “snapshot” of the file as of that moment and then go edit the original version of the file.


Doing this copying methodology serves three purposes, it provides an easy fallback if the changes I make turn out to be a big mistake (it’s usually easier to go back to the copy and start over then to back out significant changes to an original), it provides fallbacks if the original should become corrupted, it provides fallback files that I can burn off to CD and/or copy to a secondary hard disk. I use both additional hard drives and CD’s to archive files. I routinely copy them to another hard drive and then I occasionally do a larger backup to CD or DVD media. That way in a hard drive failure scenario my most recent files are recoverable from the separate hard drive, and older files are available on media.


If you need to, write “If the file is important to you, have more than one copy” on a post-it and affix it to your monitor.


As for implementing common sense computing in managing your Publisher web publication file I recommend the following…


First, decide what “minor change” and “significant change” mean to you.


Before making a significant modification to your web publication file make a copy of it as I covered above.


At the very least make a copy at random times. You’ll want to guard against file corruption of the web publication file.


Make your changes, publish the site, test it. Repeat if necessary.


Now once you have the site files, those html and image files, remember that those files are not important. Not at all. Why? Because the site is fully contained in the Publisher file. At any time you can publish again and replace those files. It is the .pub file, that web publication, that is important. Vital even. The irony is that your web host is backing up your site files every single day. Something you probably assume and take for granted because – it’s only common sense. Am I right 😉


So take advantage of that. When you are done with your pub file, copy it to your web host account. These days the standard web host provider offers more disk space on their account offerings then you could ever fill up. (if you’re using some freebie then perhaps not) So take advantage of that. Most web host have a file manager tool that you can quickly upload the file. Or you can use an http web folder or an ftp tool. Whatever works for you. Start by creating a new folder on your account, call it what you like, perhaps “bkup”. That host file manager is perfect for creating a new folder. Then use that folder to copy the pub file to for its safe keeping. 


Of course once you do that the file is accessible by simply browsing to its URL, for example – www.mysite.com/mypubfile/mysite.pub


The likelihood of anybody ever knowing that address without you telling them is pretty much zero, and even if someone downloaded it, what purpose would it serve. But, if this is of concern to you then just simply restrict access to that folder. Most web hosts have a control panel that allows you to set and modify access permissions to the files and folders on the server for your account. Speak to your host support if you need assistance in removing anonymous access to your folder. Once done the result is that when addressing that folder you are required to explicitly enter login credentials.


Hopefully by this point you have been energized with common sense computing skills and you know you will never lose your Publisher wed publication and your web site, due to hard disk failure, file corruption, or other disaster. But, what if this common sense hits you to late. What if you’re the dude going “can I get my pub file back from the html files on the server?”


First, kick yourself repeatedly.


Next, accept the answer. Which is, No. But sorta Yes. Well No is the short answer. Yes is the long answer. Which do you prefer?


I thought so.


No, you can’t download all the site files, not just html files mind you, you need the image files too, and have them magically morph into a Publisher web publication .pub file.


But, if you have version 2002 or version 2003, and you are willing to suck it up and apply yourself, then you can recreate the web publication file. So ask yourself, how important to you is it? 😉


As of version 2002, Publisher will open a htm/html file. Which actually, technically, isn’t very useful since Publisher is not an html editor, nor a web design tool (i.e. FrontPage). However it’s handy in this situation. The kicker is, it’s only going to open one at a time.


Now is when your skills with the Ctrl + C (copy) and Ctrl + V (paste) keys comes into play.


How this works is that you open the index.htm (home page) file in Publisher (2002 or later) and then go to File, Save as, and save it as a .pub file. That gives you the new web publication file.


Insert new blank pages into the publication for how ever many web pages you have. Then there next to your publication you use a second instance of Publisher to open the next htm file. You copy everything on the page (either group, copy, or select all, or lasso, copy – whatever method you prefer) and you go over to the appropriate page in the new publication file and you do a paste. There you go. You repeat for each web page.


When you finally finish and have that recreated .pub file, then you will fully appreciate the time I took to write all this. At least I hope so 😉

Building a web site with multiple Publisher web publication files

applies to all versions, however, URL’s must be modified to suit your versions file naming convention.


Traditionally with Publisher you create a site with multiple web pages all within a single Publisher (.pub) file, known as the web publication file. If you want to keep your site all neat and tidy in one place this can be a benefit. But it has some disadvantages. For example, every time you modify the file and resave to html, all the pages and images of your pub file are recreated. Once they are recreated you need to re-upload * all these files to your web space.

If you have a pub file with ten pages in it, and you make a change on page 4, save to the pub file, then click Save As Web Page ** to have Publisher generate the web site files, you’ll get all new site files that are all re-coded due to that one simple change.

Always uploading ten pages after a change may not be problematic, but what about 30, or 50? At some point it will become to much to manage. The best way to manage a larger site is to use multiple pub files. Probably the easiest way is one web page to a pub file, but that many pub files could be difficult to manage. You could also do sections per pub file, for example you might have a section about dogs and that section has five web pages, you could create those 5 pages in one pub file. Another section about cats might be 8 pages and that is the cats pub file. Only one pub file will have the home page, this might be it’s one pub file for just this one page or you can have a pub file you consider the main section.

You’ll need to decide on the structure you want before you get started. You also need to decide on a site wide naming convention and with that you need to decide if you want to use the option to have supporting files in a sub-folder ***.

For a site that is using the multiple pub file methodology I highly recommend using the sub-folder option. As such this article will be based on using it, if you elect to not use it you will have to develop your own structure to avoid pages of the same file name trying to occupy the same directory.

The sub-folder is created by Publisher and named by Publisher according to the file name you enter during the conversion to web pages. Your home page needs to be named “index.htm” so from the pub file that contains your Home page you’ll get the index.htm file AND a sub-folder named “index_files”. If you do another pub file, say it’s a section for pages on dogs, then you would name the file “dog” and then the sub-folder will be named “dog_files”.

Plan this in advance and it’s best to keep it simple and have it make sense. For example if you have a page about Madonna, then name the file madonna.htm and the pub file that contains it would be named madonna.pub. If you have a section on music that is made of 6 pages then call the pub file music.pub and the six pages in the pub file would be saved as music.htm and result in a sub-folder called music_files.

With this web site creation methodology you only have to re-upload the section (smaller pub file) that you made a change too rather than a whole site (larger pub file).

For links that cross pub files, such as the home page in your main pub file linking to the dogs page in your dogs pub file, you need to use the URL of the page and the “existing file or web page” option in the hyperlink dialog. This is where the importance of site and naming convention planning comes in.

When you are linking pages that are within the same pub file you can use the “place in this document” option when hyperlinking. Because the links are to pages within the publisher file. When the page is not in that publisher file however then your hyperlink needs to know to jump out of that sub-folder and what sub-folder to go to and what page in the sub-folder once it gets there.

For example lets say you created a pub file called music.pub and that pub file has 6 pages. When saved as web pages you’ll have music.htm, the sub-folder music_files, and in the sub-folder – page001.htm thru page005.htm ****. If you uploaded those to www.yourdomain.com you’ll have the following 6 URL’s:

http://www.yourdomain.com/music.htm
http://www.yourdomain.com/music_files/page001.htm
http://www.yourdomain.com/music_files/page002.htm
http://www.yourdomain.com/music_files/page003.htm
http://www.yourdomain.com/music_files/page004.htm
http://www.yourdomain.com/music_files/page005.htm

If you then create a home page (index.htm) in another pub file and you want links on the home page to those music section pages you need to link to the URL of the page.

For example you might put the text “MUSIC” on the home page and then in the hyperlink dialog you select the option “existing file or web page” and in the Address box you input the URL, which in this example is http://www.yourdomain.com/music.htm


If it where to link to page 3 you would input the URL – http://www.yourdomain.com/music_files/page003.htm

If you wanted a link on that 5th page of the music section to go to your home page than you would use the URL http://www.yourdomain.com/index.htm

This web site creation methodology can allow you to achieve a sizable site with less time and effort in the long run however it requires adequate planning upfront as well as careful attention to detail.


* version 2003 has an optional incremental feature to minimize this.
** menu option wording varies by version, but is always under File menu.
*** versions 2002 and later.
**** or your own naming implementation.

Using JavaScript Pop Up windows in a Publisher web

 Sometimes it can be useful to display information in a small pre-configured pop-up window. For example if you had a hyperlink that said “more details” and that link opened a small pop-up with details related to the primary windows content.

This should not be confused with the intrusive advertising technique of “pop-up’s”, that pop-over or pop-under without the visitor’s consent or prior knowledge.


To launch our window we need to use a small snippet of JavaScript. Publisher has no built-in support for scripting so you use the HTML Code Fragment dialog to insert the script.


The HTML Code Fragment dialog is located in the Insert menu, and the dialog is drawn on the page where it is needed like you do with a text box or picture frame.


Our snippet of code contains the hyperlink so you will insert the code fragment on your page where you are wanting the hyperlink to be located. Simply copy and paste the following code:


<a href=”javascript:windowname_window=window.open’pagename.htm’,’windowname_window’,’toolbar=0,location=0,directories=0,status=0,menubar=1,scrollbars=1,resizable=0,width=400, height=400′);windowname_window.focus()”>Link Text Display</a>


Obviously you need a web page that this link is opening, that web page is what is specified in place of “pagename.htm”. Replace the link text display string with your desired hyperlink text.


You will set the width and height numbers to the pixel sizes you want the web page to be sized to in the pop-up. If you want the visitor to be able to resize the window change the resizable variable to 1. If you want scroll bars to not display set the variable for that to 0. Other common settings you may want to set are – display toolbar, status bar, menubar – yes is 1, no is 0.


If you use this snippet more than once on a page you will need to change the “windowname” in each snippet to enable them to differentiate themselves on the page.


You can see an example of this pop-up technique by visiting barvin.com and clicking the Contact Us link at the bottom of the page.

Create a "send to friend" email link

Do you want your page visitor to be able to send the URL of your page to a friend recommending it? A “Send to a friend” email link. This is known as a “mailto” link. Such a link will cause the browser to open the registered default email client. With a little bit of code added to the link you can auto-fill the message subject and body.

You can only use this in Publisher with a HTML code fragment. Open the fragment dialog and paste the following code snippet:

<A HREF=”mailto:?subject=Recommended&body=I recommend visiting this page. http://www.publishermvps.com/default.aspx” TITLE=”Send to a friend”>Send to a friend</A>

After ‘subject=’ and before ‘&body’ you can modify the text you want in the message subject line. Obviously after ‘&body=’ you can customize the body section of the message.

Then close the dialog having positioned the fragment on the page where you want the link to appear.


If you prefer an image rather then the “send to a friend” text you simply swap that text with the code for an image.


Which looks like  <IMG SRC=http://mysite.com/myimagefile.gif”/>

Code your own textual navigation menu in Publisher

If you opt to not use the Publisher Navigation Bar Wizard for your web publications site menu then you are most likely planning to create a text box and type the name of the page in the text box and hyperlink the text and then repeat this process as needed.

Nothing wrong with that, but, it will result in Publisher generating a lot of html code in the html file it generates. A lot more code than if you just did the code yourself. Trust me.

With an HTML code fragment and some copy/paste skill it’s not at all hard to do and will even provide you some added flexibillity. By just doing a copy/paste of the code snippet below it will probably be faster as well.

Insert a code fragment on the page and place it where you want your menu and size the fragment to about the size you think the menu will take. In the fragment dialog paste the following code snippet:

<a href=”http://www.barvin.com/default.aspx”>Home</a> |
<a href=”http://www.barvin.com/lifestyles.aspx”>Lifestyles</a> |
<a href=”http://www.barvin.com/everyday.aspx”>Everyday Ideas</a> |
<a href=”http://www.barvin.com/relationships.aspx”>Relationships</a> |
<a href=”http://www.barvin.com/holidays.aspx”>Holidays</a> |
<a href=”http://www.barvin.com/fitness.aspx”>Fitness</a> |
<a href=”http://www.barvin.com/508.aspx”>So It Goes</a>

If you have more pages just copy/paste on another line, have less pages then delete a line. The pipe symbol is used as a visual break between menu items. It is not required but is recommended.

Obviously replace the domain name and page file name with your own after you paste this code snippet. And replace the link text, the link text is the text between the “>” and the “</a>”.

This example code snippet results in a horizontal menu for use across the top of a web page or the bottom.


To modify it for a vertical menu, typically placed on the left of a page, simply replace each pipe symbol with the code for a line break – <br>

Once you have your menu code fragment completed then you copy paste the fragment on your following web pages.

If you wanted the link to open in a separate browser window you can add the target attribute to the link. It would then look as such:

<a target=”_blank” href=”http://www.barvin.com/default.aspx”>Home</a> |

Using Tool Tips in Publisher Web Publications

Tool Tips – a Yellow box with descriptive text that displays when the cursor hovers over a hyperlink – are supported in the Internet Explorer browser. It is not natively supported in a Publisher web publication.

The actual Tool Tip is from the Title attribute of the link (href) tag. To use this in Publisher you have to code your own link with the HTML fragment dialog. Refer to my article “code your own textual menu” for help on coding your own link.

To use the ‘title’, the code looks like this:

<a title=”Find Daily Events” href=”http://www.barvin.com/holidays.aspx”>Holidays Page</a>

The text between the quotes in the title attribute is the text that will display in the tool tip in the output html file. You will modify that text accordingly as will you modify the page URL and link text.

Using a SWF file (Flash) in Publisher

The method to implement use of a Shockwave/Flash file in a Publisher web publication is the same as implementing any custom HTML and/or scripting to the page.

That being the use of a Publisher HTML Code Fragment object. The HTML Code Fragment object is located on the Publisher “Insert” menu. Once you select it on the menu you draw the object on the publication page just like you do a text box object. You should draw the object to the approximate size that the html will render in the browser for best results.


Once you add the fragment object to the page you insert the code snippet. You can either type the code directly in the fragment dialog box or you can paste code text into the dialog by using CTRL + V (paste command).


Code snippets cannot contain the <html> tag, nor the <body> tag.


To code a .swf file into the html requires the use of the <object> tag. Your flash design program should be able to output for you the code snippet you require. Then you can paste that code snippet into the fragment.


If you have to write the code yourself it should look similiar to the following example:


<object classid=”clsid:A27CDA3E-AE4D-13cf-97B8-4475535455500″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=”520″ height=”85″ hspace=”0″ vspace=”0″ align=”top”><param name=”movie” value=”/media.swf”><param name=”quality” value=”high”><param name=”wmode” value=”transparent”><embed src=”/media.swf” width=”520″ height=”85″ hspace=”0″ vspace=”0″ align=”top” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash”></embed></object>



You have to upload the swf file to the web server and know the files URL, either relative or absolute. Then make sure the URL matches the file path in your object tag code. In the above example the file is “media.swf” and the path is a relative URL. You may prefer to use an absolute URL (i.e. http://www.mysite.com/myfolder/myfile.swf).


When the web publication is published to the server the swf file will load. If it fails then verify the object tag code snippet accuracy and verify the file path/URL.

Redirect a page to another URL

When a web page is visited by the client browser it can redirect the visitor to another URL. A common use of this is when a site’s address has changed, a page can be left on the old address that redirects site visitors to the new address. When using a redirect it is recommended practice to include a brief notice on the page that informs the visitor they are going to be redirected.

Redirects are done using the meta tag, the syntax is –


<META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://www.yoururlhere.com”>


Publisher does not provide support for using a redirect nor does it support accessing the HEAD section of a page (the location of the meta-tag) since it’s not an HTML editor. To add this tag to a Publisher made web page you will need to open the html file created by Publisher and type in the line as shown, inserting it into the head section. You open the html file in any HTML editor or any text editor, Notepad is perfect.


If your redirect page is to contain just the redirect it would be easier to just code the web page in your text editor rather then go thru Publisher. Any change you make directly to an html file that was created thru Publisher will be lost when you have Publisher rewrite the web when saving the Publisher web publication as a web site again. IT’S MY RECOMMENDATION THAT YOU DO NOT PERFORM SUCH MANUAL EDITS OF THE HTML CODE.


To use the above example you replace the sample URL with the one you desire. The number in CONTENT means seconds, as in the page will display for 5 seconds before redirecting. This is useful if you want to have a notice on the page telling the reader that they are going to be sent to another page. This number can be a number of your choice. Set it to zero for an instant and typically unseen redirect.


Keep in mind your site visitor may not appreciate an unseen redirect, it can seem sneaky.


This meta tag must be in the HEAD section of the html with other META type tags, for example:


<HTML>
<HEAD>
<TITLE>My Web Page Title </TITLE>
<META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://www.yoururlhere.com”>
</HEAD>
</HTML>


As mentioned earlier, if you just need a page that does nothing more then a redirect then simply code the full html code of the web page rather then use Publisher. Simply open Notepad and copy/paste the code snippet above into the file and save the file with an htm extension.

Hyperlinks that open a new browser window

Launching a link in a new browser window is done by using the target attribute of the the link code. Publisher does not have any support for this. Meaning there is no way to code a target when making a hyperlink within Publisher.


The only way to use the target attribute is to code the hyperlink yourself and include it.


Use the Insert menu, HTML Code Fragment dialog to write and insert your own html code snippet.


The syntax is shown in the following examples. Insert and place html code fragments on the page in the location desired.


Simply copy/paste an example into the code fragment dialog. Then modify the link text to display what you want.


To open a new browser window for each and every target link:

<a target=”_blank” href=”http://www.domain.com”>Link Text</a>

To re-use the same new browser window for each target link:

<a target=”_display” href=”http://www.domain.com”>Link Text</a>


If you prefer to use an image in place of text as the hyperlink display then simply replace the link text with the image tag.


The image tag looks like this:


<IMG SRC=”http://www.mysitehere.com/myimagesfolder/myimagefilename.gif”/>



 

Replace underlined hyperlinks in your Publisher web with non underlined hyperlinks

Publisher does not support setting a hyperlink with out the standard hyperlink underlining.


However it only takes a small snippet of CSS code to accomplish this on a web page.


You can drop an HTML code fragment (Insert menu) anywhere on the page and in the code fragment dialog just paste the following code:


<style>
a{text-decoration:none;}
</style>


That’s it. I recommend sticking the code fragment up in the top right corner of the page and size it really small so it’s unobtrusive. It’s placement and size is not relevant to the layout of the web page.


In the publisher web publication the hyperlinked text will still display the underlining. The html file you get once you save as a web site will not display the underlining (assuming you copied the code correctly).


Oh but what if you want the underlining to return when the mouse cursor hovers over the link (known as mouse over).


That’s easy, simply add this line into the CSS style…


a:hover {text-decoration: underline;}


You can also use this if you want the link to change colors on the mouse over:


a:hover {color: #ffffff;}


This example sets it to white. Use a color picker utility to locate the code for your desired color.

This CSS code is specific to the page it is on so it effects all links on the page, and it must be inserted on each individual page where you desire this over-ride of the hyperlink appearance.