SlideShare a Scribd company logo
NAMA                 : MUHAMMAD RIZQI TOHOPI
NIM                  : 131312027
KELAS                :A
SEMESTER             : II
TUGAS                : LAPORAN PRAKTIKUM 4
MATA KULIAH          : DESAIN WEB


Pada praktikum ini, saya latihan membuat sebuah web menggunakan Dreamweaver. Dimana pada
praktikum ini, proses pembuatan belum selesai sepenuhnya.

Pertama saya membuka Dreamweaver, kemudian saya memilih design view untuk melakukan latihan
membuat web. Setelah itu saya membuat tabel, dimana tabel tersebut berfungsi sebagai tempat untuk
meletakkan isi sebuah web. Caranya pilih insert => table, akan muncul kotag dialog. Saya mengisi
untuk baris sebanyak 30 dan kolom 4.




Hasil Tampilan




Selanjutnya saya akan membeikan merge cell pada baris pertama sebelum memasukkan gambar banner
web. Caranya drag baris yang akan di merge cell, kemudian klik kanan => pilih Table => Merge cells.
Hasilnya




                                                                                                      1
Untuk memberikan gambar pada tabel ini, saya mengambil gambar yang saya desain dari photoshop.
Di copy gambar tersebut, kemudian paste di tabel yang sudah di merge. Akan muncul kotak dialog
seperti berikut.




Pilih Yes. Kemudian simpan gambar tersebut di sebuah folder dimana web latihan tadi disimpan.

Hasil Tampilan.




Setelah banner selesai, saya membuat button. Button tersebut terlebih dahulu saya design melalui
photoshop. Cara memasukkan gambar button tersebut, sama seperti memasukkan gambar banner web.




                                                                                                   2
Hasil tampilan




Kemudia saya membuat sebuah tulisan “Selamat Datang Di WEB Kami” dengan memberikan kode
program marque pada kalimat tersebut. Caranya pilih Insert => Tag => Html Tags => Page elements
=> marque




Hasil Tampilan




                                                                                                  3
Berikut Kode Programnya




Selanjutnya saya membuat posisi web di tengah. Caranya terlebih dahulu saya klik tabel kemudian atur
Align pada Properties.




Hasil Tampilan




Selanjutnya saya memasukkan background web, untuk memperindah tampilan web. Caranya klik
diluar table, kemudian pilih Page Properties pada kotak Properties.




                                                                                                       4
Akan muncul kotak dialog, kemudian browse background yang akan dipilih.




Hasil Tampilan




Untuk memberikan warna background pada web pilih




                                                                          5
Hasil Tampilan




Selanjutnya saya membuat Link di setiap button (Home, Kurikulum, Ekstrakurikuler, Alamat). Untuk
memasukkan linknya, terlebih dahulu saya membuat html baru sebagai tempat untuk dijadikan link
pada setiap button.
Cara membuat link, klik gambar Home kemudian browse file link pada kotak properties.




Button Kurikulum, Ekstrakurikuler dan Alamat, cara pembuatan link sama seperti Home.




                                                                                                   6
Hasil Tampilan setelah diberikan Link




Selanjutnya untuk menghilangkan tabel sehingga tampilan web menjadi rapi, ubah format Border dari 1
menjadi 0 pada kotak Properties.




Tampilan Browser Melalui Mozilla Firefox

Tampilan Home




                                                                                                      7
Tampilan Kurikulum




Tampilan Ekstrakurikuler




Tampilan Alamat




                           8

More Related Content

What's hot

Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
hestihariani
 
4 tutorial make a statistic of blog visitor
4 tutorial make a statistic of blog visitor4 tutorial make a statistic of blog visitor
4 tutorial make a statistic of blog visitor
Tri Purwadiyanto
 
Blog tampilan baru
Blog tampilan baruBlog tampilan baru
Blog tampilan baru
Said Haikal Ahmad
 
Proyek web
Proyek webProyek web
Proyek web
Novita J Akerina
 
Membuat Website Personal dengan Microsoft FrontPage
Membuat Website Personal dengan Microsoft FrontPageMembuat Website Personal dengan Microsoft FrontPage
Membuat Website Personal dengan Microsoft FrontPageCarwoto Sa'an
 
URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)
URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)
URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)Nastiti Rahajeng
 
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.PdBELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
RhiEa Chinnie
 
Membuat Bola Mata Di Photoshop
Membuat Bola Mata Di PhotoshopMembuat Bola Mata Di Photoshop
Membuat Bola Mata Di Photoshop
Renra Sedoya
 
Sgs macromedia-dreamweaver-8
Sgs macromedia-dreamweaver-8Sgs macromedia-dreamweaver-8
Sgs macromedia-dreamweaver-8
Sejahtera Affif
 
Kumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/WebsiteKumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/Website
Syahrial HSB
 
Modul Praktikum 13 - Pemrograman Visual
Modul Praktikum 13 - Pemrograman VisualModul Praktikum 13 - Pemrograman Visual
Modul Praktikum 13 - Pemrograman Visual
Debby Ummul
 
Membangun blog
Membangun blogMembangun blog
Membangun blog
Said Haikal Ahmad
 
Dasar dasar DreamWever
Dasar dasar DreamWeverDasar dasar DreamWever
Dasar dasar DreamWever
iswan_di
 
Modul Praktikum 12 - Pemrograman Visual
Modul Praktikum 12 - Pemrograman VisualModul Praktikum 12 - Pemrograman Visual
Modul Praktikum 12 - Pemrograman Visual
Debby Ummul
 
Modul Praktikum 9 - Permograman Visual
Modul Praktikum 9 - Permograman VisualModul Praktikum 9 - Permograman Visual
Modul Praktikum 9 - Permograman Visual
Debby Ummul
 
Modul Praktikum 6 - Pemrograman Visual
Modul Praktikum 6 - Pemrograman VisualModul Praktikum 6 - Pemrograman Visual
Modul Praktikum 6 - Pemrograman Visual
Debby Ummul
 
Modul Praktikum 3 - Pemrograman Visual
Modul Praktikum 3 - Pemrograman VisualModul Praktikum 3 - Pemrograman Visual
Modul Praktikum 3 - Pemrograman Visual
Debby Ummul
 
Cara Mengupload Pattern Di Adobe Photoshop
Cara Mengupload Pattern Di Adobe PhotoshopCara Mengupload Pattern Di Adobe Photoshop
Cara Mengupload Pattern Di Adobe Photoshop
Renra Sedoya
 

What's hot (18)

Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
 
4 tutorial make a statistic of blog visitor
4 tutorial make a statistic of blog visitor4 tutorial make a statistic of blog visitor
4 tutorial make a statistic of blog visitor
 
Blog tampilan baru
Blog tampilan baruBlog tampilan baru
Blog tampilan baru
 
Proyek web
Proyek webProyek web
Proyek web
 
Membuat Website Personal dengan Microsoft FrontPage
Membuat Website Personal dengan Microsoft FrontPageMembuat Website Personal dengan Microsoft FrontPage
Membuat Website Personal dengan Microsoft FrontPage
 
URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)
URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)
URAIAN KEGIATAN MINDJET MINDMANAGER (PRAKTIKUM 1)
 
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.PdBELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
BELAJAR MEMBUAT BLOG UNTUK PEMULA BY RIA PUSPITASARI, S.Pd
 
Membuat Bola Mata Di Photoshop
Membuat Bola Mata Di PhotoshopMembuat Bola Mata Di Photoshop
Membuat Bola Mata Di Photoshop
 
Sgs macromedia-dreamweaver-8
Sgs macromedia-dreamweaver-8Sgs macromedia-dreamweaver-8
Sgs macromedia-dreamweaver-8
 
Kumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/WebsiteKumpulan Koding open source gratis buat blog/Website
Kumpulan Koding open source gratis buat blog/Website
 
Modul Praktikum 13 - Pemrograman Visual
Modul Praktikum 13 - Pemrograman VisualModul Praktikum 13 - Pemrograman Visual
Modul Praktikum 13 - Pemrograman Visual
 
Membangun blog
Membangun blogMembangun blog
Membangun blog
 
Dasar dasar DreamWever
Dasar dasar DreamWeverDasar dasar DreamWever
Dasar dasar DreamWever
 
Modul Praktikum 12 - Pemrograman Visual
Modul Praktikum 12 - Pemrograman VisualModul Praktikum 12 - Pemrograman Visual
Modul Praktikum 12 - Pemrograman Visual
 
Modul Praktikum 9 - Permograman Visual
Modul Praktikum 9 - Permograman VisualModul Praktikum 9 - Permograman Visual
Modul Praktikum 9 - Permograman Visual
 
Modul Praktikum 6 - Pemrograman Visual
Modul Praktikum 6 - Pemrograman VisualModul Praktikum 6 - Pemrograman Visual
Modul Praktikum 6 - Pemrograman Visual
 
Modul Praktikum 3 - Pemrograman Visual
Modul Praktikum 3 - Pemrograman VisualModul Praktikum 3 - Pemrograman Visual
Modul Praktikum 3 - Pemrograman Visual
 
Cara Mengupload Pattern Di Adobe Photoshop
Cara Mengupload Pattern Di Adobe PhotoshopCara Mengupload Pattern Di Adobe Photoshop
Cara Mengupload Pattern Di Adobe Photoshop
 

Viewers also liked

Laporan pratikum iii web
Laporan pratikum iii webLaporan pratikum iii web
Laporan pratikum iii web
rahmi wahyuni
 
Laporan praktikum desain web 5
Laporan praktikum desain web 5Laporan praktikum desain web 5
Laporan praktikum desain web 5rhamalia
 
Os2013 lap1-rizqitohopi
Os2013 lap1-rizqitohopiOs2013 lap1-rizqitohopi
Os2013 lap1-rizqitohopirizqitohopi
 
Os2013 lap5-rizqitohopi
Os2013 lap5-rizqitohopiOs2013 lap5-rizqitohopi
Os2013 lap5-rizqitohopirizqitohopi
 
Os2013 lap4-rizqitohopi
Os2013 lap4-rizqitohopiOs2013 lap4-rizqitohopi
Os2013 lap4-rizqitohopirizqitohopi
 
Os2013 lap2-rizqitohopi
Os2013 lap2-rizqitohopiOs2013 lap2-rizqitohopi
Os2013 lap2-rizqitohopirizqitohopi
 
Os2013 lap3-rizqitohopi
Os2013 lap3-rizqitohopiOs2013 lap3-rizqitohopi
Os2013 lap3-rizqitohopirizqitohopi
 
Laporan praktikum2
Laporan praktikum2Laporan praktikum2
Laporan praktikum2rizqitohopi
 
Os2013 lap6-rizqitohopi
Os2013 lap6-rizqitohopiOs2013 lap6-rizqitohopi
Os2013 lap6-rizqitohopirizqitohopi
 
Laporan praktikum3
Laporan praktikum3Laporan praktikum3
Laporan praktikum3rizqitohopi
 
Laporan praktikum1
Laporan praktikum1Laporan praktikum1
Laporan praktikum1rizqitohopi
 
Laporan praktikum4
Laporan praktikum4Laporan praktikum4
Laporan praktikum4rizqitohopi
 
Tutorial membuat hati mahkota
Tutorial membuat hati mahkotaTutorial membuat hati mahkota
Tutorial membuat hati mahkotarizqitohopi
 
Tugas laporan email
Tugas laporan emailTugas laporan email
Tugas laporan email
radiandi15
 
Ekuivalensi logika
Ekuivalensi logikaEkuivalensi logika
Ekuivalensi logikarizqitohopi
 
Makalah pembuatan email
Makalah pembuatan emailMakalah pembuatan email
Makalah pembuatan email
Septian Muna Barakati
 

Viewers also liked (19)

Laporan pratikum iii web
Laporan pratikum iii webLaporan pratikum iii web
Laporan pratikum iii web
 
Laporan praktikum desain web 5
Laporan praktikum desain web 5Laporan praktikum desain web 5
Laporan praktikum desain web 5
 
Os2013 lap1-rizqitohopi
Os2013 lap1-rizqitohopiOs2013 lap1-rizqitohopi
Os2013 lap1-rizqitohopi
 
Os2013 lap5-rizqitohopi
Os2013 lap5-rizqitohopiOs2013 lap5-rizqitohopi
Os2013 lap5-rizqitohopi
 
Speach
SpeachSpeach
Speach
 
Os2013 lap4-rizqitohopi
Os2013 lap4-rizqitohopiOs2013 lap4-rizqitohopi
Os2013 lap4-rizqitohopi
 
Os2013 lap2-rizqitohopi
Os2013 lap2-rizqitohopiOs2013 lap2-rizqitohopi
Os2013 lap2-rizqitohopi
 
Os2013 lap3-rizqitohopi
Os2013 lap3-rizqitohopiOs2013 lap3-rizqitohopi
Os2013 lap3-rizqitohopi
 
Laporan praktikum2
Laporan praktikum2Laporan praktikum2
Laporan praktikum2
 
Os2013 lap6-rizqitohopi
Os2013 lap6-rizqitohopiOs2013 lap6-rizqitohopi
Os2013 lap6-rizqitohopi
 
Laporan praktikum3
Laporan praktikum3Laporan praktikum3
Laporan praktikum3
 
Speach
SpeachSpeach
Speach
 
Laporan praktikum1
Laporan praktikum1Laporan praktikum1
Laporan praktikum1
 
Laporan praktikum4
Laporan praktikum4Laporan praktikum4
Laporan praktikum4
 
Tutorial membuat hati mahkota
Tutorial membuat hati mahkotaTutorial membuat hati mahkota
Tutorial membuat hati mahkota
 
Himpunan Fuzzy
Himpunan FuzzyHimpunan Fuzzy
Himpunan Fuzzy
 
Tugas laporan email
Tugas laporan emailTugas laporan email
Tugas laporan email
 
Ekuivalensi logika
Ekuivalensi logikaEkuivalensi logika
Ekuivalensi logika
 
Makalah pembuatan email
Makalah pembuatan emailMakalah pembuatan email
Makalah pembuatan email
 

Similar to Laporan praktikum4

MODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XIIMODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XII
Kartiwa G.S., S.Kom
 
Webpage maker part 1
Webpage maker part 1Webpage maker part 1
Webpage maker part 1fhnx
 
Tutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyaniTutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyanimeytafebriyani
 
Materi dreamwever-cs3
Materi dreamwever-cs3Materi dreamwever-cs3
Materi dreamwever-cs3
azman_awan9
 
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
 
Tutorial web abdul malik karim
Tutorial web abdul malik karimTutorial web abdul malik karim
Tutorial web abdul malik karimAmkaAbdulMalik
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapannofayanties
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapanM Paramananda
 
Tutorial web Hendra Hindarsah
Tutorial web Hendra HindarsahTutorial web Hendra Hindarsah
Tutorial web Hendra Hindarsahhendrahindarsah07
 
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
 
2014-47. Pemograman web
2014-47. Pemograman web2014-47. Pemograman web
2014-47. Pemograman web
Syiroy Uddin
 
Macromedia dreamweaver-8
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8
Kiki Saputra
 
Adobe dreamwaver
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaverzhafdiana
 
Cara membuat WEBNOTE
Cara membuat WEBNOTECara membuat WEBNOTE
Cara membuat WEBNOTEaisyasensei
 
Web bunga (tutorial)
Web bunga (tutorial)Web bunga (tutorial)
Web bunga (tutorial)nuristiana_
 

Similar to Laporan praktikum4 (20)

Frontpage
FrontpageFrontpage
Frontpage
 
MODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XIIMODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XII
 
Tutorial ilham
Tutorial ilhamTutorial ilham
Tutorial ilham
 
Webpage maker part 1
Webpage maker part 1Webpage maker part 1
Webpage maker part 1
 
Tutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyaniTutorial project akhir web meyta febriyani
Tutorial project akhir web meyta febriyani
 
Materi dreamwever-cs3
Materi dreamwever-cs3Materi dreamwever-cs3
Materi dreamwever-cs3
 
tutorial-membuat-website-dengan-photoshop-cs2-
tutorial-membuat-website-dengan-photoshop-cs2-tutorial-membuat-website-dengan-photoshop-cs2-
tutorial-membuat-website-dengan-photoshop-cs2-
 
Tutorial web abdul malik karim
Tutorial web abdul malik karimTutorial web abdul malik karim
Tutorial web abdul malik karim
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
 
Tutorial web Hendra Hindarsah
Tutorial web Hendra HindarsahTutorial web Hendra Hindarsah
Tutorial web Hendra Hindarsah
 
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
 
Tutorial ghina
Tutorial ghinaTutorial ghina
Tutorial ghina
 
Laporan desain web iii
Laporan  desain web iiiLaporan  desain web iii
Laporan desain web iii
 
2014-47. Pemograman web
2014-47. Pemograman web2014-47. Pemograman web
2014-47. Pemograman web
 
Macromedia dreamweaver-8
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8
 
Adobe dreamwaver
Adobe dreamwaverAdobe dreamwaver
Adobe dreamwaver
 
Tutorial
TutorialTutorial
Tutorial
 
Cara membuat WEBNOTE
Cara membuat WEBNOTECara membuat WEBNOTE
Cara membuat WEBNOTE
 
Web bunga (tutorial)
Web bunga (tutorial)Web bunga (tutorial)
Web bunga (tutorial)
 

Laporan praktikum4

  • 1. NAMA : MUHAMMAD RIZQI TOHOPI NIM : 131312027 KELAS :A SEMESTER : II TUGAS : LAPORAN PRAKTIKUM 4 MATA KULIAH : DESAIN WEB Pada praktikum ini, saya latihan membuat sebuah web menggunakan Dreamweaver. Dimana pada praktikum ini, proses pembuatan belum selesai sepenuhnya. Pertama saya membuka Dreamweaver, kemudian saya memilih design view untuk melakukan latihan membuat web. Setelah itu saya membuat tabel, dimana tabel tersebut berfungsi sebagai tempat untuk meletakkan isi sebuah web. Caranya pilih insert => table, akan muncul kotag dialog. Saya mengisi untuk baris sebanyak 30 dan kolom 4. Hasil Tampilan Selanjutnya saya akan membeikan merge cell pada baris pertama sebelum memasukkan gambar banner web. Caranya drag baris yang akan di merge cell, kemudian klik kanan => pilih Table => Merge cells. Hasilnya 1
  • 2. Untuk memberikan gambar pada tabel ini, saya mengambil gambar yang saya desain dari photoshop. Di copy gambar tersebut, kemudian paste di tabel yang sudah di merge. Akan muncul kotak dialog seperti berikut. Pilih Yes. Kemudian simpan gambar tersebut di sebuah folder dimana web latihan tadi disimpan. Hasil Tampilan. Setelah banner selesai, saya membuat button. Button tersebut terlebih dahulu saya design melalui photoshop. Cara memasukkan gambar button tersebut, sama seperti memasukkan gambar banner web. 2
  • 3. Hasil tampilan Kemudia saya membuat sebuah tulisan “Selamat Datang Di WEB Kami” dengan memberikan kode program marque pada kalimat tersebut. Caranya pilih Insert => Tag => Html Tags => Page elements => marque Hasil Tampilan 3
  • 4. Berikut Kode Programnya Selanjutnya saya membuat posisi web di tengah. Caranya terlebih dahulu saya klik tabel kemudian atur Align pada Properties. Hasil Tampilan Selanjutnya saya memasukkan background web, untuk memperindah tampilan web. Caranya klik diluar table, kemudian pilih Page Properties pada kotak Properties. 4
  • 5. Akan muncul kotak dialog, kemudian browse background yang akan dipilih. Hasil Tampilan Untuk memberikan warna background pada web pilih 5
  • 6. Hasil Tampilan Selanjutnya saya membuat Link di setiap button (Home, Kurikulum, Ekstrakurikuler, Alamat). Untuk memasukkan linknya, terlebih dahulu saya membuat html baru sebagai tempat untuk dijadikan link pada setiap button. Cara membuat link, klik gambar Home kemudian browse file link pada kotak properties. Button Kurikulum, Ekstrakurikuler dan Alamat, cara pembuatan link sama seperti Home. 6
  • 7. Hasil Tampilan setelah diberikan Link Selanjutnya untuk menghilangkan tabel sehingga tampilan web menjadi rapi, ubah format Border dari 1 menjadi 0 pada kotak Properties. Tampilan Browser Melalui Mozilla Firefox Tampilan Home 7