WEB DESIGN

Slide 1

WEB DESIGN1Disusun oleh :Alfian Nur A (01)Amrita Oza N(03)Anggit Agistarini(04)Laurencia Lenny W(21)Menu dan Ikon pada Perangkat Lunak Desain WebA. PengantarMicrosoft FrontPage adalah sebuah program yang digunakan untuk membuat, mendesain, dan mengedit halaman web.B. Elemen Dasar Perangkat Lunak Microsoft Front Page Microsoft Front Page memberikan banyak fasilitas untuk melakukan berbagai macam pengaturan (format) terhadap komponen-komponen web yang digunakan. Microsoft FrontPage memungkinkan bagi para programer untuk melakukan editing source program dan menyediakan fasilitas untuk preview desain web yang dibangun secara mudah.3Setelah membuka microsoft Frontpage, maka terlihat gambar berikut.

Menu BarTitle BarStandard ToolbarPage TabStatus BarFormatting ToolbarEstimated time to downloadViews bar4Keterangan :Title Bar menampilkan nama file dan lokasi file tersebut.Menu Bar menyediakan menu file sampai help.Standard dan formatting toolbar menyediakan shortcut-shortcut penting yang akan berguna ketika kita banyak bekerja dengan frontpage. Page Tab digunakan untuk berpindah halaman ketika kita bekerja dengan banyak halaman.Views Bar digunakan untuk melihat halaman yang sedang kita kerjakan pada tipe penglihatan yang berbeda.56. Estimated time to download memberikan informasi kepada kita tentang perkiraan waktu yang dibutuhkan untuk men-download halaman web kita di browser.7. Status Bar memberikan macam-macam informasi status pekerjaan yang sedang dikerjakan, misal menampilkan tujuan link ketika kursor mouse kita berada di atas sebuah link.6

C. Menu dan Ikon1. Menu bar merupakan baris menu berisi perintah berupa menu-menu yang aktif dimulai dari menu File sampai Help. Berikut ini tampilan perintah menu dan ikonnya. Menu Bar dalam FrontPage terletak dibawah Title bar. Di dalam menu bar banyak terdapat submenu-submenu yang berfungsi untuk mengolah halaman web yang dikerjakan.Berikut ini tampilan dari menu, submenu dan ikon pada menu bar. Gambar 3. Tampilan menu bar7

8

9

2. Standard ToolbarStandars Toolbar merupakan kumpulan dari ikon-ikon yang berfungsi untuk pengolahan layar utama Microsoft FrontPage.Secara default tampilan Standard Toolbar adalah sebagai berikut.

3. Formatting toolbarFormatting Toolbar adalah kumpulan ikon yang disediakan oleh FrontPage untuk memformat halaman web yang sedang dibuat/diedit sehingga sesuai dengan apa yang diharapkan. 10Nama Ikon pada Formatting Toolbar

Style

FontFont SizeBoldItalicUnderlineAlign leftAlign centerAlign rightJustifyIncreaseDecreaseNumberingBulletsDecrease IndentIncrease IndentOutside borderFont color

11D. Views BarViews Bar merupakan kumpulan tombol yang berguna untuk melihat halaman web yang sedang kita buat dari sisi yang berbeda, misal dari sisi desain, sisi kode, ataupun keduanya.Fungsi ikon pada views bar.

IkonNama Perintah KeteranganShow design viewMelihat tampilan desainShow split viewTampilan dibagi menjadi 2 (desain dan kode)Show code viewMelihat tampilan kode programShow preview viewMelihat hasil desain web dalam browser internal

12Penggunaan Menu dan Ikon Pada Perangakat Lunak Desain WebPenggunaan Menu dan IkonPenggunaan menu bar Penggunaan menu pada Menu Bar dapat menggunakan 2 (dua) cara, yaitu menggunakan mouse dan menggunakan fungsi tombol keyboarda. Menggunakan Mouse.Arahkan pointer mouse pada salah satu Menu Bar.Sebagai contoh arahkan pointer mouse pada menu FileKlik menu File, maka akan muncul sub menu File berisi perintah-perintah pengelolaan file.Klik salah satu perintah yang diinginkan.

13 b. Menggunakan fungsi tombol keyboard.

Jika meggunakan tombol keyboard dapat menggunakan tombol alt atau tombol ctrl.Mengunakan tombol altterlihat pada setiap menu terdapat huruf yang bergaris bawah, untuk melaksanakan perintah tersebut dapat menggunakan fungsi tombol Alt, sebagai contoh menu File, maka huruf F yang bergaris bawah dan untuk melakukan perintahnya adalah sebagai berikut.Tekan tombol Alt (tidak dilepas) pada keyboard dan tombol huruf F secara bersamaan.Tekan tombol huruf yang bergaris bawah pada submenu perintah.Sebagai contoh perintah New maka yang ditekan tombol huruf N.Maka perintah yang dilakukan adalah membuat dokumen baru.

142. Menggunakan fungsi tombol Ctrl Berikut ini beberapa contoh menu perintah yang dapat menggunakan fungsi tombol Ctrl.

Fungsi ctrlFungsi perintahCtrl + NMembuat lembar kerja baruCtrl + CMenyalin objekCtrl + OMembuka lembar kerja baruCtrl + SMenyimpan lembar kerjaCtrl + ZKembali ke kondisi sebelumnyaCtrl + YMenuju ke kondisi berikutnyaCtrl + XMemotong objekCtrl + VMeletakkan hasil salinan objekCtrl + PMencetak lembar kerja15Membuat Desain Web SederhanaC. Membuat Site baru1. Setelah FrontPage 2003 terbuka, akan muncul tampilan seperti berikut.

162. Pada Menu Bar, klik File > New

3. Pada Tasks Pane klik One page Web site

174. Ketika window Web Site Templates muncul, select (klik sekali) One Page Web Site seperti pada gambar di bawah ini.

185. Kemudian klik Browse.

196. Akan muncul window baru seperti pada gambar berikut, kemudian klik My Documents.

207. Setelah masuk ke My Documents, klik ikon New Folder untuk membuat folder baru di dalam My Documents.

218. Selanjutnya muncul window New Folder, lalu masukkan nama untuk folder baru, misalnya Sekolahku (jika website yang akan dibuat bertemakan sekolah). Kemudian klik tombol OK untuk melanjutkan.

9. Setelah folder Sekolahku terbuka klik Open.

2210. Kemudian klik OK di window Web SiteTemplates.

2311. Setelah itu double klik pada index.htm seperti pada gambar berikut ini.

2412. Akan muncul tab index.htm

2513. Untuk lebih memudahkan, pada Menu Bar klik View > Folder list

D. Membuat Home Page1. Pada halaman yang kosong seperti pada gambar ketik Home page Sekolahku.

262. Klik kanan pada bagian kosong di halaman web yang sedang kita buat, kemudian klik Page Properties.

273. Sesudah window Page Properties muncul, pada tab General > Title, ketik Home page Sekolahku seperti pada gambar di bawah ini. Klik tombol OK untuk melanjutkan.

28Title dari sebuah halaman web adalah apa yang tertampil di sebelah pojok kiri atas dari browser 4. Simpan halaman web dengan cara mengklik ikon Save.

E. Membuat CSS (Cascading Style Sheet)Cascading Style Sheet merupakan suatu bentuk fasilitas yang tersedia dia Microsoft FrontPage yang berguna untuk melakukan format berbagai objek yang digunakan dalam desain web.

292. Kemudian klik More page templates.

3. Setelah window Page Templates muncul, klik tab Style Sheets.

304. Double klik pada ikon Normal Style Sheet.

5. Pada Menu Bar, klik Format > Style.

316. Setelah window Style muncul, klik h1.

7. Klik Modify untuk melanjutkan

328. Pada window Modify Style klik Format > Font.

339. Pada window Font, klik Verdana pada daftar Font.

3410. Dibawah Font Style, klik Bold, kemudian klik tombol OK untuk melanjutkan.

3511. Klik OK pada window Modify Style.

3612. Klik OK pada window Style

3713. Klik ikon Save pada Standard Toolbar.

14. Selanjutnya kan muncul window Save As, masukkan nama format.css kemudian klik Save.

38F. Mengintegrasikan Style Sheet1. Klik tab index.htm2. Pada Menu Bar klik Format > Style Sheet Links.3. Pada window Link Style Sheet pilih All pages kemudian klik Add4 Pada window Select Style Sheet pilih format.css. Klik tombol OK untuk melanjutkan.5. Pada window Link Style Sheet klik OK6. Ketika ada pesan konfirmasi pilih Continue.

39G. Menambahkan format1. Klik pada kalimat Home page Sekolahku untuk menempatkan cursor di baris yang sama dengan kalimat.2. Pada menu pilih Heading 1.3. Pada toolbar klik ikon Save.H. Mengubah Ukuran Huruf1. Klik pada format.css.2. Pada Menu Bar klik Format > Style3. Pada window Style klik Modify.4. Pada window Modify Style klik Format > Font5. Pada window Font ketikkan 16pt. Klik tombol OK untuk melanjutkan.406. Klik OK7. Klik OK di window Style 8. Klik ikon Save.9. Klik tab index.htm, maka sekarang akan kelihatan seperti gambar di bawah ini.I. Mengubah Ketebalan HurufPastikan cursor berada di bagian akhir kalimat Home page Sekolahku. Kemudian tekan tombol Enter untuk membuat peragraf baru.2. Setelah membuat paragraf baru, ketik kalimat : Berikut ini adalah nama teman-temanku :3. Save halaman itu dengan mengeklik ikon Save seperti yang dijelaskan pada bab sebelumnya. 414. Selanjutnya klik tab format.css.5. Pada format.css klik baris di bawah h1 untuk menempatkan cursor mouse.6.Pada Menu Bar klik Format > Style7. Pada window Style, klik HTML tags 8. Setelah HTML tags dipilih, klik p9. Klik tombol Modify untuk melanjutkan10. Pada window Modify Style klik Format, kemudian pilih Font.11. Setelah window Font muncul, pilih font Arial dan ukuran 10pt12. Kemudian klik OK pada window Font, klik OK pada window Modify Style, klik OK pada window Style.

4213. Klik ikon Save untuk menyimpan Style Sheet.14. Highlight kata nama teman-temanku15. Pada Formatting Toolbar klik ikon Bold.16. Kemudian klik pada bagian yang kosong di lembar kerja untuk menghilangkan highlight17. Simpan halaman web dengan mengklik ikon SaveJ. Perataan teks (Align text)Tempatkan cursor pada kalimat dengan cara mengeklik pada kalimat yang akan diratakan.2.Pada Formatting Toolbar klik ikon Align Right.3. Klik ikon Align CenterKlik ikon Align Right.Simpan halaman web dengan mengklik ikon Save

43K. Indent TextBuatlah 3 baris tulisan nama Highlight ketiga baris nama yang baru dibuat.Kemudian klik ikon Increase Indent.Simpan halaman dengan mengeklik ikon SaveL. Membuat DaftarM. Membuat link ke halaman baruN. Membuat link antar halamanO. Memasukkan gambarMaka jadilah home page sederhana.

44