Home » » Dasar Dreamwever

Dasar Dreamwever

Dalam modul ini, kita akan berlatih membuat sebuah halaman web dengan Dreamweaver. Untuk membuat halaman web, dibutuhkan pengetahuan dasar tentang HTML dan CSS. Tapi keduanya tidak akan dibahas di modul ini. Tentang HTML bisa dilihat di Modul HTML Dasar dan Modul CSS Dasar.

Sisem yang kita gunakan untuk latihan dalam modul ini adalah server web lokal yang diinstall dengan XAMPP. Aplikasi XAMPP-nya dianggap sudah terinstall. Tutorial menginstall XAMPP, dapat dilihat di Membuat Web Server Lokal dengan XAMPP.

Materi yang akan dibahas adalah:

Mengapa Dreamweaver 

Layar Kerja Dreamweaver

Mengkonfigurasi Site (Project)

Memasukan dan Memformat Teks

Memasukan Gambar

Membuat Table

Membuat Link

Membuat CSS dengan stylesheet Internal dan Eksternal

Dalam  web ini, kita akan membuat halaman web yang menampilkan deskripsi produk sebuah laptop. Materi ini tidak bermaksud untuk promosi, tetapi hanya sebagai contoh. Kalaupun ada teks dan gambar yang dicopy/diambil dari suatu sumbernya, hak ciptanya ada dipemilik sumber tersebut.

Mengapa Dreamweaver

Untuk membuat sebuah situs web dari nol, dibutuhkan pengetahuan dasar membuat dokumen HTML, lengkap dengan CSS dan Javascript. Bagi seorang pemula, hal itu tidak mudah, karena harus mengingat, atau setidaknya melihat referensi, dan mengetik tag-tag HTML ini secara manual di text editor. Cara seperti ini juga rawan terjadi kesalahan.

Untuk memudahkan proses ini, diperlukan sebuah IDE (Integrated Development Environment, Lingkungan Pengembangan Terintegrasi) untuk HTML. IDE tersebut harus dapat membantu memasukan tag-tag ini secara mudah, bisa mengecek kesalahan, dan menampilkan hasilnya secara real-time. Fitur ini sering disebut WYSWYG (What You See is What You Get). Kalau kita browsing di Google, terdapat banyak sekali “IDE untuk HTML”. Dreamweaver adalah salah satunya. Menurut penilaian saya pribadi, Dreamweaver adalah salah satu IDE WYSWYG terbaik yang ada saat ini.

Versi terakhir Dreamweaver pada saat kursus web ini dibuat adalah Dreameaver CC 2015. Versi ini sangat lengkap dengan segudang fitur yang akan terasa manfaatnya bagi profesional yang bekerja di web desain. Bagi pemula, fitur yang dibutuhkan hanya sedikit. Bahkan banyaknya fitur hanya membuat bingung, dan membutuhkan resource komputer yang tinggi.

Dalam kursus web ini, akan dibahas bagaimana menggunakan Dreamweaver 8 (versi lama) untuk membuat dokumen HTML secara lengkap. Dreamweaver versi 8 dapat dicari dengan mudah di Internet.

Layar Kerja Dreamweaver

The Welcome Screen

Layar Welcome Screen Dreamweaver dipakai untuk pekerjaan

membuka dokumen yang telah adamembuat dokumen barumembuat dokumen berbasis template

Anda dapat mematikan Welcome Screen dengan memilih check-box “Don’t show again” di sudut kiri bawah.

 

The Workspace

The Workspace Layout

Workspace Layout digunakan untuk membedakan jenis role pemakai.

Untuk Dreamweaver 8 tersedia 2 jenis role, yaitu Coder  dan Designer. Coder adalah jenis user yang lebih banyak membuat kode program, biasanya untuk situs dinamis dan aplikasi web. Designer adalah user yang lebih banyak bekerja dengan desain (grafis) dan layout, termasuk CSS.

Setelan Layout Workspace  ada di lokasi menu Windows > Workspace Layout

Workspace Coder cocok untuk developer yang banyak bekerja dengan kode (server-side script) dan Javascript.

Workspace Designer cocok untuk develper yang banyak bekerja disisi desain, seperti layout web, CSS, gambar, dan seterusnya.

 

Layout ruang kerja Dreamweaver adalah sebagai berikut:

Text berisi macam-macam teks dan format tag seperti b, em, p, h1, dan ul.

The Document window

The Document Window adalah jendela yang menunjukan dokumen yang sedang di edit. Anda dapat memilih beberapa jenis tampilan, yaitu:

  • Design view untuk pekerjaan desain halaman web secara visual. Tampilan mirip dengan halaman yang muncul di browser dan bisa langsung di-edit (WYSWYG).
  • Code view adalah halaman unuk pembuatan code, menulis langsung HTML, kode Javascript, atau Server-side skrip seperti PHP.
  • Code and Design view akan menampilkan sekaligus 2 jenis view dalam satu halaman, digunakan untuk mengedit code dan visual (desain) secara bersamaan.

The Insert Bar

Insert bar mengandung tombol untuk membuat dan menyisipkan obyek HTML, seperti paragraph, link, table, form, media, dan potongan kode untuk web dinamis (skrip server).

kursus web insert bar

Tombol tombol ini dikelompokan dalam beberapa kategori seperti Common, Layout, Forms, Text, HTML, Application, dan seterusnya. Jika kita arahkan pointer mouse ke tombol ini, keterangan fungsi akan muncul di bawahnya.

Common berisi obyek yang paling sering dipakai seperti hyperlink, gambar, dan table.

Layout berisi obyek yang berkaitan dengan layout seperti tables, div tags, dan frames.

Forms berisi tombol untuk membuat form dan menambahkan elemen form.

HTML berisi macam-macam tag html seperti horizontal rules, head content, tables, frames, and scripts.

Application berisi elemen dinamis seperti recordsets, repeated regions, and record insertion and update forms. Elemen dan kode yang tampil akan disesuaikan dengan pilihan bahasa skrip yang digunakan. (Misalnya PHP)

Flash elements untuk menyisipkan Macromedia Flash elements.

 

`The Document Toolbar

 

The Document toolbar memiliki tombol-tombol untuk mengatur perpindahan view dan perintah-perintah yang umum.

kursus web document toolbar
Code, Split, Design, pilihan yang ditampilkan di windows dokumen, apakah Code, Design, atau Split (keduanya).

  • Title, Judul halaman web yang sedang dikerjakan, akan muncul di browser bar.
  • Validate Markup, untuk memvalidasi markup di dokumen yang sedang dibuka
  • File Management, untuk mengupload halaman ke situs/remote
  • Priview di Browser, untuk membuka dokumen yang sedang dikerjakan ke browser
  • Opsi Tampilan, untuk mengatur setting tampilan

kursus web setting tampilan

The Status Bar

Menyediakan informasi tambahan tentang halaman yang sedang dibuka/dikerjakan
kursus web status bar

  • Tag selector adalah salah satu tool yang paling sering dipakai dan sangat berguna untuk melakukan select tag HTML di Windows Documen.

The Property inspector

The Property inspector menyediakan tool untuk memeriksa dan mengedit properti dari elemen HTML, seperti teks atau obyek lain. Isi properti akan menyesuaikan dengan elemen yang sedang dipilih, misalnya untuk elemen image maka properti yang akan muncul adalah file path to the imagewidth dan height of the image, borderaltalign, dan lain-lain.

kursus we property inspector

Setup Site dan File Proyek

Dalam Dreamwaeaver, terdapat fitur untuk mengelola proyek, disebut Site. Fitur ini bisa Anda pakai atau bisa tidak. Fitur Site akan memudahkan dalam mengelola file, aset dan proses upload ke remote server.

kursus web setup site

Membuat Halaman Web dengan Dreamweaver

Mengkonfigurasi Site (Project)

Berikut adalah langkah-langkah menyiapkan Site nya.

  1. Pilih menu Site ->New Site
  2. Isi nama situs, misal: Jual Beli Laptop
  3. Isi HTTP Address: http://localhost/laptopkursus web site definitionkursus web site definition 2
  4. Klik Next
  5. Pada pertanyaan server technology, pilih “Yes, I want to use a server technology”. Dalam kursus ini, kita menggunakan server web lokal dari XAMPP.                            kursus web server lokal
  6. Klik Next
  7. Pada pertanyaaan “.. work with your file: “, pilih: Edit and test locally. Kita akan menyimpan file-file web di folder XAMPP dan langsung di tes di komputer ini.
  8. Pada “Where on your computer do you want to store your files?”, isi dengan : C:\xampp\htdocs\laptop\. Jika folder ini belum ada, buatlah terlebih dahulu dilokasi tersebut.kursus web work with your file
  9. Klik Next
  10. Untuk root site, isi dengan: http://localhost/laptop/kursus web root site
  11. Klik tombol Test URL, jika sukses muncul pesan The URL Prefix test was successfull.kursus web test URL
  12. Klik OK, kemudian klik Next
  13. Pada pilihan “..do you copy it to another machine? …”, pilih: Pilihan No untuk sementara, dapat diubah kemudian.kursus web site definition copy
  14. Klik Next.
  15. Anda akan dibawa pada halaman Summary.kursus web halaman summary
  16. Setelah klik Done, nama situs dan lokasi folder akan muncul di panel Files.         kursus web panel file

Setel Workspace Layout

  1. Pilih menu Window > Workspace Layout > Coder  kursus web workspace layout coder
  2. Pilihan ini akan memindahkan seluruh Panel ke-kiri. Silahkan coba Workspace Layout lain yang lebih cocok bagi Anda.

Membuat Halaman Baru dan Menambahkan Teks

1. Pilih menu File, kemudian klik New

2. Pilih Category: Basic Page

3. Pilih Basic Page:HTML

4. Klik tombol Createkursus web halaman baru

5. Klik Split supaya layar Code dan Visual tampil keduanya.   kursus web split

6. Ambil teks yang akan menjadi halaman web dengan copy.kursus web copy teks

7. Simpan kursor pada Windows Visual, kemudian klik menu Edit > Paste
8. Klik menu File > Save atau tombo Ctrl+S
9. Simpan dengan nama: asus-n550jv.html
10. Nama file akan muncul di bagian panel Files dan tab di atas Window Document

kursus web panel file nama file

11. Berikutnya, perhatikan Windows Code. Kita bisa lihat bahwa secara otomatis Dreamweaver akan menambahkan tag HTML ke dalam teks. Hal tersebut sangat membantu, terutama bagi pemula yang belum terlalu familiar dengan kode-kode HTML.

kursus web window kode
Memasang Tag Heading HTML

Pada dokument HTML, tag Heading, H1, H2, H3, dan seterusnya, dipakai untuk membuat head dari dokumen atau paragraf.

  1. Klik pada Window Code untuk menyimpan kursor pada teks, misalnya di tulisan ASUS N550JV.
  2. Klik Panel Properties
  3. Klik tag inspektor <p>     kursus web tag heading
  4. Pada panel Properties, klik pada Format, pilih Heading 1 kursus web heading 1

  1. Lakukan penggantian tag, untuk beberapa kata berikut:
    1. Incredible (semua), menjadi Heading 4
    2. Beauty, Sound, Response, Touch, menjadi Heading 2
    3. “Notebook hiburan …” , menjadi Heading 3
    4. “Desain aluminium … “ , menjadi Heading 3
    5. “SonicMaster Premium … “ menjadi Heading 3
    6. “Teknologi dengan sentuhan … “ menjadi Heading 3
  2. Untuk menampilkan hasilnya, klik pada Document Toolbar, pilih tombol Preview in Browserkursus web document toolbar preview


Membuat Daftar (List) HTML

  1. Blok teks mulai kalimat “Window 8 atau .. s/d …untuk kesan mewah”
  2. Klik tombol Unordered List pada panel Propertieskursus web unordered list
  3. Perhatikan kode HTML yang baru dibuatkursus web kode html

Untuk melihat hasil kerja kita sampai saat ini, buka alamat: http://localhost/laptop/asus.html atau dari document toolbarkursus web melihat hasil

Menambahkan Gambar Pada Halaman Web – Tag <img>

Berikutnya kita akan menambahkan gambar pada halaman web tersebut.

  1. Buatlah sebuah folder baru di dalam folder kerja. Caranya klik kanan di dalam panel Files, kemudian pilih New Folderkursus web membuat folder baru
  2. Beri nama images. (Nama folder bebas, tapi umumnya menggunakan nama: assets atau images).
  3. Tambahkan satu baris kosong dibawah judul dengan cara: posisikan kursor di ujung kanan judul, kemudian klik tombol [Enter]kursus web menyisipkan gambar
  4. Simpan cursor di baris yang baru, klik tombol Insert Image dari Insert Panelkursus web insert imagekursus web pilih gambar
  5. Pilih gambar yang akan di masukan.
  6. Jika ada Dialog Box untuk mengcopy gambar ke Root Folder pilih Yeskursus web copy as
  7. Masukan di folder Images
  8. Setelah dimasukan, akan ada dialog untuk memasukan Alternate Text dan Long descriction, boleh diisi atau kosongkan saja
  9. Setelah gambar berhasil dimasukan, resize gambar menjadi ukuran sekitar 300px. Caranya pegang ujung gambar dengan mouse, sambil menekan tombol keyboard [Shift], drag mouse untuk mengatur ukuran gambar agar sesuai.kursus web resize image
  10. Ukuran gambar dapat dilihat di panel Properties               kursus web panel properties
  11. Berikutnya kita akan meletakan gambar di sebelah kanan teks.
  12. Klik gambar, pada panel Properties pilih drop-down Align menjadi Rightkursus web meletakan gambar di kanan
  13. Tambahkan sisa gambar yang lain pada semua bagian halaman web ini.
  14. Tampilan akhir kira-kira akan seperti berikut:kursus web tampilan akhir
  15. Perhatikan bahwa kode untuk gambar dalam html adalah:kursus web kode gambar

 

Menambahkan Tabel – tag <table><tr><td>

Tabel dalam halaman html, selain untuk menampilkan data dalam beluk tabulasi, juga dipakai untuk layout. Baik untuk teks maupun gambar. Pada kursus web ini, kita akan menggunakan tabel untuk menambahkan 3 gambar kecil dibawah teks paragraf pertama.

  1. Simpan cursor diatas tulisan Incredible Beauty
  2. Klik tombol Table pada Panel Insertkursus web table panel insert
  3. Masukan Rows=1, Column=3, dan Header: None
  4. Setelah membuat table, masukan gambar di semua kolom. Caranya: klik kolom pertama pada table, kemudian klik tombol Insert Image. Ikut prosedur yang sama seperti sebelumnya.kursus web insert img
  5. Tampilan setelah penambahan gambar di tablekursus web tampilan
  6. Perhatikan bahwa kode untuk table adalah:kursus web kode table

 

Menambahkan Link

Link akan ditambahkan dibawah daftar fitur N550 JV.

  1. Posisikan kursor di bawah daftar, kemudian klik Enter untuk membuat baris baru
  2. Tambahkan teks “Download Product Guide”, kemudian blok.
  3. Pada Panel Properties, isi link dengan: http://www.asus.com/id/Static_WebPage/download/kursus web panel properties isi link

Memakai Cascading Style Sheet (CSS) untuk Style Web

Pada modul kursus web ini, kita masih akan melanjutkan menggunakan file latihan yang sama, yaitu halaman asus.php.

Yang akan dibahas disini adalah:

  • Memasang CSS melalui Page Properties
  • Membuat 2 jenis identifier: tag dan class
  • Memasang syle pada object
  • Membuat style sheet menggunakan eksternal file

Menyetel Page Properties

Anda dapat menyetel style global (mempengaruhi situs secara keseluruhan) pada Page Properties global, seperti default font, font size untuk seluruh teks, dan style lainnya disini. Untuk membukanya klik Page Properties pada panel Propertieskursus web page properties

Page Properties dialog box memiliki 5 kategori terdaftar di kolom sebelah kiri: Appearance, Links, Headings, Title/Encoding, and Tracing Image. Pada panel Properties, klik Page Properties.kursus web hal page properties

Untuk menggunakan Page Properties, klik salah-satu kategori, kemudian lakukan perubahan yang diinginkan, setelah itu klik Apply untuk melihat perubahan yang terjadi, atau klik OK untuk menyimpan hasil perubahan.

Ubah page propertiesnya dengan data berikut;

  • Appeareance
    • Page Font: Verdana, Arial, Helvetica, sans-serif
    • Size:14
  • Links
    • Link Font: (Same as page font)
    • Link Color: #0033CC
  • Headings
    • Page Font: Georgia, Times New Roman, Times, serif
  • Title: Asus N550JV – Laptop Hiburan dengan 4 Speaker dan Layar Full HD IPS

Setelah disimpan, setelan Page Properties ini akan disimpan sebagai CSS. Buka/expand panel CSS => CSS Styles => All.kursus web css

Buka Document Window : Code, kita bisa melihat kode yang ditambahkan oleh Page Properties, dibagian <head> HTML.kursus web doc window code

Seperti kita lihat pada kode diatas, semua, thye yang dipasang berbasis pada tag: body, td, th, a, h1, h1, h2, h3, h4, h5, h6.

 

Membuat Style berbasis Class

Setelah sebelumnya kita membuat style pada tag, berikutnya kita akan membuat style dengan selector bukan tag. CSS memiliki 3 jenis selector: Tag, Class, Id (termasuk pseudo-class). Untuk lebih lanjut tentang CSS, silahkan ikuti Modul Dasar Cascading Style Sheet.

Berikut adalah langkah-langkah membuat style berbasis class.

Membuat Syte Baru

  1. Klik New CSS Rule Button pada .

kursus web CSS Sytles panel

2. New CSS Rule dialog muncul

3. Pilih Class, kemudian beri nama, misalnya rata-kanan.

4. Pilih opsi This document only

kursus web css rule

5. Kemudian klik OK.                                  kursus web css rule block

6. Pada Category: Block, pilih Text Align: Justify

7. Klik OK.

8. Hasil style CSS ini bisa dilihat pada panel CSS                                                                        kursus web panel css

 

9. Berikutnya adalah memasang sytle yang sudah dibuat pada halaman.

Memasang Style

  1. Pilih teks yang akan dipasang style, milsanya pada paragraf ke dua, dengan cara melakukan blok atau klik tombol tag selector diatas kotak Panel Properties   kursus web pilih teks
  2. Pada panel Properties, pilih Style:rata-kanan.                                      kursus web style rata kanan

Mengedit Styles

Anda dapat mengedit style yang sudah ada.

  1. Dari panel CSS Styles, pilih Rules yang ingin diedit.
  2. Double klik nama Rules                                                                         kursus web rules
  3. Lakukan perubahan yang diperlukan.
  4. Kemudian klik OK

Membuat Eksternal Style Sheet

Menambahkan styles ke satu halaman web sangat mudah, tapi bukankah lebih baik jika kita membuat style yang bisa dipakai di banyak halaman. Dengan eksternal Style Sheet hal tersebut menjadi mungkin. Anda dapat mendefinisikan seluruh rule dalam sebuah file teks “.css”. Ketika Anda membuat perubahan di eksternal style sheet, maka seluruh halaman yang me-referensi ke file ini akan ikut berubah secara otomatis.

Untuk membuat external style sheet, ikuti langkah berikut:

  1. Klik New CSS Rule pada panel CSS.                                                                        kursus web new css
  2. Isi dengan data berikut:
  1. Selector Type: Class
  2. Name: blue-subtitle
  3. Define In: (New Style Sheet File)
  4. Klik OK                                                                                         kursus web define in

3. Muncul dialog untuk nama file eksternal CSS, isi dengan nama: styles.css, klik OKkursus web nama file css

4. Beri nama: styles.css, klik Save

5. Pada Dialog CSS Rule Definition, isilah dengan data berikut:

  1. Type > Style: italic
  2. Type > Color: #003399
  3. Klik OK

6. Anda akan melihat sebuah file baru, yaitu: styles.css muncul di Panel File                            kursus web panel file css

 

7. Anda dapat double-klik untuk melihat isinya                                                               .kursus web isi panel file

 

8. Berikutnya kita akan memasang class .blue-subtitle pada halaman web

9. Caranya, blok tulisan dibawah Judul, kemudian pasang style dengan memilihnya dari Panel Properties.kursus web block teks

10. Hasilnya akan tampak seperti ini.kursus web hasil

 Itulah tutorial dasar menggunakan Dreamweaver versi-8 untuk membuat halaman web secara mudah. Dalam tutorial yang akan datang, kita akan bahas bahas bagaimana menggunakan fitur-fitur untuk membuat sebuah web dinamis. Tentunya dengan menggunakan tools yang lebih baru, versi CS-5 atau versi CS-6

Thanks for reading Dasar Dreamwever

« Previous
« Prev Post
Next »
Next Post »

0 komentar:

Post a Comment