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

3 responses to “Mengenalkan PageBreeze Free HTML Editor

  1. salam aja ya bapak ^_^ dari yang pernah belajar banyak tentang Blog dari Panjenengan……

  2. blog walking

    kunjungan perdana n salam kenal

  3. ropergazza

    mas cara buat banner d pagebreeze gmna?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s