Panduan pembangunan web dengan menggunakan template, Bahagian 1
Dengan menggunakan web template sedia ada
1. Akses www.google.com
2. Cari dengan frasa "web template". Terdapat hasil carian seperti berikut:
a. www.freewebtemplates.com
b. www.templatemonster.com
c. www.freewebsitetemplates.com
Pilihan Google teratas dipilih.
Satu web template mudah dipilih di link berikut: http://www.freewebtemplates.com/download/templates/9147
3. Download web template tersebut, dan unzip di satu lokasi contohnya di Desktop anda.
Kaedah 1: Tanpa menggunakan apa-apa perisian khas pembangunan web
Utiliti berikut digunakan:1. Notepad++ - untuk mengedit fail teks html
http://notepad-plus.sourceforge.net/uk/site.htm
2. Developer add-ons untuk Mozilla Firefox.
a. Dalam Mozilla Firefox -> Tools -> Add-ons -> Get Add-ons -> Taip developer dalam search box.
b. Pilih utiliti Web Developer dan pilih Add to Firefox...
Pengetahuan asas HTML adalah amat berguna dengan menggunakan kaedah ini.Rujuk artikel wikipedia berikut:
1. http://en.wikipedia.org/wiki/HTML
2. http://en.wikipedia.org/wiki/HTML_element
Tutorial komprehensif terdapat di:
http://www.w3schools.com/html/default.asp
Salin fail index.html atau fail temp001~.htm kepada 4 fail yang lain ( Ctrl + C, Ctrl + V, Ctrl + V, Ctrl + V, Ctrl + V)
Namakan semula fail yang telah disalin kepada about.html, contact.html, services.html, solutions.html| Nama Fail | Tab |
|---|---|
| index.html | Home |
| about.html | About |
| services.html | Services |
| solutions.html | Solutions |
| contact.html | Contact |
Buka fail-fail berkenaan dengan Notepad++ (Dalam Windows Explorer, right click, pilih Edit with Notepad++...)Sekiranya fail temp001~.htm dipilih, pastikan tanda asing seperti dalam gambar di bawah, dipadamkan (dalam setiap fail yang telah disalinkan kepada about contact services solutions).
Perhatikan class=" active" di bawah digunakan untuk tujuan highlight tab menu interface webpage tersebut.
tag class=" active" perlu dialihkan dalam setiap fail (about.html, contact.html, services.html, solutions.html) dan diletakkan di baris yang betul.
tag
Contoh: dalam fail contact.html, yang merujuk kepada tab Contact
Contoh: dalam fail about.html, yang merujuk kepada tab About
Isi kandungan dalam fail-fail tersebut akan diubah mengikut keperluan; dan saiz lebar bahagian-bahagian teks mestilah tetap supaya kelihatan kemas.
