Assignment 3: Facilities pages

I am also assigned to do 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: Introduction and home page

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.

Below are the screenshots of the final webpage

Group Assignment: Flash

For the group website, I am in charge of the introduction page which includes the flash video.

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 zapin budi, which applies to out theme, culture and heritage.

Personal Website (Assignment 2)

Hello and welcome to my blog! :)

This time, I'll be explaining on how to create a website.

For our second assignment, every student is assigned to create their own personal website. It should include their background, interest, hobbies, favourite links and others.

Below are the steps taken to complete the assigned task:

 Step 1: Create a new html file on Adobe Dreamweaver. Save it as index.html for the first page a.k.a the home page. I then add tables for the header with 2 rows and 5 columns. After that, I merged the several of the cells to get the design I wanted for the header.

 Step 2: Insert image in the cell. here, I chose the MMU logo. Note that all images used must me saved on the same file so that I would appear properly on the website and organized.

 Step 3: Insert text to the proper columns. I then adjust the size, font, and also the background colour to make it more attractive. I also adjusted the width and padding of the table.

 Step 4: I inserted roll-over image to make the website a little more interactive. The images was made using Adobe Photoshop. Notice that I didn't put any background image. This is because I would like the design of my website to be simple, not crowded with heavy images, and a lot of white space. It looks more organized and classy.

Step 5: Create a new html file for the new page. Copied the header/banner from the first one. I then insert tables and adjusted the size. After that, insert picture and text on introduction and about myself. Again, I changed the font type, size and colour according to my taste and also the colour of the background. I adjusted the picture so that it looks more proper and nice.

 Step 6: Again, copy the header/banner from the previous pages so that it is themed and synchronised. I chose to insert image placeholder where I can put my image on the proper placing, resized it. Then, I insert the image i wanted which is a mind map of my interest and hobbies. The mind map was made using Adobe Photoshop, consisting of logos, images and texts.

 Step 7: I chose to do my contact page first before the links as it is easier. One more time, I insert tables for the contact details. I changed the widths, fonts, size and colour. I also added a chatbox which can be found here. Of course, I adjusted its width to better suit the theme.

 Step 8: Assign hyperlinks and adjust its colour so that it doesn't turn dark blue which would make it hard to read. I designed it to be underlined when roll-over.

 Step 9: For the link's page, I decided to create a table and divide it into two catagories. I then add images of the respective links, it will function as buttons.

Step 10: Then I insert absolute links on the buttons to link the pages. Both the Facebook and Twitter buttons are directed to my accounts when clicked. In all the steps taken, I aligned every image, text and buttons to the centre.

Step 11: I then decide to change the home page roll-over image and replace it with a flash movie that I've made, I then save it in a .swf file. I choose the add 'media : swf' tool on the left and added my video in a table. The roll-over image was then placed on the 'About Me' page/

Step 11: Test the final website on the web browser to see if it functions properly, all links are working and images and texts are aligned.

 1st page (Home)

 2nd page (About Me)

 3rd page (Interest & Hobbies)

4th page (Favourite Links) 

5th page (Contact)

And that is how I make my personal website using Adobe Dreamweaver.

Hope you like it, enjoy! :)

E-wallpaper (Assignment 1)

For this assignment, we are suppose to create a digital image as a wall paper. The event and theme is MMU FOM Open day dated March 21^st, 2012. Therefore, I have to create a poster to show the characteristics or features of FOM to advertise and to promote my faculty. The size of the wallpaper is international paper, A4.

Step 1: Create a new file. Select A4 size (width: 210mm, height: 297mm).

 Step 2: Add 'gradient'. I used the colour blue.

 Step 3: I then rendered some 'clouds' and adjust its opacity to give it a nicer effect.

 Step 4: Using the selection tools, I then select the image I want to use, FOM buliding, a view from the cafe where most students enter the faculty from there. I edited the image with 'artistic cutout' to make look better for the poster. I also adjust the 'brightness and contrast'.

 Step 5 : Then I insert the image into the poster and used 'free-transform' to scale and place the image. As you can see, the image suits the background.

 Step 6: Repeat step 4 and select the image.

 Step 7: I place the image where I want it, again, using 'free-transform'.

 Step 8: I found this image from Google. I then replace it's colour using 'fill'.

 Step 9: The image was placed, and I adjusted the 'brightness and contrast'.

 Step 10: I also found vector pack consisting of businessman and women. I then use the selection tools to select the images. I arranged the image, and merged it together so that there are less layers and easier for me to navigate through the software. I also add the 'atistic cutout' for this image.

 Step 11: Repeat step 8.

 Step 12: As you can see, I've placed the images of the people into the poster. Again, I adjusted the 'brightness and contrast' for the images places to make it blend in even more.

Step 11: Create text and add 'artistic sponge' to make it look more appealing.

Step 12: I used 'drop shadow' and 'bevel and emboss' from the blending options for both the colour splat images.

 Step 13: Add the text for the event itself. Note that I 'resterized' and 'merged' the text so that there is less layer. Therefore, it is easier to be moved, scaled and etc.

Step 14: I then add a box and adjusted it's opacity. Then I add the text for event's venue, time and tagline.

Step 15 : Add MMU's tagline, and make final adjustments.

Below is the finalised poster for the E-wallpaper assignment that I made.

Hope you like it, enjoy :)