1. Web Design Software
Web design software merupakan perangkat lunak yang berguna untuk membangun/membuat /mendesain halaman-halaman web, baik yang bersifat statis maupun dinamis. Saat ini terdapat berbagai macam Web design software yang dikeluarkan oleh vendor yang berbeda beda. Setiap Web design software itu menawarkan berbagai macam fitur unggulannya masing-masing. Web design software terpopuler yang ada saat ini antara lain: Adobe Image Ready, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft Frontpage dan lain sebagainya.
2. Mengenal Macromedia Dreamweaver
Macromedia Dreamweaver yang merupakan salah satu Web design software terpopuler dipilih sebagai Web design software yang akan digunakan dalam proses pemelajaran dalam modul ini. Macromedia Dreamweaver dipilih karena kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman web, antara lain : ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan XML disamping keunggulankeunggulan lainnya dibandingkan dengan Web design software yang lain.
Dreamweaver menjadi software utama yang digunakan oleh web designer dan web programmer guna mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas desain maupun pembangunan situs web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.
Untuk dapat mengoperasikan Macromedia Dreamweaver, terlebih dahulu harus dipastikan sudah terinstal di komputer praktikum. Apabila belum ada Macromedia Dreamweaver yang terinstal, maka perlu dilakukan proses instalasi. Terlebih dahulu harus dipersiapkan file instalasinya dan diikuti dengan proses instalasi sesuai dengan installation manual yang ada. Setelah Macromedia Dreamweaver terinstal, jalankan dengan klik 2 kali pada ikon yang terdapat di desktop atau dapat juga dilakukan melalui Start Menu.
Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan workspace yang akan kita pakai selanjutnya.
Workspace Dreamweaver tersebut memiliki tampilan window seperti pada gambar 2. Window Dreamweaver ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector, Property Inspector dan Files Panel.
Keterangan Gambar:
1. Insert bar,
memuat tombol-tombol yang berfungsi untuk memasuk-kan/menyisipkan berbagai jenis obyek seperti gambar, tabel dan layer ke dalam suatu dokumen. Setiap obyek yang dimasukkan dengan meng-klik tombol insert pada insert bar ini adalah seperti halnya memasukkan potongan tag HTML ke dalam halaman yang sedang dibuat.
2. Document window,
berfungsi untuk menampilkan dokumen di mana anda sekarang bekerja.
3. Document toolbar,
berisi tombol dan menu pop-up yang menyediakan tampilan yang berbeda-beda dari Document Window.
4. Panel groups,
merupakan kumpulan panel yang saling berkaitan satu sama lain, yang dikelompokkan di bawah satu judul.
5. Tag selector,
berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang aktif pada Design View.
6. Property inspector,
digunakan untuk melihat dan mengubah berbagai property obyek atau teks.
7. Files panel,
memungkinkan pengaturan file atau direktori kerja.
8 Workspace Dreamweaver MX.
memberikan kesatuan tampilan antara menu utama, panel, property inspector serta toolbar.
B. Hyper Text MarkUp Language (HTML).
HTML yang merupakan kepanjangan dari Hyper Text MarkUp Language mem-iliki fungsi untuk memformat dokumen teks biasa agar bisa digunakan pada World Wide Web (WWW). HTML bukan merupakan suatu bahasa pem-rograman, karena sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks dan bukan sebagai program. Pada awalnya HTML dikembangkan sebagai subset SGML (Standart General-ized Mark-Up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi. File HTML merupakan dokumen teks yang diformat menggunakan HTML, maka untuk melakukan penulisan maupun editing dokumen. HTML dapat menggunakan berbagai macam editor, dalam hal ini digunakan Notepad. Struktur dasar dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut:
Struktur Dasar HTML.
Keterangan :
- <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
- <head> </head> : mendefinisikan head dalam sebuah file HTML.
- <title> </title> : mendefinisikan judul yang hendak ditampilkan pada brows-er.
- <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.
C. Format Teks Dasar dalam HTML
a. Heading,
HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. Heading ditampilkan dengan font lebih besar dan tebal daripada teks normal.
<h1>heading level 1 </h1>,
<h2>heading level 2 </h2>dst.
Tag Heading.
b. Paragraf, setiap ada paragraf baru diawali dengan <p><p>paragraf satu</p>, dst.
c. List, HTML mendukung daftar (list) tidak bernomor, bernomor dan definisi.
d. Tidak bernomor (unordered list) :
<ul>
<li>satu
<li>dua
<li>tiga
</ul>
Tampilan dari Unordered List Tag
e. Bernomor (ordered list) :
<ol><li>satu <li>dua <li>tiga </ol>
Tampilan dari Ordered List Tag
f. Definisi (definition list) :
<dl>
<dt>
<dd>
<dt>
<dd>
</dl>
Tampilan dari Definition List Tag
g. Performatted Text, dalam HTML, spasii, tab dan baris baru (enter) tidak memiliki pengaruh. Agar format tampilan sesuai dengan source-nya, maka diperlukan
tag<pre>. <pre>Nama : Saya Tanggal : Lahir </pre>
h. Extended Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>.
<p>paragraf satu</p> <blockquote> <p>paragraf masuk ke dalam</p> </blockquote>
Tampilan dari Blockquote Tag
i. Ganti baris (line break), untuk menulis alamat surat dengan barisbaris pendek, tidak bagus jika menggunakan tag <p>(spasi terlalu lebar). Maka digunakan tag <br> untuk ganti baris.
portal//perkuliahanamg
comment 0 komentar
more_vert