Monthly Archives: November 2010

Mengenalkan PageBreeze Free HTML Editor

Sejak minggu lalu saya mengajar Web Design & Web Programming untuk siswa-siswa dari Papua di Departemen TI – VEDC Malang.

Materi minggu pertama adalah tentang : Pengenalan HTML, konsep koneksi internet dan browser, Sintaks-sintak dasar pemformatan dokumen HTML (hingga nested table, frame), cascading style sheet, Pemaikain Macromedia Dreamweaver (Namun karena Dreamweaver berbayar, maka saya kenalkan HTML Editor yg Free namun powerfull yaitu PageBreeze Free HTML editor).

PageBreeze Free HTML Editor dapat diunduh di http://www.pagebreeze.com/

Mempunyai keunggulan pada authoring tool memiliki Tab : Normal (untuk Editing yg WYSIWYG), Properties, HTML Source, Preview, Publish (FTP). keunggulan lain adanya adanya fasilitas membuat template, serta Form Builder.

HTML Editor ini cukup bagus sebagai dasar sebelum masuk ke web programming dan pengenalan CMS.

Berikut ini ringkasan langkah-langkah mengembangkan web site dengan Page Breeze Free HTML Editor:

  1. Membuat rancangan layout serta struktur dari web site kita ( menu dan nama filenya)
  2. Menuangkan rancangan layout tersebut di PageBreeze (boleh memilih template yg ada), kemudian mengedit tampilan, membuat menu/link sesuai rancangan dan headernya.
  3. Simpan desain tersebut sebagai template, melalui menu: Save Copy of Page as Template (misal desainweb.htm)
  4. Membuat halam-halaman lain sesuai rancangan kita, mulai dari index.html dan halaman yg lain. melalui menu: file new page –> isi title (sesuai nama halaman kita) –> pilih template (misal desainweb) –> beri nama file (sesuai rancangan kita). Demikian seterusnya hingga semua halaman dibuat
  5. Mencoba semua link apakah sudah benar, dimulai dengan membuka index.html kemudian dicoba menu/link yg dibuat. Kalau ada yang link yang putus/error sebaiknya diedit dulu (tips: rename halaman yg salah memberi nama file shg link tidak terhubung)
  6. Edit dan kita isi semua halaman yang sudah dibuat pada langkah 4, dan sempurnakan isinya.
  7. Lakukan cek ulang langkah 5 (selain link adalah tampilan gambar)
  8. Siap publish.

3 Comments

Filed under akti-vitas, narasumber, tips-n-trik