Josheet MMK2 Pratikum
-
Upload
rezi-mutiara-fenorita -
Category
Documents
-
view
229 -
download
0
Transcript of Josheet MMK2 Pratikum
-
7/22/2019 Josheet MMK2 Pratikum
1/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
Standar Kompetensi : Desain Web Statis Dan Dinamis
Kompetensi Dasar : Pembuatan Web Dinamis
A. Tujuan Pembelajaran1. Siswa mampu mepersiapka softwear dinamis.2. Siswa mampu membuat dan memdisain halaman web dinamis.3. Siswa mampu menghubungkan antar halaman web (link).4. Siswa mampu melakukan pengujian halaman web dinamis.
B. Alat dan Bahan1. PC (Personal Computer)2. Aplikasi Macromedia Dreamweaver3. Job Sheet
C. Materi SingkatWeb Dinamis adalah sebuah web yang isinya bisa dirubah sewaktu-waktu tanpa melalui
perubahan code pada file web, akan tetapi melalui sebuah halaman administrator. Content yang
tampil dalam Web Dinamis pun tersimpan pada sebuah database, sehingga orang awam pun bisa
merubah isi dari web (content) tanpa menguasai Bahasa Pemrograman Web. Biasanya web ini
tersusun dari beberapa bahasa pemrograman yaitu HTML, PHP, CSS dan tentunya terhubung
dengan database MySQL.
Macromedia Dreamweaver is sebuah editor HTML profesional untuk mendesain secara visual
dan mengelola website dan halaman web. Konsep WYSYWIG (What You See IS What You Get) HTML
(HyperText Mark-up Language) akan memberikan anda membuat membuat halaman web dan web
sites secara mudah dan cepat. Tetapi dibalik semuanya itu, dreamweaver juga memberikan anda
kemudahan mempelajari DHTML (Dynamic HTML), yang bisa membuat website lebih menarik dan
lebih interaktif. Tidak hanya berhenti disini, dreamweaver juga mempunyai fasilitas FTP (File
Transfer Protocol) untuk upload situs anda ke Internet ketika proses desain sudah selesai dibuat.
http://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.htmlhttp://www.chivaz.net/2012/01/pengertian-dan-perbedaan-web-statis-dan.html -
7/22/2019 Josheet MMK2 Pratikum
2/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
Mengenal Peralatan Kerja Macromedia Dreamweaver
1. Starter Page Dimana terdapat pilihan seperti membuka dokumen lama, membuat dokumen baru sesuai
bahasa pemograman yang kita inginkan. Seperti gambar di bawah ini.
2. Halaman Kerja macromedia Dreamweaver
Document
Window
-
7/22/2019 Josheet MMK2 Pratikum
3/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
Document Window
Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen yang sedang
diedit. Pada Document Window terdapat Title Bar yang menampilkan judul halaman, fasilitas Zoom,
Document Toolbar, dan Tag Selector.
Menu Bar
Menu bar pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify, Format, Commands, Site,
Window, dan Help. Setiap menu mempunyai beberapa submenu sesuai dengan kategorinya, selain itu
juga mempunyai fungsi yang berbeda-beda.
Document Toolbar
Document
ToolbarMenubar Panel Group
Tag Selector Propertiy Inspector
-
7/22/2019 Josheet MMK2 Pratikum
4/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja dokumen pada
dengan cepat, diantaranya show Code view, Show Code and Design views, dan Show Design view.
Tag Selector
Tag selector berfungsi untuk menampilkan tag HTML dari objek yang terseleksi. Kita dapat meng-klik
untuk memilih keseluruhan elemen dokumen. Tag Selector ini terdapat pada Document
Window, dan terletak di bawah sebelah kiri.
Panel Groups
Panel groups merupakan salah satu fasilitas yang terdapat pada Macromedia Dreamweaver yang
berfungsi untuk membantu dalam mengedit suatu halaman web. Panel Groups terletak di sebelah kanan
layar kerja dan terdiri dari beberapa panel. Untuk menampilkan panel, klik ganda pada nama panel
tersebut.
D. Langkah Kerja1. Buka aplikasi Macromedia Dreamweaver , setelah muncul starter page pada bagian Create New
pilih HTML. Maka akan muncul halaman kerja Macromedia Dreamweaver kita.
2. Ganti title dari document kita menjadi home
3. Tambah kan table pada halaman jerja dengan cara klik icon kemudian setting tableseperti gambar di bawah ini. Kemudian Klik Ok.
-
7/22/2019 Josheet MMK2 Pratikum
5/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
4. Maka akan terlihat tampilan table kita seperti gambar dibawah ini.
5. Ubah ukuran table pada Property Inspector W : 1100px dan H : 700 px seperti pada gambar.
6. Setelah selesai lakukan penyatuan pada table-tabel kita denagan menggunakan Merges SelectedCell Using Spans
7. Buat lah table anda sehingga memiliki tampilan seperti di bawah ini
-
7/22/2019 Josheet MMK2 Pratikum
6/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
8. Langkah selan jutnya adalah mengganti background web kita dengan cara pada documenttoolbar pilih code kemudian isikan kode berikut dibawah Home
-
7/22/2019 Josheet MMK2 Pratikum
7/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
11.Pilih header yang akan kita gunakan kemudian klik ok.
12.Pada Imeg Tag Accessibility Attributes kita klik Ok. Sehingga muncul tampilan seperti dibawahini.
-
7/22/2019 Josheet MMK2 Pratikum
8/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
13.Selanjutnya untuk mebuat tempat button pada kolom pertama baris kedua tabel kita klik,kemudian kita tambahkan tabel seberti setting di bawah ini.
14.Maka akan terlihat tampilan seperti dibawah ini.
-
7/22/2019 Josheet MMK2 Pratikum
9/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
15.Kemudian lakukan point 10, 11 dan 12 pada setiap kolom yang kita tambahkan.16. Atur setiap ukuran button W 250 dan H 100 , sehingga muncul tampilan seperti berikut.
17.Selanjutnya pada kolom kedua baris kedua , kita masukan teks dan atur settingnya sesuaikeinginan pada property inspector. Seperti tampilan di bawah ini.
-
7/22/2019 Josheet MMK2 Pratikum
10/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
18.Selanjutnya pada kolom ketiga baris kedua kita inputkan animasi gif dengan cara yang samapada poin 10, 11 dan 12. Sehinnga muncul tampilan seperti dibawah ini.
19.Selanjutnya simpan file tadi dengan nama home.html pada folder
20.Klik ikon file yang kita simpan pada folder tadi . Maka akan muncul tampilan seperti dibawah ini.
-
7/22/2019 Josheet MMK2 Pratikum
11/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
21.Selanjutnya buka file profile.html yang terdapat pada folder kita pada folder dengan caraklik>Open kemudian pilih file Profil yang akan kita buka selanjutnya klik Open.
22.Lakukan pengeditan pada isi profile.
23.Selanjutnya kita akan membuatkan link pada button kita. Dengan cara buka halaman home> klikbutton home pada property inspector pada link klik browse for file.
browse for file
24.Kemudian pilih file home.html yang akan di jadikan link kita > klik oke.
-
7/22/2019 Josheet MMK2 Pratikum
12/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
25.Lakukan hal yang sama pada setiap button pada setiap halaman. Pada button profil berikan linkprofile.html.
26.Setelah selesai, save semua halama kerja kita tadi. Kemudian coba jalankan Klik ikon home padafolder kita.
27.Dan coba klik tiap tiapan button yang telah kita link kan. Maka button tersebut apa bila kita klikakan menampilkan halaman web lain sesuai dengan judulnya.
-
7/22/2019 Josheet MMK2 Pratikum
13/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
E. PenugasanBuatlah sebuah halaman web dengan judul Galeri yang pada isinya terdapat video dan link untukmendownload video tersebut. Kemudian gabungkan halaman tersebut dengan halaman web yang
telah kita kerjakan sebelumnya. Disainlah halaman web tersrsebut seperti tampilan di bawah ini.
-
7/22/2019 Josheet MMK2 Pratikum
14/14
SMK N 2 Bukittinggi Lembaran : Job Sheet
Kelas : XI Mata Pelajaran : Produktif Multimedia
Semester : Genap Topik : Macromedia Dreamweaver
Waktu : 2 x 50 Judul : Mengoperasikan Macromedia
Dreamweaver
by: Rezi Mutiara Fenorita
F. Lembaran EvaluasiNama Siswa :Kelas :
No Aspek Penilaian Standar Nilai Nilai Diperoleh Keterangan
1 Periapan sebelum pratikum 10
2 Menjalankan Macromedia Dreamweaver 20
3 Mendisain halaman web 30
4 Membuat Link antar halaman 30
5 Menjalankan halaman web 10
Total Skor 100
Catatan :