Category Archives: 1935

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”/>



 

Bookmarks aka Hyperlinking to a place on a page

Bookmarking is hyperlinking to a specific location on a web page, either from within or without that page. In current releases of Publisher there is no support for bookmarking. You can only use bookmarking by writing the code yourself with the HTML Code Fragment to create the links.

Every link needs two parts, the anchor or target destination, and the linkage tag that points to the target. Publisher 2000 already writes two anchors for you on every page, a TOP of page and a BOTTOM of page. A hyperlink to a web page is essentially a link to the TOP of page anchor. That is why by default a web page always loads at the top of the page.


These anchor (target destination) tags look like this:

<A NAME=”TOP”></A>
<A NAME=”MIDDLE”></A>
<A NAME=”READ HERE”></A>
<A NAME=”BOTTOM”></A>


In between the quotes you name your target. The names of Top and Bottom are already included in a web page so do not use those names when naming your target. Insert an HTML Code Fragment on the page where you need it. Then copy/paste the syntax above into the fragment and modify the name text. The text is never displayed on the web page, it is merely used as the address for the hyperlink to point to. It’s the target destination. For example if you had a paragraph on a web page with a header that says Todays News and you want a bookmark on that header then your anchor tag could be <a name=”todaysnews”></a>


Next you have to insert another html code fragment to write the link that is pointed to your target. The link code looks this:


<A HREF=”#TOP”>Go to top of page</A>
<A HREF=”#MIDDLE”>Go to middle of page</A>
<A HREF=”#READ HERE”>I want you to click here!</A>
<A HREF=”#BOTTOM”>Go to bottom of page</A>


Note these examples are meant to match the anchor examples above.


Place the HTML code fragment on the page where you want this link and copy/paste the code example into it and modify the href to match the anchor name and modify the link text to whatever you want the link to display. Be sure you have that pound symbol in front of the anchor name otherwise it won’t work. The # instructs this as a bookmark, versus a standard hyperlink.


If you prefer to use an image in your link in place of text then simply replace the text that is between the close bracket (greater then symbol) and open bracket (less then symbol), with an image tag that indicates the URL of your image.


An image tag looks like this:


<IMG SRC=”http://mysite.com/myimagefile.jpg”/>