Lab 8

      Hi, this is Lab 8. We are using CSS to create the them and using lists in our table for this Lab. CSS stands for Cascading Style Sheet. The purpose of CSS is to create the main theme of the web page by adjusting the styles of the background, text, or images. This way it is much easier to adjust the theme or style of the web page and also keep everything much more organized. We will be making a table with a list of favorite movies, favorite foods, favorite subjects, least favorite subjects, favorite music, and a shopping list. But before we start, we have to learn about the list tags. <ol> is a ordered list, <ul> is an unordered list, and <li> is the what's inside the lists. And to show that we have understand the use of the list tags in html, we had to use different list style types for both the ordered and unordered lists.

      To begin this lab, we create a internal CSS style sheet into our html document that is located inside of the <style> tag. Then we apply all the styles we want into this tag, such as the colors, the font families, text alignments, font size, and much more. Next, create a ordered list for the favorite movies, an unordered list of the favorite foods.  List 3 favorite subjects with a ordered list with capital Roman numeral and why I like these three subjects in the form of an unordered list using a disc, a square, and a circle for each list. List 3 least favorite subjects in order with capital English letters with reasons in order with one lower case English letter list and a lower case Roman numeral list. But unfortunately, I don't dislike most of my subjects, so I wasn't able to make a decision about the third of my least favorite subjects. Even the second one wasn't suppose to be there, but I needed something to be in the spot.  Then we  make another ordered list of favorite music with 2 genres, 3 artists of each genre, and 3 songs/track from them. Last, create a shopping list of all the things we want, or need, even those that are not necessary, so the list looks full and completed.

      Link:
http://techteach.us/DD2015/HJiahua/Labs/Lab8/LB8_Jiahua_DD.html

Lab 7 Troubleshooting

      This lab 7. In this lab we have to transfer the project 0, which is the first index that is designed as our home page to all our labs and project into this lab 7. This purpose of doing this is because we will be changing the index later on as we continue to complete more labs and projects. As we learn more about html, we will be applying those things that we have learned together to this index and also add each and every lab and project into this index. This way, anyone who wants to see what I have did can just go to this page and easily access all the work I have completed throughout the year in my Web Design class.

      The first step of this lab is to copy all the html files as well as the image files used for the index from the DD2015 folder into the new lab 7 folder. Then change the titles into lab 7 instead of project 0. Next, we upload this to the server and check if it works properly by trying to access all the links in the page. If it doesn't, be sure to go back to the files and troubleshoot it and see what is wrong with it. After the problem is fix, upload it to the server again. But thankfully, mine work out perfectly fine. I can see that this is a great way to keep everything organized. If something goes wrong after a update on the index page, you can always go back into the previous index then try to fix everything, since you have kept an extra of it.

      Link to Lab 7

http://techteach.us/DD2015/HJiahua/Labs/Lab7/LB7_Jiahua_DD.html

Project 0 Index

      This is our first project of the year that we have been so much anticipating for long. In this project, we will be using all the knowledge and skills we have learned from lab 1 to lab 6 and create a index.html. This index will be uploaded to our root folder in the server, so when anyone goes to techteach.us/DD2015 (the server for our class), and click on our name, they will be taken to a really organized index page that shows all the contents that we have created into the internet. Along with the hyperlinks of all the labs we did so far. And as we continue to do more labs and projects, we will update those into the index and applied new skills to it.

      So we will use the simple tags to set up the html document that we learned on lab 1. Then create a table centered at the middle with 2 divisions that divides that lab number and the screenshots of that lab, and add colors into the document that we learned in lab 4. Next, add the screenshots of each lab to the table, then make them into hyperlinks to that lab along with the lab numbers, which are things we learned in lab 2 and lab 3. Then we put the banner we have designed in lab 6 near the top, and the nameplate from lab 5 all the way at the bottom. To finish this off, upload the file through Filezilla on the root folder and check to see if it actually works.

      This is the link for this project:
http://techteach.us/DD2015/HJiahua/

Lab 6 Banner

      In this lab, we are created a signature banner for ourselves using Fireworks CS6, again. It's very much similar to the nameplate we did in the previous lab. And only the difference is that we will be using a different size, 700 by 100 with a resolution of 32 and that I had more time to carefully think about each shape, detail and the design in this one. And this time I used a different color theme to make things vary. Also I had applied some elements of a small logo that I designed myself into it, but since that one was a circle, I had to make some adjustments.

     To create this banner, I first made a blue gradient as my background. Then I created a rectangle, rotate it, and duplicated it into 4. I change 2 of them into a grey to black gradient, and another 2 into a red to blue gradient. Next, I used the text tool to place my name at the middle with a Bank Gothic font, along with the same shadow effect I applied to my text in lab 5 but with a different hue. By this time I thought I was finished, but at the same time, I felt like it is missing something, so I added a second layer of background with a similar color, and 2 curves near the edge of each side using the Doughnut Shape.

      Link to my this lab:
http://techteach.us/DD2015/HJiahua/Labs/Lab6/LB6_Jiahua_DD.html

Lab 4 Tables in HTML

      In this lab, we will be creating a table containing 16 different colors with their name, hexadecimal, and hue. To add colors in html files, you can type in their name for the basic color. And for other colors that are more complicated, you can type in it's hexadecimal number, which is a code, mostly a 6 letters and numbers combination that represents the color in html. To make a table, we first have to understand the tags for the tables. The <table> tag is to create a table. The <tr> is a row, <th> is a title/heading of a division, and <td> is a division.

      First, we make the heading with our name, date, class and lab number.I add the same background and font color as usual. Then use the <table border="1"> to make the table. Without the 'border="1"' part, you will not see your a border of the table. Since we are adding 16 colors into the table, we have to type the same tags 1 row and 3 divisions 17 times including the title.It wasn't difficult, but took me quit a while.Into the table, we add 11 basic colors that we found online. Then we had to pick 5 special colors from a really huge paper filled with many different colors and add them into the table. I gave a special order the colors in my table, so the colors that are similar won't be near each other, in result it looks more interesting and more
colorful.

      The link to this lab:
http://techteach.us/DD2015/HJiahua/Labs/Lab4/LB4_Jiahua_DD.html

Lab 5 Name Plate

     In this lab we took our first step into FireWorks CS6. And our our objective for this lab is to use it to create our own signature nameplate, so it can be used for future labs or projects.  From this lab, we have learned how to use FireWork and also how to create a name plate for ourselves. This wasn't a difficult task as long as you are creative. Since Fireworks is very much similar to PhotoShop, it was pretty easy to use. Then we just create a html document about it explaining what I did.

      To create this name plate, I first created a cone gradient with a color that I like, which is a green/blue color with black. Then I use the text tool to type my name with the Bank Gothic font. To create the shadow effect, I duplicated my text into 2, made one darker and put it behind the lighter one with just a bit of displacement. I also added a new smart polygon with 5 sides with a yellow to black gradient. Then I add 2 rectangles next to the polygon with the rectangle tool. Last, I use the same gradient I used for the polygon shape and created a star in the middle of it.

    The link to this lab:
http://techteach.us/DD2015/HJiahua/Labs/Lab5/LB5_Jiahua_DD.html

What is Jpg, Raw, Png, Bmp, Gif, and Tiff?

What is Jpg, Raw, Png, Bmp, Gif, and Tiff?

    Jpg, raw, png, bmp, gif, and tiff are all different types of images files or formats. They are used for organizing and storing digital images as well as telling your computer what application it should use to access the files.

.JPG (Joint Photographic Experts Group)

     One of the most common digital image formats from digital photography. This format is  mostly used for smaller files for websites or e-mails.

.RAW

    These types of images contains minimal processed data straight out from the image sensors. It is almost the exactly the same as the way it was captured by a sensor. They are not processed, so you cannot print them yet.

.PNG (Portable Network Graphics)

    This file format supports lossless data compression. It was created as a alternative to the .gif files. And it can support eight-bit paletted images,24-bit truecolor, or48-bit truecolor with and without alpha channel.

.BMP

     This is the bitmap image file, a file format used to store bitmap digital images. It is used for files within the Windows OS. And they are not compressed, so they are large and lossless.

.GIF (Graphic Interchange Format)
    Another bitmap image format. It is used to create short animations used just a few images that may last just a few seconds. But it's usage is only limited to an 8-bit palette, or 256 colors.

.TIFF (Tagged Image File Forma)

    This is the standard format for the printing and publishing industry. It is larger than  most of the other formats. And it can be both compressed and uncompressed by lossless compression.

Lab 3 Hyperlinks in HTML

      In this lab, we add hyperlinks to the html document we creates. We learned how to make text and images into a hyperlink, so when you click it, it will take you to another webpage. This is a little easy to do. All we need to do is to use the <a> tag is similar ways for 3 text and 3 image. And since I finished the lab early, I also added a background color, as well as a font color before I upload the html document to the server.

      To begin the lab, I created a image folder in my lab 3's folder. This folder is used to store the images that I will be converting into a hyperlink in the html document and it will allow me to locate the images a lot more easier when I am coding it. After then, I create a text hyperlink and a image hyperlink for my Web Design teacher, Ms.Ramirez's website. 2 hyperlinks for W3schools, which is a really good website to study and learn more about web developing. And 2 more hyperlinks to my blogs, which is where I talk about all the labs and projects that I did in my Web Design class. And to make the page look better and more interesting, I changed the background color to grey and the font color to green/blue, similar to what I did in lab 2. Lastly, I uploaded the files to the server so everyone can visit the webpage.

      Here is the link to this webpage:
      http://techteach.us/DD2015/HJiahua/Lab3/LB3_Jiahua_DD.html