Pintar Web: Zero to Hero - Merancang Website

Merancang Website

Site Outline

A site outline is a detailed written structure or list describing the content and sections of each page.

Site Map

A site map is a visual or structured diagram that shows the layout of all the pages in a website.
Focuses on navigation flow
Shows how pages connect to each other

Aktiviti 1:

Cadangkan UI satu halaman web/sistem yang mempunyai antaramuka berikut:
- landing page (laman utama sistem/website)
- borang daftar pengguna
- log masuk
- borang menambah data
- laporan senarai rekod
- kemaskini dan padam rekod

Contoh 1: Site Outline

Website Produk ABC
- Home (index.html)
  - Products (produk.html)
    - Product 1 (sayur.html)
    - Product 2 (ikan.html)
  - About Us Company (about.html)
  - Support (support.html)
  - Blog (blog.html)

Outline Planning
- - Header (banner) - image
  - Menu (horizontal style) - blue color
  - Content (light cream)
  - Footer (bottom - copyright@ABC 2025) - dark color

Aktiviti 2:

Berdasarkan aktiviti 1, tetapkan nama fail projek.
1. - landing page (laman utama sistem/website) - index.html
  - borang daftar pengguna - daftar.html
  - log masuk - login.html
  - borang menambah data - tambahdata.html
  - laporan senarai rekod - papardata.html
  - kemaskini rekod - kemaskini.html
  - padam rekod - deletedata,html
Bina site map seperti berikut bagi memudahkan perancangan projek anda.

Contoh 1: Site Map Website Promosi Produk

Contoh 2: Site Map Log Masuk ke Sistem

Website Sketches: Aktiviti

Aktiviti 3:

Layari https://moqups.com/ atau gunakan mana-mana perisian untuk melakar framework/layout cadangan projek anda berdasarkan aktiviti 1 dan aktiviti 2.
Anda boleh menggunakan low / medium / high fidelity UI to sketch your design.
Cipta projek baru dan lakar mengikut Site Map yang dicadangkan.

Contoh Sketches: Landing Page

Aktiviti ini dicadangkan disiapkan dalam masa 2 jam sebelum memulakan coding pertama anda. Selamat maju jaya!

Jom ke install perisian XAMPP dan cuba kod HTML pertama anda!

Page updated

Google Sites

Report abuse