Membuat website dengan adobe dreamweaver cs4

You are commenting using your Facebook account. Beri tahu saya komentar baru melalui email. Beritahu saya pos-pos baru lewat surat elektronik. Stay updated via RSS. Animasi Bergerak. Langkah Persiapan Dalam dunia internet, sebuah situs dikenal karena memiliki identitas yang berbeda dari situs lainnya.

Berikut ini adalah beberapa langkah yang bisa kita lakukan untuk menyiapkan sebuah situs baru : Buka Adobe Dreamweaver CS4. 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. 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. Server Technology 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. 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 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.

Jika Anda sudah pernah melakukan upload file melalui FTP, maka form-form isian ini tidaklah terlalu sulit untuk dijelaskan. Tapi jika Anda belum pernah melakukannya dan belum memiliki alamat Remote Server, sementara bisa Anda kosongkan. Setting FTP untuk upload file 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. Pilih None pada Remote Server Untuk sementara, tahap persiapan pembuatan situs baru telah selesai. Ringkasan hasil setting Klik Done untuk mengakhiri. Folder baru muncul sebagai hasil setting Membuat Halaman Website Baru Setelah proses persiapan selesai, kita bisa memulai tahapan awal membuat website.

Langkah-langkahnya adalah sebagai berikut : Klik More pada pilihan di bawah kolom Create New. Membuat file baru 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. Refresh Design Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan pada kode HTML dokumen.

Tool Refresh dibutuhkan karena perubahan kode HTML dokumen tidak secara langsung otomatis mengubah desain dokumen. View Option Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen, baaik tampilan kode maupun tampilan desain.

Validate Markup Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag yang terpilih. Check Browser compability Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan kompatible dengan browser yang berbeda. Panel adalah sebuah jendela untuk memudahkan pembuatan desain web dengan menampilkan informasi pendukung pada jendela informasi sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut.

Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk menambahkan komponen komponen web ke dalam desain halaman anda kemudian panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file gambar, html, dan folder yang terdapat pada site yang anda definisikan.

Anda dapay menyeleksi bagian desain dengan memilih tag yang sesuai. Perangkat Tambahan Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang berfungsi menampilkan hasil desain halaman web.

Dengan cara ini kita akan bisa mengedit secara langsung image dengan Photoshop dan menyimpan perubahannya.

Salah satu hal yang patut dicatat pada Adobe Dreamweaver CS4 adalah tersedianya banyak pilihan interface yang tersimpan dalam bentuk menu Workspace. Kita dapat memilih konfigurasi yang paling sesuai untuk dapat menangani pekerjaan yang tengah kita hadapi. Hal baru lain dalam penangan interface adalah kita diberi kebebasan untuk mengubah konfigurasi interface dan kemudian hasilnya dapat disimpan dalam bentuk Workspace tersendiri. Ruang kerja lebih besar dapat kita konfigurasikan hanya dengan memilih workspace Designer Compact.

Dreamweaver yang terdahulu menggunakan model statis untuk memperlihatkan tampilan web yang sedang dibuat. Dengan fitur ini kita dapat melihat hasil akhir yang akurat, lengkap dengan menu dan tombol yang interaktif.

Dengan fasilitas ini kita dapat melihat preview halaman web secaara akurat. Selain itu, kita dapat melihat halaman web yang sedang dikerjakan secara interaktif beserta seluruh bagian yang berhubungan.

Mengingat website masa kini menggunakan berbagai macam file seperti CSS, Javascript, dan lain-lain, maka pengelolaannya menjadi semakin rumit. Salah satu fitur baru yang ada di Dreamweaver CS4 adalah ditampilkannya file-file yang dipergunakan oleh satu halaman website.

File-file tersebut ditampilkan dalam satu deret pada bagian paling atas dokumen yang tengah dibuka. CSS Cascading Style Sheets dewasa ini telah menjadi standar dalam pengaturan tampilan style pada text dan bagian-bagian lain yang berhubungan dengan tampilan yang dibuat seragam. Dengan adanya Code Navigator, maka secara cepat kita dapat melihat properti yang dipergunakan dalam bentuk CSS.

Perbaikan yang cukup signifikan lainnya adalah pada panel Properties. Berbeda dengan versi-versi sebelumnya yang kadang-kadang pengaturan properti dituliskan sebagai kode HTML biasa atau sebagai kode CSS dengan nama yang dituliskan secara otomatis, seperti Style1, Style2, dan seterusnya.

Contohnya, kita bisa membuat halaman web dengan kode HTML biasa yang terdiri atas baris dan kolom, kemudian table dengan baris dan kolom tersebut dapat di-import ke dalam Dreamweaver dalam format lain menggunakan Javascript atau Spry. Proses selanjutnya tinggal mengisi data dalam berbagai macam cara. Fitur baru ini memungkinkan Dreamweaver untuk membaca dokumen Photoshop file PSD dan memberi dukungan langsung terhadap format file tersebut.

Andaikan suatu saat file PSD tersebut telah mengalami perubahan — misalnya karena telah diedit, maka Dreamweaver secara otomatis akan memberitahu dengan memberi tanda panah merah pada gambar tersebut. Posted on January 31, , in mengisi halaman web. Bookmark the permalink. Leave a comment.

You are commenting using your WordPress. You are commenting using your Google account. You are commenting using your Twitter account. You are commenting using your Facebook account.