Assignment 3: Programs (Ahmad Hariz)

In our group website, my tasks is about past events and upcoming events in Istana Budaya.. I used dreamweaver and photoshop to make it. This is the results after i had finish it in 4 days.. ==!

click here for the blog entry on my personal blog

Assignment 3: Community (Nur Izzati)

These are the material used for a groupwork.

Others i use background colour and font size and colour.and these are the printscreen :

click here for the blog entry on my personal blog

Assignment 3: Facilities (Hani Nabila)

One of my tasks is to create the facilities pages which I broke down into 3 pages. The steps taken are more or less the same, of course with the same background and header. It only differs in content. This is done so that it maintains the selected design and is synchronised.

I used this GUI layout;

Following are the summary of the steps taken for these pages;

 Step 1: Create a new html file and save it on the designated folder.

Step 2: Insert background for the page. It was set to fixed attachment, no repeat and centre.

 Step 3: I then insert table with 2 rows and 7 columns. Adjust the width and height, and merge top cells to make space for the banner. After that, I insert the image banner, text for navigation links and others.

 Step 4: Make sure everything is in place, aligned to the centre. I adjusted the size of the banner as it was a little larger, to fit it in the cell properly. I then changed the colour of the text, table's background colour and other related details.

Step 5: As for the content, each page varies (image/video/text). I created a table and merged few cells, where necessary, and aligned it to centre. This was done so because it is easier to use tables as we used a lot of images and a video. It keeps them in place. For the facilities' main page, I used a picture that was made earlier using Photoshop and place it on an image place-holder. Resizing the image and table was done in this process. The navigation button on the left are all the same for all 3 pages.

Step 6: Link up all the pages to their respective buttons.

Following are the screen-shots of the final facilities pages;

 Facilities' main page (image done with Photoshop)

 Facilities architecture page (text)

 Facilities's architecture page (image roll-over)

Facilities' space page 

(video made using Flash and also a link to direct to the rental charges)

That's all from me for the facilities pages.

Thank you.

Assignment 3: Media (Ahmad Muhamad)

This web are still in progress (from his personal blog entry as of 18th August '11)

Assignment 3: Flash video (Hani Nabila)

Below are the steps taken for the flash (.swf) video for the website.

First, I created a new flash file (ActionScript 3.0)

I then set the stage in black to match the images I'm using.

Then, I add the image I wanted and also suitable text for the video. 

Every Image and text is on a different layer so that it is easier to manage. 

I then edit the frames according to it's appearances.

Lastly, I import a sound file into the library and dragged it to the stage. 

The audio I used is a traditional Malay song called Gambus Budi, 

which applies to out theme, culture and heritage.

Assignment 3: Introduction and home page (Hani Nabila)

All of the pages will have a background image, banner, table for navigation links and measures 850pixel for its width in order to synchronise the website. 

For this assignment. I am in charge of Intro page, home page, facilities pages and also the compilation of the web pages. I did make some adjustments to the other member's pages to synchronise the whole website. Below are the steps taken for both intro and home page.

Step 1: Create html file.

Step 2: Rename file as index.html and set the site root so that the images will appear accordingly.

Step 3: Insert table, adjusted the width and height to match the design. Then I aligned it to the centre and merged the top row to make room for the banner.

Step 4: Insert image banner and background colour for the table. Then, I inserted the texts for navigation of the website (page links) and set the font colour. 

Step 5: Then I insert the background Image. It was set to fixed attachment, no repeat and centre. 

Step 6: Insert another table with one row and one column, adjust its width and height to align with the banner and set the background colour. I inserted the text "skip intro" which will function as a link to direct you to the home page.

Step 7: Use Media SWF from the insert panel and choose the video for introduction. Lastly, adjust position.

*the video was made using Adobe Flash and for the process, please click here.

As for the home page, the steps taken are the same as step 1 to 6 as it should be synchronised. I replace step 7 by using a "welcome" image instead of a video. The image was made using Photoshop. Refer to below for the welcome image and background image.

 Welcome image: A compilation of the logo, welcome greetings and a variety of Istana Budaya performances.

Background image: From Google and it represents Malaysian art and culture. I did however darken the colour to better suit the web page.

Milestones - Achieved

Image 1.0: Flowchart (also as division of task)

Image 1.2: Layout for individual webpage

Image 2.1: GUI (previous button)

Image 2.2: GUI (next button)

Image 3.0 : Design of GUI (screenshot of the homepage)

All of the pages will have a background image, banner, table for navigation links and measures 850pixel for its width in order to synchronise the website. Some of the pages will will have button of the same image but different styles and colour according to the member's preference to suit the style better.


A preview for the intro page with flash.