September 2009 Meeting Report: Free Software for Web Editing

The September meeting of PACS was devoted to free and open source software. With that theme in mind, at the CSS Workshop we looked at HTML editors and related programs that are free and in some cases open source.

We started with a current listing of free programs at Best Free WYSIWYG HTML Page Editor Review.

We looked at these editors:

• Amaya, an open source editor from the W3C. Last updated September 9, 2009.


• SeaMonkey, an internet application suite based on the Mozilla source. Includes an editor called Composer. We looked at a beta of version 2, released September 12, 2009.


• PageBreeze, a commercial product that is free for personal, not-for-profit, or educational use.


• CoffeeCup, another commercial product that has a free version which has some features not activated.

We also looked at two other applications for web development:

• FileZilla, an open source FTP client.


• TopStyle, a commercial CSS editor. There is a free version that has a nag screen and has some limts to its functionality.

September 2009 Meeting Announcement

The first meeting of the season for the PACS CSS Workshop will take place on September 19. We will again meet at the 9-10 hour in the Alps Room.

This month, the theme of the PACS meeting is Software Freedom Day. The group will be highlighting free and open source software throughout the day. In line with that theme, we will start our session with a look at free HTML editors. These programs let you do WYSIWYG editing without spending the money for Dreamweaver or other commercial editor.

Depending on time, we will then start on our topic for the next couple of meetings. Last season, we worked through using CSS to style a navigation menu. This year, we will take the next step and incorporate images, so as to create more attractive and user-friendly navigation buttons.

More CSS Summer Reading

If you have gone through all the current vampire novels and still need something to read down the shore, try out Mega CSS Resource Roundup. I just found out about this site. This CSS resource roundup looks like a promising collection of tutorials and references.

Note that the article is actually a collection of links to other sites, so there is no guarantee of quality control. If you try any of the suggestions, be sure to check your results in different browsers.

The site also has a bunch of other good pages -- go up to the home page for the list.

And remember your sun screen.

15 Must Read Articles for CSS Beginners

The Line 25 website has a nice run-down of articles from various sources entitled 15 Must Read Articles for CSS Beginners. We have covered most of the subjects at our workshop, and others will be covered next season.

Don't be fooled by "Beginners" in the title. These articles might be introductory, but some of the subjects are fairly advanced. And you might find that the locations of these articles are sites that you will want to follow for future articles.

Check Sites in Various Resolutions

ViewLike.us is a new website that lets you check how your website looks in different resolutions. Checking different resolutions is obviously a good idea, but it is not always easy without a bunch of computers. This site might be a solution. It even includes iPhone and Wii Browswer.

If you try it, leave a comment here about how the site worked for you.

June 2009 Meeting Report: Adding Up the Menu Options

At our June meeting, we discussed the elements of navigation menus and then saw how those elements worked on some sample menus.

We first considered the HTML foundation for a menu. Looking at a couple of major sites, we saw that the unordered list seems to be the most accepted format, but a simple sentence list is often used for secondary menus, like footers. Compare the White House site with the New York Times. Load them in Firefox, turn off styles, and check the actual HTML of the different navigation sections, both in body and in footer.

We then looked at the below online tutorials to see how menus can be styled with just CSS and no graphics.

Horizontal Navigation using list property - two methods

Button effect with only background colors

Next season, we will continue with using graphics, as illustrated in this Web Designer Wall tutorial that we looked at briefly.

June Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, June 20, at 9 to 10 am.

At this session, we will bring together the different elements of navigation styling that we have discussed this season. We will sum up where we have been, and then show how to use CSS to make navigation menus that are attractive as well as functional. Along the way, we will raise another of our web design philosophical questions, so you will have something to ponder while hanging at the Wildwoods this summer.

It will be a grand finale, so don't miss it.

May 2009 Meeting Report: Building Blocks of Nav Menus

At our May meeting, we returned to the topic of styling navigation menus, a topic we have been covering throughout this year.

This month we looked at the CSS properties that I think are keys to creating attractive menus. Those properties include

• pseudo-selectors, using the LoVeHA order;


• display:, both block and inline-block, the latter being increasingly supported by browsers;


• list-style, particularly list-style-type:none;


• background, both color and image;


• position.

And to get really creative, image editing for creating background images.

May Meeting Announcement

The next session of the PACS CSS Workshop will be held this Saturday, May 16, at the usual 9 - 10 am hour.

We will get back to the subject of navigation menus by looking at the building blocks of good navigation styling and considering some issues that come up in designing a navigation system.

We will also cover a couple of other topics of interest related to web design, as well as anything else that comes up in discussion.

30 Exceptional CSS Navigation Techniques

Since we have been talking about CSS navigation this year, I think this article from Six Revisions will be of interest. Many of the examples are from websites where you can find even more ideas. We'll see if we can work through some of these approaches to navigation in coming meetings.