Web Design Student
Millikin University

Stephanie Pezzelle

Learning response

User Knowledge
Prior to taking this course, I knew what Dreamweaver was and had a very vague idea of how to use it. However, now that the semester is drawing to a close, I see how far I've come from the beginning of the class. I think knowing how to use a Mac, and how to use programs like Photoshop and Illustrator have helped me in creating more graphic based sites. I still feel that there is quite a bit I would like to learn about html and css code because sometimes my pages don't end up appearing on different screens/browsers the way that I had intended. I hope to continue to gain knowledge about code so that I can improve my skills at designing web pages.

Design Knowledge
Seeing as I come from a graphic design background, I wasn't expecting to learn very much about design in this class. However, I found that the web is a unique medium and certain aspects of it require particular consideration. For example, the placement of the navigation bar may stand out more or make more sense to a viewer on the left side of the page, but on a different site design it may appear better as a bar along the top. You also have to think about the variety of people that may be visiting the site. Some people may be more playful and want lots of things to click on, others may want straight information, while others will want pictures or something they can connect with on a more personal level. There are any number of things that need to be considered when you start working on a web page and I find the challenge fun and enjoyable.

Project Development Knowledge
Working in groups has always been a bit of a struggle for me. I'm a very independent person and I don't like waiting on other people to get their part done. I like knowing what is done, what still needs to be done, and how everything is going to piece together. I still struggled with it in the groups this time, but some experiences were better than others. In most groups I tended to be the one with the most Photoshop and Dreamweaver knowledge - so I volunteered to design the pages. From the design, everyone else could simply enter the appropriate information into the layout for the page. However, the benefit of working in the group setting is in feeding off each others ideas and brainstorming ideas for good layout and content ideas. I did enjoy that portion of working on sites.

Tutoring Knowledge
I helped a few people with Dreamweaver and how to do particular things or how to correct the way the page appeared in the browser. I also got some help from Professor Brooks on how to correct some problems on my page as well as Jim. Sometimes I find it difficult to tell someone else how to do something because I'm so used to doing it myself. So helping other people forced me to stop and think about how I do things so that I could explain well enough to someone else so that they would be able to do it also. Someday I hope to have a chance to learn more about coding from someone with a great deal more experience than me.

Overall I really enjoyed this class. I learned a lot and now that I have a taste of web design - I want to learn more.

Hands On Training Tutorial Responses

Client Case Development

In browsing through a wide variety of Election-based web-sites, I found that many of them were layed out with a very strong emphasis on information rather than entertainment. Most of them had a great organization to the layout with multiple little sections describing a larger article they linked to - much like a newspaper. Considering this I also found that a lot of them were reading sites rather than browsing sites. You could browse to find something to read, but in the end you would be reading. I also found that a lot of the information was static rather than dynamic. But I feel that all these decisions are best for maintaining a professional appearance.

Some of the sites I looked at include:
Myspace: General Election page - http://www.myspace.com/election2008
Hillary's page - http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=59966
Obama's page - http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=1647294
Giuliani's page - http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=95972433
Romney's page - http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=136859457

Facebook: Hillary - http://millikin.facebook.com/person.php?id=2290827757
Obama - http://millikin.facebook.com/person.php?id=2355496748
Group for Giuliani - http://millikin.facebook.com/group.php?gid=2216139142
Romney - http://millikin.facebook.com/person.php?id=2333586120

Site with great profiles on all the candidates:
http://pewforum.org/religion08/?gclid=COq2mN-R3o8CFR9cIgod3TDG2Q

New York Times Election Guide
http://politics.nytimes.com/election-guide/2008/index.html

Mitt Romney Official Site:
http://mittromney.com/

Barack Obama's Official Site:
http://www.barackobama.com/index.php

Hillary Clinton Official Site:
http://www.hillaryclinton.com/?splash=1

Best of Rudy Giuliani, MIke Huckabee, Mitt Romney, polls; news, in real time
http://www.rudygiuliani.com/

Giuliani's Official Site:
http://www.rudolphgiuliani.com/

Chapter 10

missing

Chapter 8

In this Chapter we learned how to:
- Create a table
- Add content to a table
- Change the border of a table using the property inspector, CSS, and code
- Adding color to the tables
- Formatting the alignment for the table content
- Sorting a table by alphabet or number
- Setting table widths
- Creating rounded corners on a table

I learned a lot of things from this chapter that I didn't already know so this will be very beneficial to me as I continue to create web pages in this class.

Web Design
Links Page Critique

Nicole Falletti's Bookmarks Page

Organization:
I really like the way Nicole has her page organized. All the headings are in a larger bold faced font, which really makes them stand out. The Links to the site stand out as well since they are a different color from everything else and they are also underlined. The descriptions underneath the links is the same font as the link keeping the unity between the two link and description.

Navigation:
Navigation is fairly easy. The page is not huge, so there isn't a lot of scrolling required. Their are links at the top of the page down to each category. All the headings and titles are pretty self explanatory so a person would know where to go to find a particular link, and all the links correlate back to the heading. I think Nicole did a good job of covering all the basic questions and information that a person looking to adopt a dog might want to know.

The only suggestion I have is possible adding a bit of space between categories so that they separate out a little more. Putting links back to the top might be nice, but certainly aren't necessary since the length of the page is fairly short.

http://students.millikin.edu/~nfaletti/AdoptingPetLinks.html

resume critique

Good Resume
http://www.powerful-sample-resume-formats.com/sample-web-resume.html

I really liked this sample resume. It's very simple, crisp, and organized. The person's name is right at the top where it's easily noticeable with all her contact information at the top. It's also good to see that her name isn't so large so as to overpower the the rest of the text on the page. Each section is separated using a gray background behind the header, and the header text is a larger bold serif font. The text below each section uses a san-serif and is smaller. It's also nice that the background has a little color to it because it keeps it from being bland and dull.

Bad Resume
http://www.veroned.com/resume/web_resume.htm (I listed this as good but I've changed my mind since we viewed it in class)

The first thing I noticed when I viewed the page is that there is no indication whose resume we are viewing. I kind of like the idea of listing highlights and then dividing the page up into sections. I always have had a rough time fitting everything I wanted to onto a single page so this layout would allow you to include a lot more information. Each section is fairly well-organized, but a potential employer might not be interested in reading all that is written there. He should probably try using more lists rather than lengthy paragraphs. He's consistent with his font use but it would be nice if there was a little more separation between headers and subheads/body text. So the changes he needs to make are: Clearly make his name visible on every page, better organization, shift from paragraphs to lists, more concise, and develop a text hierarchy.

Chapter 7

Chapter 7: Typography
We learned how to:
- Set up formats for text using the property inspector
- Adjust the amount of space between lines of text, the margin, and the edge of the box of copy
- Create our own customized fonts list using the propert inspector
- Use the ordered (numbered), unordered (bulleted), and definition lists to format and organize specific types of text
- Create flash text (text that changes colors when the cursor rolls over it)

This was a quick and easy chapter but very beneficial.

Chapter 6

This chapter is all about Cascading Style Sheets (CSS) and works a lot with coding. I was really excited about that because I was really hoping to learn a bit more about how to use code.

At the beginning it shows you how to go into your page properties and set up the defaults for the page so that you can specify things like the color of the background/font, the font type, the size of the font, how links will appear, the margins for the page, etc... All of those things can be set and changed by clicking on the page properties button in the property inspector window.

The next section showed me that I can export my CSS style sheet and it will create it's own page of code that I can then link to any other page in order to maintain consistency between pages. There is also a nice little diagram on page 125 that explains what everything in the styles panel represents and does.

After learning how to export a style sheet, we learn how to create our own CSS rules all by using the styles panel. The first window to pop up requests that you tell the program what you are wanting to be effected, like all paragraphs (p) or a header (h1). Once this information has been entered, you then move on to specify how you want it to be effected. You can specify the font type, color, size and margins; the background color; the way text is aligned in a block;how the words are spaced; the type of border you want; etc. If you know what you're doing, this method seems really easy and would make laying out your own unique style sheet fairly simple. I also saw how you can select a rule within the style panel and add properties to it or change pre-existing properties all within the style panel.

The fourth section seemed a bit more complex. It seems to me that the ID selectors allow you to be very specific to a particular area. This section had us create individual rules for each cell of the table in the page's layout. We ctrl clicked on the little tags below our design window and chose to set ID. I had no problem doing what the book asked, but I would like to understand a little better about what exactly I was doing in this section. The same applies to sections 5 and 6 involving the classes and pseudo-classes. I had no problem doing them, but if you asked my why I was doing it I wouldn't be able to give you an answer.

So far - I've found this chapter to be the most educational though.

A Favorite Website:

Web Address:
http://www.vikmuniz.net
http://www.jkrowling.com

Site About: I like both of these sites because they are interactive. The jkrowling site is more animated I think in that objects actually move and link to other pages where they are more interactive/animated things. I like the vikmuniz site because the main page is interactive. The linked pages aren't so much - but the artwork is awesome!

"Site Analysis"
http://www.architectstudio3d.org/AS3d/design_studio.html

I found this website while browsing the other night and found it to be rather unique and very interesting.  The introductory page is has a nice orientation.  The animation is engaging showing people various people and locations and the type of house that suits them.   This set up peaks a viewers interest and encourages them to continue to the rest of the site.  The one downside to the main page is that I found a bit of difficulty finding the little arrow that allows a person to proceed into the site.  (It’s at the bottom right hand side of the page.) 

Once you get past the intro page the site is set up very well and is user-friendly.  You can learn about Frank Lloyd Wright and architecture, browse through a gallery, or design a house based on a client of your choice’s needs.  Once you select a client, little boxes pop up providing advice and facts on how a real architect would proceed.  You are allowed to make decisions regarding the shape of a house, height of the walls, and interior layout of the building.  Advice boxes continue to appear as you progress through the steps of construction.  If you change your mind about a decision there are several ways to back up and change your decision.  Overall I found the site to be easy to navigate through and clear indications for where to go next.

One of things I love about this site is that it is designed to be a learning device.  The site is constantly providing facts and information teaching the person about architects, Frank Lloyd Wright, and how to create a building that fits a client’s needs.  The layout was appealing and maintained the same format throughout.

Overall, I found this website to be fantastic with regards to its orientation, navigation, and content quality.

Chapter 5

This chapter covered a lot of new information. Some of it included:

- linking an image or text to a page using the Point to File (little target icon after link) feature in the Property Inspector
- replacing images in placeholders quickly using the Point to File tool
- creating e-mail links with the E-mail Tool in the Common Group tool bar
- creating anchors using the Named Anchor tool in the Common Group tool bar
- Once an item has been anchored, a link can be created between an image/text using the Point to File tool to direct it to the anchor
- creating links to files highlighting texts and using the Point to File tool

I found this section to answer a lot of my questions about how files actually get linked together. I have a feeling I may need to refer back to this chapter later to refresh my memory.

Chapter 4

This chapter was quick and easy. Several of the ideas were already performed in Chapter 3 so it was a nice refresher for placing images into a document. The chapter also covered:

- aligning text using the alignment buttons in the Property Inspector
- creating links using images and texts using the Property Inspector's link option
- inserting tags through the Head Tags category in the HTML menu practicing both Keywords and Descriptions

I also learned from Prof. Brooks that I need to make sure my Dreamweaver page is set for standard mode and not layout. When my document was in layout mode I couldn't insert images into my file. Standard mode gives me more flexibility to create my web page.

Chapter 3

This chapter was very quick and easy to go through. You showed us a lot of the things we needed to do in this Exercise yesterday. I found the reading on site root and document relative links interesting.

Document relative link is basically a file - the computer just finds the file with the same name.
Ex: index.htm
Site root relative link tells a computer where it needs to go first to to find the file indicated.
Ex: http://mysite.com/index.htm

Although you already showed us, it was good to go over myself how to load a folder into the files panel. From there you can do everything from opening a page or file to pulling a file into an already open page.

Chapters 1 & 2

1. Is CSS coding placed at the beginning of a coded document (before the html, xhtml, or xml begins)?
2. The book said that the different fonts listed in the CSS coding refer to all the different fonts used in the document. Only one color was listed for the text color. If the text changes colors, do you need to list the various colors used in the document too?
3. Which is the easiest to use: html, xhtml, or xml? Which is the best to use?
4. The book briefly mentions behaviors, but what are they?