Panduan Sederhana Membuat Website Menggunakan template JogjaTemplate.com

   

J ogja T e m pla t e .Com

  

Panduan Sederhana Membuat Website

Menggunakan template

JogjaTemplate.com

  

 

 

Oleh  : 

  

Eko Danang Waskito

       

  Pendahuluan  

  Terima  kasih telah menggunjungi website kami  Perkenalkan   saya  Eko  Danang  Waskito.  Teman  teman  saya  sering  memanggil  saya danang. saya Mahasiswa di salah satu perguruan tinggi  Swasta  di Jogjakarta dengan jurusan Akuntasi.   Banyak   teman  teman  bilang,  dengan  kuliah  waktu  kita  akan  banyak  terbuang

   untuk belajar di kampus dan mengerjakan tugas, ( padahal ya 

2 Cuma  main main

   ☺ )bagi saya itu semua tidak benar, sehari hanya ada 

  24  jam dan saya yakin semua manusia juga memiliki waktu yang sama,  

  Bagi  saya sesibuk apapun kita dengan kegiatan kita di kampus pasti kita  masih  memiliki banyak waktu untuk melakukan kegiatan yang lain yang  juga  sangat bermanfaat untuk kita. 

  Saya   orang  baru  di  dunia  maya.  Akhir  2006  saya  baru  memulai  mengenal   apa  itu  internet  dalam  hal  ini  saya  hanya  sebagi  pengguna,  awal   april  saya  baru  sadar  bahwa  di  internet  kita  juga  bisa  menghasilkan   penghasilan.  Dari  sanalah  saya  mulai  memanfaatkan  waku   luang  saya  untuk  mendalami  internet  marketing  dan  sampai  akhirnya   saya  yakin  bahwa  dengan  inilah  waktu  luang  saya  bisa  menghasilkan,    Dengan  hanya sedikit waktu yang saya manfaatkan untuk menjalankan  internet  marketing, tentunya saya bukan ahli, dan memiliki penghasilan  puluhan

    ribu  dular  sebulan.  berapa  dolar  pun  yang  saya  dapatkan  sekarang  sudah saya syukuri dari pada saya sama sekali tidak memiliki  peghasilan

   ..☺    Tidak   ada  Tujuan  lain  saya  membuat  ebook  ini  selain  megajak  anda  untuk

    menjalankan  bisnis  di  internet!  Dan  menurut  saya  pribadi  website   merupakan  faktor  penting  kesuksesan  anda  dalam  menjalankan

    bisnis  di  internet,  untuk  itu  semoga  ebook  dan  jogjatemplate.com  saya bisa menjadi solusi untuk anda, 

  

Disclaimer:

 

E ‐book  ini  berisi  panduan  Membuat  website  yang  saya  buat  untuk 

membantu   member  saya  bagaimana  membuat  website  dengan  cara 

yang   sederhana  dan  mudah  untuk  website  sederhana  maupun 

 profesional  website    Cipta Eko Danang Waskito  Hak  ini saya mengijinkan anda untuk menyebar luaskan ebook ini  Dengan dengan  syarat‐syarat 

  1. Anda  tidak  di  ijinkan  apapun  itu  bentuk  pembajakan    meniru  dan  menduplikasi ebook ini untuk keperluan bisnis anda 

  2. Anda diijinkan menyebar luaskan ebook ini dengan syarat tidak  merubah  sedikitpun isi dari ebook ini 

  3. Saya  tidak  bertanggung  jawab  atas  penyalahgunaan  ebook  ini  karena   pada  dasarnya  saya  hanya  memberikan  gambaran  bagaimana   membuat  website  profesional  dengan  cara  yang  sederhana             

  

Panduan Membuat Website Dengan

Dreamweaver 8

  Ebook  Ini berisikan bagaimana membuat website mengunakan Program  aplikasi  Dreamweaver 8.   Banyak   program  aplikasi  yang  dapat  anda  gunakan  untuk  membuat  website   namun  di  sini  saya  menyarankan  agar  anda  menggunakan  Dreamweaver  8 untuk membuat website.  Mengapa   harus  Dreamweaver  8  ?  dari  berberapa  program  aplikasi  Dreamweaver   8  menurut  kebanyakan  webmaster  memiliki  fitur  yang  sangat   memadai.  Dan  saya  juga  selama  ini  masih  menggunakan  Dreamweaver  untuk membuat website.   

                   

    "Membuat  Website Itu Sangat Mudah!" 

  

Dengan  Template Siap Pakai, Anda Dapat Membuat Website Profesional Kurang 

Dari  2 Jam!! 

  Dengan   mengunakan  Template  dari  JogjaTemplate.com  saya  jamin  anda  akan dengan mudah membuat website. 

  Pada  Dasarnya membuat website itu hanyalah bagaimana kita 

  1. Menentukan ide 

  2. Menentukan objek 

  3. Menentukan alat 

  4. Menentukan fasilitas 

  5. Online 

   

  1. Menentukan Ide  Dalam   melakukan  Setiap  tindakan  pastinya  kita  tidak  meninggalkan   langkah  ini.  Dan  juga  dalam  pembuatan  website  kita  juga harus menentukan ide apa yang harus kita buat, seperti  apakah  bentuk website yang kita inginkan. 

  2. Menentukan Objek  Setelah

    ide  apa  tercapai  sekarang  saatnya  menentukan  objek  yang  akan kita gunakan untuk membuat website. Tentunya dalam  hal

    ini  media,  warna,  gambar  serta  animasi  akan  anda  butuhkan  untuk  membuat website anda, namun anda tidak usah khawatir,  karena

   kami telah menyediakan itu semua.     

  3. Menentukan Alat  Di  sini seperti yang saya ungkapkan di atas bahwa Dreamweaver 8  merupakan   media  yang  cocok  anda  gunakan  untuk  membuat  website   namun  anda  juga  saya  rekomendasikan  untuk  menggunakan  adobe photoshop untuk mengolah gambar.     4.

  Menentukan Fasilitas  Website  jika belum bisa di akses belum bisa di namakan website  untuk

    itu  kita  memerlukan  apa  yang  namanya  Hosting  dan  Domain.    

  5. Online 

  4   langkah  telah  kita  lakukan  selanjutnya  anda  bisa  mengonline  kan  website anda dan bisa di akses di seluruh dunia. 

                       

    Langkah2  Praktis membuat Website mengunakan Template 

  

JogjaTemplate.com

 

  1. Download Semua Template yang ada di member area, setelah itu  Extract

    menggunakan  winrar,  karena  file  saya  jadikan  file  winrar  untuk  menghemat space. 

2. Pilih sesuai dengan topik yang anda inginkan 

  3. Jalankan Program Dreamweaver 8.  4.

  Pastikan  Anda  memiliki  Aplikasi  browser  Internet  Explorer  ataupun  Firefox                       

   

1. Persiapan 

   

  Gambar  1‐1  

  Extract   file  yang  sudah  anda  download  pilih  topik  sesuai  dengan  yang  anda   inginkan  dan  tentunya  yang  sesuai  dengan  topik  website  anda. 

  Seperti  di contoh saya mengunakan Company2‐jogjatemplate.com (16)   Di  sana ada beberapa folder 

  Html  dan photoshop     html  berisikan  file  yang  berhubungan  dengan  website  Folder

  sedangkan   photoshop  berisikan  file  gambar  mentah  (  blm  jadi  di  sini  anda  bisa edit sedemikian rupa ) namun saya tidak akan mengajarkan  anda  mengedit terlalu jauh. 

  Saya  sarankan anda membuka folder Html saja di sana ada 2 folder dan  2  file 

  

Blank   image  berisikan  beberapa  image  yang  akan  anda  pergunakan 

  untuk   mempercantik  website  dan  ada  folder  image  berisikan  image  yang  sudah jadi  Selain   itu  ada  file.html  index  dan  contant  page  saya  sarankan  yang  contant

   page agar di “hapus”  Selanjutnya   silahkan  anda  buka  file  index.html  klik  kanan  open  with 

  Dreamweaver  8. ( pastikan komputer anda sudah terinstall Dreamweaver 8.)  Selanjutnya  anda bisa melihat gambar Gambar 1‐2   berikut   Gambar  1‐2  

  Seperti  yang tampak di gambar tersebut ada beberapa hal yang harus  anda  ketahui.  

  1. Pastikan anda menggunakan Standar  2.

  Pastikan Design jika tidak anda akan menemukan kode html yang  akan  membuat anda tambah bingung 

3. Di sini anda bisa gantikan untuk title situs anda  

  Di

  

4.   bagian  inilah  anda  harus  mengubah  beberapa  menu  sesuai 

  dengan   apa  yang  akan  anda  buat  sesuai  dengan  topic  website  anda

      2. Editing File Image ke Photoshop  Proses  selanjutnya anda bisa lihat gambar Gambar 1‐3   berikut  

   

  Gambar  1‐3  

  Selanjutnya   anda  bisa  membuka  Folder  image  di  sana  anda  akan  menemukan   image  yang  sudah  jadi,  namun  anda  perlu  mengganti  image2  tersebut, untuk itu silahkan buka folder blank image. Nah di  sana  anda akan mendapatkan file image yang serupa dan nama yang  serupa  antara folder “image” dan folder “blank image” perbedaan di  sini   file2  image  tersebut  masih  dalam  keadaan  kosong,  untuk  itu  silahkan

    anda  edit  menggunakan  Adobe  Photoshop  sebenarnya  mengunakan   paint  juga  bisa  namun  saya  merekomendasikan  editingnya

   menggunakan adobe photoshop  Okeh  silahkan Klik kanan Open With Adobe Photoshop  Selanjutnya Gambar  1‐4 berikut  

   lihat gambar 

  Gambar  1‐4  

  Tampak   pada  Gambar  1‐4  di  sana  ada  contoh  button  yang  akan  di  edit  sesuai dengan yang anda inginkan. Oke proses editing anda bisa  langsung   klik  tombol  sebelah  kiri  yang  bertanda  “T”  dan  anda  bisa  memilih   warna  sesuai  dengan  yang  anda  inginkan  ya  itu  tampak  di  sana   ada  kotak  putih  berwarna  hijau  silahkan  anda  klik  nanti  anda  kan  menemukan menu untuk mengganti warna. 

  Oke  selanjutnya anda bisa menyimpan lihat Gambar 1‐5 berikut 

   

  Gambar  1‐5 

  Tampak  pada Gambar 1‐5 pastikan “save in “ berada di dalam folder  image  (image dalam folder HTML situs yang akan anda buat seperti  tampak  di Gambar 1‐1. Simpan dengan nama yang sama di sana di  contohkan

    menggunakan  file  b‐2.jpg.  edit  semua  file  image  sesuai  yang  anda inginkan caranya sama dengan yang saya contohkan 

         Selanjutnya  anda bisa lihat gambar 1‐6 berikut   

  Gambar  1‐6 

  Oke   anda  bisa  melihat  tampilan  di  Dreamever  8  sekarang  menu2  (keteranggan

    1  )  yang  tadinya  tidak  sesuai  dengan  keinginan  anda  sekarang   bisa  anda  atur  sesuai  dengan  yang  anda  inginkan  dan  halaman

    bisa  anda  bersihkan  terlebih  dahulu  sebelum  anda  mengisikan  konten di website anda.   Caranya  klik bagian konten yang akan anda hapus ( keterangan 2,3,4  )   setelah  itu  anda  bisa  tekan  tombol  delete  di  keyboards,  cara  ini  tidak   beda  jauh  anda  menulis  /  menghapus  seperti  di  MS  Words,  Hasil  nya bisa anda lihat seperti berikut,   Gambar  1‐7  

  Setelah  anda selesai anda bisa cek web anda ini di browser dengan cara  menekan  tombol F12 yang ada di keyboards anda.   Selanjutnya  anda harus menata file anda ke dalam kategori yang sudah  anda   tentukan  untuk  lebih  jelasnya  anda  bisa  melihat  gambar  1‐8  berikut

   

     1‐8  gambar

  Setelah   memastikan  bahwa  format  web  seperti  gambar  1‐7  adalah  pilihan   anda,  untuk selanjutnya  anda  bisa  kembali ke  explorer lihat 

  gambar  1‐8 di sana ada 2 folder dan 1 file index.html  

  Langkah   yang  harus  anda  lakukan  adalah  copy  file  index  dan  pastekan  sebanyak topik yang akan anda buat seperti contoh di atas  saya   pastekan  sebanyak  5  kali  .  kontak,  log‐in,  order,  produk,  dan  tentang  kami. Nah rename file2 hasil duplikasi anda tersebut sesuai  dengan  topik yang anda inginkan  Setelah

   itu sebelum lupa anda bisa menghapus folder “blank image”  Oke   selanjutnya  lakukan  pengeditan  pada  file2  yang  sudah  anda  edit  tersebut  ke Dreamweaver 8.  Caranya anda bisa lihat gambar 1‐1 

3. Editing File html ke Dreamweaver 8. 

  Untuk  proses selanjutnya anda bisa lihat gambar 1‐9 berikut 

  gambar  1‐9  Seperti  tampak gambar 1‐8 perhatikan tanda  

no   1  di  deretan  tersebut  anda  bisa  melihat  beberapa  file  index,  kontak,  log‐in, 

order,  produk   no  2 dalam kotak tersebut anda bisa ganti menjadi title website anda,  3.a  Isi Konten Web Anda 

Selelah   melalui  beberapa  tahap  tentunya  tahap  inilah  tahap  yang  anda  tunggu 

tunggu  yaitu mengisi konten untuk website anda, mengisi konten dengan bahasa 

  

 merupakan nilai jual yang anda miliki, anda bisa lihat gambar 1‐10 

andalah

    Gambar  1‐10 

  keterangan   1,2,3  merupakan  halaman  yang  akan  anda  gunakan  untuk   menggisi  konten website anda,  

  Yang   perlu  anda perhatikan  di  sini,  anda  harus  memperhatikan  kolom  kolom  karena antara 1,2,3 tersebut di batasi dengan kolom2, jika anda  mengisikan   konten  melebihi  ukuran  kolom  tersebut  untuk  itu  anda  harus

   menyesuaikan kolom yang lain, karena hal ini akan menyebabkan  kelonggaran?  kolom sehingga akan terlihat aneh nantinya,   

    Gambar  1‐11  Terlihat

    jelas  pada  gambar  1‐11  di  sana  ada  bagian  1,2  merupakan  isi  dari  konten web anda dan anda juga bisa merubah warna di sana cara  merubah

   warna anda bisa lihat menu di keterangan “3” di bawah style?  ada  kotak itu bisa anda klik dan nantinya akan keluar warna yang bisa  anda

   sesuaikan,  keterangan   4”  anda  gunakan  untuk  melink‐kan  konten  anda  caranya  tinggal

  

   blok tulisan setelah itu masukkan    Saya   tidak  akan  panjang  lebar  menerangkan  di  sini  karena  saya  tahu  semakin

   banyak anda berlatih anda pasti bisa, karena saya sendiri juga  banyak  berlatih untuk melakukan hal yang sama.     

  3.b.  Linking Menu 

  Setelah   anda  pastikan  semua  halaman  yang  akan  anda  buat  sudah  benar  sekarang waktunya linking ke masing2 halaman  

  Lihat  gambar 1‐12 berikut   

  Gambar  1‐12 

  Dari  gambar 1‐12  pastinya anda sudah sedikit gambaran apa yang akan  anda   lakukan  di  sana  silahkan  anda  klik  salah  satu  menu  yang  ada  di  website  anda misalnya 

  1. Home   2.

  Setelah itu lihat gambar 2 anda bisa meng klik icon gambar folder  setelah  itu akan muncul windows baru,  

3. Pilih file yang ada di folder anda ( lihat gambar 1‐8)  

  4. Setelah anda menentukan filnya silahkan tekan OK  Ulangi   cara  seperti  ini  untuk  meng  link  kan  semua  menu  yang  ada  di  semua  halaman yang anda buat.  Oh  iya contoh yang saya berikan sudah saya online kan juga anda bisa  cek

   di

                                     

  Hosting  Dan domain 

  Belum   lengkap  dan  belum  di  namakan  website  jika  anda  belum  memiliki  hosting dan domain   Banyak

    penyedia  hosting  dan  domain  yang  memiliki  persaingan  harga  dan   fasilitas  yang  berbeda  beda  sehingga  membuat  para  pengguna  server

    terutama  pemula  memiliki  kendala  yang  cukup  membuat  mereka  pada akhirnya salah memilh hosting, ternyata hostingnya suka  down,

    ada  yang  harganya  kemahalan  dan  lain  lain.  Jika  anda.  Dari  jogjatemplate   pun  juga  memiliki  layanan  hosting  dengan  harga  terjangkau

   silahkan lihat    Saya   sendiri  merekomendasikan  jika  anda  ingin  memiliki  usaha  online  international   dan  situs  anda  memiliki  file  yang  cukup  besar  jangan  tanggung2   anda  harus  menentukan  server  yang  handal  di  sini  saya  merekomendasikan   3  hosting  yang  saya  akui  telah  memiliki  kepercayaan   banyak  pengguna  hosting  sehingga  anda  boleh  juga  mengunakannya  silahkan kunjungi  Untuk  mencari domain juga sama halnya dengan mencari hosting jadi  anda   harus  menentukan  mana  yang  labih  baik  antara  penyedia  .  rekomendasi   penyedia   domain   dari   saya   adalah   

  

    Domain  merupakan  asset  anda  yang 

  cukup   berharga  karena  anda  benar  benar  harus  menjaganya,  coba  bayangkan   jika  domain  anda  sudah  banyak  yang  mengenal,  terus  penyedia

   domain tutup, nah anda akan di rugikan, beda hal nya dengan  hosting   jika  perusahaan  hosting  tutup  anda  bisa  memindahkan  hostingan

   tersebut ke penyedia hosting lainnya,       

   

   sini saya sedikit mengulas sedikit tips memilih hosting  Di

  1. Pastikan hosting sesuai dengan apa yang anda butuhkan saat ini  Jika

    anda  hanya  ingin  memiliki  sebuah  situs  dengan  isi  yang  sederhana   mengapa  harus  bayar  mahal  dengan  fasilitas  yang  wahh..

    toh  pada  kenyataannya  fasilitas  tersebut  tidak  akan  di  gunakan.  

  2. Tentukan  target.  Akan di  edarkan kemana  situs  anda?  Walaupun  semua  situs akan bisa di akses di seluruh dunia namun anda pasti  memilki

    pasar  yang  anda  inginkan  jika  anda  memiliki  situs  berbahasa  indonesia pastinya anda akan menargetkan pasar yaitu  Indonesia,  nah di sini anda di butuhkan penentuan server tersebut  akan   dia  taruh  di  mana  jika  anda  ingin  menargetkan  pasar  Indonesia   carilah  penyedia  hosting  yang  servernya  ada  di  Indonesia.   

  3. Bandingkan antara 1 penyedia dengan penyedia yang lain. Hal ini  harus   anda  lakukan  karena  anda  harus  tahu  apa  kelebihan  dan  kekurangan   dari  penyedia  tersebut  yang  nantinya  supaya  anda  tidak  menyesal 

  4. Selalu konsultasi sama teman yang sudah mengerti, nah tahap ini  anda  bisa melakukan bisa tidak karena jika anda telah melakukan  3  tahap di atas pastinya tahap ini hanya untuk mereview saja 

             

  Upload  web ke server 

  Setelah   anda  membali  hosting  dan  domain  sekarang  waktunya  anda  meng   upload  web  anda  caranya  cukup  mudah  anda  bisa  mengikuti  langkah2

   seperti berikut 

  1. Siapkan  sofwere  Ftp    anda  bisa  mendownload  gratis  di  sini 

    setelah itu install di computer anda 

  2. Ikuti langkah berikut  Buka

   filezilla    

  Gambar  1‐13 

  Masukkan   nama  server  biasanya  menggunakan  nama  domain  anda,  dan   masukan  username  dan  passwords  anda  setelah  itu  tekan  quickconnect     Setelah  nyambung dengan server  Anda

   bisalihat gambar di bawah ini   

  Gabar  1‐14  Di  sana ada 2 bagian  Bagian  1 adalah hardisk anda dan bagian 2 adalah server anda, nah di  sini   anda  tinggal  mencari  file  yang  ada  di  hardisk  dan  meletak  kan  di  server,   Sekarang

    silahkan  cari  file  anda  di  hardisk  dan  anda  buka  folder  di  server  yang bernama “public_html  Lihat

   gambar berikut 

    gambar  1‐15  Oke  anda bisa melihat di sana ada keterangan   1.

  File di hardisk anda  2. 2 file yang akan anda upload  3.

  Ruangan server anda 

  4. Lokasi di mana file anda akan di simpan    Selanjutnya  semua file yang ada di keterangan 2 silahkan anda blok dan  geser

   ke no 4 nantinya akan terlihat seperti 

    Gambar  1‐16  Oke

    di  sana  jelas  terlihat  Pada  No  3  semua  file  yang  ada  di  gambar  1  sudah  masuk ke server semua kecuali blank images karena memang file  itu  tidak di butuhkan.  Oke   sekarang  anda  bisa  membuka  situs  anda  dengan  nama  domain  yang  telah anda tentukan.  Untuk   yang  saya  terangkan  ini  anda  juga  bisa  mengecek  hasilnya  di 

  

                 

  Saya  tahu bahwa panduan saya jauh dari sempurna untuk itu saya akan  senang   jika  anda  mengirimkan  kritik  dan  saran  untuk  yang  bertujuan  untuk  membangun.  Jika

    ada  kritik  atau  saran  silahkan  anda  email  ke  saya 

  

  atau  juga  anda  bisa  memberikan  diskusi 

  mengenai   banyak  hal  internet  marketing  anda  bisa  berikan  saran  di  blog  saya ‐membuat‐website/ 

  Sesudahnya   saya  ucapkan  terima  kasih  karena  anda  telah  sudi  membaca   panduan  saya,  semoga  panduan  ini  bisa  bermanfaat  untuk  anda.

   

            Salam  Sukses    Eko  Danang Waskito,