Everything that rises must converge

“A rare experience of a moment at daybreak, when something in nature seems to reveal all consciousness, cannot be explained at noon. Yet it is part of the day’s unity.”

- Charles Ives

Introduction

This week’s readings focused on the subjects of pulling all of the disparate pages and elements of a site together into one. I found my thoughts drawn to the subject of unity. Certainly web technology brings with it many promises of unity. The unity of man and machine, the unity of all of the world’s peoples drawn together by a common communication medium. Unity is also a very important principle of design. As I lace together the pages of my site one by one, I seek that unity of ideas that can draw together designer and user

Notes on Readings

MacDonald, Chapter 9

In Chapter 9, “Page Layout Tools,” MacDonald instructs the reader in dividing a web page into parts. He names the two methods by which this can be achieved, using an invisible table and using CSS rules for a style-based layout. He explains the difficulty inherent in designing pages for multiple screen sizes as well as the two options for doing so:

• Proportional Sizing: The layout will shrink or expand depending on the size screen it is being viewed on; reduces white space but can cause text to appear very large or very small
• Fixed Size: The layout will always look the same but must be reasonable for a variety of different browser settings

Next, MacDonald discusses the element of tables on web pages. The entire table must be contained in a <table> element, every row within a <tr> element, headings (optional) within a <th> element, and the information in each column within a <td> element. Borders can be added with border attributes (e.g. <table border=”1″>) and default borders can be changed with CSS style rules. The table’s dimensions can be specified either as a percentage of the window (relative) or as a specific number of pixels (absolute).

MacDonald then explains how the <table> element can be used to position virtually every element of a table on the page. However, this is not recommended for large sites as even minor changes will need to be copied onto every page. The preferred method is to use the <div> element in conjunction with CSS style rules, thus changes to a linked .css file will be applied to every page in the site. A contextual selector can be used to affect only certain elements next to one another in the type selector (e.g. ul b { color : red } will make only bold text in unorganized lists appear red). An id selector can be used to specify a rule appearing only once. This is done by using a pound sign rather than a period to specify the rule name (e.g. div#Menu means that the Menu divider can only be used once in a page) and by using id= rather than class= in the attribute field.

MacDonald moves on to discuss different ways <div> commands can be used to divide a page. The float : right or float : left style rules can be used to create floating boxes of text. A z-index style rule can be used to layer various elements. The browser will always display the element with the greatest z-index on top. MacDonald concludes with tips for combining relative and absolute values.

While I have been using <div> elements and CSS style rules to organize my site, it is good to know more options available with the method. One disadvantage of using Dreamweaver is that it is so user-friendly that sometimes I will adopt a given method without understanding the principles underlying it, thus I will often be unaware of the alternatives. MacDonald definitely made the invisible table method sound like more trouble than it is worth, so I will definitely it on my site. Still, it is helpful to know how to display information in tables. I doubt there will be any on my site but it is a useful future reference kind of item.

MacDonald, Chapter 10

In Chapter 10, “Multipart Pages,” MacDonald discusses the ins and outs of building sites with many web pages that share a similar appearance. The 3 methods for synchronizing page layout are:

• Server-Side Includes: Will copy contents of one page into others but is not supported on all types of web servers
• Frames: Will display more than one web page in the same browser window, frowned upon and complicated method
• Templates: Dreamweaver and Microsoft Expression Web features that allows one to create content in one page that is repeated to every page on the site, method is application-specific

Server-Side Includes (SSIs) are instructions for a Web server to include common content (not style) on every page of a site. One will save a file with part of an XHTML document (e.g. menu.htm) and then use a command to insert these lines into the web pages (e.g. <!–#include file=”menu.htm–>. However, this will not work in files labeled .htm or .html. One must append files for Apache servers as .shtm or .shtml and files for Microsoft IIS Web servers as .asp or .aspx. Files saved on a client hard drive cannot be previewed with the inserted content.

Frames must be contained within the <frameset> element. Frame column or row distance must be set by percentage of window or as pixel values (an * can be used to denote “all remaining” when absolute values are used). All frames must be given in a named attribute (e.g. Menu) and a source attribute (e.g. menu.htm). All links must specify in which frame the new page is opened in a target attribute (e.g. <a href=”welcome.htm” target=”Main”>Welcome</a>). A target=”_blank” specification will open a new window for the link. Frames will have a resizable border by default, this can be eliminated with frameborder=”0″ and noresize=”noresize” attributes. Scroll bars will appear for each frame with content too large to be viewed in one window (this can be eliminated with a scrolling=”no” attribute). It is a good idea to include <noframes> elements in case a viewers browser does not support frames

Page templates are a simpler tool for batch editing. They can be time consuming as the editor will need to apply changes to every file, and fragile as it depends on a few comments it is easy to accidentally delete. First, one simply selects File → New → Blank Page → XHTML Template → Create. Then the designer will create an XHTML file as normal but insert comments (e.g. <!–TemplateBeginEditable name=”body”–> and <!–TemplateEndEditable–>) in between the regions one wants to appear different on each page (typically the title and main content areas). MocDonald concludes the chapter by warning the reader of the many subtleties involved in using this method.

This chapter certainly gave me an appreciation of the many complexities involved with technology in general and web design in particular. I feel very fortunate to be starting small, as managing larger sites is definitely a daunting task. In particular the frames method struck me as being horrendously complicated, I doubt I will use it if I should find myself attempting to create a larger site. MacDonald did a wonderful job of pointing out the quirks of each of the methods described, and there is certainly a valuable lesson to be learned about paying attention to detail.

Beaird, Chapter 3

In Chapter 3, “Texture,” Beaird discusses the elements of digital imaging for the web. He begins with the basics to include:

• Points: The most basic unit of form
• Lines: Several points joined together
• Shapes: Lines that are joined together

Shape can be used to make web sites look more inviting in a variety of ways. Rounding the corners of squares and rectangles give sites a more organic feel. One test of shape is the economy of line, which involves tracing over a picture to see if the outline still looks complete. Three dimensional concerns include:

• Perspective: Smaller objects appear farther away
• Proportion: Size can represent distance as well
• Light and Shadow: Can be used to make objects appear fuller and more noticeable

Patterns can be used to add texture to sites with very little storage through tiled backgrounds. Background images can be patterned in a similar manner, either across the whole page or only the x- or y-axis. Several elements are combined to form a distinctive style. The appearance of age can convey a sense of nostalgia. Light animations can create a child-friendly page. Large type and generous use of white space can give a site an advanced “web 2.0″ look. Beaird concludes with a recommendation to read up on art history to get a feel for exploring new artistic territory and giving examples from his Florida Country Tile project.

As always, Beaird gave me a lot to think about. I found it particularly helpful to think of web images as a collection of dots, lines and shapes. His suggestion to look to art history for further information regarding the development of style I also found helpful and I certainly plan to do so as soon as I get time. I feel like at this point I have a relatively firm grasp on the science of web design, but I have always been somewhat of a stranger to art in all of its forms. I am very grateful for a book like this one that can use something I know to connect me to the principles of art.

Website Review

http://colorsontheweb.com/

Colors on the web was a very beautiful site with an organic design that reminded me of the rainbow of light coming out of the prism. I found the part on the physics of colors very interesting, it made me wonder why a color wheel based on the electromagnetic spectrum is not used. The color wizard and “spin the color wheel” tools I found very useful and will most likely take advantage of in future endeavors. I was somewhat annoyed that the color basics and color scheme library was not available, but I am sure that once the author completes the reworking of the site referenced on the blog it will be an even more useful reference.

Final Thoughts

In many ways it is at a beginning rather than at an end that the underlying unity of all things is apparent. As my site begins to take shape, the possibilities begin to crystallize in my mind and I see how it can fit into the larger universe of art and science, technology and communication. Soon it’s time will come, others will share in it and the joy of my creation shall be complete. Then it’s time too shall pass, and I shall move on to other things, but always there will be new creations. New territories to explore. New vistas of the mind to expand the consciousness and take away the breath. The server space will be recycled, and another student will know the joy of creation that I have found. Birth, death, and rebirth; such is the cycle of time that we all are a part of.

Until next time, take care of yourselves, and one another.

Farley