Home | Program TI | Pelatihan |  Profil SMK | Pengajar | InfoTerkini | UAN | Shopping Belajar online » |  Hardware PC | Windows | Linux | Networking | ASP | MySQL HTML | Photoshop | Flash | Frontpage | PHP | VbScript | JavaScript | VB

BAB 1

ANTAR MUKA (INTERFACE) FRONTPAGE

Interface Frontpage disusun sesuai dengan kebutuhan tiap  individu. Ada panel/jendela-jendela berbeda yang menyediakan kebutuhan yang berbeda pula dan anda dapat menyembunyikannya hingga anda siap untuk memakainya. Selain itu anda dapat mengkonfigurasi toolbars dan menu untuk menampilkan semua command (perintah) atau hanya sebagian saja yang anda pergunakan.

Untuk memulai perjalanan kita, buka Frontpage dari Start menu Wndows 95/98. Ketika Frontpage dibuka, interface akan menampilkan Page View yang menampilkan Page Editor(gb.1.1). Disini anda akan mengerjakan sebagian besar pekerjaan anda.

gb. 1.1

Menu Bar, berlokasi di bagian atas halaman(page) yang berisi sembilan kategori perintah(command) untuk membantu anda membuat halaman.

Di bawah menu bar adalah dua dari banyak toolbar yang disediakan Frontpage. Standard toolbar dan Format toolbar berisi tombol yang mempercepat anda mengakses perintah(command) yang sering anda pakai dalam mendesain web. Toolbar lainnya dapat anda akses kalau anda memakai command yang digabungkan dengannya. Anda akan mempelajari bagaimana mengkustomisasi toolbar pada bagian selanjutnya.

Page editor memungkinkan anda mendesain halaman Web dengan mode WYSIWYG(what you see is what you get). Gb.1.1 memperlihatkan Normal page editor screen.

Tabs paling bawah dari page editor memungkinkan anda melihat kembali(view) dan mengedit kode sumber HTML(HTML source code) atau meninjau(preview) halaman Web yang akan ditampilkan pada browser.

Waktu estimasi/perkiraan  download dari halaman tertentu ditunjukkan pada bagian kanan dari status bar. Ini akan membantu anda untuk mengetahui berapa lama user mendownload halaman Web anda.

MENU BAR

 Pada Program windows, menu bar berada di bagian paling atas halaman/page. Sembilan kategori dari perintah/command menu ada disini.  Fungsi dari perintah/command pada tiap menu tersebut adalah sebagai berikut

• Menu File berisi command/perintah yang berhubungan dengan kreasi dan pemeliharaan Web serta halaman. Pada menu file ini  terdapat perintah yang membantu anda untuk membuat, menghapus, mempublish dan mencetak halaman Web.
• Menu Edit berisi perintah-perintah yang memungkinkan anda untuk merubah halaman dan folder-folder Web. Anda dapat melakukan berbagai tindakan undo atau redo, cut, dan paste.
• Menu View berisi perintah-perintah yang menampilkan atau menyembunyikan berbagai elemen di interface Frontpage.
• Menu Insert berisi perintah-perintah yang memungkinkan anda untuk menyisipkan/insert beberapa type isi/content yang berbeda pada halaman Web. Garis Horizontal/horizintal lines, garis pemisah/line breaks, komponen-komponen Frontpage/Frontpage components, gambar/pictures, video clips, sounds, hyperlinks, dan feature cangggih lainnya yang dapat dengan mudah anda tambahkan pada halaman dengan perintah pada menu ini.
• Menu Format, secara umum berisi command yang mengontrol keseluruhan tampilan dan posisi/letak teks, backgrounds/latar belakang, dan isi halaman lainnya. Perintah ini dapat diterapkan untuk satu, beberapa, atau keseluruhan halaman pada Web.
• Menu Tools menyediakan perintah-perintah yang membantu anda membuat, memformat, memodifikasi dan menghapus table dan cells.
• Menu Window menyediakan perintah-perintah yang menampilkan pekerjaan anda pada satu atau lebih halaman dalam satu waktu
• Menu Help menyediakan perintah-perintah yang menampilkan informasi lebih lanjut dari prosedur dan perintah  Frontpage serta versi informasi tertentu.

Interface Frontpage terbagi atas beberapa jendela yang dapat ditampilkan atau disembunyikan melalui perintah pada Menu View. Pada seksi berikut anda akan mempelajari fungsi dari tiap perintah pada View.

PAGE VIEW

Page View akan ditampilkan pada saat anda pertama kali membuka Frontpage. Anda dapat juga menampilkan Page View dengan memilih View, Page, atau dengan mengklik icon Page pada jendela Views.

 LATIHAN MELIHAT HALAMAN PADA PAGE VIEW

Latihan sederhana ini memungkinkan anda untuk melihat suatu halaman Web pada Page Views yang berbeda-beda. Anda akan membuka suatu file yang telah dibuat dan memakai tab yang berada di bagian paling bawah Page View. Ikuti langkah-langkah berikut :

1. Pilih File, Open(Ctrl + O) atau klik tombol Open pada Standard toolbar. Kotak dialog Open File akan muncul.
2. Pergunakan kotak drop-down untuk mencari file yang anda buat.
3. Sorot filenya dan klik Open untuk membuka halaman pada page editor.
4. Ketika halaman dibuka, anda akan melihat halaman tersebut dalam Normal View. View ini memungkinkan anda untuk membuat dan mengedit isi dari Halaman Web anda, lihat gb. 1.2.

gb. 1.2

5. Klik tab HTML(tab ketiga pada bagian bawah page editor) untuk melihat halaman anda pada HTML View(gb 1.3).

gb. 1.3

6. Frontpage akan membuka halaman Web dan menampilkan daftar/list folder disamping Page View(gb.1.2). View ini memungkinkan anda melihat dan mengedit kode sumber HTML pada halaman Web. Anda tidak perlu merasa takut dengan view ini. Frontpage secara otomatis akan menciptakan kode HTML untuk anda. User mahir yang lebih familiar dengan sumber kode dapat dengan cepat mengakses dan memodifikasi kode sumber dari View ini.
7. Kemudian klik tab Preview (tab terakhir). Preview Mode(gb1.4) membantu anda menelusuri dan mengetest halaman Web anda seperti yang akan terlihat pada Web browser.

gb. 1.4

8. Klik tab No Frames pada bagian bawah page editor ( jika halaman web ada framenya ) No Frame editor memungkinkan anda mendesain dan mengedit halaman yang muncul pada frameset jika browser tidak mendukung frame.
9. Terakhir, klik tab Frames Page HTML ( jika halamannya terdapat frame )yang memungkinkan anda meninjau dan mengedit kode sumber HTML untuk frameset.

 VIEW BAR

Anda dapat menampilkan dan menyembunyikan Views bar dengan memilih View, Views Bar.

Views bar yang tampil pada sisi sebelah kiri interface Frontpage merupakan salah satu cara untuk melihat dan menyimpan folder serta isi di Web site anda.

gb. 1.5

FOLDER LIST DAN FOLDER VIEW

 Gb.1.5 menampilkan Folder List pada jendela tengah dan Folder View pada jendela kanan. Untuk menampilkan atau menyembunyikan Folder View, pilih icon Folders pada Views bar atau plih View, Folders. Folders View akan menampilkan daftar keseluruhan halaman yang lebih lengkap berisi folder tertentu dari suatu Web site. Folder View juga menampilan ukuran dan type file, tanggal pembuatan file , pembuat file, dan keterangan tambahan tentang file tersebut.

Ketika anda klik kanan pada nama folder di Folder View, pop-up menu akan muncul(gb.1.5). Anda dapat dengan mudah memindahkan/relocate, mengkopi/copy, menghapus dan mengganti nama folder dari menu ini.

Ketika anda menampilkan Folder View dan Folder List secara bersamaan, anda dapat memilih satu atau lebih file dan memindahkannya ke folder yang berbeda pada Web anda. Ketika anda memindahkan file, Frontpage secara otomatis akan mengedit seluruh halaman yang menghubungkan ke file yang dipindah sehingga link anda tidak rusak.

 REPORTS VIEW

Report View memungkinkan anda  mengetahui status link dan halaman pada Web site dan menghasilkan reports pada status Web site anda.

Anda dapat menampilkan atau menyembunyikan Reports View dengan memilih icon Reports pada Views bar atau dengan memilih View,, Reports.

 NAVIGATION VIEW

Navigation View memungkinkan anda membuat dan memelihara system navigasi untuk Web site. Ketika anda klik kanan Navigation View, anda dapat memilih level perbesaran(zoom) yang berbeda-beda untuk Navigation View, melihat subtree tertentu, membuat halaman baru atau mengkonfigurasi setting Web.

Navigation View dipakai untuk mempercepat perancangan sistem navigasi pada Web site anda. Serupa dengan peta/diagram organisasi, halaman dapat ditambah, dihapus, dan dipindahkan. Untuk merubah Navigation View, pilih icon Navigation pada Views bar atau pilih View, Navigation.

 YPERLINKS VIEW

Hyperlinks View(gb 1.6) menampilkan hiperlinks ke dan dari halaman Web anda dengan format grafis. Halaman yang dipilih di tunjukkan dengan sebuah icon besar pada pusat Hyperlinks View. Halaman yang terhubung/link dengan halaman tertentu di tunjukkan pada sisi sebelah kiri, sedangkan halaman yang di-link dengan halaman lainnya di tunjukkan di sebelah kanan.

Pilih icon hyperlinks pada Views bar atau pilih View, Hyperlinks untuk menampilkan Web anda di Hyperlinks View. Untuk melihat halaman yang terhubung ke halaman atau file pada Web anda, pilih halaman di Folder List. Ketika anda sorot halaman tersebut, halaman tersebut akan muncul pada jendela hyperlinks sebelah kanan.

gb 1.6

Pop-up menu pada Gb 1.6 akan muncul jika anda klik kanan sebarang tempat di Hyperlinks View. Hal ini memungkinkan anda untuk memilih informasi tambahan yang ditampilkan pada Hyperlinks View :

• Show Page Titles menampilkan judul/title dari halaman web anda di file tersebut.
• Hyperlinks to Pictures menunjukkan hyperlinks ke halaman lainnya
• Repeated Hyperlinks menunjukkan link ke item yang muncul lebih dari sekali di halaman kita
• Hyperlinks Inside Page menunjukkan link ke bookmarks yang ada di halaman.
• Pada Web Settings anda dapat membuka kotak dialognya dimana anda dapat mengubah nama Web dan menampilkan serta menyembunyikan folder diantara pekerjaan lainnya.
• Jika tanda plus(+) muncul di samping halaman, anda dapat memperluas isi dari folder /tree untuk melanjutkan pekerjaan anda dengan mem-forward atau backward lewat Web. Sebaliknya, klik tanda minus(-) untuk mempersempit folder/ tree.

 TASK VIEW

Task View akan dibahas lebih lanjut pada berikutnya yang memungkinkan anda untuk menambah, melengkapi atau menghapus pekerjaan anda .

Pop-up menu mempercepat anda menambah task/pekerjaan ke halaman atau file yang dipilih. Pilih icon Tasks pada View bar, atau pilih View, Tasks untuk menampilkan Tasks View.

  BAB 2

CARA CEPAT KE WEB DAN PAGES/HALAMAN

 Sekarang anda akan membuat suatu Web site dengan menggunakan template dan wizard yang disediakan oleh Frontpage. Anda juga akan belajar bagaimana menambah template-membuat halaman pada Web.

Pada bab ini anda akan memperoleh ulasan singkat dari beberapa Web dan template serta wizard yang disediakan oleh Frontpage.

Hal-hal yang akan anda kerjakan sekarang adalah :

• mengenalkan diri anda dengan Web dan halaman template serta wizards yang disediakan oleh Frontpage 2000
• membuat Web site personal dan corporate, berisi halaman-halaman yang secara otomatis telah dihubungkan(di-link) untuk anda
• membuat halaman dari template dan menambahkan halaman tersebut pada Web site
• menyimpan halaman ke Web tertentu atau ke folder pada hard drive lokal/jaringan.

DASAR - DASAR PEMBUATAN WEB

Jika anda seorang pemula dalam membuat Web, anda akan sangat terbantu membuat site dengan menggunakan salah satu template Web atau wizards pada Frontpage. Template Web akan menghasilkan satu halaman atau lebih yang secara otomatis terhubungkan(linked) bersamaan. Wizard Web berbeda dengan template Web. Pada wizards, anda masih dimungkinkan untuk mengkustomisasi halaman mana yang ingin anda masukkan pada Web site dan pilihan lainnya, seperti halaman Web bagaimana yang ingin anda perlihatkan.

Ada lima langkah pembuatan Web site pada Frontpage. Anda mulai dengan File, New, Web.   Kotak dialog New Web(gb 2.1) akan muncul. Berikut ini akan digambarkan langkah-langkahnya secara detail.

gb. 2.1

MEMILIH TEMPLATE ATAU WIZARD 

Setelah anda membuka tab Web Sites pada kotak dialog New, langkah selanjutnya adalah memilih template atau wizard yang anda inginkan. Pada contoh(gb 2.1), Corporate Presence Wizard dipilih sebagai suatu Web site yang bergerak di bidang bisnis.

Frontpage menyediakan lima template Web dan tiga wizards Web yang membantu anda membuat dan menjalankan Web dengan cepat.

Dua template Web dimana anda bisa membuat halaman originalnya  adalah Empty Web dan One Page Web.

Tiga template Web lainnya, dimana anda akan membuat beberapa halaman secara otomatis dengan sedikit intervensi(campur tangan) adalah Customer Support Web, Project Web, dan Personal Web

Tiga wizards Web yang memungkinkan anda memilih halaman mana saja yang ingin anda masukkan dalam Web site adalah Import Web Wizard, Discussion Web Wizard, dan Corporate Presence Wizard.

MENENTUKAN LOKASI UNTUK WEB ANDA

Frontpage memungkinkan anda membuat Web pada hard drive lokal, jaringan atau Web server. Untuk menentukan lokasi Web, anda masukkan baik bagian file atau URL pada Specify the location of the new web di kotak dialog New.

Anda dapat menentukan lokasi suatu Web baru sebagai berikut :

Pada terminology Frontpage, suatu Web yang terletak pada hard drive lokal atau jaringan disebut Web berbasis disk. Web berbasis disk memudahkan anda untuk membangun Web site jika anda tidak memiliki akses ke Web server. Setelah anda mendesain halaman Web, anda dapat mempublishnya di internet. Untuk membuat Web berbasis disk, anda tentukan bagian file pada hard drive lokal/jaringan(gb 2.1). Sebagai contoh, Jika anda ingin menyimpan halaman Web pada folder My Documents di drive C, anda masukkan bagian berikut pada New Web Field :

C:\My Documents\My Web4

 MENAMBAHKAN SUATU WEB KE WEB TERTENTU

Frontpage memungkinkan anda mengkombinasikan template dan wizard untuk membuat suatu Web site yang lebih besar. Misalnya anda telah mempunyai suatu Web site bisnis yang menggambarkan produk-produk yang anda jual.

Sekarang anda ingin menambahkan sebuah kelompok diskusi pada Web site anda, yang memungkinkan anda berinteraksi dengan pelanggan.

Pertama, buka Web yang berisi halaman produk anda. Untuk menambahkan kelompok diskusi, pilih File, New, Web. Karena anda telah mempunyai Web pertama yang telah terbuka di Frontpage, anda sekarang akan melihat bahwa pilihan Add to Current Web pada kotak dialog New telah diaktifkan. Untuk menambahkan kelompok diskusi pada Web yang terbuka sekarang, klik kotak check Add to Current Web. Ini akan menambah halaman dari Discussion Group Wizard ke site yang berisi halaman produk anda.

KONEKSI KE SSL

Beberapa Web site (misalnya Web site yang memungkinkan pelanggan untuk membeli produk dan memberi layanan di internet) menggunakan apa yang disebut Secure Sockets Layer untuk mengkomunikasikan data sensitif antara Web server dan pelanggan. Jika Web site anda menggunakan server seperti itu, periksa pilihan Secure Connection Required(SSL) pada kotak dialog New sebelum anda membuat Web site.

 TEMPLATE WEB FRONTPAGE 

Pada sesi sebelumnya telah saya sebutkan bahwa Frontpage menyediakan template Web. Dua template diantaranya adalah Empty Web dan One Page Web. Pada sesi berikut ini, anda akan belajar lebih banyak tentang type-type halaman yang ada pada template Web lainnya yaitu : Customer Support Web, Projec Web, dan Personal Web. Sebagai latihan pertama anda, sekarang anda akan membuat suatu Web site menggunakan Personal Web Template.

CUSTOMER SUPPORT WEB

Template Customer Support Web menghasilkan Web yang berisi halaman-halaman berbeda, beberapa diantaranya berisi forms.

Customer Support Web didesain untuk mendukung layanan interaktif dengan pelanggan/customer menggunakan halaman Web dan group diskusi. Meskipun Sebenarnya Customer Support Web didesain untuk mendukung produk-produk software, Customer Support Web dapat juga dimodifikasi dengan mudah untuk tujuan lainnya. Halaman-halaman yang ada pada Customer Support Web adalah sebagai berikut :

Customer Support section.

Lengkap dengan Bug Report Form, Discussion Group/kelompok diskusi, Download page/halaman download, Customer Feedback page/halaman umpan balik pelanggan, Frequently Asked Questions page/halaman pertanyaan yang sering ditanyakan, Search Page/halaman pencarian, Suggestions from Customer page/halaman saran dari pelanggan, Technical notes/catatan-catatan teknis, dan What’s New Page

Customer Support discussion group

Lengkap dengan Search page (halaman pencarian) sendiri, form arikel persetujuan (article submission form), Welcome page (halaman pembuka), dan page headers serta footers.

PROJECT WEB

Project Web meliputi dua group diskusi (two discussion groups) dan secara garis besar terbagi atas dua bagian utama.

Bagian pertama dari Project Web di desain untuk menyimpan file dan halaman-halaman, serta menyediakan group diskusi yang berhubungan dengan desain proyek dan pengembangan.

Bagian kedua dari Project Web dipakai untuk menyimpan knowledge/pengetahuan berbasis artikel dan group diskusi yang berhubungan.

TEMPLATE PERSONAL WEB

Template Personal Web digunakan jika anda yang ingin membuat Personal site/web pribadi secara cepat. Template Personal Web menyediakan empat halaman tambahan yang menampilkan link-link favorit dan kesukaan anda. Pada latihan berikut, anda akan membuat Personal Web menggunakan template.

LATIHAN

MEMBUAT PERSONAL WEB

Pada latihan ini anda akan membuat sebuah personal web menggunakan salah satu template pada Frontpage. Langkah-langkah berikut bisa juga anda pergunakan untuk membuat Web site dengan template lainnya.

Template Personal Web menghasilkan Web site pribadi yang terdiri dari lima halaman Web. Disamping home page, site juga meliputi halaman site-site favorit/favorite sites page, halaman kesukaan/interests page, halaman favorit/favourite page, dan halaman kumpulan foto/photo album page. Satu-satunya halaman yang tidak muncul secara otomatis pada Navigation View adalah halaman yang berjudul myfav3.htm. Anda akan mempelajari lebih lanjut bagaimana menambahkan halaman tersebut pada Navigation View di bab ”Pendesainan Sistem Navigasi”.

Untuk membuat Personal Web menggunakan Template Personal Web, ikuti langkah-langkah berikut :

1. Pilih File, New, Web; atau klik icon New Page pada Standard toolbar kemudian pilih Web dari menu drop-down.
2. Kotak dialog New akan muncul (gb.2.1). dari icon yang muncul pada tab Web Site, pilih Personal Web
3. Pada tempat specify the location of the New Web, masukkan bagian file berikut untuk membuat Web bernama personal pada direktori yang ditentukan di drive C anda, misal : c:\contohweb\personal
4. Pilih OK.
5. Jika anda sebelumnya telah menggunakan Frontpage untuk membuat Web, Web personal anda yang baru akan dibuat menggunakan theme yang di terapkan pada Web sebelumnya.

Kegunaan dari tiap halaman pada template Personal Web adalah sebagai berikut :

• Favorites(favorite.htn), adalah halaman dimana anda dapat membuat dan menampilkan link ke Web site favorit anda.
• Home Page(index.htm), adalah halaman pertama yang akan dilihat oleh orang ketika mereka masuk ke site anda. Halaman ini memungkinkan anda memperkenalkan diri atau tujuan Web site ini.
• Interests(interst.htm), adalah halaman yang menampilkan hoby atau kesukaan anda. Anda dapat memasukkan gambar, text atau hyperlinks kedalamnaya.
• My Favourite Site 3 (myfav3.htm), adalah halaman yang telah dibuat sebagai halaman tujuan untuk link pada halaman favorit(favourite page). Anda bisa menghapus halaman ini dan memindahkan link-link terkait pada Favourites page  ke site lainnya pada Worl Wide Web, atau menggunakannya sebagai titik awal ke halaman lain di Web anda.
• Photo Album (photos.htm), adalah halaman dimana anda dapat menampilkan foto-foto favorit anda. Anda akan mempelajari bagaimana memasukkan image/gambar pada bab 6 “Menambahkan Images/gambar, Suara, dan Video”.

WEB WIZARDS FRONTPAGE

Web wizards pada Frontpage hampir sama dengan Web template dimana keduanya terdiri dari beberapa halaman yang secara otomatis terhubungkan(linked). Namun demikian, berbeda dengan template Web yang tidak memberi anda kesempatan memilih halaman-halaman mana saja yang ingin anda masukkan pada site, wizard memungkinkan anda memilih halaman mana yang anda inginkan untuk dimasukkan ke site , isi yang akan ditampilkan di halaman, dan tampilan dari halaman.

IMPORT WEB WIZARD

Import Web Wizard dapat dengan mudah dibedakan dari wizard lainnya. Disamping untuk membuat halaman baru(new pages), Import Web Wizard juga membantu anda membuat suatu Web site yang halamannya telah ada di tempat lain. Tujuan utama web wizard ini adalah membantu anda mengimpor/memasukkan isi Web dari Web site lain atau lokasi hard drive.

DISCUSSION WEB WIZARD

Wizard ini menyediakan group diskusi yang terkustomisasi pada Web site baru atau yang telah ada. Group diskusi ini bisa bersifat pribadi atau umum, dan dapat ditempatkan pada frameset atau halaman biasa.

CORPORATE PRESENCE WIZARD

Halaman-halaman yang ada pada Corporate Presence Wizard adalah :

• Home page, menampilkan gambaran umun tentang perusahaan anda meliputi pengenalan/introduksi, misi, profil perusahaan, dan kontak informasi .
• What’s New page, menampilkan perubahan-perubahan terbaru pada Web site perusahaan anda dan link ke halaman tersebut
• Products and Service page yang menggambarkan produk dan layanan yang ditawarkan oleh perusahaan anda. Tiap bagian produk bisa berisi suatu gambar produk, informasi harga, dan informasi form permintaan.
• Tiap halaman layanan/service bisa meliputi daftar kapabilitas,rekening referensi, dan informasi form permintaan.
• Table of Contets page berisi daftar semua halaman pada Web site anda. Halaman ini biasanya dibuat secara otomatis melalui pemakaian komponen Table of Contents.
• Feedback Form memungkinkan user menyatakan apa yang mereka pikirkan tentang perusahaan anda, Web site atau produk dan layanan anda.
• Search Form memungkinkan user mencari kata atau kombinasi kata di seluruh halaman pada web site anda

LATIHAN 

MEMBUAT CORPORATE PRESENCE WEB

Pada latihan berikut anda akan membuat suatu site untuk bisnis kecil-kecilan dengan nama terserah anda. Site ini merupakan contoh sempurna untuk menunjukkan pada anda bagaimana Frontpage wizard memberi kesempatan anda memilih tipe-tipe halaman yang ingin anda masukkan dalam Web site.

Untuk memulai Corporate Presence Web, ikuti langkah-langkah berikut :

1. Pilih File, New, Web. Kotak dialog New akan muncul
2. Dari daftar Web Sites, pilih icon Corporate Presence Wizard
3. Pada Specify the location of the New Web field, masukkan c:\contohweb\bisnis untuk membuat Web berbasis disk atau http://nama server anda/bisnis untuk membuat Web berbasis server. Ganti nama server anda dengan nama server Web anda.
4. Pilih OK.
5. Frontpage akan membuat folder Web, dan tampilan pertama dari Corporate Presence Wizard akan muncul. Klik Next untuk meneruskannya.

MEMILIH HALAMAN

Tampilan kedua dari Wizard, meminta anda untuk memilih halaman mana saja yang ingin anda masukkan dalam Web site anda. Home page selalu disertakan dan anda tidak bisa menon-aktifkannya. Untuk saat ini kita menghindari halaman-halaman yang berisi form dan bentuk lainnya yang membutuhkan ektensi server Frontpage atau custom script.

Pada tampilan ini, lengkapi langkah-langkah berikut :

1. Pilih halaman-halaman tambahan berikut untuk Web site anda :

What’s New

Products/Services

Table of Contents

2. Klik OK untuk melanjutkannya.

MEMILIH ISI HOME PAGE

Tampilan ketiga dari Corporate Presence Web wizard menyarankan anda untuk memilih bagian-bagian yang ingin anda munculkan pada home page. Andi memilih Introduction yang menceritakan apa saja yang disediakan oleh tokonya dan contact information yang menunjukkan bagaimana menghubungi tokonya. Untuk melengkapi tampilan(gb 2.12), ikuti langkah berikut :

1. Pilih pilihan berikut :

Introduction

Contact Information

2. Klik next untuk melanjutkan

ULASAN WHAT’S NEW PAGE

Pada tampilan keempat ini anda akan memilih tipe informasi yang ingin anda masukkan pada What’s New page.  Pada tampilan ini, anda memilih Web Changes. Anda hanya bisa memilih satu pilihan saja. Untuk melengkapi, lakukan hal berikut :

1. Pilih Web Changes
2. Klik Next umtuk melanjutkan

MEMILIH PRODUK DAN LAYANAN

Pada tampilan kelima, anda pilih berapa banyak halaman produk dan layanan yang ingin anda tambahkan pada Web site anda. Andi tidak menyediakan layanan dan hanya memilih satu halaman produk, sehingga langkah yang dilakukannya adalah sebagai berikut :

1. Pada tempat Products isikan 1
2. pada tempat Services, isikan 0
3. Klik next untuk melanjutkan

MEMILIH PILIHAN HALAMAN PRODUK

Pada tampilan keenam ini anda akan memilih halaman-halaman produk anda. Halaman services/layanan tidak diaktifkan karena anda tidak menyertakannya dalam tampilan sebelumnya. Untuk melengkapinya, ikuti langkah berikut :

1. Pilih pilihan berikut :

Product image

Pricing information

2. Klik Next untuk melanjutkan

MEMILIH TABLE OF CONTENTS PAGE OPTIONS

Pada tampilan ketujuh ini, Anda memilih pilihan untuk table of contents. Pilihan tersebut adalah :

Keep Page List Up-to-Date Automatically

Show Pages Not Linked into web

Use bullets for Top-Level Pages

Untuk melengkapi tampilan ikuti langkah berikut :

Misal, anda pilih Use bullets for Top-Level pages

Klik Next selanjutnya.

MEMILIH HEADER DAN FOOTER

Langkah selanjutnya, anda diminta memilih header dan footer yang akan ditampilkan di web anda. Untuk pilihannya disesuaikan dengan kebutuhan anda. Tampilan pilihannya dapat anda lihat seperti pada gambar di bawah ini.

MEMASUKKAN LOKASI PERUSAHAAN ANDA

Langkah berikutnya, setelah anda klik next, maka akan muncul tampilan pengisian lokasi alamat perusahaan anda, seperti pada gambar di bawah ini.

MEMASUKKAN CONTACT INFORMATION PERUSAHAAN

Setelah anda klik next, maka akan muncul pilihan pengisian contact information perusahaan.

MEMILIH WEB THEME

Untuk menampilkan web anda dengan tampilan grafik theme yang sudah disediakan frontpage, anda tinggal menekan tombol choose web theme, jika tidak, maka bisa langsung klik next.

Setelah anda pilih web theme, klik next, maka anda akan memasuki tampilan pilihan terakhir, dimana anda langsung bisa memilih tombol finish untuk proses pembuatan web dari corporate presence wizard.

BAB 3

MEMBANGUN DASAR HALAMAN WEB

Pada bab ini anda akan :

• Belajar tentang elemen-elemen isi yang mendasar pada sebuah halaman
• Menggunakan headings untuk mengetahui isi halaman anda
• Belajar tentang jenis-jenis mendasar dari model paragraph dan fungsinya
• Belajar tentang bentuk/format text dan paragraph untuk menambah model/gaya tanpa gambar/image

LATIHAN :

MEMBUAT SUATU WEB KOSONG

Pada pelajaran sebelumnya anda telah berlatih untuk membuat halaman-halaman Web secara otomatis menggunakan template dan wizard.

Pada latihan ini anda akan membuat suatu Web kosong untuk menyimpan halaman-halaman yang telah anda buat. Untuk membuat Web kosong, ikuti langkah-langkah berikut:

1. Dari Frontpage, pilih File, New, Web. Kotak dialog New akan muncul.
2. Sorot icon Empty Web pada daftar template.
3. Pada bagian Specify the location of the New Web, masukkan misal, c :\My Documents\coba
4. Pilih OK.
5. Frontpage akan membuat suatu Web yang hanya berisi dua folder : _private dan images.

MEMBUAT SUATU NORMAL PAGE/HALAMAN NORMAL

Hanya membutuhkan satu langkah sederhana untuk membuat normal page. Klik icon New Page pada Standard toolbar. Sebuah halaman baru akan muncul pada Web dan Namanya akan di defaultkan secara otomatis new_page_1.htm. Kursor akan menunggu anda untuk mulai mendesain halaman.

MENAMBAHKAN HEADINGS PADA HALAMAN

Headings digunakan untuk mengetahui bagian atau sub bagian pada halaman Web. Halaman Web menggunakan enam tingkatan headings. Tag/tanda HTML yang terkait tersebut adalah <h1>hingga<h6>, dengan <h1> sebagai level/tingkat tertinggi hirarkinya dan <h6> sebagi tingkat terendahnya.

Anda dapat membuat sebuah halaman Web dengan berbagai cara. Salah satu cara memulainya dengan memasukkan headings pada halaman terlebih dahulu. Ini akan memberi anda ide bagaimana mengatur isinya pada halaman.

Seringkali halaman web anda akan berisi subheadings yang membagi halaman menjadi sub topik-sub topik. Tiap sub headings bertindak sebagai bookmark yang menandai permulaan dari sub topik. Hal ini mempermudah pembuatan bookmark sebelum anda menambah text di bawah headings.

Gb 3.3 menunjukkan halaman yang berisi tiga tingkat dari headings.  Baris pertama(Popular Software Application) merupakan level 1 heading. Kemudian diikuti dengan level 2 heading(Word Processors and Software to manage Data), selanjutnya diteruskan dengan level 3 headings(Spreadsheets and Databases) dan diakhiri dengan level 2 heading(Presentation Software).

gb. 3.3

Untuk membuat suatu halaman yang hanya berisi headings, mulailah dengan memilih style heading pertama yang ingin anda pergunakan(typically Heading 1) dari daftar Style drop-down(lihat gb 3.4). Masukkan text untuk heading pertama. Ketika anda menekan tombol enter, insertion point akan pindah ke baris selanjutnya.

gb.3.4

Secara default, Frontpage akan membuat baris baru sebagai paragraph normal sehingga anda dapat memasukkan isi dibawahnya. Untuk merubahnya ke heading lain, pilih model heading lainnya.

Cara lain untuk membuat halaman yang hanya berisi headings adalah dengan memasukkan semua item sebagai text normal. Kemudian klik dan drag(seret dan tahan) mouse untuk memilih(menyorot) satu atau lebih baris yang anda inginkan untuk dirubah menjadi level heading yang sama. Pilih model heading baru dari daftar Style drop-down pada Format toolbar untuk mengubah kembali headings yang sesuai, sebagaimana ditunjukkan pada gb 3.4

JENIS-JENIS PARAGRAPH MENDASAR

Setelah kita membahas tentang heading, sekarang kita akan membahas tentang tiga tipe berbeda dari paragraph yang dapat anda tambahkan pada halaman Web, yaitu normal, formatted, dan address. Anda dapat memilih model-model paragraph ini dari daftar Style drop-down pada Format toolbar. Selain itu anda juga dapat dengan mudah merubah paragraph dari satu model ke model lainnya dengan memilih text, kemudian memilih model paragraph berbeda yang anda inginkan dari menu yang sama. Bagian berikut akan membahas penggunaan dari tiap model paragraph.

PARAGRAPH NORMAL

Mayoritas isi text biasanya menggunakan paragraph normal. Ketika anda melihat kode HTML pada halaman, anda akan melihat paragraph normal diikuti dengan tag <p>…</p> yang menandai awal dan akhir tiap paragraph. Ada beberapa cara yang dapat anda lakukan untuk menyisipkan suatu paragrap normal pada halaman :

• Letakkan insertion point pada halaman dan pilih Normal dari daftar Style drop-down di Format toolbar
• Letakkan insertion point di akhir suatu heading atau paragrap normal lainnya kemudian tekan enter. Baris baru secara otomatis akan terbentuk sebagai paragrap normal.
• Letakkan kursor di akhir dari item terakhir pada daftar kemudian tekan enter dua kali atau Ctrl+enter. Baris baru akan terbentuk sebagai paragrap normal.

FORMATTED PARAGRAPHS

Pada kode HTML, formatted paragraphs dikenali dengan tag <pre>…</pre>, yang menandai awal dan akhir paragrap. Paragrap ini menggunakan lebar font yang tetap, seperti Courier atau Courier New. Berbagai space/ruang dimungkinkan dalam formatted paragraphs, yang menyebabkannya ideal untuk menampilkan data terstabulasi(tabulated data) tanpa menggunakan table.

Formatted paragraphs juga di gunakan untuk menampilkan seni ASCII, kode, dan programming atau tipe-tipe instruksi.

ADDRESS PARAGRAPHS

Address paragraph ditandai dengan <addr>...</addr> diawal dan akhir kode HTML dan menggunakan font/jenis huruf italic dalam menampilkan informasinya. Biasanya address paragraphs digunakan untuk menempatkan alamat perusahaan, authorship, atau informasi hak cipta pada halaman anda. Sebagian besar informasi ini di letakkan pada akhir halaman.

MENYISIPKAN LINE BREAKS

Anda dapat menggunakan line breaks untuk memulai baris baru dari text tanpa menambahkan whitespace. Line breaks dibuat di HTML dengan menggunakan tag <br>. Pada Frontpage, anda dapat menambahkan line break dengan Insert,  Break atau menekan Shift+Enter diakhir baris. Secara default, line break akan membuat baris baru dari text tepat dibawahnya. Line break ini pada Frontpage disebut line break normal(normal line break).

Empat jenis line breaks antara lain:

• Normal line break - Membuat line break tanpa menghilangkan gambar di margin kanan atau kiri. Baris baru dari text akan muncul langsung dibawah line break. Tipe line break ini bisa anda buat dengan menekan Shift+Enter diakhir baris.
• Clear left margin - Text setelah line break diletakkan pada baris clear berikutnya setelah image muncul pada margin kiri.
• Clear right margin - baris selanjutnya dari text berpindah ke baris clear setelah image muncul pada margin kanan
• Clear both margins - Jika image muncul baik pada margin kiri/kanan, baris selanjutnya dari text berpindah sampai kedua margin bersih

MEMBUAT HALAMAN

Pada latihan ini anda akan membuat halaman Web yang mengandung beberapa heading berbeda, tiga jenis paragrap yang berbeda, dan line break untuk mengatur tampilan text. Halaman Web ini juga menyediakan informasi tentang festival music mendatang.   Untuk membangun halaman Web pertama anda, lakukan langkah berikut :

1. Dengan insertion point yang berada pada pojok kiri bawah halaman, pilih Heading 1 dari daftar Style drop-down di Format toolbar(jika Format toolbar tidak ditampilkan, pilih View, Format Toolbar)
2. Masukkan  teks berikut :

The Springtown Music Festival

3. Tekan enter. Secara default, baris selanjutnya diformat sebagai paragrap normal.

Pilih Heading 2 dari daftar Change Style drop-down kemudian masukkan:

About the Festival

4. Tekan enter dan pilih lagi heading 2. Masukkan text selanjutnya : Schedule of Events
5. Letakkan insertion point setelah heading pertama(The Springtown Music Festival), dan tekan Enter. Baris baru diformat sebagai paragrap normal. Masukkan text berikut :

Welcome spring by attending 15 th Annual Springtown Music Festival. Scheduled to take place April 16th through April 18th at the Sprintown Convention Center, the festival is enjoyed by people of all pages, and is one of our most widely anticipated events.

6. Letakkan insertion point setelah heading kedua(About the Festival), dan tekan Enter. Baris baru diformat sebagai paragrap normal. Masukkan text berikut :

The Springtown Music Festival is sure to provide something of interest to everyone. Along with good food, good company, and an amusement park for the youngsters, the highlight is three days of live music performances. For a complete list of performers, see the Performance Schedule on this site.

7. Sekarang masukkan beberapa formatted paragraphs yang menggunakan line breaks untuk memulai baris baru di tiap paragrap. Letakkan insertion point setelah heading ketiga(Schedule of Events) dan tekan Enter. Pilih Formatted dari daftar Style drop-down di Format toolbar. Masukkan text berikut :

DATE  ( add 10 spaces ) TIME  ( add  10  spaces )  HIGHLIGHTS

8. Tekan Enter untuk memulai paragrap baru. Frontpage secara otomatis memformat baris selanjutnya sebagai formatted paragraph. Masukkan text selanjutnya, tambahkan space/tempat antara date, time, dan event untuk meluruskannya dengan heading yang anda masukkan pada langkah sebelumnya :

Fri  Apr  18  11AM  to 10PM  Amusement  Park  and  Carnival

9. Tekan Shift+Enter untuk menambahkan line break di akhir baris. Tekan Space bar hingga kursor anda muncul di kolom waktu(time columm) dan masukkan yang berikut :

11Am  to  8PM   Pavilion  open  for  sit-down  meals

10. Tekan Shift+Enter untuk menambahkan line break di akhir baris. Lengkapi jadwal harian pertama dengan menambahkan final event. Gunakan line breaks(Shift+Enter) untuk mengakhiri dua baris pertama dan tekan Enter untuk mengakhiri baris terakhir :

3PM  to  10 PM  Live music   performances featuring popular folk, country/Western, and bluegrass artists

11. Tekan Enter untuk memulai paragrap baru. Gunakan langkah serupa yang di gambarkan pada langkah 8-10, Lengkapi jadwal untuk dua hari sisanya :

Sat  Apr  19  11AM  to  10PM  Amusement Park  and  Carnival

11AM  to  8PM  Pavilion open for sit-down  meals

11AM  to  10PM  Live music performance featuring popular rock artists

2PM  to  8PM  1999  Regional Battle of the Bands Competition

Sun Apr 20 11AM to 6PM  Amusement Park and Carnival

11AM to 2PM Pavilion open for sit-down meals

11AM to 6PM Live music performance featuring popular blues and jazz artists

12. Tekan Enter untuk memulai paragrap baru. Sekarang anda akan menambahkan beberapa informasi hak cipta diakhir halaman, menggunakan address paragraph dan line breaks.

Dari daftar Style drop-down pada Format toolbar, pilih Address dan masukkan dua baris berikut.

Copyright 1999, Springtown Music Festival Comitte.

For questions or comments, contact [email protected]

13. Pilih File, Save, tekan Ctrl+S, atau gunakan tombol Save pada Standard toolbar. Kotak dialog Save As akan muncul
14. Masukkan nama file music.htm
15. Pilih Save untuk menyimpan halaman

MENAMBAHKAN EMPHASIS PADA CHARACTER STYLES

Pada latihan berikut, anda akan menambahkan formatted text ke halaman anda.

Untuk mengaplikasikan character styles ke halaman Web anda, lakukan langkah berikut :

1. Pilih (sorot) text pada paragrap pertama yang berbunyi"15th Annual Springtown Music Festivall"
2. Dari Format toolbar, klik tombol Bold dan Underline. Text yang anda pilih akan ditampilkan dengan huruf tebal dan bergaris bawah.
3. Letakkan insertion point di akhir heading yang berbunyi "Schedule of Events". Tekan Enter untuk memulai paragrap normal yang baru.
4. Masukkan text berikut :
5. Important : In the event of bad weather, check this web site or phone 555-3456 to confirm which events, if any, are cancelled.
6. Sorot text yang anda masukkan pada langkah sebelumnya. Pilih Format, Font. Kotak dialog Font akan muncul
7. Dari Bagian Effects, periksa Emphasis. Anda bisa memilih lebih dari satu style(misalnya emphasis dan underline).
8. Klik OK untuk keluar dari kotak dialog. Pilihan anda akan diaplikasikan pada text.

MENYISIPKAN DAN MEMFORMAT GARIS-GARIS HORIZONTAL

Anda dapat menggunakan garis-garis horizontal untuk membedakan bagian awal dan akhir pada halaman anda. Sebagai contoh, jika anda memiliki suatu halaman yang menggambarkan/mendeskripsikan bagian utama dari site anda, anda dapat menggunakan garis horizontal di akhir tiap bagian deskripsi. Horizontal Line dapat ditambahkan ke halaman Web anda dengan satu langkah sederhana : pilih Insert, Horizontal Line

Jika anda memiliki garis horizontal di halaman, anda dapat mengubah tampilannya di kotak dialog Horizontal Line Properties, seperti gambar di bawah ini. Cara termudah untuk membuka kotak dialog ini adalah meng-klik dua kali garis horizontal yang ingin anda format.

Berikut ini adalah pilihan-pilihan yang bisa anda pilih di kotak dialog Horizontal Line Properties :

• Width – lebar/panjang dari garis.
• Height-menunjukkan tinggi garis horizontal dalam pixel. Secara default, tingginya adalah 2 pixel
• Aligment – letak perataan garis.
• Color -  warna garis.
• Solid Line(No Shading) – pilihan ini, membuat warna garis horisontal sama dengan warna teks.
• Style - tombol Style memungkinkan anda untuk memformat garis horizontal anda menggunakan Cascading Style Sheet properties, yang akan dibahas pada bab berikutnya.

MENYISIPKAN TANGGAL DAN WAKTU

Pengunjung Web site anda mungkin ingin mengetahui  apakah halaman Web anda diperbaharui atau tidak sejak terakhir mereka mengunjunginya. Salah satu cara otomatis yang memungkinkan mereka mengetahuinya adalah dengan menyertakan komponen waktu dan tanggal.

to be continue ...