BLOG AHDIAT

Langkah-Langkah Membangun Website hatsunemiku-page Dengan Aplikasi Adobe Dreamweaver CS5 ver. 11 Build 4909 (Trial) + WampServer

Membangun server:

1. Install perangkat server pada komputer yang akan digunakan untuk membuat website ini (misalkan wamp server atau xampp).

2. Setelah proses instalasi selesai, cek apakah sudah jalan / aktif atau belum web servernya dengan cara: buka web browser – ketik localhost. Jika yang keluar pesan kesalahan maka jalankan terlebih dahulu web servernya.
3. Jika pengguna wamp server, cari di windows explorer di direktori C:\wamp lalu klik ganda wampmanager.exe untuk menjalankan server ini. Lalu, cek ulang dengan melakukan refresh pada web browser.

4. Untuk website ini, buka C:\wamp\www. Pada path ini, buat direktori baru untuk website ini agar dapat lebih rapih pengaturan data-datanya (misalkan nama direktorinya ss).

5. Di dalam direktori ss, buat beberapa direktori baru untuk pengelompokan beragam jenis file (misalkan direkori untuk lagu, gambar, video).

Menyiapkan halaman:

1. Klik File – New (atau tekan Ctrl+N pada keyboard).

2. Pilih jenis bahasa yang akan digunakan (misalkan HTML) lalu pilih layout yang akan digunakan (misalkan 2 column fixed, left sidebar, header and footer) lalu klik create.

3. Pada kolom header, masukkan (insert) gambar yang ingin dijadikan header halaman webnya. Klik insert_logo, lalu pilih Insert (yang ada di menu bar) dan pilih Image. Pilih gambarnya, lalu tekan OK. Saat gambar sudah tampil, rapihkan tampilan gambar tersebut dengan menggeser gambar ke arah yang kita inginkan lalu perbesar atau perkecil dimensi gambar jika perlu.

4. Pada sidebar yang ada disebelah kiri, klik link one (pastikan tampilan di dreamweaver dijadikan split) <li><a href="#">Link one</a></li> hapus tanda pagar dan ganti dengan nama halaman apa yang akan dituju oleh link ini (misalkan home.html) lalu hapus dan ganti tulisan Link one pada code dan ganti dengan nama yang kita inginkan (misalkan Home). Lakukan langkah ini sebanyak link yang ingin diciptakan (misalkan pada web ini ada enam link).

5. Untuk mengubah tampilan pada sidebar (seperti warna background atau warna link). Klik link Home yang telah kita buat sebelumnya (atur tampilan dreamweaver dari Designer menjadi Classic yang ada di pojok kanan atas) lihat sebelah kanan aplikasi pada kolom Adobe Browserlab – CSS Styles. Klik ganda background-color (focus) lalu pilih warna background yang dinginkan (misalkan #2ed1a2 untuk mewakili warna hijau-tosca) dan klik ok. Klik color (visited) lalu pilih warna tulisan yang diinginkan (misalkan hitam) dan klik ok. Klik background-color (visited) lalu pilih warna background yang diinginkan (misalkan putih) klik ok jika sudah.

6. Lalu, tentukan warna / gambar background website ini. Lihat pada source code halaman ini, lihat baris paling atas pada background-color: #FFF ganti dengan code hexa warna yang kita inginkan (misalkan #000 untuk warna hitam). Lalu, lihat perubahannya.

7. Pada kolom dibawah siderbar, tambahkan gambar atau apapun yang diinginkan oleh anda.

8. Pada kolom footer, ubah tulisan yang sudah ada secara default semau anda (misalkan ucapan terima kasih atau apapun).

9. Simpan halaman yang telah anda buat ini sebanyak halaman yang dibutuhkan oleh website (misalkan website hatsunemiku-page ini membutuhkan 10 halaman). Lakukan penyimpanan sejumlah yang dibutuhkan dan jangan lupa beri nama halamannya.

home.html:

1. Pada halaman home.html, ubah konten default dari aplikasi ini lalu ganti sesuai yang anda inginkan (misalkan pada website ini diisi tentang penjelasan tokoh Hatsune Miku).

2. Rapihkan konten yang telah kita isi. Jika sudah, buat halaman lain.

music.html:

1. Pada halaman music.html, kita akan membuat sebuah pemutar musik. Buat judul halaman dengan code html <h1>*judul_halamannya*</h1>.

<p>Hatsune Miku - World is Mine</p>   

</audio>

Tulisan yang diapit tanda <p></p> akan ditampilkan sebagai satu paragraf hingga tanda </p>. Lalu, code selanjutnya adalah untuk menampilkan fungsi audio dengan code html. Kendali pemutar musik controls maksudnya adalah akan ditampilkan kendali normal sebuah pemutar musik yang terdiri dari tombol play, pause, seeking, dan volume. Lalu, ukuran tingginya 50 dan lebar 100 (dalam pixel). Sumber data yang akan digunakan pemutar musik ini src="cisum/Hatsune Miku - World is Mine.mp3 pada direktori cisum. type="audio/mpeg" /> maksudnya adalah tipe file yang bisa dibaca berupa file audio (suara) dengan format mpeg tapi bisa membaca ekstensi file .mp3 dan type="audio/ogg" untuk membaca ekstensi file .ogg untuk kepentingan streaming audio website ini. Lalu, baris code <embed height="50px" width="100px" src="cisum/Hatsune Miku - World is Mine.mp3" untuk menambahkan / menempelkan pemutar musik ini ke halaman website dengan tinggi 50 dan 100 (dalam pixel). Blok code pemutar musik ini ditutup dengan code </audio>.

2. Jika kita ingin membuat lebih dari satu pemutar musik, maka lakukan langkah yang sebelumnya telah dijabarkan sejumlah pemutar musik yang kita ingin buat lagi.

imaji.html:

1. Buat judul halaman dengan mengapit tulisan didalam code <h1></h1>.

2. Buat tabel. Klik Insert – Table. Pilih ukuran tabelnya (misalkan pada website ini rows / barisnya 4 dan columns / kolomnya 2). Atur lebar isi konten pada tabelnya dan atur ketebalan garis tabelnya. Atur juga apakah ingin ditambah header tabelnya atau tidak.

3. Setelah tabel sudah jadi, isi konten yang akan dimasukkan ke tabel (misalkan pada website ini diisi gambar-gambar karakter Hatsune Miku). Klik di dalam salah satu kolom klik Insert – Image. Pilih gambar yang ingin ditampilkan jika sudah klik OK. Rapihkan tampilan gambar agar terlihat proposional. Jika sudah, isi kolom tabel yang lain dengan gambar-gambar lainnya sesuai dengan langkah yang telah dijabarkan sebelumnya.

video.html:

1. Buat judul halaman dengan mengetik nama judul halamannya di antara tanda <h1></h1>.

2. <script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>

Source code diatas mendeklarasikan bahwa akan menginjeksikan skrip dengan tipe javascript dan sumber datanya menggunakan javascript flowplayer-3.2.4.min.js milik flowplayer Ltd.

<a href="oediv/CV01 Hatsune Miku - Innocence Live in Tokyo, Japan - 1080p HD - YouTube.FLV"

style="display:block;width:520px;height:330px;border:2px;"

id="player">Hatsune Miku - Innocence</a>

flowplayer("player", "flowplayer-3.2.4.swf");

</script>

Alamat sumber referensi data yang akan dipakai pada path oediv/CV01 Hatsune Miku - Innocence Live in Tokyo, Japan - 1080p HD - YouTube.FLV file yang terbaca hanya berformat flash video. Tampilan frame video akan berefek melayang dan memiliki lebar 520 dan tinggi 330 dengan ketebalan garis bingkai 2 (semua ukuran dalam pixel). id method kode diatas diinisialkan dengan player dan label yang akan ditampilkan Hatsune Miku – Innocence. Lalu, method kode diatas akan ikut menggunakan aplikasi berbasis flash milik flowplayer juga dengan nama flowplayer-3.2.4.swf.

3. Jika ingin membuat lebih dari satu video player, maka ubah baris kode id="player"> yang diapit tanda petik (“ “) (misalkan ubah menjadi player1, player2, dsb).

vocaloid.html:

1. Ubah konten default dari aplikasi ini dengan isi apa saja yang ingin ditampilkan pada halaman ini di bagian body pada kode yang ada (misalkan pada halaman ini akan ditampilkan keterangan tentang vocaloid dan contoh karakter yang ada).

kagamine.html:

1. Tulis judul halaman ini dengan mengapitnya di dalam tanda <h1></h1>.

2. Masukkan gambar dengan cara klik Insert (pada menu bar) – Image lalu pilih gambar yang diinginkan (misalkan untuk halaman ini gambar yang akan digunakan gambar karakter kagamine len-rin) klik OK.

3. Untuk memasukkan konten yang berupa tulisan, tulislah di antara tanda apit <p></p> (misalkan disini akan ditulis sejarah tentang karakter ini).

4. Jika ingin menulis sub-judul maka tulislah dengan mengapitnya di antara tanda <h2></h2>.