Ardan Sirodjuddin, S.

Pd Guru SMK Negeri 8 Semarang

MEMBUAT DISAIN WEB DENGAN DREAMWEAVER

Memulai Dreamwever 8 Langkah untuk menjalankan Dreamwever 8 adalah : 1. Klik Start All Program Macromedia Macromedia Dreamwever 8

2. Akan tampil jendela Dreamwever 8

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 3. Klik HTML maka akan tampil jendela Dreamwever 8 sebagai berikut

Keterangan : Insert Bar (1) Terdiri dari tombol tombol yang dapat dimasukkan dari berbagai objek seperti images, tabel, frame, dan layer ke dalam document Document Tool Bar (2) Terdiri dari tombol tombol untuk menentukan option tampilan yang berbeda dari document windows seperti Design View (untuk tampilan desain saja), Code View (untuk tampilan kode HTML) dan Split (untuk tampilan desain dan code) Document Window (3) Merupakan tempat untuk menampilkan dokumen yang sedang dibuat dan diedit saat ini Panel Group (4) Merupakan set dari kumpulan grup panel. Untuk menampilkan panel grup klik panah pada bagian kiri nama grup Files Panel (5) Untuk memudahkan mengatur file dan folder kita yang merupakan bagian dari website yang kita buat. Files panel juga memudahkan untuk mengakses semua file di lokal disc seperti hanya window ekspoler Property Inspector (6) Merupakan tempat untuk merubah berbagai properties dari objek yang dipilih ataupun teks Tag Selector (7) Berada pada status bar pada bagian bawah documen windows menampilkan hirarki

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang (tingkatan) dari tag (kelompok) yang digunakan saat ini. Klik beberapa tag di dalam urutan untuk memilih tag dan semua isinya. Setting Web Site Dreamwever Melanjutkan tutorial yang pertama, kali ini kita akan membahas setting website. Sebuah web site merupakan sekumpulan dokumen yang saling berhubungan. Dreamweaver dapat digunakan untuk mengatur site yang kita buat sehingga kita dapat membuat web site yang sempurna. Site adalah istilah di dunia internet yang menjelaskan tentang kumpulan halaman halaman web dan beberapa objek lainnya yang dimiliki oleh sebuah institusi dan berisi content content yang sesuai dengan pemilik site tersebut. Contoh site misalnya www.yahoo.com atau www.google.com. Langkah terbaik pertama dalam merancang sebuah web site adalah merencanakan web site tersebut yaitu membuat struktur dokumen di web server. Mulailah membangun situs anda dengan menentukan situs lokal untuk file file dalam lokal site. Sebuah situs adalah lokasi penyimpanan dokumen dokumen dan file file yang berhubungan dengan situs web tertentu. Menentukan situs lokal melukiskan struktur dari situs yang anda buat dan memberitahu dreamweaver dimana anda berencana menempatkan semua file file. Langkah membuat lokal situs adalah : 1. Buka dreamweaver dan sebuah dokumen kosong akan muncul 2. Klik site new

3. Akan muncul site definition ketik nama situs untuk memudahkan anda mengidentifikasi dan memilih sebuah situs dari daftar situs situs yang pernah anda buat. Pada tutorial ini

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang saya ketik smk8 kemudian klik next

4. Pada site definition for smk8, pilih option yang pertama kemudian klik next

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 5. Untuk menyimpan file, klik gambar folder dan pilih tempat penyimpanan folder. Pada tutorial ini, saya tempatkan di D : smk8. Kemudian klik open

6. Sehingga akan muncul gambar berikut dan klik select

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 7. Sehingga akan muncul gambar berikut dan klik next

8. Karena kita akan membuat website statis maka pilih none dan klik next

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 9. Kita akan mendapatkan rangkuman dari site yang dibuat kemudian klik next

10. Sekarang kita sudah siap membuat website

MEMBUAT DOKUMEN BARU Setelah membuat setting website, melanjutkan tutorial saya belajar membuat website kali ini kita akan belajar membuat dokumen baru. Untuk membuat dokumen baru Ikuti langkah berikut :

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 1. Start All program Macromedia Macromedia Dreamweaver 8

2. Kita akan memasuki halaman depan dreamweaver

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 3. Untuk membuat halaman baru pilih create New HTML

4. Kita memasuki jendela kerja Dreamweaver. Pada jendela kerja ini , ada tiga macam tampilan yaitu design (jika ingin tampilan berupa design webnya), code (jika ingin menampilkan coding) dan split (jika ingin menampilkan design dan codenya).

PENGATURAN HALAMAN UTAMA Pada saat kita akan membuat proyek berbasis web, pekerjaan awal yang tidak boleh diabaikan adalah pengaluran standar halaman utama dan seiuruh komponen lain yang akan dibuat di dalam halaman proyek pada web. Ada beberapa hal yang dapat dikerjakan untuk melakukan peneaturan terhadap proyek yang digunakan. Komponen proyek tersebut antara lain adalah wama latar belakang, warna teks, title, identitas halaman dan perataan teks.

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang Membuat Title Pada Halaman Web Title dapat diartikan dengan judul. Fungsi dari judul adalah untuk memberikan tanda pengenal pada setiap halaman waeb. Judul akan selalu ditampilkan pada bagian status bar dan pada saat file HTMl dijalankan. Cara membuat title adalah : 1. Secara manual dengan menuliskan berupa tag HTML dengan cara menuliskannya pada tag <TITLE> Yang ada pada bagian <HEAD> 2. Pada bagian dokumen bar, ketik judul halaman pada kotak title.

Mengatur Properties Halaman Web Sebelum kita memulai mendesain halaman web, kita harus mengatur property halaman kerja kita. Properti ini akan berpengaruh terhadap hasil web yang akan dibuat. Kita dapat mengatur judul halaman, latar belakang warna dan gambar halaman, warna teks dan link serta margin halaman web. Semua atribut tersebut merupakan atribut dasar yang perlu diperhatikan dari setiap halaman web. Untuk menampilkan kotak dialog properties, lakukan dengan cara :

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 1. Klik menu modify Page properties atau tekan tombol Ctrl + J

2. Akan tampil kotak dialog properties sebagai berikut :

Tampilan kotak dialog Page Properties terbagi ke dalam 5 kategori : Appearance Bagian untuk mengatur jenis font untuk halaman, menentukan style font, ukuran font, wama untuk font, warna latar belakang halaman atau menampilkan gambar untuk latar belakang. Selain itu juga dapat menentukan margin halaman. Link Bagian ini digunakan untuk menentukan jenis font untuk teks link, ukuran font, mengubah wama untuk teks link, mengubah warna untuk teks yang telah dikunjungi,

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang mengubah warna untuk teks rollover, mengubah warna untuk teks link yang sedang aktif serta untuk menentukan pemberian garis bawah pada teks link. Heading Bagian untuk menentukan sendiri style yang digunakan untuk teks naskah Anda. . Title/Encoding Bagian ini digunakan untuk memberikan judul halaman pada Title. Tracing Image Bagian ini digunakan jika mgin menampilkan tampilan gambar sementara pada. latar belakang. BEKERJA DENGAN TEKS Memilih Jenis Font Pada Property inspector bar, anda diberikan fasilitas dalam memilih jenis-jenis teks atau font untuk penulisan pada pembuatan halaman web anda. (gbr 1)

Memformat Teks,

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang Teks yang sudah disisipkan/diketik dapat diformat agar hasilnya jauh lebih bagus dengan menggunakan fasilitas Properties Inspector seperti terlihat di bawah ini :

Sedangkan teknik untuk menyisipkan teks ke dalam sebuah HTML dapat dilakukan dengan dua cara, yaitu : 1. Mengetikkan secara langsung teks ke dalam dokumen 2. Menyalin (copy paste) dan file HTML atau website yang sudah ada, Memilih Warna Pada Dreamweaver, ada bermacam-macam dialog box, seperti juga pada Property inspector ada menu untuk kotak-kotak pilihan warna untuk teks. Anda tinggal memilih warna-wama sesuai dengan keinginan anda. Memilih wama pada Dreamweaver : Klik salah satu kotak wama pilihan.

Berikut ini kita akan membuat teks secara langsung dalam dokumen HTML 1. Bukalah program aplikasi Dreamweaver 8 dengan Klik ; Start -> Program ~> Macromedia ~> Dreamweaver 8

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 2. Ketikkan teks dibawah ini dalam dokumen windows : PROGRAM KEAHLIAN MULTIMEDIA SMK NEGERI 8 SEMARANG VISI Mewujudkan tenaga menengah yang profesional dalam bidang multimedia sesuai tuntutan dunia industri dengan etos kerja yang tinggi dan memiliki sikap mandiri MISI 1. Mengembangkan sikap dan ketrampilan peserta didik dalam keahlian multimedia 2. Menguasai ketrampilan dalam pengoperasian komputer multimedia 3. Menguasai ketrampilan dalam penggunaan perangkat lunak multimedia 4. Mampu mengembangkan pembuatan multimedia yang relevan dengan tuntutan kebutuhan masyarakat TUJUAN 5. Menyiapkan tamatan profesional yang memiliki ketrampilan dalam bidang multimedia bagi dunia kerja 6. Menyiapkan tenaga kerja yang mampu mengembangkan diri dan mampu berkompetisi dalam dunia kerja multimedia 7. Mengembangkan ketrampilan multimedia seiring perkembangan teknologi yang ada 8. Menyiapkan tenaga kerja yang memiliki sikap berakhlak mulia, sehat, cakap, kreatif, mandiri, demokratis, tanggung jawab, disiplin dan jujur 9. Dapat menjadi tenaga terampil yang mampu berwiramandiri

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 10. Hasilnya terlihat pada contoh :

BEKERJA DENGAN TABEL Membuat Tabel Tabel merupakan satu bagian penting di dalam pembuatan web design. Dreamweaver membagi layout tabel menjadi tiga bagian yaitu Standard, Expanded, dan Layout. Fasilitas Layout digunakan untuk menampilkan tabel dalam kondisi yang lebih besar dari ukuran awalnya. Untuk menggunakan salah satu layout tersebut aktifkan salah satunya dengan cara klik pilihan layout setelah itu buatlah tabel anda, Kita akan coba membuat tabel dengan cara sebagai berikut: 1. Aktikan terlebih dahulu mode layout,

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang

2. Lalu klik tombol Standard sehingga ikon tabel akan diaktifkan.

3. Setelah itu klik ikon tabel atau gunakan menu Insert Table sehingga akan ditampilkan kotak dialog tabel.

Keterangan kotak dialog Tabel: Bagian Tabel Size: Rows, bagian Columns, bagian Width, yang yang digunakan digunakan untuk untuk menentukan menentukan jumlah jumlah baris kolom tabel. tabel.

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang bagian yang digunakan untuk menentukan ukuran lebar tabel dan satuan ukuran yang akan dipakai, pixel atau percentase. Border, bagian yang digunakan untuk mengatur ketebalan border atau batas tabel. Cell Padding, bagian yang digunakan untuk mengatur jarak antara isi sel dengan batas tepi set. Cell Spacing, bagian yang digunakan untuk menentukan jarak antar sel dalam tabel. Bagian Header None, tanpa menggunakan keterangan teks. Left, menampilkan keterangan teks pada kolom pertama atau pada bagian sebelah kiri Top, menampilkan keterangan teks pada baris pertama atau pada bagian sebelah atas. Both, menampilkan keterangan teks pada kolom dan baris pertama. Bagian Accessbility Caption, bagian yang digunakan untuk memberikan keterangan judul tabel. Align Caption, bagian yang digunakan untuk mengatur perataan teks. Summary untuk membuat keterangan. Melanjutkan tulisan sebelumnya mengenai pembuatan tabel, kali ini kita akan coba praktek. Sebagai contoh kita buat ukuran tabel adalah 3 x 3. Ikuti langkah berikut : 1. Klik icon tabel dan isi rows 3, columns 3, table width 200 piksel, border thickness 1 dan header pilih none

2. Saat ini tabel dikatakan dalam keadaan terpilih (selected), yang ditandai dengan adanya garis hitam tebal di sekeliling tabel, dan 3 buah kotak hitam kecil yang disediakan untuk resizing. Seperti yang Anda lihat pada window Object Properties, terdapat beberapa properti tabel yang disebutkan, antara lain Rows (jumlah baris). Cols (jumlah kolom), W (lebar, width), H (tinggi, height), CellPad (cell padding), CellSpace (cell spacing), Align,

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang Border, Bg Color (background coior), Brdr Color (border color), Bg image (Bg image). Anda dapat bereksperimen dengan mengubah-ubah properti-properti tersebut. Caranya, isikan nilai (value) baru, kemudian tekan Enter.

3. Setiap perubahan pada window Object Properties ini akan dilakukan (applied) terhadap keseluruhan tabel, karena tabel dalam keadaan terpilih (selected). Langkah berikutnya adalah melakukan penyesuaian bentuk tabel menjadi yang diinginkan.

Ardan Sirodjuddin, S.Pd Guru SMK Negeri 8 Semarang 4. Setelah anda bisa silahkan membuat tabel lagi dengan baris dan kolom yang berbeda, dan beri nilai pada cellpadding dan cellspacing. Selamat mencoba.