Tutorial Dreamweaver CS5 2st

Mengenal Dreamweaver 2st

Saya akan melanjutkan Tutorial Dreamweaver CS5 1st yang kemarin, tentang pengenalan Adobe Dreamweaver CS5. Di sini di Tutorial Dreamweaver 2st ini saya akan perkenalkan tentang menu-menu di Adobe Dreamwever CS5 seperti menu Tab, Property dan lain lain. Oke kita langsung saja untuk perkenalan nya.

Tab Common

Pada tab ini terdapat tool yang digunakan untuk membuat dan menyisipkan objek ke dalam halaman web, seperti membuat hyperlink, tabel, gambar, media, dan lain sebagainya. Berikut keterangan fungsi dari tool-tool yang terdapat pada tab Common:

Tab Forms

Tab ini membuat tampilan website menjadi lebih interaktif karena pengguna dapat memberikan input pada sistem atau website dengan menggunakan tool yang ada dalam tab Forms. Berikut Keterangan fungsi dari tool-tool yang ada pada tab Forms:

Tab Layout

Tab ini berisikan tool-tool yang berfungsi untuk membuat layout halaman web, seperti membuat tabel, frame dan lain sebagainya. Berikut keterangan fungsi dari tool-tool pada tab layout:

Tab Forms

Tab ini membuat tampilan website menjadi lebih interaktif karena pengguna dapat memberikan input pada sistem atau website dengan menggunakan tool yang ada dalam tab Forms. Berikut Keterangan fungsi dari tool-tool yang ada pada tab Forms:

Tab Data

Tab data pada dreamweaver berfungsi untuk memasukkan object dat model spry dan elemen-elemen dinamis lainnya seperti Recordset, Repeated Regions, Insert Record, Update Record, Delete Record, dan lain sebagainya.

Tab Spry

Tab Spry berisikan tombol-tombol untuk membuat halaman-halaman Spry, termasuk object data spry. Spry merupakan library JavaScript yang dapat digunakan untuk mendesain halaman web, seperti membuat menu bar, textarea, text field, dan lain sebagainya dengan hasil yang lebih menarik:

Tab InContext Editing

Pada tab InContext Editing terdapat tombol-tombol yang berfungsi untuk membuat Repeating Region, Editable Region, dan Manage Available CSS Clases. Repeating dan Editable Region digunakan untuk membuat template halaman web:

Tab Text

Tab Text berfungsi untuk mengatur format teks, paragraf, maupun karakter teks lainnya. Berikut keterangan fungsi dari tool-tool yang ada pada tab Text:

Tab Favorites

Tab ini berfungsi untuk menambahkan isi dari tab-tab ke dalam tab Favorites seperti Table Row, Hyperlink, Comment, Dynamic Text, dan lain sebagainya. Untuk menambahkan isi tab ke dalam tab Favorites dapat menggunakan cara berikut:

1. Klik kanan pada area kosong dalam Tab Favorites, lalu pilih Customize Favorites
2. Pada Available object, pilih tab yang akan dimasukkan, tekan tombol, lanjutkan dengan tombol OK.

CSS Style Panel

CSS Styles panel merupakan fasilitas pada dreamweaver yang berfungsi untuk mengatur script CSS agar halaman web menjadi lebih menarik. CSS Styles dan terdiri dari dua mode, yaitu mode All dan mode Current.

• Mode All terdiri dari dua panel, yaitu All Rules dan Properties. Panel All Rules menampilkan list atau daftar stylesheet dari dokumen halaman web yang diseleksi, sedangkan panel Properties akan menampilkan isi atau atribut dari stylesheet yang diseleksi pada panel All Rules.
• Mode Current terdiri dari tiga panel yaitu panel Summary for Selection, panel About, dan panel Properties. Panel Summary for Selection menampilkan isi dari CSS, panel About menampilkan informasi lokasi dari script CSS yang diseleksi, sedangkan panel Properties menmpilkan isi atau atribut dari stylesheet yang diseleksi.

Files Panel

Files panel pada dreamweaver merupakan fasilitas yang berfungsi untuk mengelola file-file dari dokumen web. Kita dapat dengan mudah mengelola file-file tersebut di folder, jaringan komputer, maupun secara remote.

Assets Panel

Assets panel berfungsi untuk mengelola asset-asset dari sebuah website seperti file image, file movie, dan lain sebagainya.Assets Panel membagi asset-asset menjadi beberapa kategori, diantaranya Images, Colors, URLs, SWF, Shockwave, Movies, Scripts, Templates, dan Library.Berikut contoh tampilan Assets dari kategori Images.

Property Inspector

Pada Adobe Dreamweaver terdapat fasilitas Property Inspector yang berfungsi untuk mengatur atau mengedit properti objek-objek yang ada pada halaman web. Property Inspector menampilkan semua properti objek ( misalnya objek teks, objek gambar, objek tabel) yang terseleksi pada jendela kerja. DalamProperty Inspector , Kita dapat dengan mudah mengatur atau mengedit properti objek, yaitu dengan memasukkan nilai-nilai parameter yang disediakan. Secara umum, Property Inspector terdiri dari Page Property, Image Property, Table Property, dan Form Property.

Page Property Inspector

Setiap membuka aplikasi Dreamweaver, Property Inspector yang pertama tampil adalah properti halaman untuk mengelola teks, paragraf, maupun style (CSS). Page Property Inspector tersebut terbagi menjadi dua pilihan, yaitu HTML dan CSS.Untuk memilih salah satu Property Inspector tersebut, Kita dapat menekan tombol yang ada di sebelah kiri dari Property Inspector.

Gambar HTML Property Inspector

Gambar CSS Propety Inspector

Keterangan gambar di atas:

• Format berfungsi untuk mengatur teks dalam bentuk paragraf ataupun heading.
• Class berfungsi untuk menyisipkan class dari CSS Style pada halaman web.
• Link berfungsi untuk memberikan hyperlink.
• Targeted Rule menampilkan properti CSS yang ada dalam objek pada halaman web yang terpilih.
• Tombol Edit Rule digunakan untuk mengedit perintah atau script dari CSS pada objek yang terpilih.
• Tombol panel CSS untuk mengaktifkan dan membuka CSS Style Panel.
• Font menampilkan jenis font yang digunakan pada teks yang diseleksi dan digunakan untuk memformat jenis font.
• Size digunakan untuk mengatur ukuran font pada teks.
• Tombol B, I digunakan untuk mengatur format teks menjadi huruf tebal atau bold(B), dan cetak huruf miring atau italic(I).
• Tombol Align Left berfungsi untuk mengatur halaman menjadi rata kiri/ left.
• Tombol Align Center berfungsi untuk mengatur halaman menjadi rata tengah/ center.
• Tombol Align Right berfungsi untuk mengatur halaman menjadi rata kanan/ right.
• Tombol Justify berfungsi untuk mengatur halaman menjadi rata kanan koro/ justify.
• Color ditandai dengan ikon digunakan untuk mengatur warna yang akan dipakai.

Image Property Inspector

Jika Kita memilih objek gambar pada jendela kerja, maka tampilan dari Property Inspector akan berbeda dari sebelumnya. Berikut tampilannya.

• Image menampilkan besar file gambar dan ukuran dari gambar tersebut.
• Src berfungsi untuk menampilkan lokasi file gambar. Untuk mengganti gambar, tekan tombol , lalu pilih gambar yang diinginkan.
• Link berfungsi untuk memberikan link pada gambar.
• Alt berfungsi untuk memberikan keterangan berupa teks pada gambar
• Edit berfungsi untuk mengedit gambar dengan memanggil program eksternal, ataupun secara langsung.
• Class berfungsi untuk menyisipkan class dari CSS Style pada gambar.
• Map berfungsi untuk memberikan pemetaan status atau hotspot pada area gambar.
• V Space berfungsi untuk memberikan jarak pada gambar dengan objek lain secara vertikal.
• H Space berfungsi untuk memberikan jarak pada gambar dengan objek lain secara horizontal.
• Target berfungsi untuk memberikan target link, biasanya digunakan pada frame.
• Original berfungsi untuk memasukkan gambar berformat *.psd dan *.png.
• Border berfungsi untuk memberikan border pada gambar.
• Align berfungsi untuk mengatur posisi gambar.

Table Property Inspector

Jika Kita menyeleksi tabel pada jendela kerja, maka tampilan dari Property Inspector menjadi seperti berikut:

• Rows menampilkan jumlah baris yang ada pada tabel.
• Cols menampilkan jumlah kolom yang ada pada tabel.
• W (Width) berfungsi untuk mengatur ukuran tabel.
• Cellpad berfungsi untuk mengatur jarak antara cell dengan isi tabel.
• CellSpace berfungsi untuk mengatur jarak antar cell.
• Align berfungsi untuk mengatur posisi tabel.
• Border berfungsi untuk memberikan ketebalan garis tabel.
• Class berfungsi untuk menyisipkan class dari CSS Style.

Itu adalah Tutorial Dreamweaver CSS5 2st

Baca artikel lain nya tentang HTML5 dan CSS3 disini

Tutorial Dreamweaver CS5 2st 2015-01-07T03:27:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown