Anda di halaman 1dari 14

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

• Selesai, coba dengan mentan tombol F12.

2.
Soal Pertemuan 1