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).

Final Assignment Background- Part 1

Step 1

I open the Photoshop and create a new project with 728x500 size for background. Then i find the 6 interesting picture through online and then put in.

Step 2

First i open all the image and copy all the picture. Then paste into the background that i create. To make the picture more attracting, i use some tools that i learn form the pass tutorial such as layering, color enhancing, photo retouching and so on.

Step 3

After i adjusted color, then i adjust the size of the image. To differentiation the image, i combine the image with different size. Then it will looking more attracting and fascinating.

Step 4

When i finish doing all thing, then i merge all the layer into 1 layer. After that, i adjust the level of image for finalize my project.

Final Outcome( FOM open day E-wallpaper)

E-wallpaper: STEP 7

To make the wallpaper wont view so empty, i additional type 1 sentence on the airplane paper. In addition, to make the sentence become more attracting, i adjust the layer style and put the inner shadow on the sentence. Therefore, it's look like more fascinating.

Lastly, for those people who want to search more information about the FOM Open Day. I put the link below there so it is a convenient, efficient and easier ways to get the more information.

E-wallpaper: STEP 6

The color of sky looking so dull so i adjust levels of the sky picture.

When i click the levels button(image-adjustment-levels), it will show a chart. The chart consist of 3 adjusted button(black, grey and white). Therefore, my sky picture become more brighter and greater.

E-wallpaper: STEP 5

For this step, i just insert the word in to the wallpaper. The tools can find in the tools panel. To make the sentence more attracting, i coloring the word, change to "Forte" word style and adjust the word size.

E-wallpaper: STEP 4

When i go to class and pass the FOM corridor, i saw a board stick on the wall. Suddenly my brain flash out something. Therefore, i put out my Nokia mobile phone with 320 megapixel taking down this photo.

I using the same method and step to put the board photo in the wallpaper.

The picture looking weird after i put into the wallpaper. I find out the black in color board would not perfect and not attract. Then i luminosity(layers bar) the board become white and transparent.

E-wallpaper: STEP 3

The next step is i also using the same method copy n paste the picture into the background.

Because i just want the building only, then i using the quick selection tool at the tools panel to select the building. Although some places can't be selected then i use magic wand tool to expand the cut line until the line connect the whole building. Then just follow the previous step, cut and drop the picture into the background.

E-wallpaper: STEP 2

After done the first step, the next step is copy the wallpaper/picture and paste in the blue background.

Actually, got some method can use to copy and paste. I just highlight the picture and paste in the blue background. Of course the size will become smaller than u expected. Then u just press (ctrl+T) to adjust the size.

I use the ruler tools adjust my height and width size. Then will be accurately to form a layer.

E-wallpaper: STEP 1

First, i open the Adobe photoshop CS5. Then i create a new digital drawing pad by using International paper( looking like A4 size) and put the title( FOM opening day). After create a new page, i prefer to put blue in color as my background. Before i brush the background, at the top-right bottom got 2 small column with coloring. I click one of the small column and choose the blue color. After i choose, i use the paint bucket tool at the tools panel to brush the background.

E-wall paper material

About Me

Name: Siow Win Jek

Age: 22

Student ID : 1091106202

Faculty : FOM

Major : Finance with Multimedia

Interest : play computer games, study philosophic material, gardening, fishing, watch animation and .........

Contact : 014-6362806

E-mail : z_jake@live.com