|
A.
TUJUAN PEMBELAJARAN
Perkembangan sains dan teknologi menuntut peningkatan
kualitas, pengetahuan dan keterampilan kita dalam berkomunikasi. Sehingga kita
memerlukan suatu teknologi yang dapat memberikan pengetahuan yang lebih banyak
dengan informasi yang mutakhir. Dalam menghadapi perkembangan teknologi
komunikasi, kita dituntut untuk belajar sejak dini agar dapat berperan secara
optimal.
Paket pembelajaran modul 11 ini bertujuan untuk
mengenalkan kepada peserta didik tentang penggunaan perangkat lunak desain web untuk menghasilkan karya informasi
yang sangat dibutuhkan dalam kehidupan
sehari-hari. Setelah peserta didik mempelajari dengan penuh ketekunan
dan mengikuti alur yang ada pada modul 11, diharapkan memiliki bekal kemampuan
tentang penggunaan perangkat lunak desain web
sebagai berikut.
1. Mengidentifikasi menu dan ikon pada perangkat lunak
desain web.
2. Menjelaskan fungsi menu dan ikon pada perangkat lunak
desain web.
3. Menggunakan menu dan ikon pada perangkat lunak desain web.
4. Membuat dokumen desain web sederhana.
Dengan modul 11 ini juga diharapkan peserta didik
memiliki cakrawala pemikiran dan pengetahuan secara umum maupun secara khusus
yang sekarang ini banyak dibutuhkan dalam kehidupan sehari-hari.
B.
STANDAR
KOMPETENSI
Membuat
Desain Web
C.
MATERI
POKOK
Perangkat
Lunak Desain Web terdiri dari :
1.
Identifikasi menu dan ikon pada perangkat lunak
desain web
2.
Fungsi
menu dan ikon pada program desain web
3.
Penggunaan menu dan ikon untuk
desain web
4.
Membuat desain web
sederhana
BAB I
MENU DAN IKON
PADA PERANGKAT LUNAK
DESAIN WEB
A.
Pengantar
Microsoft
FrontPage adalah sebuah program yang digunakan untuk membuat,
mendesain, dan mengedit halaman web,
dengan FrontPage kita dapat melihat
secara langsung apa yang akan tampil di web
browser sewaktu kita mengedit halaman web
di FrontPage, dikarenakan FrontPage adalah sebuah aplikasi yang
berprinsip WYSIWYG (What You See Is What
You Get) atau “Apa yang kamu lihat adalah apa yang kamu dapatkan”. Aplikasi
FrontPage dikeluarkan oleh perusahaan
piranti lunak (software) terbesar di
dunia yaitu Microsoft. Selain membuat
FrontPage, Microsoft juga membuat aplikasi lain seperti aplikasi pengolah kata
Microsoft Word, aplikasi pengolah
angka Microsoft Excel, aplikasi untuk
presentasi (Microsoft Powerpoint),
dan sebagainya. Aplikasi-aplikasi tersebut mempunyai susunan, tata letak dan
format yang relatif sama untuk penggunaan menu dan ikon-ikonnya. Materi yang
diberikan dalam bab ini memberikan gambaran tentang tampilan perangkat lunak
desain web khususnya Microsoft FrontPage, sehingga nantinya
siswa dapat mengidentifikasi menu dan ikon yang terdapat pada perangkat lunak
desain web.
B. Elemen Dasar Perangkat Lunak Microsoft FrontPage
Microsoft
FrontPage merupakan sebuah program aplikasi bagian dari Microsoft Office yang mempunyai
kemampuan untuk melakukan desain web. Microsoft
FrontPage 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.
Langkah-langkah
yang dilakukan untuk menjalankan Microsoft
FrontPage :, pertama kita klik Start > All Programs > Microsoft
Office > Microsoft Office FrontPage 2003 . Secara otomatis akan
terbuka sebuah lembar kerja baru yang masih kosong dengan nama new_page_1.htm. Untuk mengubah nama dapat dilakukan
ketika kita melakukan penyimpanan lembar kerja. Lembar kerja dengan nama new_page_1.htm
akan selalu muncul ketika kita membuka FrontPage, selanjutnya apabila
kita membuka lembar kerja baru sementara new_page_1.htm masih terbuka maka
yang muncul adalah new_page_2.htm, new_page_3.htm,
dan seterusnya.
Gambar 1. Menjalankan Aplikasi FrontPage
`
1. Klik Start
2. Setelah muncul sejumlah menu, klik All
Programs
3. Klik Microsoft Office
4. Klik Microsoft Office FrontPage 2003
5. Jika pada desktop terdapat shortcut
Microsoft FrontPage 2003 dapat
langsung melakukan double klik pada shortcut tersebut
Setelah melakukan langkah di halaman
sebelumnya maka akan terbuka lembar kerja Microsoft
FrontPage seperti yang tampak pada gambar di bawah ini.
Gambar
2. Elemen Dasar Microsoft FrontPage
Keterangan :
- Title Bar menampilkan nama file dan lokasi file tersebut.
- Menu Bar menyediakan menu File sampai dengan Help.
- Standard dan Formatting Toolbar menyediakan shortcut-shortcut penting yang akan sangat berguna ketika kita 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.
- Estimated time to download memberikan informasi kepada kita tentang perkiraan waktu yang dibutuhkan untuk men-download halaman web kita di browser.
- Status Bar memberikan macam-macam informasi status pekerjaan yang sedang kita kerjakan, misal menampilkan tujuan link ketika kursor mouse kita berada di atas sebuah link.
C.
Menu
dan Ikon
1.
Menu Bar
Menu Bar merupakan baris menu berisi perintah
berupa menu-menu yang aktif dimulai dari menu File sampai dengan Help.
Masing-masing menu mempunyai submenu atau perintah, seperti tampak pada Gambar
3 dan tabel 1. Berikut ini tampilan perintah menu dan ikonnya.
Gambar 3. Tampilan Menu Bar
Menu Bar dalam FrontPage terletak dibawah Title
Bar, sedangkan Standard Toolbar dan
Formatting Toolbar berada dibawah Menu Bar. Adapun menu-menu yang
tertampil dapat diatur dengan View
> Toolbar, dengan begitu maka menu-menu yang tertampil dapat
dikostumisasi sesuai dengan kebutuhan pengguna.
Di
dalam Menu Bar banyak terdapat
submenu-submenu yang berfungsi untuk mengolah halaman web yang kita kerjakan. Submenu-submenu tersebut adalah menu utama
dari FrontPage, karena tampilan ikon-ikon
pada Standard Toolbar merupakan
sebagian kecil dari menu FrontPage yang tersedia. Tujuan dibuatnya bentuk
ikon-ikon pada Standard Toolbar adalah
karena menu-menu itulah yang paling sering dipakai, jadi apabila kita tidak
menemukan sebuah menu dalam bentuk ikon di Standard
Tollbar kita dapat mencarinya di Menu
Bar. Berikut ini adalah tampilan submenu-submenu dari Menu Bar :
Tabel
1. Tampilan Menu, Submenu, dan Ikon pada Menu
Bar
|
|
|
|
|
|
|
|
|
|
|
2.
Standard
Toolbar
Standars
Toolbar merupakan kumpulan dari ikon-ikon yang berfungsi untuk
pengolahan layar utama Microsoft
FrontPage, misalnya untuk membuat dokumen baru, membuka dokumen yang telah
disimpan, menyimpan dokumen dan lain-lain. Gambar 4 menunjukkan tampilan menu ikon untuk Standard Toolbar, dan tabel 2 penjelasan tentang perintah-perintah
untuk masing-masing ikon.
Secara default
tampilan Standard Toolbar adalah
sebagai berikut.
Gambar
4. Tampilan Standard Toolbar
Ikon-ikon yang tertampil di Standard
Toolbar dapat diganti sesuai kebutuhan. Nama perintah ikon dapat kita
ketahui dengan cara mengarahkan pointer
mouse pada ikon yang dipilih sehingga akan tampil nama dari ikon tersebut.
Gambar
5. Tampilan hint Perintah Ikon
Tabel 2. Tampilan Menu dan Ikon pada Standard Toolbar
Ikon
|
Nama Perintah
|
|
New
|
|
Open
|
|
Save
|
|
Find
|
|
Publish Site
|
|
Toogle Pane
|
|
Print
|
|
Preview in Microsoft Internet
Explorer 7
|
|
Spelling
|
|
Cut
|
|
Copy
|
|
Paste
|
|
Format Painter
|
|
Undo
|
|
Redo
|
|
Web Component
|
|
Insert Table
|
|
Insert layer
|
|
Insert Picture From File
|
|
Drawing
|
|
Insert Hyperlink
|
|
Refresh
|
|
Stop
|
|
Show All
|
|
Show Layer Anchors
|
|
Microsoft Office FrontPage Help
|
3.
Formatting
Toolbar
Formatting Toolbar adalah kumpulan ikon-ikon yang
disediakan oleh FrontPage untuk
memformat halaman web yang sedang
dibuat/diedit sehingga sesuai dengan apa yang diharapkan. Gambar
6 menunjukkan tampilan menu ikon untuk Formatting
Toolbar sedangkan keterangan masing-masing ikon dapat dilihat pada tabel 3.
Gambar 6. Tampilan Formatting Toolbar
Tabel 3. Tampilan Menu dan Ikon pada Formatting Toolbar
Ikon
|
Nama Perintah
|
|
Style
|
|
Font
|
|
Font Size
|
|
Bold
|
|
Italic
|
|
Underline
|
|
Align Left
|
|
Align Center
|
|
Align Right
|
|
Justify
|
|
Increase
|
|
Decrease
|
|
Numbering
|
|
Bullets
|
|
Decrease Indent
|
|
Increase Indent
|
|
Outside border
|
|
Highlight
|
|
Font color
|
4.
Views
Bar
Views 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. Gambar 7 menunjukkan tampilan menu ikon untuk Views Bar sedangkan keterangan
masing-masing ikon dapat dilihat pada tabel 4.
Gambar 7. Tampilan Views Bar
Tabel 4. Tampilan Menu dan Ikon pada Views Bar
Ikon
|
Nama Perintah
|
|
Show Design View
|
|
Show Split View
|
|
Show Code View
|
|
Show Preview View
|
BAB
II
FUNGSI
MENU DAN IKON
PADA
PERANGKAT LUNAK
DESAIN
WEB
A.
Pengantar
Pada bab
II ini akan dibahas fungsi perintah menu dan ikon yang terdapat pada Microsoft FrontPage. Perintah
dan fungsi ikon dan menu adalah sama meskipun tampilan mereka sangat berbeda.
Sebelumnya kita harus mengetahui apa itu menu atau ikon. Menu adalah bentuk
perintah yang ditampilkan dalam bentuk simbol teks. Pada Microsoft FrontPage, menu-menu terdiri atas File, Edit,
View,
Insert,
Format,
Tools,
Table,
Data,
Frames,
Window,
dan Help.
Di dalam menu-menu tersebut terdapat submenu-submenu yang perintahnya sesuai
dengan kategori menu. Menu File
berisi perintah yang berhubungan dengan file
yang sedang dikerjakan, menu Edit berisi perintah penyuntingan,
menu View
berisi perintah pengaturan layar tampilan, menu Insert berisi
perintah intuk menyisipkan, menu Format berisi perinta untuk
pengaturan format dari halaman web
yang sedang dikerjakan, menu Tools berisi kumpulan
perintah yang sangat berguna untuk mengecek kompabilitas halaman web, pengecekan kosakata, optimasi html dan sebagainya. Menu Table
berisi perintah yang berhubungan dengan tabel, menu Data berisi
perintah yang berhubungan dengan data web,
menu Frames
berisi perintah untuk bekerja dengan frame,
menu Window
berisi perintah untuk membuka window
baru, menutup window dan sebagainya, menu Help berisi perintah untuk
bantuan.
Ikon (Icon) adalah sebuah gambar kecil dalam
bentuk simbol yang berisi perintah tertentu. Tujuan dibuatnya ikon adalah untuk
memudahkan pengguna dalam melakukan perintah atau pengaturan karena ikon ini
berfungsi sebagai shortcut dari
perintah-perintah di Menu Bar. Bentuk
dari ikon-ikon tersebut disesuaikan dengan karakter perintahnya, misalnya ikon
untuk perintah menyimpan (save)
disimbolkan dalam bentuk disket dan sebagainya. Penempatan
ikon-ikon di FrontPage dapat diatur
dan dikostumisasi sesuai keinginan.
B.
Fungsi Menu dan Ikon
1.
Menu Bar
Gambar 8. Tampilan Menu Bar
Menu Bar adalah barisan menu yang
menampilkan perintah yang digunakan untuk mengatur dan mengolah objek. Masing-masing
menu mempunyai submenu dan perintah. Pada modul ini dijelaskan fungsi
submenu-submenu yang sering digunakan dalam perangkat lunak desain web.
a.
Menu File
Menu File berisi submenu dengan beberapa
perintah yang berhubungan dengan pengelolaan file. Menu File terdiri atas hal-hal
yang diuraikan pada tabel 5 berikut ini.
Tabel 5. Fungsi Menu File
Menu
dan Ikon
|
Fungsi
Perintah
|
|
Perintah yang digunakan untuk membuka halaman web baru
|
|
Perintah yang
digunakan untuk membuka halaman web
yang sudah disimpan sebelumnya
|
|
Perintah yang digunakan untuk menutup lembar kerja
|
|
Perintah yang
digunakan untuk membuka site
|
|
Perintah yang
digunakan untuk menutup site
|
|
Perintah yang digunakan untuk menyimpan halaman web
|
|
Perintah yang digunakan untuk menyimpan halaman web dengan nama/ekstensi yang lain
|
|
Perintah yang
digunakan untuk menyimpan semua halaman web
yang terbuka
|
|
Perintah yang
digunakan untuk melakukan pencarian berdasarkan kata kunci (keyword) yang diberikan
|
|
Perintah yang digunakan untuk melakukan publikasi site ke server.
|
|
Perintah yang digunakan untuk mengimpor suatu file/folder ke direktori site
|
|
Perintah yang digunakan untuk mengekspor site ke suatu direktori
|
|
Perintah yang digunakan untuk mencoba halaman web yang sedang dibuat pada beberapa browser yang telah ter-install di komputer.
|
|
Perintah yang digunakan untuk mengatur property halaman web ketika mau dicetak
|
|
Perintah yang digunakan untuk mencetak (print) halaman web
|
|
Perintah yang digunakan untuk mengirim pesan via e-mail
|
|
Perintah yang
digunakan untuk mengatur property
halaman web seperti title, description, keyword,
dan sebagainya.
|
|
Perintah yang
digunakan untuk melihat/membuka daftar file
yang telah dibuka sebelumnya
|
|
Perintah yang
digunakan untuk melihat/membuka daftar site
yang telah dibuka sebelumnya
|
|
Perintah yang digunakan untuk menutup aplikasi FrontPage
|
b.
Menu Edit
Menu ini berisi perintah yang berhubungan dengan penyuntingan halaman web. Menu ini terdiri atas :hal-hal yang
diuraikan pada tabel 6 berikut ini.
Tabel 6. Fungsi Menu Edit
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah
yang digunakan untuk undo (tidak
jadi) melakukan sesuatu. “Typing” yang tampil pada gambar akan
berubah sesuai keadaan.
|
|
Perintah yang digunakan untuk menyalin
suatu teks atau gambar namun sekaligus menghapus teks itu di tempat asalnya
|
|
Perintah yang digunakan untuk menyalin (copy) suatu teks ataupun gambar.
|
|
Perintah yang digunakan untuk menampilkan
apa saja yang ada dalam clipboard
(suatu tempat yang digunakan untuk menampung teks atau gambar yang kita dikopi)
|
|
Perintah yang digunakan untuk menempelkan
teks atau gambar yang telah dikopi
|
|
Berisi perintah yang sama dengan Paste
namun ada pilihan paste tambahan
sehingga kita lebih bisa memilih apa saja yang akan di-paste-kan
|
|
Perintah yang digunakan untuk memilih
semua yang tampil di lembar kerja
|
|
Perintah yang digunakan untuk melakukan
pencarian teks di lembar kerja aktif
|
|
Perintah yang digunakan untuk melakukan pencarian
suatu teks kemudian mengganti teks yang ditemukan dengan teks yang lain
|
|
Perintah yang digunakan untuk mengarahkan
fokus layar ke tempat yang telah di-bookmark
sebelumnya
|
|
Perintah yang digunakan untuk membuka quick tag editor
|
c.
Menu View
Menu ini berisi perintah yang berhubungan dengan pengaturan tampilan di
layer dan pengaturan letak menu-menu
dan ikon-ikon tambahan. Menu View terdiri atas hal-hal
yang diuraikan pada tabel 7 berikut ini.
Tabel 7. Fungsi Menu View
Menu
dan Ikon
|
Fungsi
Perintah
|
|
Perintah yang
digunakan untuk menampilkan halaman web
aktif di lembar kerja FrontPage
|
|
Perintah yang
digunakan untuk menampilkan folder di lembar kerja FrontPage
|
|
Perintah yang
digunakan untuk menampilkan direktori web
di server
|
|
Perintah yang digunakan untuk menampilkan
berbagai laporan yang berhubungan dengan website
yang sedang dibangun
|
|
Perintah yang digunakan untuk menampilkan
bantuk dari navigasi website yang
sedang dibangun
|
|
Perintah yang digunakan untuk menampilkan
bentuk alur tautan (hyperlinks)
dari satu halaman ke halaman lain di website
yang sedang dibangun
|
|
Perintah yang digunakan untuk menampilkan
daftar “yang harus dikerjakan” (tasks)
ketika kita membangun website,
biasanya menu ini muncul ketika kita memulai membangun website dari sebuah template
FrontPage
|
|
Perintah
yang digunakan untuk pengaturan tampilan Ruler
dan Grid di lembar kerja FrontPage
|
|
Perintah yang digunakan untuk menampilkan
Tracing Image atau gambar yang
dijadikan panduan dalam membuat halaman web
|
|
Perintah yang
digunakan untuk menampilkan daftar folder
dalam direktori local website yang
sedang dibangun
|
|
Perintah yang digunakan untuk menampilkan
Navigation Pane di lembar kerja FrontPage
|
|
Perintah yang digunakan untuk menampilkan
Task Pane di lembar kerja FrontPage
|
d.
Menu Insert
Menu ini berisi perintah yang berhubungan dengan penyisipan objek ke
halaman web. Menu ini terdiri atas hal-hal
yang diuraikan pada tabel 8 berikut ini.
Tabel 8. Fungsi Menu Insert
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah yang digunakan untuk menyisipkan break
|
|
Perintah yang digunakan untuk menyisipkan garis mendatar
|
|
Perintah yang digunakan untuk menyisipkan layer
|
|
Perintah yang digunakan untuk menyisipkan frame yang berupa layer
|
|
Perintah yang digunakan untuk menyisipkan tanggal dan waktu
|
|
Perintah yang digunakan untuk menyisipkan simbol
|
|
Perintah yang digunakan untuk menyisipkan komentar
|
|
Perintah yang digunakan untuk menyisipkan kompone web yang telah
disediakan, seperti marquee, button,
hit counter, dan sebagainya
|
|
Perintah yang digunakan untuk menambahkan basis data
|
|
Perintah yang digunakan untuk menambahkan omponen form yang berupa textbox, text area, label, dan
sebagainya
|
|
Perintah yang digunakan untuk menyisipkan gambar
|
|
Perintah yang digunakan untuk menambahkan tombol interaktif
|
|
Perintah yang digunakan untuk menambahkan file lain
|
|
Perintah yang digunakan untuk memberikan penanda (bookmark)
|
|
Perintah yang digunakan untuk membuat link yang terhubung ke file lain
|
e.
Menu Format
Menu ini berisi perintah yang digunakan untuk melakukan pengaturan atau format objek yang ada di halaman web. Menu Format terdiri atas hal-hal yang diuraikan pada tabel 9 berikut
ini.
Tabel 9. Fungsi Menu Format
Menu dan Ikon
|
Fungsi Perintah
|
|
Pengaturan huruf
|
|
Pengaturan paragraf
|
|
Pemberian nomor atau bullet
|
|
Pengaturan bentuk garis dan model pewarnaan
|
|
Pengaturan posisi objek teks maupun gambar
|
|
Pengaturan behaviors dari
halaman web
|
|
Pengaturan layer yang digunakan
|
|
Pengaturan format-format tampilan web
yang telah disediakan
|
|
Pengaturan style dari teks
|
|
Pengaturan terhadap file style
sheet (CSS) yang digunakan
|
|
Pengaturan transisi dari halaman web
|
|
Pengaturan background halaman web
|
|
Pengaturan terhadap template web yang dinamik
|
|
Membuang format yang sudah ada
|
|
Pengaturan property terhadap objek
yang terpilih
|
f.
Menu Tools
Menu ini berisi perangkat atau tool
yang digunakan untuk melakukan pengaturan atau format pada halaman web.
Menu ini terdiri atas hal-hal yang diuraikan pada tabel 10 berikut ini.
Tabel 10. Fungsi Menu Tools
Menu dan Ikon
|
Fungsi Perintah
|
|
Fasilitas pengecekan pengejaan bahasa
|
|
Fasilitas kamus
|
|
Pengaturan kode HTML
|
|
Pengaturan kompabilitas browser
yang digunakan
|
|
Perintah yang digunakan untuk mengoptimalkan kode HTML
|
|
Penambahan, pengubahan maupun penghapusan macro
|
|
Kemungkinan untuk penambahan file
lain
|
|
Pengaturan toolbar dan ikon
|
|
Opsi-opsi untuk pengaturan tampilan
|
|
Opsi-opsi yang ada untuk pengaturan halaman web
|
g.
Menu Table
Menu ini berisi perintah yang digunakan untuk melakukan pengaturan terhadap
objek tabel yang ada di halaman web. Menu
ini terdiri atas hal-hal yang diuraikan pada tabel 11 berikut ini.
Tabel 11. Fungsi Menu Table
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah yang digunakan untuk melakukan layout atau pengaturan tabel dan sel
|
|
Perintah yang digunakan untuk menggambar tabel
|
|
Perintah yang digunakan untuk menambah tabel, kolom, baris, sel, dan
judul
|
|
Perintah yang digunakan untuk menghapus sel
|
|
Perintah yang digunakan untuk memilih tabel, kolom, baris dan sel
|
|
Perintah yang digunakan untuk menggabungkan beberapa sel menjadi satu sel
|
|
Perintah yang digunakan untuk membagi sel menjadi beberapa sel
|
|
Perintah yang digunakan untuk membagi tabel
|
|
Perintah yang digunakan untuk mengatur tabel sesuai dengan format yang
telah disediakan
|
|
Perintah yang digunakan untuk mengubah ukuran baris tabel pada ukuran
yang sama
|
|
Perintah yang digunakan untuk mengubah ukuran kolom tabel pada ukuran
yang sama
|
|
Perintah yang digunakan untuk mengubah ukuran lebar tabel menyesuaikan
isi
|
|
Perintah yang digunakan untuk mengubah bentuk tabel ke format teks atau
sebaliknya
|
|
Perintah yang digunakan untuk mengisi data
|
|
Perintah yang digunakan untuk mengatur property dari tabel, seperti column,
row, background, border, dan sebagainya
|
h.
Menu Data
Menu ini berisi perintah yang digunakan untuk melakukan pengaturan atau format objek yang ada di halaman web. Menu ini terdiri atas hal-hal yang
diuraikan pada tabel 12 berikut ini.
Tabel 12. Fungsi Menu
Data
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah yang digunakan untuk memasukkan data yang mungkin ada dan
digunakan
|
i.
Menu Frames
Menu ini berisi perintah yang digunakan untuk melakukan pengaturan objek frame yang ada di halaman web. Menu ini terdiri atas hal-hal yang
diuraikan pada tabel 13 berikut ini.
Tabel 13. Fungsi Menu Frames
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah yang digunakan untuk membagi frame
menjadi beberapa frame
|
|
Perintah yang digunakan untuk menghapus frame
|
|
Perintah yang digunakan untuk membuat halaman baru
|
|
Perintah yang digunakan untuk menyimpan frame
|
|
Perintah yang digunakan untuk menyimpan frame dengan nama/ekstensi yang lain
|
|
Perintah yang digunakan untuk mengatur property dari frame,
seperti name, title, size, dan
sebagainya
|
j.
Menu Window
Menu ini berisi perintah yang digunakan untuk melakukan pengaturan window yang ada di halaman web. Menu ini terdiri atas hal-hal yang
diuraikan pada tabel 14 berikut ini.
Tabel 14. Fungsi Menu Window
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah yang digunakan untuk membuat halaman web baru
|
|
Perintah yang digunakan untuk membuka halaman web pada window baru
|
|
Perintah yang digunakan untuk memilih halaman web dengan nama new_page_1.htm
|
|
Perintah yang digunakan untuk menutup semua halaman web yang terbuka
|
k.
Menu Help
Menu Help digunakan sebagai
perangkat bantuan pagi pengguna aplikasi Microsoft
FrontPage. Menu ini terdiri atas hal-hal yang diuraikan pada tabel 15
berikut ini.
Tabel 15. Fungsi Menu Help
Menu dan Ikon
|
Fungsi Perintah
|
|
Perintah yang digunakan untuk menampilkan bantuan
|
|
Perintah yang digunakan untuk menampilkan asisten office
|
|
Sambungan langsung (internet)
ke Microsoft Office
|
|
Kumpulan dari aplikasi-aplikasi tambahan dari pembuat Microsoft FrontPage
|
|
Cara untuk menghubungi pembuat dari Microsoft
FrontPage
|
|
Perintah yang digunakan untuk melakukan cek terhadap hal-hal yang bisa di-update
|
|
Perintah yang digunakan untuk mendeteksi kerusakan dan memperbaiki Microsoft FrontPage
|
|
Perintah yang digunakan untuk mengakifkan Microsoft FrontPage
|
|
Umpan balik konsumen pengguna Microsoft
FrontPage
|
|
Segala sesuatu tentang Microsoft
FrontPage
|
- Standard Toolbar
Standard Toolbar merupakan
kumpulan ikon yang berfungsi untuk pengolahan layar utama Microsoft FrontPage, misalnya untuk membuat dokumen baru, membuka dokumen
yang telah disimpan, menyimpan dokumen dan lain-lain.
Tabel 16. Fungsi Ikon
pada Standard Toolbar
Ikon
|
Nama Perintah
|
Keterangan
|
|
New
|
Membuat
dokumen baru
|
|
Open
|
Membuka
dokumen
|
|
Save
|
Menyimpan
dokumen
|
|
Find
|
Mencari
kata
|
|
Publish Site
|
Memasang hasil desain web di internet
|
|
Print
|
Mencetak
dokumen
|
|
Preview
|
Melihat
hasil desain web
|
|
Spelling
|
Cek spelling kata
|
|
Cut
|
Memotong
objek
|
|
Copy
|
Menyalin
objek
|
|
Paste
|
Meletakkan
data hasil menyalin
|
|
Format Painter
|
Pengaturan
alat warna
|
|
Undo
|
Kembali ke kondisi sebelumnya
|
|
Redo
|
Menuju kondisi berikutnya
|
|
Web Component
|
Komponen
dari web
|
|
Insert Table
|
Menyisipkan
tabel
|
|
Insert layer
|
Menyisipkan
layer
|
|
Insert Picture From File
|
Menyisipkan gambar dari file yang tersimpan
|
|
Drawing
|
Menggambar
|
|
Insert Hyperlink
|
Menyisipkan
hyperlink (pertautan halaman)
|
|
Refresh
|
Menampilkan
ulang
|
|
Stop
|
Menghentikan
proses
|
|
Show All
|
Menampilkan
semua format
|
|
Show Layer Anchors
|
Menampilkan
petunjuk layer
|
|
Microsoft Office FrontPage Help
|
Bantuan
informasi
|
- Formatting Toolbar
Formatting Toolbar adalah kumpulan ikon yang disediakan
oleh FrontPage untuk memformat
halaman web yang sedang dibuat/diedit
sehingga sesuai dengan apa yang diharapkan.
Tabel 17. Fungsi Ikon pada
Formatting Toolbar
Ikon
|
Nama Perintah
|
Keterangan
|
|
Style
|
Jenis style
|
|
Font
|
Jenis
huruf
|
|
Font Size
|
Ukuran
huruf
|
|
Bold
|
Menebalkan
teks/huruf
|
|
Italic
|
Membentuk
miring teks/huruf
|
|
Underline
|
Memberi
garis bawah teks/huruf
|
|
Align Left
|
Meratakirikan
objek
|
|
Align Center
|
Meratatengahkan
objek
|
|
Align Right
|
Meratakanankan
objek
|
|
Justify
|
Merata
kanan-kiri objek
|
|
Increase
|
Memperbesar
huruf
|
|
Decrease
|
Memperkecil
huruf
|
|
Numbering
|
Memberi
penomoran
|
|
Bullets
|
Memberi bullet
|
|
Decrease Indent
|
Mengurangi
paragraf
|
|
Increase Indent
|
Menambah
paragraf
|
|
Outside border
|
Membuat
garis pada tabel
|
|
Font color
|
Merubah
warna huruf
|
- Views Bar
Views 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.
Tabel 18. Fungsi Ikon pada Views
Bar
Ikon
|
Nama Perintah
|
Keterangan
|
|
Show Design View
|
Melihat tampilan desain
|
|
Show Split View
|
Tampilan
dibagi menjadi 2 (desain dan kode)
|
|
Show Code View
|
Melihat tampilan kode program
|
|
Show Preview View
|
Melihat hasil desain web dalam browser internal
|
BAB
III
PENGGUNAAN MENU DAN IKON
PADA PERANGKAT LUNAK
DESAIN WEB
A.
Pengantar
Pada materi ini akan dijelaskan bagaimana cara menggunakan
menu dan ikon pada perangkat lunak desain web.
Perlu diketahui bahwa pengembangan software
selalu menciptakan inovasi-inovasi baru dalam menampilkan sebuah tampilan, khususnya
tampilan menu dan ikon. Hal ini bertujuan untuk memudahkan si pengguna menjalankan
perintah yang dimiliki oleh program tersebut. Oleh sebab itu, materi yang
diberikan berupa cara bagaimana menggunakan menu dan ikon dengan pendekatan
fungsi alat (yaitu fungsi mouse dan
fungsi keyboard).
B.
Penggunaan Menu dan Ikon
1.
Penggunaan
Menu Bar
Penggunaan
menu pada Menu Bar dapat menggunakan
2 (dua) cara, yaitu menggunakan mouse
dan menggunakan fungsi tombol keyboard.
a.
Menggunakan Mouse.
1)
Arahkan pointer
mouse pada salah satu Menu Bar.
Sebagai contoh arahkan pointer mouse pada menu File
2)
Klik menu File, maka akan muncul sub
menu File
berisi perintah-perintah pengelolaan file.
3)
Klik salah satu perintah yang diinginkan.
Sebagai contoh klik submenu perintah New, maka perintah yang
dilakukan adalah membuat dokumen baru
4)
Lakukan hal yang sama untuk menu yang lain.
b.
Menggunakan fungsi tombol keyboard :
1)
Menggunakan fungsi tombol Alt
Jika kita melihat Menu
Bar, 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.
a)
Tekan tombol Alt (tidak dilepas) pada keyboard dan tombol huruf F secara bersamaan.
b)
Tekan tombol huruf yang bergaris bawah pada submenu
perintah.
c)
Sebagai contoh perintah New maka yang
ditekan tombol huruf N.
d)
Maka perintah yang dilakukan adalah membuat dokumen baru.
e)
Lakukan hal yang sama untuk menu yang lain.
2)
Menggunakan fungsi tombol Ctrl
Penggunaan menu fungsi tombol Ctrl pada dasarnya hampir sama dengan
menggunakan fungsi tombol Alt, akan tetapi tidak semua menu dapat
menggunakan fungsi tombol Ctrl. Berikut ini beberapa contoh menu
perintah yang dapat menggunakan fungsi tombol Ctrl :
Tabel 19. Fungsi Tombol
Ctrl
Fungsi Ctrl
|
Fungsi Perintah
|
Ctrl +N
|
Membuat lembar
kerja baru
|
Ctrl +O
|
Membuka
lembar kerja baru
|
Ctrl +S
|
Menyimpan
lembar kerja
|
Ctrl +P
|
Mencetak
lembar kerja
|
Ctrl +Z
|
Kembali ke kondisi sebelumnya
|
Ctrl +Y
|
Menuju ke
kondisi berikutnya
|
Ctrl +X
|
Memotong
objek
|
Ctrl +C
|
Menyalin
objek
|
Ctrl +V
|
Meletakkan
hasil salinan objek
|
Fungsi tombol Ctrl dapat dilihat pada tampilan submenu
disetiap Menu Bar.
Perhatikan tampilan submenu pada menu File berikut:
Gambar 9. Fungsi Tombol
Ctrl
pada Menu Bar
3)
Penggunaan Perintah Ikon
Untuk dapat menggunakan perintah ikon yaitu dengan melakukan cara sebagai
berikut.
a)
Arahkan pointer
mouse pada ikon perintah.
b)
Sebagai contoh arahkan pointer mouse pada ikon pada Standard Toolbar.
c)
Lakukan klik menggunakan tombol mouse sebelah kiri.
d)
Maka perintah yang dilakukan adalah membuat dokumen baru.
2.
Penggunaan
Ikon pada Standard Toolbar
Untuk
dapat menggunakan perintah ikon pada Standard
Toolbar yaitu dengan melakukan cara sebagai berikut.
a.
Arahkan pointer
mouse pada ikon Standard Toolbar.
Sebagai contoh arahkan pointer mouse pada ikon pada Standard Toolbar.
b.
Lakukan klik menggunakan tombol mouse sebelah kiri.
c.
Maka perintah yang dilakukan adalah membuat lembar kerja
baru.
3.
Penggunaan
Ikon pada Formatting Toolbar
Untuk
dapat menggunakan perintah ikon pada Formatting
Toolbar yaitu dengan melakukan cara sebagai berikut :
a.
Blok terlebih dahulu kata atau kalimat yang akan
diformat.
b.
Arahkan pointer mouse
pada ikon perintah.
Sebagai contoh arahkan pointer mouse
pada ikon pada Formatting Toolbar
c.
Lakukan klik menggunakan tombol mouse sebelah kiri.
d.
Maka perintah yang dilakukan adalah untuk menebalkan
kata/huruf yang diblok tadi.
4.
Penggunaan
Ikon pada Views Bar
Untuk
dapat menggunakan perintah ikon pada Views
Bar yaitu dengan melakukan cara sebagai berikut :
a.
Arahkan pointer
mouse pada ikon Views Bar.
Sebagai contoh arahkan pointer mouse pada ikon pada Views Bar.
b.
Lakukan klik menggunakan tombol mouse sebelah kiri.
c.
Maka perintah yang dilakukan adalah menampilkan hasil
tampilan desain web pada browser internal Microsoft frontPage.
BAB
IV
MEMBUAT
DESAIN WEB
SEDERHANA
A.
Pengantar
Pada bab sebelumnya kita belajar mengenai kegunaan
menu-menu dan ikon-ikon di Microsoft
FrontPage, maka di bab ini akan dijelaskan bagaimana membuat sebuah website sederhana. Penjelasan pada bab
ini berbasis gambar sehingga memudahkan bagi yang mempelajarinya.
B.
Memulai Mengoperasikan Microsoft FrontPage 2003
Gambar 10. Menjalankan Aplikasi FrontPage
`
1. Klik Start
2. Setelah muncul sejumlah menu, klik All
Programs
3. Klik Microsoft Office
4. Klik Microsoft Office FrontPage 2003
5. Jika pada desktop terdapat shortcut
Microsoft FrontPage 2003 dapat
langsung melakukan double klik pada shortcut tersebut
C.
Membuat Site Baru
1.
Setelah FrontPage
2003 terbuka, akan muncul tampilan seperti di bawah ini.
Gambar 11. Lembar Kerja Microsoft FrontPage
2.
Pada
Menu Bar, klik File > New
Gambar 12. Memilih Submeu New pada Menu File
3.
Pada
Tasks Pane klik One page Web site…
Gambar 13. Membuat Web Satu Halaman
4.
Ketika
window Web Site Templates muncul,
select (klik sekali) One Page Web Site
seperti pada gambar di bawah ini.
Gambar 14. Memilih Template
5.
Kemudian
klik Browse.
Gambar 15. Memilih Tempat Penyimpanan File Web
6.
Akan
muncul window baru seperti pada gambar berikut, kemudian klik My Documents.
Gambar 16. Memilih Tempat Penyimpanan File Web
7.
Setelah
masuk ke My Documents, klik ikon New Folder untuk membuat folder baru di
dalam My Documents.
Gambar 17. Membuat Folder Baru
8.
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.
Gambar 18. Memberi Nama Folder Baru
9.
Setelah folder
“Sekolahku” terbuka klik Open.
Gambar 19. Membuka Folder “Sekolahku”
10. Kemudian klik OK di window Web
SiteTemplates.
Gambar 20. Menekan Tombol OK untuk Melanjutkan
11. Setelah itu double klik pada index.htm
seperti pada gambar berikut ini.
Gambar 21. Double Klik pada index.htm
12. Akan muncul tab index.htm.
Gambar 22. Halaman index.htm Sudah Tebuka
13.
Untuk lebih memudahkan, pada Menu Bar klik View > Folder list
Gambar 23. Submenu Folder List pada Menu File
D.
Membuat Home Page
1.
Pada halaman yang kosong seperti pada gambar ketik “Home page Sekolahku”.
Gambar 24. Pengisian Tulisan pada Halaman Web
Ingatlah
nama halaman ini yaitu index.htm, ini
adalah home page dari website “Sekolahku”.
|
2.
Klik kanan pada bagian kosong di halaman web yang sedang kita buat, kemudian klik
Page Properties.
Gambar 25. Melakukan Pengaturan Halaman
3.
Sesudah
window Page Properties muncul, pada tab General > Title,
ketik “Home page Sekolahku” seperti pada gambar di bawah ini. Klik tombol OK untuk melanjutkan.
Gambar 26. Pengisian Property Title
|
||||
|
Gambar 27. Tulisan Title
pada Browser
4.
Simpan
halaman web dengan cara mengklik ikon
Save.
Gambar 28. Melakukan Penyimpanan
·
Kita
telah membuat sebuah home page dari website “Sekolahku”
·
Nama
file home page adalah index.htm
·
Terletak di folder
Sekolahku di My Documents
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.
Langkah yang dilakukan dijelaskan sebagai berikut.
1.
Pada
Menu Bar klik File
> New
Gambar 29. Memilih Submeu New pada Menu File
2.
Kemudian
klik More page templates.
Gambar 30. Memilih Template Halaman
3.
Setelah
window Page Templates muncul, klik
tab Style Sheets.
Gambar 31. Memilih Style Sheet
4.
Double klik pada ikon Normal Style Sheet.
Gambar 32. Memilih Normal Style Sheet
Sebuah
Style Sheet kosong akan terbuka.
Gambar 33. Style Sheet Baru telah Terbuka
5.
Pada Menu Bar,
klik Format
> Style.
Gambar 34. Memilih Submenu Style pada Menu Format
6.
Setelah
window Style muncul, klik h1.
Gambar 35. Memilih Style h1
7.
Klik
Modify untuk melanjutkan.
Gambar 36. Klik Tombol Modify untuk Melanjutkan
8.
Pada
window Modify Style klik Format > Font.
Gambar 37. Melakukan Format Font
9.
Pada window Font,
klik Verdana pada daftar Font.
Gambar
38. Memilih Huruf dengan Jenis Verdana
10.
Dibawah Font
Style, klik Bold, kemudian klik
tombol OK untuk melanjutkan.
Gambar 39. Memilih Bold untuk Menebalkan Huruf
11. Klik OK pada window Modify Style.
Gambar
40. Klik Tombol OK untuk Melanjutkan
12. Klik OK pada window Style.
Gambar
41. Klik tombol OK untuk Melanjutkan
13.
Klik ikon Save
pada Standard Toolbar.
Gambar 42. Klik Ikon Save untuk Menyimpan
14. Selanjutnya kan muncul window Save As, masukkan nama format.css
kemudian klik Save.
Gambar 43. Klik Tombol Save untuk Menyimpan
15.
Tampilan akan menjadi seperti gambar berikut.
Gambar 44. Tampilan Hasil format.css
F.
Mengintegrasikan Style Sheet
1.
Klik
tab index.htm
Gambar 45. Tampilan tab index.htm
2.
Pada
Menu Bar klik Format > Style
Sheet Links.
Gambar 46. Pemilihan Style Sheet Links
3.
Pada
window Link Style Sheet pilih All pages kemudian klik Add…
Gambar 47. Pemilihan All pages
4.
Pada
window Select Style Sheet pilih format.css. Klik tombol OK untuk melanjutkan.
Gambar 48. Memilih format.css yang sudah dibuat
5.
Pada
window Link Style Sheet klik OK.
Gambar
49. Klik Tombol OK untuk Melanjutkan
6.
Ketika
ada pesan konfirmasi pilih Continue.
Gambar 50. Klik Tombol Continue untuk Melanjutkan
G.
Menambahkan Format
1.
Klik pada kalimat “Home page Sekolahku” untuk menempatkan
cursor di baris yang sama dengan
kalimat.
Gambar 51. Menempatkan
cursor pada Kalimat
Klik
dropdown list seperti pada gambar
berikut ini.
Gambar 52. Menampilkan
dropdown list
2.
Pada
menu pilih Heading 1.
Gambar 53. Memilih heading
1 pada dropdown list
3.
Setelah itu tampilan akan seperti pada gambar berikut ini.
Gambar 54. Tampilan Hasil Format
4.
Pada toolbar klik
ikon Save.
Gambar 55. Klik Ikon Save pada Standard Toolbar
H.
Mengubah Ukuran Huruf
1.
Klik
pada tab format.css.
Gambar 56. Memilih tab format.css
2.
Pada Menu Bar klik Format
> Style
Gambar 57. Membuat Style
Baru
3.
Pada
window Style klik Modify.
Gambar 58. Klik Tombol Modify untuk Melanjutkan
4.
Pada
window Modify Style klik Format
> Font
Gambar 59. Melakukan Format Font
5.
Pada
window Font ketikkan 16pt. Klik tombol OK untuk melanjutkan.
Gambar 60. Memilih Ukuran Huruf 16pt
6.
Klik
OK
Gambar 61. Klik Tombol
OK untuk Melanjutkan
7.
Klik
OK di window Style
Gambar 62. Klik Tombol
OK untuk Melanjutkan
8.
format.css
akan terlihat seperti pada gambar berikut ini.
Gambar 62. Tampilan
Hasil format.css
9.
Klik
ikon Save.
Gambar 63. Klik Ikon Save pada Standard Toolbar
10.
Klik tab index.htm,
maka sekarang akan kelihatan seperti gambar di bawah ini.
Gambar 64. Tampilan Hasil format.css di Browser
I.
Mengubah Ketebalan Huruf
1.
Pastikan cursor berada di bagian akhir kalimat “Home page Sekolahku”. Kemudian tekan tombol Enter untuk membuat peragraf baru.
Gambar 65. Penempatan cursor di Akhir Kalimat
2.
Setelah membuat paragraf baru, ketik kalimat :
“Berikut ini adalah nama teman-temanku :“
Gambar 66. Tampilan Hasil setelah Ada Penambahan
Kalimat
3.
Save
halaman itu dengan mengeklik ikon Save
seperti yang dijelaskan pada bab sebelumnya.
4.
Selanjutnya klik
tab format.css.
Gambar 67. Posisi tab format.css
5.
Pada
format.css klik baris di bawah h1 untuk menempatkan cursor mouse.
Gambar 68. Posisi cursor
di bawah h1
6.
Pada Menu Bar
klik Format
> Style
Gambar 69. Memilih Submenu Style
7.
Pada window Style,
klik HTML
tags seperti pada gambar berikut.
Gambar 70. Memilih HTML
tags pada dropdown list
8.
Setelah HTML tags dipilih, klik p.
Gambar 71. Pilih Styles
p
9.
Klik
tombol Modify untuk melanjutkan.
Gambar 72. Klik Tombol Modify untuk Melanjutkan
10. Pada window Modify Style klik Format,
kemudian pilih Font.
Gambar 73. Melakukan Format Font
11. Setelah window Font muncul, pilih font Arial
dan ukuran 10pt seperti gambar di bawah
ini.
Gambar 74. Memilih font
Arial dengan ukuran 10pt
12. Kemudian klik OK pada window Font, klik OK pada window Modify Style, klik OK
pada window Style.
13. Selanjutnya akan terlihat seperti
gambar di bawah ini.
Gambar 75. Tampilan Hasil format.css
14. Klik ikon Save
untuk menyimpan Style Sheet.
Gambar 76. Klik ikon Save pada Standard Toolbar
15.
klik tab index.htm
lalu akan terlihat seperti gambar di bawah ini.
Gambar 77.
Tampilan Hasil di Browser
16. Highlight kata “nama teman-temanku”
Gambar 78. Highlight
kata “nama teman-temanku”
17. Pada Formatting
Toolbar klik ikon Bold.
Gambar 79. Klik ikon Bold pada Formatting Toolbar
18. Kemudian klik pada bagian yang kosong di
lembar kerja untuk menghilangkan highlight,
maka tampilan akan menjadi seperti pada gambar berikut.
Gambar 80. Tampilan Hasil di Browser
19.
Simpan halaman web dengan mengklik ikon Save
J.
Perataan Teks (Align Text)
1.
Tempatkan cursor
pada kalimat dengan cara mengeklik pada kalimat yang akan diratakan.
2.
Pada
Formatting Toolbar klik ikon Align Right.
Gambar 81. Klik
Ikon Align Right untuk Merata
Kanankan Kalimat
3.
Halaman web
akan berbentuk seperti di bawah ini.
Gambar 82. Tampilan
Hasil di Browser
4.
Klik
ikon Align Center
Gambar 83. Klik Ikon Center untuk Membuat Tengah Kalimat
5.
Halaman web
akan terlihat seperti di bawah ini.
Gambar 84. Tampilan Hasil di Browser
6.
Klik
ikon Align Right.
Gambar 85. Klik Ikon Align Left untuk Merata Kirikan Kalimat
7.
Halaman web
akan terlihat seperti di bawah ini.
Gambar 86. Tampilan Hasil di Browser
8.
Simpan halaman web
dengan mengklik ikon Save
K.
Indent
Text
1.
Buatlah
3 baris tulisan nama seperti di bawah ini.
Andi
Supandi
Ani
Widiawati
Tono
Sutono
Gambar 87. Penambahan 3 Baris Tulisan
2.
Highlight ketiga baris nama yang baru dibuat.
Gambar 88. Tampilan Hasil setelah Proses Highlight
3.
Kemudian
klik ikon Increase Indent.
Gambar 89. Klik Ikon Increase Indent
4.
Tampilan halaman akan seperti ini :
Gambar 90. Tampilan Hasil di Browser
5.
Simpan halaman dengan mengeklik ikon Save
L.
Membuat List (Daftar)
1.
Highlight ketiga baris tulisan nama kemudian
klik ikon Bullets.
Gambar 91. Klik Ikon Bullets pada Formatting
Toolbar
2.
Tampilan halaman web
akan menjadi seperti dibawah ini.
Gambar 92. Tampilan Hasil di Browser
3.
Simpan halaman dengan mengklik ikon Save
M.
Membuat Link ke Halaman Baru
1.
Buatlah sebuah halaman web baru, lalu pada Standard Toolbar
klik ikon New.
Gambar 93. Klik Ikon New pada Standard Toolbar
2.
Tutup
(close) Layout Tables and Cells pane jika terbuka.
Gambar 94. Klik Tombol Close untuk Menutup
3.
Klik kanan di tempat kosong pada halaman web baru, kemudian klik Page Properties.
Gambar 95. Memilih Submenu Page Properties
4.
Pada
Title masukkan Halaman Andi.
Gambar 96. Mengisi Title
5.
Kemudian
klik OK
6.
Simpan halaman web
baru dengan mengeklik ikon Save.
7.
Ketika
window Save As muncul, pada File name ketik andi.htm
Gambar 97. Mengisi File
Name
8.
Klik
Save.
Gambar 98. Klik Tombol Save untuk Menyimpan
|
9.
Ketik
kalimat berikut.
“Ini adalah halaman
Andi Supandi”
Gambar 99. Mengetik Kalimat
10. Pada Menu Bar klik Format > Style Sheet Links
Gambar 100. Memilih Submenu Style Sheet Links
11. Pada window Link Style Sheet klik Add.
Gambar 101. Klik Tombol Add untuk Menambah
12. Pada window Select Style Sheet klik format.css.
Gambar 102. Klik format.css
13. Kemudian klik OK, halaman web yang baru dibuat telah tersambung
dengan Style Sheet website, format.css.
14.
Simpan halaman andi.htm
dengan mengeklik ikon Save.
15.
Klik tab format.css.
Kemudian klik pada sebelah bawah p untuk
menempatkan cursor.
Gambar 103. Klik tab format.css
Gambar 104. Posisi
cursor pada tab format.css
16.
Pada Menu Bar
klik Format,
kemudian Style.
Gambar 105. Memilih Submenu Style
17. Pada window Style, klik bagian List,
pilih HTML tags, kemudian pilih style
h2.
Gambar 106. Memilih Style
h2
18. Klik Modify.
Gambar 107. Klik Tombol Modify untuk Melanjutkan
19. Pada window Modify Style klik Format, kemudian
Font.
Gambar 108. Melakukan Format Font
20.
Pada window Font,
klik Verdana,
kemudian pilih 14pt.
Gambar 109. Memilih
Font Verdana dengan Ukuran 14pt
21. Klik OK pada window Font, window Modify Style, window Style format.css
akan terlihat seperti gambar di bawah ini.
Gambar 110. Tampilan Hasil format.css
22. Simpan format.css dengan mengeklik ikon save
23. Klik tab andi.htm.
Gambar 111. Memilih tab andi.htm
24. Tempatkan cursor di baris pertama, kemudian klik Heading 2 pada Style list.
Gambar 112. Memilih Heading 2 pada Style List
25.
Halaman web akan
terlihat seperti dibawah ini.
Gambar 113. Tampilan Hasil di Browser
26.
Simpan halaman web
dengan mengklik ikon Save
N.
Membuat Link Antar Halaman
1.
Klik
tab index.htm.
2.
Highlight pada tulisan “Andi Supandi”.
Gambar 114. Highlight
Tulisan
3.
Pada Standard Toolbar
klik ikon Insert Hyperlink.
Gambar 115. Klik Ikon Insert Hyperlink pada Standard Toolbar
4.
Pada
window Insert Hyperlink, klik andi.
Gambar 116. Memilih File dengan nama andi
5.
Kemudian
klik OK.
6.
Klik
pada halaman web untuk menghilangkan highlight, dan tampilan halaman web akan terlihat seperti dibawah dan Andi Supandi telah menjadi sebuah link ditandai dengan adanya garis bawah
dan perubahan cursor mouse saat
melewati tulisan Andi Supandi.
Gambar 117. Hasil Penambahan Fasilitas Hyperlink
7.
Simpan halaman web
dengan mengklik ikon Save.
8.
Pada
Standard Toolbar klik ikon Preview.
Gambar 118. Klik Ikon Preview untuk Melihat Hasil
9.
Browser akan
terbuka dan dapat dilihat tampilan halaman web
yang kita buat di browser.
Gambar 119. Tampilan Hasil di Browser Internet Explorer
10. Klik Andi Supandi yang telah menjadi link.
Gambar 120. Posisi cursor
mouse saat melewati Link
11.
Maka halaman web
andi.htm akan terbuka.
Gambar 121. Tampilan Hasil di Browser
12. Untuk
menutup browser, klik tombol x pada window.
Gambar 122. Menutup Browser
13. Buatlah halaman web untuk Ani Widiawati dan
Tono Sutono, untuk lebih mudahnya
bukalah halaman web Andi Supandi kemudian Save As sebagai halaman lain.
14.
Kemudian klik tab andi.htm.
Gambar 123. Memilih tab andi.htm
15. Pada Menu Bar, klik File > Save As
Gambar 124. Memilih Submenu Save As
16. Pada window Save As masukkan nama file
ani.htm, kemudian klik Change Title.
Gambar 125. Mengganti Nama File
17. Masukkan Halaman Ani pada window Set
Page Title, kemudian tekan OK.
Gambar 126. Mengganti Title Halaman
18. Tekan Save.
Gambar 127. Klik Tombol Save untuk Menyimpan
19. Setelah Save diklik, secara otomatis halaman web andi.htm yang tadi
terbuka di FrontPage tertutup dan
digantikan oleh ani.htm.
Gambar 128. Tampilan pada tab ani.htm
20. Karena isi halaman web andi.htm
dan ani.htm masih sama, editlah
halaman web ani.htm.
21. Ganti tulisan menjadi “Ini adalah halaman Ani Widiawati”.
Gambar 129. Tampilan Setelah Penggantian Tulisan
22. Simpan halaman ani.htm dengan menekan ikon Save.
23. Klik tab index.htm dan buatlah link
dari halaman index.htm menuju halaman ani.htm pada nama Ani Widiawati.
Gambar 130. Membuat Link
pada Tulisan “Ani Widiawati”
24. Lakukan langkah-langkah yang sama untuk
membuat halaman untuk Tono Sutono. Lakukan
Save As halaman ani.htm dan berikan nama tono.htm,
ganti Title menjadi Halaman Tono, kemudian edit tulisan
dalam halaman tono.htm menjadi “Ini adalah halaman Tono Sutono”.
Gambar 131. Tampilan Setelah
Proses Pembuatan Halaman Baru
25.
Simpan halaman web
dengan mengklik ikon Save.
26.
Buatlah link
dari index.htm menuju halaman tono.htm pada Tono Sutono, sehingga tampilan halaman index.htm menjadi seperti di bawah ini.
Gambar 132. Tampilan
Setelah Proses Pembuatan Link
27.
Simpan halaman dengan mengeklik ikon Save.
28. Klik ikon Preview untuk mencoba melihat tampilan halaman web di browser.
Gambar 133. Klik Ikon Preview untuk Melihat Hasil d Browser
29. Tampilan di browser adalah seperti gambar di bawah ini. Cobalah klik link-link yang ada di halaman web.
Gambar 134. Link-Link
yang Mempunyai Pertautan Halaman
30. Setelah link diklik akan muncul halaman web
yang baru, tekan ikon Back untuk
kembali ke home page.
Gambar 135. Klik Ikon Back untuk Kembali
O.
Memasukkan Gambar
1.
Letakkan
cursor mouse seperti pada gambar
berikut.
Gambar 136. Posisi cursor mouse
2.
Klik
ikon Insert Picture From File.
Gambar 137. Klik Ikon Insert Picture From File
3.
Carilah gambar di komputer, kemudian klik sekali pada
gambar dan tekan Insert.
Gambar 138. Klik
Tombol Insert untuk Menyisipkan
Gambar
4.
Tampilan
index.htm akan menjadi seperti di
bawah ini.
Gambar 139. Tampilan Hasil di Browser
5.
Simpan halaman web
dengan mengklik ikon Save.
6.
Sehingga
akan muncul window Save Embedded Files,
klik Change Folder.
Gambar 140. Klik Tombol Change Folder
7.
Lakukan
double klik pada folder images.
Gambar 141. Double
Klik pada Folder Images
8.
Setelah folder images terbuka, klik OK.
Gambar 142. Klik
Tombol OK untuk Melanjutkan
9.
Kemudian
pada window Save Embedded Files klik OK.
Gambar 143. Klik
Tombol OK untuk Melanjutkan
20. Maka gambar tadi secara otomatis
akan disalin ke folder/direktori website.
10. Klik pada tanda + folder images untuk melihat
apakah gambar sudah disalin (copy)
atau belum.
Gambar 144. Klik Tanda
+ untuk Melihat Isi Folder
11. Setelah tanda + diklik terlihat gambar sudah disalin.
Gambar 145. Isi dari Folder Images
12.
Simpan halaman dengan mengklik ikon Save.
13.
Klik ikon Preview untuk
mengetahui tampilan halaman web di browser.
14.
Tampilan halaman web
di browser akan tampak seperti gambar
di bawah ini.
Gambar 146. Tampilan
Hasil Halaman Web di Browser
DAFTAR PUSTAKA
Direktorat Pembinaan SMP, 2007, Panduan Pembelajaran dan Penilaian TIK SMP SBI, Departemen
Pendidikan Nasional.
Direktorat Pembinaan SMP, 2007, Standar Kompetensi dan Kompetensi Dasar TIK SMP SBI, Departemen
Pendidikan Nasional.
Dr. Erhans A., 2003, Microsoft
Office XP, Cirebon: PT. Ercontara Rajawali.
Firdaus, 2006, 7
Jam Belajar Interaktif FrontPage 2003 untuk Orang Awam, Palembang: Maxicom.
Gregorius Agung, 2000, Microsoft FrontPage 2000 Webbot, Jakarta: PT. Elex Media Komputindo.
Mico
Pardosi, 2001, Pengenalan Internet, Surabaya: Indah.
Greetings!
BalasHapus