Blog MindaSys | Archive

Archive | Dreamweaver

RSS feed for this section

Mengatur kedudukan paparan laman web

Posted on 01 July 2009.

Buka fail index.html, klik pada tag <body>.

tut20_img1

Pada paparan Code, sila letak kod tersebut selepas <body>:

<div align=”center”>

Lihat gambarajah berikut:

tut20img3

Dan kod tersebut sebelum </body>:

</div>

Lihat gambarajah berikut:

tut20_img4

Simpan fail anda.

Berdasarkan pada tutorial-tutorial yang lepas, kita telahpun mempelajari bagaimana hendak membuat pautan dari satu laman web ke satu laman yang lain. Selain itu, anda juga telah diperkenalkan serba sedikit tentang CSS & bagaimana hendak menukar kod CSS anda.

Anda boleh muat turun fail yang telahpun siap daripada pautan ini.

Klik di sini untuk muat turun.

Anda boleh mencuba sendiri bagaimana hendak menukar ciri-ciri CSS dan juga rupabentuk laman web.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (2)

Menggunakan arahan (rule CSS)

Posted on 22 June 2009.

Buka fail index.html, dan klik pada ayat Best of Kuching pada bahagian kiri laman web tersebut.

tut19_img1

Pada tag selector, klik pada bahagian paling kanan, iaitu tag <a>.
Tindakan ini untuk memilih kesemua teks yang berada dalam tag<a>, atau pautan.

tut19_img2

Pada tetingkap Property Inspector, pilih navigation dari menu pop-up Class.

tut19_img3

Kelihatan teks Best of Kuching telahpun berubah mengikut spesifikasi yang terdapat pada kelas navigation.

tut19_img4

Ulangi langkah-langkah seperti di atas untuk pautan-pautan individu pada bar navigasi.

tut19_img5

Simpan fail anda.

Menambah kesan Rollover pada navigasi

Seterusnya anda akan menambah kesan rollover pada warna latarbelakang pada bar navigasi agar berubah apabila pointer tetikus melalui salah satu daripada pautan tersebut.
Untuk menambah kesan rollover, tambah satu arahan baru yang mengandungi kelas-pseudo :hover.

Buka fail style.css.

Pilih kesemua arahan .navigation.

tut19_img6

Tekan (Ctrl+C) untuk menyalin kesemua teks tersebut.

Kemudian, tekan Ctrl+V, tetapi sebelum itu pastikan kursor anda berada di bahagian hujung arahan .navigation. Lihat gambar rajah.

tut19_img7

Tambah :hover pada selector .navigation.

tut19_img8

Pada arahan .navigation:hover, gantikan nilai #6b4627 dengan nilai #161310.

Simpan fail dan tutup fail tersebut.

Buka fail index.html dan lihat laman web tersebut pada browser (File>Preview in Browser). Anda boleh mencuba untuk menukar warna teks iaitu dengan hanya menukar nilai yang terdapat pada fail CSS.

tut19_img9

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Mengaplikasikan style kelas kepada teks

Posted on 22 June 2009.

Pada tutorial yang lepas, kita telah membuat satu style kelas yang baru, dan kali ini kita akan mengaplikasikan style kelas tersebut kepada teks yang terdapat pada halaman web.

Pada tetingkap Dokumen, pilih ‘Welcome to Kuching,Sarawak’.
Pada tetingkap Property Inspector, pilih bold daripada menu pop-up.

tut18_img1

Style tersebut telahpun diaplikasikan kepada teks yang telah dipilih tadi. Seterusnya, pilih ayat ‘Best of Kuching’ dan ulangi langkah-langkah seperti di atas.

tut18_img2

Simpan fail anda.

Membuat format ke atas teks navigasi bar

Untuk bahagian ini, kita akan membuat arahan atau ‘rule’ yang baru untuk navigasi bar.

Buka fail style.css anda semula.

tut18_img3

Sila tambah arahan (rule) yang baru dengan menaip kod tersebut selepas style .bold.

.navigation {
}

Kod baru anda akan kelihatan seperti berikut.

tut18_img4

Simpan fail style.css anda.

Kemudian anda akan menambah beberapa ciri untuk arahan .navigation.

Pada panel CSS Styles, pastikan mod ‘All’ telah dipilih. Pilih arahan .navigation dan klik pada ikon Edit Style yang terdapat pada bahagian bawah sebelah kanan panel.

tut18_img5

Pada tetingkap ‘CSS Rule for .navigation’, isikan dengan pilihan berikut:

Font: Georgia
Size : 14
Style: Normal
Weight: bold
Decoration: none
Warna: #FFFFFF

tut18_img6

Klik OK.

Sekarang anda akan menggunakan panel CSS Styles untuk menambah beberapa ciri lain pada arahan .navigation.

Pada panel CSS Style, pastikan arahan .navigation telah dipilih terlebih dahulu dan klik Show List View.

Show List View bertujuan untuk memaparkan senarai semua ciri arahan dalam susunan abjad.

Pada ciri background-color, klik pada bahagian tersebut dan masukkan nilai #6b4627 dan tekan Enter.

tut18_img7

Cari display dan pilih block daripada menu pop-up.

Cari padding dan isikan nilai 8px, tekan Enter. Kemudian untuk width, isikan nilai 140 dan tekan Enter.

Klik Show Only Set Properties untuk memaparkan ciri-ciri yang telah anda pilih tadi.

tut18_img12

Anda akan lihat bahawa Dreamweaver telahpun menambah kesemua ciri-ciri yang anda telah set sebentar tadi.

Simpan fail anda dan tutup fail tersebut.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Memahami Panel CSS Styles

Posted on 13 June 2009.

Pastikan fail index.html masih lagi dibuka pada tetingkap Document.

Pada panel CSS Styles, klik All (terdapat pada bahagian atas panel) untuk memahami fail CSS anda dengan lebih lanjut.

img1_tut17

Klik tanda (+) sekiranya tag<style> belum lagi dibuka.

Klik pada arahan ‘body’.

img2_tut17

Background-color mempunyai nilai #3F2F22, yang menunjukkan warna bagi latar belakang halaman web anda.

Seterusnya, klik tanda (+) sekiranya style.css belum lagi dibuka.

img3_tut17

Klik pada arahan ‘p’.

img4_tut17

Pada tetingkap Document, klik satu kali pada mana-mana perenggan yang telah anda format sebelum ini.

img5_tut17

Pada panel CSS Styles, klik Current pada bahagian atas panel dan fahami CSS fail anda. Mod Current menunjukkan maklumat tentang pilihan semasa anda.

Membuat satu arahan CSS baru

Pada panel CSS Styles, klik New CSS Rule pada bahagian kanan bawah panel.

img6_tut17

Pada tetingkap New CSS Rule, pilih Class (untuk selector type).

Masukkan .bold pada kotak nama.

Pastikan anda telah menaip (.) sebelum perkataan bold. Semua style kelas mestilah bermula dengan noktah.

img7_tut17

Pastikan juga yang style.css telahpun dipilih dari menu pop-up.

Klik OK.

Tetingkap CSS Rule Definition akan muncul sebaik sahaja anda klik OK.

Pada tetingkap tersebut, pilih

Font : Verdana, sans-serif

Size: 11, pilih Pixels

Line Height: 18, Pixels

Weight: Bold

Color: #011774

Klik OK. Klik All pada bahagian atas panel CSS Styles.

img8_tut17

Klik butang (+) sekiranya style.css belum lagi dibuka.

Anda akan melihat fail halaman web anda akan kelihatan seperti berikut.

.bold class style telahpun dimasukkan bersama ke dalam senarai yang telah didefinisikan dalam ‘external style sheet’.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Membuat fail style sheet

Posted on 13 June 2009.

Anda akan diperkenalkan dengan cara-cara untuk membuat fail style sheet yang mengandungi arahan-arahan CSS tertentu untuk membuat satu stail bagi teks perenggan.

Pilih File > New.
Kemudian, dalam tetingkap New Document, pastikan kategori Blank Page dipilih, pilih CSS (untuk Page Type) dan klik Create.

img1_tut16

Simpan fail sebagai style.css.

Taip kod berikut dalam style sheet tersebut.

p{
font-family: Verdana, sans-serif; font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}

Simpan fail anda.

Membuat pautan style sheet kepada halaman web

1. Dalam tetingkap Document, buka fail index.html.

2. Pilih teks daripada perenggan pertama seperti dalam gambarajah di bawah.

img2_tut16

3. Pada Property Inspector, pastikan bahawa perenggan yang dipilih tadi telah diformat dengan tag paragraph.

img3_tut16

4. Ulangi langkah ketiga untuk perenggan kedua.

5. Pada panel CSS Styles (Window > CSS Styles), klik butang Attach Style Sheet (lihat gambarajah).

img4_tut16

6. Pada tetingkap External Style Sheet, klik Browse dan cari fail style.css yang telah anda
buat sebelum ini.

img5_tut16

7. Klik OK.

img6_tut16

Simpan fail anda.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Pengenalan kepada CSS

Posted on 31 May 2009.

Fail CSS (Cascading Style Sheet) membenarkan anda untuk mengasingkan kandungan halaman web (X)HTML anda daripada stail. Fail (X)HTML digunakan untuk menyusun atur kandungan, tetapi semua (font, warna, latarbelakang, border, format teks, pautan dan sebagainya) dilaksanakan dalam fail CSS.

Anda mempunyai pilihan untuk menggunakan CSS, samada secara dalaman (internally) ataupun luaran (externally).

Internal Stylesheet.

Kita akan mengkaji kaedah yang pertama.

Anda akan meletakkan kod CSS antara <head></head> yang terdapat pada fail (X)HTML yang anda hendak gunakan CSS.

Contoh adalah seperti berikut:

<head>

Kandungan CSS di sini

</style>

</head>

<body>

Kaedah ini sesuai jika anda Cuma perlu membuat stail pada satu helaian web sahaja atau anda inginkan stail yang berlainan untuk helaian web yang berlainan.

External Stylesheet

Seterusnya, kaedah luaran (external). Satu fail CSS dapat dihasilkan dengan menggunakan Notepad atau Dreamweaver. CSS tidak mengandungi (X)HTML, Cuma CSS. Anda boleh menyimpan fail tersebut dengan diakhiri .css. Anda boleh membuat pautan kepada fail CSS tersebut dengan meletakkan pautan pada ruang head fail (X)HTML.

stylesheet.css” />

ATAU

stylesheet.css)</style>

Kedua-dua cara boleh digunakan, contoh seperti berikut.

<head>

<link rel=”stylesheet” type=”text/css”href=”style.css” />

</head>

<body>

Atau

<head>

</style>

</head>

<body>

Dengan menggunakan kaedah ini, kesemua pautan (X)HTML anda akan dihubungkan ke satu fail CSS. Ini bermaksud, apabila anda ingin mengubah fail CSS anda, anda Cuma perlu mengubah satu fail .css sahaja sekiranya ingin membuat perubahan pada keseluruhan halaman web.

Terdapat beberapa sebab mengapa kaedah ini adalah lebih baik:

Senang untuk dikemaskini
Mengurangkan saiz fail
Mengurangkan bandwidth
Menambah fleksibiliti

Terdapat satu lagi kaedah, di mana anda boleh menggabungkan kaedah internal dan external sekaligus. Ini dinamakan sebagai stail Inline.

Stail Inline

Stail Inline didefinisikan di sebelah kanan elemen yang anda ingin tukar dalam fail (X)HTML. Contoh seperti berikut:

Some red text

Stail Inline tidak akan membenarkan pengguna untuk mengubah elemen atau teks untuk diformat dengan cara sedemikian.

Jadi, yang mana lebih bagus?

Ini sebenarnya terpulang kepada penilaian anda sendiri, sekiranya anda Cuma perlu ubah satu faiL, anda boleh gunakan kaedah Internal. Sekiranya anda mempunyai banyak fail, kaedah external adalah lebih baik.

Kita akan mempelajari kaedah CSS dengan lebih lanjut pada tutorial seterusnya.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Memasukkan pautan

Posted on 25 May 2009.

Apabila satu pautan dimasukkan, ia akan menghubungkan satu halaman web ke halaman yang berlainan.

tut14_img1

Pilih perkataan Best of Kuching. Pada tetingkap Property Inspector ,klik ikon folder bersebelahan dengan kotak teks Link.

Cari fail bestofkuching.html dan klik Ok.

tut14_img2

Ulangi langkah-langkah di atas untuk Hotels, Information, Special Events, Location, FAQ, Contact. Semua pautan akan dihubungkan ke halaman bestofkuching.html.

Simpan fail anda.

Melihat pada browser Internet

Pastikan fail index.html telahpun dibuka pada tetingkap Document.

Tekan F12 (Windows) atau Option+F12 (Macintosh)

Anda akan melihat halaman web anda seperti berikut:

tut14_img3

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Memasukkan teks pada bar navigasi

Posted on 25 May 2009.

Pada tutorial kali ini anda akan belajar bagaimana untuk memasukkan teks pada bar navigasi dan membuat format pada teks tersebut. Cara membuat format akan ditunjukkan pada tutorial yang akan datang.

Klik satu kali pada sel di sebelah gambar bandar Kuching. Sila lihat gambar rajah.
tut13_img1

Taip teks seperti berikut: Best of Kuching, Hotels, Information, Special Events, Location, FAQ, Contact.

Setiap teks diselangi dengan menggunakan space bar. Jangan tekan Enter. tut13_img2

Dengan ‘insertion point’ masih lagi berada pada sel yang sama, klik tag td pada tag selector.

tut13_img3

Pada tetingkap Property Inspector (Window>Properties), pilih Top dari pop-up menu Vert. Ini untuk memudahkan anda untuk mengatur teks yang baru anda taip tadi pada sel tersebut.

tut13_img4

Simpan fail anda.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Memasukkan teks

Posted on 16 May 2009.

Pada tutorial kali ini, anda akan belajar bagaimana untuk memasukkan teks pada helaian laman web anda.
Anda boleh menaip terus pada tetingkap Document atau anda boleh ‘copy & paste’ teks daripada sumber lain (Microsoft Word, Notepad, Wordpad, dan sebagainya).

Pada panel Files, cari fail kuching_sampletext.txt, ‘double click’ ikon fail tersebut untuk membukanya dalam Dreamweaver.

tut12_img1
Pada tetingkap kuching_sampletext.txt, tekan Control+A untuk memilih seluruh teks tersebut, dan pilih Edit > Copy untuk menyalin teks tersebut.

Tutup fail kuching_sampletext.txt dengan menekan butang X yang terdapat pada bahagian atas sebelah kanan fail.

Pada tetingkap index.htm, klik satu kali pada baris ketiga. Pilih Edit > Paste, atau tekan Ctrl +V.

tut12_img2
Sila pastikan titik kemasukan (insertion point) masih lagi berada pada sel di mana anda telah ‘paste’ teks tadi.

tut12_img3
Dalam tetingkap Property Inspector, pilih Top daripada menu pop-up.

Simpan fail anda.

Tutorial seterusnya : Membuat teks navigasi.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Memasukkan fail Flash

Posted on 16 May 2009.

Tutorial diteruskan dengan memasukkan fail Flash, yang akan menunjukkan slaid tempat-tempat menarik yang terdapat di Kuching, Sarawak.

Cara yang mudah untuk memasukkan fail Flash (dalam bentuk .swf) adalah dengan mengeksport fail tersebut ke dalam helaian web.

Apabila anda menggunakan Dreamweaver, ia akan menulis kod HTML Flash untuk anda secara automatik.

Sila buka fail index.htm. Kemudian, klik satu kali pada baris kedua yang terdapat pada jadual pertama (second row of first table).

Pada tetingkap Property Inspector (Window > Properties), pilih Center daripada pop-up menu Horz dan pilih Middle daripada pop-up menu Vert, sila lihat imej di bawah. Ini bertujuan untuk meletakkan kandungan pada bahagian tengah.

tut11_img1

Kemudian, klik Insert > Media > Flash.

Pada tetingkap Select File, cari fail flash_fma.swf, pilih fail tersebut dan klik OK.

Tetingkap Object Tag Accessibility Attributes akan muncul, klik OK.

tut11_img2

Anda akan lihat fail Flash tersebut berada pada tempat yang anda tetapkan sebentar tadi.

Untuk melihat animasi fail Flash anda, klik Play pada tetingkap Property Inspector.

tut11_img3

Pada tetingkap Property Inspector, klik Stop untuk memberhentikan fail Flash tersebut daripada dimainkan.

tut11_img4

Simpan fail anda.

Apabila anda menyimpan fail anda, Dreamweaver akan memaparkan tetingkap Copy Dependent Files. Tetingkap ini bertujuan untuk memaklumkan kepada anda bahawa Dreamweaver telah mewujudkan fail yang bernama AC-RunActiveContent.js, dan fail ini semestinya anda upload ke server bersama fail-fail anda yang lain. Fail ini perlu untuk memastikan fail Flash anda akan berfungsi dengan betul walaupun dipaparkan pada berlainan browser.

Possibly Related Posts:

Posted in Adobe, Dreamweaver, TutorialComments (0)

Panel Aset (Assets Panel)

Posted on 20 April 2009.

Panel Aset membenarkan anda untuk mengatur aset yang terdapat pada halaman web yang sedang anda bina.

tut10_img1

Panel Aset mempunyai dua bahagian, iaitu:

Site: menunjukkan semua aset yang terdapat pada halaman web, termasuk warna, URL yang digunakan dalam halaman web tersebut

Favourites: menunjukkan aset-aset tertentu, untuk menambahkan aset ke dalam senarai Favourites, pilih aset dalam senarai Site dan pilih Add to Favourites dari menu Options (penjuru kanan atas panel File).

tut10_img2

Kategori-kategori Aset:

tut10_img3

Image: Format imej dalam GIF, JPG, PNG.

Colors: Warna yang digunakan pada halaman web

URLs: Pautan alamat web yang terdapat pada halaman web, termasuk FTP, HTTP, email(mailto), local file

Flash: Elemen Flash (.swf)

Shockwave: Elemen Adobe Shockwave

Movies: Quicktime atau MPEG

Scripts: Fail Javascript atau VBScript

Templates: Fail template yang anda gunakan, untuk memudahkan menukar elemen template

Library Items: Elemen yang anda gunakan pada helaian web yang berlainan, sekiranya anda telah membuat penukaran terkini pada elemen tersebut, ia akan mengemaskini helaian-helaian lain yang mempunyai pautan kepada elemen tersebut sekaligus.

Refresh panel Aset

Untuk mengemaskini aset-aset pada panel, klik pada butang seperti ditunjukkan di bawah.
tut10_img4