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.