SK. 4 Mengelola Isi Halaman Web KD. 4.3 Mengedit Informasi Sesuai Dengan Kebutuhan

Transkripsi

1 SK. 4 Mengella Isi Halaman Web KD. 4.3 Mengedit Infrmasi Sesuai Dengan Kebutuhan Jb 01 Judul : Membuat dan Memanipulasi Halaman Web Dengan Dreamweaver Tujuan: Setelah menyelesaikan bahasan ini, peserta harus dapat: 1. Membuat template halaman web 2. Membuat isi dan memanipulasinya 3. Menggunkan menu table 4. Mengganti dan memasukkan vide 5. Membuat link ke halaman web lain Waktu : 1 x 30 menit Bahan dan peralatan yang digunakan : 1. Kmputer minimal Pentium 4 2. CPU 3. Mnitr 4. Sftware dreamweaver 5. Vide dan file yang mendukung (gambar) Keselamatan Kerja : a. Pergunakan alat kerja sesuai dengan fungsinya b. Jangan bercanda dalam pelaksanaan praktek c. Gunakan alas kaki (sepatu) dari bahan karet dan tebal e. Selalu menghindari anggta tubuh dari bahaya listrik Teri Singkat 1. Pengertian Web Secara terminlgi, website adalah kumpulan dari halamanhalaman situs, yang biasanya terangkum dalam sebuah dmain atau subdmain, yang tempatnya berada di dalam Wrld Wide Web (WWW) di Internet. Sebuah halaman web adalah dkumen yang ditulis dalam frmat HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu prtkl yang menyampaikan infrmasi dari server website untuk ditampilkan kepada para pemakai melalui web brwser, seperti firefx, pera, internet explre, dsb. Website merupakan sebuah cara untuk menampilkan apa yang Anda inginkan di Internet. Siapa saja di dunia ini dapat mengunjunginya, kapan saja mereka dapat mengaksesnya, tak terbatas leh ruang dan waktu selama si pengakses ada perangkat

2 keras yang digunakan seperti kmputer atau laptp dan ada kneksi internet. 2. Jenis-jenis Web Begitu pesatnya perkembangan teknlgi infrmasi sehingga dalam perjalanannya, website mengalami perkembangan-perkembangan dan pembagian berbagai macam jenisnya. Berikut adalah macammacam website : 2.1. Jenis-jenis website berdasarkan sifatnya : Web dinamis : merupakan website yang kntennya sering diperbarui, dan pengunjung bisa berinteraksi melalui web ini seperti misal memberikan kmentar, menulis artikel. Jadi disini terjadi interasi dua arah. Cnthnya : Web statis : merupakan website yang kntennya sangat jarang diubah, pengunjung hanya bisa melihat dan mengambil sesuatu dari web tersebut (dwnlad), akan tetapi pengunjung tidak bisa melakukan prses pengiriman (uplad) seperti tidak ada fasilitas kmentar, tulis artikel, plling, dsb. Jadi interaksi hanya berlangsung satu arah, dari website kepada pengunjung Jenis-jenis website berdasarkan tujuannya : Persnal Web : website milik perserangan yang berisi tentang infrmasi pribadi seserang Crprate Web : website yang dimiliki leh perusahaan Prtal web : website yang memiliki banyak layanan seperti layanan berita, , uplad file, psting tulisan, dwnlad. Misal : peserta.ppsdms.cm, papirus.ugm.ac.id Frum web : sebuah website yang bertujuan sebagai frum diskusi dan share inf. Misalnya : ww.kaskuk.us Disamping itu ada juga website seperti e-bangking, e- Payment, e-ticketing 2.3. Jenis-jenis website berdasarkan bahasa pemrgraman yang digunakan : Server Side : website yang menggunakan bahasa pemrgraman kepada tersedianya server. Seperti PHP, ASP dan lain sebagainya. Jika tidak ada server maka website yang dibangun menggunakan bahasa pemrgraman tersebut tidak bisa berjalan sebagaimana mestinya.

3 Client Side : website yang tidak membutuhkan server dalam pengaksesannya, bisa langsung diakses dengan brwser saja. Misalnya : html 3. Langkah Kerja Dreamweaver merupakan sebuah HTML editr prfessinal yang digunakan untuk mendesain secara visual dan mengella situs web beserta halaman web. Langkah untuk membuat halaman Web sebagai berikut : Membuat flder utama yang akan diisi dengan semua file yang dibutuhkan untuk membuat situs Mendefinisikan situs Membuat file index.html dan file-file lain yang dibutuhkan untuk hyperlink Mempublish situs Berikut ini akan ditunjukkan langkah-langkah mengella halaman web dengan menggunakan bahan-bahan (file gambar, vide, teks) yang telah disediakan leh Macrmedia Dreamweaver 8 dalam flder cafe_twnsend. a. Membuat flder utama 1. Buatlah flder baru dengan nama lcal_sites di drive E. 2. Buka C:\Prgram Files\Macrmedia\Dreamweaver 8\Tutrial_assets\ cafe_twnsend\. 3. Cpy flder cafe_twnsend ke dalam flder lcal_sites. Flder cafe_twnsend adalah flder yang akan digunakan sebagai flder utama (main flder) untuk situs lkal yang akan dibuat b. Mendefinisikan situs Setelah menyiapkan flder tempat menyimpan semua file yang akan digunakan untuk membuat situs, langkah selanjutnya adalah mendefinisikan situs yang akan dibuat.

4 c. Membuat file index.html Setelah mendefinisikan site, langkah selanjutnya adalah membuat file index.html, yang merupakan file utama dalam membangun sebuah halaman web. hasil yang ingin dicapai adalah halaman web seperti dibawah ini : 4. Mengella Halaman Web a. Membuat table Pilih Insert Table. Pada ktak dialg Insert Table 1. Ketikkan 1 pada ktak Rws dan 3 pada ktak Clumn Ketikkan 700 pada ktak Table Width. Pilih Pixels pada menu pp-up Table Width. Ketikkan 0 pada ktak Brder Thickness, Cell Padding dan Cell Spacing 2. Ketikkan 1 pada ktak Rws dan 1 pada ktak Clumn Ketikkan 700 pada ktak Table Width. Pilih Pixels pada menu pp-up Table Width.

5 Ketikkan 0 pada ktak Brder Thickness, Cell Padding dan Cell Spacing kita bisa mengaturnya dengan prperties sehingga muncul menjadi seperti dibawah ini b. Memasukkan gambar Image placehlder adalah grafik yang digunakan sampai dengan grafik atau gambar akhir siap digunakan dalam halaman web. Image placehlder sangat bermanfaat dalam menyiapkan tata letak halaman web yang berisi gambar, sebelum gambar yang akan digunakan benar-benar siap. 1. Klik dalam baris pertama tabel pertama 2. Pilih Insert > Image Objects > Image Placehlder. 3. Pada ktak Image Placehlder, isikan berikut ini:: ketik banner_graphic pada ktak Name. Isikan 700 pada ktak Width dan 90 pada ktak Height. Klik ktak clr bx dan pilih warna pada clr picker. Pilih reddish brwn (#993300). Klik OK. Simpan halaman web tersebut, File save. Memberi warna pada halaman Untuk memberi warna, aturlah bagian pager prperties

6 Mengisi image placehlder Dbel-klik image placehlder, banner_graphic, pada bagian atas halaman. Pada ktak Select Image Surce, cari flder images yang berada dalam flder cafe_twnsend. Pilih file banner_graphic.jpg dan klik OK. c. Memasukkan animasi flash Memasukkan dan menjalankan file Flash File Flash yang akan dimasukkan adalah flexible messaging area atau file fma Klik di baris kedua pada tabel pertama Pada Prperty inspectr (Windw > Prperties), pilih Center pada menu pp-up Hrz dan pilih Middle pada menu pp-up Vert. Pilih Insert -> Media -> Flash. Pada ktak Select File, pilih file flash_fma.swf, dan klik OK Saat ktak Object Tag Accessibility Attributes muncul, klik OK. Pada Prperty inspectr (Windw > Prperties), klik Play.

7 d. Memasukkan vide Klik di atas gambar street_sign.jpg dalam klm kedua pada tabel kedua Pilih Insert -> Media -> Flash Vide. Pada ktak Insert Flash Vide, pilih Prgressive Dwnlad Vide dari pp-up menu Vide type. Pada ktak URL text bx, klik brwse untuk menentukan flder yang berisi file cafe_twnsend_hme.flv, Pilih Hal Skin 2 pada pp-up menu Skin. Pada ktak Width isi 180 dan pada ktak Height isikan 135. e. Memasukkan bdy text Memilih menu File Open, cari file tersebut (di flder cafe_twnsend) Tekan tmbl Cntrl+A untuk memilih seluruh teks. Pilih Edit -> Cpy untuk mengcpy teks.

8 Tutup file sample_text.txt Pada halaman index.html, klik di klm ketiga tabel kedua (tabel yang berisi 3 klm) Pilih Edit -> Paste. Pada Prperty inspectr (Windw > Prperties), pilih Tp dari pp-up menu Vert. f. Memasukkan text navigasi Teks navigasi adalah teks yang memuat link, yang akan mengarahkan ke dkumen lain. klik pada klm pertama pada tabel yang berisi 3 klm ketikkan kata Cuisine. tekan spasi dan ketikkan kata Chef Ipsum. ulangi langkah tersebut untuk kata-kata berikut: Articles, Special Events, Lcatin, Menu, Cntact Us. Jangan menekan Enter pada saat mengetik kata-kata tersebut. Gunakan spasi untuk memisahkan antar kata, teks akan ditempatkan secara tmatis sesuai dengan lebar tabel. Klik tag <td> di bagian kiri bawah, pada Prperty inspectr (Windw > Prperties), pilih Tp dari pp-up menu Vert, kemudian Simpan. g. Membuat link Sebuah link adalah referensi pada sebuah halaman yang merujuk pada dkumen lain. Langkah-langkah membuat link adalah sebagai berikut: Pilih kata Cuisine Pada Prperty inspectr (Windw > Prperties), klik ikn flder di dekat ktak Link.

9 Pada ktak Select File, cari file menu.html, klik OK Hasilnya, kata Cuisine akan bergaris bawah dan berwarna biru yang mengindikasikan teks tersebut adalah link. Ulangi langkah-langkah 1-3 untuk kata-kata Chef Ipsum, Articles, Special Events, Lcatin, Menu, dan Cntact Us. Simpan kembali file index.html. h. Mem-preview halaman web 1. Pastikan file index.html sudah terbuka 2. Tekan tmbl F12 pada keybard Maka akan ditampilkan halaman web pada brwser Mzilla seperti berikut. Langkah Kerja : 1. Siapkan alat dan bahan yang diperlukan dan letakkan di atas papan kerja 2. Nyalakan kmputer di meja kalian kemudian buatlah halaman web sesuai dengan urutan langkah diatas. 3. Lakukan pengamatan 4. Catatlah setiap langkah dan permasalahan pada table yang telah disediakan 5. Kemudian lakukan langkah perbaikan 6. Jika sudah yakin benar lapran setiap hasil analisis dan pemeriksaan kepada guru

10 7. Mengembalikan alat dan bahan pada tempat semula 8. Bersihkan Prg. Keahlian meja dan ruangan : Disusun : SMK Evaluasi Nama Peserta : Tanggal : AMIRUL MU MININ 1. Kelas/Grup Jelaskan macam-macam : web? JOB Ke : Sidareja.. 2. Buatlah sebuah halaman web dan Isilah table berikut : N Langkah kerja yang dilakukan Gambar hasil tiap langkah kerja 3. Buatlah kesimpulan dari praktkum yang telah dilakukan Hasil pengamatan