Skenario Tutorial untuk Dreamweaver

download Skenario Tutorial untuk Dreamweaver

of 16

  • date post

    26-Nov-2015
  • Category

    Documents

  • view

    41
  • download

    5

Embed Size (px)

description

Media Pembelajaran

Transcript of Skenario Tutorial untuk Dreamweaver

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 1

    Disk yang terdapat pada Tutorial berbasis Web ini memiliki AutoRun, yaitu tutorial

    tersebut dapat tampil langsung secara otomatis tanpa membuka folder disknya.

    Adapun cara membuat autorun tersebut:

    1. Membuat file berformat *.bat dengan nama autorun.bat

    1. Buka program Notepad. Klik Start All Programs Accessories Notepad.

    2. Ketikkan seperti di bawah :

    3. Pilih lokasi penyimpanan di folder yang akan dikopikan/disalin ke disk.

    4. Klik menu File Save . Setelah muncul kotak dialog Save As, pada kotak isian Save As Type pilih All Files (*) . Seperti ditunjukkan pada gambar di bawah :

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 2

    2. Pada kolom Filename, tuliskan autorun.bat. Lalu pilih tempat penyimpanan di folder yang akan di burning ke CD.

    Buat file berformat *.inf dengan nama autorun.inf

    1. Caranya sama dengan no. 1 . Ketikkan di Notepad seperti gambar di bawah:

    2. Simpan hasilnya di folder yang sama beserta penyimpanan file di atas dengan nama autorun.inf .

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 3

    Tutorial ini dibuat menggunakan software Macromedia Dreamweafer 8. Keduanya

    merupakan aplikasi pembuat HTML dan memiliki kelebihan masing-masing dan

    saling melengkapi kekurangan, oleh karena itu pembuatan tutorial ini

    menggunakan kedua aplikasi ini (Aplikasi tidak bisa digunakan secara

    bersamaan).

    Klik HTML pada bagian Create New seperti ditunjukkan pada gambar di atas.

    Sebelum mengisi halaman HTML, kita membuat kolom-kolom table agar tampilan

    HTML nantinya mudah diatur. Adapun langkahnya sebagai berikut :

    1. Klik Insert Table 2. Akan muncul kotak dialog Table seperti di bawah :

    Macromedia Dreamweafer 8

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 4

    Isi kolom Rows dan Columns sesuai dengan jumlah baris dan kolom yang

    diinginkan. Border thickness yaitu ketebalan border table (isi sesuai

    keinginan). Klik OK

    3. Ketik/Isi materi pada kolom dan baris yang telah dibuat

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 5

    1. Berupa gambar yang dibuat di Adobe Photoshop dan merupakan gambar berjalan yang berjalan dari kanan ke kiri. Adapun cara membuat gambar berjalan sebagai berikut :

    1.1 Klik split seperti ditunjukkan pada gambar di bawah

    1.2 Tempatkan kursor pada kolom/baris table yang diinginkan

    1

    2

    3

    4

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 6

    1.3 Pada kotak di atas lembar kerja (berupa kode-kode HTML) ketik kode berikut

    2. Berupa gambar yang dibuat di Adobe Photoshop. Adapun isinya yaitu hal-

    hal yang harus diperhatikan sebelum memulai tutorial. 3. Berupa gambar yang terlink menuju halaman software pendukung. Adapun

    cara membuatnya sebagai berikut : 3.1 Siapkan terlebih dahulu 2 gambar yang ingin di link. Dapat dibuat di

    Adobe Photoshop 3.2 Klik Insert Image Objects Rollover Image . 3.3 Maka muncul kotak dialog Rollover Image, seperti gambar di bawah:

    Masukkan file gambar pada Original image dan Rollover Image. Adapun Rollover Image maksudnya yaitu gambar yang akan tampil saat original image di klik. Masukkan halaman yang akan terlink pada isian When clicked, Go to URL

    4. Berupa gambar yang terlink menuju halaman Beranda. Cara pembuatannya seperti pada no 3.

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 7

    1. Berupa gambar yang dibuat di Adobe Photoshop 2. Berupa gambar yang terlink menuju software installer. Cara pembuatannya

    seperti pada no 3 di halaman Intro. 3. Berupa gambar yang terlink menuju halaman Beranda. Cara pembuatannya

    seperti pada no 3 di halaman Intro. 4. Berupa gambar yang terlink menuju halaman Intro. Cara pembuatannya

    seperti pada no 3 di halaman Intro.

    1

    2

    3

    4

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 8

    1. Berupa gambar yang dibuat di Adobe Photoshop 2. Berupa teks berjalan. Adapun pembuatan teks berjalan tersebut sebagai

    berikut : 1. Letakkan kursor pada bagian kolom/baris tempat teks berjalan.

    1

    3

    4

    8 5

    6

    7 9

    10

    2

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 9

    2. Ketikkan kode berikut pada bagian split : Media

    Pembelajaran Fisika

    3. Berupa spry menu yang dibuat di software CSS3 Menu. Adapun tampilannya sebagai berikut :

    Cara pembuatan menu di aplikasi ini sangat mudah. Kita hanya memberi nama pada menu yang telah disediakan. Kemudian klik Insert to page lalu pilih kolom/baris HTML yang diinginkan sebagai tempat menu.

    4. Berupa icon button. Cara pembuatannya sebagai berikut : 4.1. Klik Insert Media Flash Button 4.2. Maka muncul tampilan sebagai berikut :

    Pilih bentuk button yang diinginkan pada pilihan Style Ketik nama button pada Button Text

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 10

    Browse halaman yang akan terlink nantinya pada pilihan Link 5. Berupa slide gambar. Adapun cara pembuatannya sebagai berikut :

    5.1. Klik Insert Media Image Viewer 5.2. Maka muncul kotak dialog Save Flash Element

    Ketik nama file Klik Save

    5.3. Pada bagian Flash Element yang terletak di bagian kiri, pada pilihan image URLs masukkan gambar-gambar yang akan di-slide show-kan

    5.4. Klik OK 6. Berupa file music yang berformat SWF. Cara memasukkannya yaitu :

    Klik Insert Media Shockwafe Masukkan file music

    7. Berupa gambar yang terlink menuju halaman Intro. Cara pembuatannya seperti pada no 3 di halaman Intro.

    8. Berupa gambar animasi yang berformat GIF 9. Berupa teks yang diketik pada dreamweaver 10. Berupa gambar berformat SWF yang cara pembuatannya seperti pada no. 6

    di atas.

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 11

    1. Berupa gambar yang dibuat di Adobe Photoshop 2. Berupa icon button yang pembuatannya seperti pada no. 4 di halaman

    Beranda 3. Berupa spry menu yang pembuatannya seperti pada no. 3 di halaman Intro 4. Berupa gambar berformat JPG 5. Teks yang diketik pada Dreamweaver

    1

    2

    3 4

    5

    6

    8 7

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 12

    6. Berupa gambar animasi berformat GIF 7. Berupa teks yang terlink menuju power point yang berekstensi swf 8. Berupa teks yang terlink menuju materi lain (komputer/laptop harus

    terhubung dengan internet)

    Secara keseluruhan spesifikasi dan cara pembuatan pada bagian materi lainnya sama dengan penjelasan di atas

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 13

    1

    2

    3

    5

    4

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 14

    1. Berupa gambar yang dibuat di Adobe Photoshop 2. Berupa spry menu yang pembuatannya seperti pada no. 3 di halaman Intro 3. Teks yang diketik pada Dreamweaver 4. Berupa teks yang terlink menuju materi lain (komputer/laptop harus

    terhubung dengan internet) 5. Berupa file berformat SWF yang cara membuatnya seperti pada no.6 di

    halaman Beranda 6. Teks yang diketik di Dreamweaver 7. Berupa file berformat SWF yang cara membuatnya seperti pada no.6 di

    halaman Beranda 8. Berupa teks yang terlink menuju materi lain (komputer/laptop harus

    terhubung dengan internet)

    7

    6

    8

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 15

    1. Berupa gambar yang dibuat di Adobe Photoshop 2. Berupa spry menu yang pembuatannya seperti pada no. 3 di halaman Intro 3. Berupa teks yang terlink menuju slide show Power Point yang telah ter-

    autorun 4. Berupa teks yang terlink menuju materi lain (komputer/laptop harus

    terhubung dengan internet)

    1

    2

    3

    4

  • FLUIDA DINAMIS

    MEDIA PEMBELAJARAN FISIKA 16

    1. Berupa gambar yang dibuat di Adobe Photoshop 2. Berupa spry menu yang pembuatannya seperti pada no. 3 di halaman Intro 3. Berupa gambar berformat JPG 4. Berupa teks yang terlink menuju materi lain (komputer/laptop harus

    terhubung dengan internet)

    1

    2

    3

    4