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
Pros and cons of using percentage or pixel
Relative and absolute links
Another explanation of relative and absolute links
Hey Thao what's up. I see you've gone and re-done brikee.com with p-machine like you wanted. Look's good. Anyways, I'll be in touch.