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

Các tiêu chuẩn thiết kế Thiết kế cho các loại Browser khác nhau – Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Lynx,… Tương thích các loại hệ ñiều hành Theo sở thích

Trang 1

Thiết kế web Khoa CNTT 1

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

Các tiêu chuẩn thiết kế web:

– Tương thích các web browser, các hệ ñiều hành,

các loại màn hình,…

Tiến trình thiết kế web

2.1 Các tiêu chuẩn thiết kế

Thiết kế cho các loại Browser khác nhau – Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Lynx,…

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ết nối

Màu sắc, ñộ sáng và phông chữ

Thiết kế màn hình - PC

Live Area in Internet Explorer on Windows

Thiết kế màn hình - Macintosh Internet Explorer on Macintosh

Một thiết kế tốt

Nội dung là quan trọng, nhưng nội dung ñơn ñộc

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:

- Dễ hiểu

- Tạo ấn tượng khi vào

- Dễ sử dụng

- Dễ nhìn và cảm nhận

- WYSIWYG (WYSIWYW)

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ế hoạch

2 Hoạch ñịnh cấu trúc website

3 Tạo các trang ñơn và ñưa nội dung vào

4 Thử nghiệm, kiểm tra và ñánh giá

5 Tải lên server và thử nghịêm lần cuối

6 Duy trì hoạt ñộng và quản lý website

Trang 2

Bước 1: Phân tắch ý tưởng, mục tiêu,

hoạch ựịnh kế hoạch

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

Chủ ựề website Ờ tin tức

Chủ ựề website Ờ Diễn ựàn

Chủ ựề website Ờ Giáo dục - đào tạo

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

Trang 3

Bước 3: Tạo các trang ñơn và ñưa nội

dung vào Ni dung luôn là phn quan trng nht

Tạo,kiểm tra, hiệu chỉnh, ñánh giá, các trang riêng lẻ.

- Nếu thông tin không cần thay ñổi thì nên dùng web tĩnh =>

nhanh hơn, an toàn hơn

- Nếu thông tin thay ñổi thường xuyên => web ñộng

- Nếu có nhiều trang có bố cục giống nhau => dùng masterpage

cho tất cả các trang ñó

Làm việc theo module

- Nên chia thành các module ñể dễ quản lý và sử dụng hơn VD:

Module menu, module kết nối CSDL, module hiển thị kết quả,…

Các thành phần cơ bản của website

Trang chủ (HomePage)

– Mọi website ñều ñược thiết lập quanh Homepage – ðiều kiện cơ bản ñể website thành công – Lưu ý khi sử dụng hệ thống ñồ họa

Hệ thống Menu, Logo, ñịnh danh

– Hệ thống menu phải rõ ràng, ñầy ñủ sẽ giúp ñọc giả hình dung ñược cấu trúc, tổ chức website

– Cần quan tâm ñến vị trí, các thể hiện (có hay không có hiệu ứng)

–Vị trí logo, ñịnh danh công ty phải cố ñịnh nhất quán

Các trang thành viên

Thiết kế giao diện - frame

Thiết kế giao diện- Table within a table

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

Trang 4

Hiển thị thông tin tóm tắt Ờ chi tiết

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ể

Thông tin tóm tắt Ờ chi tiết

Bước 4: Thử nghiệm, kiểm tra và ựánh giá

Dùng IIS Tạo Virtual Directory ựể kiểm tra (hoặc

Apache Sever)

Kiểm tra hoạt ựộng của các liên kết (nội + ngoại) và

các nguồn tài nguyên.

Thử với nhiều trình duyệt khác nhau.

đánh giá chung kết quả

Tạo virtual Directory

Khởi tạo IIS bằng cách:

Ờ Start-> Programs-> Administartive Tools-> Internet Information Service.

Ờ Hoặc trong classic Start-> Settings->Control Panel->

Administartive Tools-> Internet Information Service.

Tạo virtual Directory (tt)

Bố trắ một virtual directory KienTuan

Ờ Nhấp phải (right click) vào Default Web Site, chọn

New, Virtual Directory

Ớ Nhấp vào nút <Next> và gõ KienTuan ở hộp Alias

Trang 5

Nhấp vào nút <Next> và dùng <Browse > ñể

chọn sub folder D:\03CT\ KienTuan

Dùng tên KienTuan như tên một trang web với ñiều

kiện trong Documents của KienTuan Properties phải có

chứa trang web ñó.

B ớc 5: Tải lên server và thử nghịêm lần

cuối

Mua tên miền

– 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

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

…

Trang 6

Windows hosting

http://www.tranquang.vn

Linux hosting

Tên miền + Hosting Free

Các trang web trên mạng cho free

– www.somee.com

• 105MB

• 3GB monthly bandwidth

• FTP access

• ASP, ASP.NET

• MS Access Databases

• Dạng ñịa chỉ: http://user.somee.com

– www.webng.com

• 350MB

• 10GB/m

• ASP

• MS Access

Các trang web trên mạng cho free – www.freewebpage.org

• 150MB

• FTP access

• 500MB/m

• Upload: 10Files (max: 8MB)

• Linux

•http://user.freewebpage.org/

– www.freespaces.com

• 50MB

• 1,5GB/m

• Upload: 10files (max: 8MB)

• No FTP access

•http://user.freespaces.com/hoặc www.freespaces.com/user

Freespaces.com

ðưa website lên mạng Internet

Cách I : Dùng các tiên ích của nhà cung cấp web hosting

Vào www.freespaces.com ->Login:

Trang 7

đưa website lên mạng Internet

Copy các file từ máy user lên máy chủ

Cách 2 : Dùng các chương trình FTP

Dùng Core FTP Lite (WS FTP, FTP Cute,Ầ)

Core FTP Lite:

Menu:

File->connect:

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ả

Trang 8

Bước 6: Duy trì hoạt ñộng và quản lý

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,

….

Định dạng
Số trang	8
Dung lượng	1,27 MB