Process of create a final website through Dreamweaver

First Step: Create Column

First i create a new html file through Dreamweaver and then have to create a table with insert 5rows and 5 columns.

Second Step: Put the Content

I have insert the a png file(content) that create from Adobe Photoshop in the column.

( Refer to: http://winjek.blogspot.com/2011/08/text-edited-in-photoshop.html )

Step 3: Make the link button

After put the content, i starting to make the button insert to each of the column in a same row.(Refer to: http://winjek.blogspot.com/2011/08/link-button.html )

Step4: Link the flash file

After i create the link button, then i starting to put 3 flash button in each of the column in the same row. To make it consistence, i put each of the flash button in the middle column. After that, i make a topic for each of the flash button and link to the flash file that i create.

Refer to: http://winjek.blogspot.com/2011/08/flash-images.html

Step 5: Finalizing project through Dreamweaver

The last step is insert the background and flash banner

Refer to: http://winjek.blogspot.com/2011/09/finalizing-project-through-dreamweaver.html

Finalizing project through Dreamweaver

Insert Advertising banner

The ads banner is on the top of the web page. First, i open the media file and choose the flash banner file and insert into the top of the column. 1 row have 5 column so i highlight the first row and merge it to become 1 column. It easy me to put the ads banner without adjust the column.

Insert Background

After insert the media file, the next step is insert the background. First, i enter the page properties(at the below) and then i can see the background image under appearance CSS folder. Therefore, i click on the background button and choose the image to set as my background.

So this is my final outcome

Flash Images

To make my part become more attracting, i put the flash images in the my environment link. Sometime word and text are hard to explain the real environment. Therefore, i create 3 of the flash images include wildlife, flora & fauna and other thing. Below are the images folder and the step using in flash player.

First Flash: Flora & Fauna

Second Flash: Others environment picture

Third Flash: Wildlife

Process of making flash through Adobe Flash

Link button

To make the website looking more consistency, one of our member Terry Gan has create all the links button.

After i receive all the button from Terry Gan, then i insert the button into the table that i create in Dreamweaver. At start i don't know how to combine 2 of the button to became a new. Therefore i using flash player to make it, after i fully complete to combine button, then i make use in Dreamweaver. Unfortunately the link button cant used to link to another links. After i try and try to search another solution and finally i find out rollover image can solve my problem. Just needed to insert the original image and the rollover image.

Text edited in Photoshop

First, i create a new text pad with a length of 1024x 432. After that, i use paint bucket tool to make the background with with colour. Then i put the information about the environment in the text pad.

To make the text pad became transparent, i adjust the opacity of the background and then click the save for web and devices. To make my background became transparent, i choose to save in PNG-8 file, tick the transparency and then choose the transparency dither. After done all those thing then click done and save the file. The reason why i did not save in JPEG file is JPEG file can't transfer the transparency file to use in another software such as Dreamweaver. After complete the text, i inset the file into the Dreamweaver for my final part.

references:

http://www.abctours.com.my/read.cfm?THE_ID=55

http://www.world-wildlife-adventures.com/directory/malaysia/wildlife-park.asp?sanctuary=Batang+Ai+National+Park&state=Sarawak

SIOW WIN JEK- Environment

Description on the individual ideation of the link

The idea of my link is to present or bring out the message of environment around the National park to the users/ viewer. The thing that i am try to bring out is give a clear direction and directly reflect their curiosity through the flash pictures.

Objective of the link

My objective to create this link is to convert the message through images rather than use "thousand word to explained". In addition, use the images to form a interconnection relationship between human and nature. Besides try to attracting people travel to visit National park and have the feel keep in touch with natural environment.

Design of GUI

The GUI design form through by using pencil and the initial plan by the early thinking. The top of the column will be the banner. Below the banner would contain 6 of the links which include home,

activity, package, accommodation, environment and the last one is facilities. These 6 links is provided for easily our users to click and find the certain information. Other than that, i will be link to another website for more information.

These is the interface of the environment path. Below the links have a content bar that showstheinformation about the environment in the National park. There are 3 type of flash gallery that contain wildlife, flora and fauna and other images. It easy for the viewer to view the image.

Flow chart of the individual website

This is the flow chart of the environment. Below the content bar will have 3 column of flash gallery. Which contain wildlife, flora and fauna and others images. When the viewer view and click the links will shows the images with slideshow effect.

Tools

Adobe Dreamweaver, Photoshop and Flash player

References

http://www.youtube.com/watch?v=Q6rRLw5ggOg

http://www.youtube.com/watch?v=4PntDhna6DA&playnext=1&list=PL04362AEE3D046E2E

Final assignment part 2

Before combine our group project, i would run on the facilities part and the environment part of our topic. First, i need to do is type a scrip to introduce about what facilities should have in the Batang Ai National Park. The Scrip as below:

Facilities

Transport

The local Community Cooperative provides boating services for trips to and within the park. The park is only entry point is from the Batang Ai hydroelectric dam Lubok Antu, roughly 5 hour from Kuching. From the dam, park visitors are require to charter a longboat as Batang Ai National Park is located in the interior and is only accessible by river.

The first hour of the boat ride will take the visitors across the scenic Batang Ai lake and the journey will be upstream the fast flowing Batang Ai river.

Accommodation

There are no accommodation facilities within the park at present. Therefore, Hilton Longhouse Resort and several longhouses provide accommodation facilities just outside the park. Visitors can get the real experience through staying in Iban longhouse if they require.

Food

None available sale inside the Park or in the immediate vicinity of the park. Food provided for those on organized tours or self bring, But there are several restaurant and shop outside available outside the National Park.

The second part is write the scrip to introduce the environment of Batang Ai National Park

Environment

The Park also shelters many other protected species of wildlife such as the lush dipterocarp( is the family of 17 genera and approximate 500 species of mainly tropical lowland rainforest tree) forest are the home to the Orang Utan, gibbons, and hornbills. The lake creates a beautiful environment and give a sense of peace and harmony. The local inhabitants are mostly Iban, and tours to nearby Iban longhouse are also a place of tourism. The communities have formed a cooperative and are helping to conserve the park.

To add some effect on the facilities and environment part, i will create a banner as the background that contain few picture on the next part(part 3).