Web Design Students
Millikin University

Stacey Randol

Learning Review

:|:User Knowledge:|:

Coming into EN301, I have to admit I was afraid because I never before had used a Mac Computer. As the course progressed, however, I found using Mac computers alot easier than using Windows. For an example, I love being able to drag a picture off of the internet onto the desktop and then drag it into Photoshop! I found it useful to store everything on my www folder through my H-drive and being able to access it while creating my website. I also made a separate folder in My Documents where I stored images to put on my website, which was easy to access. Using Dreamweaver was actually easier than I thought it would be, thanks to the Hottbook! The activities and examples the book walked through helped me when designing future websites. At first I had a little trouble synchronizing my files onto the web, but I finally got that procedure figured out. My knowledge has grown tremendously over the course and I am thankful that I have the ability to create websites on my own. I believe this will be very useful in the future!

:|:Design Knowledge:|:

My web design knowledge has grown tremendously. Before this class I had never before made a website, so this was a big step. I learned how to make active links, create tables of information, use layers, link my webpages to other sites, and so much more! I now have the knowledge to take pictures, put them into Photoshop, then add them to my website. My artistic ability keeps growing the longer I use Dreamweaver. At first, I was more worried about the functuality of my sites; however, now I am interested in the creativity of my sites. I know that with experience my design knowledge will only grow.

:|:Project Management:|:

EN301 has a lot do with how you manage your time with your assignments and projects. As a student, you have to be able to multi-task! At times, I felt flustered; but I realized that life is all about multi-tasking. There were many times when I had to work on two different projects and this all depended on how I managed my time. If I had extra time on my hands, I would spend that time getting caught up with assignments in the future. By managing my time, this would make things easier on me in the long run. I also enjoyed being able to go back to past websites and improve them as I pleased!

:|:Tutoring:|:

Coming into this class I was worried because I didn't know how to use Mac computers. Jay Johnson assisted my learning of the system. Other than his help, Dr. Brooks helped me through Dreamweaver and using my www file. I am finally to the point where I feel comfortable designing and using Macs, which I enjoy very much! A lot of the students in the class are Graphic Design majors or more familiar with designing; therefore, they didn't come to me for help because I was a rooky! However, I would now feel comfortable helping beginners with Dreamweaver and Mac computers.

project proposal

I could do a web site on how locals from Decatur can help animals in the surrounding area, by donating or volunteering to animal organizations, such as shelters. Not only could I mention shelters, but also educational organizations, animal activists in the area, and animal rescue . . . also people to get in touch with in the area. I could also mention statistics on animals in need in Macon County.

Hands On Training Tutorial Responses

Chapter 13

This chapter discusses the importance of using forms on your website. By using forms you then can ask questions to your users and receive answers, in order to benefit the website according to what other people think. Forms can be in the so-called "boring" form or they can be used for voting, guestbooks, e-commerce, etc. There are two aspects when creating forms: creating the form objects (ex: checkboxes and submit buttons) and making the forms function properly. The chapter focuses on the creation of Form objects. Unfortunately, Dreamweaver does not cover the programming for making the forms operational. There are many different form object keys (under Insert > Forms) which gives you a variety different forms...such as TextField, TextArea, a list, a check box, and a submit button. You can also add tables and organize the forms within the rows or columns. This chapter also discusses the use of a jump menu, and how it combines a forms element for lists and the behavior of JavaScript that causes the menu to go to it's target without the use of a Go button. This allows a user to select a choice and have that choice load without having to first click Go. This chapter was short, to the point, and easy to follow. I think it gave the proper, basic information a beginning web designer needs in order to create beneficial forms.

Chapter CSS

Ch. 6/11 was about Cascading Style Sheets (CSS), which allows a user to create a separate file and have all of the other pages refer to it for fonts/colors/etc. CSS offers more control over your website than what XHTML tags can provide. By simply setting the various page properties, Dreamweaver creates an embedded style sheet to handle formatting. When viewing the code, the CSS is pretty easy to read and follow. The CSS code was created by dreamweaver automatically, and because it was placed insie the <head> tag and affects only the formatting of this one document, it is referred to as an embedded style sheet. I then learned how to export the CSS from that page into an external CSS file and then apply the external CSS file to multiple pages; this will allow fast work flow. You can access this by Window > CSS Styles. There are two modes for the CSS Syles panel: All and Current. The All mode shows all of the style sheets that are linked to or embedded in the current document. The current mode shows all of the rules that apply to the currently selected element in Design view. CSS Selectors define what a particular declaration block should be applied to. There are four this chapter focuses on: type, ID, class, and pseudo-class. When working on the layout of a page, ID selectors are very useful because they let you target specific areas of your page for styling. Class selectors, the most common selector, lets you define a class that you can apply to mutliple elements using a class attribute on the XHTML tag. This chapter had a lot of material to take in, but it needed to in order to fully introduce the reader to the introduction of CSS. CSS expands web designers knowledge and allows designing to be easier than it has to be, by creating a separate file to refer to.

Chapter 10

This chapter introduced rollovers to the reader. One benefit of using rollovers is that when a user's mouse goes over them, the link will change to a different color or something of that sort to assure the user that it is a link. Another benefit is if the web designer is at a lack of space, they can use rollover links and put extra information within the graphic, so that when the user scrolls over the link a list will appear. The book first introduces the reader to simple rollovers, then begins to talk about animated rollovers, which is pretty much the same thing except the rollover image is an animated GIF. Creating pointer rollovers is when you scan the mouse over the link and a symbol appears as you move across each word. This is done through the behaviors feature, instead of the insert rollover. I think that creating pointer rollovers benefits a site overall. Not only does the feature look nice, but it also focuses the user which link they are clearly on. Creating multiple-event rollovers is more complicated then the previous tasks... when a mouse scrolls over one of the three links, not one image changes, but all three change. Even though this may seem complicated, I think it would really spruce up a website. This chapter also talks about creating flash buttons, which is a cool feature and also inserting a navigation bar rollover. A navigation bar-style rollover allows each button to display four states: up, over, down, and over while down. This rollover requires you work with four images, however. Overall, I think rollover links are helpful and nice looking for a website; however, a web designer shouldn't over do the use of rollovers and make the site too busy. I think sticking to a couple rollover techniques would pretty much do it for one site.

bookmarks case

Jeremy Johnson
Stacey Randol
George Costillos

From the site’s conception the group identified with the design principles implemented in the design of the magazine. These principles were facsimiled on the web and results in the look of our site. We came to many mutual decisions as well as disagreements on mechanics, but ultimately we reached consensus after amends.

Our opening page features Japanese music and an flash animation before prompting the visitor to “Enter” the page. The “Mayfly” flush left written vertically was copied, on the right are the navigation links which take the visitor throughout the page. There are six links to six pages in our small but informative site.

Chapter 8

The first section of Ch. 8 teaches you the tracing images feature, which allows you to place any GIF, JPEG, or PNG into a tracing layer of your page. So, you can take what you have created on programs like Photoshop, Fireworks, or Illustrator and put it on the web, which is necessary to have! In this section I also messed with image transparency. Next, I added layers to the same page. The transparent images I once had, I made darker by layering. I found that the text when tracing the images doesn't line up perfectly, but the book said that it is okay because it is there only as a guide. Then, I learned how to convert layers to tables, so that anybody can see my layout, no matter what type of browser they are using. The book then taught me how to convert the table version of my page back to layers, modify the layout, and then convert it back to tables for browser compatibility. I found out about the layout view, which allows me to create layout cells and tables by drawing them exactly where I need them and the size I want. Another exercise taught me how to use layout cells and tables to create a navigation bar the stretches the width of anyone's browser window. You can do this by clicking the Draw Layout Cell icon on the Insert panel, which lets you draw a table cell in your document window. At the end of Ch. 8, the book tells the reader the "Anatomy of Layout Cells" which I think is very good to know...so you can just look at your screen and now what is set for the cell. Ch. 8 is a valuable chapter to learn when designing websites, I have already came across this when needing to insert images from Photoshop.

peer resume critique

I think, overall, Jay's resume is eye-catching and he takes a forward approach and shows off his skills that would capture the attention in order to be hired. The White Sox background looks very cool; however, if this was for professional reasons, I don't think that it would be appropriate. The links throughout the website are good, however, some of them are hard to see against the black. He separates each section, except for separating "Employment History" from "Activities." Jay lists his education, but doesn't list his GPA which is an important piece of information (personally). Also, I think that the use of bullets would help set apart information such as job descriptions.

resume critique

In my opinion, I thought this website was a good one: http://www.cytopia.com/resumes/Erik-Paul_Gibson_resume.html
I feel that Erik-Paul Gibson's website is very professional and clearly stated that he is qualified. I like the way he borders and separates each subject, once again making his points clear. All of his contant information is provided at the top ( where I think it should be). The objective he has in italics, which I think is a good effect to use, also it is short and to the point. The only thing I questioned was under "Education" he didn't list his GPA? So, maybe he didn't do that great... who knows! But overall I feel this resume is well put together and organized.

And, this website was not so good:
http://jobstar.org/tools/resume/res-chr1.php
(You have to scroll down a little to see the resume)
This website provides relevant information, but it just looks unorganized to me. I don't feel the resume is lined up neatly and it seems scattered about. Nothing grabs my attention because there aren't any borders separating or there isn't enough space between the last topic and the next heading. It's not fancy at all and I think resumes should be a eye-catching, even if it's just the heading! (which she didn't have)

This is what I thought about Jay's Bookmark Page: I thought the site had a lot of great colorful pictures, but as said in class they aren't lined up with the other pictures. Having to scroll across is sort of "annoying," but I agree with you about making one long picture and then having to scroll across in order to see the whole snake. The picture I think would be really cool to do that on would be the anaconda picture with the people holding it at the very end of the page.

His top picture is not working still--which he is aware of.

I believe that his word-headings are necessary because they tell what the site will be about. For instance, there is a picture of a sea snake and the heading says "Treatment of Sea Snake Victims;" now if you were just looking at the picture you would think the site would just be about facts on the sea snake; however, it is a medical website about treatments for sea snake victims; therefore, I see the headings to be necessary and helpful to the browser to see what they are clicking for information.

Jay has a wide variety of snakes and websites to fulfill a browser's knowledge on the topic.

I also like the "worm" font; it goes along with the snake aspect.
Jay still has some touching up to do on the bookmark page, but he is aware of it.

Chapter 7 (Tables)

I believe this chapter will help my website tremendously becaue it will teach me to display and organize by using tables. It will help me position my images, so that it has a professional look.

I learned that if a table cell is empty you need to put something in it to preserve the space, which is a single-pixel GIF that is transparent! This chapter also provides a tool that allows you to sort a table alphabetically and numberically. (Commands > Sort Table)

The chapter also had you open a new document and create your own table and showed me how to modify it. I modified it by clicking and dragging to merge, delete, or add new cells.

Next, the book described how to work with a page layout and modify the alignment by adjusting things; such as, the height and width of rows and columns. ( done through page properties)

I then selected and copied text into tables through window > bodycopy. Another way, I learned to achieve alignment with tables is based on percentages. One section focuses on centering on any size browser window by using percentage-based tables.

(Insert > Table) Then I checked how many rows/columns I wanted and for the width I put 100 and changed PIXELS to PERCENT.

I also learned that using seamless image assembly will make my page look more professional, so that a viewer won't be able to tell I have multiple images all pushed together. To do this, I needed to select the entire cell and then go to <table> and change the property inspector to cellpad: 0 and cellspace: 0 ....

By combining pixels and percentages, the website creator will be able to center an image whether the window is seen on a small or large monitor. I never thought of this before!

I found the way that Dreamweaver adds borders to the tables is very different. The whole table goes black first, then eventually you change the background to white; however, the border is left black! Neat!

The last section talks about rounded-corner tables... this is another more creative side to changing your website into something out of the ordinary. Ordinary = square everything! You can make a table round just by inserting images.

This chapter introduced me to a lot... I must admit I had a little trouble finding some things, but all in all I think I worked everything out!

Chapter 6

Overall, this chapter came pretty easy to me.
* But first off, I had a question about defaulting the font size... when I went down to the bottom and I would bring up font sizes it didn't give me choices like 1,2,3, 4, or -1...etc. It only gave me the choice of 9 and up. Why is that?

To start off, I added and formatted the HTML text to the bonsai website by being creative with the font, color, bold, and italics (which was easy exept for the font numbers I explained to you above).
I worked with font lists, which allows the user to break out of Times New Roman again. Something interesting I found about this section was the fact that the user can edit the font list. By adding the "available fonts" to the "chosen fonts."
Then came the section that covered aligning text (right,center,left) which also came pretty easy to me.

I then worked on Ordered, Unordered, and Definition Lists. I thought this luxury to have when building a website would come in very handy! All you have to do is choose Text > List > then your choice of listing.

A website is nothing with out color! One of the sections dealt with coloring the background, text, links, active links, and visited links.

*However, on pg. 182 they said to selct color scheme by Command > Set Color Scheme....well I selected command, but "set color scheme" was not an option! Why?? Besides that throwing me off I did fine with color schemes.
In order to format text in tables all it takes are a few clicks and drags to change the style, color, alignment, and more! Which I find to be yet another easy accessory Dreamweaver provides!

Applying HTML styles allowed me to format the text on a document. I was able to apply anything to any text on the page, but this chapter just had me work with the headers ( changing the font & made it bigger).

The last section of this chapter was about creating Flash Text, which is a great invention because it allows you to use any font you prefer and not have to worry about whether the visitor to the site has it installed or not. You access this from the Media tab in the Insert panel. There, you select the colors, font, and size.

This chapter basically furthered my knowledge in order to get creative with fonts and the use of color.

favorite website

My favorite website is the Animal Planet's site, which is:
http://animal.discovery.com
I am using this website as a part of my webpage in class!

One of my favorite websites is HYPERLINK "http://animal.discovery.com/" http://animal.discovery.com/, which is Animal Planet’s website. The website I am designing in class has a link to this page. Not only is the website provide the browser with news about the television channel, the site also allows the viewer to learn about different animals, play games, and details on how to care for your pet.

The orientation of the website is excellent. The page welcomes the viewer with information and pictures. A larger picture screen changes images over time, which grabs the browser’s attention. The images publicize certain activities; such as, games, new wall paper for your computer, television, and a voting poll. The homepage also gives you time information about what is on television. A fan site is another option the viewer can choose. For a fan of a certain television show, this choice is definitely a perk! The browser can further their knowledge about the shows. The homepage also has video links that catch the viewer’s eyes; many browsers love to watch video clips online. Animal Planet’s website is a branch from the Discovery Channel’s website, hence the hyperlink. So, the website also has a fairly large picture-link for the Discovery Channel’s website. I think that aspect is appealing to the audience the website attracts.

The website’s navigation is not complicated. The site makes it easy for the browser by giving many options; in other words, the topics are not broad, they are specific and predictable. I think the clarity of a website is one of the most important aspects; after all, if a viewer gets confused they most likely become unhappy with the website. Once you click certain links on Animal Planet’s website, choices appear to narrow down and help the search.

The content quality of Animal Planet’s website is all around fantastic because it covers entertainment and education! The entertainment it provides is not only television characteristics, but also fun games for children. The site has many educational purposes and that is why I like it so much. The viewer can learn facts about a variety of animals worldwide. Also there is detailed information on how to train your pet, which I think is very useful to many owners. A fan of the website can also receive information through a newsletter that Animal Planet sends out. The homepage also has a section “Live Today,” which allows a browser to enter Animal Planet’s Show and Tail Contest, to find an Animal Planet Expo near their home, or to adopt a pet. Those options give a browser a personal experience while visiting the page, which is another important factor about websites. This gives the viewer a chance to get involved with animals, which is the whole point of the site and the television show. Overall, this website succeeds at all three qualities—orientation, navigation, and great content quality. Three thumbs up!

Ch. 2 & 3 in Writing Space

Ch.2: On page 19 the books states, "It is probably best to understand all technologies in this way: technologies do not determine the course of culture or society, because they are not separate agents that can act on culture from the outside. Yet the rhetoric of technological determinism remains common today."
- This is confusing to me. Personally, I do think technology has determined our society today.

Ch. 3: On page 33, the book states, "In the late age of print, however, we are concerned not that there is too much in our minds to get down on paper, but rather that there is too much information held in electronic media for our minds to assimilate. We are now overwhelmed from without rather than from within."
- I don't understand this at all.

Ch. 1 in Writing Space

My question: pg. 6 " There is a challenge to print as a technology for delivering alphabetic text and a challenge to the genres and structures that we associate with printed books, newspapers, magazines, and so on." When this says "alphabetic text" I am assuming that it is meaning handwriting isn't as good as typing correct? And also I don't understand why there would be a challenge to the genres of books? I wouldn't think it would matter...

Chapter 5

This chapter dealt with links to my page; such as, linking with point to file. I just had to click and hold the property inspector's Point to File icon and then point it to the file I wanted to make a link. This is a luxury this program provides to make things fast and easy, which is what I prefer! I also used the Point to File when linking to new source files, which made pictures of trees appear. Then I used the browse for file method and created a link for all of the text navigations. I then learned about Link History, so if I already created a link it is recorded and I do not have to go back and do it again. Next, I worked on email links for general information, photo submissions, comments/suggestions. The book told the reader two different ways to accomplish this... I like them both the same. If I had to choose I would just start with the insert panel and the email link. Naming anchors came next. I used anchor markers for each tree, which makes it easier to jump to certain areas of my page. Another perk. Step number six is the only part where I sort of ran into trouble with Image Maps. On pg. 152... I could not choose the how_to_bonsai/index.html link... I had to type it in? I am not sure why exactly. I believe it worked fine though. The last step in ch. 5 was linking to files. The file I linked was a "PDF version" where the viewer of the site can go to download it.

Another thing I was curious about was how to view my website. It told me to go to view my work using a different browser and press F12, but that didn't help me get to it? <try Option-F12>

Chapter 4

All in all I found it easy throughout Ch. 4 and 5 by following along with the book taking separate steps. I think the writers do a very good job of clarifying what needs to be done at what time. I also found the pictures of the computer screen extremely helpful when trying to figure out what step is next.

This chapter helped me start and build my page. With elements such as coloring, putting objects (trees) where they belong, and set up links using the Property Inspector. The book got me started on a good foot!