1 / 44

WEB DESIGN

WEB DESIGN. Disusun oleh :. Alfian Nur A (01) Amrita Oza N (03) Anggit Agistarini (04) Laurencia Lenny W (21). Menu dan Ikon pada Perangkat Lunak Desain Web. A. Pengantar

cisco
Download Presentation

WEB DESIGN

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. WEB DESIGN

  2. Disusunoleh : • AlfianNur A (01) • Amrita Oza N (03) • AnggitAgistarini (04) • Laurencia Lenny W (21)

  3. Menu danIkonpadaPerangkatLunakDesain Web A. Pengantar • Microsoft FrontPage adalah sebuah program yang digunakan untuk membuat, mendesain, dan mengedit halaman web. B. ElemenDasarPerangkatLunak Microsoft Front Page Microsoft Front Pagememberikan banyak fasilitas untuk melakukan berbagai macam pengaturan (format) terhadap komponen-komponen web yang digunakan. Microsoft FrontPagememungkinkanbagiparaprogrameruntukmelakukaneditingsource program danmenyediakanfasilitasuntukpreviewdesainweb yang dibangunsecaramudah.

  4. Standard Toolbar Formatting Toolbar Title Bar Menu Bar SetelahmembukamicrosoftFrontpage, makaterlihatgambarberikut. Page Tab Status Bar Views bar Estimated time to download

  5. Keterangan : • Title Bar menampilkannama file danlokasi file tersebut. • Menu Bar menyediakan menu file sampai help. • Standard dan formatting toolbar menyediakan shortcut-shortcut penting yang akanbergunaketikakitabanyakbekerjadenganfrontpage. • Page Tab digunakanuntukberpindahhalamanketikakitabekerjadenganbanyakhalaman. • Views Bar digunakanuntukmelihathalaman yang sedangkitakerjakanpadatipepenglihatan yang berbeda.

  6. 6. Estimated time to download memberikaninformasikepadakitatentangperkiraanwaktu yang dibutuhkanuntuk men-download halaman web kitadi browser. 7. Status Bar memberikanmacam-macaminformasi status pekerjaan yang sedangdikerjakan, misalmenampilkantujuan link ketikakursor mouse kitaberadadiatassebuah link.

  7. C. Menu danIkon 1. Menu barmerupakanbaris menu berisiperintahberupa menu-menu yang aktifdimulaidari menu FilesampaiHelp. Berikutinitampilanperintah menu danikonnya. Gambar 3. Tampilan menu bar Menu Bar dalam FrontPage terletakdibawah Title bar. Di dalam menu bar banyakterdapat submenu-submenu yang berfungsiuntukmengolahhalaman web yang dikerjakan. Berikutinitampilandari menu, submenu danikonpada menu bar.

  8. 2. Standard Toolbar Standars Toolbar merupakan kumpulan dari ikon-ikon yang berfungsi untuk pengolahan layar utama Microsoft FrontPage. Secara default tampilan Standard Toolbar adalah sebagai berikut. 3. Formatting toolbar Formatting Toolbar adalahkumpulanikon yang disediakanolehFrontPageuntukmemformathalamanweb yang sedangdibuat/dieditsehinggasesuaidenganapa yang diharapkan.

  9. Style Font Font Size Bold Nama Ikon pada Formatting Toolbar Italic Underline Align left Align center Align right Justify Increase Decrease Numbering Bullets Decrease Indent Increase Indent Outside border Font color

  10. D. Views Bar Views Bar merupakankumpulantombol yang bergunauntukmelihathalamanweb yang sedangkitabuatdarisisi yang berbeda, misaldarisisidesain, sisikode, ataupunkeduanya. Fungsiikonpada views bar.

  11. Penggunaan Menu danIkonPadaPerangakatLunakDesain Web Penggunaan Menu danIkon • Penggunaan menu bar Penggunaan menu pada Menu Bar dapat menggunakan 2 (dua) cara, yaitu menggunakan mouse dan menggunakan fungsi tombol keyboard a. Menggunakan Mouse. • Arahkan pointermouse pada salah satu Menu Bar. • Sebagai contoh arahkan pointer mouse pada menu File • Klik menu File, maka akan muncul sub menu Fileberisi perintah-perintah pengelolaan file. • Klik salah satu perintah yang diinginkan.

  12. b. Menggunakan fungsi tombol keyboard. Jikameggunakantombol keyboard dapatmenggunakantombol alt atautombol ctrl. • Mengunakantombol alt terlihat 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.

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

  14. MembuatDesain Web Sederhana C. Membuat Site baru 1. Setelah FrontPage 2003 terbuka, akanmuncultampilansepertiberikut.

  15. 2. PadaMenu Bar, klikFile > New 3. PadaTasks PaneklikOne page Web site…

  16. 4.Ketika window Web Site Templatesmuncul, select (kliksekali) One Page Web Sitesepertipadagambardibawahini.

  17. 5. KemudianklikBrowse.

  18. 6. Akanmuncul window barusepertipadagambarberikut, kemudianklikMy Documents.

  19. 7. SetelahmasukkeMy Documents, klikikonNew Folder untukmembuat folder barudidalamMy Documents.

  20. 8. Selanjutnyamuncul window New Folder, lalumasukkannamauntuk folder baru, misalnya “Sekolahku” (jikawebsite yang akandibuatbertemakansekolah). KemudiankliktombolOKuntukmelanjutkan. 9. Setelah folder “Sekolahku” terbuka klik Open.

  21. 10. KemudianklikOKdi window Web SiteTemplates.

  22. 11. Setelahitudoubleklikpadaindex.htmsepertipadagambarberikutini.

  23. 12. Akanmuncul tab index.htm

  24. 13. Untuk lebih memudahkan, pada Menu Bar klik View > Folder list D. Membuat Home Page 1. Pada halaman yang kosong seperti pada gambar ketik “Home page Sekolahku”.

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

  26. 3. SesudahwindowPage Propertiesmuncul, pada tab General > Title, ketik “Home page Sekolahku” sepertipadagambardibawahini. KliktombolOKuntukmelanjutkan.

  27. Title darisebuahhalamanwebadalahapa yang tertampildisebelahpojokkiriatasdaribrowser 4. SimpanhalamanwebdengancaramengklikikonSave. E. Membuat CSS (Cascading Style Sheet) Cascading Style Sheetmerupakansuatubentukfasilitas yang tersediadiaMicrosoft FrontPage yang bergunauntukmelakukan format berbagaiobjek yang digunakandalamdesainweb.

  28. 2. KemudianklikMore page templates. 3. Setelahwindow Page Templatesmuncul, klik tab Style Sheets.

  29. 4. DoubleklikpadaikonNormal Style Sheet. 5. Pada Menu Bar, klik Format >Style.

  30. 6. Setelah window Style muncul, klikh1. 7. KlikModifyuntukmelanjutkan

  31. 8. Pada window Modify StyleklikFormat > Font.

  32. 9. Pada window Font, klik Verdana pada daftar Font.

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

  34. 11. KlikOKpada window Modify Style.

  35. 12. KlikOKpada window Style

  36. 13. Klik ikon Save pada Standard Toolbar. 14. Selanjutnyakanmuncul window Save As, masukkannamaformat.css kemudianklikSave.

  37. F. MengintegrasikanStyle Sheet 1. Klik tab index.htm 2. PadaMenu Bar klikFormat > Style Sheet Links. 3. Pada window Link Style SheetpilihAll pageskemudianklikAdd… 4 Pada window Select Style Sheetpilihformat.css. KliktombolOKuntukmelanjutkan. 5. Pada window Link Style Sheet klikOK 6. KetikaadapesankonfirmasipilihContinue.

  38. G. Menambahkan format 1. Klik pada kalimat “Home page Sekolahku” untuk menempatkan cursor di baris yang sama dengan kalimat. 2. Pada menu pilihHeading 1. 3. Pada toolbar klik ikon Save. H. Mengubah Ukuran Huruf 1. Klikpadaformat.css. 2. Pada Menu Bar klik Format>Style 3. Pada window Style klikModify. 4. Pada window Modify Style klikFormat > Font 5. Pada window Fontketikkan16pt. KliktombolOKuntukmelanjutkan.

  39. 6. Klik OK 7. KlikOKdi window Style 8. KlikikonSave. 9. Klik tab index.htm, maka sekarang akan kelihatan seperti gambar di bawah ini. I. MengubahKetebalanHuruf • Pastikan cursor berada di bagian akhir kalimat “Home page Sekolahku”. KemudiantekantombolEnter untukmembuatperagrafbaru. 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.

  40. 4. Selanjutnya klik tab format.css. 5. Padaformat.cssklikbarisdibawahh1untukmenempatkancursormouse. 6.Pada Menu Bar klik Format > Style 7. Pada window Style, klik HTML tags 8. Setelah HTML tags dipilih, klik p 9.KliktombolModify untukmelanjutkan 10. Pada window Modify StyleklikFormat, kemudianpilihFont. 11. Setelah window Font muncul, pilih font Arialdanukuran10pt 12.KemudianklikOKpada window Font, klikOK pada window Modify Style, klikOKpada window Style.

  41. 13. KlikikonSave untukmenyimpanStyle Sheet. 14. Highlightkata “namateman-temanku” 15. PadaFormatting ToolbarklikikonBold. 16. Kemudianklikpadabagian yang kosongdilembarkerjauntukmenghilangkanhighlight 17. Simpan halaman web dengan mengklik ikon Save J. Perataanteks (Align text) • Tempatkancursor pada kalimat dengan cara mengeklik pada kalimat yang akan diratakan. 2. PadaFormatting Toolbar klikikonAlign Right. 3. KlikikonAlign Center • KlikikonAlign Right. • Simpan halaman web dengan mengklik ikon Save

  42. K.Indent Text • Buatlah 3 baristulisannama • Highlight ketigabarisnama yang barudibuat. • KemudianklikikonIncrease Indent. • Simpan halaman dengan mengeklik ikon Save L. Membuat Daftar M. Membuat link ke halaman baru N. Membuat link antar halaman O. Memasukkan gambar Maka jadilah home page sederhana.

More Related