Mengelola Dokumen Web pada Dreamweaver

Membuka Dokumen Web

Saya berharap agar sebelumnya kalian sudah membaca tentang Petunjuk Cara Menggunakan Dreamweaver Versi Terbaru, karena itu adalah artikel pertama tentang dreamweaver dan ini merupakan artikel lanjutan setelah artikel tersebyut.

Untuk membuka dokumen web pada dream weaver ada tiga cara yang bisa dilakukan, yaitu:

• Menggunakan Starter Page

Untuk membuka dokumen web menggunakan starter page dapat dilakukan saat awal dreamweaver baru dibuka. Cara yang dapat dilakukan adalah:

1. Pilih dan klik Open pada bagian Open Recent Item.
2. Dengan menggunakan cara ini berarti kalian telah mengetahui dan menyimpan dokumen web sebelumnya, jadi tentukan letak directory penyimpanan dokumen yang akan di buka. Misalnya C:xampphtdocsmultibisnisindonama-file Karena pada directory dokumen web umumnya terdiri dari beberapa file.

• Menggunakan Menu Bar

Sebagai contoh dan dukungan baca Cara install PopojiCMS di Localhost.

Caranya seperti berikut: File → Open, dilanjutkan dengan pencarian letak directory dokumen web.

• Menggunakan Files Panel

Files Panel terletak disisi kanan, berikut cara untuk membuka dokumen web menggunakan files panel:
Jika kalian belum pernah menggunakan files panel ini, maka yang pertama harus dilakukan adalah mengaktifkan file panel tersebut dengan tekan F+8. Selanjutnya tentukan directori tempat penyimpanan dokumen yang akan dibuka.

Mengenal Area Kerja Dreamweaver

Pada area kerja dreamweaver terdapat banyak fasilitas yang dapat digunakan untuk melakukan semua hal yang berkaitan dengan aktivitas pembuatan web(pembuatan dokumen baru dan editing file yang telah dibuat sebelumnya).
Berikut adalah fasilitas yang terdapat pada Adobe Dreamweaver CS6: Menu Bar, Document Toolbar, Document Window, Panel Group, Workspace Switcher, Tag Selector, dan Property Inspector.
Untuk dapat memahami tataletak dan posisi fasilitas-fasilitas tersebut silahkan lihat pada gambar dibawah:

Menu Bar:

Pada menu bar terdiri dari beberapa menu, yaitu: Edit, View, Insert, Modify, Format, Command, Site, Window, dan Help.
Pada masing-masing menu juga masih memiliki submenu sesuai kategory dengan fungsi masing-masing.

Document Window:

Document window menampilkan file yang sedang dibuat atau di kerjakan. Pada document window terdapat Title Bar yang menampilkan nama file yang sedang di kerjakan, fasilitas zoom, Document Toolbar, dan Tag Selector.

Document Toolbar:

Document Toolbar merupakan tombol yang dapat digunakan untuk mengatur dan memilih mode pada document window. Tombol yang tersedia pada document toolbar diantaranya: Show Code View, Show Code and Design View, Show Design View, dan Live.
Melalui tombol-tombol yang tersedia kita dapat memilih mode untuk document window, yaitu: Menggunakan mode window code secara keseluruhan, menggunakan mode window preview code dan hasil kerja, dan mode hasil kerja secara keseluruhan(mode grafis atau visual).

Tag Selector:

Tag Selector terdapat pada bagian paling bawah, di bawah document window. Berfungsi untuk menampilkan tag HTML dari objek yang di beri seleksi(dikenai seleksi).

Panel Group:

Panel Group terletak disisi kanan dreamweaver, disebelah document window. Salah satu kemudahan yang terdapat pada panel group diantaranya adalah terdapat panel File yang secara langsung menampilkan directori komputer kita. Sehingga untuk membuka file tertentu kita dapat lebih mudah melalui panel group.

Insert Panel:

Insert Panel berfungsi untuk menyisipkan objek-objek ke dalam hallaman web yang sedang di kerjakan. Pada insert panel terdapat beberapa tab, diantaranya: Common, Layout, Form, Data, Spry, Text, dan Favorites.

• Tab Common: Terdapat tool yang digunakan untuk membuat dan menyisipkan objek ke dalam halamman web atau file yang sedang di kerjakan, diantaranya:
  1. Hyperlink: Untuk membuat hyperlink.
  2. Email Link: Untuk menyisipkan link email.
  3. Named Achor: Untuk memberikan nama anchor.
  4. Table: Untuk membuat tabel.
  5. Insert Div Tag: Untuk menyisipkan tag div.
  6. Images: Untuk menyisipkan gambar.
  7. Media: Untuk menyisipkan media seperti, file flash(SWF), FLV, serta media lainya.
  8. Date: Untuk menyisipkantanggal.
  9. Server-side Include: Untuk menyisipkan dokumen server-side.
  10. Comment: Untuk menyisipkan komentar pada file.
  11. Head: Untuk menambah elemen pada head section dalam dokumen, seperti meta, keyword, description, dan lain-lain.
  12. Script: Untuk menyisipkan javascript.
  13. Templates: Untuk membuat template.
  14. Tag Chooser: Untuk menyisipkan tag seperti: tag HTML, ASP, NET, PHP, JSP, dan lain-lain.
• Tab Layout: Pada tab layout terdapat tool yang memiliki fungsi untuk mendukung dalam membuat halaman web, seperti: tool untuk membuat table, frame, dan sebagainya.
  Berikut adalah uraian tool yang terdapat pada tab layout:
  1. Insert Div Tag: Untuk menyisipkan div tag.
  2. Draw AP Div: Untuk membuat layer.
  3. Spry Menu Bar: Untuk membuat tombol menu pada halaman web.
  4. Spry Tabbed Panels: Untuk membuat tab panel pada halaman web.
  5. Spry Accordion: Untuk membuat panel accordion.
  6. Spry Collapsible Panel: Untuk membuat tab yang didalamnya terdapat isi dokumen dan ditampilkan ke bawah.
  7. Table: Untuk membuat table
  8. Insert Row Above: Untuk menyisipkan baris pada table bagian atas.
  9. Insert Row Bellow: Untuk menyisipkan baris pada table bagian bawah.
  10. Insert Column To the Left: Untuk menyisipkan kolom pada table sebelah kiri.
  11. Insert Column Ti The Right: Untuk menyisipkan kolom pada table sebelah kanan.
  12. Iframe: Untuk menyisipkan iframe pada halaman web.
  13. Frames: Untuk membuat frame.

 

• Tab Form: Peranan form sangat penting dan berguna pada sebuah website, karena dengan form seorang pengguna dapat berinteraksi.
  Berikut adalah tool yang terdapat pada tab form:
  1. Form: Untuk membuat form.
  2. Text Field: Untuk membuat text filed pada form.
  3. Hidden Field: Untuk membuat hidden field pada form.
  4. Textarea: Untuk membuaat textarea pada form.
  5. Checkbox: Untuk membuat checkbox pada form.
  6. Checkbox Group: Untuk membuat checkbox yang jumlahnya lebih dari satu.
  7. Radio Button: Untuk membuat radio button pada form.
  8. Radio Group: Untuk membuat group radio button pada form.
  9. List/Menu: Untuk membuat daftar pada form.
  10. Jump Menu: Untuk membuat jump menu pada form.
  11. Image Field: Untuk input gambar pada form.
  12. Field field: Untuk membuat tombol pencarian file.
  13. Button: Untuk membuat tombol.
  14. Label: Untuk membuat label pada form.
  15. Fieldset: Untuk membuat fieldset.
  16. Spry Validation Text Field: Untuk membuat text field model spry.
  17. Spry Validation Textarea: Untuk membuat textarea model spry.
  18. Spry Validation Checkbox: Untuk membuat checkbox model spry.
  19. Spry Validation Select: Untuk membuat daftar model spry.
  20. Spry Validation Password: Untuk membuat password field.

 

• Tab Data: Tab data pada Adobe Dreamweaver CS6 berfungsi untuk menginput object data model spry juga elemen-elemen dinamis lain. Misal: Recordset, Repeated Regions, Insert Record, Update Record, Delete Record, dan sebagainya.

 

• Tab Spry: Tab Spry berisi beberapa tombol untuk pembuatan halaman spry, termasuk didalamnya data dan spry.
  Spry merupakan library javascript yang dapat digunakan untuk melakukan desain halaman website, diantaranya: Membuat menu bar, textarea, text field, dan sebagainya.

 

• Tab Text: Tab text berfungsi untuk mengatur dan menyusun format teks, paragraf, serta karakter teks lain.
  Berikut ini adalah uraian tool yang terdapat pada tab text:
  
  1. Bold: Untuk menciptakan teks menjadi lebih tebal.
  2. Italic: Untuk membuat teks menjadi miring.
  3. Strong: Sama halyna seperti Bold, juga untuk membuat teks menjadi tebal.
  4. Emphasis: Sama seperti Ityalic, untuk membuat teks menjadi miring.
  5. Paragraf: Untuk membuat dan mengatur paragraf.
  6. Blockqiote: Untuk menandai teks sebagai catatan penting. Teks akan memiliki tataletak dan karakter khusus.
  7. Preformatted Text: Untuk membentuk paragraf seperti halnya pada script.
  8. Heading 1: Untuk membuata tes dalam format heading 1.
  9. Heading 2: Untuk membuata tes dalam format heading 2.
  10. Heading 3: Untuk membuata tes dalam format heading 3.
  11. Unordered List: Untuk membuat daftar yang memiliki format symbol.
  12. Ordered List: Untuk membuat daftar dengan format angka atau abjad.
  13. List Item: Untuk membuat daftar.
  14. Definition List: Untuk mendefinisikan sesuatu.
  15. Definition Term: Untuk input definisi term.
  16. Definition Description: Untuk memberi definisi teks.
  17. Abbreviation: Untuk memberikan keterangan tentang singkatan pada teks yang ditunjuk atau yang dimaksudkan.
  18. Acronym: Untuk membuat akronim.
  19. Characters: Untuk menyisipkan karakter tertentu pada teks, misalnya ganti baris, copyright, serta lain sebagainya.

Baca tentang Belajar Struktur HTML Dasar.

• Tab Favorites: Tab favorites berfungsi untuk menambahkan isi dari berbagai tab ke dalam tab favorites, seperti Table Row, Hyperlink, Comment, Dynamic Teext, serta lain sebagainya.
  Cara untuk menambahkan tab lain ke dalam tab favorites:
  1. Klik kanan pada area kosong tab favorites → Customize Favorites.
  2. Pada Available Objects pilih tab yang akan diambil atau dimasukan, lalu tekan tombol >> Kemudian di lanjutkan dengan menekan tombol OK.

 

• CSS Style Panel: CSS Style Panel adalah fasilitas adobe dreamweaver CS6 yang memiliki fungsi untuk mengatur script CSS agar halaman web menjadi lebih menarik. CSS Style Panel terdiri dari dua mode, yaitu All dan Current mode.
  • Mode All: Memiliki dua panel, yaitu All Rules dan Properties. Panel Rules menampilkan list atau daftar style sheet dari dokumen halaman web yang di seleksi.
    Sedang panel Properties menampilkan isi atau atribut dari style sheet yang di seleksi pada panel All Rules.
  • Mode Current: memiliki tiga panel, yaitu Summary for Selection Panel, About Panel, dan Properties Panel.
    Summary For Selection Panel: Menampilkan isi dari CSS.
    About Panel: Menampilkan informasi lokasi dari script CSS yang diberi seleksi.
    Properties Panel: Menampilkan isi atau atribut dari style sheet yang di seleksi.

Baca tentang Materi CSS Dasar.

• Files Panel: Akan dilanjutkan pada artikel selanjutnya.