Xem mẫu
- 5/10/2013
Nội dung
Nhắc lại một số khái niệm
Phân loại trang web
Mở đầu về thiết kế web Một số bước chính trong phát triển website
Công bố website trên internet
Một số nguyên tắc quan trọng trong thiết kế web
Cấu trúc website và bố cục trang web
Tiếng Việt trong trang web
Nhắc lại một số khái niệm
Mạng và giao thức
Địa chỉ IP: IP Address
Nhắc lại một số khái niệm Tên miền: Domain Name
Máy chủ - máy phục vụ: Server
Máy khách: Client
Cổng dịch vụ: Service Port
1
- 5/10/2013
Mạng và giao thức Địa chỉ IP: IP Address
Mạng máy tính: Xác định một máy tính trong mạng
Computer Network: dựa trên giao thức TCP/IP. Hai máy tính trong
Hệ thống các máy tính mạng có 2 địa chỉ IP khác nhau
được kết nối với nhau
nhằm trao đổi dữ liệu. Có dạng x.y.z.t (0 ≤ x, y, z, t ≤255)
Giao thức: Protocol: Ví dụ: 203.162.168.130: địa chỉ
Tập hợp các quy tắc được máy chủ web của báo điện tử ViệtNamNet.
thống nhất giữa các máy
tính trong mạng nhằm Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback)
thực hiện trao đổi dữ liệu là địa chỉ của chính máy tính đang sử dụng
được chính xác
dùng để thử mạng
Ví dụ: TCP/IP, HTTP, FTP,…
Tên miền: Domain Name Máy chủ - máy phục vụ: Server
Là tên được “gắn” với 1 địa chỉ IP. Là máy tính chuyên cung cấp tài nguyên,
Máy chủ DNS thực hiện việc “gắn” (ánh xạ)
dịch vụ cho máy tính khác.
Ở dạng văn bản nên thân thiện với con người Thường được cài các phần mềm
chuyên dụng để có khả năng cung cấp
Được chia thành nhiều cấp, phân biệt bởi dấu chấm
(.) Đánh số cấp lần lượt từ phải sang trái bắt đầu từ Một máy chủ có thể dùng cho một hay
1. nhiều mục đích. Tên máy chủ thường gắn
Cấp lớn hơn là con của cấp nhỏ hơn với mục đích sử dụng.
Ví dụ: xxxx.rtc2.edu.vn gắn với 210.245.22.25 Ví dụ:
trong đó: – File server
– vn: Nước Việt Nam (Cấp 1) – Application server
– edu: Tổ chức giáo dục (Cấp 2) – Mail server
– rtc2: Tên cơ quan (Cấp 3)
– Web server
– xxxx: đơn vị nhỏ trong cơ quan (Cấp 4)
Đặc biệt: Tên localhost được gắn với 127.0.0.1
Thực tế: các máy chủ có cấu hình cao, khả
năng hoạt động ổn định
2
- 5/10/2013
Máy khách: Client Cổng dịch vụ: Service Port
Máy khai thác dịch vụ của máy – Là số [0; 65535] xác định dịch vụ
của máy chủ
chủ Với mỗi dịch vụ, thường có
– 2 dịch vụ khác nhau chiếm các cổng
các phần mềm chuyên biệt để
khác nhau
khai thác – Mỗi dịch vụ thường chiếm các cổng
Một máy tính có thể vừa là xác định,
client vừa là server ví dụ:
• Web: 80
Một máy tính có thể khai thác
• FTP: 21
dịch vụ của chính nó.
Giới thiệu WEB
Lịch sử
Chương I:
Các thành phần của web
Giới thiệu WEB Trang web, web site, World Wide Web
Chuỗi định vị tài nguyên (địa chỉ): URL
(Uniform Resource Locator)
Web server, Web browser
3
- 5/10/2013
Lịch sử: Các thành phần của web
– Mạng Internet xuất phát từ mạng ARPANET của Mỹ (1969) - mạng giữa các Web là gì?
trường ĐH
– 1989 - Tim Berners Lee phát minh ra giao thức World Wide Web (tại phòng
– Là các dịch vụ phân tán cung cấp thông
TN vật lý phân tử-Geneva), sau đó Hypertext Markup Language - HTML tin multimedia dựa trên hypertext
– 1990 – Tim viết trình duyệt (Web Browser) và Web server đầu tiên Các thành phần của web
(info.cern.ch)
– Web Page
– Việt nam có Internet vào tháng 11/1997
– Đến nay, có khoảng hơn 30 tỉ trang web thuộc hơn
– Web site
100 triệu website – Uniform Resource Locator (URL)
– Web Server, Web Browser
Trang web, web site, World Wide Web Chuỗi định vị tài nguyên (địa chỉ): URL
(Uniform Resource Locator)
Trang web: Web page:
– Là một trang nội dung Tài nguyên: file trên mạng
URL: Xác định vị trí và cách khai thác file
– Có thể được viết bằng nhiều ngôn ngữ khác nhau nhưng
Cấu trúc:
kết quả trả về client là HTML
giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file
Web site:
Ví dụ: http://www.rtc2.edu.vn:8080/html/test.htm
– Tập hợp các trang web có nội dung thống nhất phục vụ
Trong trường hợp mặc định, nhiều thành phần có thể bỏ qua:
cho một mục đích nào đó
– Giao thức, cổng: Được trình duyệt đặt mặc định
World Wide Web (WWW):
– Tên file: được máy chủ đặt mặc định
- Tập hợp các web site trên mạng internet.
4
- 5/10/2013
Web server, Web browser
Web server:
– Máy phục vụ web
– Một số phần mềm web server chuyên dụng:
• Apache: mã nguồn mở
• Internet Information Services (IIS): Sản phẩm của Microsoft
Web Browser: Phân loại trang web
– Phần mềm chạy trên client để khai thác dịch vụ web
– Một số Web browser:
• Nescape
• Mozilla Firefox
• Internet Explorer (IE): tích hợp sẵn trong windows
• ...
Phân loại trang web Phân loại trang web
– Web tĩnh: – Web động:
Dựa vào công nghệ phát triển • Dễ phát triển • Khó phát triển hơn
So sánh • Tương tác yếu, không • Tương tác mạnh
cho phép NSD tương tác
• Sử dụng HTML • Sử dụng nhiều ngôn ngữ khác
• Người làm web tĩnh nhau
thường dùng các công
• Thường phải viết nhiều mã lệnh.
cụ trựcquan để tạo ra
Mã lệnh được thực thi trên server,
trang web
gửi kết quả là HTML về NSD
5
- 5/10/2013
So sánh
Trang Web tĩnh:
Một số bước chính trong
- Có nội dung không thay đổi trên Browser, chỉ thay đổi khi nhà phát
thiết kế thay đổi nội dung trình bày
triển website
- Thường có tên mở rộng là .html, .htm bao gồm các thẻ HTML
Trang Web động:
- Có thể thay đổi nội dung trình bày trên Browser khi người sử
dụng triệu gọi chúng
- Thường được xây dựng từ ASP, JSP, PHP, ASP.NET
Các bước thiết kế web Các tiêu chuẩn thiết kế
・ Các tiêu chuẩn thiết kế web: Tương thích các ・ Thiết kế cho các loại Browser khác nhau:
– Internet Explorer, Netscape Navigator,
web browser, các hệ điều hành, các loại màn Mozilla Firefox, Opera, Lynx,…
hình,… ・ Tương thích các loại hệ điều hành
・ Tiến trình thiết kế web ・ 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ữ
6
- 5/10/2013
Thiết kế màn hình - PC Một thiết kế tốt
Title bar (18px)
(26px) Menu bar (32px) 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:
Left edge = 2px Rightt edge =3px Left edge = 2px Rightt edge =3px - Dễ hiểu
- Tạo ấn tượng khi vào
Vertical scrollbar - Dễ sử dụng
Vertical scrollbar
- Dễ nhìn và cảm nhận
- WYSIWYG (What You See Is What You
Status bar (23px) Get: "thấy gì có nấy" và hiểu như là "Giao diện
Task bar (23px)
tương tác tức thời - mắt thấy tay làm")
Tiến trình thiết kế web 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
1. Phân tích ý tưởng, mục tiêu, hoạch định kế
gọn.
hoạch Lập website này để làm gì? cung cấp gì cho user? cho user
làm gì trên website
2. Hoạch định cấu trúc 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ì?
3. Tạo các trang đơn và đưa nội dung vào 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
4. Thử nghiệm, kiểm tra và đánh giá kết nối của user, HĐH, kích thước màn hình, tần xuất truy
cập
5. Tải lên server và thử nghịêm lần cuối Liệt kê các nguồn tài nguyên
6. Duy trì hoạt động và quản lý website 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
7
- 5/10/2013
Bước 2: Hoạch định cấu trúc website Bước 3: Tạo các trang đơn và đưa nội
・ Phân loại trang web thiết kế: Nội dung luôn là phần quan trọng nhất
– Cá nhân Tạo,kiểm tra, hiệu chỉnh, đánh giá, các trang riêng lẻ.
– Doanh nghiệp ‾ Nếu thông tin không cần thay đổi thì nên dùng web
– Thương mại tĩnh => nhanh hơn, an toàn hơn
・ Phần nội dung chính: ‾ Nếu thông tin thay đổi thường xuyên => web động
• Liệt kê các mục nội dung chính trong website => website có ‾ Nếu có nhiều trang có bố cục giống nhau => dùng
những trang chính nào masterpage cho tất cả các trang đó
・ Chọn lựa cách thiết kế: Làm việc theo module
• Dạng bảng ‾ Nên chia thành các module để dễ quản lý và sử dụng
• Dạng khung hơn. VD: Module menu, module kết nối CSDL,
module hiển thị kết quả,…
Dạng Templates, Masterpage
Phác thảo sơ đồ cây của website
Các thành phần cơ bản của website Thiết kế giao diện - frame
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
8
- 5/10/2013
Thiết kế giao diện- Table within a table Thiết kế giao diện – cấu trúc phức tạp
Kiểu chữ, màu sắc Hiển thị thông tin tóm tắt – chi tiết
Phông chữ phụ thuộc vào các yếu 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
– Đặc điểm thông tin hình.
– Độc giả – 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
– Trình duyệt, độ phân giải gây thất vọng
– Ngôn ngữ sử dụng – Hình thức và cách tổ chức đồng nhất kinh
nghiệm tìm kiếm, khám phá.
Gam màu thống nhất trong toàn bộ Website
– Thông tin ngắn gọn, súc tích thích hợp với màn
Font tiếng Việt: Chỉ dùng Unicode 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ể
9
- 5/10/2013
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 Tạo virtual Directory (tt)
Khởi tạo IIS bằng cách:
– Start-> Programs-> Administartive Tools -> Internet Bố trí một virtual directory PTTH
Information Service. – Nhấp phải (right click) vào Default Web Site,
chọn New, Virtual Directory
– Hoặc trong classic Start->
Settings->Control Panel ->
Administartive Tools-> Internet
Information Service.
10
- 5/10/2013
Tạo virtual Directory (tt) Tạo virtual Directory (tt)
Nhấp vào nút và gõ PTTH ở hộp Alias Nhấp vào nút và dùng
để chọn sub folder
D:\11CDTH\ PTTH
PTTH
D:\10CDTH\PTTH
Tạo virtual Directory (tt) Tạo virtual Directory (tt)
Dùng tên PTTH như tên một trang web với điều
kiện trong Documents của PTTH Properties phải
có chứa trang web đó.
11
- 5/10/2013
Bước 5: Tải lên server và thử nghịêm lần cuối Mua tên miền
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
Thuê chỗ hosting
Tên miền + Hosting Free
Hệ điều hành Các trang web trên
Dung lượng mạng cho free
– www.webng.com
Băng thông • 350MB
– www.somee.com
Ngôn ngữ hỗ trợ • 105MB
• 10GB/m
• ASP
Hệ quản trị CSDL hỗ trợ • 3GB monthly bandwidth
• MS Access
• FTP access
Email POP3 • ASP, ASP.NET
• http://user.webng.com hoặc
www.webng.com/user
SSL • MS Access Databases
• Dạng địa chỉ:
・… http://user.somee.com
12
- 5/10/2013
Tên miền + Hosting Free Tên miền + Hosting Free
Các trang web trên
mạng cho free
– www.freespaces.com
• 50MB
– www.freewebpage.org • 1,5GB/m
• 150MB • Upload: 10files (max: 8MB)
• FTP access • No FTP access
• 500MB/m • http://user.freespaces.com/
• Upload: 10Files (max: 8MB) hoặc
• Linux www.freespaces.com/user
• http://user.freewebpage.org/
Đưa website lên mạng Internet Đưa website lên mạng Internet
Cách I: Dùng các tiện ích của nhà cung Cách 2: Dùng các chương trình FTP
cấp web hosting Dùng Core FTP Lite (WS FTP, FTP Cute,…)
Vào www.freewebpage.org ->Login:
Copy các file từ máy user lên máy chủ
13
- 5/10/2013
Đưa website lên mạng Internet Đưa website lên mạng Internet
Core FTP Lite:
Menu:
File->connect:
Thử nghịêm lần cuối Bước 6: Duy trì hoạt động và quản lý website
Ai sẽ quản lý website
Thử các trang bằng nhiều cách kết nối khác nhau. Hàng ngày cần đưa thông tin gì?
Thử các trang ở tình trạng mức độ truy cập cao (giờ cao Website cần được cập nhật thông tin để đọc
điểm). giả luôn cảm nhận được cái mới
Thử các trang với nhiều dạng người dùng khác nhau trên Ghi thời gian cập nhật, số người truy cập…
nhiều loại máy tính với màn hình khác nhau.
Liên kết trang, quảng cáo
Thử lại (Test, test and test!!!)
Tạo liên kết đến các trang thông tin (đối tác,
Đánh giá chung kết quả
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, ….
14
- 5/10/2013
Quảng bá website
Quảng bá Website
– Đăng ký Website vào các máy tìm kiếm trong
nước và thế giới (search engine)
• Vietnam Searchengine: Panvietnam, vinaseek…
Một số nguyên tắc quan
• Global Searchengine: google, altavista, hotboot…
trọng trong thiết kế web
– Nâng cao vị trí của Website trong hệ thống xếp
hạng Website thế giới.
• Google rank (the important of website: 1-10)
• Alexa rank: Traffic ranking of website.
Nâng tầm phát triển Website
– Tự động hoá dần các chức năng của Website.
– Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24
trên Internet.
Các nguyên tắc cơ bản Các nguyên tắc cơ bản
Dễ dàng khám phá các đường link
Tổ chức website chặt chẽ và dễ sử dụng Hãy tạo các đường link bằng chữ hay biểu tượng
Website của bạn cần có cấu trúc càng rõ ràng dễ ở tất cả các trang con để mọi người có thể xem lại
hiểu càng tốt. Điều quan trọng ở đây là phải làm sao hoặc xem tiếp mà không phải sử dụng đến nút
để khách hàng thấy được ngay các thông tin mà họ "Back" hay "Forward" của trình duyệt.
hy vọng có thể thu được từ website của bạn
Thời gian tải web phải nhanh
Sử dụng từ ngữ dễ hiểu
Nhân tố thời gian là vô cùng quan trọng vì mọi
Khi một người đến thăm website của bạn, có thể
người thường không kiên nhẫn khi vào mạng. Nếu
anh ta chưa biết bạn là ai?. Bạn đang chào bán sản
trang của bạn phải mất thời gian quá lâu để tải về
phẩm gì?. Bạn phải giúp khách hàng hiểu rõ những
vấn đề này trong thời gian ngắn nhất. Hãy dùng các thì khách hàng có thể nhấn chuột và bỏ đi
câu ngắn gọn, cô đọng và giữ kiểu thiết kế cố định
đối với tất cả các trang con.
15
- 5/10/2013
Các nguyên tắc cơ bản Các nguyên tắc cơ bản
Nội dung không có hình ảnh
Nếu bạn có một nội dung vô giá trong trang web, ・ Tương thích với đa số trình duyệt web
hãy làm cho nó dễ đọc. Hãy chia thành những
đoạn quan trọng, gạch chân hoặc bôi đậm những ・ Một số vấn đề quan trọng khác
câu quan trọng trong từng đoạn và bạn đừng ngại - Đọc và kiểm tra cẩn thận tất cả các nội
trang trí với một số màu.Tô màu văn bản thay thế dung
file đồ hoạ nếu có thể.
- Một yếu tố thành công khác trong
Dễ theo dõi "quá trình bán hàng".
marketing trực tuyến
Phải tạo điều kiện để khách hàng hiểu rõ những
lợi ích của sản phẩm và dịch vụ của bạn đem lại
cũng như cung cấp cho khách hàng phương thức
đặt hàng thuận tiện nhất.
Định hướng
Khi nào thì bắt đầu? Bắt đầu từ đâu?
Cấu trúc website và bố
Cần học những gì để thiết kế web?
cục trang web -
-
Thiết kế đồ họa, Thiết kế giao diện
Thiết kế thông tin
- Tạo các trang web với HTML
- Lập trình và quá trình tạo mã kịch bản
- Truyền thông đa phương tiện
16
- 5/10/2013
Phần mềm trợ giúp Ngôn ngữ lập trình web
Thiết kế đồ họa Multimedia
- Adobe Photoshop - Macromedia Flash Cần học những gì?
- Adobe ImageReady - Adobe LiveMotion - HTML
- Macromedia Fireworks - Apple Quicktime
- Adobe Illustrator - Apple Final Cut Pro - JavaScript
- JASC Paint Shop Pro - Adobe Premiere - DHTML
- XML
- PHP
- Perl
ASPNET PHP PHP - ASP (ASP.NET)
ASP.NET PHP ZendStudio - JSP
Web Matrix
- ????
Hoạt động của trang web Các triết lý xây dựng web
Internet và Web - Mục đích của Website cần thiết kế
Địa chỉ trang web – URL - Xác định đối tượng độc giả của Website
- Thiết lập các chủ đề
http://www.domain.com:8080/2007/dba - Thiết kế các khối thông tin chủ yếu sẽ cung cấp
se/index.html
17
- 5/10/2013
Các triết lý xây dựng web
Các bước trong tổ chức thông tin
- Chia thành các đơn vị logic, cắt đoạn thông tin
- Thiết lập hệ thống cấp bậc theo tầm quan trọng
và tính
tổng quát
- Tạo cấu trúc quan hệ giữa chúng
- Phân tích sự thành công về chức năng và thẩm
mỹ của hệ thống
18
nguon tai.lieu . vn
