web design n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
WEB DESIGN PowerPoint Presentation
Download Presentation
WEB DESIGN

Loading in 2 Seconds...

play fullscreen
1 / 44

WEB DESIGN - PowerPoint PPT Presentation


  • 149 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'WEB DESIGN' - cisco


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
disusun oleh
Disusunoleh :
  • AlfianNur A (01)
  • Amrita Oza N (03)
  • AnggitAgistarini (04)
  • Laurencia Lenny W (21)
menu dan ikon pada perangkat lunak desain web
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.

slide4

Standard Toolbar

Formatting Toolbar

Title Bar

Menu Bar

SetelahmembukamicrosoftFrontpage, makaterlihatgambarberikut.

Page Tab

Status Bar

Views bar

Estimated time to download

slide5

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.
slide6

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.

slide7

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.

slide10

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.

slide11

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

slide12

D. Views Bar

Views Bar merupakankumpulantombol yang bergunauntukmelihathalamanweb yang sedangkitabuatdarisisi yang berbeda, misaldarisisidesain, sisikode, ataupunkeduanya.

Fungsiikonpada views bar.

penggunaan menu dan ikon pada perangakat lunak desain web
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.
slide14

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.
slide15

2. Menggunakan fungsi tombol Ctrl

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

membuat desain web sederhana
MembuatDesain Web Sederhana

C. Membuat Site baru

1. Setelah FrontPage 2003 terbuka, akanmuncultampilansepertiberikut.

slide17

2. PadaMenu Bar, klikFile > New

3. PadaTasks PaneklikOne page Web site…

slide18

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

slide21

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

slide22

8. Selanjutnyamuncul window New Folder, lalumasukkannamauntuk folder baru, misalnya “Sekolahku” (jikawebsite yang akandibuatbertemakansekolah). KemudiankliktombolOKuntukmelanjutkan.

9. Setelah folder “Sekolahku” terbuka klik Open.

slide24

11. Setelahitudoubleklikpadaindex.htmsepertipadagambarberikutini.

slide26

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”.

slide27

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

slide28

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

slide29

Title darisebuahhalamanwebadalahapa yang tertampildisebelahpojokkiriatasdaribrowser

4. SimpanhalamanwebdengancaramengklikikonSave.

E. Membuat CSS (Cascading Style Sheet)

Cascading Style Sheetmerupakansuatubentukfasilitas yang tersediadiaMicrosoft FrontPage yang bergunauntukmelakukan format berbagaiobjek yang digunakandalamdesainweb.

slide30

2. KemudianklikMore page templates.

3. Setelahwindow Page Templatesmuncul, klik tab Style Sheets.

slide31

4. DoubleklikpadaikonNormal Style Sheet.

5. Pada Menu Bar, klik Format >Style.

slide32

6. Setelah window Style muncul, klikh1.

7. KlikModifyuntukmelanjutkan

slide38

13. Klik ikon Save pada Standard Toolbar.

14. Selanjutnyakanmuncul window Save As, masukkannamaformat.css kemudianklikSave.

slide39

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.

slide40

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.

slide41

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.

slide42

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.

slide43

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
slide44

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.