Mendesain StoreFront Halaman Web

MENDESAIN TAMPILAN STORE FRONT DI CORELDRAW ATAU DI ADOBE PHOTOSHOP

Untuk melakukan langkah yang pertama dalam membuat atau mendesain halaman depan atau storefront dari situs kita, yaitu :

  • Kita harus menentukan ide apa yang hendak kita sampaikan/tampilkan dalam situs kita.
  • Menentukan keselarasan warna, objek, dan informasi. Untuk lebih jelasnya ikuti cara berikut ini:
  • Buatlah gambar yang sederhana di CorelDraw, seperti di bawah ini;
  • Kemudian blok/sorot semua objek, dan klik menu Arrage—Group atau (Ctlrl+G). Seperti gambar di bawah ini:


  • Setelah di Group, klik menu File—Eksport (Ctrl+E), tampil gambar berikut:

 

  • Buatlah folder baru dengan nama Latihan Desain WEB atau nama lain yang mudah diingat oleh kita.
  • Simpan objek dengan nama file storefront, dengan tipe .jpg, sort type—default, checklist tulisan Selected only.
  • Kemudian klik export. Tampil menu dialog berikut;

 

  • Pada Image size ketikkan untuk Width = 640 pixels, Height = 480 pixels, dengan Resolution = 70 dpi, Color mode = RGB color.
  • Klik OK, tampil dialog seperti dibawah ini;

 

  • Kemudian klik OK.

MEMBUAT SLICE PADA DESAIN STOREFRONT

  • Untuk membuat slice imagemap, dapat dilakukan cara sebagai berikut:
  • Buka aplikasi Adobe Image Ready.
  • Klik File, Open. Klik dan sorot nama file storefront,jpg pada folder C:\Latihan Desain WEB\.., akan tampil gambar;

 

  • Untuk memulai Slice, terlebih dahulu kita klik icon Marquee Tool (M).
  • Kemudian klik icon pilih Reset Tool.
  • Untuk memulai slice arahkan Marquee Tool dengan klik dan drag cursor ke image yang akan kita ambil, misalnya tombol DAFTAR, akan terlihat garis putus-putus pada image DAFTAR, seperti gambar berikut:


  • Kemudian klik menu Select, pilih Create Slice from selection, tampil gambar berikut:


  • Selanjutnya klik menu Slices, pilih Save Slice Selection, tampil dialog untuk mengisikan nama dari slice.


  • Nama Slice dapat kita isikan dengan menyebut atau menuliskan nama dari button atau tombol dari image yang kita slice tadi.
  • Lakukanlah seperti cara yang sama untuk men-Slice tombol atau image yang lain.

MEMBUAT FILE HTML

Untuk membuat file HTML dari AdobeImageReady7.0, kita lakukan dengan cara :

  • Klik menu File, pilih Save Optimized As.
  • Ketikkan pada textbox :

File name : index.html

Save as type : HTML and Images (*.html).

Setting : default setting

Slices : All Slices

  • Untuk mengakhiri Klik tombol Save.
  • Untuk menampilkan file html yang kita buat tadi, klik Browser Internet Explorer, Browse panggil nama index.html di folder C:\Latihan Desain WEB\..
  • Tampilan index.html:


  • Semua tombol pada tampilan index.html belum berfungsi, untuk memfungsikan setiap tombol kita lakukan dengan memanggil file index.hmtl di aplikasi baru yaitu dengan menggunakan DreamWeaver, yang akan dijelaskan pada pembahasan berikutnya.

MENAMBAHKAN ATAU MEMBERI PERINTAH LINK KE HALAMAN WEB

Untuk menambahkan perintah Link pada tombol halaman WEB banyak cara yang dapat dilakukan, diantaranya yaitu dengan menggunakan Microsoft FrontPage, MacromediaFlash, FireWork, DreamWeaver, dll.

Dalam pembahasan ini kita akan mencoba menggunakan fasilitas DreamWeaver. Langkah-langkahnya adalah sebagai berikut:

  1. Buka aplikasi DreamWeaver.
  2. Klik menu File, Open. Browse panggil nama index.html di folder C:\Latihan Desain WEB\.. Akan tampil gambar berikut :


  1. Untuk mengaktifkan tombol dari masing-masing image, lakukan dengan cara yang sama yaitu klik tombol/image kemudian pada kotak dialog Link, klik open kemudian sorot atau panggil file html yang akan ditampilkan.
  2. Selamat mencoba!

    Sumber : materi kuliah Ova Nourisma, S.T

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s