Pengenalan Dreamweaver

Pertemuan 1 Pengenalan Adobe Dreamweaver Andreas Hery P

Tentang Adobe Dreamweaver Untuk mendesain sebuah website umunya orang harus menguasai HTML akan tetapi ada sulusi yang lebih mudah yaitu menggunakan software bantu, software bantu yang paling banyak digunakan adalah Adobe Dreamweaver. Berikut adalah gambar tampilan awal adobe dreamweaver.

gambar 1.1 tampilan adobe dreamweaver

Menjalankan Adobe Dreamweaver Untuk menjalankan adobe dreamweaver yaitu dengan start > all programs > adobe dreamweaver.

maka akan muncul seperti gambar 1.1

gambar 1.2 langkah menjalankan adobe dreamweaver

Antarmuka Adobe Dreamweaver Menu :

Insert Bar :

Bagian dari insert bar : Common :

Layout :

Forms :

Data :

Spry :

Text :

Favorites :

Panel Group

Coding window

Jendela Dokumen dan rule

Property

Operasi Dasar Adobe Dreamweaver 1. Membuat dokumen baru Cara 1 Untuk membuat dokumen, jalankan adobe dreamweaver maka akan muncul seperti gambar 1.3.

Klik disini

Gambar 1.3 Halaman Pertama Adobe Dreamweaver

Pada bagian create new pilih jenis file yang akan dibuat. Kita pilih HTML. Cara 2 Pilih pada menu : file > new

gambar 1.4 Menu File > New

maka akan muncul seperti gambar 1.5

gambar 1.5 Pilihan Dokumen Yang akan Dibuat

Untuk Kali ini pilih HTML. 2. Menyimpan dokumen Jika dokumen telah kita buat seperti gambar 1.6 tinggal kita simpan.

Gambar 1.6 Dokumen yang akan disimpan

Untuk menyimpan dokumen pilih pada menu file > save as maka akan muncul tempat diamana kita akan menyimpan file tersebut.

gambar 1.7 Tempat Menyimpan File

3. Membuka dokumen Untuk Membuka file yaitu pada menu pilih file > Open maka akan muncul foder seperti gambar 1.8, buka folder tempat kita menyimpan file, kemudian pilih file yang akan kita buka.

gambar 1.8 Memilih file yang akan dibuka

4. Menjalankan dokumen Untuk menjalankan dokumen yang telah kita buat yaitu dengan cara menekan F12 maka halaman kita otomatis akan muncul dibrowser. 5. Menutup Dokumen Untuk menutup dokumen yaitu dengan file > exit

Membuat Dokumen Website Sederhana Membuat dokemen seperti gambar 1.9.

gambar 1.9 Contoh Halaman Sederhana

Untuk membuat berikut langkah-langkahnya : 1. Buat file HTML dengan File > New > HTML maka akan muncul seperti gambar 1.10

Gambar 1.10 Halaman HTML

2. Klik pada jendela dokumen kemudian ketikkan kata-kata yang ingin ditampilkan seperti gambar 1.11.

gambar 1.11 Menyisipkan Text pada dokumen

3. Setelah menyisipkan text simpan halaman tersebut. 4. Untuk menjalankan F12

Latihan Pertemuan 1 1. Buatlah sebuah dokumen HTML yang hasilnya seperti gambar 1.12.

gambar 1.12 latihan 1

Langkah-langkah membuat dokumen diatas : •

Buat dokumen HTML dengan file > new > HTML maka akan muncul seperti gambar 1.13.

gambar 1.13 dokumen baru

•

Ketikkan pada jendela dokumen : BERITAKOM.COM seperti gambar 1.14

gambar 1.14 sisipkan text

•

Blok tulisan BERITAKOM.COM seperti gambar 1.15

gambar 1.16 blok tulisan

•

Pilih pada properties : align center

gambar 1.16 pilih align center

makan tulisan akan berda di tengah seperti gambar 1.17.

gambar 1.18 Tulisan Di tengah

•

Ubuah format tulisan pada properties menjadi Heading1

Maka hasilnya seperti gambar 1.19.

gambar 1.19 Tulisan Menjadi Heading1

•

Ubah Warna Menjadi Warna Biru dengan mengatur pada properties seperti gambar 1.20

gambar 1.20

maka hasilan adalah seperti gambar 1.21

gambar 1.21 Tulisan Jadi Biru

•

Untuk menambah tulisan Situs IT Terpercaya kita klik pada akhir BERITAKOM.COM kemudian kita enter dan tambahkan tulisan Situs IT Terpercaya seperti gambar 1.22

gambar 1.22 Menambah Tulisan

•

Ubah Warna Tulisan Menjadi Hitam, cara seperti mengubah warna beritakom supaya hasilnya seperti gambar 1.22.

gambar 1.23 Tulisan Menjadi Hitam

•

2.

Selesai, coba dengan mentan tombol F12.

Soal Pertemuan 1