Pengenalan Dreamweaver
-
Upload
carla-firsty -
Category
Documents
-
view
389 -
download
0
description
Transcript of Pengenalan Dreamweaver
PENGENALAN DREAMWEAVER
Adobe dreamweaver atau yang lebih dikenal dengan macromedia
dreamweaver adalah sebuah aplikasi yang dikembangkan oleh Adobe System.
Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk
mendesain secara visual dan mengelola situs web maupun halaman web.
Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara
manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam
melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan
menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan
pengalaman kita dalam mendesain web.
Dreamweaver MX dalam hal ini digunakan untuk web desain. Dreamweaver
MX mengikut sertakan banyak tool untuk kode-kode dalam halaman web beserta
fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript,
Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang
mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara
langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML
mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut
dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan
memformat ulang HTML bila kita menginginkannya.
Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang
memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga
dapat melakukan evaluasi situs dengan melakukan pengecekan broken link,
kompatibilitas browser, maupun perkiraan waktu download halaman web.
MEMULAI DENGAN ADOBE DREAMWEAVER
Untuk menjalankan program Adobe dreamweaver dapat kita buka dari
menu start|Program|Adobe Dreamweaver CS5, akan muncul tampilan Starter Page
berikut:
Bagian dari Starter Page diantaranya sebagai berikut:
o Bagian kiri, yaitu Open a Recent Item merupakan alternatif untuk membuka
file, atau recent file. Untuk membuka file, pilih Open pada Starter Page.
o Bagian tengah yaitu Create New digunakan untuk membuat halaman web
baru. Terdapat beberapa macam tipe file untuk format halaman web yang
dapat dibuat seperti:
HTML merupakan dasar untuk pembuatan desain web. File HTML
berisi suatu instruksi tertentu yang dapat memberikan sebuah format
pada dokumen yang akan ditampilkan pada World Wide Web.
Coldfusion merupakan bahasa script yang digunakan oleh Adobe
Coldfusion, Bluedragon, dan sebagainya yang digunakan untuk
scripting server-side.
PHP (HyperText Preprocessor) adlah sebuah bahasa pemgrograman
yang umum dipakai untuk scripting server-side. PHP biasanya
terpasang pada HTML. Dengan bahasa pemrograman ini dapat
dibuat suatu website yang dinamis.
ASP VBScript (ASP Visual Basic Script). VBScript merupakan
bahasa scripting turunan dari bahasa pemrograman Visual Basic.
Pada Starter Page di atas pada CreateNew pilihlah HTML, maka tampilan dari
Adobe Dreamweaver adalah sebagai berikut:
Menu Bar
Menu bar pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify,
Format, Commands, Site, Window, dan Help. Setiap menu mempunyai beberapa
submenu sesuai dengan kategorinya, selain itu juga mempunyai fungsi yang
berbeda-beda.
Document Window
Document windows menampilkan dokument dari halaman web yang aktif,
atau dokumen yang sedang diedit. Pada Document Window terdapat Title Bar
yang menampilkan judul halaman, fasilitas Zoom, Document Toolbar, dan Tag
Selector.
Document Toolbar
Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur
layar kerja dokumen pada dengan cepat, diantaranya show Code view, Show Code
and Design views, dan Show Design view.
1. Show Code View
Mode pada layar Code hanya akan menampilkan kode-kode script dari
halaman web. Di sebelah kiri layar kerja terdapat Coding tool yang
digunakan untuk mengatur kode atau script tersebut. Untuk
mengaktifkan tampilan layar Code, Kita dapat menggunakan salah satu
cara berikut:
Pada MenuBar klik View>Code
Pada DocumentToolbar klik icon Code
Tampilan layar code terlihat seperti gambar berikut:
2. Show Design View
Tampilan layar mode Design akan menampilkan dokumen halaman web
secara grafis atau visual. Untuk menampilkan Design View, Kita dapat
melakukan salah satu cara berikut:
Pada MenuBar klik View>Design
Pada Document Toolbar klik icon Design
Tampilan layar code terlihat seperti gambar berikut:
3. Show Code and Design view
Mode tampilan layar ini dikenal dengan mode Split, yaitu menampilkan atau
menggabungkan secara bersamaan tampilan layar code dan tampilan layar
design. Untuk menampilkan dokumen halaman web dalam mode Split, dapat
menggunakan salah satu cara berikut:
Pada MenuBar klik View>Design
Pada DocumentToolbar klik icon Design
Tampilan layar code terlihat seperti gambar berikut:
4. Tag Selector
Tag selector berfungsi untuk menampilkan tag HTML dari objek yang
terseleksi. Kita dapat meng-klik <body> untuk memilih keseluruhan elemen
dokumen. Tag Selector ini terdapat pada Document Window, dan terletak di
bawah sebelah kiri.
5. Panel Groups
Panel groups merupakan salah satu fasilitas yang terdapat pada Adobe
Dreamweaver yang berfungsi untuk membantu dalam mengedit suatu halaman
web. Panel Groups terletak di sebelah kanan layar kerja dan terdiri dari
beberapa panel. Untuk menampilkan panel, klik ganda pada nama panel
tersebut.
6. Insert Panel
Insert Panel berfungsi untuk menyisipkan objek-objek ke dalam halaman
web. Pada Insert Panel terdapat beberapa Tab diantaranya:
Common
Layout
Forms
Data
Spry
InContext Editing
Text
Favorites
6.1 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:
6.2 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:
6.3 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:
6.4 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.
6.5 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.
6.6 In Context 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.
6.7 Text
Tab Text berfungsi untuk mengatur format teks, paragraf, maupun
karakter teks lainnya. Berikut keterangan fungsi dari tool-tool yang ada pada
tab Text:
6.8 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:
Klik kanan pada area kosong dalam Tab Favorites, lalu pilih
Customize Favorites.
Pada Available objects, pilih tab yang akan dimasukkan, tekan
tombol ,lanjutkan dengan menekan tombol OK.
7. 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.
8. 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.
9. 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.
10. Properties 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. Dalam Property 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.
10.1Page 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.
Keterangan gambar di atas:
o Format berfungsi untuk mengatur teks dalam bentuk paragraf ataupun
heading.
o Class berfungsi untuk menyisipkan class dari CSS Style pada halaman
web.
o Link berfungsi untuk memberikan hyperlink.
o Targeted Rule menampilkan properti CSS yang ada dalam objek pada
halaman web yang terpilih.
o Tombol Edit Rule digunakan untuk mengedit perintah atau script dari CSS
pada objek yang terpilih.
o Tombol panel CSS untuk mengaktifkan dan membuka CSS Style Panel.
o Font menampilkan jenis font yang digunakan pada teks yang diseleksi dan
digunakan untuk memformat jenis font.
o Size digunakan untuk mengatur ukuran font pada teks.
o Tombol B, I digunakan untuk mengatur format teks menjadi huruf tebal
atau bold(B), dan cetak huruf miring atau italic(I).
o Tombol Align Left berfungsi untuk mengatur halaman menjadi rata kiri/
left.
o Tombol Align Center berfungsi untuk mengatur halaman menjadi rata
tengah/ center.
o Tombol Align Right berfungsi untuk mengatur halaman menjadi rata
kanan/ right.
o Tombol Justify berfungsi untuk mengatur halaman menjadi rata kanan
koro/ justify.
o Color ditandai dengan ikon digunakan untuk mengatur warna yang akan
dipakai pada halaman web.
o Tombol Page Properties digunakan untuk mengatur properti halaman web.
10.2Image Property Inspector
Jika Kita memilih objek gambar pada jendela kerja, maka tampilan dari
Property Inspector akan berbeda dari sebelumnya. Berikut tampilannya.
o Image menampilkan besar file gambar dan ukuran dari gambar tersebut.
o Src berfungsi untuk menampilkan lokasi file gambar. Untuk mengganti
gambar, tekan tombol , lalu pilih gambar yang diinginkan.
o Link berfungsi untuk memberikan link pada gambar.
o Alt berfungsi untuk memberikan keterangan berupa teks pada gambar.
o Edit berfungsi untuk mengedit gambar dengan memanggil program
eksternal, ataupun secara langsung.
o Class berfungsi untuk menyisipkan class dari CSS Style pada gambar.
o Map berfungsi untuk memberikan pemetaan status atau hotspot pada
area gambar.
o V Space berfungsi untuk memberikan jarak pada gambar dengan objek
lain secara vertikal.
o H Space berfungsi untuk memberikan jarak pada gambar dengan objek
lain secara horizontal.
o Target berfungsi untuk memberikan target link, biasanya digunakan
pada frame.
o Original berfungsi untuk memasukkan gambar berformat *.psd dan
*.png.
o Border berfungsi untuk memberikan border pada gambar.
o Align berfungsi untuk mengatur posisi gambar.
10.3 Table Property Inspector
Jika Kita menyeleksi tabel pada jendela kerja, maka tampilan dari Property
Inspector menjadi seperti berikut:
o Rows menampilkan jumlah baris yang ada pada tabel.
o Cols menampilkan jumlah kolom yang ada pada tabel.
o W (Width) berfungsi untuk mengatur ukuran tabel.
o Cellpad berfungsi untuk mengatur jarak antara cell dengan isi tabel.
o CellSpace berfungsi untuk mengatur jarak antar cell.
o Align berfungsi untuk mengatur posisi tabel.
o Border berfungsi untuk memberikan ketebalan garis table
o Class berfungsi untuk menyisipkan class dari CSS Style.
11. Workspace Switcher
Workspace Switcher pada Adobe Dreeamweaver berfungsi untuk mengubah
atau mengatur jendela kerja sesuai keinginan, sehingga memudahkan Kita
dalam membuat halaman web. Tampilan yang terdapat di dalamnya antara lain
adalah mode Designer, Classic, Coder dan lain-lain.
Untuk mengubah tampilan yang ada tekan tombol , kemudian akan tampil
daftar pilihan mode tampilan berikut:
Berikut contoh hasil tampilan jendela kerja yang telah diubah melalui
Workspace Switcher menjadi Classic.
MEMBUAT WEBSITE MENGGUNAKAN DREAMWEAVER
Berikut langkah-langkah untuk membuat sebuah tampilan sebuah website
sederhana.
1. Pada layar klik File > New.
2. Lalu klik , maka akan muncul seperti pada gambar.
3. Pada kolom site name ketik judul website yang diinginkan lalu klik OK.
4. Untuk membuat table pada lembar kerja klik Insert>Tabel. Akan muncul
kotak dialog.
5. Isi Rows, Columns dan Table width sesuai keinginan. Lalu pada lembar
kerja akan muncul seperti pada gambar.
6. Untuk menggabungkan beberapa table, blok sel-sel yang ingin
digabungkan lalu klik kanan > Table > Merge atau Ctrl+Alt+M.
7. Kemudian isi sel-sel dengan teks sehingga hasilnya sebagai berikut.
8. Untuk mengubah font dan ukuran gunakan properties window yang
terletak dibawah lembar kerja.
9. Untuk menambahkan gambar klik Insert > Image lalu pilih gambar yang
akan dimasukkan dan klik OK.
10. Untuk menambahkan file berekstensi mp3 klik Insert > Media > Plugin.
11. Untuk menambahkan file berekstensi flv klik Insert > Media > FLV.
12. Untuk menambahkan file berekstensi swf klik Inser > Media > SWF
Contoh website yang telah dibuat adalah sebagai berikut: