Final Web Page Design Journal

For my web page final for CIOS 157, the audience was other photographers and possible customers for my photography works. For my color scheme I did look at Adobe’s Kuler site in order to get an idea of some complementary colors to my web page banner which has a brown scheme. Blue colors were in the mix and I do personally like blue. The color blue is, according to some web sites I visited, supposed to have a calming, peaceful effect. I chose yellow and white for my text colors because they stand out against a blue background. The text is of the sans serif families, so it displays a much cleaner text on the video screen. I like clear, very readable text when I am visiting a web site, after all, folks visit web sites to garner information or view pictures etc. and one’s website visitors don’t need to go away with strained eyes. They probably won’t come back.
Even though I like my website navigation buttons, after completing my web site pages, I am not sure this really was a good idea. The buttons take a long time to load; particularly the hover part of the code which does not seem to respond right away. I am thinking the graphics take up too much band frequency. My photographs also need to be smaller thumbnails, which don’t take so much time to load. My aim was to make them pleasantly visible, but I need to learn the code that makes a particular photograph become larger only if the viewer wants to see the picture.
I validated pages as I went along to make sure I was following the current web page standards. I learned the mantra ‘Web-standard compliant pages last longer and are easier to maintain. My attempt at 508 Accessibility compliance was to make everything on the web pages very readable, even for us ‘older folk’.
I tested my web pages on Internet Explorer version 6.0, Opera version 9.62, and on Mozilla Firefox 3.0.4. On all three web browsers all my navigation buttons worked. My Spry code also worked on all three without any problems. On Internet Explorer 6 my photo borders did not display accurately. They were black instead of a dark gray ridge type of border. The other two browsers displayed the borders accurately.
I have been thinking about my website design for a number of weeks, and taking into account the requirements for the project. So I did most of my storyboarding in my head. But a bigger project, especially if the web page was being designed for someone else, would require some serious ‘on paper’ drawings or ‘computer work’ possibly using Fireworks planning. My pages turned out, for the most part as I envisioned they would, but I need lots more practice in order to turn out a truly professional piece of work.

The Final Fireworks Tutorial

The Final Fireworks tutorial was the water drop. It took a several times through before I finally completed a good water drop, but I am impressed with what Fireworks can do. I tried to do a text wrap. This was a tutorial that filled a shape with text, but it wouldn’t work. I guess what I was trying to do is only possible in Fireworks CS4. Many design actions are possible in Fireworks, even CS3, though. Now, if I can just remember how to do them.

Simple Form Assignment

This was rather a challenge to line up all the boxes in the form. I had to go into HTML and keep adjusting the horizontal size of each box till it looked good on the screen. I was able to modify the text size, height, color, etc. in CSS after I figured out what selectors controlled what text in the HTML code. After getting the boxes lined up as close to perfect as I could, I checked the page in IE 6.0, Opera 9.62 and Mozilla Firefox version 3.4. All the boxes were lined up well in Opera and Internet Explorer, in Firefox the message box was a tiny little bit longer.

Spry Assignment

Completing this assignment gave me a glimpse of the possible capabilities of using Dreamweaver as a tool for web design, but this semester we did not really focus a lot of time on learning how to use Dreamweaver. For this reason, working on the Spry code seemed out of place. I realize the point of this work was to familiarize us with Spry code, but a little more time spent on learning the basics of Dreamweaver before tackling this assignment would have been nice.

I changed the color of the Collapsible Panel Open and Collapsible Panel Tab background color to #032537, a dark blue. I copied the photo tips list from my midterm assignment into the HTML code and copied the code to make the list work into the CSS for this assignment, and I changed the text color to white.

CSS Positioning Assignment and Slideshow Tutorial

CSS Positioning Assignment

Each time I work on a CSS code assignment some new aspect sinks in. With this assignment the use of margin and padding became clearer to me. The breakout picture on CSS box model hierarchy on page 18 and again on page 263 started to make real sense.

For my wrapper background I made a very small image and used CSS code to automatically repeat the image thus saving download time or bandwidth use for a future user of my site.

The importance of getting the closing div tag in the right spot is also important. I kept trying to get my wrapper to display below my ‘boxouts’ in the html code. I just could not get the page to work. The code validated and everything, so I had properly closed all the tags; but the page did not display correctly. Finally after printing the html code and physically matching each opening div tag with its closing mate I found the error. I think I will start making comments as I go so I can see where selector tags begin and end.

Am still trying to make some sense of some of the Fireworks menus, but there are definitely some good aspects to this program. With Fireworks all you have to do is click the mouse pointer on the object you are working on and it activates that layer, in Photoshop you have to go over to the layer panel to activate a particular layer. Of course Photoshop and Fireworks are designed for different purposes.

Slideshow Tutorial

The slideshow tutorial in Fireworks was pretty straightforward and easy to complete. I learned one more procedure that can be done in Fireworks.

Fireworks Prototype Practice

The Fireworks program is beginning to make some sense to me, and it does have some handy tools that are not in Photoshop. The paste inside tool is a fun tool to use. It allowed me to create some graphics for navigation buttons using some of my photographs. I also finally figured out how to lock together specific bitmap images under the layers’ bar using the group and ungroup tools under the Modify directory. I remember using these tools in the ‘create a button’ exercise, but I guess it didn’t sink in at that time what the command’s purpose was. Yea I finally got it.
This exercise also let me see that Fireworks can be used as a computer tool for storyboarding a web page design.

CSS Positioning Assignment

I followed the directions on pages 278-306 for completing the assignments. I did all of them one right after the other for the most part. Toward the end I copied and pasted a little bit because I am not the world’s fasted typist. But the exercises gave me chance and some practices too see how to set up different layouts for web pages. Using these hands on exercises provided me with a methodical tool to view the different styles, the boxouts, the sidebars, the columns, and so on. I think this method would have helped me get a grasp on the earlier chapters in the textbook. Looking back at the first chapters we read for class I see that there were a few practice exercises, perhaps assigning specific practices exercises in the beginning would have help me understand the code a little quicker. I tried to just read the first chapters in the textbook, but it was hard to follow; doing the actual practice code in a methodical manner in these later chapters really help me see what was going on.
As with the Table tutorial exercises, I changed the meta tag for character encoding to match the character encoding tag for the html, so I would not get a warning in the html validation of all my exercises.

Tables Tutorial Comments

I followed the directions on pages 242-250, using the required files for “Building the table” and “Styling the playlist table,” to complete the assignments. I changed the color in the ‘th-header-tag’ from c9c9c9 which is a gray to 006600 a green

I used the Doc-type and header from the xhtml-basic.html from the basic boilerplates in chapter 1 of the textbook practice lessons for my html page. When I finally completed my assignment and validated the html page, it validated but with a warning. The warning told me that the character set encoding for the html (iso-8859-1) and the meta (utf-8) tags were different and to validate it took the first direction for encoding which was from the html tag. I made the two the same (iso-8859-1 to remove the warning. So both the CSS and XHTML validated without any problems.

I replaced the last three items in the music list with three songs from my IPod list. And I changed the color of the background of the tfoot tag from #dddddd a gray to #0000ff a blue, and the text of the same tag from the color #555555 a dark gray to #ffff00 a yellow.

Midterm Blog

Kathleen M. Freeman
CIOS 157
Mid-term Design Journal

Audience
The audience for my web-site is people who are interested in photography. Ones who want to purchase photographs and those folks who just want to look at other people’s work. A website of three pages is certainly not adequate enough to meet that audience, but it is a start.

Color Scheme
I have been looking at different photographers’ websites for quite awhile, particularly those of landscape and wildlife photographers. Many seem to have dark backgrounds. Maybe they use dark backgrounds to highlight their work. I did use the Adobe-Kuler webpage to determine the complementary colors that were needed. I used four of the five colors in the set. The base color was the color of the letters in the banner. The background color of the banner, which was also part of the set of colors, was modified in Fireworks and given another texture. The background color of the website and the text lettering in the site itself utilized another color of the complementary color set. The wrapper color was the final color that I used.


Storyboarding
I did not actually sit down and draw a rough sketch of my site on paper, but I have been thinking about it in my mind. However, I can see the value of drawing rough sketches or storyboarding as the book calls it if one is designing a number of pages for a website. If one is designing more than 2 or 3 pages for a website, the ability to keep track of the design could become very burdensome. If it is a large website and more than one person is contributing to the design, storyboarding the site becomes essential.

Writing the Code
Writing the code for this assignment was a very definite learning experience. I looked at the code from our previous assignments and copied and pasted at first just to get started, but as the project moved along I got into the swing of things and the different types of code to format a webpage became more meaningful. I especially became more comfortable writing code to setup links for pages and items on a page. And using div ids for various formatting needs on different pages began to make sense. I still have trouble with lists. On my second page I was trying to use an image instead of bullets in my list, but the image kept appearing even for all my page navigation tabs. In CSS, if I put the navigation code first than the image disappeared, but when I put the list code first the image took the place of the plain bullets, as I wanted it to, but then the image also messed up my navigation tabs. So I gave up and took out the image code and let the bullets have their way. The bottom line, whichever code came first in CSS took control of the “ul” and “il” code. I was never able to solve the problem. I think a “div id” selector might work but I couldn’t figure it out for this assignment.


Internet Browsers
I checked my pages with Internet Explorer 6, Mozilla Firefox, and Opera. The web pages worked well on all three browsers. The only major problem that I noticed was the Owlhoot banner in Internet Explorer was not centered. It was over an eight of an inch to the left. I do not know how many pixels that would be but it was noticeably off-centered.

What Did I Learn
The main thing I learned and suggest to others is to check each little section of code you write to see if it works before moving on to the next section. Writing the code for many different parts of the design, or changing many things at once if you are having problems is not a route to success. If one changes too many things at once than it becomes confusing as to just what changes actually caused the desired or undesired results.

My Webpage url is:
http://uashome.alaska.edu/~kmfreeman2/Midterm/KathleensMidTermPage1.html

Week Five Notes

Week 5 Blog Notes
I tried for many hours to attempt to modify the canvas size, and then change the background color. I was able to modify the canvas size but could not change the color of the enlarged canvas without covering the image I was trying to display. I haven’t figured out the solution to that yet, if there is one. Anyway I did complete the Modifying Canvas Size.

I completed the Ellipses and circles exercise. It took a little while to find the ellipses tool. I knew it was in the vector tools, but all I saw was the rectangle box. In Photoshop all one has to do is right click on the tool and the other tools become visible. With fireworks one has to scroll down on the corner to see the other tools. It is a simple procedure, but I didn’t know that till my daughter helped me on that. Lesson learned! I needed the Ellipses and circles exercise to complete the Mound button exercise, so that is my example.

I did the mound button exercise. The exercise wasn’t too difficult to perform. The trick is learning how to use the different tools in fireworks. One has to search out the various tools that the exercise directions give. For this exercise one cannot do the “Modify> transform>rotate 180 degrees” command before doing the “Select> contract Marquee> 1px command. It won’t work in that order.

I completed the Transparent Text exercise, which was necessary to complete a copyright symbol. I used the Transparent Text exercise with the copyright and current year symbol to attempt to complete the Custom Watermark Command. However when I tried to import the copyright and year watermark symbol it wouldn’t work, I ended up just dragging the copyright symbol image from my file to each photo. I am still working on import issue.
With these exercises I am very slowly learning Fireworks.

Week 4 Comments about Webpage 2

Week 4
Working with the CSS code was challenging. It was made easier, however when I discovered the practice CSS code on Patti’s site. The practice code gave me a template to study, which made putting together my code page much easier. The textbook has the information in it but I was not getting the big picture so to speak.
One thing I definitely learned is upper case letters and punctuation even in the comment section of XHTML code makes it impossible to validate that code.

Week Three Comments

Week Three Notes
Am still getting my bearings for doing the file transfer protocol or ftp and validating my code for errors, even setting up for and learning the technology to participate in the class has been a challenge, but still interesting. I am still plugging along and have not given up yet. Last week's class provided much needed information for future progress.

Week Two Notes

I am still trying to get the basics figured out. Since I missed the first week of class, at least I couldn’t check in because of technical difficulties, I only discovered last week that my microphone for class was not sounding too good. So hopefully I have that figured out and I can say something intelligent and sound ok at the same time for the third class.

I have done some other types of computer programming in the distant past, and after doing the readings for the assignments, I am hoping that my brain can reawaken some of those previous programming skills. Only time will tell, however.