Jika Anda orang yang
baru mulai belajar membuat website, maka akan ada banyak hal yang perlu
dipelajari dalam cara pembuatan website. Secara umum, banyak orang memulai
langkah pembuatan website dengan membuat sketsa atau rencana kasar. Sketsa
kasar biasanya dibuat dengan berbagai macam cara, misalnya coretan atau gambar
di atas kertas. Sketsa tersebut kemudian dibuat menjadi gambar grafis dengan
menggunakan software Desain Grafis seperti Adobe Photoshop. Langkah selanjutnya
adalah membuat halaman HTML dengan menggunakan Adobe Dreamweaver. Dengan
demikian, Adobe Photoshop berperan sebagai software untuk merancang, sedangkan
Dreamweaver menjadi software yang dipergunakan untuk menata halaman.
Kenyataannya, pembuatan situs besar maupun kecil bisa dikelola dengan
menggunakan Adobe Dreamweaver.
Langkah Persiapan
Dalam dunia internet,
sebuah situs dikenal karena memiliki identitas yang berbeda dari situs lainnya.
Ibaratnya sebuah barang yang diproduksi oleh pabrik, maka situs tersebut
memiliki merek, citra produk (brand image), warna serta desain yang menjadi ciri
khasnya. Dengan demikian, kita dapat mengenal Google, Yahoo!, WordPress,
Facebook, dan sebagainya sebagai sebuah identitas dari alamat situs yang mereka
miliki.
Langkah permulaan
membuat situs adalah dengan menentukan hal-hal yang berhubungan dengan
identitas situs dan di mana situs tersebut akan ditempatkan. Berikut ini adalah
beberapa langkah yang bisa kita lakukan untuk menyiapkan sebuah situs baru :
1.
Buka Adobe Dreamweaver
CS4. Jika Anda belum terbiasa, maka cara memulai Adobe Dreamweaver adalah
dengan memilih tombol Start > All Programs > Adobe Master Collection CS4 >
Adobe Dreamweaver CS4.
2.
Anda akan dihadapkan
pada Menu Pembuka Adobe Dreamweaver CS4. Untuk memulai situs baru, klik pada
menu Create New > Dreamweaver Site.
3.
Kotak dialog Site
Definition akan segera terbuka. Pada form isian pertama kita bisa menuliskan
nama website yang akan kita buat dan pada form kedua kita bisa mengisikan
alamat online secara lengkap website yang akan kita buat. Tapi, berhubung kita
belum menggunakan alamat server secara online, maka alamat ini sementara tidak
perlu diisi. Klik pada tombol Next.
4.
Selanjutnya adalah
pilihan untuk menggunakan Server Technology (yakni ColdFusion, ASP.NET, ASP,
JSP, dan PHP) atau tidak menggunakan Server Technology (web statis). Server
Technology akan menyebabkan file-file ditulis dalam format sesuai dengan jenis
server. Berhubung pada tahap awal ini belum menggunakan Server Technology, maka
kita bisa lanjutkan ke tahap berikutnya. Pastikan pilihan masih pada No, I do not want to
use a server technology.
Kemudian, klik pada tombol Next.
5.
Tahap berikutnya
adalah menentukan di mana lokasi file-file kerja kita akan disimpan. Pada Kotak
dialog ini, gantilah form isian di bagian bawah dengan lokasi folder di mana
file-file website akan disimpan.Pastikan pilihan tetap aktif pada Edit local copies in
my machine… Cara lain untuk
menentukan lokasi folder adalah dengan browse. Anda bisa klik pada ikon folder
dan menentukan lokasi folder tersebut di harddisk.Selesai menentukan folder
kerja, kita bisa melanjutkan ke proses berikutnya. Klik pada tombol Next.Penting untuk menyimpan semua file website
pada folder yang didaftarkan pada proses ini. Semua file yang akan di-upload ke
server online akan berhubungan dengan alamat relatif, sehingga harus diletakkan
pada satu folder induk, yakni folder yang didaftarkan.
Folder untuk menyimpan file website
6.
Tahap selanjutnya adalah menentukan bagaimana dan di mana
file-file tersebut akan diletakkan pada Remote Server. Proses ini sangat
penting mengingat setelah website terbentuk, maka file-file yang telah dibuat
dapat dikirimkan ke Online Server. Cara yang terbaik untuk mengirimkan
file-file tersebut adalah dengan menggunakan FTP (File Transfer Protocol).Jika Anda sudah pernah melakukan upload file
melalui FTP, maka form-form isian ini tidaklah terlalu sulit untuk dijelaskan.
Anda tinggal mengisi form-form isian mengenai alamat Web Server (hostname),
Folder hosting, FTP Login, dan FTP Password. Tapi jika Anda belum pernah
melakukannya dan belum memiliki alamat Remote Server, sementara bisa Anda
kosongkan.
7.
Nah, berhubung tahapan
ini membutuhkan Remote Server, maka untuk sementara kita bisa lewati. Jangan
khawatir karena Adobe Dreamweaver mengijinkan proses ini dapat dilakukan
kemudian. Pengaturan Remote Server dapat kita isi di lain waktu setelah semua
file siap untuk di-upload.Untuk mengabaikannya, pilih None pada pilihan Remote Server. Lanjutkan
dengan klik tombol Next.
8.
Untuk sementara, tahap
persiapan pembuatan situs baru telah selesai. Namun, apabila semua file telah
lengkap dan Anda telah memiliki Hosting pada sebuah ISP (Internet Service
Provider), proses ini dapat Anda lengkapi.
Klik Done untuk mengakhiri.
Perhatikan bahwa di sebelah kanan sekarang
telah tersedia folder baru sesuai dengan yang telah didefinisikan pada tahap
sebelumnya.
Membuat Halaman
Website Baru
Setelah proses
persiapan selesai, kita bisa memulai tahapan awal membuat website. Perlu
diketahui, bahwa halaman website dapat dibuat dengan menggunakan berbagai macam
format. Sebagai contoh, banyak halaman web dibuat dengan format table HTML.
Namun, format CSS lebih dianjurkan mengingat format CSS memiliki banyak
kelebihan dan fleksibilitas yang lebih baik.
Pada contoh latihan
pertama ini kita akan menggunakan format HTML mengingat format HTML adalah
dasar dari bahasa yang dipergunakan di web. Sekarang kita bisa mulai membuat
halaman baru. Langkah-langkahnya adalah sebagai berikut :
1.
Klik More pada pilihan di bawah kolom Create New. (Alternatif lain adalah dengan klik pada
menu File > New).
2.
Kotak dialog selanjutnya
memperlihatkan jenis dokumen yang akan dibuat, tipe file, dan template layout
yang sudah siap pakai tergantung pada jenis dokumen yang akan dibuat. Kita
dapat mencoba-coba memilih beberapa di antaranya. Jendela preview di bagian
paling kanan akan memperlihatkan tampilan template yang sedang dipilih.
Pada kolom Layout terdapat banyak bentuk kolom
yang dapat dipilih. Pada dasarnya bentuk kolom pada website masa kini
menggunakan metoda CSS, sehingga Dreamweaver menyiapkan layout kolom
menggunakan CSS.
Terdapat empat bentuk layout kolom sebagai
berikut :
Fixed ; kolom
yang tidak dapat diubah, tergantung pada setting pada browser di komputer
pengguna. Lebar kolom menggunakan ukuran piksel.
Elastic ; kolom dapat beradaptasi pada setting text di
komputer pengguna, tetapi tidak berubah ketika browser diperbesar atau
diperkecil. Lebar kolom menggunakan ukuran ems (ukuran pada typography
tradisional).
Liquid ; kolom dapat berubah jika browser diperbesar
atau diperkecil, tetapi tidak berubah ketika pengguna mengubah setting text.
Hybrid ; kombinasi dari berbagai tipe kolom.Untuk
latihan pertama, kita bisa klik HTML pada pilihan Page Type dan klik pada None pada pilihan Layout. Klik pada Tombol Create untuk menyelesaikan proses pembuatan Dokumen
baru.
3.
Sampai pada tahap ini
pembuatan halaman baru dengan format HTML biasa telah selesai. Anda dapat
mencoba menuliskan sebuah kalimat pada bagian workspace design. Cobalah
mengetikkan kalimat berikut : Selamat Datang di Website Kami.
Tulisan yang telah diketik akan muncul dalam
dua jendela, yakni jendela Design dan jendela Code. Artinya, kita dapat melihat
preview website di jendela Design, dan dapat melihat bagaimana kodenya
dituliskan pada jendela Code.
Menyimpan Halaman Web
Pada aplikasi lain,
seringkali tempat di mana sebuah file diletakkan tidaklah menjadi masalah.
Namun tidak demikian dengan halaman-halaman website. File-file yang kita
ciptakan akan berhubungan dengan file lain dalam struktur website yang sama.
Oleh karena itu, sangatlah penting untuk meletakkan file-file yang kita buat
pada satu folder yang sama.
1.
Klik pada menu File > Save.
2.
Pada kotak
dialog Save As,
pastikan Anda meletakkan pada folder yang telah dibuat pada proses sebelumnya.
Jika tidak, carilah folder yang telah dibuat sebelumnya!
3.
Ketikkan pada
kotak File name : index.html
File : index.html adalah nama file standar dalam dunia internet yang menjadi
acuan sebuah website. File ini adalah file yang pertama kali dibuka ketika
browser diarahkan untuk membuka alamat website tertentu.
·
Biarkan kotak Save as type : terisi All Document. Dan pada kotak Unicode Normalization
Form : pilih None.
·
Klik pada tombol Save.
