Thiết kế web - Chương 2

Chia sẻ: Nguyen Van Nam | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

159
lượt xem 93
download

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

Tham khảo tài liệu 'thiết kế web - chương 2', công nghệ thông tin, quản trị web phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

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

Lưu

Nội dung Text: Thiết kế web - Chương 2

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