Zen Garden Research

For the zen garden, I'm thinking to do a beach inspired. I want to find a picture of sand so I can use it as a background. For the layout I want to use blue for water and create boxes so I can put the text.

This one is an ocean inspired. I like the concept of the design, it's what I was heading for to design but I feel the layout could be different like possibly adding more details around the text than making it simple.

This one is another beach inspired. I definitely like the layout and color scheme. 

This last one  is another beach inspired. I like the concept of the design I think it should've been a different color and layout.

Tutorial and Zen Garden

Today I presented my tutorial to the class. I was pretty nervous but I made it through and everyone seem to understand it. I just needed to optimize my images because they were running slow and the images were too big.
Zen Garden- For the zen garden, I want to do a fun design, more like a beach theme because they didn't want anymore flowers or anything related to garden. I'm thinking to add sand/beach on the top with the title and have the sand at the bottom maybe with some animals or toys.

Midterm Tutorial

Hi guys today I am going to show you how to create sliding pictures by using css. There was a lot of awesome tutorials online but I thought this one was cool and I would like to share it with you. Here is a demo of what we are going to do.  I will have the pictures in a folder and will put it in the transfer drive.

First we have to open up dreamweaver and make a new page. We are going to make a div class for the h1. We are going to name it "Picture Gallery". Instead of making a separate css were going to do it on the same page.
                                           

It will start to look like this.

                       

At the bottom of h1, we are going to make 8 boxes with a tag called "boxes". We are going to make a class outside the "boxes" tag called "pics".

For the "boxes" we have to add we have to add float, width, margin, and etc.

It will look like this. 

For the "pics" we have to add width and height.

After we added the width and height, it will look a bit organized like this.

Then we are going to add the pictures.

1.

2.

It will start to look like this.

Now we are going to make the box move when the mouse is over the picture.

We are now finished and it will look like this. (I put the mouse on the 3rd picture and it moved to the right to show the whole picture)