cara merancang halaman web
TRANSCRIPT
-
8/16/2019 Cara Merancang Halaman Web
1/26
CARA MERANCANGHALAMAN WEB
-
8/16/2019 Cara Merancang Halaman Web
2/26
CARA MERANCANG HALAMAN WEB
Jika Anda ingin mendesain dan membuat halaman web,ini akan !auh lebih mudah !ika Anda membuat peren"anlebih dahulu# $i %ase peren"anaan, peran"ang dan klienbeker!a sama untuk menemukan %rmat dan tata letak 'ang sesuai dengan kebutuhan mereka# )rses peren"a
mempengaruhi "rak atau ga'a situs tersebut, bisa dibmerupakan aspek terpenting dalam mendesain web,khususn'a !ika itu untuk keperluan bisnis#
-
8/16/2019 Cara Merancang Halaman Web
3/26
A MEMB*A+ +R*-+*R $AAR
.# +entukan %ungsi situs web tersebut#
/# Buatlah diagram peta situs &site map(#
0# Cbalah metde pen'usunan knsep dengan kartu#
1# Gunakan kertas dan papan buletin, atau papan tulis
2# Buatlah in3entaris knten#
-
8/16/2019 Cara Merancang Halaman Web
4/26
. +EN+*-AN 4*NG5 5+* WEB +EREB*+#
• Apakah web tersebut memerlukan tre%rn
kmentar pengguna6 )erlukah penggunantin'a6 Apa web tersebut berrientasi artikel
gambar6 emua pertan'aan ini dan pertanmembantu Anda dalam mendesain dan meran"a
• )rses peren"anaan ini bisa disusun terutama !ika itu untuk perusahaan besar dan b
terlibat dalam pem
Jika Anda membuat situs pribadi,Anda mungkin sudah tahu
!awabann'a# Namun, !ika Andamembuat situs untuk rganisasi,
perusahaan, atau rang lain, Andaperlu men"ari tahu apa 'ang
mereka inginkan dan %ungsinalitassitus tersebut# emua 'ang Andatentukan di sini akan berpengaruhsaat halaman web selesai nantin'a#
-
8/16/2019 Cara Merancang Halaman Web
5/26
/ B*A+LAH $5AGRAM )E+A 5+* &5+MA)(#
$iagram peta situs mirip dengan diagr&7w "hart(, menun!ukkan bagaimanapengguna beralih dari halaman satu kehalaman berikutn'a# Anda tidak memehalaman web di tahap ini, "ukup aliranumumn'a sa!a# Anda bisa menggunaka
prgram kmputer untuk membuat diaatau membuat sketsa sendiri di kertasGunakan diagram ini untuk menun!ukkknsep pen'usunan hierarki dan knekhalaman web#
-
8/16/2019 Cara Merancang Halaman Web
6/26
0 C8BALAH ME+8$E )EN9**NAN-8NE) $ENGAN -AR+*#
alah satu metde ppuler pen'usunan web se"aragrup adalah dengan menggunakan se!umlah kartuuntuk mengetahui harapan setiap rang# Ambilse!umlah kartu "atatan dan tulis satu per satuknten dasar halaman web di masing:masing kartu#
usunlah kartu:kartu ini bersama dengan tim Andauntuk menemukan knsep terbaik# Cara ini ""kdigunakan saat Anda berklabrasi dengan ranglain dalam pembuatan halaman web
-
8/16/2019 Cara Merancang Halaman Web
7/26
1 G*NA-AN -ER+A $AN )A)AN B*LEA+A* )A)AN +*L5 )*+5H#
5ni adalah metde peren"anaan risindengan anggaran ke"il, Anda bisa de"epat menghapus atau menggeser kdan mengubah alurn'a# Gambarlah dweb Anda di kertas, lalu hubungkan k
kertas itu dengan benang, atau gambgaris di papan tulis# Cara ini sangat "digunakan dalam sesi "urah pendapa
-
8/16/2019 Cara Merancang Halaman Web
8/26
2 B*A+LAH 5N;EN+AR5 -8N+EN#
ebenarn'a ini "enderung lebih tepat digunakandalam peran"angan web ulang daripadaperan"angan web baru# Masukkan setiap bagianknten atau halaman web 'ang sudah !adi kelembar la!ur &spreadsheet(# Buatlah "atatan berisi
tu!uan masing:masing knten atau halamantersebut, gunakan da%tar ini untuk menentukanbagian 'ang perlu dibuang dan 'ang perludipertahankan# Anda bisa men'ederhanakanstruktur web dan memudahkan prsespendesainan ulang nantin'a#
-
8/16/2019 Cara Merancang Halaman Web
9/26
B MEMB*A+ -ERANG-A $AAR H+ML
.# Buatlah kerangka dasar &wire%rame( untuk memantahierarki halaman web#
/# Cbalah metde Gra' B
-
8/16/2019 Cara Merancang Halaman Web
10/26
. B*A+LAH -ERANG-A $AAR &W5RE4RAME(*N+*- MEMAN+A)-AN H5ERAR-5 HALAMANWEB#
-erangka dasar H+ML adalah"etak biru dari situs 'ang akan
Anda buat, han'a menggunakantag paling dasar dan "nth&bl"k=template( knten# -erangka
ini men!awab pertan'aan, >Apa
'ang terlihat di web dan dimana6? )em%rmatan dan
pengaturan ga'a tidak diperlukandalam pembuatan kerangka ini#
• Anda bisa melihat struktur dan diagram ali
kerangka dasar sebelum Anda memilih
• -erangka dasar H+ML tidak statis seperti
Anda bisa dengan "epat menggeser "
memb
• -erangka dasar bersi%at interakti% 'ang mebagi pengembang web maupun klien# -arena
ditulis dengan kde H+ML sederhana
mena3igasikann'a dan mengetahui "ara halaman web# Hal ini tidak bisa dilak
-
8/16/2019 Cara Merancang Halaman Web
11/26
/ C8BALAH ME+8$E GRA9 B8@#
Blk atau srt knten halamanweb Anda di Gra' B
-
8/16/2019 Cara Merancang Halaman Web
12/26
0 C8BALAH )R8GRAM )EMB*A+-ERANG-A $AAR#
Ada berbagai prgram 'angbisa Anda gunakan dalamprses pembuatan kerangkadasar web# Ban'akn'a kde&bahasa( pemrgraman web
'ang harus Anda kuasaiberbeda:beda untuk masing:masing prgram# Beberapaprgram 'ang "ukup ppulerantara lain
• )attern Lab# itus ini khusus untuk >desain atm
dianggap sebagai >mlekul? 'ang men'usun h
• Jump"harts# Halaman web ini men'ediakan la'a
dan pen'usunan kerangka dasar web# itumengharuskan Anda berlangganan, tetapi Anda
kerangka web dengan "epat tanpa harus mengp
• Wire%'# Wire%' adalah situs lain 'ang menawarka)engembang web bisa mendapatkan
-
8/16/2019 Cara Merancang Halaman Web
13/26
1 G*NA-AN MAR-AH &MAR-*)( H+MLE$ERHANA#
-erangka dasar 'ang baikakan mudah dikn3ersikan kesitus aslin'a# Jangan terlalumemikirkan pengaturan ga'aweb selama prses
pembuatan kerangka ini#Gunakanlah markah 'ang bisadipahami dan diubah denganmudah#
• -erangka dasar sederhana !auh lebih baik# markah adalah untuk membangun struktur# +a
diatur nanti dengan C dan
-
8/16/2019 Cara Merancang Halaman Web
14/26
2 B*A+LAH -ERANG-A $AAR *N+*-E+5A) HALAMAN WEB#
Anda mungkin tergda untuk men'amakan setiap halamweb dengan satu kerangka dasar# N'atan'a, hal ini hanmembuat situs Anda men!adi biasa sa!a dan membsanBuatlah kerangka berbeda untuk tiap halaman, Anda akmengerti bahwa setiap halaman memerlukan desain se
-
8/16/2019 Cara Merancang Halaman Web
15/26
-
8/16/2019 Cara Merancang Halaman Web
16/26
. )ER5A)-AN -8N+EN EBEL*MMEMB*A+ HALAMAN WEB#
Anda akan !auh lebih mudahmelihat pratin!au tampilan web !ika Anda sudah memiliki kntenaktual daripada menggunakansampel atau pla"ehlder# Andatidak perlu memiliki terlaluban'ak knten, tetapi maketAnda akan !auh terlihat lebihbaik !ika menggunakan salinangambar aslin'a#
• Anda tidak harus memiliki seluruh materi artikelharus ada pk
-
8/16/2019 Cara Merancang Halaman Web
17/26
/ 5NGA+LAH BAHWA -8N+EN 9ANGBAG* B*-AN HAN9A BER55 +E-#
5nternet !auh lebih kmpleksdaripada halaman websederhana berisi tulisan# Andamemerlukan berbagai kntenberbeda agar bisa
men"iptakan web 'ang bagusuntuk menarik danmengundang pengun!ung#Cnthn'a
• +ransmisi web atau w
•
-
8/16/2019 Cara Merancang Halaman Web
18/26
0 M5N+ALAH BAN+*AN 48+8GRA4ER)R84E58NAL#
• Jika Anda ingin memasukkan
%t ke dalam situs Anda, kesan
pertama 'ang didapatkan dari
web Anda akan !auh lebih baik
!ika diisi dengan %tgra
pr%esinal# atu %t 'angbagus !auh lebih bernilai
daripada dua puluh %t
berkualitas rendah#
• Carilah sar!ana seni %tgra 'ang baru lulus s
lebih murah dibandingkan dengan %tgra%e
sudah la
-
8/16/2019 Cara Merancang Halaman Web
19/26
1 +*L5LAH AR+5-EL BER-*AL5+A#
-nten tulisan di halaman webakan menentukan !umlah trakweb Anda# Walaupun Anda tidakperlu terlalu memusingkanpembuatan knten dalam prsesperan"angan ini, tidak ada
salahn'a untuk mulaimemikirkann'a karena nantin'aAnda !uga memerlukan kntense"ara reguler saat situs sudahakti%#
• elain knten artikel, ada materi tulisan 'an
miliki dalam prses pen'usunan halaman web# kntak, nama perusahaan, atau apa pun 'an
se"ara multi
-
8/16/2019 Cara Merancang Halaman Web
20/26
D MENGUBAH KONSEP MENJADISITUS
.# usunlah elemen:elemen dasar#
/# Buatlah tata letak sederhana#
0# Buatlah maket#
1# Ganti "nth knsep dengan knten asli#
2# Buatlah pedman ga'a web## +erapkan ga'a web tersebut#
-
8/16/2019 Cara Merancang Halaman Web
21/26
. **NLAH ELEMEN:ELEMEN $AAR
usunan elemen ini akanteraplikasikan di setiap halaman disitus Anda, misaln'a "atatankepala, "atatan kaki, dan menuna3igasi# Aturlah dengan ga'a'ang sangat sederhana sehingga
Anda bisa memeriksa tampilansemua halaman# Hal ini sangatberguna saat Anda berlan!ut keprses pen'usunan tata letak web#
• Jangan terlalu memusingkan detail, "balah &pratin!au( tampil
-
8/16/2019 Cara Merancang Halaman Web
22/26
/ B*A+LAH +A+A LE+A- E$ERHANA#
Mulailah dengan menggeserpsisi !am dari klmkerangka dasar ke lkasiaktual di halaman#Cnthn'a, Anda mungkin
ingin menggeser "nth menuna3igasi ke sebelah kirihalaman dan da%tar pkkberita ke kanan#
• +eruslah bereksperimen dengan tata letak we
halaman, sebelum Anda berlan!ut ke tahap rang lain ikut melihatn'a untuk memeriksa
'ang Anda
-
8/16/2019 Cara Merancang Halaman Web
23/26
0 B*A+LAH MA-E+#
Gunakan prgram seperti )htshpuntuk membuat maket atau "nthhalaman situs Anda# Gunakan tataletak 'ang telah Anda susun sebagaipanduann'a# Anda bisa membuatmaket lebih "epat dan mendapatkanhasil 'ang diinginkan dengan prgram
penglah gambar# Hasil gambar:gambar ini nantin'a bisa di!adikansebagai re%erensi dalam prsespenulisan kde pemrgraman web#
• Masukkan knten aktual di dalam maket u
-
8/16/2019 Cara Merancang Halaman Web
24/26
1 GAN+5 C8N+8H -8NE) $ENGAN-8N+EN AL5#
+ambahkan knten dan elemen ke halaman web# Janganmemusingkan pengaturan ga'a web untuk saat ini, sussemuan'a ke lkasi 'ang benar# Hal ini akan membantudalam menin!au perubahan ga'a web 'ang Anda buatnantin'a#
-
8/16/2019 Cara Merancang Halaman Web
25/26
2 B*A+LAH )E$8MAN GA9A WEB#
Hal ini sangat penting untukmen!aga perpaduan ga'a,terutama untuk situs 'ang besar#
Jika situs tersebut ditu!ukan untukkeperluan bisnis dan sudahmemiliki merek atau "rak sendiri,
hal ini harus dipadukan dengandesain situs# Hal:hal 'ang perludipertimbangkan dalampembuatan pedman ga'ahalaman web
•
•
•
• +autan &akti%, tida
• )e
-
8/16/2019 Cara Merancang Halaman Web
26/26
+ERA)-AN GA9A WEB +EREB*+#
etelah Anda menemukan ga'a dan desain 'ang pas,implementasikanlah# C adalah salah satu "ara termuduntuk mengimplementasikan ga'a di halaman web atauseluruh situs tersebut# Lihat petun!uk berikut untuk lebimemahami detail penggunaan C#