Category Archives: 1922

Using Publisher for web sites

When making a decision to use Publisher for a web site please bear in mind that Publisher is not a web design tool nor an html editor. Publisher is a Desktop Publishing Tool (DTP) that supports web design. A lot of the same functionality can be found in Microsoft Word, which is also not a web design tool. Microsoft’s web design tool is FrontPage. Publisher cannot be and never should be, compared to a web design tool.

Publishers “design intent” is that it can create a small (10 pages or less) static web site that shares a common “look and feel” with the print material that a small business creates using Publisher. Publisher is “by design” intentionally exploiting the technologies of the Internet Explorer browser.

 

Web design functionality and methodology differs greatly in each version across versions 2000, 2002, and 2003. The three versions supported here. This means that once you build a site in a version of Publisher you may be best served by maintaining it in that specific version into the future. Always make a copy of your web publication and test it in another version before making a switch.


It is important to note that in versions 2002 and 2003, Office Suite Service Pack releases include improvements in web functionality. So when using these versions be sure to have installed the most recent Office Service Pack applicable to you, that’s Office XP for 2002 users, and Office System 2003 for 2003 users.


When using a web design tool, such as FrontPage, you create and maintain the physical html files. They are individual entities and you can directly “handle” the html code. There is an important distinction here. With Publisher you do not create nor maintain physical html files. There is no html “handling”. All creation, modification, and management is done in the publisher web publication file, the .pub file. It is Publisher that creates the physical html files, it writes all the code. The html site files are then a separate entity from the Publisher file. The entire site is fully self-contained in the Publisher file. You should make a backup of your web publication file before any modification. My suggestion… make copies using a date naming convention (i.e. mysite_122004.pub). Occasionally burn these to CD for archiving should you lose a hard drive.


By design, by it’s scope, Publisher does have limitations and weaknesses. It can however create a quality web site. The most important thing is to recognize the limitations and understand them and have realistic expectations.

Understanding background padding in a Publisher web (aka white space)

 applies to versions 2003, 2002, 2000

The rendering of a web page in a client browser is affected by many factors, one of which is the display resolution on the client monitor. The higher a resolution is, the more a web page will be padded with background by the browser.


The content block of a web page is most commonly left aligned and sized to a fixed width in pixels. Typically this width is in the 750 to 850 pixel range to provide the best viewing in the most common display resolutions. High end display resolutions will result in background padding. This padding is also controlled by window sizing. If you grab the right edge of the browser window and resize it back and forth the background padding adjusts accordingly, and with respect to the resolution.


Fixed width design is the most common site layout technique. It will be seen on most sites, examples of this include www.oprah.com , and www.cnn.com , and www.ebay.com , and www.usps.com .


There are two other layout techniques, they are, percentage width design and centered design. Examples of the latter include www.google.com, and www.realsimple.com , and www.msn.com . It is similiar to fixed width in that the browser still controls background padding, and interior widths are generally still fixed. Percentage width design is the hardest of the three techniques to work with. With this technique there is no background padding. The content block fills the browser from left to right. Widths are not fixed which allows the browser to expand and contract all widths in the content block. The results of which may not always be pleasing, so it requires lots of testing (mostly text based sites, like a blog for instance (this one in particular), can use this design with less difficulty).


Publisher cannot create a “centered” format web site. With a Publisher web publication, the fixed width design is the only technique available. Which does mean background padding will occur. Publisher customers routinely think of this as “empty white space”. There is nothing wrong with “white space” (think www.google.com) , but some Publisher customers find it distasteful. Because of that I will illustrate in this article how to implement a design technique that tricks the viewer into not thinking of the padding as “empty white space”.


You can see the trick in action in the site examples – realsimple.com and msn.com. When you first view the web page you don’t think of it as having padding. But resize your browser window and you can see the background padding is still there, it’s just colorized. An example of this implemented on a left aligned fixed width web site is www.barvin.com .


To create this in a Publisher web publication you set the page background to a color and then create a content block with a rectangle shape. The page content objects are then placed within the shape.


Using Publisher 2003 let’s step through this in more detail:


In the web publication file go to File, Page Setup. In the Page Setup dialog go to the Layout tab. Under Publication type select Custom. Set Width to 800px. Do not modify the Height (Height should never be modified in Version 2003). Click Ok button to close the dialog.


Go to Format, Background. In the Background Task Pane select a color, either select one available under “apply a background” or click the “More colors” link and define a custom created color and apply it.


The color you selected is the color that now will replace “empty white space” on the web page. You can create the page content objects directly on the background as normal, over this background color. But as seen in the site examples earlier, the common layout design is to retain a white background for content.


To do this select the rectangle shape from the Object tool bar. Starting in the top left corner of the publication’s page draw the shape down and to the right. As you do so monitor the shape measurement displayed in the status bar at the lower right of the Publisher application window.


Size the shape to 748.000 x 800.000 px (748px by 800px). Then right click the selected shape object and select Format Autoshape.


In the Format Autoshape dialog, in the Colors and Lines tab, set the Fill Color to White, and set the Line Color to No Line. Click Ok to close the dialog.


At this point you may want to Insert additional new pages to the publication using the “copy all objects on page…” option (or Insert, Duplicate Page) to duplicate your layout throughout the web publication.


You will layout all content text and picture objects within the shape that is your content block.


 

Including external files in a Publisher web

applies to versions 2003, 2002


A frequent question posted at the Publisher Web Design Community is about including Adobe Reader (pdf) files or Word (doc) files in a Publisher web publication. This also applies to any other type of file that you want a hyperlink to, from a link on the Publisher web site. The file is referred to as “external”, meaning the file is located outside of the Publisher web publication, or this simply implies a file that Publisher does not generate when creating the web site.


Publisher customers of a previous version may not realize that the handling of external files changed between version 2000 and version 2002. Hence, a customer of Publisher 2000 (or prior) may incur some frustration when moving to version 2002 and/or 2003. I will illustrate the change and explain how it affects you.


Through version 2000, Publisher included external files in the default Publisher directory “Publish,” located under My Documents. Publisher would make a copy of your external file and place that copy in the Publish folder. If you hyperlinked text on your Publisher web page to a pdf file residing on your local drive, the successful linking of the external file would be a process invisible and seamless to you. The external file gets copied by Publisher into the “Publish” folder, then you upload the “Publish” folder to your web site and you automatically have a functional link to an existing file.


As of version 2002 there are the following changes. Publisher no longer has a specified “Save To” directory. Use of the “Publish” folder is discontinued. If you have a previous version and have the “Publish” folder, then you can opt to either delete it, or continue to use it yourself. The new versions “Save” by default to “My Documents.” Publisher now generates a sub-folder by default (an optional program setting) in the Publisher web site. Publisher names the sub-folder with the same name you save the web as. All site files after the home page are created within the sub-folder.


Then, there is the big change for which this article exists. As of version 2002, Publisher no longer copies external files or includes such files in the Publisher web. The burden of using external files with the Publisher web falls on you, the customer. If you followed the same steps in version 2002 or 2003 that you used in version 2000, you would discover that the links to your external files fail. That is because – 1) the external file was not uploaded – and 2) because the hyperlink is pointing to the original file path on your local drive.


To use an external file in your 2002/2003 web you must do the following – a) upload the external file yourself, and b) set the hyperlink to the internet address (URL) of the file rather then browse to the original on your local drive.


Before you upload files manually (i.e., not within Publisher) you’ll need to decide on which protocol (ftp or http) to use, just as you do when publishing the web to the server. This decision is easy if you have FrontPage Server Extensions (FPSE) installed on your web server. Because FPSE requires http, and use of ftp can corrupt FPSE. You do need FPSE to use http publishing. If you don’t have FPSE, you will upload using ftp,or optionally, you can use a file manager tool provided by your web host provider if applicable.


Windows does include an ftp client, but it is a command line client run under the Command Prompt. Unless you are command line savvy you should use a third party ftp client to make the ftp connection and upload the external file(s).


If you are on Windows XP and using http, then you can drag and drop your files in and out of your web through the Windows Explorer program after you have created a “web folder” for your site. If you have previously uploaded in http then you may already have a web folder. Look under My Network Places in the left side “Folders” pane of Windows Explorer. Otherwise, to create the folder go to Start, My Network Places, click on “Add a network place”, then follow the prompts.


Before you copy the external file to the server (via an ftp or http connection, or a host file manager), you’ll want to decide where you want to copy the file and how you want to organize the site. For example you can just copy the file to the domain level (same as index.htm) whereas the URL would look like: http://www.mysite.com/mypdffile.pdf Or, you could create a directory on the domain and then copy external files to that folder. Whereas the URL would look like: http://www.mysite.com/myfoldername/mystuff.doc


Be sure you have the URL of the file when you create the applicable hyperlink in your Publisher web page because that URL is what you point the hyperlink to in the Hyperlink dialog box.


You can then save, and publish the Publisher web site.


As a side note remember that certain file types will be viewed within the browser (via a plug-in). So if your intention is to hyperlink to a external file for download purposes versus viewing purposes then the file in question needs to be converted to a zip file (compressed file) and that zip file becomes the external file that is uploaded and linked.


A zip file will cause the browser to prompt for download. Whereas a pdf file will load in the browser via Adobe Reader if Adobe Reader is present on the system. Same applies to a Word file if Word is installed on the client.

Publisher 2003 – What’s new in web design for this version

applies to version 2003


Personally my favorite thing about this version is that the products Personal Info Dialog Box finally has an option to turn it off. Through each version I have never used the Personal Info feature and that pop up dialog on each new publication has always annoyed me. The dialog now has a check box so if you aren’t planning to use the Personal Info feature and you check that box you can launch your future new publications a little faster and with a few less mouse clicks.

I do have another favorite thing about this version and like that dialog this has been a Pet Peeve of mine through previous versions. A feature that’s been long over due and in fact has been present in Word for at least the prior two versions. That new feature being Pixels as a measurement unit option. Pixel measurement provides the accuracy to achieve a more professional look and feel in your layout and designs.

Of more significant importance this version corrects issues that were introduced with the 2002 version, such as variable page lengths, hyperlinks in filled text boxes, and custom page naming.

Version 2003 introduces new templates that make it very easy to create a professional looking web site and new wizards and visual cues that make web publications simpler and easier to understand.

This version introduces what MS has coined “Incremental Uploading”. What that means in English is that the whole site no longer has to be uploaded after modifying the web publication file. This feature when turned on keeps track of which pages are modified in the publication file and only uploads those files.

Publisher achieves this through the use of XML. Which is one of the factors behind the larger web file size in this version compared to previous versions.

The more code in a file the larger the file size. Here is a comparison:

Under v.2002 SP2, select Accent web template, Export as web page, result is :
index.htm (11 kb)
7 image files created equaling 26 kb total
total load size for home page is 37 kb (11 + 26)

Under v.2003, select Accent template, Publish to web, result is :
index.htm (41 kb)
12 image files created equaling a total of 40kb (extra files due to VML in 2003)
total load size for home page is 81 kb (41 + 40)

In testing Incremental Uploading I have been pleased with the results. It will definitely be a time saver for larger sites. Technically you don’t get the full benefits of it until after the third time the site is published.

An issue that was found during testing of this feature is that on some web servers the sites supporting folder (containing all pages after the home page) is hidden, not visible when logged on to the server and viewing the contents. MS identified this as being an issue with the web servers handling of xml files. The user can contact their web host about this permissions issue or they can elect to not use the supporting folder option.

I’ve already pointed out the subject of file size. File size is the only down side I see with this version. In addition to what I’ve already mentioned some other nice things are – a return to naming the home page to index.htm by default, more nav bar placement options, separation of nav bar titles and page titles, and lots of pre-made topic pages.

I’ve published a sample site at this address— http://www.davidbartosik.org/2003samples/network_easy_web/

This sample site generated 114 files with a total file size of 2.2 MB. The index file (home page) is 112 kb. The site is comprised of only 12 pages. You can CLICK HERE to view the file listing for the site. This listing also illustrates the new default file naming convention of this version (yes they changed it again).

Those users with free web space and/or limited web space will most likely find that 2 MB for a 12 page site is an obstacle. Business users implementing a site on a local intranet can be less concerned.

Whether you have an existing web site from Publisher or are considering creation of a web site with Publisher, you the user will need to determine for yourself whether the enhancements of this latest version out weigh the down side of the web page file size.

How to Thumbnail in Publisher Web Publications

applies to version 2003 and 2002 – version 2002 users disregard the sections on Picture Optimization


Thumbnailing is very common in web design and is a very simple design technique easily implemented. Simple though it is, it is one of the most frequently asked Help requests in the Microsoft Community for Microsoft Publisher. In response to that this article will illustrate the concept of thumbnailing, as well as take this opportunity to demonstrate the Picture Optimizer tool introduced in Publisher 2003 Service Pack 1.


What is Thumbnailing?


Well what it is not is something magical or difficult. It is a concept of hyperlinking a small version of an image to a larger version of an image. The technique became popular in the early days of the web mainly due to download speeds available at the time. It could take a long time to download a full size jpeg image file on a page. So rather then display the full image on a web page it became a popular concept to display a smaller copy on the page and then hyperlink that to the full size image. Thereby providing the image to the site visitor faster, albeit smaller, while offering them the flexibility to choose the option of viewing the full size original image file. Typically this is implemented in a “gallery” fashion, where several images are to be on display.


Before you implement thumbnailing you might consider your target audience, with the growth of broadband and higher download speeds today, larger graphics of higher quality can be used with little difference in download time. Keep in mind thumbnailing by its very nature is adding additional mouse clicks to the site visitor. If over-used it may make the use of the site to time-consuming. Instead of a gallery of thumbnails you can consider running the gallery as a series of pages with one or two images per page.


What is the Picture Optimizer Tool for Publisher 2003?


Well, first some background. Publisher 2003 is designed to provide a richer graphic experience in web publications (keep in mind todays higher download speeds). In part by using newer image formats such as PNG, and technology like VML. Both exploit the power of Internet Explorer 6 (and newer). Then also in part, by retaining the quality of the image the customer inserts into the web publication, during the generation of the web site files.


Image quality, image resolution, and terms such as “DPI”, are outside the scope of this article so you are encouraged to research that topic independently. However it is helpful to know that Publisher versions prior to version 2003 would “down-grade” the customers image to a suitable web resolution when making a copy of the image in the web site generation. The smaller resolution translates into a smaller file size which translates into a faster download time. The more images that are on a web page, the more download time increases. The more resolution of such images decreases as well as overall image size, the more download time decreases.


It is the burden of the web designer to balance image resolution, image size, and number of images, in an effort to provide the best experience for the site visitor.


That said, Publisher 2003 does not “down-grade” the customers image. If the customer inserts a 400 dpi image then the web site copy of that image that Publisher generates in the web site files will retain that quality. Actually Publisher 2003 makes multiple copies of the image in various formats and qualities designed to target various browsers, this article doesn’t have time to wander off on that topic. But that covers the background details.


In response to strong feedback from Microsoft’s Publisher MVP’s and customer experiences, Service Pack 1 introduced a Picture Optimizer tool on the Publisher 2003 Picture toolbar. This tool provides the customer the option of “down-grading” their inserted image. This is done prior to the web site generation. On a side note, in my opinion a customer should use a graphics tool to reduce the resolution of their image and to resize it in the dimensions wanted for the web page, – before – they insert that image in the Publisher web publication. In lieu of that the Picture Optimizer tool is a must.


If you have not yet downloaded Service Pack 1 and updated your Publisher 2003, please do so. The Service Pack link is available at http://office.microsoft.com.


Next launch Publisher 2003, open a web publication, have your image(s) close by, and we’ll proceed with thumbnailing.


Thumbnailing


Using Insert, Picture, From File…, browse to the image file you want to place on the web publication page. The image is placed on the page and the Picture Toolbar appears. On the toolbar click the Compress Pictures tool button (requires SP1). The compression dialog will pop-up on the page, which is self-explanatory. For this example I will click on “Selected pictures”, “Web/Screen”, and leave the Options as checked. Then click OK to accept, apply, and close the dialog. I then close the Picture Toolbar. Then select the image and grab one of the points on the outline and resize the image to the desired size and spot it on the page layout as desired. This is the “thumbnail”. You can resize this to any size you desire and whatever looks best in your page layout, but if you want some guideline, then I’ll mention that the common design practice is to size thumbnails at 100 pixels by 100 pixels. You can use the pixel rulers on the publication to size accordingly.


To make the thumbnail functional we need something to hyperlink it to. This means that our full size image file needs to be on the web server. Uploading a file to your web server and upload protocols are outside the scope of this article. Connect to your web server using your preferred method, be it the host file manager, an ftp client, or http web folders in Windows XP, and upload the image file to your web space.


As a side note, before you upload the file you should use a proper file naming convention, refer to my web site advice article for details. Additionally for organization I recommend you first create a directory on your web server called “images”. That folder will be the location you upload your full size image to. Meaning your uploaded image file would have an address path on your server that looks like this – www.yourdomainame.com/images/yourpic.jpg


That address is the files URL. You need to know your files URL in order to hyperlink the thumbnail to your file. So make sure you know it, write it down if need be or copy it to your Windows clipboard. In fact take a moment to verify you have the URL correct, open a browser window, paste the URL or type it in the address bar, and press Enter. If the image file loads in your browser window then you have the URL correct. If you load a 404 error, page not found, in the browser window then you have the URL incorrect (back up and review your work).


That image in the browser window is just what you will see when we finish the thumbnailing steps. Select and copy that URL in the address bar and go back to your Publisher web publication. Do a right click on the image (thumbnail) and select hyperlink. The hyperlink dialog then appears. On the Link To menu select the “Existing file or web page” option. In the address box paste your URL. Click OK.


Hover your mouse cursor over the image for a moment and a tool tip will appear that will display the URL the image is linked to. If it looks correct then press the ctrl key and click and verify that the link opens your browser to your file.


That’s it. There is nothing mysterious about thumbnailing. Afterwards you publish your Publisher web publication. For proper Publisher web publication publishing (uploading), refer to my publishing articles.


For future help in your web design efforts with Publisher visit our forum at Publisher Community.

Web Publication Changes Made in Version 2002 of Publisher

NOTE: Go to Help, About… in your Publisher 2002 and check the version number. If it does not indicate Service Pack 1 (SP 1) or greater then visit http://office.microsoft.com at once and visit the Office Updates to update your Publisher to the most current level. Service Pack 1 contains a vital fix to the HTML coding engine. Do not use Publisher 2002 for a web publication unless it is at version update level SP 1 or higher.


Web page building in Publisher 2002 is very different functionally from that of Publisher 2000. If you come from Publisher 2000 you’ll think you know how the program (2002) works but you won’t. You’ll then likely feel frustrated and feel that Publisher 2002 was made to be harder to use. What happened was that Publisher for the new XP suite was made to look and feel, and function, like the other Office XP Suite products. Shared components, VBA support, same functionality, etc. So the intent was to make everything work the same, it wasn’t to make Publisher hard to use. With this change came an entirely new HTML coding engine. Meaning the HTML code that is generated by version 2002 (and subsequent releases) is entirely different from the HTML code that gets generated by version 2000 (and prior).


Once you start designing your 2002 web page document you’ll notice some interface changes; buttons, outlines, etc., the sorts of things you’d expect with a version change. This article focuses on functional changes. One of the first changes you will discover in 2002 is that the Web Properties dialog is gone. A similar dialog is now located under the Tools menu, Options, Web Option button. Same place you’ll find it in Microsoft Word 2002. One change that is very important to be aware of and effects more than just web page building, is that the WordArt is now the Office Suite’s version of WordArt and as such compatibility issues arise with WordArt created in Publisher 2000 WordArt. Once you’ve created your web pages and are ready to save them and have Publisher write the html files you’ll be faced with some of the most significant changes from that of version 2000.


One of these is the naming convention, 2002 does it differently than 2000. 2000 defaulted the home page file to index.html (as needed by your web host) and numbered pages after that, but did allow you to rename the page file names thru the web properties menu if you so desired. 2002 does not default to index.html, the file name will just default to something in the save as box, it is up to you to change it to index.html (or index.htm). Also 2002 has no custom file naming feature as 2000 did. You are stuck with the html file names that Publisher 2002 creates. On a side note, 2000 defaulted to the .html file extension, 2002 defaults to the .htm extension. Either extension is accepted by the web host and they work the same. You can use whichever you prefer, just be sure to be consistent with one of them. (FYI, naming convention changes again in version 2003) (FYI, custom file naming returns in version 2003)


The additional site pages are numbered, slightly similar to 2000’s technique, but 2002 does not have the option to change those file names as 2000 did. In 2000 that was an available option in Web Properties. The next big change is that 2002 defaults to putting your site’s supporting files into a sub-folder which will carry the same name as what you just saved too, so if you saved to “index.htm” the folder would be named “index_files”. Whereas 2000 placed all site files together into one folder, typically the “Publish” folder unless you had modified that. (FYI, version 2003 returns to defaulting to index.htm) (Note: see my article on including external files in a Publisher 2002 (and greater) web)


That folder and it’s contents that 2002 creates needs to be uploaded to the web server along with the home page file that is outside of that folder for the site to work, because the links have all been written by 2002 to include that sub-folder in it’s path. If you prefer to have all files together with no folder (like 2000 did) you can toggle that on and off. Go to Tools menu, Options, Web Options button, Files tab, and uncheck the top most box and click ok, ok. To keep your site simple I recommend you do not use the sub-folder.


To save the web publication as a web site (generate the html files) you go to File, Export as. This is another change from prior versions as the menu option stated “Save as web” previously. Before the generation of the html files, Publisher will prompt a small dialog indicating that it is using Filtered HTML for the output. This is by design and is part of the new HTML coding engine previously mentioned. If you do not see this prompt then review my “Note” at the top of this article. OK the prompt and continue.


One annoying thing with a 2002 web publication is that the web page doesn’t end with the last object on the page as it does in 2000’s HTML. Instead it will carry the background for the full length of the page length specified in Page Setup. This is because version 2002 codes a height tag explicitly to the publications page length. Version 2000 did not code a height tag. (FYI, version 2003 returns variable page length specific to page content)


As a Publisher 2000 user you may have seen your pub file being rather large in file size. The good news is that 2002 has compression. You’ll typically see a reduction in file size of up to 80% between the two versions. This is only in reference to the .pub file. The .pub file has no relation to the html files generated for a web site from a web publication .pub file.


The HTML generated by the new html coding engine is significantly more abundant then it’s younger sibling. It also has a lower probability of achieving cross browser support. The new HTML is designed to exploit the technologies of the Internet Explorer web browser. This new, more abundant code, results in a larger file size. Meaning the full size of a web site created by 2002 will be greatly larger then a web site created by 2000. You will need to confirm that your web host provides adequate space for the web site. Keep in mind that the larger file size means the pages take longer to load and view in the browser. This amount of time and it’s degree of visible delay will obviously depend on the quality and the speed of the internet service in use with the browser.


(FYI, there are no plans to modify or replace the HTML coding engine nor to reduce html file sizes, for the foreseeable future)