Background Image

The lovely background image used in my blog was not created by me. The author is unknown but the title of the image is Guitar HD and I found it at this address.

Reflection On Project

There are a great number of things I've learned from the first part of Web Media. I'd taken the class before, so not everything was completely new information but I was pleasantly surprised how many things were.

1) I learned, first of all, the names of the men who invented the internet to begin with.  Almost daily use without knowing the history behind it seems rather ignorant, so this was a good way to introduce the course and set the tone for a lot of learning in the coming weeks.

2) In this class my memory was refreshed with some HTML tags that I'd forgotten about such as heading tags, and tags to make text bold. Most main headings on website are images, but to know the heading tag is still handy in case there are parts of your website that are text only. I also re-learned meta tags, which help search engines find the site, and where to put them.

3) I learned about the Southern Cross cable which is one of the main internet sources for New Zealand, the South Pacific and a small part of the Australian east coast.

4) I learned more about div mapping and how this is an industry-standard method of creating the structure of a website. Unlike past methods of using tables, divs are good because they have no dimensions and are invisible unless otherwise configured in CSS. Adobe Dreamweaver has a handy visual aid in the design view that allows you to see a div container in the form of a dotted line. But I also learned that the design view in Dreamweaver can contain inaccuracies and that it's best to use the rainbow technique (making each div a different solid background colour in CSS to determine if they're working as they should be.

5) Today I remembered how handy the comment function in HTML could be. In div mapping, it became very handy for marking down easily the start and end of a div. In HTML, if there are a lot of divs used within one container it can be a bit confusing. On this note it's important when creating IDs for each div that they're typed in the same way to avoid confusion - I've learned that lower-case, no numbers and the 'camel technique' for more than one word is the best way to go.

6) I learned something completely new in Illustrator called the slicing tool. This essentially lets you click and drag any section of an image open in Illustrator and save that one part separately from the rest of the image. Even though that can be done by also cropping in Photoshop or another program, the slicing tool is specifically for this purpose and allows you to do it in less time. I'll almost certainly use this tool in the future.

7) Most of the other things I learned were some code tricks to make your website more interesting, mostly the correct code for adding forms and using a single image for all your menu's roll-overs (a technique whose existence I wasn't aware of). I've also become a bit more comfortable using margin tags. Float tags are still a foggy area for me so I may need some help with these in the future but all in all I've learned a lot of useful techniques which will undoubtedly help me in creating my main website.

Seventh Class: 11/9/13

Today was the final in-class lesson, and our main objective was to complete functionality of our own mock websites, in particular fixing the menu. This is where I ran into problems because I strayed from the original Evoke idea of having the menu near the top. Philippa advised me (rightly so) that having the menu only at the bottom is a bad idea, and so I created a menu in the header div and will in future start from that idea - the menu of course doesn't have to be just horizontal or vertical - there's certainly room for experimentation - but having a menu at the top is crucial for good functionality.

I also added a form to the website. This wasn't easy code to remember off the top of my head but I had a bit of help from Philippa's example and copied the code into my own file. The form was just a simple single-row box to type a comment or question and send to my email instantly. Many more sizes can be used for forms but I will explore those later for my main website as I need to.

After the mock websites we explored a way to make good-looking menus by using rollovers. For this, Philippa had downloaded an example from the internet that we could use the code from but change the image links, sizes and other things as we saw fit. This was again hard code to retain, so using past examples will be needed if (and probably when) it will be used on my own websites. This was also a technique I'd never seen or knew existed - I thought rollover images were always created by linking to another separate image file rather than a single one.

Sixth Class: 4/9/13

Today's class we continued what we did last week by creating our web-pages we'd designed in the last class using some code based on the Evoke website from a few weeks ago, but also adding and changing our own when appropriate. For example, I removed the top menu from the original Evoke design and replaced it with a header instead.

We also learned some new tricks like adding an email form to the site and we also learned of small freeware plugins we could possibly use on a future website that would allow for some additional functionality, since our websites at the moment are mostly 'static' websites, which is good for beginning but as we gain more experience we may desire some more interesting tricks.

We also created our 'about' pages and were shown how to link them back to the home page. for the next class we will fix our bottom menu sections, which at the moment are not fully developed.

Fifth Class: 28/5/13

Today, instead of recreating a ready-made design (ie. the Evoke Website) we had the task today of designing our own pretend website based on a topic of our choice. After brainstorming and researching a topic of choice (in my case tennis coaching) I discovered there was a drought of websites on this topic with good or interesting design, and in general there were few individual tennis coaching websites in New Zealand - most of those in existence related to larger clubs.

I then had to do some thumbnail sketches of what my home page design could be. I decided to do it quite similar to the Evoke Website with just some minor changes so I wouldn't have to recreate too much code from scratch. After some experimentation I also came up with colour schemes (this isn't too hard for a tennis-related website) and fonts to use in the site and designed an 'About' page for the site.

Fourth Class, 21/8/13

Today's class was very educational because we learned how to take our site model using div tags and actually place real images in there. First we used the 'rainbow' technique to make every div a different background colour - this ensured that we could correctly set the size of each different div tag to match the size of the images we'd be using. I also learned using this technique that because each div is represented with clear colour that allows you to determine whether or not the div tag is correctly working, there's no need to use the split or design view in Dreamweaver at all and this is the only technique you need to use.
This lead us into Adobe Illustrator where I learned a new skill called the slicing tool, which basically allows you to drag a field around a piece of an image you want to separate (think along the lines of using scissors to cut out each part of the images on the web page you want) and then save for web similar to Photoshop.
The end result was what could be a real website, and I will find this tool very handy to use in the future - making a Photoshop or Illustrator page draft of the website, slicing the images you want and resizing the div containers seems a very easy and smart way to go.