ALL the process and Final Output of Assignment 3

Final Output

Process of making final website using dreamweaver

Step 1 : Create 6 Row , 1 column table.

Step 2 : Import the .swf flash file i have created to the top of the row. Create table again inside the second row , 1 row , 6 columns table.

Step 3: Import the button which i created from photoshop into dreamweaver, using rollover image function.

Step 4: Select the whole table and click the Page Properties button .

Step 5: change the background colour.

Step 6: also change the background image using the Page Properties button.

Step 7: create table again in fourth row, 2rows , 1 columns table to put picture and content.

Step 8: Import image the the table just created.

Step 9: Right click under CSS style, Current , chose Edit, then put the transparent background which I have prepared using photoshop, put it behind the table.

Step 10: put the content which I found about vacation package below the picture.

Reference: http://www.youtube.com/watch?v=HlDi9ThuSsQ

Process of making final website using dreamweaver,

Created by Gan Yi Jiang 1081100798 , for more information please go

http://ganyijiang.blogspot.com/2011/08/prcess-of-making-final-website-using.html

____________________________________________________________________

Process of creating rollover image button in Photoshop

Step 1: Create a Rectangle like this in Photoshop, adjust the stroke.

Step 2: Adjust the gradient of the object to this colour.

Step 3: Create one more small rectangle shape on the big rectangle.

Step 4 : Adjust the small rectangle gradient and inverse gradient.

Step 5: Type the word Package on the button. Adjust Outer Glow of the word.

Step 6: Adjust the scale of the small rectangle and put it upward a bit , to make it looks like this.

Step 7: change the gradient color for rollover image button.

Finally all the button are created and save as .png for further use in Dreamweaver.

Reference: http://www.youtube.com/watch?v=VG23RRan_M4

This is the step to create rollover image button. Vacation package. Save as .PNG file and input to Dreamweaver . Function : when your mouse move to this image , the colour will change.

Created by Gan Yi Jiang 1081100798 , for more information please go http://ganyijiang.blogspot.com/2011/08/8-step-for-creating-rollover-image.html

Process of creating Banner in AdobeFlash.

Step 1: Create 4 layer , and import 4 different picture which size 728X90 , and make the inside frame till 50 , the following 3 layer also have the similar characteristic.

Step 2: Insert key frame for frame 50 and frame 60, the following 3 layer also have the similar characteristic.

Step 3 :Convert the picture to symbol, and adjust the color effect of the image to alpha at frame 60, the following 3 layer also have the similar characteristic.

Step 4: highlight 50 to 60 and Create Classic Tween, the following 3 layer also have the similar characteristic.

Step 5: At frame 49 put in the Word I have created in photoshop in to flash banner, the following 3 layer also have the similar characteristic.

Reference: http://www.youtube.com/watch?v=scFZg5qDcv0

Class website Final Output

This is the final output of class website

My Final assignment webiste

This is the final output of vacation package webpage.

Progress detail

Above are the Flowchart of the individual site and Design of GUI

Description on the individual ideation of the link

The idea of my link is create refreshing view of the website, the design will be more arranged and nice to look.

Objective of the link

The objective of my link is to show the vacation package available to people and I also will link my page to others website for further information.

Tools

I use tools in Photoshop such as inner glow, outer glow, gradient, shadow and highlight and so on,

I use tools in Dreamweaver such as roll overimage , import .swf, create table , center the image font size of the word and so on.

I use tools in Flash such as colour effect alpha , classic twinning , key frame and so on.

References

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

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

http://www.youtube.com/watch?v=ya-lHHv7GEw

Process of making final website using dreamweaver

8 Step for creating rollover image button for final assignment

This is the step to create rollover image button. Vacation package. Save as .PNG file and input to Dreamweaver . Function : when your mouse move to this image , the colour will change.

Draft of the final assignment website: Vacation Package

Vacation Package : the length is 1024 , which very popular for many website .