Attractions ( Using Dreaweaver) (iii)

Finally, the last step is to link all the web pages together.


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

http://kapas.island.my/

• http://www.malaysiasite.nl/kapaseng.htm
• http://www-singapore.com/diving/pulau-kapas.htm
• http://budaktangkas.blogspot.com/2011/05/pulau-kapas-amazement-of-gods-creature.html
• http://allmalaysia.info/2009/01/01/seasonal-squid-jigging/

Attractions ( Using Dreaweaver) (ii)

From the previous post, i have showed the progress on the making of main buttons for my webpage.
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

After this, i have to create another 5 web pages to link them with the main buttons. I named them as "diving html", "snorkeling html", "fishing html" ,"turtle html" and "more html".

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.

   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 =]

Assignment3-Pulau Kapas -Attractions ( Using Dreaweaver) (i)

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 to insert > 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