Week 10 in Website Design and Implementation

After experiencing this class, and trying to find a coop. I learned that I must continue to practice, record all of my sketches of websites, and keep doing photoshop tutorials. I met a lot of great people, and learned a lot from them. Over the summer, I will continue to learn php, and making template websites to use for interviews. My goal is to have 10 templates posted on my RIT web address. I hope all works out well. Till then, I will continue to post new things I learned in order to keep record of my improvement.

Project 2 in Website Design and Implementation

Here are my six links:

1. Home page - script for the pull down menu.
2. Home page - contains a script for a picture to pop up when you click on my image
3. The Clinic'ue - contains a script for the drop-down menu for services
   
4. The Clinic'ue - contains a PHP contact form
   
5. Home page - contains a time and date script
6. Contact page - contains a time and date script

Typography on a Webpage

It was hard finding a poem. I had this great idea of finding a love poem and having hearts in the background, but it was hard finding a FAMOUS author. There were tons of website where users could post poems they created, but I wanted something well known. I also, didn't want to restrict myself to website that was provided in class.

I found this sad love poem by Alexander Pushkin. The poem is actually in Russian but was translated. I found the translation here.

It's a really sad poem, and creating the site around it, I wanted to keep it simple. I was disappointed though, because I wanted to use fonts that were similar to someone writing a letter. I felt limited on only using Verdana, Times New Roman, etc in order to make sure that it could be seen in all browsers.

Outside of that, the page is very simple, but I created it in this manner to make the poem have impact. I also made use of positioning elements.

In terms of html, I learned to use em instead of percentage when using relative positioning.

I will search google, and post ways to get around the font issue, besides posting a picture of the font you want to use. I will get back to you with more details.

Here is the link to my page: http://people.rit.edu/~ifo0912/409/poem.html

CSS Zen Websites

I checked out CSS Zen Garden and I found two sites, one that I liked and another I disliked. Both used a good amount of CSS, and after looking at a lot of the examples on the site, I realized that only the text was seen in the source. Images and the entire layout was placed on the webpage through CSS.

Bad Site:
Maybe its because I am not a lego fan,
but I really disliked this example of CS. The text is
too ackward and plays with my eyes. It doesn't
make use of its whitespace in a manner that is appealing.
Also its navigation is close to the middle of the page,
which I find ackward. Overall, there is too much going
on for me to notice the text.





Good Website:
What can I say, when it comes to designing a website,
I go the more professional route, and I was shocked
after viewing this site. It jumps out of you, and the
use of colors, and creative images, makes it really cool.
I need to practice more on splicing images, and having it
look together on a website.

Personal Critque of Website

I personally like my website, but I have much to learn in terms of graphically appealing images. I need to format my banner so that it is the actual size that I want it on the page. This reduces seeing pixels when trying to stretch and reduce the image size.

Do you have any input about items I should work on?

Organizing Without Tables

Being in Web Design and Implementation, I am often tempted to use the OLD version of tables for organization. I guess it is because I am not used to the using absolute, float, and relative, yet. I have to play around with the content in order to make these work, but like I always say, "PRACTICE MAKES PERFECT"!

Here are some cool notes:

CSS Positions:
Relative
-places an element at an arbitrary location in the page
- container is positioned relative to its usual position
- property's include top, left, right, and/or bottom
- Use em or %, not px

Absolute
- positions an element relative to its position in the page
- property's include top, left, right, and/or bottom
- removes data from the container on the page and allows us to place it anywhere we want

Static
- doesn't move from original position

Fixed
- Similar to absolute
- Computed in respect to the viewpoint
- stays on the screen
- not supported in Explorer

Finally
- Useful for multi-column layouts


Other CSS tags:
Overflow - tells the computer what to do when the container overflows

z-Index - allows for layering

Float
- often the best solution for pages

Tips:
- Set Padding and Margin explicitly

Homepage in Website Design and Implementation

I am so excited to create my home.html page. Here's how it is going:

1. Outline
2. Creating a Banner and Buttons




3. Coding

My coding seen by viewing the source of my page.

4. Editing

I had some difficulty validating my page because of the javascript. I learned to make sure everything is lowercase and to comment out javascript and declare it within brackets

So what do you think?

http://people.rit.edu/~ifo0912/409/home.html

Unfortunately when I went to revisit my banner, all of my hard work was BLANK!
This is a good lesson to remind everyone to save often, and to save under different names. Luckily, I saved my banner as a jpeg so I used that for my website. I will revisit it later, as I am infatuated in making a cool border and a nice layout for webpages.