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


Competency worksheet:

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:

  • Insert/embed media (such as swf, mov or wmv)
  • Insert anchors where appropriate
  • Modify Page Properties
Level Three Completed:
  • 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