SlideShare a Scribd company logo
1 of 32
MAMPU MEMBUAT WEB STATIS 
WEB DENGAN PAGE MAKER V.2 
DALAM WAKTU 1 JAM 
MUATAN LOKAL 
CLASS XII IPA 
SMA NEGERI 1 BANGKINANG
• WEB PAGE MAKER V.2 : 
• Merupakan program aplikasi yang dirancang 
untuk membuat website sederhana menjadi 
dinamis, dengan web page maker anda tidak 
perlu lagi dipusingkan denganberbagai macam 
code HTML (HyperText Mark-up Language).
Mengaktifkan WEB PAGE MAKER V.2 
• Klik Menu Start 
• Pilih All Program (pada classic start menu pilih 
Program) 
• Pilih WEB PAGE MAKER V.2
Mengenal Tampilan Lembar Kerja WEB 
PAGE MAKER V.2
Membuat HalamanWeb 
• Membuat Halaman Baru 
• Dapat dilakukan dengan cara : 
• Klick File – New Site
Tampilan dari Web Page Maker
Menambah HalamanWeb 
• Dapat dilakukan dengan cara : 
– Pada Toolbar Pilih Page, klik Add New Page 
– Pada Site Contents Klick New Page
• Maka akan menambah 1 page pada Site 
Contents seperti gambar berikut ini
Menghapus HalamanWeb 
• Dapat dilakukan dengan cara : 
• Klick Halaman yang akan dihapus – Klick 
Delete pada Site Contents
Meng-Copy HalamanWeb 
• Dapat dilakukan dengan cara : 
• Klick Halaman yang akan dicopy – Klick Clone 
Page pada Site Contents
MendesainWeb 
• Memasukkan Text pada Halaman Web 
Dapat dilakukan dengan 2 (dua) cara : 
– Klick Insert – Text 
– Klick Text Pada Toolbar
Memasukkan Gambar pada HalamanWeb 
• Dapat dilakukan dengan cara : 
1. Klick Insert - Image – Form file (file gambar yang 
berada pada data anda) 
Cari File gambar Anda, Pilih salah satu gambar, 
Klick Open 
2. Klick Insert - Image - Form library
Memasukkan Warna Background 
pada Halaman Web 
• Dapat dilakukan dengan cara : 
• Klick Page – Page Properties - Appearance
Memberikan Background Picture 
pada Halaman Web 
• Dapat dilakukan dengan cara : 
• Klick Page – Page Properties - Background
Memberikan Tombol pada Halaman Web 
• Dapat dilakukan dengan cara : 
• Klick Insert – Navigation Bar, Pilih salah satu Klick 
OK
• Ganti Nama Tombol sesuai yang diinginkan, 
• Tentukan Layout sesuai rancangan apakah Horizontal atau 
vertikal 
• lalu klik OK
Membuat HyperLink 
• Klik Index Pada Site Contents 
• Double klik pada Navigation Bar
• Pada Option, pilih profil 
• Link Type : A Page in my Site 
• URL : Pilih Profil
Memasukkan Text Berjalan 
(Marquee) pada Halaman Web 
• Dapat dilakukan dengan cara : 
• Klick Insert – Marquee, Muncul kotak dialog klik 
2 kali untuk dapat menulis teks untuk marquee
Memasukkan Animasi Java pada Halaman Web 
• Dapat dilakukan dengan cara : 
• Klick Insert – Ready-to-use Java Scripts
Mempublish Web Page maker 
• Klik icon Publish(F4) pada toolbar 
• Muncul Kotak dialog, penyimpanan
• Klik Local Directory, lalu pilih Browse 
• Pilih Folder tempat penyimpanan data yang 
akan diektrak dalam bentuk browser, 
kemudian klik Publish
• Buka File Index dengan menggunakan Browser
Membuat halamanWeb dengan Template 
• Memilih Web Template 
• Dapat dilakukan dengan cara : 
• Klick File 
• New Site form Template
• Pilih Template, sebagai contoh kita pilih Template 
Business 
• Pilih salah satu, Contoh : Business 004 
• Klick OK
• Pada Template Business 004 telah disediakan 
3 halaman web 
• 1. index 
• 2. Service 
• 3. produck
• Namun pada Template Business 004 kita juga 
dapat menambahkan halaman
Mengedit HalamanWeb Template 
• Mengedit Text 
• Dapat dilakukan dengan 
cara : 
• Klick Kanan (pada text yang 
akan dirubah) – Edit text 
atau Double Klik
• Sebagai contoh kita coba merubah text pada 
halaman index, seperti dibawah ini :
Mengganti Gambar 
• Dapat dilakukan dengan cara : 
• Klick Kanan (pada gambar yang akan dirubah) 
– Change Image atau double pada gambar tsb 
atau hapus gambar yang ada 
• Cari gambar untuk mengganti gambarnya
Mengganti Tulisan Pada Menu 
• Double Klik Pada 
menu yang telah 
disediakan 
• Muncul kotak 
dialog, ganti 
tulisan yang akan 
dirubah

More Related Content

Viewers also liked

Viewers also liked (7)

Web servers
Web serversWeb servers
Web servers
 
Web servers
Web serversWeb servers
Web servers
 
Web browser
Web browserWeb browser
Web browser
 
Web Browsers
Web BrowsersWeb Browsers
Web Browsers
 
Web Browsers
Web BrowsersWeb Browsers
Web Browsers
 
Types of Servers - Basic Differences
Types of Servers - Basic DifferencesTypes of Servers - Basic Differences
Types of Servers - Basic Differences
 
Web Servers (ppt)
Web Servers (ppt)Web Servers (ppt)
Web Servers (ppt)
 

Similar to Membuat Website Sederhana dalam 1 Jam

Tutorial editor wysiwyg
Tutorial editor wysiwygTutorial editor wysiwyg
Tutorial editor wysiwygAzmi Sulaiman
 
2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan Wordpress2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan WordpressSyiroy Uddin
 
Front page part 1
Front page part 1Front page part 1
Front page part 1fhnx
 
Adobe dreamwaver
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaverzhafdiana
 
Project akhir (tutorial) meyta febriyani uas sem 2
Project akhir (tutorial) meyta febriyani uas sem 2Project akhir (tutorial) meyta febriyani uas sem 2
Project akhir (tutorial) meyta febriyani uas sem 2meytafebriyani
 
Ppt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp teamPpt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp teamcaramembuatweb
 
Tutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyaniTutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyanimeytafebriyani
 
BAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptx
BAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptxBAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptx
BAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptxmargarethnadya2
 
2014-47. Pemograman web
2014-47. Pemograman web2014-47. Pemograman web
2014-47. Pemograman webSyiroy Uddin
 
PDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptxPDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptxRudiHermawan39
 
PDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptxPDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptxRudiHermawan39
 
Laporan praktikum4
Laporan praktikum4Laporan praktikum4
Laporan praktikum4rizqitohopi
 
tutorial-membuat-website-dengan-photoshop-cs2-
tutorial-membuat-website-dengan-photoshop-cs2-tutorial-membuat-website-dengan-photoshop-cs2-
tutorial-membuat-website-dengan-photoshop-cs2-erick1024
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web MatrixMas Tri Sragen
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfBeon Intermedia
 

Similar to Membuat Website Sederhana dalam 1 Jam (20)

Frontpage
FrontpageFrontpage
Frontpage
 
Tutorial editor wysiwyg
Tutorial editor wysiwygTutorial editor wysiwyg
Tutorial editor wysiwyg
 
Tajuk 5
Tajuk 5Tajuk 5
Tajuk 5
 
2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan Wordpress2014-15. Membuat Website dengan Wordpress
2014-15. Membuat Website dengan Wordpress
 
Tutorial ilham
Tutorial ilhamTutorial ilham
Tutorial ilham
 
Front page part 1
Front page part 1Front page part 1
Front page part 1
 
Adobe dreamwaver
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaver
 
Project akhir (tutorial) meyta febriyani uas sem 2
Project akhir (tutorial) meyta febriyani uas sem 2Project akhir (tutorial) meyta febriyani uas sem 2
Project akhir (tutorial) meyta febriyani uas sem 2
 
Ppt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp teamPpt cara membuat website menggunakan wordpress wdwp team
Ppt cara membuat website menggunakan wordpress wdwp team
 
Pengenalan blog
Pengenalan blogPengenalan blog
Pengenalan blog
 
Tutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyaniTutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyani
 
BAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptx
BAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptxBAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptx
BAB 1 MENGGUNAKAN FITUR LANJUT BROWSER.pptx
 
2014-47. Pemograman web
2014-47. Pemograman web2014-47. Pemograman web
2014-47. Pemograman web
 
MODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XIIMODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XII
 
PDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptxPDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptx
 
PDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptxPDWK Pembuatan Blog sebagai Portofolio.pptx
PDWK Pembuatan Blog sebagai Portofolio.pptx
 
Laporan praktikum4
Laporan praktikum4Laporan praktikum4
Laporan praktikum4
 
tutorial-membuat-website-dengan-photoshop-cs2-
tutorial-membuat-website-dengan-photoshop-cs2-tutorial-membuat-website-dengan-photoshop-cs2-
tutorial-membuat-website-dengan-photoshop-cs2-
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web Matrix
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
 

More from fhnx

Video editing@
Video editing@Video editing@
Video editing@fhnx
 
Cara instalasi adobe premier pro 1
Cara instalasi adobe premier pro 1Cara instalasi adobe premier pro 1
Cara instalasi adobe premier pro 1fhnx
 
Front page part 3
Front page part 3Front page part 3
Front page part 3fhnx
 
Front page part 2
Front page part 2Front page part 2
Front page part 2fhnx
 
Html dasar
Html dasarHtml dasar
Html dasarfhnx
 
Pengenalan pascal
Pengenalan pascalPengenalan pascal
Pengenalan pascalfhnx
 
Smst 2
Smst 2Smst 2
Smst 2fhnx
 
Mulok kls 1 smt 1
Mulok kls 1 smt 1Mulok kls 1 smt 1
Mulok kls 1 smt 1fhnx
 
Materi p kn kelas xii
Materi p kn kelas xiiMateri p kn kelas xii
Materi p kn kelas xiifhnx
 
Materi pkn kelas 11
Materi pkn kelas 11Materi pkn kelas 11
Materi pkn kelas 11fhnx
 
Pkn kelas 10
Pkn kelas 10Pkn kelas 10
Pkn kelas 10fhnx
 
Pkn kelas 10
Pkn kelas 10Pkn kelas 10
Pkn kelas 10fhnx
 
Buku x bab 5
Buku x bab 5Buku x bab 5
Buku x bab 5fhnx
 
Buku x bab 4
Buku x bab 4Buku x bab 4
Buku x bab 4fhnx
 
Buku x bab 3
Buku x bab 3Buku x bab 3
Buku x bab 3fhnx
 
Buku x bab 1
Buku x bab 1Buku x bab 1
Buku x bab 1fhnx
 
Buku x bab 2
Buku x bab 2Buku x bab 2
Buku x bab 2fhnx
 
Kelas 2 s2
Kelas 2 s2Kelas 2 s2
Kelas 2 s2fhnx
 
Kelas 2
Kelas 2Kelas 2
Kelas 2fhnx
 
Kelas 1 s2
Kelas 1 s2Kelas 1 s2
Kelas 1 s2fhnx
 

More from fhnx (20)

Video editing@
Video editing@Video editing@
Video editing@
 
Cara instalasi adobe premier pro 1
Cara instalasi adobe premier pro 1Cara instalasi adobe premier pro 1
Cara instalasi adobe premier pro 1
 
Front page part 3
Front page part 3Front page part 3
Front page part 3
 
Front page part 2
Front page part 2Front page part 2
Front page part 2
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Pengenalan pascal
Pengenalan pascalPengenalan pascal
Pengenalan pascal
 
Smst 2
Smst 2Smst 2
Smst 2
 
Mulok kls 1 smt 1
Mulok kls 1 smt 1Mulok kls 1 smt 1
Mulok kls 1 smt 1
 
Materi p kn kelas xii
Materi p kn kelas xiiMateri p kn kelas xii
Materi p kn kelas xii
 
Materi pkn kelas 11
Materi pkn kelas 11Materi pkn kelas 11
Materi pkn kelas 11
 
Pkn kelas 10
Pkn kelas 10Pkn kelas 10
Pkn kelas 10
 
Pkn kelas 10
Pkn kelas 10Pkn kelas 10
Pkn kelas 10
 
Buku x bab 5
Buku x bab 5Buku x bab 5
Buku x bab 5
 
Buku x bab 4
Buku x bab 4Buku x bab 4
Buku x bab 4
 
Buku x bab 3
Buku x bab 3Buku x bab 3
Buku x bab 3
 
Buku x bab 1
Buku x bab 1Buku x bab 1
Buku x bab 1
 
Buku x bab 2
Buku x bab 2Buku x bab 2
Buku x bab 2
 
Kelas 2 s2
Kelas 2 s2Kelas 2 s2
Kelas 2 s2
 
Kelas 2
Kelas 2Kelas 2
Kelas 2
 
Kelas 1 s2
Kelas 1 s2Kelas 1 s2
Kelas 1 s2
 

Membuat Website Sederhana dalam 1 Jam

  • 1. MAMPU MEMBUAT WEB STATIS WEB DENGAN PAGE MAKER V.2 DALAM WAKTU 1 JAM MUATAN LOKAL CLASS XII IPA SMA NEGERI 1 BANGKINANG
  • 2. • WEB PAGE MAKER V.2 : • Merupakan program aplikasi yang dirancang untuk membuat website sederhana menjadi dinamis, dengan web page maker anda tidak perlu lagi dipusingkan denganberbagai macam code HTML (HyperText Mark-up Language).
  • 3. Mengaktifkan WEB PAGE MAKER V.2 • Klik Menu Start • Pilih All Program (pada classic start menu pilih Program) • Pilih WEB PAGE MAKER V.2
  • 4. Mengenal Tampilan Lembar Kerja WEB PAGE MAKER V.2
  • 5. Membuat HalamanWeb • Membuat Halaman Baru • Dapat dilakukan dengan cara : • Klick File – New Site
  • 6. Tampilan dari Web Page Maker
  • 7. Menambah HalamanWeb • Dapat dilakukan dengan cara : – Pada Toolbar Pilih Page, klik Add New Page – Pada Site Contents Klick New Page
  • 8. • Maka akan menambah 1 page pada Site Contents seperti gambar berikut ini
  • 9. Menghapus HalamanWeb • Dapat dilakukan dengan cara : • Klick Halaman yang akan dihapus – Klick Delete pada Site Contents
  • 10. Meng-Copy HalamanWeb • Dapat dilakukan dengan cara : • Klick Halaman yang akan dicopy – Klick Clone Page pada Site Contents
  • 11. MendesainWeb • Memasukkan Text pada Halaman Web Dapat dilakukan dengan 2 (dua) cara : – Klick Insert – Text – Klick Text Pada Toolbar
  • 12. Memasukkan Gambar pada HalamanWeb • Dapat dilakukan dengan cara : 1. Klick Insert - Image – Form file (file gambar yang berada pada data anda) Cari File gambar Anda, Pilih salah satu gambar, Klick Open 2. Klick Insert - Image - Form library
  • 13. Memasukkan Warna Background pada Halaman Web • Dapat dilakukan dengan cara : • Klick Page – Page Properties - Appearance
  • 14. Memberikan Background Picture pada Halaman Web • Dapat dilakukan dengan cara : • Klick Page – Page Properties - Background
  • 15. Memberikan Tombol pada Halaman Web • Dapat dilakukan dengan cara : • Klick Insert – Navigation Bar, Pilih salah satu Klick OK
  • 16. • Ganti Nama Tombol sesuai yang diinginkan, • Tentukan Layout sesuai rancangan apakah Horizontal atau vertikal • lalu klik OK
  • 17. Membuat HyperLink • Klik Index Pada Site Contents • Double klik pada Navigation Bar
  • 18. • Pada Option, pilih profil • Link Type : A Page in my Site • URL : Pilih Profil
  • 19. Memasukkan Text Berjalan (Marquee) pada Halaman Web • Dapat dilakukan dengan cara : • Klick Insert – Marquee, Muncul kotak dialog klik 2 kali untuk dapat menulis teks untuk marquee
  • 20. Memasukkan Animasi Java pada Halaman Web • Dapat dilakukan dengan cara : • Klick Insert – Ready-to-use Java Scripts
  • 21. Mempublish Web Page maker • Klik icon Publish(F4) pada toolbar • Muncul Kotak dialog, penyimpanan
  • 22. • Klik Local Directory, lalu pilih Browse • Pilih Folder tempat penyimpanan data yang akan diektrak dalam bentuk browser, kemudian klik Publish
  • 23. • Buka File Index dengan menggunakan Browser
  • 24. Membuat halamanWeb dengan Template • Memilih Web Template • Dapat dilakukan dengan cara : • Klick File • New Site form Template
  • 25. • Pilih Template, sebagai contoh kita pilih Template Business • Pilih salah satu, Contoh : Business 004 • Klick OK
  • 26. • Pada Template Business 004 telah disediakan 3 halaman web • 1. index • 2. Service • 3. produck
  • 27. • Namun pada Template Business 004 kita juga dapat menambahkan halaman
  • 28. Mengedit HalamanWeb Template • Mengedit Text • Dapat dilakukan dengan cara : • Klick Kanan (pada text yang akan dirubah) – Edit text atau Double Klik
  • 29. • Sebagai contoh kita coba merubah text pada halaman index, seperti dibawah ini :
  • 30. Mengganti Gambar • Dapat dilakukan dengan cara : • Klick Kanan (pada gambar yang akan dirubah) – Change Image atau double pada gambar tsb atau hapus gambar yang ada • Cari gambar untuk mengganti gambarnya
  • 31.
  • 32. Mengganti Tulisan Pada Menu • Double Klik Pada menu yang telah disediakan • Muncul kotak dialog, ganti tulisan yang akan dirubah