Website Development

It has been decided now that the assessment item for the web based product will definitely be a website about the end of year exhibition at CDU.

More brainstorming took place and a conversation with Peter Houtmeyers.  As a class we have come up with the bones of the project and we have formed into four small groups.  We have decided that the site needs a welcome page, a schedule of events, a map of where the events will take place, and video, image and website galleries.  The welcome page will also list the focus units that will be in the exhibition and include a brief summary of these units.  We will also maintain a theme throughout the website by using the same banner for each page.

 Group 1 - Kozo, Sachin and Diego - image and website galleries

Group 2 - Edmar and Prashant  - video gallery

Group 3 - Tom, Claudia and myself -welcome page, past exhibitions info and schedule of events.

Group 4 - Chelsea, Brendan and Edmund will work on the layout and map pages.

Here is a photo of a proposed banner of sorts that will be universal across the pages:

Website Beginnings

A lot of brainstorming has been happening in class in regards to the form our web based product assessment will take.  It was suggested that we as a whole class group create an 'unofficial' website to promote the end of year exhibition that will be held for students from the School of Creative Arts and Humanities.

Here is the initial brainstorm map:

The only problem that I see at this stage is that the exhibition details are not yet worked out and we may not have enough information to complete the site, given that the exhibition takes place after the assessment due date and after unit has concluded.

Week 10 - Creating Links within an Image

Researching how to create links within an image, I have found out about using image maps and also about image slicing in Photoshop.

An image map or use map is when you take parts of an image and create a link.  You can specify exactly what part of an image will be a link by using the coordinates that relate to the image and in doing so create 'hotspots'.  So you could have a map of the world on your website and then have each different country as a hyperlink.  You would select Australia for instance and by using the coordinates of where Australia is in the image you could then create a link to an Australian website.

Using an image map is an easy way to link different parts of an image without having to divide the image into separate files.  There is a very informative and easy to understand tutorial on You Tube that explains exactly how to create image maps.  I found this video very helpful and also informed me of a great free resource for creating image maps online.  The tutorial uses an online image map editor at maschek.

You can view the video tutorial here.



Adobe Dreamweaver makes it easy to create image maps and there is useful information on how to do this here.

Another way to create links within an image is to use image slicing in Photoshop.  This might be particularly helpful in creating a banner on a website.  Photoshop has a 'slice tool'  (as shown left) that allows you to divide an image into smaller sections and it does this by creating straight edged sections like a table.


Here is an example of using the slice tool to create smaller sections within an image.

Notice that when you select an area with the slice tool, Photoshop automatically creates more slices to complete the image.  The slice that you originally created is highlighted.  You can manually move and resize the slices.

Slicing is an ideal way to optimize your image.  You can make adjustments to the image such as making it a gif and/or changing the amount of colours used in the image and make your file sizes much smaller, therefore making loading time much faster.

Week 9 - Dreamweaver

Adobe Dreamweaver is a web design program.  You can build a complete web site from the beginning without having to know or write very much HTML.  This program makes it easy for beginners to start creating their very own websites.  You are able to enter information and the program automatically creates the code, but you are also able to enter the code manually if you like.


Adobe TV has a video that talks about what Dreamweaver is:




There are some good tutorials for using Dreamweaver at Internet 4 Classrooms.

I created my very first webpage using Dreamweaver and I am very happy with the results.  I played around with the features and was able to get the heading and menu items to look how I wanted by using a table.

Here is what my page looks like:

You can view the actual page here.

I found How To Use Dreamweaver particularly helpful and it also had a list of useful vocabulary which I have listed below:

Vocabulary:

• Anchors: (also called targets) For the purpose of hyper-linking two places on the same web page or to, the target of the hyperlink.
  Image map: an image on a webpage that has geometric areas defined that function as clickable links.
• Bandwidth: The amount of data you can send through a network connection. Bandwidth is usually measured in bits-per-second (bps).
• Bit: one binary digit - this digit is represented either as a 0 or 1. Bits are usually used to measure transfer speed.
• Byte: a byte is 8 bits. Bytes are usually used to measure storage space.
• Contrast - To show differences when compared.
• Coordinates: Any of a set of two or more numbers used to determine the position of a point, line, curve, or plane
• Folder: another word for a directory on a computer. Folders are used to organize and store files.
• GIF: A image file invented by the CompuServe Company that uses indexed color-space. GIF files work better for graphic and clip art images.
• Hierarchy: a relationship between people or things that is organized.
• Home page: The first page on a Web site that acts as the starting point for navigation. Usually the home page offers hyperlinks that you can click to go to other pages on the web site.
• Hyperlink: An address to another webpage either internally within a wesite (relative link), or a web address to a webpage outside on the WWW (hardlink).
• Hypertext [ HTML Hypertext Markup Language] A term coined by Ted Nelson to refer to a nonlinear system of information browsing and retrieval that contains associative links to other related documents.
• Hypertext is the basic organizing principle of the WWW. The coded format used to create WWW documents. HTML commands control how a piece of text will appear. Files in html format are viewed with a Web browser.
• Image map: an image on a webpage that has geometric areas defined that function as clickable links.
• JPEG: (Joint Photographic Experts Group) A file format using lossy compression. Commonly used for photographic images on the Internet.
• Pixels: The basic unit of the composition of an image on a television screen, computer monitor, or similar display.
• Resolution: the amount of pixels per inch on a screen or dots per inch in print.

(source:  http://www.ncsu.edu/viste/how_to_use_DW/vocabulary.html)

Week 8 - FTP/Cyberduck

FTP stands for File Transfer Protocol and it is used to transfer files from one computer to another over a network such as the Internet.  Usually the file is transferred from your computer to a web server.  FTP is faster than other protocols like HTTP and when exchanging large files, FTP would work well.  (http://www.dynamicwebs.com.au/tutorials/ftp.htm)

The tutorial referred to above states that the objective of FTP were:

1. To promote sharing of files (computer programs and/or data),
2. To encourage indirect or implicit (via programs) use of remote computers,
3. To shield a user from variations in file storage systems among hosts, and
4. To transfer data reliably and efficiently.

There are commercial programs available for using FTP and one of those programs is Cyberduck

I started using Cyberduck in class and had a go at uploading a picture file to Cyberduck and to the CDU Server SCAH.

When you open Cyberduck you see this page:

I found some information that runs through how to manually upload a site using Cyberduck 

Below is a helpful video on using Cyberduck

HTML Help

I have found a few websites that have helped me in creating my very first webpages.

w3schools   tizag   HTML Source   and   HTML Dog

HTML Dog has this nifty list of   HTML Tags that really helped me out too.

I had no trouble creating my index and page 1 pages but could not get my image to show.  I was about pulling out my hair and cursing my computer when I found some help.  Thanks Page Resource!  You helped me work out why my image wasn't showing up on my webpage and I was able to fix my small error and now it works!