Week 9

This week started the actual construction of our final projects. We made the wire frame design for our sites, which is just the basic structure of the page. In my case I did the homepage because I felt that that would be more involved than any of the other pages that I create. Also with the creation of our wire frames marks the end of our project profiler, it’s almost time to start coding! =] I’ve uploaded my wire frame design below, I put a lot of work into it and I feel like it will end with a really nicely created page. I used a couple of different websites to give me ideas; mostly metallica.com and the battlefield 3 website, which i’m excited to say came out today. =D The only big changed that I made to the design is that I moved the navigation links to being on top of the top banner, for some reason I think this would make it look a lot different than most modern websites and give it a really nice look in the end. On the right side, i’m going to put a small vertical banner, just something to spice up the page a little bit. It will appear on every page that I created so it should look pretty cool. Then obviously in the top I have the navigation links. The bank link is going to take the users to a page where they can read profiles on all of the band members, they thought they would feel more connected to the fans if they did this. The media link is for samples of music, hopefully we will have more of this uploaded shortly after launch. Also we have the downloads section, the downloads section is going to have wallpapers available for download which I will create. Then finally we have the contact link. The contact link is going to provide fans a link to contact the bank at, this is mostly going to be to look for a bassist since they currently don’t have one.

 

 

Week 8

This week we have started on our final project, the creation of our own website which will actually be uploaded to a webpage. This week I mostly learned about how to start your web page and so far it’s helped me quite a bit, especially considering I had no idea how to even start making one just yet. The easiest way that I have learned to make a web page so far is by first thinking up an idea, something you even want to make the web page about. After you’ve decided on a topic you then need to move onto making your morgue files. The morgue files are a collection of screen shots from other websites and ideas from other pages which you may end up wanting to incorporate into your own page design! My actual live morgue file is linked to here. ~> Final Project – Morgue Files Since my final project is going to be about a local band, I decided to take a look mostly at band websites, except for the Battlefield 3 web page of course, that’s a frequent visit for me anyway.. As you can tell I have background designs, layout designs, and even a finished logo, or mostly finished anyway. After you complete your morgue files, you should start a project profile and a design document. These are just word documents that you type up so that you have a plan down. A few of the questions you should be asking yourself during the design document phase is; “Who will update the content?”, “How much is this even going to cost?” There are a lot more things you need to think about then just that though. After you have made the basic design document, you might want to think through it a little more. Maybe try making a story board for your page, this will allow you to link out your site so you know how many pages you need and what you need on each page.

Week 6

This week we continued a lot of work with fireworks and Dreamweaver, i’m still not a huge fan of fireworks though. One of the tools we learned about this week was the smart guides, these are turned on by default and they help you to line up different objects and pictures within an image file. Using the smart guides, it makes your image look a lot more professional since all of the images are inline, and mostly the same size. I have added another favorite tool to my list, the filters. The filters allow users to add a predefined change to their image, these filters allow for; adjusting color, blurring, and adding noise to add a little more feeling to an image. In addition to using filters, users are also able to use styles, these styles allow a user to actually change the texture of an image and give it a new feeling, some of the predefined styles include; plastic styles, paper styles, pastel styles, etc. Your creativity is almost limitless when you take the time to explore with styles and filters, you can change any image, and any text to give it that look and feel that you want.

Final Project Ideas

Band – Ode to Blood
This is my friend’s band, I’ve actually been a part of practicing with them for their upcomming EP. My main contact would be Nick, however I do have contact with all of the members. My information would be obtained through Nick and the other members, and I would take all of the pictures and other content myself. I feel that a website would really help them out by getting people to notice them, and they actually feel the same way.

My second idea would be a portfolio for some of the work I wish to do. I really enjoy doing blending and photography so I feel that it would be a lot of fun. I don’t currently have any content, but it would be a lot of fun for me to make a couple items and then add to it.

Week 5 – Adobe Fireworks

One of the biggest things I’ve learned this week, honestly, is that I don’t like Adobe Fireworks. Though it may be a very helpful tool with vector images and bitmaps, I’ve just not my favorite program to use. Fireworks allows many different functions; image creation, blending, etc but in the end fireworks does allow for users to create a prototype of their website without having to code anything, this allows for feedback to the user from possible clients quicker and easier.

When you’re inside of fireworks using the program, there is a lot of  termonology which you may not normally use, or perhaps may not even know what it means!

• Layers: Different pieces of the image, if you take away a layer a piece of the image goes away.
• Frames: Used in animation, what happens every second?
• Guides: These are invisible to the actual image, however they help you divide your image up if needed.
• Slices: Different sections of your image. What happenes if you cut your image into a cake?

Even though i’m not a huge fan of fireworks, however there are a few features of fireworks that I really love. First is the pen tool, and the pen tool allows you to make an image basically free handed. I’m not very good at free hand drawing however once you’re done creating a rough sketch you can actually use the subselection tool and then fine tune the lines that you made. So as long as you made a decent attempt at the original image you’re well on your way to making a beautiful image! A couple of other tools that I enjoy using are the free form tool, as well as the reshape area tool. These two tools allow for your to change the image after you’ve already made it, and by changing I only mean fine tune it. For example, if you’re making a picture of a… pepper, and realize that the top of it just isn’t fat enough, or not round enough, you can use the free form tool, which is similar to a paint brush tool, to just fix that mistake. However, if you decide that the top of the pepper is already too big, you use the reshape area tool in order to make it smaller. You work from the inside with the free form, and from the outside with the reshape area tool. I really enjoyed these two tools, they made my pictures look better. =]

I’m going to post a poll, you can take it if you want, I was just kind of curious.

Week 4

I’m incredibly tired, so i’m going to try to keep this one as short/detailed as possible. This week in Web design class we continued with cascading style sheets, specifically; HTML, class and ID selectors. When you’re making a navigation bar with CSS, you’re most likely going to include both anchors, and lists. The anchors that we use are going to take you to a specific part of the website which you specify through code, and the lists are going to be where you allow the user to choose where they want to visit. Therefor, the anchors do the work while lists are what the users see.

Moving on, we come to DIVs, these are basically a division of the website that you chose, which allows you to manipulate the color and look of that specific area. You can use DIVs in order to change multiple paragraphs, a single line, the whole page, whatever you want.  The DIV code is used mostly in layout and design.

Another very useful code in CSS is the float tool, which allows you to align elements to the left, right, and center of your page away from any other type of content; text or images. This is coded as #navcontainer {float:left, ;} in your css, and this will allow the navcontainer block to float to the right of any content on the left of the page. On your actual code, you’re looking at <div ID=”navcontainer”>This will now float….. </a>.

• Difference between ID and Class
• Image Optomizations

Week 3

Whenever we browse the internet we seem to come across images, these images can be pictures of anything; animals, people, nature just to name a few

. In order for us to see all of these images though they have to be uploaded to a computer, uploaded to a server and then finally coded onto a computer so that users like you can see them! On a typical HTML document the tag for placing an image on a page is the <IMG tag.

For example,
<IMG SRC=”IMAGE URL HERE“>
And this code will display the image right where the code is, without any customization though.  There are other attributes that can go along with the IMG tag.

• Src= This tag is used for the source of the image you want to post on your webpage.
• Vspace/h
• space= This is used if you want to put some space around the image, you can use this as a buffer.
• Border= Obviously if you want a border around your image, this is measured in
  pixels, such as 2px.
• Width/Heights= You can use this tag if you want to altar the height and width of the image, be careful though because this attribute could disorient the image.

Now before you upload the image to the internet, you’re obviously going to need to take the picture, upload it to your computer from your camera and then edit the image to fit your need. Now, there are tons of different types of image files out there, but the most popular image types are JPEG, GIF, and PNG images. You can tell what type of image a file is from it’s extension, for example, .JPEG, .GIF or .PNG.

• Joint Photographic Experts Group (JPEG) is a popular file type which is
• best used for photographs. Unfortunately with JPEG file types, the better your picture quality the bigger your file size, and sometimes that’s definitely not the best thing to do. JPEG files do allow for different amounts of compression, so you can shave the quality of the image to make a smaller image file, but sometimes you want a cleaner and crisper image.
• Graphical Interchange Format (GIF) image is also another very popular image, but this one is a little different from JPEGs mostly because it allows for animation and movement in images instead of just being a still picture. Another advantage for a GIF image is
  that it allows for transparency, which could make a website look a lot better.
• Finally, Portable Network Graphics or PNG images are one of the newest types of images. First implemented in 1995 but not widely used in browsers until just recently in 2006. Since this image is so new, most older browsers don’t even display this image correctly! (It’s trying to tell you to update your browsers!) The PNG file format allows for loss less compression, so the picture quality isn’t hurt too badly with a smaller file size.

Do you ever wonder why basically every page on a website has the same colors, and same textures? Well obviously it’s because it looks a lot better that way but in order for them to get that awesome look they have to use cascading style sheets, or CSS. For one website to have the same colors and textures, usually only one HTML has to be written, it’s a lot easier and quicker to design a website’s look by using CSS. Not only is CSS a lot more efficient to use, it also gives specific details as to how the page should look. Basically when you’re coding in CSS you’re just taking a verbal description and changing it’s syntax, and by doing that you get control over all of the visual aspects of a page.

This is just a brief glimpse at a small code of CSS

{

font-weight:bold;

color: #FFFFFF;
background-color: #FF0000;
border: 5px solid black;
padding: 20px;

}

With the code above, you’re going to outline something in a 5 pixel black line, you’re going to fill it with red, have 20 pixels of padding, you defined the text as white, and the text is also bold.

Now, the colors used above; “#FFFFFF and #FF0000 are called hexidecimal numbers, and can be found from websites which display tons of different colors

or they can easily be found using Photoshop or any other web design software. If you’re trying to fit colors to an image, another useful tool could be Kuler.Adobe.com. Here at Kuler you can actually upload the image you want to use on your website and then automatically you will get about five different colors that would look great in a theme together to be used on your page, you may have to tweak them just a little bit. If you’re going to add color to your page, which is highly recommended

you may want to consider giving the following sites a look -

• Color Matters
• Colorstrology
• Maria Claudia Cortes
• Kuler by Adobe