Blog MindaSys » Dreamweaver http://blog.mindasys.com.my Blog Tutorial dan Informasi IT Mon, 25 Oct 2010 03:40:11 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Mengatur kedudukan paparan laman web http://blog.mindasys.com.my/2009/07/mengatur-kedudukan-paparan-laman-web/ http://blog.mindasys.com.my/2009/07/mengatur-kedudukan-paparan-laman-web/#comments Wed, 01 Jul 2009 04:52:55 +0000 Khadizah http://blog.mindasys.com.my/?p=2287 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:


]]> http://blog.mindasys.com.my/2009/07/mengatur-kedudukan-paparan-laman-web/feed/ 2 Menggunakan arahan (rule CSS) http://blog.mindasys.com.my/2009/06/menggunakan-arahan-rule-css/ http://blog.mindasys.com.my/2009/06/menggunakan-arahan-rule-css/#comments Mon, 22 Jun 2009 07:57:44 +0000 Khadizah http://blog.mindasys.com.my/?p=2278 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:


]]> http://blog.mindasys.com.my/2009/06/menggunakan-arahan-rule-css/feed/ 0 Mengaplikasikan style kelas kepada teks http://blog.mindasys.com.my/2009/06/mengaplikasikan-style-kelas-kepada-teks/ http://blog.mindasys.com.my/2009/06/mengaplikasikan-style-kelas-kepada-teks/#comments Mon, 22 Jun 2009 07:41:57 +0000 Khadizah http://blog.mindasys.com.my/?p=2275 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:


]]> http://blog.mindasys.com.my/2009/06/mengaplikasikan-style-kelas-kepada-teks/feed/ 0 Memahami Panel CSS Styles http://blog.mindasys.com.my/2009/06/memahami-panel-css-styles/ http://blog.mindasys.com.my/2009/06/memahami-panel-css-styles/#comments Fri, 12 Jun 2009 17:44:23 +0000 Khadizah http://blog.mindasys.com.my/?p=2224 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:


]]> http://blog.mindasys.com.my/2009/06/memahami-panel-css-styles/feed/ 0 Membuat fail style sheet http://blog.mindasys.com.my/2009/06/membuat-fail-style-sheet/ http://blog.mindasys.com.my/2009/06/membuat-fail-style-sheet/#comments Fri, 12 Jun 2009 17:36:31 +0000 Khadizah http://blog.mindasys.com.my/?p=2219 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:


]]> http://blog.mindasys.com.my/2009/06/membuat-fail-style-sheet/feed/ 0