Desain Web PDF

Modul
Desain Web
Budi Kurniawan S.Kom

KATA PENGANTAR
In the name of Allah SWT, The Beneficient, The Merciful

Modul ini hanya dibuat untuk mahasiswa-mahasiswi Akademi Manajemen Informatika dan Komputer AKMI Baturaja yang mengambil mata kuliah Desain Grafis sebagai panduan dan referensi pembantu untuk membuat sebuah karya desain yang layak di pakai di dunia kerja saat ini. Disertai dengan beberapa tips dan trik untuk memudahkan para mahasiswa dalam pemakaian software dasar desain grafis yang banyak dipakai oleh para desainer professional baik berbasis vector maupun bitmap.
We will show them our sign in all the regions of the earth and their own souls, untill they clearly see that this is the truth.. [Fusilat : 53]
Modul
Desain Web

BAB 1 SEKILAS TENTANG HTML
1.
PENGENALAN HTML
Sebelum kita bahas lebih detail tentang cara membuat dan mendesain web dan berbagai hal yang berkaitan dengan desain web tersebut, seperti kata pepatah tak kenal maka tak sayang, maka ada baiknya jika kita sedikit belajar lagi tentang bahasa dasar dalam pembuatan dokumen web yaitu HTML. HTML atau Hypertext Markup Language adalah sebuah protokol yang digunakan untuk membuat format suatu dokumen web yang mampu dibaca dalam browser dari berbagai platform komputer manapun. Sifat dari bahasa HTML ini adalah client script dimana dokumen tersebut dapat dibuka di dalam komputer stand alone yang tidak membutuhkan server untuk dapat menampilkannya di dalam browser. Dokumen HTML merupakan file yang pada umumnya ber-esktensi .htm atau .html dimana bahasa HTML tersebut tersusun atas tag yang berformat <isi tag>. Sebagaimana diketahui, dokumen HTML (HyperText Markup Language) merupakan dasar terbentuknya aplikasi berbasis web. Pada dasarnya HTML bukanlah sebuah bahasa pemrograman, akan tetapi merupakan semacam bahasa pengkodean. Hal ini disebabkan karena HTML tidak memerlukan kompiler khusus sebagaimana bahasa pemrograman sebenarnya (PHP, ASP, JSP, dan lainnya). Meskipun bukan merupakan bahasa pemrograman, bukan berarti kita bisa sembarang membuat dokumen HTML. Pembuatan dokumen HTML didasarkan pada aturan-aturan tertentu yang telah disepakati bersama. Oleh sebab itu, ketika Anda lupa sedikit saja dalam membuka atau menutup tag dari elemen, maka bisa berakibat fatal. Mungkin tidak terlalu menjadi masalah ketika kesalahan hanya pada tag biasa semacam paragraf (<P>), akan tetapi bayangkan jika salah menutup tag
Modul
Desain Web
table data (<TD>) atau table row (<TR>), dijamin pasti halaman web anda akan berantakan. Adapun aturan penulisan HTML tersebut adalah : a. Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku (angle bracket) < dan >. b. Tag HTML secara normal selalu berpasangan, contoh : <div> dan </div> c. Tag HTML pertama dalam suatu pasangan adalah tag awal, dan tag kedua merupakan tag akhir, contoh : <index> akan diakhiri dengan </index>. d. Tag HTML tidak case sensitive dimana tag dengan huruf kecil sama dengan tag dengan huruf besar, contoh : <b> sama dengan <B> e. Jika dalam suatu tag terdapat tag lagi, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Contoh : <b><i> huruf tebal dan miring </i></b> f. Penulisan script HTML selalu diawali dengan <html> dan diakhiri dengan </html>
Secara teknis web browser akan melakukan penerjemahan dokumen untuk ditampilkan dalam bentuk html jika dokumen tersebut terdapat diantara tag utama yaitu <html> dan </html>. Ada baiknya dalam penulisan HTML menggunakan huruf kecil untuk menghadapi HTML generasi berikutnya (rekomendasi dari W3C untuk HTML 4.0 dan XHTML). Dalam HTML, struktur dibagi menjadi dua bagian yaitu : a. Bagian Kepala (head) Bagian ini memuat informasi mengenai kepala dokumen b. Bagian Badan (body) Bagian ini memuat informasi mengenai badan dokumen.
Modul
Desain Web
Adapun struktur utama penulisan dalam HTML adalah : <html> <head> <!- Bagian Head --!> </head> <body> <!- Bagian Body --!> </body> </html>
Sedangkan pembuatan dokumen web menggunakan HTML pun sangat mudah karena anda dapat membuatnya menggunakan program editor standar Windows seperti Notepad dan menuliskan bahasa dan aturan HTML dan kemudian menyimpannya dalam ekstensi .htm atau .html. Untuk menggunakan program notepad dapat dipilih lewat menu Start Program Files Accessories Notepad. Kemudian ketikkan kode html anda seperti contoh berikut :
Gambar 1.1. Script html dalam program notepad Kemudian simpan dengan memilih menu File Save As, dan simpan dengan ekstensi .htm atau .html
Gambar 1.2. Menyimpan dokumen dengan ekstensi .html
Modul
Desain Web
Setelah itu tampilan hasil dokumen html dari script yang telah dibuat tersebut dapat anda lihat menggunakan web browser seperti Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera dan sejenisnya.
Gambar 1.3. Dokumen html dilihat dalam web browser Internet Explorer
2.
DOKUMEN HEAD
Dalam bagian head ini kita dapat meletakkan beberapa tag diantara <head> dan </head> yaitu : a. Judul Merupakan tag yang mendeklarasikan judul dari suatu dokumen HTML. Struktur tag untuk judul ini adalah : <title>...judul...</title> b. URL Merupakan tag yang menyatakan URL asal suatu dokumen HTML. Struktur tag untuk url asal adalah : <base href=...> c. Link Merupakan tag untuk menghubungkan antara suatu dokumen dengan dokumen lainnya dalam website yang dibuat. Struktur tag untuk menghubungkan dokumen adalah :
Modul
Desain Web
<link href=...> d. Meta
Merupakan tag yang menyatakan suatu meta informasi dalam suatu dokumen HTML. Struktur tag untuk meta informasi adalah : <meta name=... content=...> e. Index Merupakan tag yang menyatakan bahwa dokumen tersebut
diperkenankan di indeks oleh server web. Struktur tag untuk isi index adalah : <isindex> f. Style Merupakan tag yang mendefinisikan style dari dokumen HTML. Struktur tag untuk mendefinisikan style adalah : <style ahref=...> Contoh penggunaan dalam HTML : <html> <head> <title>Belajar HTML</title> <link href="global.css" rel="stylesheet" type="text/css"> </head> <body> ... dokumen html ... </body> </html> 3.
ATRIBUT BODY
Bagian body dalam HTML adalah bagian dimana dokumen web akan terlihat dalam browser. Dalam bagian ini dapat berisi atribut-atribut, aturan dan isi dari dokumen web yang akan ditampilkan. Penulisan atribut body ini biasanya dituliskan sesudah tag <body dan sebelum > maupun sesudah
Modul
Desain Web
tag <body> dan sebelum tag </body>. Dalam bagian body tersebut terdapat beberapa atribut yang bisa digunakan. Beberapa atribut tersebut adalah : a. Warna Latar Atribut tag untuk mendefinisikan warna latar untuk isi di dalam dokumen web dengan menuliskan bgcolor=nilai warna. Contoh : <body bgcolor=lime> b. Warna Teks Atribut tag untuk mendefinisikan warna teks untuk isi di dalam dokumen web dengan menuliskan text=nilai warna. Contoh : <body text=green> c. Warna Link Jika anda memiliki sebuah tombol untuk menghubungkan (link / hyperlink) dalam dokumen web yang anda buat dengan dokumen web lainnya, anda dapat mendefinisikan warna dari tombol link tersebut ketika kita klik dengan menggunakan tag <link=nilai warna1 alink=nilai warna2> contoh : <body link=green alink=grey>
Contoh penerapan dalam dokumen html : <html> <head> <title>Dokumen Body</title> </head> <body bgcolor="lime" text="green" link="white" alink="grey"> Teks berwarna lime<br>
<a href=#>tombol1</a> <a href=#>tombol2</a> </body> </html>
Modul
Desain Web
Dalam browser script diatas akan terlihat dua tombol yaitu tombol1 dan tombol2 dan ketika kita klik tombol tersebut maka akan berubah menjadi warna hijau seperti terlihat pada gambar berikut :
Gambar 1.4. Tampilan script dalam browser
4.
FORMAT TEKS
Dalam dokumen HTML, teks mempunyai bentuk dalam pemformatan dalam dokumen tersebut. Berikut ini adalah beberapa tag beserta fungsinya untuk melakukan pengaturan dan format tampilan teks dalam dokumen HTML. a. Font Dalam setting format teks, tag font disini memiliki beberapa macam nilai, diantaranya adalah : face atau jenis font size atau ukuran font color atau warna font style atau style font
Contoh penulisan syntaknya adalah : <font face=verdana size=4 px color=green style="background-color:#0066CC"> teks dokumen </font>
Modul
Desain Web
b. Paragraf
Digunakan untuk membuat teks dokumen yang berbentuk paragraf. Syntaknya adalah : <p>teks dalam paragraf</p> Perataan Digunakan untuk mengatur perataan teks dalam sebuah paragraph dalam dokumen web yang dibuat, syntaknya adalah : <align=...>teks Nilai dari perataan adalah : Rata kanan = right Rata kiri = left Rata tengah = center Rata kanan-kiri = justify
c. Preformatted Text Digunakan untuk mengembalikan format teks ke posisi awal atau posisi default pertama kali sebelum diformat. Syntaks penulisan preformatted teks adalah : <pre>...</pre> d. Line break Line break adalah pemenggalan atau pemutusan kalimat dengan menggunakan garis dengan perintah <hr>. Adapun property <hr> adalah align untuk perataan garis, size untuk ukuran dari garis, dan color untuk warna garis seperti pada contoh berikut : <hr align=..." size="..." color="...>
Dalam pemenggalan kalimat dalam dokumen web selain menggunakan garis horizontal, anda dapat juga menggunakan tag <br> untuk pemenggalan baris dalam sebuah kalimat. Biasanya tag ini digunakan pada kalimat dalam paragraf. <p> kalimat satu<br>kalimat dua<br></p>
Modul
Desain Web
e. Komentar
Anda dapat memberikan komentar dalam dokumen web yang tidak akan ditampilkan dalam browser menggunakan perintah : <!-- Komentar --!> f. Format Heading Heading dalam HTML sama seperti dalam Ms. Word yaitu format ukuran huruf dalam dokumen HTML. Syntak penulisannya adalah <H1> Teks Heading </H1> Teks yang dihasilkan ketika menggunakan script ini adalah ukuran teks menurut level heading yaitu dari level heading 1 <H1> sampai dengan level heading 6 atau <H6>. Contoh penerapan dalam HTML : <html> <head> <title>budhi web blog system</title> </head> <body> <H1> format teks </H1> <font face=verdana size=4 px color=green style="background-color:#0066CC"> format teks</font> <p align="right">format teks</p> <hr align="center" size="2" color="red"> <p align="left"> format teks1<br>format teks2<br></p> <!-- format teks --!> </body> </html>
10
Modul
Desain Web
Tampilan dalam browser akan terlihat :
Gambar 1.5. Tampilan format font dalam browser
5.
DAFTAR
Penggunaan daftar dalam HTML biasanya digunakan untuk menampilkan informasi-informasi dalam bentuk option. a. Membuat daftar tdk berurut Syntak : <UL>...</UL> : Untuk membuat daftar tak berurutan <LI>...</LI> : Isi daftar pilihan b. Membuat daftar berurut Syntak : <OL>...</OL> : Untuk membuat daftar berurut <LI>...</LI> : Isi daftar pilihan
Dapat juga anda merubah type daftar menggunakan <ol type=awalan> seperti contoh berikut : <html>
11
Modul
Desain Web
<head><title>penggunaan daftar</title> <body> Daftar belanjaan : <ul> <li>bawang putih <li>bawang merah <li>cabe </ul> Yang tidak dibeli : <ol type=a> <li>kecambah <li>daging kuda <li>daging semut </body> </html>
Gambar 1.6. Tampilan penggunaan daftar dalam browser
12
Modul
Desain Web
g. GAMBAR Gambar atau image dalam halaman Web memegang fungsi yang sangat penting. Selain fungsinya untuk informasi gambar, image juga akan menambahkan unsur artistik yang akan membuat halaman web nampak lebih hidup sehingga akan lebih menarik dari sisi tampilan web yang dibuat. Sintaks penulisannya adalah : <img src="Lokasi gambar"> Sedangkan atribut untuk gambar tersebut berupa : src alt width : letak atau alamat gambar : alternatif atau alternate gambar : lebar gambar
height : tinggi gambar Contoh: <img src=C:/Documents and Settings/AllUsers/ Documents/My Pictures/Sample Pictures/sunset.jpg> h. HYPERLINK Hyperlink atau link dalam HTML berfungsi untuk menghubungkan antara halaman web atau dokumen satu dengan lainnya agar saling terhubung. Syntak dasar penulisannya adalah : <a href=Target link> Teks yang dijadikan link </A> Link dalam HTML dibagi menjadi dua yaitu : a. Link ke halaman lain Syntak : <a href=alamatfile/nama.ekstensi> Hyperlink ke halaman </a> Contoh : <a href=c:/web/profil.html>Profil Perusahaan</a>
13
Modul
Desain Web
b. Link ke servis internet lain HTTP : <a href=http://alamathttp/nama.ekstensi> Hyperlink ke http </a> FTP : <a href=ftp://alamatftp/nama.ekstensi> Hyperlink ke ftp </a> Mailto : <a href=mailto:alamat_e-mail> Hyperlink ke email </a>
i. WARNA Warna dalam html dapat ditentukan dengan tiga cara, yaitu dengan memasukkan nilai warna dalam nama (common name), hexadecimal, dan nilai RGB. a. Nilai warna Common name Anda dapat menentukan warna dengan menggunakan nilai warna common name, yaitu dengan memasukkan warna yang diinginkan dan biasanya menggunakan nilai warna dalam bahasa inggris seperti contoh : color:blue bgcolor:lime b. Nilai warna Hexadecimal Dengan nilai warna hexadecimal anda dapat menentukan warna dengan menggunakan nilai warna dalam bentuk hexadecimal yang sama dengan yang digunakan jika kita menggunakan html sebagai contoh : color:#00ffff bgcolor:#00ccff c. Nilai warna RGB Dengan menggunakan nilai warna RGB anda dapat menentukan warna dengan menggunakan nilai RGB dengan memasukkan nilai dari warna werah hijau dan biru (Red, Green, Blue) seperti contoh sebagai berikut : color:rgb(255,255,204)
14
Modul
Desain Web
j. T A B L E Tabel merupakan elemen yang terdiri dari sel dan tersusun atas baris dan kolom. Digunakan untuk membuat bentuk tabel yang berisi kolom dan baris, Syntaknya : <table>atribut table</table> Atribut table adalah : <tr>...</tr> <td>...</td> : membentuk baris tabel : membentuk kolom table
Table juga memiliki atribut untuk pengaturannya yaitu : width height border cellspacing cellpadding align bgcolor : lebar table : tinggi table : tebal garis table : spasi antar sel : spasi dalam sel : perataan teks dalam sel : warna background table
Di antaranya tag tersebut dimasukkan perintah pembuatan baris dan kolom. Pembuatan baris, selalu mendahului pembuatan kolom seperti terlihat dalam contoh berikut : <html> <head><title>membuat table</title></head> <body> <table width=300 height=100 border=1 bgcolor=grey> <tr> <td width=100>kolom1 baris 1</td> <td>kolom2 baris 1</td> </tr> <tr height=80> <td>kolom1 baris 2</td>
15
Modul
Desain Web
<td>kolom2 baris 2</td> </tr> </table> </body> </html>
Gambar 1.7. Tampilan script table dalam browser
11. Form Form dalam HTML dapat digunakan untuk mengirim data melewati web dan kadang juga digunakan sebagai contact form untuk konversi informasi yang di input-kan oleh user ke dalam e-mail. Dalam penggunaan dalam dokumen web, form harus di kaitkan dengan script program yang akan memproses data yang di inputkan oleh user ke dalam form tersebut. Tag-tag yang digunakan dalam membuat form dengan HTML berupa : form, input, textarea, select dan option. Dalam HTML form dalam penulisannya dengan HTML membutuhkan atribut action yang akan menentukan kemana isi dari form yang akan di kirim nantinya. Atribut method akan menentukan tentang bagaimana data dalam
16
Modul
Desain Web
form tersebut di kirim yang memiliki nilai get (nilai default) atau post dimana nilai-nilai tersebut adalah nilai yang paling banyak dipakai. Jadi sebuah elemen form akan terlihat seperti contoh berikut : <form action="processingscript.ekstensi" method="post"> </form> Tag input adalah inti dari sebuah form, dimana tag input dapat memiliki sepuluh form dan harus ditutup dengan tanda miring / seperti contoh : <input type="text" /> adalah textbox standar. Dapat memiliki
sebuah atribut value, yang mengatur teks dalam textbox. <input type="password" /> sama dengan textbox, namun
menampilan tanda bintang yang menggantikan karakter yang diketikkan. <input type="checkbox" /> adalah bentuk checkbox, yang dapat di tampilkan dan tidak oleh user. Tag ini memiliki sebuah atribut checked, yang digunakan dalam format <input type="checkbox" checked="checked" />. <input type="radio" /> hampir sama dengan checkbox, namun user hanya dapat memilih sebuah radio button dalam kelompok tersebut. Tag ini juga memiliki atribut checked, yang digunakan sama dengan checkbox. <input type="file" /> adalah suatu daerah yang menampilkan filefile dalam komputer seperti ketika anda membuka atau menyimpan dokumen dalam program. <input type="submit" /> biasanya berada pada sebuah tombol dimana ketika dipilih maka akan mengirim (submit) form tersebut. Anda dapat mengontrol penampakan text dalam tombol submit (sama seperti dalam tipe button dan reset) dengan atribut value, seperti contoh : <input type="submit" value="ini adalah nilai tombol"/>. <input type="image" /> adalah sebuah gambar (image) dimana ketika dipilih maka akan mengirimkan form. Tag ini juga membutuhkan atribut src, seperti tag img.
17
Modul
Desain Web
<input type="button" /> adalah sebuah tombol (button) yang tidak akan melakukan apapun tanpa penambahan kode ekstra lagi.
<input type="reset" /> adalah sebuah tombol dimana ketika dipilih maka akan mengulang kembali (reset) field dalam form.
<input type="hidden" /> adalah sebuah field yang tidak akan terlihat dan digunakan untuk melewatkan informasi seperti nama alamat email pada form yang akan dikirimkan.
Sebuah textarea biasanya berupa textbox yang luas yang membutuhkan atribut baris (rows) dan kolom (cols) seperti pada contoh berikut : <textarea rows="5" cols="20">teks</textarea> Tag select bekerja dengan tag option dalam pembuatan sebuah drop-down select boxes. Seperti pada contoh berikut : <select> <option value="opsi pertama">Option 1</option> <option value="opsi kedua">Option 2</option> <option value="opsi ketiga">Option 3</option> </select> Ketika form dikirimkan, nilai dari opsi yang terpilih juga akan dikirimkan. Hampir sama dengan atribut checked dari checkbox dan radio button, sebuah tag option juga dapat memiliki atribut selected yang akan digunakan dalam format : <option value="hewan" selected="selected">kucing</option> Keseluruhan tag yang disebutkan diatas akan terlihat bagus dalam halaman web, namun jika anda mengaitkan form anda dalam sebuah program form maka perintah yang ada di dalamnya akan diabaikan. Hal ini disebabkan karena filed form tersebut memerlukan sebuah nama (name). Jadi atribut name harus ditambahkan dalam field seperti pada contoh berikut : <input type="text" name="teks komentar" /> Dalam contoh berikut, form akan bekerja jika terdapat file 'koneksi.php' yang ditetapkan dalam atribut action dalam tag form untuk menangani file dalam form yang dikirimkan)
18
Modul
Desain Web
<html><head> <title>belajar form</title> </head> <body>
<form action="koneksi.php" method="post"> <p>Nama:</p> <p><input type="text" name="nama" value="nama anda" /></p> <p>Komentar: </p> <p><textarea name="komentar" rows="5" cols="20">Komentar Anda</textarea></p> <p>data:</p> <p><input type="radio" name="data" value="Laki-laki" /> laki</p> <p><input type="radio" name="data" value="Perempuan" /> perempuan</p> <p><input type="submit" value="kirim" /></p> <p><input type="reset" value="ulangi"/></p> </form> </body> </html>
19
Modul
Desain Web
Tampilan dalam browser akan terlihat seperti gambar berikut :
Gambar 1.8. Gambar tampilan form dalam browser
20
Modul
Desain Web
BAB 2 MACROMEDIA DREAMWEAVER
1.
PENDAHULUAN
Sebelum ini anda telah diperkenalkan dengan elemen-elemen HTML, atribut-atributnya, dan struktur dokumen HTML. Kabar baiknya adalah bahwa anda tidak perlu mengetikkan semua kode HTML tersebut melalui keyboard dalam Notepad. Dengan menggunakan aplikasi visual HTML editor seperti Macromedia Dreamweaver akan membuat pekerjaan Anda dalam membuat halaman web HTML semakin mudah. Macromedia Dreamweaver MX adalah sebuah tools desain web yang penuh dengan fasilitas. Baik designer pemula maupun designer profesional akan dapat menyesuaikan diri dan mengambil manfaat dari Dreamweaver. Anda dapat menggunakan Dreamweaver untuk membuat desain website secara visual dengan Layout view, atau mengetikkan kode HTML pada Code view. Cara apapun yang Anda suka, Anda akan mendapati bahwa Macromedia Dreamweaver MX akan mempermudah Anda membuat dan mengatur situs Anda. Untuk menjalankan program Dreamweaver dapat dipilih dari menu Start Programs Macromedia - Macromedia Dreamweaver MX.
2.
DASAR-DASAR DREAMWEAVER
Ketika Anda memulai Dreamweaver, Anda akan mendapati Document window serta beberapa panel untuk menambahkan atau mengubah text dan objects di halaman tersebut. Object panel digunakan untuk menambahkan obyek seperti gambar, tabel, layer, atau animasi Flash ke dalam halaman tersebut. 21
Modul
Desain Web
Semua panel dan Property inspector dalam Dreamweaver dapat diakses dari Window menu. Check mark di samping nama panel pada Window menu menunjukkan panel yang terbuka, apabila tidak terlihat, karena mungkin tertumpuk panel yang lain, pilih lagi panel tersebut di Window menu. Apabila masih belum terlihat, pilih Window > Arrange Panels untuk mengembalikan posisi setiap panel ke posisi default nya.
Gambar Document View a. Objects Panel Objects Panel mamuat object dan elemen yang dapat Anda tambahkan ke dalam halaman Anda. Diantaranya, gambar, tabel, karakter khusus, form, dan frames. Untuk memasukkan object Anda dapat menentukan insertion point, kemudian klik salah satu Icon pada Objects Panel, atau, drag Icon dari Objects Panel ke lokasi di mana Anda ingin memasukkannya. Objects panel sebenarnya memiliki beberapa sub panel. Contohnya, untuk membuat form, object yang Anda butuhkan terdapat di Form Object Panel. Untuk
22
Modul
Desain Web
memilihnya gunakan popup menu di atas Object panel (defaultnya adalah Common Objects Panel).
Gambar 2.1. Objects Panel b. Property Inspector Dengan Property inspector Anda dapat melihat dan mengubah atribut dari suatu object. Isi Property inspector berubah sesuai dengan apa yang Anda select di Document window. Apabila ada property yang belum nampak, klik expander arrow di sudut kanan bawah Property inspector.
Gambar 2.2. Property Inspector
3.
MEMBANGUN WEB MENGGUNAKAN DREAMWEAVER

Langkah pertama dan paling umum dilakukan namun juga terkadang sering kali dilewatkan oleh seorang desainer web dalam membuat sebuah halaman web adalah dengan membuat sketsa desain web itu sendiri. Buatlah sketsa desain manual dari halaman web yang akan dibuat tersebut dengan menggunakan kertas dan pensil secara mendetail untuk tiap halaman web yang nantinya akan dibuat. Guna dari desain secara manual ini adalah untuk menentukan secara pasti layout dan elemen dari web agar tidak jauh melenceng dan sesuai dengan hasilnya nanti. Tentukan berapa ukuran dari tiap bagian dalam halaman web tersebut hingga ke ukuran pixel bila perlu. Tips untuk membuat desain web ini adalah dengan membuat layout web sesuai dengan resolusi horizontal minimal tiap monitor saat ini yaitu sebesar 800 pixel dikurangi sisi kanan browser. Inti dari setting layout ini adalah agar tampilan dalam browser nantinya dapat dilihat secara baik dengan resolusi
23
Modul
Desain Web
user yang menggunakan resolusi monitor minimal. Ingatlah bahwa spesifikasi tampilan halaman web yang kita buat tidak selalu sama dengan yang digunakan user. Setelah sketsa desain halaman web selesai dibuat, kini saatnya kita mengaplikasikan sketsa desain tersebut kedalam bentuk html menggunakan Macromedia Dreamwever. Bukalah Macromedia Dreamwever Setelah aplikasi terbuka maka langkah pertama dan tidak boleh kita lewatkan adalah manajemen tiap elemen situs web tersebut di dalam komputer kita. Guna dari langkah ini adalah agar tiap elemen dari halaman web yang dibuat dapat seluruhnya disimpan secara otomatis dalam alamat yang kita tentukan walau elemen tersebut berada pada alamat yang berbeda dengan alamat tempat kita menyimpan file halaman web kita. Kita dapat membuatnya dengan memilih menu Site > New Site dan mengaturnya dalam dialog box site definition.
Gambar 2. 3. Mengatur file menggunakan menu new site
Setelah memilih new site maka kita akan dihadapkan pada dua menu yang dapat kita pilih dalam site definition tersebut, yaitu bentuk dasar atau Basic dan bentuk mahir atau Advanced.
24
Modul
Desain Web
Gambar 2.4. Site definition dialog box Jika anda menggunakan menu Basic, maka dalam tampilan akan terlihat dua kolom. Masukkan nama untuk situs anda dalam web anda dalam kolom kedua lalu pilih
kolom atas dan letak URL tombol next.
Gambar 2.5. Tampilan site definition dalam menu Basic
25
Modul
Desain Web
Dalam tampilan berikutnya anda akan ditanya apakah akan bekerja menggunakan teknologi server seperti ColFusion, ASP.Net, ASP, JSP, atau PHP. Jika anda memilih untuk menggunakan teknologi server, maka Dreamweaver akan menanyakan salah satu diantara yang anda gunakan dalam drop down menu dibawahnya kemudian pilihlah tombol Next.
Gambar 2.6. Tampilan untuk memilih teknologi server Pada tampilan berikutnya Dreamweaver akan menanyakan
bagaimana anda akan bekerja dengan file-file anda nantinya, apakah akan mengedit file dan mengujinya dalam komputer anda secara lokal, mengedit secara lokal dan meng-upload ke dalam remote testing server, atau mengedit langsung dalam remote testing server menggunakan jaringan lokal. Pilihlah sesuai dengan yang anda inginkan, kemudian dalam kolom kedua anda akan ditanyakan dimana letak file-file yang dibuat tersebut akan disimpan nantinya. Setelah selesai kemudian pilih tombol next untuk melanjutkan.
Gambar 2.7. Mengatur cara kerja dan pengalamatan file
26
Modul
Desain Web
Setelah selesai, berikutnya Dreamweaver

akan menanyakan
bagaimana Dreamweaver akan berhubungan dengan halaman web yang dibuat tersebut guna mengujikan hasil . Isikan sesuai dengan pilihan anda kemudian lanjutkan dengan memilih Next.
Gambar 2.8. Tampilan setting testing file dalam Dreamweaver Setelah semua setting dilakukan maka akan terlihat tampilan konfirmasi hasil / summary dari setting yang telah kita lakukan tadi. MENDESAIN WEB Hal-hal yang perlu diperhatikan untuk membuat desain web yaitu : 1. Mendesain situs web dengan menjaga dan memperhatikan semua elemen terutama yang menjadi brand maupun standarisasi
perusahaan. 2. Mengoptimasikan grafik sehingga waktu loading semakin cepat 3. Mengubah grafik menjadi HTML, sehingga dapat di upload ke internet
4.
MENYIMPAN FILE ANDA

Anda sebaiknya langsung menyimpan (save) file anda segera setelah anda membuat file HTML baru pada Dreamweaver. Jangan menunggu hingga halaman tersebut terisi text dan obyek grafis. Dengan demikian ketika anda memasukkan obyek grafis, semua referensi (termasuk path) akan terbentuk dengan benar. Penamaan File HTML Sebaiknya Anda mengetahui Sistem operasi pada web server yang akan Anda gunakan karena kemungkinannya penamaan file yang digunakan
27
Modul
Desain Web
berbeda-beda. Web server UNIX akan memerlukan nama yang casesensitive sehingga FILE.html akan berbeda dengan file.html. Sementara web server berbasis Windows tidak. Dengan demikian, cara yang paling aman, terlebih jika Anda tidak mengetahui dengan pasti jenis system operasi yang ada pada web server adalah, gunakan huruf kecil, nama file pendek, jangan gunakan spasi, gunakan underscore atau dash untuk mensimulasikan spasi (contoh: jajak_pendapat.html)
5.
MEMBUAT HALAMAN WEB DENGAN DREAMWEAVER

Dalam modul ini, Anda akan membuat halaman web sederhana dan mempelajari cara-cara untuk memformat text. Berikut ini adalah garis besar praktek pembuatan halaman web sederhana tersebut. a. Membuat Layout a) Klik panel Layout Layout View Draw Layout Table untuk membuat Layout Tabel. b) Klik Draw Layout Cell untuk membuat Layout Cell dalam Layout Table. c) Buatlah beberapa Layout Cell untuk membagi Layout Table menyerupai website yang kita inginkan. d) Klik kembali Standard View Panel Common e) Setting ukuran layout table dan layout cell serta beri warna background ke warna yang kita inginkan dalam Property Inspector. b. Memberi Title atau Judul Setiap halaman web seharusnya memiliki Title atau judul yang digunakan untuk identifikasi, title ditampilkan di title bar browser dan nama bookmark. Pilih frase pendek yang mencerminkan isi halaman web. Biasakan untuk langsung memberi title pada halaman baru Anda, jika Anda lupa Dreamweaver memiliki default Untitled Documentyang tidak akan pernah Anda inginkan untuk menjadi title halaman web Anda.
28
Modul
Desain Web
Untuk menambahkan title dalam Dreamweaver adalah dengan mengganti Untitled Document menjadi Title yang anda inginkan. c. Memilih warna background, font dan link Dalam Dreamweaver, mengubah warna background, font dan link dapat dilakukan dengan mudah, cukup memilih dari Web-safe color pallete yang telah tersedia pada Page Properties.
d. Mengubah Page Properties a) Pilih Modify > Page Properties. b) Dialog box Page Properties akan muncul seperti pada gambar dibawah
Gambar 2.9. Dialog Box Page Properties c) Klik kotak Background Color. Sebuah palet warna muncul. d) Gerakkan eyedropper di atas warna, nilai heksadesimal equivalen dari warna tersebut akan tertera di bagian atas palet warna. e) Klik warna #00FF00 atau ketikkan pada text box Background. Anda tidak perlu menambahkan tanda # di awal warna. f) Klik Apply untuk melihat perubahan dokumen Anda. g) Lakukan perubahan untuk Text menjadi warna #00CCFF h) Lakukan perubahan untuk Links menjadi warna #0099FF i) Lakukan perubahan untuk Visited Links menjadi warna #CC3333 dan active links
29
Modul
Desain Web
j) Klik Apply untuk melihat perubahan dokumen Anda.
e. Memasukkan text dalam page Anda dapat melakukan drag and drop atau copy-paste dari aplikasi lain, misalnya notepad, untuk memasukkan text misalnya memasukkan file text dari MS Word. Setting dan format text yang anda buat dapat anda lakukan dari dalam Property Inspector.
Gambar 2.10. Property Inspector Text f. Membuat Link Link berguna untuk menghubungkan sebuah dokumen yang kita inginkan dengan dokumen lain dalam website yang kita buat. Link dalam Dreamweaver dapat dibuat melalui kolom Link dalam Property Inspector. Anda dapat menuliskan alamat/nama file.ekstensi dalam kolom tersebut, atau dapat memilih tombol Browse dan diarahkan ke alamat file yang anda tuju.
Gambar 2.11. Property Inspector Link
30
Modul
Desain Web

BAB 3 BEKERJA DENGAN ELEMEN GRAFIS
Saat ini semua browser mendukung format grafis GIF dan JPEG/JPG. Secara garis besar, gunakan GIF jika grafik Anda memiliki blok warna yang cukup besar dan tanpa gradasi, dan gunakan JPEG untuk foto atau grafik dengan gradasi dan perubahan tone yang mencolok. GIF tersimpan dengan format warna 8-bit, hanya 256 warna tersimpan (bahkan untuk Web hanya 216 warna yang dipakai, membuat masalah semakin rumit). JPEG menyimpan dalam format 24-bit, jauh lebih banyak warna disbanding format ekstensi GIF. Namun terdapat sedikit kelemahan dan kelebihan lain dalam kedua file tersebut, yang paling terlihat yaitu format file GIF dapat digunakan untuk menyimpan gambar bergerak atau animasi sedangkan file JPEG tidak dapat. File JPEG memiliki resolusi warna yang lebih bagus dibandingkan file GIF dan masih banyak lainnya.
Kegunaan dan cara menambahkan Image

Image yang telah disiapkan dapat kita gunakan untuk berbagai keperluan, sebagai background, sebagai informasi visual, juga sebagai link ke suatu halaman lain. Ada dua teknik penggunaan image untuk keperluan website yaitu : Dalam hal ini kita akan membuat sebuah image yang akan kita jadikan sebagai pemanis website kita. Pertama-tama kita gunakan software image editor seperti Macromedia Firework atau Adobe Photoshop untuk mendesain image yang akan digunakan dalam website kita.
Adobe Photoshop
Membuka Gambar Baru Untuk membuka gambar baru di dalam Photoshop, ikuti langkah berikut : 1. Klik menu File > New. Kotak dialog New akan tampil. 2. Ketikan nama file gambar yang anda enginkan pada kotak isian Name. 31
Modul
Desain Web
3. Pilih satuan ukuran yang Anda inginkan dari tombol daftar pilihan Width dan Height (ada baiknya jika meggunakan ukuran pixel/px) 4. Masukan ukuran Width (lebar) dan Height (tinggi) gambar yang Anda inginkan (ukuran ini harus sesuai dengan yang anda gunakan dalam website anda. Contoh : Width=775px Height=100px). 5. Masukan nilai resolusi untuk hasil cetakan gambar pada kotak isian Resolution ( Contoh: 72 pixel/inch) 6. Pilih modus gambar yang Anda inginkan dari tombol daftar pilihan Mode (Contoh: RBG mode) 7. Pada kelompok Contents pilih salah satu jnis content yang Anda inginkan, misalnya White, Background Color, atau Transparent (Contoh:
Transparent) 8. Klik OK Memasukkan Gambar 1. Untuk memasukkan gambar kedalam dokumen kita harus membuka terlebih dahulu file gambar yang kita inginkan dengan memilih lewat menu File Open. 2. Setelah gambar terbuka kemudian pilih Tool Move Tool dari Toolbox lalu drag gambar ke dalam dokumen yang kita buat tadi. 3. Jika objek terlihat terlalu besar atau kecil, anda dapat memilih menu Edit Free Transform (Ctrl+T) untuk transformasi image menjadi seperti yang kita inginkan. 4. Setelah itu berikan efek-efek secukupnya dari Blending Option agar gambar menjadi lebih menarik. Membuat Teks dengan Type tool Untuk membuat teks caranya sangat mudah. Anda cukup memilih Type tool pada toolbox, lalu klik di area kanvas kemudian ketik teks yang Anda inginkan. Contoh :
32
Modul
Desain Web
1. Klik Type tool pada toolbox atau tekan T kemudian klik pada area kanvas. Setelah itu perhatikan layer baru secara otomatis akan tampil dengan menampilkan huruf atau icon T pada pallete Layers. 2. Mulai ketik teks yang diinginkan. 3. Apabila anda ingin mengatur atau memindahkan posisi teks pada area kanvas klik Move tool, setelah itu pilih teks kemudian drag ke posisi lain atau di tengah-tengah area kanvas. Untuk memodifikasi format teks seperti mengubah jenis font, ukuran dan type style, pilih Type tool lalu lakukan klik dan drag mulai dari huruf awal hingga akhir untuk menyorot teks yang anda inginkan kemudian setting jenis font, ukuran, style dari menu character. 4. Anda dapat pula memberikan efek-efek lewat Blending Option atau efekefek lain dari menu Filter.
Gambar 3.1. Contoh banner hasil dari Photoshop
Menyimpan File Gambar Untuk menyimpan gambar ke ekstensi gambar, ikutilah langkah berikut : 1. Klik menu File>Save As. Kotak dialog Save As akan tampil. 2. Ketikan nama gambar yang Anda inginkan pada kotak isian File Name 3. Pilih lokasi penyimpanan gambar melalui tombol daftar pilihan Save in lalu pilih drive atau folder yang Anda inginkan. 4. Pilih format yang Anda inginkan seperti TIFF, JPEG, PICT, EPS, format Photoshop yaitu PSD dan PDD, dan masih banyak lagi yang laen pada kotak daftar pilihan Format. Setelah itu klik Save.
Setelah kita membuat sebuah image dari Adobe Photoshop, kini saatnya kita memasukkan ke dalam website yang kita buat.
33
Modul
Desain Web
Masuk kembali dalam Dreamweaver dan pilih tombol Image dalam panel Common untuk memasukkan image ke dalam website yang kita buat. Jika anda membuat sebuah image berbentuk html dalam Macromedia Fireworks anda dapat memasukkan dengan menggunakan tombol Fireworks html. Jika anda membuat sebuah animasi dalam Macromedia Flash anda dapat memasukkan dengan menggunakan tombol Flash. Seluruh tombol tersebut berada dalam panel Common dalam Macromedia Dreamweaver.
Demikian tadi adalah cara membuat sebuah banner di dalam adobe photoshop, adapun jika kita ingin membuat sebuah website yang utuh di dalam Adobe Photoshop kemudian kita ubah menjadi ekstensi html kita juga dapat melakukannya dengan perintah File Save for Web. Namun jika anda melakukan cara ini maka anda haruslah membuat semua desain untuk website tersebut di dalam Adobe Photoshop. Contoh dari website yang dibuat keseluruhan dengan menggunakan Adobe Photoshop adalah sebagai berikut
34
Modul
Desain Web
Ketika anda membuat desain web dengan cara ini maka anda haruslah membuat semua desain tersebut di dalam Adobe Photoshop. Petunjuk membuatnya adalah buatlah tiap elemen di layer yang berbeda. Setelah desain untuk website telah selesai, maka gabungkan semua layer dengan memilih Layer Flattern Image. Kemudian potong-potonglah bagian yang dibutuhkan dan yang tidak menjadi potongan yang teratur. Cara ini dibutuhkan jika nanti kita tidak membutuhkan bagian tertentu dari desain yang dibuat, kita dapat menggantinya dengan dokumen html yang berwarna sama plus bisa ditambah elemen lain seperti animasi dan teks (lebih ngirit space & waktu akses gituuu!).
Untuk menyimpan ke ekstensi html, ikuti langkah berikut :
35

Desain Web PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Desain Web PDF

Uploaded by

Copyright:

Available Formats

Modul

Budi Kurniawan S.Kom

In the name of Allah SWT, The Beneficient, The Merciful

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Gambar 1.2. Menyimpan dokumen dengan ekstensi .html

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

<a href=#>tombol1</a> <a href=#>tombol2</a> </body> </html>

Budi Kurniawan S.Kom

Gambar 1.4. Tampilan script dalam browser

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Gambar 1.5. Tampilan format font dalam browser

Budi Kurniawan S.Kom

Gambar 1.6. Tampilan penggunaan daftar dalam browser

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Gambar 1.7. Tampilan script table dalam browser

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Tampilan dalam browser akan terlihat seperti gambar berikut :

Gambar 1.8. Gambar tampilan form dalam browser

Budi Kurniawan S.Kom

BAB 2 MACROMEDIA DREAMWEAVER

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Gambar 2.2. Property Inspector

MEMBANGUN WEB MENGGUNAKAN DREAMWEAVER

Budi Kurniawan S.Kom

Gambar 2. 3. Mengatur file menggunakan menu new site

Budi Kurniawan S.Kom

kolom atas dan letak URL tombol next.

Gambar 2.5. Tampilan site definition dalam menu Basic

Budi Kurniawan S.Kom

Gambar 2.7. Mengatur cara kerja dan pengalamatan file

Budi Kurniawan S.Kom

MENYIMPAN FILE ANDA

Budi Kurniawan S.Kom

MEMBUAT HALAMAN WEB DENGAN DREAMWEAVER

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

j) Klik Apply untuk melihat perubahan dokumen Anda.

Gambar 2.11. Property Inspector Link

Budi Kurniawan S.Kom

Kegunaan dan cara menambahkan Image

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Gambar 3.1. Contoh banner hasil dari Photoshop

Budi Kurniawan S.Kom

Budi Kurniawan S.Kom

Untuk menyimpan ke ekstensi html, ikuti langkah berikut :

You might also like