Mata Kuliah : Basic Computer

A. Tutorial untuk Pemula Getting Started

Definisi Kata ini sering digunakan dalam Frontpage, jadi pelajarilah !

Hyperlink - Teks atau gambar akan keluar jika bagian ini di klik . Pixel - Ukuran untuk satuan dalam web. Satu pixel sama dengan ukuran 12 pada font Arial. Shortcut menu - Seperti Program lainnya, adalah jalan masuk pintas ke menu dengan mengklik kanan mouse. URL (Universal Resource Locator) - Alamat situs web. biasanya seperti ini"http://" lokasi alamat situs/domain . Web - dalam FrontPage, web anda atau situs anda

Layar FrontPage Terletak dibawah diagram default page layout dalam FrontPage. Anda bisa merubah view beragam tampilan dengan memilih View Option.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Views

Page view memperlihatkan halaman web yang akan diedit atau dibuat web Folders view daftar semua file dan folder dalam web untuk memudahkan dalam mengaturnya. Reports view mengidentifikasi masalah yang berhubungan dengan halaman dan links dengan web termasuk halaman yang lambat saat loading, broken links, dan kesalahan lainnya. Navigation view daftar perintah navigasi dari situs ini dan mengijinkan untuk anda atau user untuk melihat halaman ini. Hyperlinks view mengijinkan anda untuk mengorganisasi link dalam halaman web Tasks view menyediakan suatu keterangan untuk anda masukkan dalam tugas yang anda butuhkan untuk menyelesaikan suatu halaman web.

MenggunakanWeb dengan Web Wizard 1. Buka Frontpage dan pilih File|New|Web... dari menu bar atau klik panah kecil kebawah selanjutnya klik tombol New pada standard toolbar dan pilih Web.... 2. Pilih Tipe web yang ingin dibuat. Biasanya yang terbaik adalah One Page Web yang mana anda bisa membuat halaman kosong yang anda butuhkan. Masukkan lokasi dari web pada lokasi yang disediakan dengan "http://". Lokasi ini dimana anda bisa melihat hasil dari web yang telah anda buat dalam komputer. Dan ini harus di copy kan ke server untuk dapat dilihat melalui WWW.

3. Klik OK dan tunggu FrontPage untuk menyelesaikan web. 4. Sekarang, Mengexplore web anda. Klik Folders view untuk melihat halaman awal (default.htm) yang telah dibuat. "images" folder dimana anda akan menempatkan semua graphics dan foto. Untuk menyimpan image bentuk jpg ataupun gif

Created by : Mr. Vasco

Mata Kuliah : Basic Computer sebaiknya ditempatkan pada suatu folder khusus untuk mempermudah dalam pengaturan. 5. Klik pada Reports view untuk melihat daftar dari report dari situs yang sedang dibuat. Disini anda bisa melihat hyperlink yang kurang baik dan memperbaiki halaman yang terlalu panjang. Melihat navigasi dengan mengklik Navigation view. Sekarang, hanya ada satu halaman web yang terdaftar. Untuk itu coba buat beberapa halaman, ini akan membantu bagaimana beberapa halaman akan melakukan link. 6. Hyperlinks view akan mengijinkan anda untuk mengatur links dari halaman web. 7. Optional - dalam Tasks view, daftar dari pekerjaan yang harus diselesaikan dalam menyelesaikan pembuatan web. Pilih Edit|Task|Add Tasks untuk memasukkan task. atau klik panah kebawah disamping New button pada standard toolbar. 8. Membuat halaman dan menyimpannya, menandainya sebagai halaman yang siap digunakan dapat dilihat pada task view. 9. Klik Folders view untuk menempatkan halaman berikutnya yang sedang dikerjakan. 10. Ketika halaman web siap, anda siap untuk mempublishnya dengan mnyimpannya pada server anda.. Membuat Halaman Web dari Template FrontPage menyediakan banyak halaman templates yang akan bisa dimasukkan dalam web. Ikuti langkah dalam memilih template web page. 1. Pilih File|New|Page... dan pilih salah satu template.

2. Pilih template dan klik OK. 3. Ganti teks yang ada dengan teks yang anda miliki dan foto dengan yang anda miliki.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Report View Ketika selesai membuat web, klik Reports view untuk melihat apakah linknya sudah benar, dan gunakan Reporting toolbar to untuk berpindah antar reports.

Membuka Web Untuk membuka web yang telah anda buat, pilih File|Open Web... dari menu bar. Pilih web folder dari daftar dan klik Open. Menyimpan Web Simpan semua halaman web yang telah dibuat dengan Frontpage. Selanjutnya simpan dalam web server anda.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Page Properties
Page Properties Mengubah bermacam halaman properties dengan memilih File|Properties dari menu bar. Halaman Properties window akan mengijinkan anda untuk mengubah banyak isi dalam properties, seperti background halaman, margins, dan lain lain.

General - Dibawah General tab, satu property membutuhkan perubahan judul Title. Teks ini akan ditampilkan kesebrang diatas layar browser menu ketika

Created by : Mr. Vasco

Mata Kuliah : Basic Computer halaman ditampilkan di web. Background suara sangat tidak direkomendasikan dan kontrol waktu scripting pilihan tidak dibutuhkan untuk dirubah.

Background Cek kotak Background picture dan pilih gambar dengan mengklik tombol Browse... untuk memasukkan pengulangan graphic ke background halaman.

Enable hyperlink rollover effects dimasukkan Cascading Style Sheet ke halaman dapat menyebabkan penampilan links teks untuk mengubah ketika mouse ditempatkan dibawahnya. Set warna Background dan warna default Text jika tidak hitam.. Warna Hyperlink bisa dirubah. Warna yang diset untuk Hyperlink akan berwarna teks link dan tidak bisa dilihat dengan menggunakan web site user.Visited hyperlink warna link akan berubah setelah halaman dikunjungi. Active hyperlink warna link hampir tidak terlihat, dalam mengklik harus cepat. Warna web default adalah biru dan berubah warna kalau ada yang mengunjungi.

Margins - menseting atas dan kiri lebar dengan pixel jika diperlukan.

Themes Themes bisa secara cepat mengisi warna, graphics dan beberapa halaman web.

Buka halaman web dan pilih Format|Theme dari menu atau klik kanan pada halaman dan pilih Theme... dari shorcut menu.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Dibawah Apply Theme to, pilih All pages untuk memasukkan theme ke seluruh halaman dalam web anda. atau Selected page(s) untuk hanya menerapkan theme ke halaman yang aktif . Gulung pilihan theme dan sorot nama theme untuk melihat theme dalam. Sample of Theme window. Klik kotak untuk merubah theme. o Vivid Colors meningkatkan warna theme. o Active Graphics akan mengkonversi tombol navigation ke Java applets yang berubah ketika mouse dekat mereka. o Background picture termasuk mengulangi background image pada halaman. hilangkan ceklist pada kotak untuk warna background. o Apply Using CSS akan dimasukkan ke properties style sheet. Klik OK ketika anda memilih theme.

Menghapus Theme Untuk menghapus theme dari halaman setelah dipakai, pilih Format|Theme dari menu bar and pilih pertama "(no theme)" pilihan dari daftar themes. klik OK.

Text
Font Properties Banyak dari fonts bisa di ubah dari Font dialog box. Sorot teks yang akan diubah formatnya lalu pilih Format|Font dari menu bar.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Font - Pilih fonts untuk web sangat penting, karena fonts yang kita pilih haruslah fonts yang harus dimiliki oleh user yang akan memasuki situs kita, kalau user yang browser ke situs kita tidak memiliki font yang kita pakai maka teks tidak akan bisa tampil, adapun fonts yang biasa digunakan adalah Arial, Geneva, Verdana, Helvetica, dll.. Font Style - Pilih bold, italics, atau kombinasi keduanya Size - Ukuran font dalam halaman web bisa dibuat bermacam-macam ukuran tapi ukuran 2 atau 3 merupakan yang terbaik, dan menggunakan Arial fonts.
font size 1

font size 2

font size 3

font size 4

font size 5

Effects - Banyak effects sangat tidak butuhkan dan beberapa tidak dapat ditampilkan dibeberapa browsers. Sangat tidak direkomendasikan menggaris bawahi teks karena ini akan membingungkan user ketika links selalu digarisbawahi. Gunakan bold dan italics untuk menekankan teks link. Tekan OK ketika selesai.

Headings Biasanya ini tidak bekerja dengan baik bila menggunakan browser Converting Text to Tables Teks dibawah telah diketik dalam FrontPage dengan menekan TAB setelah semua angka dan tekan ENTER untuk memulai garis baru.

Teks dapat memasuki suatu table dengan pemilihan Table|Convert|Text to Table dari menu bar. kotak dibawah akan tampil. Buat suatu pilihan dan klik OK.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Paragraphs - Baris baru table akan dimulai dari paragraf baru. Semua baris ditempatkan pada sel baris baru.

Tabs - Kolom baru akan dimulai dengan dengan tab.

Commas - Suatu kolom baru akan mulai dari tanda koma masing-masing. Teks di bawah menghasilkan format table TAB setup.

None - Semua teks yang disorot akan ditempatkan pada sel tunggal tabel

Other - Pilih batasan lain untuk membuat tabel.

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Hyperlinks
Membuat Links Hyperlinks adalah teks atau graphics yang kalau di klik akan membawa user untuk memasuki file web file yang lain.. Mereka dari berbagai belahan dunia World Wide Web mereka terhubung halaman situs. Untuk membuat hyperlink dalam FrontPage, ikuti langkah berikut : 1. Sorot teks atau graphic yang akan di hyperlink dan pilih Insert|Hyperlink dari menu bar atau tekan CTRL+K.

2. Jika link ke dalam situ anda, sorot halaman pada daftak dan klik OK. Jika link ke situs lain diluar situs anda, masukkan URL pada URL box. External URLs HARUS dimulai dengan "http://" Kalau tidak, tidak akan bekerja. Untuk contoh, untuk link ke situs FGCU, ketik "http://www.fgcu.edu/" sebagai ganti "www.fgcu.edu/". E-mail Links Membuat alamat an e-mail link dengan menyorot teks (yang mana harus ditulis seperti alamat e-mail ) dan tekan CTRL+K. Klik tombol e-mail dengan gambar amplop surat dan masukkan alamat e-mail pada kotak yang tersedia. Klik OK pada kedua windows untuk mengakhiri.

10

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Bookmarks Teks dan Graphic bisa diset seperti penanda halaman (disebut juga "anchors" ) itu bisa link ke dalam halaman. Contohnya, jika daftar halaman silabus, judul untuk setiap minggu bisa di set dengan pemberian penanda halaman dan baris link bisa dimaskkan ke halaman utama. Metode ini digunakan penanda halaman mengijinkan setiap pengunjung situs anda untuk cepat mengakses informasi tanpa menggulung kebawah halaman untuk melihat informasi yang diinginkan.. Add a bookmark to a page dengan mengikuti langkah, sorot teks atau graphic yang akan ditandai dan pilih Insert|Bookmark... dari menu bar. Masuk ke nama penanda halaman pada ruang yang disediakan lalu klik OK.

11

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Create a link to a bookmark dengan menyorot teks yang akan link dan tekan CTRL+K. Pilih penanda halaman dari menu drop-down pada kategori Optional dan klik OK. Link ke penanda halaman pada beberapa halaman pertama pilih nama file dari daftar lalu pilih dari penanda halaman pada drop-down menu.

Hotspots Dengan membuat link graphic adalah jalan yang perlu didiskusikan, beberapa graphic hanya bisa link ke satu lokasi. Walau begitu, anda bisa membuat satu graphic dengan beberapa bagian untuk link ke beberapa halaman yang berbeda. Hotspots mengijinkan anda untuk melakukannya, contohnya :

Logo FGCU, "Search", "Directory", and "Index" images semua link ke beda halaman pada satu graphik. Ikuti petunjuk cara pembuatannya : 1. Masukkan graphic pada halaman web. 2. Dengan menggunakan hotspot tools pada Drawing toolbar, gunakan shapes untuk menggambar hotspots pada graphic. Tool segi empat digunakan pertama untuk menggambar hotspot sekitar "search".

12

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 3. Hyperlink window akan tampak ketika tombol mouse dilepaskan. Masukkan URL, e-mail address, atau bookmark yang akan link hotspot. 4. Ulangi langkah 2-3 Sampai semua hotspots dimasukkan. Gunakan handles pada hotspots untuk kembali keukuran semula.

5. Jika Sisa graphic (beberapa bagian tidak terlindungi dengan hotspot seperti hijau menjadi biru ditengah graphic) harus link kelainnya, klik kanan pada area graphik yang bukan hotspot, pilih Picture Properties dan masuk ke lokasi Default hyperlink.

Tables
Table Uses Pada halaman web, table bisa memiliki banyak fungsi :

Tataruang Halaman Menampilkan informasi dalam formatted tabular form Menambahkan warna background dan borders ke blocks teks

Membuat Tabel Suatu cara cepat untuk menciptakan suatu tabel kecil menggunakan tombol standard toolbar. Klik tombol dan drag mouse diatas grid, sorot sel yang ingin ditampilkan dalam tabel. Ketika ukuran tabel telah dipilih, klik tombol mouse sekali lagi.

Suatu table dengan garis putus-puts dengan 2 baris dan 2 kolom akan tampil pada halaman.

Table Properties Pilih Table|Properties|Table dari menu border untuk modifikasi table's properties. 13 Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Alignment mengacu pada tabel posisi dalam halaman, pilihan center, left, right, atau justify. Defaultnya adalah left. Cell padding nilai pixels antara teks dan pembatas sel Cell spacing nilai pixels antara tabel sel Specify width set lebar tabel, suatu perbedaan jumlah pixel atau persetase pada layar. Specify height biasanya tidak diperlukan untuk mengeset tinggi dari baris pada tabel. Tabel berikut dibuat dengan seting diatas.

Border size menandakan adanya kedalaman batas tabel. Garis putus-putus pada tabel diatas hanya menunjukkan struktur dari table, tapi ketiak table diset pada pixel 0, tidak akan ada batas garis ditunjukkan pada halaman web. :

14

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Dibawah pada tabel yang sama border diset pada 5 pixels:

Border color akan mengubah warna borders pada tabel. Microsoft Internet Explorer 5.0 Netscape Navigator 4.7

Light border and dark border mengubah sorotan dan bayangan warna pada tabel. Microsoft Internet Explorer 5.0 Netscape Navigator 4.7

Background color masukkan background pada tabel sel. Microsoft Internet Explorer 5.0 Netscape Navigator 4.7

Use background picture akan memasukkan gambar background pada tabel. Microsoft Internet Explorer 5.0 Netscape Navigator 4.7

Cell Properties Pilih Tables|Properties|Cell dari menu bar atau Cell Properties dari shorcut menu untuk mengubah tabel properties sel, dimulai dengan menyorot sel dan dan akan berubah.

15

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Horizontal alignment default di sisi kiri tabel sel. Ubah ini ke tengah atau kanan teks dalam tabel sel. Vertical alignment defaultnya ditengah seperti contoh dibawah.

menset rows spanned dan columns spanned lebih baik dicapai dengan metode yang dijelaskan dibawah. Specify width danspecify height akan diset lebah dan tinggi sel.. Persentase mengacu pada bagian table, bukan pada persentase keseluruhan layar. Pilih Header cell otomatis tebal dan ditengah isi dari sel. Border color memberi warna pada border. :

Microsoft Internet Explorer 5.0

Netscape Navigator 4.7

16

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Border yang terang dan gelap hanya bisa dibaca dengan Internet Eksplorer.

Background color mengubah warna background sel. Microsoft Internet Explorer 5.0 Netscape Navigator 4.7

Background image memasukkan gambar pada sel. Netscape Navigator 4.7

Microsoft Internet Explorer 5.0

Memasukkan Baris dan Kolom Dengan cepat memasukkan baris dan kolom pada tabel dengan menempatkan kursor di dalam cell pada baris baru atau kolom yang aka ditambahkan, klik kanan pada mouse untuk mengeluarkan menu shorcut, dan pilih Insert Row atau Insert Column. Metode lain adalah dengan memakai Insert Rows or Columns pada kotak dialog. 1. Tempatkan kursor dalam sel dimana baris atau kolom baru akan ditambahkan. 2. Pilih Table|Insert|Rows atau Columns dari menu bar.

17

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

3. 4. Untuk memasukkan baris, pilih Rows dan masukkan Number of Rows. Lalu pilih Location dari baris baru dengan memilih Above selection atau Below selection dari dimana anda menempatkan kursor pada langkah 1 5. Klik Columns untuk memasukkan kolom baru dan pilih untuk mengubah. Masukkan Number of columns dan Location kiri atau kanan pada point pilihan. 6. Klik OK. Memutar sel Bila sering membuat sel lalu memutar kolom dan baris, seperti membuat judul di atas tabel. Contoh ini akan menerangkannya. 1. Masukkan baris baru pada tabel paling atas. 2. Ketik teks pada baris yang akan di putar melewati kolom, ketik ke dalam sel pertama dan sorot sel seperti dibawah.

3. Pilih Table|Merge Cells dari menu bar atau klik kanan dengan mouse dan pilih Merge Cells dari menu shortcut

18

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 4. Ketengahkan teks sel dengan dari Cell Properties window dan hilangkan pilihan

sel. 5. Untuk membagi sel, pilih sel dan pilh Table|Split Cell dari menu bar.

Graphics and Pictures

Types HTML kode digunakan pada web untuk mengenali dua format graphic yaitu GIF dan JPEG. Semua image dalam halaman web anda harus memiliki format ini.

JPEG (Joint Photographic Exchange Group) - Biasanya, Foto harus disimpan dalam JPEGs. File ini memiliki 16 juta warna GIF (Graphic Interchange Format) - File ini memili 256 warna atau kurang dan biasanya digunakan untuk file bukan foto. Semua image dalam tutorial ini disimpan dalam bentuk GIF .

Memasukkan Graphic Untuk memasukkan foto atau graphic ke halaman web, pilih Insert|Picture|From File dari menu bar. Pilih file dan klik OK. Picture Properties Untuk mengubah properties dari picture pilih Format|Properties dari menu bar.

19

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Dibawah Alternative representations, Ketik deskripsi image dalam kotak Text Teks ini akan tampil dalam graphic jika user melakukan browser ke situs anda dengan graphic yang dimatikan dalam browser mereka dan akan juga tampil ketika gambar diloading. Klik Appearance tab.

Ubah Alignment jika gambar harus ditempatkan di sebelah kanan atau kiri dari teks dalam halaman atau jika harus di tengah. Border thickness Akan dimasukkan batas dari gambar Horizontal spacing dan Vertical spacing FrontPage otomatis menghitung ukuran dari image. dan jika anda ingin memasukkan gambar lebih besar atau lebih kecil dari ukuran sebernarnya, periksa kotak Specify size dan masuk ke kotak new Width dan nilai Height. Tolong perhatikan, direkomendasikan anda untuk mengubah ukuran gambar sebernarnya menggunakan program Adobe Photoshop.

Miscellaneous
Garis Horizontal Garis Horizontal untuk membagi bagian dari teks supaya mudah dibaca. 1. Tempatkan kursor pada halaman dimana garis horizontal akan dimasukkan. 2. Pilih Insert|Horizontal Line dari menu bar.

20

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 3. Double click pada baris untuk mengubah properties.

4. Set Width baris dengan menggunakan persentase dari windows, atau menggunakan ukuran pixel. 5. Ubah ketebalan baris dengan mengeset Height dalam pixels. 6. Set Alignment baris dikiri, ditengah atau dikanan halaman. 7. Baris secara otomatis menaungi untuk memberi ilusi kedalaman. pilih kotak Solid line untuk membuat semua baris berwarna sama dan set Color Shaded horizontal line:

Solid horizontal line (berwarna merah ketika dibrowser dengan MSIE):

8. Klik OK ketika selesai. Symbols Masukkan simbol unik seperti copyright () dan accented letters () dari kotak Symbol. Pilih Insert|Symbol... dari menu bar. Klik daftar simbol yang diinginkan dan akan dapat dilihat pada preview window. Klik tombol Insert untuk memasukkan symbol dalam halaman. klik Close ketika selesai..

21

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Comments Teks bisa disembunyikan dari pengunjung situs web anda dan masih bisa dilihat ketika halaman diedit dengan FrontPage. Komentar ini bisa dimasukkan dengan cara : 1. Tempatkan kursor pada halaman lokasi dimana komentar akan dimasukkan. 2. Pilih Insert|Comment dari menu bar.

3. Ketik teks pada kotak Comment dan klik OK. 4. Untuk itu komentar yang disembunyikan dibedakan warnanya dari yang lain. coba buka di browser dan teks tersebut tidak akan terlihat. Keyboard Shortcuts Tips

Keyboard shortcuts akan bisa menghemat waktu anda, berikut ini daftar shorcuts yang bisa dilakukan dalam frontpage. . Action Document actions Open a page New page Save Keystroke CTRL+O CTRL+N CTRL+S Action Formatting Select all Copy Cut Keystroke CTRL+A CTRL+C CTRL+X

22

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Print Properties Refresh Spelling Thesaurus Line break Remove formatting Editing Find Replace Insert hyperlink Spell checker Macros CTRL+P ALT+ENTER F5 F7 SHIFT+F7 SHIFT+ENTER CTRL+Spacebar Paste Undo Redo Bold Italics Left justified Center justified Right justified Decrease indent Increase indent CTRL+V CTRL+Z CTRL+Y CTRL+B CTRL+I CTRL+L CTRL+E CTRL+R CTRL+SHIFT+M CTRL+M

CTRL+F CTRL+H CTRL+K F7 ALT+F8

Tips
Web design tips

Background Images: Gunakan gambar latar belakang dengan hati-hati. menggunakan watermarks biasanya sangat baik, tetapi gambar yang gelap dan solid akan mengurangi kecepatan dalam pengaksesan. Fonts: Gunakan fonts standar yang ada, seperti Arial and Times New Roman. Jika terlalu banyak fonts yang anda pilih dan ternyata user yang sedang mengakses situs anda, tidak memiliki fonts yang anda gunakan pada komputernya maka tulisan tidak akan tampil. Long Pages: Bagi beberapa informasi kedalam beberapa halaman yang berbeda. Halaman yang terlalu panjang akan sulit untuk dibaca,. Sound: Menggunakan sound akan mengurangi kecepatan download dan akses, sebaik tidak menggunakan sound untuk mempercepat akses. Hyperlinks: Selalu gunakan kata yang menggambarkan link yang sederhana seperti "Click Here!" : Page Size: Ketika banyak pengguna internet menggunakan resolusi 800X600 atau lebih , masih banyak pengguna komputer yang menggunakan monitor beresolusi 640X480. Jangan membuat gambar atau tabel yang melebihi 620 pixel agar bisa dilihat dengan komputer resolusi rendah.

Percobaan Sejak adanya banyak browser (seperti Opera, Microsoft Internet Explorer danNetscape Navigator) mereka membaca halaman web secara berbeda, untuk itu frontpage mempermudah cara membaca halaman web dengan berbagai browser.

23

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 1. Pilih File|Preview dalam Browser dari menu bar.

2. Daftar browser yang telah anda install dalam komputer akan tampak pada komputer anda. Sorot nama browser dan klik Preview

24

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

B. Tutorial Mahir Frontpage

Shared Borders
Shared Borders adalah bagian dari halaman web yang berbagi isi dengan halaman lain di dalam web. Tempat mereka diatas, bawah, kiri, atau kanan dari halaman dan berguna untuk informasi navigasi link, hak cipta informasi dll Memasukkan Shared Borders Masukkan shared borders ke web dengan mengikuti tahapan : 1. Buka web dan pilih Format|Shared Borders... dari menu bar.

2. Ceklist All pages untuk menggunakan border(s) untuk semua halaman dalam web atau Current page jika border(s) harus terlihat hanya dalam halaman ini. 3. Pilih daerah dimana shared borders harus tampil dengan menceklist di atas, kiri, kanan, dan kotak bawah. Tidak direkomendasikan untuk mengisi Right border ini akan menyebabkan tidak terlihat user yang memiliki monitor resolusi rendah. 4. Ceklist kotak Include navigation buttons jika daerah ini akan memiliki elemen navigasi (dijelaskan detailnya pada halaman berikutnya.) 5. Klik OK ketika selesai. Properties ini bisa dirubah dengan memilih Format| Shared Borders... sekali lagi dari menu bar setelah shared borders selesai digambarkan. Shared Border Content Setelah melengkapi langkah-langkah diuraikan di atas, suatu susunan yang serupa kepada

25

Created by : Mr. Vasco

Mata Kuliah : Basic Computer gambaran di bawah akan nampak pada atas halaman web::

Edit isi dengan meng-klik pada shared border dan menggantikan teks komentar warna ungu dengan teks dan grafik.

Navigation Bars
Bar Navigation dibuat dalam FrontPage untuk mempercepat metode untuk memsukkan navigation link ke semua halaman dalam web. Diagram dibawah menggambarkan fitur untuk membuat navigasi bar.

Membuat Navigation Bar

26

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 1. Buka web dalam Navigation View. Tunggal "parent" halaman harus terlihat di daerah biru di layar.

2. Tambahkan lebih halaman untuk navigasi dengan mendrag nama file pad Folder List ke daerah biru navigasi window. Hubungan koneksi akan dimasukkan antara "child" halamn baru dan halaman parent . Lepaskan tombol mouse ketika hubungan antara halaman terlihat. .

3. Lanjutkan memasukkan halaman navigation. Jika anda berbuat kesalahan, halaman akan selalu pindah ke lokasi baru pada pohon dengan mengklik dan mendrag

27

Created by : Mr. Vasco

Mata Kuliah : Basic Computer mereka dengan mouse.

4. Masukkan link halaman diluar web dengan memilih halaman akan ditambahkan dari navigation tree dan klik tombol hyperlink external pada Navigation toolbar. Ketik URL dimulai dengan "http://" pada URL: jendela dari kotak Select Hyperlink. Jika link seperti e-mail address, klik tombol e-mail di akhir barisURL ditunjukkan dengan gambar amplop surat . Masuk alamat e-mail pada kotak Create E-mail Hyperlink dan klik OK.

28

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Menghapus halaman dari Navigation Tree Menghapus halaman dari navigation tree dengan mengklik kanan pada halaman gambar dengan mosue dan pilih Delete dari popup shortcut menu. Untuk memelihara halaman navigation tree tapi tidak ditampilkan pada navigation bar, pilih Included in Navigation Bars. Halaman sekarang berwarna abu pada diagram.

Atau, Pilih Edit|Delete dari menu bar dan pilih dari satu dari dua pilihan. :

Lihat bagian dari tree dengan mengklik tombol Collapse/Expand Subtree antara halaman. Tombol ini akan ditampilkan tanda (-) ketika subtree akan dirobohkan dan tanda plus (+) ketika subtree siap dirobohkan dan bisa diperluas. Lihat hanya subtree dari halaman dengan disorot dan klik tombol Subtree Only pada Navigation toolbar Keseluruhan struktur tree bisa dikotak-kotak antara landscape dan portrait dengan mengklik tombol orientasi pada Navigation toolbar.

29

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Navigation Bar Properties 1. Buka halaman web dengan navigation bar pada Page View. 2. Klik kanan pada daerah navigation bar terlihat atau, jika navigation bar belum dibuat pilih Insert|Navigation Bar... dari menu bar.

3. Pilih halaman mana yang harus ditampilkan seperti links pada navigation bar dengan memilih pilihan dari Hyperlinks to add to page. Gambar Tree akan memebrikan anda suatu tampilan. . 4. Pilih Home page dan kotak Parent page jika akan memasukkan halaman Additional pages pada navigation bar. 5. Pilihan Orientation and appearance dengan memilih Horizontal atau Vertical Untuk link dan jika mereka ditampilkan pada Buttons atau Text. 6. Klik OK ketika selesai..

Cascading Style Sheets

Cascading Style Sheets (CSS) mengijinkan anda untuk mengatur format halaman web dengan mengeset font, mengubah paragraf properties, dan border shading untuk kotak teks. Style sheets can bisa dilakukan dengan tiga cara : Membuat Embedded Style 1. Pilih Format|Style dari menu bar. 2. Klik tombol New untuk membuat style baru

30

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 3. Ketik tanda (.) diikuti nama tanpa space untuk new style pada kotak Name (selector). dibawah seperti contoh dibawah

4. Klik tombol Format untuk memilihilih element dari style formatting yang akan digunakan. Dalam contoh ini, warna font akan diganti dahulu lalu Font... dipilih dari menu. 5. dari Font dialog box, font telah berubah menjadi, ukuran 10 point, dan warna menjadi merah. Klik OK ketika anda sudah merubahnya..

31

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 6. Pilih pilihan lain dari menu Format menu untuk merubah lebih dari beberapa element penting . Ketika semua style telah dipilih, Klik OK pada New Style window dan OK pada Style window. Menerapkan Style Baru Untuk menerapkan style yang baru anda ciptakan, sorot teks yang akan diterapkan. Daftar style is dalam style menu dalam formatting toolbar. Klik the window dan gulung ke bawah pilih style. Inline Styles Beberapa format syles, seperti font properties, borders dan shading, secara otomatis ada pada beberapa element seperti pada portions of text, paragraphs, and divisions. Styles lain yang terdapat dalam tables dan form elements bisa dimasukkan secara manual, caranya sebagai berikut : 1. Sorot table atau form element dan pilih Format|Properties dari menu bar. 2. Klik tombol Style... dalam properties window. 3. Styles yang telah anda buat akan terdaftar dalam Class panah ke bawah menu. pilih salah satu styles atau Klik tombol Format untuk mengubah tombol yang lain. 4. Tekan OK ketika selesai. Using Preset External Style Sheets FrontPage datang dengan beberapa styles yang bisa dimasukkan ke dalam halaman web. 1. pilih File|New|Pages dari menu bar dan Klik the Style Sheets tab.

32

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 2. Sorot pilihan untuk melihat deskripsi dari beberapa syles dan Klik OK. 3. Kode Style sheet akan tampil pada layar windows. Simpan style sheet dengan menggunakan akhiran .css . Membuat External Style Sheet Untu membuat external style sheet dari awal, ikuti langkah berikut 1. Pilih File|New|Pages, Klik Style Sheets tab, dan pilih Normal Style Sheet.

2. Halaman kosong akan tampil di monitor dengan Style toolbar. Klik Style... button pada toolbar.

3. Sorot element dari daftar Styles yang akan dimasukkan dan Klik the Modify... button. contohnya pilih the "body" tag dari daftar dan kita akan mengubah default teks style untuk halaman. 4. Klik tombol Format pada Modify Style window dan pilih elements yang akan diubah formatnya. untuk mengubah default teks style seperti pada contoh , pilih "Font...". Pilih "Arial" dari daftar font dan "10pt" dari daftar ukuran TIP - Sebaiknya menggunakan fonts umum seperti sans-serif fonts are Arial, Verdana, Geneva, dan sans-serif while serif fonts Times New Roman dan Times. Karena komputer browser akan menampilkan fonts yang dimiliki oleh komputer user, jika user tidak memiliki fonts tersebut maka secara otomatis browser tidak bisa menampilkan teks. 5. Klik OK ketika selesai. 33 Created by : Mr. Vasco

Mata Kuliah : Basic Computer 6. Klik OK pada Modify Style window. 7. Akan muncul pesan bahwa style window sekarang ada di daftar. Klik OK untuk keluar Style window atau pilih elements lain untuk dimodifikasi. 8. Simpan style sheet dalam format .css Link keExternal Style Sheet Setelah anda membuat external style sheet, dan ini harus link ke halaman web untuk dapat diakses melalului internet. 1. Buka halaman web dan pilih Format|Style Sheet Links dari menu bar. 2. Klik tombol Add... pada Link Style Sheet kotak dialog. 3. pilih the .css file dan Klik OK. Untuk menghilangkan external style sheet link dari page, sorot style sheet pada daftar dan Klik dan tombol Remove Mengedit External Style Sheet 1. Buka.css file pada FrontPage. 2. pilih Format|Style dari menu bar. 3. Sorot style dari daftar yang dibutuhkan untuk mengubahnya Klik Modify .

4. Buat perubahan yang dibutuhkan dari tombol Format .

34

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 5. Klik OK ketika selesai dan simpan kertas style.

Modifying Themes
Themes yang disediakan FrontPage bisa dimodifikasi sesuai dengan kebutuhan anda. Jika anda akan memodifikasi theme. Pertama pilih Format|Themes dan klik tombol modifikasi. Tindakan ini akan mengungkapkan tambahan tombol untuk modifikasi theme

Warna Klik tombol Colors... untuk memodifikasi warna

Color Schemes tab - Pilih warna scheme dari daftar Color Wheel tab - Klik dan drag lingkaran dalam putaran warna ke warna scheme.

35

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Custom tab - Mengubah teks dengan memilih dari menu panah bawah dan pilihan warna. Klik OK ketika selesai memodifikasi warna scheme.

Graphics Bullets, banners, dan backgrounds pada theme bisa diubah. Klik tombol Graphics... untuk mengubah gambar dalam theme.

Pilih items dari menu kebawah. Ubah gambar dari daerah teks yang disediakan dibawah Picture tab dan modifikasi fonts dari Font tab. Pada bawah window, pilih "Normal Graphics" untuk gambar tidak bergerak dan Klik OK ketika selesai

36

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Text Tombol Text... akan disediakan pada menu yang akan mengijinkan anda mengubah element fonts pada theme.

Pilih element teks dari Item menu kebawah dan lalu pilih new font untuk item dari daftar Font. Klik tombol More Text Styles... untuk mengubah tambahan teks.

Menyimpan dan Memodifikasi Theme. Jika anda berencana menggunakan theme yang sama yang telah anda modifikasi pada halaman lain, theme bisa anda simpan. Klik tombol Save As pada Themes kotak dialog dan masukkan nama theme.

37

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Frames
Apa Itu Frames? Frames membagi halaman web ke dalam bagian-bagian yang masing-masing memiliki HTML yang berbeda sumber halaman dan mereka memiliki menu menggulung masingmasing. Mereka akan berguna untuk situs yang membutuhkan bagian yang tetap ketika layar digulung. Contohnya, the Web Boards digunakan pelatihan di FGCU menggunakan frames. The black navigation bar, Conferences list, dan isi frame utama terdapat tiga frames yang sendiri, masing-masing memiliki sumber halaman HTML yang berbeda.

Membuat Halaman Frames Membuat halaman frase ikuti langkah berikut :

38

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 1. Pilih File|New|Page dari menu bar dan klik Frames Pages tab.

2. Melihat pilihan dengan mengklik di gambar icon sekali mouse dan Preview window. Pilih icon format frame anda akan suka untuk menggunakannya dan klik OK. 3. Ketika dilihat dalam Page view, halaman web akan terbagi kedalam beberapa frames dan frame harus "Set Initial Page..." dan tombol "New Page". Klik New Page jika sumber halaman untuk frame tidak ada. Frame secepatnya akan menjadi putih setelah tombol di klik dan anda akan bisa mengetik dan memasukkan graphic seperti halaman web biasa. Klik Set Initial Page Jika sumber halaman untuk frame

39

Created by : Mr. Vasco

Mata Kuliah : Basic Computer sudah dibuat dan dipilih dari kotak dialog.

4. Simpan halaman frames dengan memilih Files|Save As dari menu bar. Anda akan diinformasikan untuk menyimpan frame utama dan diikuti dengan beberapa sumber frame lainnya. Diagram akan disorot halaman yang disimpan. Dibawah, diagram semua disorot dalam frame biru, menandakan frame utama telah disimpan.

40

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Pada gambar dibawah, sumber frame diatas telah disimpan. :

Frame Properties Klik Kanan pada frame sebelum atau setelah isi halaman telah diidetifikasi dan pilih Frame Properties dari menu shorcut. Name Beri nama untuk semua frame untuk tujuan links. Initial Page Beri initial HTML sumber halaman . Frame size Ukuran lebar dan tinggi frame dalam pixel atau persentase layar. Options Check "Resizeable in Browser" jika user bisa diklik dan didrag. garis frame untuk memperkecil. Buat pilihan dengan "Show scroll bars" jika penggulungan

41

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

ingin ditampilkan dalam frame. Linking in Frames Ketika membuat link dari halaman frames, klik tombol pensil selanjutnya pilihan Target frame pada Create Hyperlink kotak dialog. Pilih target dari link dari kotak Common targets. Page Default Akan menampilkan defaul frame yang menghubungkan ada hubungan. Same Frame Akan menampilkan halaman baru pada frame yang sama. New Window Akan membuka browser baru pada window. Parent Window Akan menampilkan halaman dalam halaman yang sekarang. ::. Download below for fastest acces .::

Components
Access ke komponen menu dengan Insert|Component dari menu bar. Includes Untuk memasukkan halaman web pada halaman lain, langkah pertama adalah menempatkan kursor dimana akan ditempatkannya, lalu pilih Insert|Component| Include Page dari .Klik Browse... untuk memilih halaman yang ingin dimasukkan lalu klik OK. Isi halaman yang akan dimasukkan akan tampil dalam sumber halaman, tapi isi halaman hanya bisa dimodifikasi dengan membuka halaman yang berbeda.

42

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Scheduled Picture (Gambar Yang Dijadwalkan) Elements dalam halaman isinya bisa berubah secara otomatis dengan cara pemberian jadwal waktu berubah, pilih Insert|Component|Scheduled Picture... dari menu bar. Pilih gambar lalu pilih gambar yang akan berubah pada saat tanggal dan jam tertetntu. set juga awal dan akhir dari yang djadwalkan. KlikOK ketika selesai..

Scheduled Include Page (Penambahan Halaman yang Dijadwalkan) Halaman juga dapat dijadwalkan seperti file gambar, dengan cara memilih Insert| Component|Scheduled Include Page... dari menu, pilih file, dan set waktunya Tanggal dan Jam Sangat menguntungkan jika anda memasukkan "last updated" date di bawah halaman web, agar pengunjung tahu materi terbaru yang dimasukkan. . FrontPage secara otomatis ketika halaman di simpan. Tempatkan kursor di halaman dimana tanggal diupdate, pilih Insert| Date and Time... dari menu bar.

43

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Pencarian Form Memasukkan pencarian form ke situs dengan memilih Insert|Component|Search Form dari menu bar. Fitur ini akan otomatis dibuat dengan form yang sederhana

Mengatur Search form dari properties window.

Label for Input teks yang ditampilkan sebelum kotak teks. Width in characters lebar teks kotak search. Labels for "Start Search" and "Clear" buttons teks yang ditampilkan pada tombol teks.

Klik Search Results tab untuk melihat hasil search format.

44

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Pilih tanggal dan jam fomat untuk ditampilkan pada hasil pencarian. . Display score kata kunci terdekat yang ditemukkan pada halaman. score tertinggi menandakan termirip dengan kata yang dicari. Display file date dimasukkan tanggal dan waktu terakhir dimodifikasi Display file size ukuran halaman dalam jumlah kilobytes

Forms
Form Page Wizard Forms mengijinkan anda untuk menerima informasi dari pengunjung situs anda. Forms bisa dibuat secara manual atau dengan FrontPage's Form Page Wizard. Untuk menggunakan, pilih File|New|Page dari menu bar.

45

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 1. Klik Next > pada penjelasan pertama wizard window. 2. Kedua window akan mengijinkan anda untuk memasukkan pertanyaan yang akan ditampilkan pada form . Klik tombol Add untuk memasukkan pertanyaan baru pada form.

Pilih type masukkan dari menggulung menu dan edit bentuk dari pertanyaan dalam kotak teks dibawah jika diperlukan. Klik Next > ketika selesai.

Pilih masukkan untuk pertanyaan yang anda masukkan pada menu window sebelumnya. Isi dari window akan sangat beragam tergantung dari pertanyaan yang

46

Created by : Mr. Vasco

Mata Kuliah : Basic Computer dimasukkan. Klik Next > ketika sudah yakin pilihan anda.

Pertanyaan akan muncul sekarang pada daftar pertanyaan pada menu. Klik masukkan untuk memasukkan lebih dari element ke form. Jika pertanyaan harus dirubah, sorot judul daftar dan klik Modify atau Remove untuk menghapus pertanyaan. Ulangi pemberian pertanyaan dengan menggunakan Move Up dan Move Down. Klik Next > untuk memproses langkah selanjutnya setelah pertanyaan dimasukkan.

47

Created by : Mr. Vasco

Mata Kuliah : Basic Computer 3. Presentation Options - pada windows ini, menentukan beberapa layout form dari berbagai pilihan dan klik Next >.

4. Output Options - Sekarang form telah diisi oleh berbagai elemen, sekarang anda membutuhkan jalan untuk melihat hasil dari form. Anda akan menyimpannya dalam bentuk halaman web atau file teks dan isikan nama file dimana hasilnya akan disimpan. Klik Next > ketika selesai.

5. Form telah selesai. Klik Finish untuk memasukkan form ke halaman web.

48

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Forms Toolbar Aktifkan Form toolbar dengan memilih Insert|Form dan drag menu keluar dair menu bar.

Pertama, Klik tombol Form. Daerah bertitik dengan Submit dan tombol Reset ada didalamnya. Klik tombol Form Properties.

Pilih lokasi penyimpanan isi form dan nama setelah Form name. Klik Options... untuk untuk menetapkan pilihan halaman hasil teks, e-mail pilihan dan suatu halaman konfirmasi. Pada form, tempatkan kursor sebelum tombol Submit dan tekan ENTER beberapa kali untuk memberi ruang form seperti dibawah ini.

49

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Text Box Text boxes mengijinkan user untuk memasuki satu garis teks. Klik tombol pada form toolbar untuk memasukkan teks ke form. Aktifkan kotak teks dan pilih Format|Properties dari menu bar

Name - Masukkan nama dari kotak teks tanpa space Initial Value - Teks ini akan diisi dengan inisial saja. . Width in characters - Menentukan lebar kotak teks. Lebar bisa diganti dengan mengklik dan mendrag element tersebut. Tab order - Ini akan mempermudah untuk mengeset ketika semua elemen form dalam halaman. . Gunakan angka 1,2,3... Untuk mempermudah pemakai dalam menghadapi element form ketika tombol TAB digunakan. Password field - Pilih Yes jika masukan ke dalam kotak harus diberi password dan tanda asterik akan muncul ketika diketikkan

Validate... - Klik tombol ini untuk memasuki Pilihan Validation

50

Created by : Mr. Vasco

Mata Kuliah : Basic Computer

Set kotak teks hanya untuk menerima beberapa tipe data, minimum atau maximum panjang, dan pilihan lainnya. Text Area Kotak teks mengijinkan user untuk memasuki berbagai bentuk teks. Klik tombol form toolbar untuk memasuki teks area pada form. Aktifkan teks dan pilih Format|Properties dari menu bar.

Set Ini hanya pada kotak teks. Lebar dan nomor baris pada teks area hanya bisa dirubah dengan mengklik dan mendrag di daerah teks.

51

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Check Box Check boxes mengijinkan user untuk membuat beberapa pilihan dari daftar. Masukkan kotak cheks dengan mengklik tombol pada form toolbar, masukkan value, dan tekan ENTER atau SHIFT+ENTER setelah salah satu.

Pilih Format|Properties untuk mengubah checkbox properties.

Name - Semua chekboxes pada daftar yang sama harus diberi nama yang sama. Seperti contoh dibawah, tiga checkboxes mempunyai nama "colleges". Value - Nilai semua checkbox harus berbeda "COB" digunakan angak untuk "College of Business" checkbox. Initial state - Jika Jika ada kemungkinan bahwa pemakai akan memeriksa suatu checkbox tertentu, kotak dapat mulai dicek pada awalnya. Radio Button Radio buttons mengijinkan user hanya memilih satu pilihan dari daftar form. Masukkan daftar dengan mengklik tombol pada form toolbar, enter value, dan tekan ENTER or SHIFT+ENTER setelah salah satu.

Pilih Format|Properties untuk merubah radio button properties. Drop-Down Menu Jika check box atau radio button is terlalu panjang, lebih baik gunakan menu drop down. 52 Created by : Mr. Vasco

Mata Kuliah : Basic Computer Menu akan memperkuat pilihan dan memberi sedikit tambahan ruang pada halaman. Masukkan drop-down menu ke form dengan mengklik tombol form toolbar. Masukkan nilai menu dengan double klik pada menu. Pertama, nama drop-down menu seperti dibawah. Masukkan pilihan pada menu dengan mengklik tombol Add....

Choice - Teks ini akan tampil pada menu. Specify value - Kurang dari nilai yang lebih spesifik. Teks dimasukkan dalam pilihan baris akan bernilai untuk pilihan. Jika anda ingin nilai berbeda, check kotak ini dan masukkan nilai baru. Initial state - Satu pilihan pada drop-down menu bisa dipilih dengan inisial .

Untuk mengubah pilihan, sorot pada daftar dan klik tombol Modify... atau klik Remove untuk menghapus pilihan. Gunakan Move Up dan tombol Move Down untuk mengubah perintah pada daftar. .

53

Created by : Mr. Vasco

Mata Kuliah : Basic Computer Height - Mengubah nilai ini menandakan jumlah pilihan yang harus terlihat tanpa menklik gambar lebih. Height=1 Height=3

Allow multiple selections - User akan bisa memilih beberapa items dari daftar dengan menekan tombol bawah CTRL ketika mengklik nama.

54

Created by : Mr. Vasco