About Portfolio There are some changes made to various pages - This page hasn't updated, descriptions & images below may not reflect actual web pages.

Sun Valley Animal HospitalSun Valley Animal Hospital

This is just practice website. I used more advanced technique and David helped me to fix problem run on IE 6. I’m now having a problem on IE 7. I finally fixed it. I wish everyone use "FireFox" browser instead of Microsoft Internet Explorer.

I will take instructor's suggestion to create website using "WordPress". There are many advantages to it. For example, who have no knowledge of web design can change content easily. I just need to learn how to customize it.


little buddha chinese restaurantLittle Buddha Chinese Restaurant

This is just practice website. Little Buddha Chinese restaurant does not exist. Please don't call or visit. The address is my dog's animal hospital, and not a restaurant.


web tutorial Web Design Tutorial - Page Layout

This is in working progress right now. Mainly I am trying to show about "page layout" for true beginners. Also I explained Browser compatibility on CSS. I think beginners should understand HTML tags and how to use it semantically. That is absolute first step. Then you should understand page layout and CSS. I am beginner in web Design and struggling with CSS everyday because visitors have different platform, monitor size, browsers, and browser versions. All those things impact greatly when designing web page.


css positioning Web Design - CSS Positioning

This site is my experiment for CSS positioning. The menu box is positioned as follow:
Page 1: Normal flow
Page 2: Relative positioning

Page 3: Absolute positioning
Page 4: Using "float" and "margin" to position menu


geisha Me, Geisha?

I went to Japan and took Geisha class. Final day of class, we had to show what we've learned to general public. We sang song accompanied by Shamisen (3 string guitar) and danced. I made a lot of mistakes, but it was all fun. Other students were unmarried young girls, so they wore colorful kimono.

I used background and banner images from Free WordPress Template. There are one large background image for body and one background image for header.
Tech note about image on body:
background-attachment: fixed; to prevent from scrolling with rest of the page. background-position: center top to make sure that the midpoint of the fast background image tile appears in line with the midpoint of browser's window.
IE 6 does not support background-attachment attribute.


taste of japanTaste of Japan

I am satisfied with this design. I have Photoshop CS4 at home (just purchased it). ROP has CS3. I love to use fancy typography for banners and headline. However some of font type exist in CS3 and not in CS4, and vise versa. This creates conflict when I try to modify it in CS3 or CS4. Font type used on this banner exists only on CS4, so I could not modify it at ROP.

I wonder why Adobe does not install all beautiful font type in every version of Photoshop.


Under the SeaUnder the Sea

I used "vista" like image as back ground. Actually I divided into 4 sections. Right side is 1 pixel wide image created from right-edge of vista-like image and repeated in X-coordinate. Bottom-side of Vista-like image is simply flipped above image vertically. Fish came from Microsoft clipart. The bird images on header and footer is by Photoshop's shape (cookie cutter)
I used Absolute Positioning with negative values and z-index of 1 to set one of fish image on bottom-left, so it looks like fish jumping out from web page.


animal hospital 2Animal Hospital Winter Special

I received promotional postcard from my dog's veterinarian. So I put every word on the postcard into this web page.

Dr. Yohler is very nice. My dog is lucky to have him as his vet.

I was frustrated by my doctors in Kaiser Permanent. One time I filled out Kaiser's survey arrived by mail. I wrote "My dog get better medical treatment than I get from Kaiser". They did not like it and they mailed me survey sheet again.


animal hospitalAnimal Hospital Fall Special

I created this website last fall. It was my third website. I had enough confidence by this time. I only spent half day to create entire website. The blue sky image was very low resolution (that's why it is free. I don't want pay for high resolution image). Also I made image more low grade for purpose of fast download. Therefore images on most of my website (not just this one) are very bad quality. It is ok with me because those are just my practice and nobody sees my websites.


what flower are youWhat flower are you

Originally I created this web page as "Elastic layout". Because I never done it before. However it does not look good when there is not much of content. So I changed to "Fixed" layout. This web page I used old school method "table" structure. I am sure web designer may ask "why do you use table for layout? Table should only be used tubular data". It is just my learning process. I need to experiment everything.


jenny and sonsJenny & Sons Tours (Final Version)

This website is for friend's relative who lives in South Africa and owns Tour company. Now this website is online. I know I can improve some of the things such as navigation bar on the footer. Jenny asked me many times about how she can update by herself. Someday when I learn Joomla may be it is possible but not now. I am thinking that she can use WordPress to update small tours that spontaneously she organizes. May be.

If she lives near by me then I can teach her WordPress. South Africa is too far away.


jenny and sonsJenny & Sons Tours (Initial version)

I didn't have any idea what web design she likes. She emailed me "upcoming Tour" and "Company Profile" word documents. I created conveyor belt style slideshow using javaScript codes from DynamicDrive.


los medanos collegeLos Medanos College

Last fall semester, I enrolled Los Medanos College "Flash" class. Class used "Macromedia Flash MX 2004" and instructor gave us "Macromedia Flash MX" cd to install at home. It was my first encounter with Flash. First day, we had to draw at least 10 cartoon images. Using Pencil tool to draw outline but lines were zigzag even I set "smooth" option. I almost cried. (I didn't know "arrow" tool at that time. I did not buy any books because I can not aford them. "Arrow" tool is to select, move, enlarge and shorten an object, also used to reshape an object.)

I didn't have courage to create web pages because last time I created my first web pages were almost an year ago. I sat front of computer and stare at screen for long time. Once started then it was easy. This website contains web pages with xhtml/css, full flash web page, showcasing Flash with tweens, effects, action script, and slideshow. "Tutorial" page I used "Frameset" and I created many xhtml tutorial pages. It was time consuming. Because I had PS Element 4 at that time and I had to paste many, many screenprint on MS Word and saved as web with filtered. Word will create DOC1_file folder and it contains all the images by image001.jpg naming convention. After that I do cropping and optimizing in the Photoshop then images are ready to be inserted in web page. Note: Navigation menu "Class Web" is actual college's class website and it open in new window.


Indian DanceIndian Dance

I met Ruth and her daughter Alie last year. Ruth is multi-talented and has many social interest from politics to cooking. Her main talent is Indian dance and fashion design. The banner image I created at ROP using CS3. The font type I used does not exist on CS4, so I could not modify it at home computer. The nine emotions slideshow (bookflip style) I used javaScript codes from DynamicDrive.

There are many free web template, images, javaScript available on the net. It helps your productivity. For example, my portfolio web, I used background images from free template that is released under a Creative Commons License and creator requested to have link to their website, so I did.


personal website

Personal Website

This is my first web design. The lady gave me Macromedia Photoshop Element 4, one of neighbor gave me Adobe Dreamweaver CS3. So I studied web design from Free Tutorials on the Internet. I stumbled on to "CSS Zen Garden" when I was searching for Japanese Zen Garden. I loved design. I used lotus image from CSS Zen Garden. I asked creator Dave Shea for permission. He said "Sorry, but the images belong to the Zen Garden. The default design is synonymous with the site, so I don't allow re-use. But thanks for asking." I didn't know he was such famous person in Web community. I replaced with free image from Artistic-designers.

This particular page used "Image swap". When you hover mouse on thumbnail image, then larger image and text will change (thank god, Dreamweaver do it for you). I started ROP in January 2009. ROP has IE 6 browser for testing purpose. Yes, my web pages display somewhat different on some of CSS attribute on IE 6. Also color looks slithery blue-gray on ROP's and other people's computers. I was saddened by agry looking web pages. I think background and all images display nicely only on my computer. I should re-write personal web pages and re-create all of images at ROP. I wonder that will make difference to the color. Originally I created pages with 780px wide fixed layout and I changed to 980px because more people have 19 inch or larger monitor now. Yes I had to edit the all Banners in the Photoshop to expand width too.


christmasChristmas

College Class Project for Christmas: We had to create Christmas theme website. Dreamweaver page, Full Flash web page, and Web page by Microsoft Word.

First page built by Dreamweaver and I added a lot of flash motions/sound/textscroller (don't be surprised by dog singing Jingle Bell). Second page is Dreamweaver Image Map. Third page is Full Flash, and Forth one is Microsoft Word web page. I don't care for this web.