WebActivity1

Web Activity 2 - final revised version
Website link: www.music.sc.edu/recording/franciswa2/index.html

Changes

 * 1) One of my biggest problems with my original site was the colors of links. When I changed the color of the links in the CSS file for the header, it affected all the links the same. Unfortunately, the color I used for the header was unreadable in the body. I researched more about CSS styles as well as the difference between CSS Classes and IDs. I learned how to use CSS tags such as **.nav a:link {color:#FFFFCC}** to change the link color only for the navigation bar.
 * 2) The graphic I choose for the homepage is a diagram of a Blumlein stereo mic technique, which is appropriate, considering the content of the site. I wanted to keep the homepage simple, yet functional, so I wanted to use this graphic as an image map for site navigation. I added text to the graphic on the home page and then created an image map so that the four quadrants of the image are links to the 3 main pages and the email contact. I found creating an image map quite simple in Dreamweaver. Later, I made the image larger, and I found that the map needed to be re-done. The image map did not change along with the change in proportion of the image - as I had expected it to. This has been a common frustration of mine with website development - when I improve one item, I end up breaking another!
 * 3) Fixed typo on recording page.
 * 4) Added more content to the recording page. While the anchors are not necessary for the current length of this page, I expect this page to grow, soI left the anchors in place. The anchors will allow the page to have a list of recent recordings at the top, which link to more extensive information below.
 * 5) Added caption to photo on recording page and credit info.
 * 6) Removed headshot photo from Recording and EdTech pages.
 * 7) Added a footer with copyright info.
 * 8) Uploaded to a folder on www.music.sc.edu/recording.

Web Activity 1
Website link: edtech.usca.edu/courses/et603/fa10/wa1/franciswa1/

I have some previous experience with Dreamweaver, creating sites with basic text, links, and images. However, they have always been a part of a larger site, so the cascading style sheets (CSS) were provided for me. I figured this activity would be the perfect time for me to dive into learning CSS.

Since I’ll be obtaining a domain for my EdTech materials (still have to do that!), I want to develop this site to host both my EdTech and my audio recording life - finding the common ground between the two. This gave me the overarching framework for the site - besides general navigation and about me/contact info, there will be two primary sections, once focused on audio and recording, the other on education.

Web page creation steps:

 * 1) I started by looking at a few of the sites that provide CSS templates. I ended up downloading the ‘orchidaceae’ CSS from http://www.freecsstemplates.org/
 * 2) I opened the template in Dreamweaver and began looking at how it was put together. After much examination, I realized that unless I learned how CSS works, I would be stuck with the design of the template, including its logos and color schemes. I also didn't like the fact that even after I had made series modifications to the CSS, I would never be able to remove the Creative Commons attribution and weblink. So, I decided to scrap the CSS template and build the pages and CSS from scratch.
 * 3) Created a basic homepage with a navigation menu bar. I spent quite a bit of time tweaking this item so that all the pages would have a consistent look. Once I had decided on a basic color scheme, I changed the color of the logo to match the text color. While the learning curve of CSS was quite long, I am beginning to see how they make maintaining a complex site __much__ simpler. Once I had the menu bar design, it was simple to copy and paste the content. The CSS made the design consistent for all the pages.
 * 4) I prepared a few images and graphics to use on the site. Most of these I grabbed from materials I had already created. Thanks to earlier graphics activities, the preparation for the web has become second nature: open in Preview, resize, save to JPEG, make sure it is less than 100KB.
 * 5) Used Header tags to organize content.
 * 6) Created unordered lists and tables where appropriate.
 * 7) Found a YouTube video I had created for EDET 722, copied and pasted the embed code into my page.
 * 8) Placed and linked to anchors.
 * 9) Tested in Safari and FireFox.

Challenges/Difficulties:

 * learning CSS - still along way to go there
 * I still need to learn how to use CSS to control link colors. I want the links in the menu bar to be off-white so they contrast with the red background. However, this color provides poor contrast for links in the body of the page.
 * Safari was previewing correctly - I found I had to clear the cache for the CSS changes to appear. FireFox preview was fine.
 * Though I had used anchors properly in the past, it took me a long time and several misfires to get these to work

Design Choices:

 * Consistency - I designed a logo/menu bar and used it across all the pages so the site was uniform. This also makes the site easier to navigate.
 * Contrast - I used off white text on a dark red background in the menu bar. In the page body, I used black text over a light grey background. Both have great contrast for easy of reading. Unfortunately, I still haven't figured out how to handle link colors differently in the two sections.
 * Restraint - uncluttered design, with minimal use of color
 * Simplicity - the homepage is simple, almost sparse.
 * Use of CSS - consistent design that is easily update-able across the entire site

Level One Completed:

 * Create a site (Dreamweaver)
 * Create a new page
 * Enter and format text
 * Insert an image
 * Create a hyperlink
 * Create an email link
 * Set the title
 * Create an ordered or unordered list
 * Preview a page in a browser

Level Two Completed:
Level Three Completed:
 * Insert/embed media (such as swf, mov or wmv)
 * Insert anchors where appropriate
 * Modify Page Properties
 * Create CSS

Level Three To do:

 * Create an image map - plan to use the Blumlein diagram on the home page as an image map for links to other pages
 * Upload to a domain