blogsaya: tugas web

AMIK WAHANA MANDIRI (www.awm.ac.id)
Tugas 2
Mata kuliah WEB DESIGN
Dosen :
Sucipto, S.Kom, M.Kom
Agus Tianda, A.md
Habib Marzuqi, A.md

WEB DESIGN SEDERHANA MENGGUNAKAN MARCOMEDIA DREAMWEAVER 8

Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya.

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.

Contoh pembuatan Design Web menggunakan Dreamweaver..

Di bawah ini adalah cara membuat website menggunakan drreamweaver, dan tutorial ini saya buat sendiri.

Buka aplikasi dreamweaver kita, disini saya menggunakan Dreamweaver 8 karena ringan di komputer saya. Bagi yang sudah menggunakan dreamweaver CS5 bahkan CS6 tenang saja karena cara ini bisa diaplikasikan untuk semua dreamweaver

Setelah berhasil di buka maka akan terdapat tampilan seperti di bawah ini kemudian pilih HTML

Kemudian klik Layout lalu klik layout table (tanda merah) dan tarik garis ke bawah sesuai ukuran yang di butuhkan


Setelah itu buatlah tabel layout nya klik table layout (tanda merah) kemudian tarik garis kebawah. Dan lakukan hal yg sama jika ingin menambah tabel layout nya.

Insert gambar yang akan di jadikan sebagai bander nya dengan cara klik tool insert pilih image. Lakukan hal yang sama juga jika anda ingin memasukan gambar untuk bagian layout lain.

Untuk mewarnai background layout kita tinggal klik bagian layout yang akan kita warnai kemudian lihat kebagian bawah ada bg (tanda merah)

ini contioh layout home yang telah saya buat

Kemudian lakukan hal yang sama pada layout kedua atau jika kita ingin membuat layout untuk profile seperti yang telah saya buat

Apabila telah selesai jngn lupa di save dengan format file.html contoh : Home.html, agar kita lebih mudah mencari file tadi sebaik nya di save di dekstop saja.

Kemudian untuk menghubungkan kedua layout ini atau ketika kita di jendela home ingin ke jendela profile yang harus kita lakukan yaitu membuat link nya dengan cara BLOK teks PROFILE pada layout home kemudian ketik file profile yang kita buat tadi contoh : Profile.html

Jangan lupa di save.

Setelah itu coba lihat web sederhana yang telah kita buat tadi dengan cara double klik file.html yg telah kita save.

Ini contoh web sederhana yang telah saya buat