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 :
- 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.
- Anda akan dihadapkan pada Menu Pembuka Adobe Dreamweaver CS4. Untuk memulai situs baru, klik pada menu Create New > Dreamweaver Site.
- 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.
- 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.
- 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.
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.
- 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.
- 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.
Ringkasan hasil setting
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 :
- Klik More pada pilihan di bawah kolom Create New. (Alternatif lain adalah dengan klik pada menu File > New).
- 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.
- 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.
- Klik pada menu File > Save.
- Pada kotak dialog Save As, pastikan Anda meletakkan pada folder yang telah dibuat pada proses sebelumnya. Jika tidak, carilah folder yang telah dibuat sebelumnya!
- 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.
Sampai di sini tahapan awal pembuatan file utama index.html telah berhasil dilakukan. Dengan demikian kita dapat melanjutkan ke tahap selanjutnya, yakni membuat format text dengan HTML.
