Chương 2: các bước thiết kế web

Chia sẻ: Baby Love | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

311
lượt xem 166
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

các tiêu chuẩn thiết kế web, tiến trình thiết kế web, các tiêu chuẩn thiết kế...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Chương 2: các bước thiết kế web

Chương II: Các bư c thi t k web 2.1. Các tiêu chu n thi t k Các tiêu chu n thi t k web: Thi t k cho các lo i Browser khác nhau – Tương thích các web browser, các h ñi u hành, – Internet Explorer, Netscape Navigator, Mozilla các lo i màn hình,… Firefox, Opera, Lynx,… Ti n trình thi t k web Tương thích các lo i h ñi u hành Theo s thích c a ngư i s d ng ð phân gi i màn hình ho c kích thư c c a s T cñ k tn i Màu s c, ñ sáng và phông ch Thi t k web Khoa CNTT 1 Thi t k web Khoa CNTT 2 Thi t k màn hình - PC Thi t k màn hình - Macintosh Thi Thi Live Area in Internet Explorer on Windows Internet Explorer on Macintosh Thi t k web Khoa CNTT 3 Thi t k web Khoa CNTT 4 M t thi t k t t 2.2. Ti n trình thi t k web 1. Phân tích ý tư ng, m c tiêu, ho ch ñ nh k N i dung là quan tr ng, nhưng n i dung ñơn ñ c ho ch s làm cho nó m t tác d ng trên trang web M t thi t k web ñư c g i là t t khi: 2. Ho ch ñ nh c u trúc website - D hi u 3. T o các trang ñơn và ñưa n i dung vào - T o n tư ng khi vào 4. Th nghi m, ki m tra và ñánh giá - D s d ng 5. T i lên server và th ngh êm l n cu i - D nhìn và c m nh n 6. Duy trì ho t ñ ng và qu n lý website - WYSIWYG (WYSIWYW) Thi t k web Khoa CNTT 5 Thi t k web Khoa CNTT 6 1
Bư c 1: Phân tích ý tư ng, m c tiêu, 1: Ch ñ website – tin t c Ch ho ch ñ nh k ho ch ho Xác ñ nh chính xác m c tiêu c a trang này m t cách ng n g n. L p website này ñ làm gì?cung c p gì cho user?cho user làm gì trên website Xác ñ nh v n ñ gi i quy t, ch ñ website website thu c lo i gì?s có nh ng tính năng gì? Xác ñ nh ngư i dùng Ai là user chính?h thu c t ng l p nào?d ñoán v t c k t n i c a user, HðH, kích thư c màn hình, t n xu t truy c p Li t kê các ngu n tài nguyên Trang thi t b , công c ph n m m, trình ñ chuyên môn c a mình, cái gì mình làm, cái gì c n giúp? Xây d ng b ng ti n ñ th c hi n Thi t k web Khoa CNTT 7 Thi t k web Khoa CNTT 8 Ch ñ website – Di n ñàn Ch ñ website – Giáo d c - ðào t o Ch Ch Giáo Thi t k web Khoa CNTT 9 Thi t k web Khoa CNTT 10 Ch ñ website – Mua bán online Bư c 2: Ho ch ñ nh c u trúc website Ch Phân lo i trang web thi t k : Cá nhân Doanh nghi p Thương m i Ph n n i dung chính: Li t kê các m c n i dung chính trong website => website có nh ng trang chính nào Ch n l a cách thi t k : D ng b ng D ng khung D ng Templates, Masterpage Phác th o sơ ñ cây c a website Thi t k web Khoa CNTT 11 Thi t k web Khoa CNTT 12 2
Bư c 3: T o các trang ñơn và ñưa n i 3: Các thành ph n cơ b n c a website dung vào dung Trang ch (HomePage) N i dung luôn là ph n quan tr ng nh t – M i website ñ u ñư c thi t l p quanh Homepage T o,ki m tra, hi u ch nh, ñánh giá, các trang riêng l . – ði u ki n cơ b n ñ website thành công - N u thông tin không c n thay ñ i thì nên dùng web tĩnh => – Lưu ý khi s d ng h th ng ñ h a nhanh hơn, an toàn hơn H th ng Menu, Logo, ñ nh danh - N u thông tin thay ñ i thư ng xuyên => web ñ ng – H th ng menu ph i rõ ràng, ñ y ñ s giúp ñ c gi hình dung - N u có nhi u trang có b c c gi ng nhau => dùng masterpage ñư c c u trúc, t ch c website. cho t t c các trang ñó – C n quan tâm ñ n v trí, các th hi n (có hay không có hi u Làm vi c theo module ng) - Nên chia thành các module ñ d qu n lý và s d ng hơn. VD: –V trí logo, ñ nh danh công ty ph i c ñ nh nh t quán Module menu, module k t n i CSDL, module hi n th k t qu ,… Các trang thành viên Thi t k web Khoa CNTT 13 Thi t k web Khoa CNTT 14 Thi t k giao di n - frame Thi t k giao di n- Table within a table Thi Thi t k web Khoa CNTT 15 Thi t k web Khoa CNTT 16 Thi t k giao di n – c u trúc ph c t p Ki u ch , màu s c Thi Phông ch ph thu c vào các y u t : – ð c ñi m thông tin – ð c gi – Trình duy t, ñ phân gi i – Ngôn ng s d ng Gam màu th ng nh t trong toàn b Website Font ti ng Vi t: Ch dùng Unicode Thi t k web Khoa CNTT 17 Thi t k web Khoa CNTT 18 3
Hi n th thông tin tóm t t – chi ti t Thông tin tóm t t – chi ti t Hi Thông Tóm t t thông tin có m t s l i ñi m: – ð c gi có ít th i gian ñ ñ c các tài li u trên màn hình. – Luôn có nhu c u mu n tìm ph n thông tin ch ñ nh, không nên chia c t quá nh , tóm lư c quá ng n gây th t v ng – Hình th c và cách t ch c ñ ng nh t kinh nghi m tìm ki m, khám phá. – Thông tin ng n g n, súc tích thích h p v i màn hình máy tính (b gi i h n t m nhìn). Thông tin chi ti t ch khi ñi vào m t v n ñ , n i dung c th Thi t k web Khoa CNTT 19 Thi t k web Khoa CNTT 20 Bư c 4: Th nghi m, ki m tra và ñánh giá T o virtual Directory Kh i t o IIS b ng cách: Dùng IIS T o Virtual Directory ñ ki m tra (ho c – Start-> Programs-> Administartive Tools-> Internet Apache Sever) Information Service. Ki m tra ho t ñ ng c a các liên k t (n i + ngo i) và – Ho c trong classic Start-> Settings->Control Panel-> các ngu n tài nguyên. Administartive Tools-> Internet Information Service. Th v i nhi u trình duy t khác nhau. ðánh giá chung k t qu Thi t k web Khoa CNTT 21 Thi t k web Khoa CNTT 22 T o virtual Directory (tt) T o virtual Directory (tt) B trí m t virtual directory KienTuan • Nh p vào nút và gõ KienTuan hp Alias – Nh p ph i (right click) vào Default Web Site, ch n New, Virtual Directory Thi t k web Khoa CNTT 23 Thi t k web Khoa CNTT 24 4
T o virtual Directory (tt) T o virtual Directory (tt) Nh p vào nút và dùng ñ ch n sub folder D:\03CT\ KienTuan Thi t k web Khoa CNTT 25 Thi t k web Khoa CNTT 26 Bư c 5: T i lên server và th ngh êm l n 5: T o virtual Directory (tt) cu i cu Dùng tên KienTuan như tên m t trang web v i ñi u Mua tên mi n ki n trong Documents c a KienTuan Properties ph i có ch a trang web ñó. – Tên mi n = Tên website – Tên ng n – G i nh – D ñ c, không gây nh m l n – Th hi n ñư c tên công ty ho c nhãn hi u chính c a công ty Thuê ch hosting T i lên và th nghi m Thi t k web Khoa CNTT 27 Thi t k web Khoa CNTT 28 Mua tên mi n Thuê ch hosting H ñi u hành Dung lư ng Băng thông Ngôn ng h tr H qu n tr CSDL h tr Email POP3 SSL … Thi t k web Khoa CNTT 29 Thi t k web Khoa CNTT 30 5
Windows hosting Linux hosting http://www.tranquang.vn Thi t k web Khoa CNTT 31 Thi t k web Khoa CNTT 32 Tên mi n + Hosting Free Tên mi n + Hosting Free Các trang web trên m ng cho free Các trang web trên m ng cho free – www.somee.com – www.freewebpage.org • 105MB • 150MB • 3GB monthly bandwidth • FTP access • FTP access • 500MB/m • ASP, ASP.NET • Upload: 10Files (max: 8MB) • MS Access Databases • Linux • D ng ñ a ch : http://user.somee.com • http://user.freewebpage.org/ – www.webng.com – www.freespaces.com • 350MB • 50MB • 10GB/m • 1,5GB/m • ASP • Upload: 10files (max: 8MB) • MS Access • No FTP access • http://user.webng.com ho CNTT c www.webng.com/user • http://user.freespaces.com/ ho c www.freespaces.com/user Thi t k web Khoa 33 Thi t k web Khoa CNTT 34 Tên mi n + Hosting Free ðưa website lên m ng Internet Freespaces.com Cách I: Dùng các tiên ích c a nhà cung c p web hosting Vào www.freespaces.com ->Login: Thi t k web Khoa CNTT 35 Thi t k web Khoa CNTT 36 6
ðưa website lên m ng Internet ðưa website lên m ng Internet Copy các file t máy user lên máy ch Thi t k web Khoa CNTT 37 Thi t k web Khoa CNTT 38 ðưa website lên m ng Internet ðưa website lên m ng Internet Cách 2: Dùng các chương trình FTP Core FTP Lite: Dùng Core FTP Lite (WS FTP, FTP Cute,…) Menu: File->connect: Thi t k web Khoa CNTT 39 Thi t k web Khoa CNTT 40 Th ngh êm l n cu i ðưa website lên m ng Internet Th các trang b ng nhi u cách k t n i khác nhau. Th các trang tình tr ng m c ñ truy c p cao (gi cao ñi m). Th các trang v i nhi u d ng ngư i dùng khác nhau trên nhi u lo i máy tính v i màn hình khác nhau. Th l i (Test, test and test!!!) ðánh giá chung k t qu Thi t k web Khoa CNTT 41 Thi t k web Khoa CNTT 42 7
Bư c 6: Duy trì ho t ñ ng và qu n lý 6: website website Ai s qu n lý website Hàng ngày c n ñưa thông tin gì? – Website c n ñư c c p nh t thông tin ñ ñ c gi luôn c m nh n ñư c cái m i – Ghi th i gian c p nh t, s ngư i truy c p… Liên k t trang, qu ng cáo – T o liên k t ñ n các trang thông tin (ñ i tác, khách hàng…) tăng uy tín – Khi ñã n ñ nh chuy n ñ i hình th c kinh doanh, thu phí: Thuê ñ t logo, qu ng cáo, Thu phí thành viên, …. Thi t k web Khoa CNTT 43 Thi t k web Khoa CNTT 44 8