Facebooking: Building

Leaw Jian Xiong - Building

1st update

Description

The idea of the link is to let user know more about the Petronas Twin Towers. The link will contain some videos and pictures about the Petronas Twin Towers.

Objective

The objective of the link is to introduce the history and architecture of Petronas Twin Towers. Pictures and video will be showed to allow readers have a deeper impression about the building.

Design of GUI

Above picture shows the interface of the building part. There will have a banner at the top of the site and below are the links for the other parts about KLCC Shopping Mall. The sub topic of building will be showed below those main links. Also, pictures and videos will be put for the contents followed with the descriptions.

Flowchart

After clicking the building topic, videos and photo will be showed and then come down with three sub links which are History, Architecture and Poem about Petronas Twin Towers. Contents and pictures will be showed on each sub link.

Use of Tools: Photoshop and Dreamweaver will be used for designing the web page.

Reference : http://www.petronastwintowers.com.my

---------------------------------------------------------------------------------------------

2nd update (Design of Homepage)

Our group has decided to use the banner below for our main page.

Below is the design of Homepage.

Petronas Twin Towers

The Skyscrapes in Kuala Lumpur, Malaysia

The 1.8bil Ringgit Petronas Twin Towers building was officially opened on August 31, 1999 by Malaysia's 4th Prime Minister, Tun Dr Mahathir Mohammad.

The building were designed by Argentine architect César Pelli and Filipino-Malaysian Engineer Deejay Cerico under the consultancy of J. C. Guinto, also known as the Golden Boy of Architecture, and Filipino Designer Dominic "Minick" Saibo, the Petronas Towers were completed in 1998 after seven years of construction and became the tallest buildings in the world.

Petronas Towers were the tallest buildings in the world from 1998 to 2004 until surpassed by Taipei 101.

The 88-floor towers are constructed largely of reinforced concrete, with a steel and glass facade designed to resemble motifs found in Islamic art, a reflection of Malaysia's Muslim religion.

Tower 1 : The west tower was built by a Japanese consortium led by the Hazama Corporation
Tower 2 : The east tower was built by Samsung C&T and Kukdong Engineering & Construction, both South Korean contractors.
The Sky Bridge contract was completed by Kukdong Engineering & Construction is between the two towers on 41st and 42nd floors while the Tower 2 became the first to reach the world's tallest building at the time.

Reference: http://klcc.stsite.com/

3rd Update

I follow the GUI design for the Buidling page. Above is the screenshot of the Building page.

Below is the banner that I use for the Buiding page.

In order to make our website look more standardized, so we choose to use the same template under File > New > HTML then choose 2 column fixed, left sidebar, header and footer. Also we use Times New Roman as font. This is how our template looks like:

4th Update

This is how my Building page look like.

For the background color, I go to CCS > Targeted Rule select container, and then choose Edit Rule, select Background, at Background-color there choose "Black Color".

For the main title bar, I used Insert > Table function to do the main title bar and the select Row: 1 and Column: 6.

For the page font, go to Page Properties, and choose Times New Roman, Times, serif.

Also, for the Links and visited link, go to Page Properties > Appearance (HTML), change the color of Link and Visited Links.

I used Adobe Flash and did a flash to show the series pictures of Petronas Twin Towers for the Building main page. I have selected 4 pictures, and then make every picture interval with 25 frame. And then save as .swf so I can insert to Dreamweaver.

(insert Blank Keyframe and add image)

(insert to Dreamweaver)

Therefore, the flash appears on my Building main page.

And below is how i link those size bar.

(go to Properties, choose HTML, and the click Browse for file to link another page.)

(and then select the .html that I want to link)

5th Update

This update is about the sub links of the Building page. I divided the contains into Building's History, Architecture and Poem.

For the Building's History, I gather all the information from http://www.petronastwintowers.com.my/internet/pett/pettweb.nsf/pages/Detect+Screen?Open

(Under Inspiration > History > Construction of the tower)

Use of Tool: Dreamweaver and Photoshop.

For this page, I used Photoshop to edit the picture from vertical to horizontal to make it look better in my website. The picture initially looks like:

(after edit using Photoshop)

(Use the Rectangular Marquee Tool to highlight the part that I wanted, Copy and Paste to the New page)

(and then press Ctrl+V to paste the selected picture)

I do the same step for the other two picture, and this is how it looks like after I finishing copy and paste.

For this picture, because our website background color is black color, but the picture background color is white color. So in order to make it look better, so I used Magic Ward Tool and Paint Bucket Tool to change the background color.

(select Magic Ward Tool and click on the white space area)

(and then select Paint Bucket Tool and choose black color)

(click at the white space so that the background color change to black)

Also I did the same thing for this picture, use Magic Ward Tool and Paint Bucket Tool to change the background color. This is how it looks like after I changed the background color.

After that I inserted these picture to my website, this is how my Building's History page looks like:

For Architecture page, information are gathered from http://www.petronastwintowers.com.my/internet/pett/pettweb.nsf/pages/Detect+Screen?Open

(Under Inspiration > Architecture > A Polished Facade, The Double-Decked Skybridge, The Pinnacles, Interior Design: Traditional in Modernity and The Elevator System)

For this page, I used Table function to categorize all these architecture. I used Row: 3 and Column: 1 Table.