3rd week

As salam...

We meet up again on 3rd week..this week in class-  hands on practical skill on using the software Dreamweaver. This is a new experience for me using this software..

This week class was conducted by Dr Norasykin. Before move on to hands on skill , a little bit revision from previous class on static and dynamic website.
_____________________________________________________________________

Now it's time for Dreamweaver..
Introduction:
Dreamweaver is a web programming with the interface look alike Microsoft Word . This software have template and we can use this  to create our website.Dr Norasykin also highlighted on the windows explorer a.k.a windows tree .This is very important because we need to know the folder location that we use to make the web. Usually as a novice a.k.a beginner , we put it at the desktop.

Class session

This software is use to  create a website using PHP or ASP language.For this session , we make a website using html (Hypertext Markup Language) .

First page

We need to know the basic things of this software before we use it happily without any difficulties . The basic things are :- 

• Title Bar 
• Menu Bar
• Tool bar - icons
• Project Explorer on the right side 
• Properties 

We need to know the differences between working area.There are 3  types of  view of working area that we can choose based on our preference .Working area is a place for us to insert and edit our webpage content such as images, text ,links etc.

The three types are : 

• Code - suitable for those with the html coding knowledge
• Split - suitable for "curious"  programmer or "curious"  novice ( Have 2 different working area  : code and design)
• Design- suitable for novice (Recommended)

Another important thing to know is on how to preview the page. We can preview our page by click on the tool bar - Icon world image and choose the preference browser to view the page.

Last but not less..it is important for us to save our work . We can see the differences either we have save the file or have not save it by looking at the document tab area .It is a must to save our work in one folder. All the related file need to be in the folder .This folder is important because it needed to be link to the server.

document tab area

  Print screen of a document - Not yet been saved

Print screen of a saved document. The word htm appeared as the file extension.

This is the 1st hands on activity - working in the document area 

Then we need to choose the background for the website. I gain new knowledge from this activity..

• I learn on how to choose more specific image that is suitable for my searching by using advanced search

Apart from that , i also learn on how to get one nice background without turning it into tiles type. My mistake is saving the image in thumbnails view..so learn from the mistake , need to save it after i click the thumbnail and at last manage to get the background colour as i want it (Thanks to Amir)

thumbnails view

Note: Please don't do this - wrong technique of saving an image for the background

Proper technique of saving an image for the background

Next activity - using frame template . 

There are many templates for frames. Dr Norasykin ask us to choose the frame as Fixed Top, Nested Left. One thing that i need to know and remember  about frameset , each frame represent one respective page for each frame. For the frame Fixed Top, Nested Left, i need to save using four different name  based on each frame and for the whole frame .For example : 

• Frame 1 - Top frame
• Frame 2- Left frame
• Frame 3- Main frame
• Save all frames 

Last hands on- create a weblink to the main frame

For this activity, i need to know the logical flow of the target frame for the link to appear. Based on the frame image above, the link address is created on the left frame,once the user click the link address, the website will appear at the main frame (content). 

• Select the text that you want to become the link  (Left Frame)
•  In the Properties pane, in the Link text box, type the URL 

        ( NOTE: Be sure to include http:// in the URL. )

•  Press  Enter

 

or 

•  From the Insert menu, select Hyperlink 
•  click HYPERLINK 
• The Hyperlink dialog box appears

When a link is added, the URL should look similar for example: http://www.utm.my

Note:  If you see "file:///," the link will not work for your users. 

Additional info :we also can add up background color or change link color  by using the page properties pane.

Summary :

From the class session  :

• I manage to create  simple webpages for my website using blank /plain  document view 
• Using frameset for my webpage
• Using and insert background image to the page either using image or using colour background
• Create link to external site 
• Save all the webpages into one folder

___________________________________________________________________

Ipad Contract Aggreggment 

I am one of the candidate for Ipad contract with Prof Zaidatun...hohohohoh..my iphone doesn't have jailbreak . Insya -allah will take good care of it.Thanks for it..

contract

_____________________________________________________________

Next class will learn about installing IIS server to the computer. Need to read the handouts given by Prof Zaidatun.

~End of week 3~

Thank You