Part 1
After the initial layout and design of my individual webpage, now i'm going to start my individual link in assignment 3 by using Dreamweaver.
Firstly, i opened a new html file and chose blank page with <none> layout.
Now i would like to insert the banner, logo, buttons, and background of my group to the table that i already inserted and saved the file as a template for my webpage. You can go toinsert > image> look in to insert image
 |
 |
| This is how it looks like when we open it with google chrome |
Based on my initial design, there are four main buttons in the first page of my individual link. Therefore, now i have to create them by using Photoshop. To make the rollover effects of the buttons, so i needed to have 8 photos which have been edited.
The pictures below show how i did for the first button ( Underwater diving)
p/s: the other 3 buttons using the same methods as well
 |
| This is the original image that i used it as my first button |
 |
| After adjustment of brightness 40,contrast 30 Filter > Paint daubs: Brush size 8, sharpness 7 Layer style: inner glow: size 20 , opacity 75 |
 |
| Now i would like to insert text to the photo by using the horizontal type tool with Layer style> Drop shadow: size 5, distance 5 > Outer glow: spread 20, size 13 |
 |
| Go to layer style> Bevel and Emboss: size 30px |
Part 2
So this is the outcomes i got.
These are the first image and second image used to insert rollover image. To insert this in Dreamweaver, first i have created a table with 2 rows and 2 columns for four buttons.Now i would like insert the first button by clicking on Insert > Image Object > Image Rollover
 |
| Browse the original image and rollover image from the respective folder |
  |
| Repeat the same methods to the other 3 buttons and this will be the outcome |
Now i would like to show the making of ''diving html''.
Open a new html file with blank page and <None> layout. Then put in the contents that i prepared. After that insert the pictures which have been edited in Photoshop. And also, i used the same methods for the making of the remaining 4 web pages.
Open a new html file with blank page and <None> layout. Then put in the contents that i prepared. After that insert the pictures which have been edited in Photoshop. And also, i used the same methods for the making of the remaining 4 web pages.
 |
| Created a table with 1 row and 3 columns and then Insert each of the picture to the column. |
 |
| Original image |
 |
| Edit in Photoshop Layer style> Stroke: size 3px |
 |
| This is the outcome |
To standardize the images in my individual link, i edited all the image by adding stroke of size 3 and re-sized them ( width 300, height 250 ) when insert into Dreaweaver.
 |
| So this is the outcome (open in google chrome) |
P/S: Applied the steps and methods to the other 4 links =]
http://candist-mei.blogspot.com/2011/09/attractions-using-dreaweaver-ii.html (Chan Mei Wui)
Part 3
First of all, i want to link the four main buttons in my first individual webpage to the other links.
 |
| Firstly, click on the image that i want it to link to the other page |
 |
| Go to'' Link'' that shows in properties, then click on the yellow folder and choose the webpage i want |
Now, i want to link the text in my content to other webpage by using Hyperlink
 |
| Highlight the text, and click on the top right icon( Hyperlink) |
 |
| Choose the webpage that i want to link by clicking on the yellow folder |
Lastly, i would like to have a email link on my webpage
 |
| Highlight the email address |
 |
| Click on the Email Link icon |
 |
| Paste/Type the email address in the E-Mail box |
Up to here, my individual link for assignment 3 is successfully completed =]
I want to thanks to my teammates, team leader for their cooperation and thanks to Dr.Ken Neo for his guiding on this assignment.
Here are the references
No comments:
Post a Comment