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


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


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


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


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


1.3 Pada kotak di atas lembar kerja (berupa kode-kode HTML) ketik kode berikut <th height="62" colspan="2"

scope="col"><marquee direction="left"

class="aa">

<img src="GAMBAR+ANIMASI/selmt.png" width="473"

height="100" />

</marquee></th>

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


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


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


2. Ketikkan kode berikut pada bagian split : <MARQUEE><FONT face="Comic Sans MS" color="White"> Media

Pembelajaran Fisika <FONT></MARQUEE></TD>

</TR>

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


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


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


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


1

2

3

5

4

FLUIDA DINAMIS


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


7

6

8

FLUIDA DINAMIS


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


1

2

3

4

FLUIDA DINAMIS


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


1

2

3

4

Skenario Tutorial untuk Dreamweaver

Documents

Transcript of Skenario Tutorial untuk Dreamweaver