There are many tools for editing your WebPAC html files and putting them in your screens directory. I like to use Dreamweaver, with a few friendly helpers.
- Firefox: Rapid previewing of html and style changes.
- Web Developers Toolbar: Editing styles and HTML on the fly.
- Fangs plug-in: Reality-check of accessibility for screen readers.
- Dreamweaver: Looking up style declarations and saving changes to files.
- Internet Explorer: Compatibility testing.
Here is my workflow for editing pages in the WebPAC. You can use this to make pretty significant modifications to an existing visual design. I would use a more structured design approach for a complete site redesign. However, this works well for most changes.
Set up a workspace
First I make sure I have the latest copy of the WebPAC screens directory on my computer. Then I make a copy for safe keeping in case I make a mess of things.
View the page you are changing
First, I open Firefox and browse to the page on my staging port that I want to change. Suppose I am adjusting the layout of a bibliographic record. I would do a search (I usually search for gnomes or trolls, just a preference). Then click on a bib record.
Once I have a page open I can start trying some changes right in the browser. I have installed Web Developer’s Toolbar, a plug-in for Firefox. I open the following two items from the toolbar:
- CSS -> Edit CSS
- Miscellaneous -> Edit HTML
These two editors open at the bottom of my browser window. I can rearrange divs in the html editor and apply all kinds of styles in the CSS editor. I will delete things from the html just to see what happens. The browser updates immediately so I can see the effect of my changes. You need to know that each attached CSS file is shown as a separate tab in the CSS editor. I always make sure I’m editing styles.css, since that is the customizable one, not ProStyles.css.
Of course these changes are not saved…
Make changes permanent in Dreamweaver
I open the same files in Dreamweaver as the ones I am playing with in Firefox. Just to be sure, I scroll to the bottom of the html source and find this:
<!--this is customized <screens/bib_display.html>-->
I open bib_display.html and styles.css from my local copy of the staging screens. Now, when I get something working the way I want in Web Developer Toolbar, I copy and paste it into the appropriate file in Dreamweaver. Since I have a safe copy, I save after every change, confident that I can always revert by copying from the original.
Another thing Dreamweaver helps with is code completion. That means I type the first letter of an attribute or tag and it pops up valid tags beginning with that letter. Dreamweaver helps if I can’t remember if I need “align,” “text-align,” or “align-text.” (Only one is correct.) It also gives you choices of what follows an attribute, such as “center,” or “middle.” Sometimes I will use Dreamweaver to rough out a css class definition, then paste it into Web Developer Toolbar to fine tune the size, margins, and padding.
Wash, rinse, repeat
Now I can copy my updated files to staging and view them again in the browser. I use FTP to move the files, then refresh the Web Developer Toolbar editors. Remember, the changes I was playing with are still in effect until I reload. Each editor has a Reset All button in its control bar. It looks like two green arrows circling each other. When I click that, the page goes back to the last version I loaded (not the one I just uploaded). That is important, because next I hit reload and my new version appears. Watching the page as it reloads lets me detect anything shifting around as a result of my changes.
Now I can repeat the process with other parts of the page, or other pages I want to change. There are several steps in the cycle, but they are quick and easy once you get used to them. The constant feedback of the Web Developer editors saves you the hassle of making a dozen changes, uploading, then trying to fine tune the ones that didn’t work.
Reality checks
Once I have things looking the way I want, I look again in Internet Explorer. I have not found a live edit preview for IE like Web Developer Toolbar, but by this point I’m usually just adjusting margins. It is simple enough to make an adjustment in Dreamweaver and upload it. Then I reload the page in IE and look again.
Another test I like to do is to render the page in Firefox with the Fangs plug-in. This creates a page of text representing what a screen reader would speak to a user who is blind or otherwise visually impaired. The tool is a reality check. For example, it helped me decide in the latest Example Set to replace vertical bar characters between top menu items with solid left borders. The vertical bars were being read as “vertical bar.” There are still barriers in some system generated parts of the WebPAC, but Fangs can help you work toward a fully accessible catalog.
FTP
I glossed over the FTP step. I use a separate FTP client called Winscp, because I need it for other tasks besides straight page editing. You can use a client of your choice, or Millennium Web Master. Or you can configure Dreamweaver. I have to confess I have not done the config in Dreamweaver. That sounds like a project for another blog post.
See you next time!
Photos
Surveys
Video