tutorial website

PENGANTAR WEB DESAIN

Dalam dunia maya (internet) kita mengenal beberapa istilah tentang web, www, website, web pages, dan homepage. Bagi orang awan, istilah tersebut bisa saja diartikan sama.

Penjelasan tentang hal tersebut adalah :

WWW (Word Wide Web) : merupakan kumpulan web server dari seluruh dunia yang berfungsi menyediakan data dan informasi untuk digunakan bersama-sama.

Web adalah adalah fasilitas hypertext yang mampu menampilkan data berupa teks, gambar, suara, animasi, dan multimedia lainnya, di mana di antara data-data tersebut saling terkait dan berhubungan satu dengan yang lainnya. Untuk memudahkan dalam membaca data tersebut diperlukan sebuah web browser seperti Internet Explorer, Netscape, Opera, maupun Mozilla Firefox

Website (situs web) : merupakan tempat penyimpanan data dan informasi berdasarkan topik tertentu. Diibaratkan web site ini seperti buku yang berisi topik tertentu.

Web Pages (halaman web) : merupakan sebuah halaman khusus dari situs web tertentu. Diibaratkan halaman web ini seperti halaman khusus dari buku.

Homepage : merupakan sampul halaman yang berisi daftar isi atau menu dari sebuah situs web.

TIPS MENDESAIN WEB

Terdapat beberapa point penting ketika membuat sebuah website yang profesional.

1.     Homepage (halaman utama) situs Anda harus dapat diakses maksimal 8 detik atau dapat diakses melalui koneksi jaringan internet minimal 28,8 kbps. Apabila proses koneksi membutuhkan waktu yang sangat lama, hal ini akan berpotensi hilangnya customer (pengunjung) yang tidak “betah” menunggu terlalu lama. Akhirnya situs kita tidak akan dikunjungi olah para “calon customer”.

2.    Pastikan menyertakan META Tag pada masing-masing halaman website Anda. META Tag adalah kode yang memungkinkan search engine (mesin pencari seperti: Google) untuk menentukan kata kunci yang relevan dari website Anda.

3.     Pilihlah warna latar belakang (background) yang sesuai, jangan menggunakan warna yang mempengaruhi teks untuk dibaca. Warna situs menjadi sebuah ekspresi hati Anda. Warna orange melambangkan keceriaan sedangkan warna ungu atau hitam melambangkan kesuraman. Untuk itu pilihlah warna yang sesuai untuk situs Anda berdasarkan isi yang terkandung dalam situs tersebut.

4.     Gunakan animasi seperlunya, jangan terlalu berlebihan karena dapat mempengaruhi konsentrasi pengguna ketika sedang membaca informasi. Selain itu, animasi juga dapat menghambat akses ke halaman situs Anda. Sebuah animasi yang bagus bukan menjadi jaminan bahwa situs Anda menarik perhatian pengunjung.

5. Halaman Utama situs harus lebih spesifik agar para pengunjung dapat mengetahui produk yang ditawarkan. Sebagai contoh, jika situs Anda merupakan sebuah lembaga konsultasi maka sebaiknya jasa-jasa konsultasi yang ditawarkan ditampilkan di halaman utama. Jangan sampai pengunjung merasa bingung dengan keberadaan situs Anda yang tidak jelas produk yang ditawarkan.

6.   Hindari pemasangan iklan (banner) di bagian atas website Anda. Batasi jumlah banner yang akan ditayangkan, maksimal 2 dan idealnya cukup 1 banner. Semakin banyak jumlah banner, semakin lama proses akses dan akan sangat mengganggu konsentrasi pengguna ketika mengunjungi situs Anda.

7.   Periksa ejaan yang salah dan pastikan gambar dan link terhubung dengan baik sebelum ditampilkan secara on-line. Kesalahan dalam mengetikkan alamat url mengakibatkan halaman tersebut akan “ERROR”. Jika sebuah situs terdapat salah satu atau beberapa halaman yang error menjadikan situs tersebut nampak tidak profesional.

8.   Lengkapilah website Anda dengan tombol navigasi yang mudah dan tersusun dengan rapi pada bagian atas, bawah, kiri, maupun kanan. Jika menggunakan tombol dalam bentuk gambar, perlu diingat bahwa kemungkinan proses akses lebih lama. Mengapa? Karena gambar memiliki ukuran yang cukup besar, dan seperti kita ketahui. Sebuah halaman situs maksimal berukuran tidak lebih dari 100kb.

9.   Jika terpaksa harus menggunakan Frame, gunakan secara tepat. Pada dasarnya, penggunaan Frame dalam sebuah situs akan berkesan tidak profesional. Hindari halaman yang memerlukan “scroll”, ini mengakibatkan pengujung kurang nyaman untuk mencari informasi sehingga akan cepat-cepat “kabur” dari situs Anda.

10.Perhitungkan jumlah klik yang dibutuhkan untuk pindah dari halaman satu ke lainnya. Jika terlalu banyak klik akan sangat membosankan bagi pengunjung. Anda bisa menerapkan sistem navigasi yang lebih nyaman dengan menyertakan logo pada setiap halamannya.

11.  Jika menggunakan “JAVA” pada website Anda gunakan secara tepat. Tawarkan “Java” atau “No Java” kepada pengunjung karena dapat mempengaruhi kinerja masing-masing browser. Hindari adanya iklan “pop up” yang akan membuat pengunjung menjadi bosan.

12. Jangan menambahkan “autoplay” suara ketika seseorang mengunjungi situs Anda. Sebaiknya tawarkan, apakah menggunakan intro beserta audio (suara) ataukah langsung ke halaman utama. Periksa website Anda dengan beberapa jenis browser karena masing-masing browser memiliki kemampuan yang berbeda.

SOFTWARE PENGOLAH WEB

Untuk membuat website, software yang dapat dimanfaatkan antara lain :

1. Macromedia Dreamweaver
2. Namo Web Editor
3. Microsoft Frontpage
4. Microsoft Publisher
5. Notepad dll

Selain itu untuk membuat web yang dinamis biasanya seorang web designer menggunakan program atau software pendukung untuk membuat beberapa objek yang akan ditampilkan pada halaman web, seperti Gambar, animasi, dll

Software tersebut adalah software desain grafis seperti :

1. Adobe Photoshop
2. Macromedia Flash
3. Adobe Ilustrator
4. Macromedia Firework, dll

Format gambar yang mendukung halaman web :

Grafik/gambar dalam sebuah website dapat memberikan efek visual yang luar biasa terhadap website tersebut, namun bisa menambah waktu koneksi akibat banyaknya gambar yang ditampilkan. Grafik dalam website dapat berupa statik, animasi, dan fotografi.

Agar koneksi ke website kita lebih cepat, perlu memahami beberapa format file yang sering digunakan pada sebuah website, diantaranya:

GIF : memiliki warna 8-bit, mendukung dalam bentuk transparan, mengkompresi area warna secara solid, mereduksi jumlah warna dan menjalin untuk proses download secara cepat, juga dapat digunakan untuk membuat animasi dalam bentuk grafik (animated graphic).

JPG : memiliki warna 24-bit,menjaga kualitas brightness dan hue yang ditemukan dalam sebuah foto, dapat disimpan dalam format berkualits tinggi maupun rendan (high or low resolution), sebuah file jpg dapat pula digunakan versi resolusi rendah (low resolution) dari gambar yang nampak ketika gambar sedang didownload, tidak mendukung transparansi.

PNG : PNG-8 mendukung warna 8 bit, mengkompres area warna yang pekat, menjaga detail ketajaman, mendukung transparansi, kompresi lebih canggih dibandingkan gif karena dapat mengkompresi sekitar 10-30% lebih kecil dari format GIF.

Tips :

¶  Pastikan ukuran file gambar seminimal mungkin

¶  Gunakan mode warna RGB

MENGENAL MACROMEDIA DREAMWEAVER 8

Seorang Desainer Website akan membutuhkan program sebagai Editor halaman webnya. Macromedia Dreamweaver merupakan Program Aplikasi Web Editor yang sangat banyak digunakan, bahkan survey mengatakan bahwa 80% Desainer Web menggunakan program ini. Macromedia Dreamweaver juga merupakan Program aplikasi yang berjalan pada dua platform (Dua sistem Operasi) yaitu Windows dan Machintosh.

Macromedia mengeluarkan versi Dreamweaver yang terakhir adalah Versi ke 8, dan setelah itu Dreamweaver dikeluarkan Adobe sehingga namanya sedikit berubah menjadi Adobe Dreamweaver CS3 dan Adobe Dreamweaver CS4.

Pada pembahasan ini kita menggunakan Macromedia Dreamweaver 8 sebagai Editor Web kita dan nanti akan kita bantu dengan Editor yang lain seperti Adobe Photoshop sebagai pengolah Gambarnya.

1.   Menjalankan Macromedia Dreamweaver 8

Untuk menjalankan Macromedia Dreamweaver 8 langkah yang harus kita jalankan adalah:

@ Klik Start ð Program ð Macromedia ð Macromedia Dreamweaver 8

Atau dapat dilakukan dengan cara mengklik 2x pada Shortcut program pada desktop.

Sehingga akan tampil Layar Program Macromedia Dreamweaver 8 seperti Dibawah ini:

@ Selamat Mencoba…….!

2.   Komponen-Komponen pada tampilan Program Dreamweaver 8

A.  Insert Bar

Insert Bar merupakan kumpulan menu yang digunakan untuk memasukkan objek ke dalam jendela dokumen, seperti tabel, layer dan image.

Selain menu Common, kita dapat menampilkan menu lain pada Insert Bar seperti menu Layout, Form, Text, HTML, Application dan Flash Element.

B.  Document Toolbar

 

1.     Code View, digunakan untuk menampilkan tampilan dalam bentuk jendela kode.

2.     Split View/ Code and Design View, digunakan untuk menampilkan jendela kode dan desain.

3.     Design View, digunakan untuk menampilkan dalam bentuk tampilan desain saja.

4.     Document Title, untuk membuat judul dari halaman web yang dibuat.

5.     Cek Eror, untuk mengecek kesalahan pada kode.

6.     Validate Markup

7.     File Management

8.     Preview/Debug In Browser

9.     Refresh Design View

10. View Options

11. Visual Aids

C.  Document Window

Jendela Dokumen merupakan tempat kita untuk mendesain dan memasukkan objek atau kode dari tab Kode, Split dan Design.

D.  Property Inspector

Property Inspector berfungsi untuk mengetahui atau mengubah propertis objek yang dimasukkan ke dalam dokumen. Seperti mengubah jenis huruf dan ukuran huruf.

E.   Panel Groups

Panel Groups berfungsi untuk mengatur halaman web yang kita buat, misalnya pengaturan File, membuat CSS, Tag Inspector dan lainnya.

3.   Membuat dan Modifikasi Halaman Web

Halaman web merupakan isi dari sebuah site dan Dreamweaver dapat membuat berbagai macam bentuk halaman web.

A.   Membuat halaman web dari dasar menggunakan  menu dan ikon Macromedia Dreamweaver

Membuat halaman web dari dasar (from blank) dapat dilakukan dengan cara :

1.   Dari Start Up, kita dapat memilih tipe file yang diinginkan di bagian Create New, misalnya pilih HTML.

2.   Selain dari Start Up, untuk membuat halaman web kosong dapat melalui menu bar, yaitu dengan cara menekan menu File ð New hingga muncul jendela New Document, kemudian pilih Basic Page > HTML.

3.   Setelah selesai melakukan langkah 1 atau langkah 2, maka akan tampil halaman web kosong pada Dreamweaver.

B.    Memasukkan dan Mengelola Tabel

Tabel adalah metode p[anampilan data dengan prinsip baris (row) dan kolom (column). Di halaman web, tabel dapat digunakan untuk mengatur layout dari halaman web yang akan kita buat. Layout di HTML, kebanyakan diatur menggunakan tabel dengan tujuan untuk memberikan tampilan yang seragam di berbagai macam browser yang digunakan.

Cara membuat tabel di Dreamweaver adalah :

1.   Dari menu bar, kita dapat mengklik Insert ð Table, auat dapat juga dengan mengklik Icon Insert Table () pada Inser Bar, sehingga akan tampil jendela Table seperti dibawah ini.

2.   Pada jendela Table ini, kita dapat menentukan berapa banyak baris dan kolom tabel yang akan dibuat, Lebar tabel (Table Width), border tabel (Border Thickness), Cell Padding (jarak isi tabel dengan border tabel), dan Cell Spacing (jarak antar sel), serta ukuran dapat dipilih menggunakan Pixel dan Percent.

Misalkan kita akan membuat tabel yang terdiri dari 4 baris dan 1 kolom, lebar : 800 pixel, border : 1, Cell Padding : 0, dan Cell Spacing : 0.

Maka hasilnya seperti gambar dibawah ini :

Mengelola tabel pada Dreamweaver

1.   Mengatur Perataan Tabel

Tabel yang kita buat, dapat ditempatkan di kiri, tengah dan kanan, dengan merubah nilai Align pada Property Inspector dengan cara :

-      Seleksi tabel dengan cara mengklik salah satu sel tabel kemudian klik Modify ð Tabel ð Select Table, sehingga seperti pada gambar dibawah ini :

Dan perhatikan Property Inspector, tampilannya seperti dibawah ini

Keterangan :

	Untuk mengatur jumlah baris dan kolom pada tabel
	Mengatur Lebar (W) dan Tinggi (H) sel pada tabel
	Mengatur Jarak isi tabel dengan border (CellPad) dan jarak antar sel tabel (CellSpace)
	Mengatur Perataan tabel, Default (bawaan program yang biasanya rata kiri), Left (rata Kiri), Center (Rata Tengah) dan Right (Rata Kanan)
	Mengatur lebar garis tabel (Border)
	Mengatur Warna background tabel (Bg color) dan warna Garis tabel (Brdr color)
	Mengatur Background gambar untuk tabel (Bg Image)

-      Untuk mengatur perataan, kita dapat memilih Align > Center, untuk menempatkan tabel di tengah layar.

2.   Mengatur Perataan pada Sel Tabel

Perataan Sel tabel bertujuan untuk penempatan objek yang berada di dalam sel itu sendiri, Langkah-langkahnya adalah :

-      Aktifkan sel-nya, misalkan kita masukkan teks seperti dibawah ini :

-      Pastikan kursor aktif pada sel tersebut, dan perhatikan Property Inspector-nya

Keterangan :

	Digunakan untuk mengatur perataan sel secara horizontal (Left, Center, Rignt dan Justify)
	Digunakan untuk perataan sel secara vertikal (default, Top, Middle, Bottom, Baseline)
	Mengatur lebar (W) dan Tinggi (H) sel

-      Pilih perataan yang tepat untuk horizontal dan vertikal perataannya dengan cara mengklik salah satu pilihannya.

3.   Menyisipkan Baris dan Kolom pada Tabel

Baris dan kolom pada tabel yang sudah ada dapat ditambah atau dikurangi dengan langkah-langkah sebagai berikut :

Menyisipkan Baris

q  Misal kondisi awal tabel seperti ini

q  Untuk menyisipkan baris diantara No. 1 dan no. 2, maka letakkan kursor di No. 2, kemudian klik menu Modify ð Table ð Insert Row, atau dengan menekan tombol [CTRL] + [M], atau dapat juga dengan melakukan klik kanan pada baris ke-2, pilih table ð Insert Row. Sehingga tabel menjadi seperti dibawah ini.

q  Jika kita ingin menyisipkan lebih dari 1 baris, maka langkahnya adalah :

§  Letakkan kursor pada baris ke-2

§  Klik Modify ð Table ð Insert Rows Or Columns, sehingga akan muncul kotak dialog Insert Rows or Columns Seperti pada gambar dibawah ini.

§  Sehingga hasilnya tabel akan menjadi seperti ini;

§  Lanjutkan dengan mengisi sel yang kosong…!

Menyisipkan Kolom

q  Misal Kondisi awa tabel

   

q  Untuk Menyisipkan kolom diantara kolom No. dengan kolom Nama, letakkan kursor pada kolom Nama. Kemudian klik Modify ð Table ð Insert Column, atau dengan menekan tombol [Ctrl]+[Shift]+[A], atau dapat juga dengan melakukan klik kanan pada kolom Nama, pilih Table ð Insert Column. Sehingga tabel menjadi seperti dibawah ini.

   

q  Jika kita ingin menyisipkan lebih dari 1 kolom, maka langkahnya adalah :

§  Letakkan kursor pada kolom Nama

§  Klik Modify ð Table ð Insert Rows Or Columns, sehingga akan muncul kotak dialog Insert Rows or Columns Seperti pada gambar dibawah ini.

   

§  Sehingga tabel akan menjadi seperti ini;

   

§  Lanjutkan dengan mengisi sel yang kosong…!

4.   Menyisipkan Tabel baru pada Sel

Untuk membuat desain layout halaman web dengan tabel maka dibutuhkan beberapa  tabel dalam satu buah halaman misalkan kita akan membuat layout seperti dibawah ini.

Langkah-langkahnya adalah :

§  Buat tabel dengan ketentuan seperti pada gambar

§  Sehingga tabel menjadi seperti ini

§  Letakkan kursor pada sel pertama, pada Property Inspector, atur tinggi (H) menjadi 160 (160pixel)

§  Sehingga tabel menjadi seperti pada gambar dibawah ini

§  Selanjutnya letakkan kursor di baris ke-2, lalu Klik icon Table  dan atur seperti gambar dibawah

§  Sehingga tabel akan menjadi seperti ini

§  Kita fokus pada tabel yang telah kita sisipkan, aktifkan kolom 1, ubah nilai Width (W) pada Property Inspector menjadi 200pixel, seperti pada gambar dibawah:

Sehingga tabel menjadi seperti ini:

§  Selanjutnya buat tabel baru dikolom 1, dengan ketentuan seperti pada gambar dibawah

§  Sehingga tabel menjadi seperti ini:

§  Nah, sekarang aktifkan kursor di baris paling bawah, atur nilai Height (H) pada Property Inspector menjadi 60 pixel seperti dibawah ini :

§  Sehingga tabel akan menjadi seperti ini

§  Selanjutnya kita tinggal mengatur warna background dan border serta atribut yang diperlukan.

5.   Mengatur Nilai Properti Tabel pada Property Inspector

Untuk mengatur nilai Properti tabel, aktifkan terlebih dahulu sel, baris, kolom, atau tabel-nya, kemudian perhatikan pada Property Inspector-nya, berikut keterangannya :

Keterangan :

Properti	Fungsi
	Mengatur Format Text dan Bentuk Huruf
	Mengatur Style, CSS dan ukuran huruf  pada teks
	Mengatur Alignment, bullet, numbering and tab
	Memberikan hyperlink pada teks yang telah dipilih
	Mengatur Perataan Horizontal dan vertikal
	Mengatur lebar cell/table serta tingginya
	Memberikan background cell atau table (background warna dan gambar)

6.   Silahkan Anda terapkan pada tabel yang telah anda buat…!

C.    Memberi Judul / Title Pada Halaman Web

Judul merupakan teks yang akan terlihat pada Title Bar pada Browser, jadi Bukan nama dari Halaman web.

Untuk Memberikan Title pada Dreamweaver dengan cara sebagai berikut :

§  Perhatikan pada Document Toolbar

§  Lihat hasilnya di browser

§  Terapkan pada setiap halaman Web yang kita buat…!

D.   Memasukkan Teks pada Halaman Web

Pada dasarnya memasukkan teks pada halaman web sama dengan memasukkan teks pada program yang lain seperti Pengolah Angka Ms. Word tetapi letak dari toolbarnya saja yang berbeda.

Pengaturan teks pada macromedia dreamweaver terletah pada bagian Property Inspector seperti tampilan dibawah ini :

E.    Menyisipkan Gambar Pada Halaman Web

Gambar merupakan faktor yang sangat penting dalam sebuah halaman web.

Langkah-langkah untuk memasukkan gambar adalah :

§  Letakkan kursor tepat dimana kita akan memasukkan gambar, misal didalam sel tabel atau langsung pada halaman kosong.

§  Klik Menu Insert ð Image, atau dapat juga menggunakan icon Images () di panel Insert, sehingga akan muncul kotak dialog Select Images Source. Selanjutnya pilih gambar yang sesuai lalu klik OK untuk memasukkan gambar.

§  Sehingga akan tampil seperti contoh dibawah, yang sebenarnya akan sesuai dengan gambar yang anda pilih.

§  Lanjutkan dengan editing yang lain….!

F.    Memberikan Backgruond Halaman Web

Background pada halaman web terdiri dari background halaman, background tabel, cell (jika menggunakan tabel)

Langkah untuk memberikan Background Halaman adalah sebagai berikut :

§  Klik Modify ð Page Properties sehingga akan tampil kotak dialog Page Properties

§  Pilih Appearance dan pada Background image (untuk background gambar) dan Background Color (untuk background warna), dan pada repeat pilih repeat-x

§  Klik OK, sehingga hasilnya seperti contoh dibawah

Nah, sekarang Membuat background tabel dan sel pada tabel yang telah kita buat. Langkah-langkahnya adalah sebagai berikut:

Pertama-tama kita akan mengatur tinggi dari sel yang akan kita beri background sesuai dengan background yang kita punya, supaya kelihatan rapi. Ikuti langkah merubah tinggi baris/sel….!

§  Letakkan kursor pada sel yang akan diberikan background

§  Perhatikan pada Property Inspector,

§  Klik pada icon folder untuk memilih gambar sebagai background, atau pilih pada  untuk membuat background warna.

§  Misal kita ingin background gambar, Klik pada icon folder, sehingga akan muncul kotak dialog Select Images Source.

§  Pilih salah satu gambar dan klik OK. Dan masukkan teks pada sel tersebut.

§  Selanjutnya halaman web akan menjadi seperti gambar dibawah>

§  Nah, selanjutnya edit Halaman anda sehingga menjadi seperti contoh dibawah ini!

Selanjutnya, jika ada yang kurang jelas tanyakan pada Gurumu….!

G.   Memasukkan Gambar pada halaman web

Menyisipkan gambar pada halaman web dapat dilakukan dengan cara :

·         Posisikan kursor pada tempat dimana gambar akan ditempatkan

·         Klik menu Insert ðImage, lalu cari gambar yang sesuai

·         Selanjutnya Klik OK

H.   Memasukkan Hyperlink / Link

Link atau dalam bahasa inggris disebut dengan hyperlink digunakan untuk mereferensikan halaman web, gambar, e-mail dan lainnya yang memiliki alamat URL atau hubungan dengan halaman lain.

Langkah-langkah untuk memasukkan link adalah :

1.   Pilih objek yang akan kita berikan link, misal teks atau gambar. Perhatikan gambar dibawah ini.

Gambar diatas menunjukkan bahwa kita akan memberikan link pada teks “HOME” dengan alamat linknya adalah index.html.

2.   Untuk memberikan Link pada Objek lain, misalnya pada gambar, cukup aktifkan atau select objek dan pada Property Inspector, tepatnya pada Link, isikan nama file atau alamat web tertentu sebagai linknya.

I.      Memasukkan Tombol Flash (Flash Button)

Dalam desain web, Dreamweaver memiliki kelebihan yaitu kemampuan untuk membuat tombol flash sekaligus memasukkan ke halaman web sehingga kita tidak perlu memilih program Macromedia Flash untuk membuat tombol.

Langkah-langkah untuk memasukkan tombol flash adalah:

1.   Tempatkan kursor pada tempat dimana kita akan memasukkan tombol Flash

2.   Klik Menu Insert ð Media ð Flash Button, sehingga akan tampil kotak dialog Insert Flash Button

3.   Pilih Style, Button text isikan dengan Teks untuk tombol anda, selanjutnya link masikkan dengan halaman atau halaman web yang akan berhubungan dengan tombol.

4.   Selanjutnya Klik OK , sehingga akan tampil

5.   Title digunakan untuk menampilkan teks apabila komputer tidak dapat menampilkan tombol. Boleh dikosongkan, klik OK

6.   Proses pembuatan Tombol flash berhasil dan akan tampil seperti gambar dibawah.

 

J.     Menggunakan Layer

Layer dalam bahasa Indonesia diterjemahkan sebagai lapisan yang artinya bagian yang berfungsi meletakkan objek-objek dalam sebuah lapisan yang dapat diletakkan pada halaman web.

Langkah untuk memasukkan layer pada halaman web adalah sebagai berikut:

1.   Dari Main Menu, kita dapat Klik Insert ð Layout Object ð Layer

2.   Atau dapat juga dilakukan dari Insert Bar,  dengan cara membuka tab Layout kemudian pilih Layer

3.   Buatlah beberapa layer pada halaman web seperti gambar dibawah ini :

Gambar diatas menunjukkan 2layer yang bertumpukan…!

4.   Layer sama prinsipnya dengan tabel yang dapat dimasuki teks dan objek lain. Sehingga kita dapat berkreasi membuat tampilan halaman web yang menarik.

5.   Jika kita menggunakan banyak layer, terkadang pada browser tertentu tampilan akan kacau, oleh karena itu pada saat desain menggunakan layer harus di preview menggunakan beberapa browser yang sering digunakan. (IE, Mozilla Firefox, Opera Dll)

K.   Membuat CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah sebuah file yang digunakan untuk memformat halaman web. Jika di Ms. Word Kita mengenal istilah Style, maka CSS ibarat Style bagi halaman web.

Langkah-langkah pembuatan CSS adalah :

1.     Perhatikan panel CSS, jika belum muncul maka munculkan dengan klik menu Window ð CSS Style.

2.     Pada Panel CSS, klik tombol kanan atas kemudian pilih New

3.     Setelah tampil seperti gambar dibawah ini (New CSS Rule).

Atur seperti pada gambar di atas, lalu Klik OK

4.     Karena pada Define In dipilih (New Style Sheet File) maka kita diminta untuk menyimpan file CSS yang kita buat.

5.     Tekan tombol Save setelah pengaturan penyimpanan.

6.     Sehingga hasilnya sebagai berikut.

7.     Untuk memberikan style didalam CSS, kita dapat lakukan Klik Kanan Pada CSS yang bersangkutan kemudian tekan New

8.     Berikan nama style yang akan dimasukkan, misalnya judul lalu klik OK

9.     Selanjutnya klik OK,  sehingga akan tampil seperti gambar dibawah ini.

10. Kemudian pada Kategori Blok dapat kita atur seperti gambar dibawah ini.

11. Selanjutnya klik OK. Lanjutkan dengan membuat style satu lagi untuk .teks  dan atur sesuai keinginan.

Untuk melihat pengaruh dari CSS yang telah kita buat, coba ketik teks seperti contoh dibawah pada sebuah tabel.

Sekarang coba letakkan kursor pada sel pertama (judul) kemudian klik pada ComboBox Style. Begitu juga seterusnya…! Sehingga hasilnya seperti pada gambar dibawah ini :

Nah sekarang dengan menggunakan CSS kita dapat menerapkannya pada halaman web yang lain… Selamat Mencoba…!

Manajemen file dan folder untuk halaman web

1.   Buat folder dengan nama sesuka anda, Misal “WEBSITE”

2.   Buat folder baru dengan nama “images” didalam folder yang telah anda buat

3.   Pastikan seluruh gambar yang akan ditampilkan pada halaman web berada pada folder “IMAGES”

4.   Seluruh file halaman web disimpan dalam folder “WEBSITE” seperti gambar dibawah ini.

5.   Hyperlink dibuat sesuai dengan nama file yang ada dalam folder, kecuali untuk Hyperlink External, misalnya link ke google (http://www.google.com) dan lain-lain.