Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi file bertipe HTML. Pada tutorial kali ini, kita akan be- lajar untuk mengedit halaman HTML tersebut sehingga dapat digunakan sebagai template web kita. Saat kita berhasil melakukan konversi dari Photoshop ke HTML, maka pada folder penyimpanan akan muncul sebuah folder yang bernama images dan sebuah file HTML. Folder images akan berisi gambar-gambar hasil slicing dengan Photoshop. Folder ini nan- tinya akan digunakan untuk menyimpan semua gambar-gambar yang dibutuhkan dalam memba- ngun website kita, sehingga administrasi penyimpanannya dapat lebih teratur. Untuk memulai mengedit halaman web ini, kita buka file HTML kita menggunakan Adobe Dreamweaver, maka akan muncul tampilan sebagai berikut: *NB: Gunakan mode Split untuk memudahkan proses edit halaman HTML. Kode program yang degenerate secara otomatis menggunakan pola tabel Tampilan program
11
Embed
Tutorial Mengedit Halaman HTML dengan Dreamweaver Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Tutorial Mengedit Halaman HTML dengan Dreamweaver
Oleh : Ruth Ema Febrita
Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang
kita buat menggunakan Photoshop menjadi file bertipe HTML. Pada tutorial kali ini, kita akan be-
lajar untuk mengedit halaman HTML tersebut sehingga dapat digunakan sebagai template web kita.
Saat kita berhasil melakukan konversi dari Photoshop ke HTML, maka pada folder
penyimpanan akan muncul sebuah folder yang bernama images dan sebuah file HTML.
Folder images akan berisi gambar-gambar hasil slicing dengan Photoshop. Folder ini nan-
tinya akan digunakan untuk menyimpan semua gambar-gambar yang dibutuhkan dalam memba-
ngun website kita, sehingga administrasi penyimpanannya dapat lebih teratur.
Untuk memulai mengedit halaman web ini, kita buka file HTML kita menggunakan Adobe
Dreamweaver, maka akan muncul tampilan sebagai berikut:
*NB: Gunakan mode Split untuk memudahkan proses edit halaman HTML.
Kode program yang
degenerate secara
otomatis menggunakan
pola tabel
Tampilan program
Membuat dan Menggunakan File CSS
Buatlah sebuah file CSS yang nantinya akan berfungsi untuk memberikan style pada
halaman website kita, caranya adalah:
1. Klik File New CSS
2. Create
3. Simpan dengan nama style.css (atau bisa juga yang lain) dan simpan di folder yang sama
dengan tempat penyimpanan halaman HTML.
Dalam file CSS yang telah kita buat, kita bisa menambahkan jenis font apa yang akan kita
gunakan pada seluruh halaman web yang akan kita gunakan, misalnya dengan menggunakan script
berikut:
Untuk menerapkan file CSS yang telah kita buat, tambahkan script berikut ini di antara tag
<head>
Setelah itu maka file CSS dapat diterapkan pada halaman web yang akan kita buat.
Menambahkan Teks pada Halaman Website
Selanjutnya kita akan mencoba untuk menambahkan teks paragraf dalam halaman web kita dengan
memanfaatkan background gambar hasil slicing kita dengan Photoshop. Berikut ini adalah langkah-
langkah yang harus dilakukan:
1. Tentukan lokasi dalam bagian design, dimana Anda akan meletakkan teks paragraf. Kliklah
bagian tersebut. Maka pada bagian kode akan terseleksi secara otomatis script yang
menunjukkan bagian yang terpilih. Untuk lebih jelasnya perhatikan gambar berikut.