Links to Resources
Software:
- Dreamweaver (Very, very useful, but also rather expensive. I got it through Creation Engine.)
- Adobe Photoshop (Ultra expensive. For creating graphics.)
- Paint Shop Pro (Much less expensive. For creating graphics.)
Websites on web design:
Websites I have created (feel free to borrow ideas from the source code):
My Personal History in Web Design
I have worked on several websites in the last 4 years. In my freshman year at OU (2002-2003) I created a very basic site on the students.ou.edu server using Netscape Composer. The site was created for my Intro to Engineering class; the instructor, Dr. Miller (a robotics expert) highly emphasized computers
About a year later I created a second version of my website, this time on the coecs.ou.edu server. That site's graphics were made in JASC Paint Shop Pro 7--they were then sliced, and I used a basic table format to set up the actual site. It was a very gaudy site--I had lots of circuit boards, shiny metal, flashing lights, and mouseover lights.
In Fall 2004, I started developing this present site for my Technical Writing course. I purchased Dreamweaver, and learned CSS menus, such as the one to the left. The graphics were created in JASC Paint Shop Pro 7 again--I switched to a less gaudy design. I have endeavored to follow the best methods in web design in making this site fast loading, pleasant to look at, and easy to use, both for the reader and the author.
In the Spring of 2005, I was webmaster for CE 3403 Materials, under Dr. Jinsong Pei, and I created a new website for that class. That was the first website I was actually paid to do.
From the Summer of 2004 to the Summer of 2005, I was the webmaster for the American Society of Civil Engineers, University of Oklahoma chapter. I was the first webmaster in a number of years; there simply weren't many civil engineers with experience in web design. I created the new website for them, and the new logo as well. That site is http://coe.ou.edu/asce.
In the Summer of 2006, I have been creating a new website for Fear Structural Engineering Laboratory, where I have worked for nearly 3 years. That site is http://fears.ou.edu/.
My Philosophy in Web Design
In my opinion, a website should load very quickly. To accomplish this, I usually use the same basic graphics for every page on my site so they are always in cache. Solid colors can look very nice, and tiled images can work well, like the blue "gel" bars on this site. Always use fairly conservative colors on a website. Never put text on top of an image (I did this on my first site).
Do not use Javascript for navigation bars; if it is disabled, the site doesn't work well. Do not use drop down/fly out menus for navigation. Besides slowing down loading, it makes a site much more difficult for the user to navigate. A user should be able to see everything necessary for navigation without mousing over something.
Annimation is annoying; avoid it as much as possible. The objective is to make the site pleasant, easy to read, and informative. It should be "elegant."
If you must have rollover graphics, do them via cascading style sheets, rather than the common javascript methods. I don't recommend flash, either, as if flash is disabled, the site becomes unusable.
I use Dreamweaver as my primary web development platform. All graphics are created in Adobe Photoshop CS2, and then sliced. Since I want my pages to be expandable, I create my own nested table system for the sliced images. The newest site, fears.ou.edu, is a good example of this. I nest 4 tables deep to get the behavior I want: the content can expand both down and to the right without "pulling apart" the menus, title bars etc. Strategic images are tiled (via CSS, of course) to fill in the extra space. On this site, the blue gel bars are the only things that have to expand. The menu is actually in a table "on top of" the left blue gel bar.
My System of Web Design
Here is my basic system for creating a new website:
- I sketch out a few basic ideas for the format of the site with paper and pencil, and discuss them with my sponsor. The basic design is decided upon. Time: 1 day.
- I start drawing the graphics up in Photoshop, using layers so everything is independently modifiable. My Fears site's Photoshop file used something like 40 layers. I call in my sponsor to check out whether the format needs to be modified, the colors changed, etc. Time: 7 days.
- Next, I slice the image up into lots of pieces (66 for the Fears site). The objective is to think ahead to the construction of the tables, and slice the image strategically so that the tables can be created in such a way that they are expandable. Each slice is optimized separately; some are gif, some jpeg, and a few png. Time: 1 day.
- I then turn to Dreamweaver, and a blank page. I create the basic table, and start nesting tables. I insert the sliced images into the tables. This may take some trial and error to get right, so nothing pulls apart when the body expands. Time: 3 days.
- The menu is created using CSS and background images. It's rather complicated, but simple... one has to tell the browser exactly the right things to get the right results. My first effort took a couple of weeks before I got it all right, despite the fact it really wasn't that much code. This requires some serious hand-coding. Time: 3 days. If you're lucky.
- Okay, the basic template should now be done. It now has to be validated in the major browsers. The Fears site hit several errors. Internet Explorer doesn't handle proper coding correctly all the time; the CSS menus are tricky because Firefox and IExplorer handle the CSS differently. I recommend starting with a working model menu, and varying from it as little as possible. Time: hopefully less than 1 day.
- The next step is creating the "template" in Dreamweaver. Editible regions are created, so that the template itself cannot be modified. Time: less than 1 day.
- Finally, the actual structure of the site is created: pages are made that the menu links to. Secondary menus in secondary templates (itself a whole other and difficult subject) can be created for deeper sites, like I used at the Fears site. Time: 5 days.
- At last, the actual content is inserted and maintained. This is actually the most time-consuming part of the process, as it is on-going and open-ended.