Artikel ini perlu semakan editorial. Cara untuk anda membantu.
Bagaimana laman web anda akan kelihatan? membincangkan perancangan dan reka bentuk yang anda perlu lakukan untuk laman web anda sebelum menulis kod, termasuk, "Apakah maklumat yang laman web saya tawarkan?" "Apakah font dan warna yang saya mahukan?" "Apakah yang laman web saya boleh buat?"
Perkara pertama dahulu: Perancangan
Sebelum anda lakukan apa-apa, anda perlukan sedikit idea. Apakah yang perlu laman web anda sebenarnya lakukan? Secara asasnya, sebuah laman web boleh lakukan apa-apa sahaja, tetapi untuk cubaan pertama anda patut bermula dengan mudah. Kita akan bermula dengan membuat sebuah halaman web ringkas dengan tajuk, gambar dan beberapa perenggan.
Untuk bermula, anda perlu memjawab beberapa soalan ini:
- Apakah kandungan laman web anda? Anda suka anjing, New York, atau Pacman?
- Apakah maklumat yang anda paparkan tentang subjek tersebut? Tulis tajuk dan beberapa perenggan, dan fikirkan gambar yang anda mahu tunjukkan di halaman anda.
- Apa rupa laman web anda, dalam istilah ringkas peringkat-tinggi. Apakah warna latar belakang? Apakah font yang sesuai: formal, kartun, tebal dan lantang, halus?
Nota: Projek-projek yang kompleks perlukan panduan-panduan yang terperinci yang menelusuri warna-warna, font-font, jarak antara perkara-perkara dalam halaman, gaya tulisan yang sesuai, dan sebagainya. Ini kadangkala dipanggil sebagai panduan reka bentuk atau sebuah buku jenama, dan anda boleh lihat contoh di Panduan Firefox OS.
Lakarkan reka bentuk anda
Seterusnya, dapatkan sebatang pen dan kertas dan lakarkan secara kasar bagaimana anda mahu laman web anda kelihatan. Untuk halaman web ringkas pertama anda, tidak banyak yang perlu dilakarkan, tetapi anda perlu jadikan ini sebagai kebiasaan anda sekarang. Ianya sangat membantu--anda tidak perlu jadi Van Gogh!
Nota: Walaupun dengan laman web-laman web sebenar dan kompleks, pasukan-pasukan reka bentuk biasanya bermula dengan lakaran kasar di atas kertas, dan kemudian membina bikinan-bikinan digital menggunakan editor grafik atau teknologi-teknologi web.
Pasukan Web selalunya ada seorang pereka grafik dan seorang pereka user-experience (UX) . Jelasnya, pereka grafik menggabungkan visual-visual laman web tersebut. Pereka-pereka UX pula ada peranan yang agak abstrak memikirkan bagaimana para pengguna akan rasa dan berinteraksi dengan laman web tersebut.
Memilih aset-aset anda
Pada ketika ini, ianya bagus untuk mula menggabungkan kandungan yang yang akhirnya akan dipaparkan di halaman web anda.
Teks
Anda patut masih ada perenggan-perenggan dan tajuk daripada sebelum ini. Jangan lupa tentang ini.
Warna tema
Untuk pilih warna, pergi ke Pemilih Warna dan cari warna yang anda suka. Apabila anda klik pada satu warna, anda akan dapat lihat kod enam karakter yang pelik seperti #660066. Itu dipanggil kod hex(adecimal), dan ia mewakili warna anda. Salin kod tersebut ke mana-mana tempat yang selamat buat masa ini.
Imej
Untuk memilih sebuah imej, pergi ke Google Images dan cari sesuatu yang sesuai.
- Apabila anda jumpe imej yang anda mahukan, klik pada imej tersebut.
- Tekan butang View image.
- Pada halaman seterusnya, klik-kanan imej tersebut (Ctrl + Klik pada Mac), plih Save Image As..., dan pilih tempat yang selamat untuk simpan imej anda. Secara alternatif, salin alamat Web imej tersebut daripada bar alamat pelayar web anda untuk kegunaan masa lain.
Nota: Kebanyakan imej di Web, termasuk Google Images, adalah dilindungi hak cipta. Untuk mengurangkan kemungkinan anda melanggar hak cipta, anda boleh menggunakan penapis lesen Google. Cuma 1) klik pada Search tools, kemudian pada 2) Usage Rights:
Font
Untuk memilih font:
- Pergi ke Google Fonts dan skrol senarai ke bawah sehingga anda jumpa yang anda suka. Anda juga boleh gunakan kawalan-kawalan di kanan untuk terus menapis hasil.
- Klik ikon "plus" (Add to) di sebelah font yang anda mahukan.
- Klik butang "* Family Selected" di dalam panel di bawah halaman ("*" bergantung pada berapa banyak font yang anda plih).
- Dalam kotak yang mucul, anda boleh lihat dan salin beberapa baris kod yang diberikan oleh Google ke dalam editor teks anda untuk simpanan masa lain.
