A. Menentukan Perangkat Lunak Untuk Membuat Homepage
Beberapa hal yang harus diperhatikan dalam membuat homepage yaitu sebagai berikut ;
1. Tujuan dibuatnya homepage. Misal kita akan membuat homepage untuk semua siswa kelas 3A SMUKU.
2. Siapa yang menjadi target utama untuk melihat homepage yang kita buat. Misal yang menjadi target utama untuk melihat dan megakses adalah teman-teman di SMUKU dari kelas 1 samapai kelas 3
3. Klasifikasikan informasi yang akan ditampilkan dalam homepage
4. Hasil klasifikasi tersebut akan mewakili satu halaman homepage sedangkan hasil klasifikasi yang lain akan ditampilkan sebagai hyperlink yang akan ditampilkan pada saat pengguna mengakses link tersebut.
Terdapat 3 kriteria tools yang dapat digunakan untuk pengembangan homepage yaitu;
1. Editor HTML
Editor HTML digunakan untuk mendesain homepage dan komponen-komponennya. Selain itu juga digunakan untuk menggabungkan gambar,suara dan animasi yang telah dibuat di dalam homepage. Editor HTML yang bersifat graphical user interface akan mengurangi waktu dalam penulisan sintaks. Salah satu produk microsoft sebagai editor HTML yaitu Microsoft FrontPage XP
2. Editor Graphics
editor grafis digunakan untuk mengedit gambar yang akan ditampilkan pada homepage. Beberapa editor grafik yang sering digunakan dan populer yaitu CorelDRAW dan Adobe Photoshop. Untuk pembuatan logo gambar dari homepage yang akan dikembangkan dapat menggunakan adobe Photoshop 7.0
3. Editor Multimedia Animasi dan Suara
Editor multimedia digunakan untuk membuat animasi gambar dan suara. Editor animasi yang paling populer yaitu Macromedia Flash
B. Membuat Layout Homepage yang Diinginkan
Layout atau frame merupakan bentuk format navigasi dari homepage yang akan ditampilkan. Beberapa layout halaman homepage tersedia di Microsoft FrontPage XP. Penggunaan layout tergantung jenis navigasi dan informasi yang akan ditampilkan dalam homepage.
Langkah-langkah untuk melihat dan memilih jenis layout yaitu sebagai berikut ;
1. Pilih tombol start-all programs-microsoft frontpage
2. Pilih menu file-new-page or web
3. Pilih page templates pada bagian new from templates
4. Akan ditampilkan kotak dialog page templates yang terdiri atas General,Frames Pages dan Style Sheets
5. Pilih jenis frame lalu tekan tombol OK
C. Menerapkan Hyperlink
Hyperlink digunakan sebagai alat navigasi halaman pada homepage. Cukup dengan menggunakan hyperlink kita dapat menuju ke informasi yang akan kita akses pada page yang lain
Langkah-langkah membuat hyperlink menggunakan Microsoft FrontPage XP sebagai berikut ;
1. Aktifkan aplikasi Microsoft FrontPage XP,buat tulisan ‘Link ke halaman lain’ pada dokumen baru
2. Blok tulisan tadi lalu tekan tombol Ctrl+K sehingga ditampilkan kotak dialog Insert Hyperlink.
3. Kotak text to display menampilkan teks yang dijadikan link,kolom link digunakan untuk memilih link tujuan. Kotak Look In digunakan untuk memilih lokasi tujuan Link. Setelah selesai tekan tombol OK
langkah-langkah membuat hyperlink dengan tag HTML yaitu sebagai berikut ;
1. Aktifkan Microsoft FrontPage XP,buat tulisan ‘Link ke halaman lain’ pada dokumen baru
2. Letakkan kursor di depan kata ‘Link’ dan di belakang tag
pada sintaks HTML
3. Letakkan kursor di belakang kata ‘lain’ dan di depan tag
.ketikkan tag4. Klik tab Normal di bagian bawah dokumen untuk melihat hasil akhir
D. Menerapkan Cascading Style Sheet
Fungsi utama dari CSS adalah untuk melakukan pengaturan beberapa format yaitu;
1. Bentuk huruf 5. Warna Background
2. Ukuran huruf 6. Warna hyperlink
3. Format huruf 7. Format textbox
4. Warna huruf
Css yang telah tersedia dalam Microsoft FrontPage XP dapat diakses dengan menggunakan langkah-langkah berikut ;
1. Aktifkan Microsoft FrontPage XP
2. Pilih menu File-New-Page Or Web
3. Pilih page templates. Pilih tab style sheets
4. Pilih jenis style sheet lalu tekan OK
Langkah-langkah membuat CSS yang akan ditampilkan pada salah satu page HTML;
1. Aktifkan Microsoft FrontPage XP
2. Pilih menu File-new-Page Or Web
3. Pilih tab style sheets lalu pilih jenis Arcs,pilih file-save
4. Ketikkan SMUKU pada kotak File name lalu tekan save
Untuk mengaplikasikan CSS pada halaman HTML,langkah-langkahnya sebagai berikut
1. Aktifkan Microsoft FrontPage XP,pilih menu file-new-Page Or Web
2. Pilih page templates, pada kotak dialog page templates puluh tab general
3. Pilih jenis Frequently Asked Questions lalu tekan OK
4. Tampilkan sintaks HTML melalui tab Normal
5. Kita akan mengaplikasikan file ‘SMUKU.css’ pada page HTML.letakkan kursor di kiri tag
6. Ketikan . Link tersebut akan memberikan efek garis sederhana
7. Simpan halaman tersebut menggunakan menu file-save. Beri nama file “table_of_contents.htm”. klik tab preview
E. Membuat Aplikasi dalam Sistem yang Terintegrasi
1. Membuat Aplikasi Terintegrasi dengan Microsoft FrontPage
Untuk membuah suatu situs diperlukan sebuah skenario yang sedrhana. Fungsi skenario tersebut untuk memandu kita dalam menentukan apa saja yang dapat dilakukan oleh suatu website. Berhasil tidaknya pembuatan sebuah homepage sangat tergantung pada skenario yang dikembangkan
2. Menentukan Directory Lokasi Kerja
Directory tempat kita menyimpan file-file hasil kerja harus terorganisir.
Langkah-langkah pengorganisasian directory sebagai berikut ;
1. Buat directory SMUKU pada drive C:\
2. Dalam directory C:\SMUKU,buat directory/folder Image yang digunakan untuk menyimpan gambar-gambar yang digunakan halaman homepage
3. Buat directory/folder CSS yang akan digunakan untuk menyimpan CSS
3. Membuat Halaman pada Homepage
Homepage yang akan dibuat terdiri atas empat halaman ;
a. Membuat Halaman 1
1. Aktifkan Microsoft FrontPage XP,pilih menu file-new-Page Or Web
2. Pilih page templates. Pilih tab general
3. Pilih one-column Body with Contents on Left kemudian tekan OK
4. Pada page frame sebelah kiri hapus SECTION 2 sampai 4
5. Pada page frame utama yang diperoleh hapus semua tulisan dibawah “Fish Photo Caption”
6. Ganti tulisan ‘Your Heading Goes Here’ dengan “KEGIATAN SISWA”
7. Ganti “SECTION 1” dengan kegiatan “kegiatan siswa”,”Title 1” dengan “jadwal pelajaran”,”Title 2” dengan “Data siswa” dan “Title 3” dengan “Link bermanfaat”
8. Tulis “Kegiatan Siswa” lalu Enter.tulis “Kembali” dan naikkan kursor
9. Pilih menu Table-Insert-Table. Masukkan 5 pada kotak Rows dan 4 pada kotak Columns kemudian tekan OK
10. Simpan pada lokasi C:\SMUKU dengan nama file “kegiatansiswa.htm”
11. Kita akan membuat link dari navigasi yang terdapat pada frame kiri. Blok ‘kegiatan siswa’ kemudian pilih menu Insert-Hyperlink atau tekan Ctrl+K. Tentukan tujuan link yaitu file “kegiatan siswa.htm” lalu OK
12. Simpan hasil perubahan halaman 1 melalui menu file-save
b. Membuat halaman 2
1. Pastikan halaman “kegiatansiswa.htm” masih terbuka
2. Pilih menu file-save as.beri nama file “jadwalpelajaran.htm”. tekan tombol Change Title utnuk mengganti page title dari DATA SISWA menjadi JADWAL PELAJARAN selanjutnya tekan save.
3. Kita hanya akan memodifikasi frame isi dan header dari halaman kegiatan siswa,ganti ‘KEGIATAN SISWA’ di frame header menjadi ‘JADWAL PELAJARAN’ dan ‘jadwal pelajaran’ pada bagian frame isi
4. Ubah isi tabel di bawah “Jadwal Pelajaran” lalu simpan kembali
c. Membuat halaman 3
1. Pilih menu file-Save As dan beri nama file “datasiswa.htm”
2. Tekan tombol Change Title untuk mengganti oage title menjadi DATA SISWA lalu tekan Save
3. Ubah isi tabel lalu simpan kembali hasil perubahannya
d. Membuar halaman 4
1. Pilih menu file-Save As beri nama file “linkbermanfaat.htm”
2. Tekan tombol Change Title untuk mengganti Page Title menjadi LINK BERMANFAAT. Lalu save
3. Ubah isi tabel lalu simpan kembali hasilnya
4. Mengaplikasikan Cascading Style Sheet
1. Copy file yang telah dibuat sebelumnya yaitu file SMUKU.css ke dalam directory C:\SMUKU\CSS.
2. Masukkan di antara tag dan
3. Simpan halaman tersebut. Kamu dapat melihat tampilan akhir dengan cara klik 2 kali file “kegiatansiswa.htm” melalui Windows Explorer.
F. Membuat Grafis sesuai dengan Homepage yang Diinginkan
1. Aktifkan Adobe Photoshop 7.0. pilih menu file –new
2. Lakukan pengaturan pada kotak dialog new alu tekan OK
3. Setelah ditampilkan lembar baru pilih Rectangle Tool. Sebelumnya pilih warna di bagian Set foreground color. Blok kotak yang menutupi seluruh halaman
4. Berikan efek texturizer dengan cara pilih menu filter-texture-texturizer. Untuk texture,pilih brick,scaling 55 dan Relief4
5. Ganti warna dengan tool set foreground color lalu OK. Klik Horizontal Type Tool untuk membuat tulisan SMUKU KELAS 3A ANGKATAN 2005 pada halaman kerja
6. Klik Move Tool sehinnga 8 titik akan ditampilkan. Jika belum,aktifkan Show Bounding Box. Geser tulisan tersebut untuk menyesuaikan ukurannya
7. Simapn gambar dengan nama logosmuku dengan format GIF dalam subfolder Image dalam folder C:\SMUKU kemudian tekan Save
G. Mendaftarkan Alamat Domain ke Provider Web Hosting
Untuk mencari nama domain salah satunya di http://www.internic.com dan http://www.register.com.
Langkah-langkah untuk mendaftarkan alamat domain ke provider web hosting;
1. Aktifkan internet explorer lalu ketikkan http://www.register.com
2. Cari kotak pencarian lalu ketikkan nama domain yang akan kita cari lalu Go
3. Cari nama domain yang masih tersedia agar dapat digunakan
H. Melakukan Upload
Kita akan meng-upload homepage yang kita buat sebelumnya ke Yahoo Geocities agar mudah diakses dengan langkah-langkah ;
1. Daftarkan nama sekolahsmuku sebagai user dengan cara Sign Up Now
2. Lengkapi form,setelah proses registrasi lengkap klik link build your website now!
3. Akan ditampilkan halaman GeoCities Control Panel,pilih menu Manage lalu klik link file manager-klik open file manager
4. Tekan tombol Upload Files di kanan atas lalu masukkan file-file HTML yang telah dibuat dengan cara tekan tombol browse. Setelah selesai tekan tombol Upload Files. Untuk menambah file tekan tombol Add More Files
5. Setelah selesai proses upload klik link file manager. Untuk memasukkan folder kita perlu membuat subdirectory untuk folder gambar tsb dengan cara tekan New dibawah subdirectories
6. Beri nama subdirectory dengan nama Image lalu tekan tombol Create Subdirectory
7. Buat subdirectory untuk menyimpan file CSS dengan cara yang sama,beri nama kemudian tekan tombol Create Subdirectory
8. Edit file index.htm yang sudah disediakan Geocities dengan melakukan modifikasi terhadap isinya
9. Lakukan proses pengeditan melalui editor HTML yang tersedia lalu tekan tombol Save
10. Untuk memasukkan file gambar SMUKU.css ke dalam subdirectory image dan CSS,klik 2x subdirectory CSS kemudian lakukan upload file SMUKU.css
I. Memperbaiki dan Merevisi Data yang Sudah Ada
1. Aktifkan Yahoo!Geocities dan lakukan login
2. Aktifkan GeoCities Control panel,pilih menu Manage lalu klik link file manager-klik link open file manager
3. Upload file logosmuku.gif dengan menekan tombol browse
4. Ubah gambar fish.jpg yaitu datasiswa.htm, jadwalpelajaran.htm, kegiatansiswa.htm, dan linkbermanfaat.htm dengan gambar logosmuku.gif
5. Ubah link dengan ,lalu Save
6. Untuk menampilkan halaman yang sudah diubah gambarnya klik link View My Site
.
No comments:
Post a Comment