1 / 54

Modul I

Modul I. Memeriksa Informasi untuk Relevansi dan Currency. Modul I. Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis.

mariko
Télécharger la présentation

Modul I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Modul I • Memeriksa Informasi untuk Relevansi dan Currency

  2. Modul I SoftwareWebDesign Softwarewebdesign merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat statis maupun dinamis. Softwareweb design terpopuler yang ada saat ini antara lain: • - Adobe Image Ready, • - Adobe Dreamweaver, • - Adobe Fireworks, • - Microsoft Frontpage • dan lain sebagainya. Memeriksa Informasi untuk Relevansi dan Currency

  3. Modul I Struktur dasar dokumen HTMLberisi elemen-elemen atau tag <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML. <head> </head> : mendefinisikan head dalam sebuah file HTML. <title> </title> : mendefinisikan judul yang hendak ditampilkan pada browser. <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Memeriksa Informasi untuk Relevansi dan Currency

  4. Modul I Format Teks Dasar dalam HTML • Heading, HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan dengan font lebih besar dan tebal daripada teks normal • Paragraf, setiap ada paragraf baru diawali dengan <p> • List, HTML mendukung daftar (list) tidak bernomor, bernomor dan definisiPerformatted Text, dalam HTML, spasi, tab dan baris baru (enter) tidak memiliki pengaruh • Extended Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>. • Memeriksa Informasi untuk Relevansi dan Currency

  5. Modul I • Ganti baris (line break), untuk menulis alamat surat dengan baris-baris pendek, tidak bagus jika menggunakan tag <p>(spasi terlalu lebar) Garis datar (horizontal rule), untuk membuat garis horizontal yang digunakan untuk membatasi bagian-bagian digunakan tag <hr>. Memformat karakter, <b> atau <strong> untuk membuat teks Bold. <i> atau <em> untuk membuat teks Italic. <tt> atau <code> untuk membuat teks typewriter. • Memeriksa Informasi untuk Relevansi dan Currency

  6. Modul I • Dasar Link HTML • Hyperlinkmerupakan sesuatu yang sangat penting di website, sebab hyperlink akan menghubungkan antara satu halaman dengan halaman lainnya baik dalam satu website maupun antar website. • Untuk membuat hyperlink digunakan tag <a>. Huruf a artinya "anchor". Tag <a> biasanya diikuti atribut "href" dimana nilai dari atribut ini merupakan alamat halaman yang akan dituju. • Memeriksa Informasi untuk Relevansi dan Currency

  7. Modul I MACAM-MACAM LINK 1. Relative dan Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat dengan menentukan relative path dari posisi dokumen asal berada. Ini disebut sebagai relative link. a href=”Harga/index.html”>Daftar Harga</a> Alamat (URL) dokumen secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan link, disebut link absolute a href=”http://gmail.google.com”>E-mail Google</a> 2. Link ke suatu bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di dua.html, caranya adalah : Pada dokumen satu.html, dituliskan : <a href=”dua.html#BT”>Tiga</a> Pada bagian yang dituju, dituliskan : <a name=”BT”>Tiga</a> Memeriksa Informasi untuk Relevansi dan Currency

  8. Modul I 3. Link ke suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas : Pada dokumen satu.html, dituliskan : <a href=”#BT”>Tiga</a> Pada bagian yang dituju, dituliskan : <a name=”BT”>Tiga</a> 4. Mailto, link yang langsung menuju ke alamat e-mail. <a href=”mailto:saya@gmail.com?subject=Masuk ga?”>Kirim E-mail</a> • Memeriksa Informasi untuk Relevansi dan Currency

  9. Modul I Menyisipkan Gambar Atribut ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width. Membuat Tabel Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Membuat Frame Frame HTML digunakan untuk membuat tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya merupakan satu halaman HTML yang terpisah. • Memeriksa Informasi untuk Relevansi dan Currency

  10. Modul I Membuat Form Form merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna Macam-macam form : Input, dengan tipe : • 1. Text, password, checkbox, radio button, reset, submit dan hidden. • 2. Text area. • 3. Select. • Memeriksa Informasi untuk Relevansi dan Currency

  11. Modul I Memeriksa informasi untuk relevansi dan keterkinian Pada dasarnya dalam proses pembuatan situs web diperlukan kerjasama antara pihak pengembang dengan klien yang memesan situs web tersebut. Dalam menentukan content (content awal, tambahan maupun revisi) pihak pengembang harus lebih banyak mendengar apa yang menjadi kebutuhan klien. Interaktivitas pengguna menjadi jantung sebuah situs web • Memeriksa Informasi untuk Relevansi dan Currency

  12. Modul I Pentingnya menambahkan interaktivitas pada content halaman sebuah situs web : • 1. Gunakan umpan balik grafik untuk menginformasikan pengguna tentang elemen interaktif, seperti status tombol yang bergulung • 2. Sertakan suara sebagai bentuk umpan balik tambahan agar content tidak terlihat membosankan • 3. Pertimbangkan pemakaian animasi untuk menerangkan elemen penting, atau untuk meminta keikutsertaan pengunjung. • Memeriksa Informasi untuk Relevansi dan Currency

  13. Modul I Beberapa cara untuk memeriksa informasi content situs web untuk relevansi dan keterkinian, adalah sebagai berikut : • 1. Sesuaikan content situs web dengan tujuan dan fungsi situs tersebut • 2. Lakukan riset untuk mencari informasi terbaru yang sesuai dengan content situs • 3. Content tambahan atau revisi juga bisa dengan meminta content tersebut ke pihak klien baik berupa data tertulis maupun elektronik • 4. Lakukan konfirmasi dalam menentukan batasan umur sebuah links, apakah akan dipertahankan atau dihapus • 5. Pihak pengembang selaku pembuat situs web bila perlu merevisi content yang mungkin diperlukan dengan mengkonfirmasikan dahulu dengan pihak klien Memeriksa Informasi untuk Relevansi dan Currency

  14. Modul II • Mendesain Halaman Website

  15. Modul II • Perancangan Design Web  Dengan Adobe Fireworks CS3 • Setelah web folder siap,  selanjutnya  Ikuti tahapan perancangan grafis web anda • -Buka Fireworks yang telah anda install sebelumnya. Fireworks menggunakan bantuan panel untuk mengelola gambar baik yang ada dikanan atau bawah tampilan fireworks anda • -Masuk menu File --> New (Ctrl+N) untuk membuat sebuah  Canvas Kerja baru sebagai tempat perancangan web anda • Ubah Informasi seperti gambar disamping Mendesain Halaman Website

  16. Modul II • Perancangan Design Web  Dengan Adobe Fireworks CS3 • -Tekan OK untuk membuat canvas • -Buat objek kotak menggunakan tool vector rectangular yang ada disebelah kiri, seperti gambar berikut : Mendesain Halaman Website

  17. Modul II • Perancangan Design Web  Dengan Adobe Fireworks CS3 • - Untuk mengatur  warna dan garis, pilih objek kotak lalu ubah properti dibawah -Untuk memberi effect shadow pada kotak, maka gunakan panel property filters Mendesain Halaman Website

  18. Modul II • Perancangan Design Web  Dengan Adobe Fireworks CS3 • - Tambahkan teks pada desain web anda seperti gambar dibawah dengan menggunakan   toolbox vector Memasukkan Gambar Bitmap dalam canvas -Buka file gambar.jpg atau gambar bitmap foto lainnya yang anda punya Mendesain Halaman Website

  19. Modul II • Perancangan Design Web  Dengan Adobe Fireworks CS3 • Pada toolbox bagian Bitmap, gunakan tool Magic Wand Tool untuk Mengambil gambar latar putih , lalu lakukan : • pembalikan pilihan dengan masuk menu Select--> Select Inverse dan akhiri dengan memberikan feather melalui menu Select --> Feather  sebesar 1 pixel untuk membuat area pengambilan lebih halus • -Copy (Ctrl+C) gambar yang telah terpilih, lalu paste (Ctrl+V) pada kanvas abcweb • -Ubah ukuran dengan (Ctrl+T) , berikan filter shadow dan terakhir  letakkan seperti pada gambar dibawah Mendesain Halaman Website

  20. Modul II • Slicing & Export  HTML • Gambar layout yang telah selesai dibuat, selanjutnya harus anda slicing dan export menjadi potongan gambar yang kecil beserta file halaman webnya • - Pada toolbox bagian web, klik slice tool • Buat potongan seperti contoh yang terlihat pada gambar di samping : Mendesain Halaman Website

  21. Modul II • Slicing & Export  HTML • -Tekan F12 untuk Preview Desain Web Layout anda menggunakan browser • - Ubah tampilan menjadi 4up lalu ganti setting pada panel optimize menjadi JPEG - Better Quality Mendesain Halaman Website

  22. Modul II • Slicing & Export  HTML • -Setelah selesai melakukan setting maka selanjutnya anda siap mengekspor desain layout anda . Klik menu File--> ExportSimpan dengan nama index.php, sedangkan untuk gambar tempatkan pada folder images, (lihat gambar !) Mendesain Halaman Website

  23. Modul II • Mendaftarkan Web Folder ke Dreamweaver CS3 • Keunggulan Dreamweaver dengan teknologi Interactive Dynamic Datanya hanya bisa anda rasakan jika telah melalui proses ini dengan lancar. • Pastikan Web folder dan Wamp / Xampp Local Server anda telah anda persiapkan • -Buka Dreamweaver yang telah anda install •  Pada panelSite --> Buka combo dan pilih manage  site Mendesain Halaman Website

  24. Modul II • Mendaftarkan Web Folder ke Dreamweaver CS3 • - Ketik nama web folder abcweb --> lalu tekan next • -Pilih opsih Yes I want to user server technology --> Php MySQL -->Tekan Next untuk melanjutkan Mendesain Halaman Website

  25. Modul II • Mendaftarkan Web Folder ke Dreamweaver CS3 • - Pilih opsi pertama Edit and Test Locally (� --> Cari Web Folder Anda  c:\wamp\www\abcweb --> Tekan Next • -Untuk testing server ketikkan alamat http://localhost/abcweb  --> Klik tombol  Test Url (Untuk mengecek status web) -->  Tekan OK jika sukses dan lanjutkan dengan menekan Next , * jika tahapan test url menampilkan pesan error (gagal) maka coba cek nama webfolder anda atau mungkin status wamp server (mySQL/PHP/Apache) anda tidak jalan Mendesain Halaman Website

  26. Modul II • Mendaftarkan Web Folder ke Dreamweaver CS3 • - Tahapan akhir pilih No --> lalu tekan Next --> dan akhiri dengan klik Done -->Done sekali lagi untuk menyelesaikan kegiatan mendaftarkan web folder anda ke Dreamweaver  - Lihat panel Files anda sudah menampilkan struktur web folder • Double klik file index.php �  tekan F12  untuk mencoba halaman • web tersebut dijalankan via browser Mendesain Halaman Website

  27. Modul II • Editing Halaman Website • - Buka file index.php • - Biasakan untuk selalu mengubah tittle dari setiap halaman web anda , seperti gambar berikut , Tittle juga bisa diisikan dengan keyword -Aktifkan table dengan mengklik status <table> sesudah <body> yang ada diatas properti • Pada properti table ubah posisi table menjadi center (tengah) • - Tekan F12 untuk melihat hasilnya Mendesain Halaman Website

  28. Modul II • Editing Halaman Website • - Buat gambar menjadi background untuk area sel table yang akan diisikan materi. Ikuti tahapannya • - Klik gambar main --> Tekan delete di keyboard • - Letakkan kursor didalam sel • - Cari property bg --> browse / cari file gambar main.jpg • latihan : Lakukan hal yang sama pada gambar �toplogin� yang ada di kiri atas halaman anda Mendesain Halaman Website

  29. Modul II • Membuat  Tabel  baru • Sebuah desain web merupakan susunan tabel didalam tabel yang ditata sedemikian rupa. Ikuti tahapan berikut : • Buka file index.php • Letakkan kursor di dalam halaman contoh di sel main atur dahulu posisi vertical sel = top pada panel properties cell • - Klik Icon insert table  dipanel common yang ada diatas tentukan jumlah row = 1 , column = 3 , width =  95 percent , border = 0, cell padding = 0 , cell spacing = 2 Mendesain Halaman Website

  30. Modul II • Membuat  Tabel  baru • - Tekan OK untuk membuat tabel anda • - Ubah property align = center untuk memposisikan tabel berada ditengah • Atur sedemikian rupa agar tabel seperti terlihat pada gambar dibawah : • - Simpan (Ctrl + S) perubahan halaman anda tersebut Mendesain Halaman Website

  31. Modul II • Membuat External Style (CSS) • - Style digunakan untuk mempermudah manajemen format halaman halaman web anda • - Buat file baru dengan nama abcstyle.css  dengan cara klik kanan web root Site-abcweb, lalu buka (double klik) file tersebut • - Pada panel files CSS , klik New Css Rule untuk membuat sebuah rule style didalam file style yang baru Anda buat Mendesain Halaman Website

  32. Modul II • Membuat External Style (CSS) • Ubah informasi seperti gambar berikut : • - Tentukan Jenis + ukuran font beserta warna dari form untuk rule style  tag <td> tersebut, Lihat gambar ! Mendesain Halaman Website

  33. Modul II • Membuat External Style (CSS) • Cara Attach Style ke halaman • - Buka file index.php (atau halaman lainnya yang akan anda sisipkan style) • - Pada panel CSS klik �attach style sheet� lalu browse lokasi file abcstyle.css akhiri dengan OK • - Anda bisa melihat perubahan halaman index.php dengan mencoba mengetikkan sedikit text atau link  di dalam sel tabel tersebut Mendesain Halaman Website

  34. Modul II • Membuat Template Sendiri • - File index.php yang telah Anda buat bisa dijadikan Master untuk pembuatan template. Dimana dengan menggunakan template akan memudahkan Anda menciptakan halaman-halaman lainnya dengan kesamaan format layout. Ikuti tahapan berikut ini : • - Pastikan file index.php tersebut telah terbuka • - Masuk menu File --> Save as template - Ubah informasi seperti gambar  di bawah ini: • - Tekan Save untuk menyimpan template , apabila ada pertanyaan  update links?, tekan Yes Mendesain Halaman Website

  35. Modul II • Membuat Template Sendiri • - Setelah selesai membuat template  perhatikan pada panel files akan muncul folder template berisi file templateweb.dwt.php Mendesain Halaman Website

  36. Modul III • Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol)

  37. Modul III • Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) • FTP atau File Transfer Protocol adalah sebuah Protocol (bahasa komunikasi dalam jaringan komputer) yang berfungsi untuk meng-upload data dari komputer lokal (localhost) ke server di internet supaya bisa dipublikasikan secara online • FTP terdiri dari 2 macam ; FTP Server dan FTP Client, untuk saat ini kita membahas tentang FTP Client dulu • Sebelum Anda bisa melakukan Upload Data Anda , maka perlu diinstalasi Software FTP Client nya, kita gunakan saja FileZilla, silakan DOWNLOAD DISINI atau SmartFTP DOWNLOAD DISINI • - Setelah download selesai, lakukan INSTALASI SOFTWARE pada komputer Anda, pastikan Anda sudah menginstalasi Software FTP dengan benar • Sebelum melakukan upload data, pastikan Anda sudah mengetahui / mencatat FTP Hostname-Username dan Password nya, jika lupa login lagi di HOSTING di bawah ini FTP (File Transfer Protocol)

  38. Modul III • Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) • - http://members.000webhost.com/login.php • - Jika belum mendaftar hosting (gratis) silakan klik di http://www.000webhost.com/453267.html atau info lengkap silakan kunjungi http://my-tutorial.cz.cc FTP (File Transfer Protocol)

  39. Modul III • Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) FTP (File Transfer Protocol)

  40. Modul III • Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) • UPLOAD FILE via FTP (FILE TRANSFER PROTOCOL) • - Pastikan ! Hostname, Username, Password FTP  ANDA SUDAH BENAR ! Port FTP:21 • - Directori ONLINE >>>>> harus PUBLIC_HTML FTP (File Transfer Protocol)

  41. Modul IV (Keempat) Modul IV • Memeriksa Links dan Navigasi

  42. Modul IV • Memeriksa Links dan Navigasi Link dan Navigasi adalah bagian yang terpenting dalam organisasi situs web karena keduanya sangat berpengaruh pada kenyamanan pengunjung situs web. Navigasi adalah gabungan dari struktur representasi informasi situs web dan mekanisme link yang mendukung pengunjung untuk melakukan penjelajahan situs. Kemudahan bernavigasi dalam situs web melibatkan system navigasi situs web secara keseluruhan dan desain interface situs web tersebut. Memeriksa Links dan Navigasi

  43. Modul IV • Memeriksa Links dan Navigasi • Navigasi dapat ditampilkan dalam berbagai media, yaitu : • - teks, • - image • - animasi Memeriksa Links dan Navigasi

  44. Modul IV • Memeriksa Links dan Navigasi Syarat Navigasi yang baik : • 1. Mudah dipelajari • 2. Tetap konsisten • 3. Memungkinkan feedback • 4. Muncul dalam konteks • 5. Menawarkan alternatif lain • 6. Memerlukan perhitungan waktu dan tindakan • 7. Menyediakan pesan visual yang jelas • 8. Menggunakan label yang jelas dan mudah dipahami • 9. Mendukung tujuan dan perilaku user • 10.Beberapa hal yang perlu diperhatikan untuk membuat navigasi yang baik : • 11.Rencanakan dengan benar sebelum membuat • 12.Navigasi atau struktur situs web nantinya akan sulit diubah. Jadi sebelum membuat navigasi sebuah situs, tentukan konsepnya • 13.Kelompokkan link navigasi dan aturlah sepeerlunya • 14.Buat halaman dengan mock up navigasi elemen, jenis konten yang akan ada di setiap halaman dan prioritasnya. Memeriksa Links dan Navigasi

  45. Modul IV • Memeriksa Links dan Navigasi Syarat Navigasi yang baik : • 15. Buatlah tampilan navigasi berbeda dari tampilan lainnya • 16. Agar pengunjung lebih mudah mengenali bahwa bagian tersebut adalah navigasi  • 17. Buatlah navigasi yang singkat, tepat dan jelas • 18. Buat navigasi yang logika susunannya mudah dipahami. Memeriksa Links dan Navigasi

  46. Modul V (Kelima) Modul V • Mengedit Informasi Sesuai Kebutuhan

  47. Modul V • Mengedit Informasi Sesuai Kebutuhan Adobe Dreamweaver • - Dreamweaver merupakan piranti lunak yang sangat baik untuk membuat halaman web. Opsi-opsi dalam dreamweaver dirancang begitu detail, sehingga designer mahir bisa mengembangkan situsnya secara menyeluruh. • - Dreamweaver memungkinkan kita berpindah secara mudah antar design view dan code view, ini berarti kita bisa explore code HTML begitu selesai menata halaman dengan menggunakan tampilan antar muka (GUI). • - Semua tool yang diperlukan tersedia di bagian depan interface. Mengedit Informasi Sesuai Kebutuhan

  48. Modul V • Mengedit Informasi Sesuai Kebutuhan • Berikut adalah langkah-langkah untuk proses pengeditan halaman web dengan menggunakan fasilitas dreamweaver : • Mengubah Objek menjadi Background • Memasukkan Obyek • Memperbaharui situs web yang bersifat statis • Memperbaharui situs web melalui fasilitas admin (yang bersifat dinamis) Mengedit Informasi Sesuai Kebutuhan

  49. Modul V (Kelima) Modul VI • Menguji dan Memastikan Perubahan-Perubahan

More Related