Sun Oct 02, 2005

Second week of web design madness

This week's web design class was fun. We had three new students attend, bringing the class total to 8 folks. Now onto the brief summary of week two..

Our first topic was "site architecture / site mapping" which is the practice of organizing and interrelating content so the reader remains oriented and gets answers. A site map contains an index of the links of your web site in a hierarchical fashion and is generally good if you have a fairly large website (20+ pages). The handout that we went over in class has not been uploaded yet but look for it at the end of the week if not sooner.

Display resolution was our next topic. Each monitor might display your website differently than the one you designed it on. To counter this problem, when you begin designing your website, think about the monitors that your target audience might be viewing your website on and the content that you will be offering them. Do you want to cater your website to a large mass of internet users? The most common resolution will either be 800x600px (740x420 layout dimension) or 1024x768px (971x588). The layout dimension is the amount of screen real estate you have to work with after you take into consideration the amount of space that the scroll bar and address bar takes up. If your content is going to be scrolling then the width is the only dimension you have to worry about. The width of this website is about 690 w/o the leaves and 868px w/ the leaves. The handout has yet to be uploaded but a good link which covers this topic can be found through Screen Resolution and Page Design.

To have a fixed layout or liquid layout? To design a fixed layout is to define a set of pixel dimensions so that your website will look the same when displayed in any browser. Lets say you design a fixed layout for 800x600 resolution, when you view this in 1024x768 res then you will see space in the unused areas. I designed my blog using fixed layout, the reason for this is so that I could view it on my 12inch laptop.
Examples of fixed layouts:

With liquid layouts, you set a percentage dimension like 100% and your content will adjust to take up 100% of the size of your browser. These are a bit tricker to code but if you have a lot of content on your site and you want that content to show up on as much of your screen real estate as possible then try the liquid route. When you decide to create a liquid layout, also take into consideration how it might stretch out to look on a 21inch screen.
Examples of liquid layouts, adjust the browser and note how the layout stretches to fit the screen:

Next, we went over were image file formats like gifs, jpgs. If your image uses solid colors then it's best to save it in .gif format. If you're using a lot of colors or gradients in your image then save it in .jpg format. We also saw the difference between .jpg and .gifs on this page. File naming conventions were also quickly covered like avoid using spaces in file names and using understand instead. The handouts in class will be uploaded and linked at the end of the week.

We also went over tables and creating them in Dreamweaver. A brief list of pros and cons of using percentage or pixel can also be found in the webnotes section.

The difference between relative links and absolute links was discussed. A good explanation of it can be found through this link as well

Next, using Dreamweaver, we handcoded our own anchor links. The files for this exercise can be found in the webnotes/week2/anchorexample folder.

And last but not least, we went over link targets which controls which browser your link will pop up in. That's it for week 2. We covered quite a bit and here are the links to the handouts in the order we went over:

Site architecture / site mapping
File formats: gifs, jpgs, png
File naming conventions
Table layouts
Pros and cons of using percentage or pixel
Relative and absolute links
Another explanation of relative and absolute links
Anchor links

Posted by: brikee on Oct 02, 05 | 12:50 pm | Profile

[1] comments (24523 views) |  [0] Trackbacks   [0] Pingbacks

First week of web design class

Last week's web design class was much more successful than the previous week. We had about four students attend. Each week I'll try to write up a summarize to the class and provide links to the handouts for those who miss a class. The source for most of these notes were taken from the internet and it has been edited so that you are reading only the necessary information. The original document source is usually provided at the end of the handout incase you want to do more research.

In the first hour, we went over the fundamentals of HTML and did a bit of hand-coding in notepad. While it's great to design web pages, it's even better to know how they work and that's why I decided to do a quick run through HTML. You don't have to use all the tags but you this should give you a good basic understanding of the subject.
We went over a brief html introduction and html tag reference sheet. After which we disected this html page and the source code that went along with it (you can view the source of the page by selecting "View > Page Source OR Source"

In the secound hour, we went through the interface of Dreamweaver (a WYSIWYG html editor). This builds on the previous hour, where we went over html, now you with Dreamweaver, it will fill in the blanks for you and you'll be able to pick up some new tags. Dreamweaver is one of those programs that is great because it caters to those who like to hand code their source or for those who like to drag and drop their designs.

With the Dreamweaver basics handout in hand,I went over the panels, the workspace area and the different coding views like Code/Split/Design view. I prefer to work in split view because I can see what's going on and where. These step-by-step instructions were edited from the original post here.

After going over the interface, we went over Site Management. This is a good way to manage all of the files that will be used to comprise your website. To differentiate between a website and a webpage, a website is a collection of webpages and it's those sets of webpages that comprise a website. Before starting any website, it's good to write out all of your thoughts and ideas down, sort of like a rough draft/plan of your website.

That's a brief summary of week one. Try to attend all of the classes if you can because we cover quite a bit of material in two hours and if you do miss it, don't hesitate to contact me or Olivia with any questions. All of the notes in class can be found through the "webnotes" link and here are the handouts in the order that we went over in class:

Fundamentals of HTML document
HTML reference sheet
HTML page click "View > Page Source" to view the source
Going over Dreamweaver interface
[url=../webnotes/week1/5_sitemanagement.pdfSite Management sheet [/url] // this one wasn't handed out in class

Posted by: brikee on Oct 02, 05 | 12:09 pm | Profile

[0] comments (8799 views) |  [0] Trackbacks   [0] Pingbacks