Project 3 Favorite Teacher

This is project 3 of my digital design class. After project 3 that we have used Fireworks to create our favorite cartoon character, we change it up this time and create a website about our favorite teacher of the school with 4 pages. A home page that contains an the basic navigation to the other pages. A biography page that talks about this teacher, and a fun fact page where we show some of the interesting facts about that teacher that usually not many students would know. A general information page about the teacher. And since I have used many images in this website, I needed to have a Copyright page, so its actually 5 pages. But before everything, we had to interview this teacher, so all the information are as accurate as possible.

For this project, I chose Ms. Ha as my favorite teacher which is the major element of my website. This website is created from the same format as my project 1 about my favorite movies. I really loved the keep it came out, so I decided to keep the layout, with the same organizations of the header, navigation bar, and the footer, also, it has 3 large circular buttons created from images with hovering effect. I have chose to use the theme color of lime green and purple, because they were her favorite colors as she said. And for the background I have used for the home page is a image of dolphins also because it was her favorite animals. For the other 4 pages, it is just grey, because it is a very good color that compliments to almost all other colors. On the biography page, I just have a image of Ms. Ha with a long biography that I have wrote about her. On the fun fact page, I have create a multiple tables, each listed her some of the fun facts that I have received during the interview each with a circular image this time created with CSS and text. And the general Information and copyright page is just very simple so there is not much to talk about.

Lab 15 Dropdown

      In this lab, we add new features into our navigation bars, text, and images to make it more interesting. After we have learned how to create a navigation bar, it's time to move farther, so we learn to make dropdown contents. Our task in this lab is to create  a dropdown navigation bar, text, and images. This can be done through the use of CSS with all those dropdown classes. For the navigation bar, we need to use a button class called dropbtn. For the dropdown text, it's just the the same divisions and classes. And for the image, we need to create a desc class there will be text or labels under the dropdown content.

     First, we need to create a dropdown class, then adjust the dropdown contents and other dropdown classes in CSS to the way you desire, so when the mouse is hovered on that element, it will dropdown something that we design it to show. For the dropdown navigation bar, I used the same navigation bar I created in lab 14, and I made a dropdown button using the dropbtn and created a other button, and the contents are the two links to my blog and my teacher's website which will appear when you hover on the button. For the dropdown text, I simply just put Hi! as the dropdown content using span. For the dropdown image, I used a image of flower I took at the amazing Gantry Plaza State Park, and the dropdown content for this is larger version of the image with a short explanation at the bottom using the desc class.

Lab 14 Navigation Bar

      This can be said to be one of the most exiting, fun, yet challenging lab we have ever had. But this is only for most of the other students in my class. Learning how to create a navigation bar was one of my most interested thing that I wanted to know about ever since I started my first project of this year. In result I have already learned how to create this through the help of W3schools and videos from Youtube. Although I already knew how to create this navigation through my research during the process of Project 1, it is nice to have a review of it to help me remember it better. 

       In this lab, I have created this navigation bar similar to the one I used for nearly all of my webpages but this one is somewhat different as it is not created along with a division as I did for all other ones and I have also changed up the colors a little bit, but it is still along the theme color of my website. I have also used the same font and a bit of text shadows as well because I just loved the way it looks. And last, we make this navigation bar appeal in all of the labs and projects that we ever created this year which is just simple copy and pasting from one lab to another.

Lab 13 Wordler

      This is lab 13 where we explore and playing around with new features that we had never knew. As we were told we will be creating a website of our favorite teacher from I.T.H.S as our project 3, I knew we will have labs during this time that is very simple, yet teaches us something new and fun. We were to write a paragraph about of our favorite teacher then use this website wordle.com to make a very interesting collage with the words that was used.

      For project 3, I chose Ms. Ha，my living environment and chemistry teacher in 9th and 10th grade. So I wrote about what I was told during my interview with her. And to make the most important words larger, all I have to do is to make those words appear more than the other ones. Such as "Ms.Ha," it was the most used words in the paragraph, so it appears the largest of then all. After randomizing for quiet a while I had finally found the perfect collage that I was looking for. It is simple, just black and white, but it had a amazing cursive letters which appeal to my eyes
.

Lab 12 New Years Resolution and Dreamweaver Configuration

       Initially this lab was for us to write about our new year's resolutions. But that was until we had a new task that is to be performed during this lab which can take up some time. However, it is very simple. After we finish writing about this new year's resolution, we were asked to create a new site for every single lab and projects in Dreamweaver. But in fact, no change is made into the server at all, we are just creating a quick short cut to all these labs and projects within Dreamweaver.

      To configure all of the labs and projects into site, first go to manage sites, then add new site. Type a name for that site, then put the local location of the folder under it. Then Put in our account of the server in it and the location of where that folder exist on the server. Repeat the whole process until all the labs and project folders and created in a site in Dreamweaver. And last, make sure to check if they are all configured correctly by checking if all of these sites can go to the remote server location where it should be without any issue.