Lab 11 Reflection Journal

         For lab 11 we made a website prototype where we linked pages together. The software I used for this lab was Fireworks and Dreamweaver. I created this prototype using Fireworks. I made a Fireworks document which was 700 by 700 and made 4 pages. I named the pages home, bio, masters, and process. Then I right clicked on the page that I named masters and clicked set as masters page. Then I used the rectangle tool to make a blue box and also I made a banner that says lab 11 by Sheima Begum. I also put 3 buttons which were named homepage, biography, and process on the masters page. Since I put it on the masters page, it showed up on the other pages as well. Then I went to hompage where I put a picture of my cartoon character and used the text tool to write this is my homepage to distinguish it from the other pages. 

         On the bio page I put another picture of my character and wrote this is my bio page and also text on the character. On the process page I put pictures showing the process of how I made the final image starting form the sketch of the picture. I also labeled it process page and put description on images. Then I used the slice tool on each button and I right clicked on it and put in a behavior and linked it to page according to the button. When I finished I exported it and checked only some specific boxes. Then I submitted it. I liked this lab because it was good practice of showing me how my project 2 would be made and how it would look like in the end. So that thethings that I learned in this lab would be useful for my project that I would make later on. 

Lab 10 Reflection Journal

         In this lab, I used Fireworks to create this rollover gif. This image is one of the images relating to my project 2. I opened up a Fireworks document where I made 2 states and in the page I had the layers of my image. I copied and pasted some of those layers (the ones that I selected) into the second state. this was the first time we used the hotspots tool. I used the rectangle hotspot tool and covered my image on the first state and then I right clicked it and clicked add swap rollover behavior and made sure I had it go from state 1 to state 2. Then I did the same in state 2 and when I finished it all I first previewed it in the browser to make sure that it works before I exported it. Then when I saw that it worked, I exported it and then I submitted it onto jupitergrades. I liked this lab because it was really cool having the image go from one state to another and since its a gif it keeps on repeating itself. It was hard at first to do this lab because I would forget the small details which wouldn't make it work but when I went over it and made it work, it felt good. 

Lab 9 Reflection Journal

                           

       For lab 9, I used Dreamweaver for the coding and uploading the lab to the server. It was the first time we used Dreamweaver so it was a bit weird for me since I wasn't used to the software. I first made 3 headings which contained my name, digital design and the lab number using the <h1>, <h2>, <h3> and their closing tags. I made a table that is 2 rows by 2 columns. In that table I inserted the images of the wire-frames for project 2 that we had to create. I had to scan all 4 pages of my wire-frames first and save it on my flash drive. Then I went on Photoshop to change the brightness, saturation, and contrast so that the writing on the paper would be more easily seen. Doing this lab was helpful because since I already had the wire-frames scanned I didn't have to re-scan them again later and I could easily put the images in my project.

Project 2: Favorite Cartoon Character Reflection Journal

            For this project I created a website based on my favorite cartoon character, Mandy, using Fireworks. I first drew a wireframe planning out how the final product will look like. I made a few adjustments to them, like adding another process page while creating it. Looking at the wireframe, I made my project according to it. Using Fireworks I created the banners and buttons. I created the homepage button, the process button, the bio button, and the more information button. I also created the banners by using the rectangle tool and text tool. I made a Grim Adventures of Billy and Mandy, Biography, Process, Process (Part 2), and More Information banners. I made the background of this project using PhotoShopCS6.

           For the process of the images, first I drew a picture of Mandy on a white sheet of paper. Then I scanned the image and saved it on my flash drive. I opened it up on Photoshop and used the brush tool to color it in. Since I was coloring the picture I drew in layers, I made a new layer each time and then in that layer I colored in a specific part of the drawing. I erased the white part surrounding the image so that when I imported it in Fireworks only the image would be there so it would fit well with the background. Then I added effects to the image so it would look realistic, more 3D than 2D. A few effects I used were shadow drop, inner glow, and outer glow. Since I drew 3 pictures, I did the same thing for each of them.

          Then when I had all of my images, I imported them in a Fireworks document which is 700 by 700. I have 5 pages: the homepage, the biography page, the process page, the second process page, and the more information page. Then I used the slice tool to slice the buttons and I linked them to the page according to what it was labeled. When I finished I uploaded it using Dreamweaver and submitted it on Jupiter grades.

Lab 8 Reflection Journal

             In lab 8 I had to create a table that had a list of my favorite foods, favorite movies, favorite school subjects, least favorite subjects, favorite music and a grocery shopping list. I used textedit to write the html coding and it was my first time using the ol, ul and li tag. I made an unordered list of my favorite foods, then I made a ordered list of my favorite movies. Then I made an ordered list which contained an unordered list for my favorite school subjects. Then I made an ordered list that contains another ordered list for my least favorite subjects. Then for my favorite movies I had multilevel ordered list and for the grocery shopping list I made an unordered list which contained an ordered list. I added an external css stylesheet for this lab to enhance the headings, and the whole table. It took me a lot of time to finish this lab because there were so many requirements for the items in the table and also it was confusing too because of all the coding. Sometimes I would mess up and then I would have to go through all of my coding again to find the mistake and make sure that I fix it. Sometimes I would put an unnecessary ul tag and also I would forget to close the tags. I felt very relieved when I finished this lab because it came out to be very decent and I liked the colors that I used since they went well together. The part I enjoyed the most was putting my own opinions and thoughts for the type of music that I liked and more.

Lab 7 Reflection Journal

         In this lab I had to copy the index and paste it into my lab 7 folder and make it so that all the images appear and that the links work. First I created a lab 7 folder in my labs folder. Then I went to my index file and right clicked it and clicked copy index. Then I went to my lab 7 folder and right clicked it and clicked paste item and then I opened the file in text edit. Now I had to correct my links for the images so that it works. For me I had to put ../the folder name/the image for the images to appear. I did this for each image hyperlink and then I saved it and saw that the images appeared and then I made sure that each link worked when I clicked on them. Then I uploaded it onto FlieZilla. And then I submitted it on jupitergrades.

Project 1 Reflection Journal

In this project, I made a website based on my favorite movies. First I made folders in my dropbox for project 1, FM1, FM2, FM3 and sources in my project folder. Then I made an image for the background of my whole website. I opened up Adobe Fireworks and I used the text tool, the rectangle tool and the brush tool to make a curtain. I made a curtain as my background because I wanted to have it there to present my 3 favorite movies. Then I used TextEdit to write the coding for each individual webpage. I used the html tag, the head tag, the link rel tag, the title tag, the center tag, the body tag, the headings tag, the img src tag, the paragraph tag, the a href tag, the table tag, the td and tr tags and I closed them all. I did this for each of my favorite movies. 

I went on google images to find the images for the movie posters of each movie. I copied the link to the page where the image was found and the link to only the image itself and I put it in my coding to make image hyperlinks that lead to that page. So when you click on the image it leads you directly to the image itself. Also in the sources page I put the link where I found the image for copyrights. In the sources page I put the link next to the picture that shows where I got the movie posters. I made the banners for each of the movies using Adobe Fireworks. I made a new document and I put it 700 by 100. I used the rectangle tool to make the background red and I wrote the movie name using the text tool. Then I put purple hearts on the edges of the banner. I made a nameplate for the sources using Adobe Fireworks. I made the document 400 by 300 and I put a radiant background color and used the text tool to label it sources. The theme for my website is romance so I tried to use colors and put hearts to give off the romantic feeling.

To make the website’s layout consistent I kept the background image the same, made the banners similar and also made an external css stylesheet.  I made an external css stylesheet because if I made the css stylesheet internal then there would be too much coding so then I would get confused. Also I found it easier to link it to the favorite movies websites and homepage. I made a homepage for the movies where I made a table that has 4 rows and 2 columns. In the table, I put a text hyperlink and image hyperlink that leads to every website. I linked the favorite movies websites to go to the homepage and the other 2 favorite movies. I also put an image hyperlink on the sources page to get it back to the homepage. I uploaded it onto FileZilla and then I made sure to see that everything works. Then I submitted the project homepage link to jupitergrades and made a poster using Microsoft Word that contains my reflection journal, sitemap and flowchart.