Giáo trình thiết kế web nâng cao

CSS MỤC TIÊU - Trình bày được khái niệm và cú pháp cơ bản của CSS - Trình bày các phương pháp nhúng CSS vào một trang web để định dạng các thành phần: font chữ, màu chữ, đường viền,

THIẾT KẾ WEB NÂNG CAO

NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG

(Lưu hành nội bộ)

Dùng cho đào tạo: Trung cấp

Nam Định, năm 202…

THIẾT KẾ WEB NÂNG CAO

NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG

(Lưu hành nội bộ)

CHỦ BIÊN: LÊ HỮU TOẢN

Nam Định, năm 202…

1

LỜI GIỚI THIỆU

Trong những năm gần đây, cùng với sự phát triển của Công nghệ thông tin thì mạng máy tính cũng được phát triển rộng rãi, kéo theo ứng dụng của mạng máy tính là internet và các dịch vụ cũng trở nên không thể thiếu trong cuộc sống hiện đại Để phục

vụ việc học tập và nghiên cứu của sinh viên Công nghệ thông tin, trường Cao đẳng

Công nghiệp Nam Định, chúng tôi biên soạn giáo trình Thiết kế Web nâng cao Giáo

trình bao gồm 3 bài, mỗi bài đều có phần kiến thức lý thuyết, câu hỏi và phần thực hành cụ thể:

Bài 1 CSS

Bài 2 Công cụ trong thiết kế Web

Bài 3 Thiết kế giao diện Web bằng Photoshop

Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng một ứng dụng Web tĩnh

từ cơ bản đến nâng cao bằng công nghệ HTML, CSS và Photoshop Được biên soạn với phương châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh viên những kiến thức cơ bản phục vụ cho nghiên cứu, thiết kế ứng dụng Web

Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập và nghiên cứu của sinh viên trường Cao đẳng Công nghiệp Nam Định Do thời gian có hạn nên trong phạm vi cuốn giáo trình, không thể đề cập được tất cả những vấn đề nóng hổi trong lĩnh vực thiết kế Web Nhóm tác giả rất mong nhận được các ý kiến đóng góp từ các thầy cô để tài liệu hoàn chỉnh hơn

Nam Định, tháng năm 20…

Chủ biên

2

MỤC LỤC

LỜI GIỚI THIỆU 1

MỤC LỤC 2

DANH MỤC CHỮ VIẾT TẮT 5

DANH MỤC BẢNG, HÌNH VẼ 6

Bài 1 CSS 8

1.1 KHÁI NIỆM CSS 8

1.2 QUY ƯỚC VỀ CSS 9

1.2.1 Cú pháp CSS 9

1.2.2 Đơn vị CSS 10

a Đơn vị chiều dài 10

b Đơn vị màu sắc 10

1.2.3 Vị trí đặt CSS 11

1.3 SỬ DỤNG STYLE TRONG CSS 12

1.3.1 Mức độ ưu tiên style 12

1.3.2 Cách khai báo style 13

1.3.3 Một số Style cơ bản 13

1.3.3.1 Background 13

1.3.3.2 Font Chữ 14

1.3.3.3 Text 15

1.3.3.4 Định dạng liên kết 15

1.3.3.5 Span & Div 16

1.3.3.6 Margin & Padding 16

1.3.3.7 Border 17

1.3.3.8 Height & Width 17

TÓM TẮT NỘI DUNG BÀI 1 19

BÀI TẬP BÀI 1 20

BÀI THỰC HÀNH BÀI 1 21

HƯỚNG DẪN TỰ HỌC Ở NHÀ 27

NỘI DUNG THẢO LUẬN BÀI 1 28

Bài 2 CÔNG CỤ TRONG THIẾT KẾ WEB 29

2.1 CÁC BƯỚC THIẾT KẾ MỘT ỨNG DỤNG 29

2.1.1 Phân tích người dùng 29

2.1.2 Thiết kế các chức năng và cấu trúc trang 29

2.1.3 Xây dựng nội dung 30

3

2.1.4 Thiết kế và kiểm tra bố cục trang web 30

2.1.5 Kiểm tra và đánh giá 31

2.2 MỘT SỐ NGUYÊN TẮC QUAN TRỌNG TRONG THIẾT KẾ WEB 31

2.2.1 Thiết kế giao diện hướng đến người dùng 31

2.2.2 Định hướng thiết kế 31

2.2.3 Trang cuối cùng (dead-end) 32

2.3 CẤU TRÚC WEBSITE 32

2.3.1 Trang chủ - home page 32

2.3.2 Trang liên hệ - contact 32

2.3.3 Trang giới thiệu thông tin - about us 32

2.3.4 Trang giới thiệu về sản phẩm/dịch vụ - products/services 32

2.3.5 Trang hướng dẫn hoặc chính sách - policies 33

2.3.6 Một số cấu trúc website mẫu 33

2.4 CÔNG CỤ THIẾT KẾ 35

2.4.1 Công cụ soạn thảo 35

2.4.1.1 Notepad++ 35

2.4.1.2 Microsoft FrontPage 36

2.4.1.3 Macromedia Dreamwave 38

2.4.2 Công cụ tạo và xử lý ảnh tĩnh 40

2.4.3 Công cụ tạo và xử lý ảnh động 43

TÓM TẮT NỘI DUNG BÀI 2 46

BÀI TẬP BÀI 2 47

BÀI THỰC HÀNH BÀI 2 48

NỘI DUNG THẢO LUẬN BÀI 2 52

Bài 3 THIẾT KẾ GIAO DIỆN WEB BẰNG PHOTOSHOP 54

3.1 XÂY DỰNG BỐ CỤC TRANG WEB 54

3.2 THIẾT KẾ LAYOUT WEB 56

3.2.1 Thành phần thiết kế 56

3.2.2 Thiết kế Layout 57

3.3 XUẤT PSD SANG TRANG WEB HTML 67

3.3.1 Ý nghĩa 67

4.3.2 Các bước thực hiện 68

a Giai đoạn 1: Cắt layout 68

b Giai đoạn 2: Định dạng lại layout cho trang web với HTML và CSS 68

TÓM TẮT NỘI DUNG BÀI 3 72

BÀI TẬP BÀI 3 73

4

BÀI THỰC HÀNH BÀI 3 74

HƯỚNG DẪN TỰ HỌC 77

NỘI DUNG THẢO LUẬN BÀI 3 78

PHỤ LỤC 80

TÀI LIỆU THAM KHẢO 85

5

DANH MỤC CHỮ VIẾT TẮT

ARPA Advanced Research Projects Agency

TCP/IP Transmission Control Protocol/Internet Protocol

SGML Standard Generalized Markup Language

ISP Internet Service Provider

HTTP HyperText Transfer Protocol

IETF Internet Engineering Task Force

MIME Multipurpose Internet Mail Extensions

URI Uniform Resource Identifier

SMTP Simple Mail Transfer Protocol

NNTP Network News Transfer Protocol

FTP File Tranfer Protocol

HTTPS Hypertext Transfer Protocol Secure

TLS Transport Layer Security

GUI Graphical User Interface

STL Standard Template Library

SEO Search Engine Optimization

6

DANH MỤC BẢNG, HÌNH VẼ

Hình 2- 1 Minh họa về CSS 8

Hình 2- 2 Minh họa về tác dụng thuộc tính Margin 17

Hình 2- 3 Các kiểu đường viền trong thiết kế 17

Hình 2- 4 Minh họa về bài thực hành số 1 21

Hình 2- 5 Minh họa về bài thực hành số 2 23

Hình 2- 6 Minh họa về bài thực hành số 3 24

Hình 2- 7 Minh họa về bài thực hành số 4 24

Hình 2- 8 Minh họa về bài thực hành số 5 25

Hình 2- 9 Minh họa về bài thực hành số 6 26

Bảng 2- 1 Bảng đơn vị chiều dài 10

Bảng 2- 2 Bảng đơn vị màu sắc 10

Bảng 2- 3 Thuộc tính định vị ảnh nền 14

Hình 3- 1 Phần Footer giúp định hướng chức năng 32

Hình 3- 2 Trang web bán hàng trực tuyến 34

Hình 3- 3 Trang web mô hình B2B 34

Hình 3- 4 Trang web cổng thông tin điện tử tỉnh Nam Định 35

Hình 3- 5 Màn hình làm việc của NotePade++ 36

Hình 3- 6 Màn hình làm việc chính của Microsoft FrontPage 37

Hình 3- 7 Màn hình làm việc của Dreamwave 38

Hình 3- 8 Các chức năng trong mục Insert của DreamWave 39

Hình 3- 9 Chế độ Split khi lập trình trên DreamWave 39

Hình 3- 10 Các đối tượng trên bảng Insert được chia thành nhóm 40

Hình 3- 11 Màn hình làm việc của Photoshop 41

Hình 3- 12 Các nhóm chức năng trên thanh công cụ Photoshop 42

Hình 3- 13 Màn hình làm việc của Macromedia Flash 44

Hình 3- 14 Minh họa bài thực hành số 5 48

Hình 3- 15 Minh họa bài thực hành số 6 49

Hình 3- 16 Minh họa bài thực hành 7 50

Hình 3- 17 Màn hình làm việc của DreamWave 52

Hình 3- 18 Thanh công cụ Macromedia Dreamwave 52

Hình 3- 19 Thanh công cụ Macromedia Dreamwave 53

Hình 3- 20 Thanh công cụ Macromedia Dreamwave 53

Hình 4- 1 Bố cục trang web được thiết kế bằng vẽ tay 54

Hình 4- 2 Bố cục trang web được thiết kế bằng phần mềm 55

Hình 4- 3 Layout 2 cột với kích thước cố định 55

7

Hình 4- 4 Layout 3 cột có kích thước khác nhau 55

Hình 4- 5 Layout 4 cột hoặc layout kết hợp 56

Hình 4- 6 Các thành phần cơ bản khi thiết kế 57

Hình 4- 7 Hình ảnh tạo mới file tài liệu Photoshop 58

Hình 4- 8 Tạo layer mới để thay đổi background 59

Hình 4- 9 Tạo màu cho layer 59

Hình 4- 10 Lựa chọn vùng làm header cho trang web 59

Hình 4- 11 Thay đổi màu nền cho header 60

Hình 4- 12 Vùng được lựa chọn làm thanh điều hướng 60

Hình 4- 13 Thiết lập thông số 61

Hình 4- 14 Kết quả thu được 61

Hình 4- 15 Phần hiển thị header và thanh điều hướng 62

Hình 4- 16 Tạo tên website vào header 62

Hình 4- 17 Nhập danh mục chức năng 63

Hình 4- 18 Tạo nút Hover button 63

Hình 4- 19 Giao diện thu được 63

Hình 4- 20 Thiết kế chức năng tìm kiếm 63

Hình 4- 21 Tạo layer khung hình 64

Hình 4- 22 Thiết kế layer hình ảnh 64

Hình 4- 23 Hình ảnh chèn đúng vị trí 64

Hình 4- 24 Tạo nội dung cho khung hình 65

Hình 4- 25 Thiết kế dải dây băng chứa tiêu đề 65

Hình 4- 26 Nội dung được chèn vào trang thiết kế 65

Hình 4- 27 Thiết kế layer footer 1 66

Hình 4- 28 Thiết kế layer footer 2 66

Hình 4- 29 Hình ảnh trang web khi thiết kế hoàn thiện 67

Hình 4- 30 Hình ảnh trang web sau khi định dạng bằng HTML và CSS 71

Hình 4- 31 Trang chủ website bán hàng kĩ thuật số 74

Hình 4- 32 Trang chủ website bán đồ trang sức 75

Hình 4- 33 Trang chủ website của một công ty 76

Hình 4- 34 Trang chủ website Business Co 77

8

Bài 1 CSS MỤC TIÊU

- Trình bày được khái niệm và cú pháp cơ bản của CSS

- Trình bày các phương pháp nhúng CSS vào một trang web để định dạng các thành phần: font chữ, màu chữ, đường viền, liên kết

- Sử dụng CSS và nắm rõ được mức độ ưu tiên của các Style khi gọi chúng

- Áp dụng các style CSS vào trong thiết kế giao diện website

Với việc sử dụng các mã định dạng trực tiếp trong HTML sẽ làm tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài Giúp tăng hiệu quả đồng bộ khi người dùng tạo một website có hàng trăm trang hay cả khi muốn thay đổi một thuộc tính trình bày nào đó trên các trang web

Ngoài ra, CSS còn cho phép người dùng áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn

Hình 2- 1: Minh họa về CSS

Ví dụ: body, h2, p, img, #title, #content, username,…

Trong CSS ngoài viết tên selector theo tên thẻ, class, id Chúng ta còn có thể viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là

#entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry

Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó như thẻ

<img> và thẻ <a> cùng có class tên vistors nhưng đây lại là hai đối tượng khác nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm Nên khi viết CSS ta ghi là visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần Nên trong trường hợp này, nếu người dùng có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ ghi là img visitors

Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm cho chúng có text màu đỏ

- Property: Chính là các thuộc tính quy định cách trình bày: Background-color, font-family, color, padding, margin…

Mỗi thuộc tính CSS phải được gán một giá trị Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu “;” để phân cách các thuộc tính Tất

cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector

Ví dụ: Định màu nền cho một trang web là xanh nhạt (light cyan):

Trong HTML: <body bgcolor=”#00BFF3”>

Trong CSS: body { background-color:#00BFF3; }

Ví dụ: Định dạng màu nền, màu chữ và cỡ chữ cho trang web

Body { background:#FFF; color:#FF0000; font-size:14pt }

Đối với một trang web có nhiều thành phần có cùng một số thuộc tính, chúng ta

có thể thực hiện gom gọn lại như sau:

10

- Value: Giá trị của thuộc tính Như ví dụ trên value chính là #FFF dùng để định

màu là nền trắng Đối với một giá trị có chứa khoảng trắng, người dùng cần toàn bộ

giá trị trong một dấu ngoặc kép Ví dụ: font-family:”Times New Roman”

Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với

đơn vị của nó Nó sẽ làm CSS bị vô hiệu trên một số trình duyệt như Mozilla Firefox

hay Netscape

- Chú thích trong CSS: Cũng như nhiều ngôn ngữ web khác Trong CSS, người

dùng cũng có thể viết chú thích cho các đoạn code để dễ dàng tìm, sửa chữa trong

những lần cập nhật sau Chú thích trong CSS được viết như sau /* Nội dung chú thích

*/

Ví dụ: Sử dụng chú thích trong CSS

1.2.2 Đơn vị CSS

Trong CSS hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời

gian, cường độ âm thanh và màu sắc Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị

đo chiều dài và màu sắc Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc trong

CSS

a Đơn vị chiều dài

Bảng 2- 1 Bảng đơn vị chiều dài

In Inch (1 inch = 2.54 cm)

Cm Centimeter

Mm Millimeter

Em

1 em tương đương kích thước

font hiện hành, nếu font hiện

hành có kích cỡ 14px thì

1em=14px Đây là một đơn vị rất

hữu ích trong việc hiển thị

Color-name Tên màu tiếng Anh Ví dụ: black, white, red, green, blue

RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với

nhau tạo ra nhiều màu

/* Màu chữ cho trang web */

body { color: red }

Có ba cách để nhúng CSS vào trong một tài liệu HTML:

- Cách 1 nội tuyến (kiểu thuộc tính): Đây là một phương pháp cơ bản nhất để

nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng Trong trường hợp này người dùng sẽ không cần phải khai báo selector trong cú pháp

Lưu ý: Với phương pháp nội tuyến thì người dùng không thể cùng lúc khai báo nhiều thuộc tính cho nhiều thẻ

Ví dụ: Định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:

- Cách 2 bên trong (thẻ style): Là một phương cách thay thế cách thứ nhất bằng

cách rút tất cả các thuộc tính CSS vào trong thẻ style để thuận tiện cho công tác bảo trì, sửa chữa

Ví dụ: Định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:

Lưu ý: Thẻ style nên đặt trong thẻ head Đối với những trình duyệt cũ, không thể

nhận ra thẻ <style> dẫn đến hiển thị nội dung chứa trong thẻ Để tránh tình trạng này, người dùng nên đưa vào thêm dấu <! ở trước và > ở sau khối code CSS Như ví dụ trên sẽ viết lại là:

12

- Cách 3 Bên ngoài (liên kết với một file CSS bên ngoài): Tương tự như cách 2

nhưng thay vì đặt tất cả các mã CSS trong thẻ style người dùng sẽ đưa chúng vào trong một file CSS (có phần mở rộng css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link

Ví dụ: Tạo file style.css chứa mã CSS để định dạng cho trang noidung.html

Trang style.css chứa nội dung định dạng:

p { color:#333; text-align:left; width:500px }

Trang noidung.html sử dụng thẻ <link> để liên kết:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

1.3 SỬ DỤNG STYLE TRONG CSS

1.3.1 Mức độ ưu tiên style

Trước khi thực thi CSS cho một trang web Trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style>, các CSS nội tuyến Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng Theo nguyên tắc

đó trình duyệt sẽ ưu tiên cho các CSS:

+ Nội tuyến trước

+ CSS bên trong

+ CSS bên ngoài

+ CSS mặc định của trình duyệt

Ví dụ: Xác định các thuộc tính được thực thi

+ Trang web noidung.html có liên kết tới file style.css có nội dung như sau:

p { color:#333; text-align:left; width:500px }

+ Trong thẻ <style> của trang noidung.html cũng có một đoạn CSS liên quan:

p {background-color:#FF00FF; text-align:right;

width:100%; height:150px}

+ Trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:

<p style=”height:200px; text-align:center; border:1px solid #FF0000; color:#000”}

→ Trình duyệt sẽ thực hiện theo nguyên tắc ưu tiên và <p> sẽ được áp dụng các thuộc tính sau:

p {background-color:#FF00FF; width:100%;

height:200px; text-align:center; border:1px solid #FF0000; color:#000}

Chú ý: Để thay đổi độ ưu tiên cho một thuộc tính, CSS cung cấp thuộc tính

!important Người dùng đặt thuộc tính này sau một thuộc tính thì trình duyệt sẽ hiểu đây là một thuộc tính được ưu tiên

selector { property:value !important}

Cùng một thuộc tính cho một selector thì nếu cả hai thuộc tính đều đặt

!important thì cái sau được lấy

Ví dụ: Selector p có nhiều thuộc tính khác nhau Xác định các thuộc tính mà selector p được sử dụng

border:1px solid #FF0000; color:#000” }

1.3.2 Cách khai báo style

Thông thường các Style sẽ được khai báo và lưu trữ trong một file CSS (có phần

mở rộng css) liên kết nó vào trang web bằng thuộc tính href trong thẻ link

Ví dụ: Gọi một file CSS vào trang web

Sau đó hãy tạo một file style.css với nội dung:

Lưu ý: Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file CSS vào CSS hiện hành Cú pháp: @import url(link)

1.3.3 Một số Style cơ bản

1.3.3.1 Background

Màu nền (background-color): Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt

14

p {background-color: #FDC689}

Lặp lại ảnh nền (thuộc tính background-repeat)

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang

+ repeat-y: Chỉ lặp lại ảnh theo phương dọc

+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định

+ no-repeat: Không lặp lại ảnh

background:color> | image> | repeat> | <background-attachment> | <background-position>

<background-Ví dụ: Bỏ qua hai thuộc tính background-attachment và background-position:

background:transparent url(logo.png) no-repeat;

1.3.3.2 Font Chữ

Thuộc tính font-family: Cho phép định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web Có hai loại tên font được dùng

để chỉ định trong font-family: family-names và generic families

- Family-names: Tên cụ thể của một font Ví dụ: Arial, Verdana, Tohama,…

- Generic families: Tên của một họ gồm nhiều font Ví dụ: sans-serif, serif,…

Ví dụ: Thiết lập thuộc tính Font cho body, h1, h2, h3

Thuộc tính font-style: Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web

h1 { font-style:italic; }

h2 { font-style:oblique; }

Thuộc tính font-variant: Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ

in thường Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế

body { font-family:”Times New Roman”,Tohama,sans-serif }

h1, h2, h3 { font-family:arial,verdana,serif }

15

Thuộc tính font-size: Kích thước của một font được định bởi thuộc tính font-size Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xxsmall, x-small, small, medium, large, x-large, xx-large, smaller, larger

body { font-size:20px }

h1 { font-size:3em } h2 { font-size:2em }

Font rút gọn: Cấu trúc rút gọn cho các thuộc tính nhóm font:

Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>

Thuộc tính letter-spacing: Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản

Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:

h1, h2 { letter-spacing:7px }

p { letter-spacing:5px }

Thuộc tính text-decoration: Thuộc tính text-decoration giúp thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink)

1.3.3.4 Định dạng liên kết

Các trạng thái của liên kết: liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active)

Ví dụ 1: Áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu tím

a:link { color:#00FF00 } a:hover { color:#FF00FF}

a:visited { color:#FF0000} a:active { color:# 662D91}

16

1.3.3.5 Span & Div

Span: Thẻ <span> trong HTML là một thẻ trung hòa, nó không thêm hay bớt bất

cứ một thứ gì vào một tài liệu HTML cả Nhưng chính nhờ tính chất trung hòa này mà

nó là một công cụ đánh dấu tuyệt vời để người dùng có thể viết CSS định dạng cho các phần tử mong muốn

Ví dụ: Trình bày đoạn văn: “Không có gì quý hơn độc lập, tự do” yêu cầu tô đậm 2 từ độc lập, tự do

Và bây giờ chúng ta có thể viết CSS cho yêu cầu trên:

Div: Nhóm khối phần tử với thẻ <div> Cũng như <span>, <div> cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS Tuy nhiên, điểm khác biệt là <span> dùng để nhóm một khối phần tử trong khi đó <div> có thể nhóm một hoặc nhiều khối phần tử

1.3.3.6 Margin & Padding

Margin: Thuộc tính margin trong CSS cũng được dùng để căn lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang

Ví dụ: Thực hiện căn lề cho trang web

Hoặc gọn hơn chúng ta sẽ viết như sau:

Cú pháp như sau:

Hoặc: margin:<value1>|< value2> – với value 1 là giá trị margin-top và marginbottom và value2 là giá trị margin-left và margin-right

<p>Không có gì quý hơn <span class=”nhanmanh”>độc

lập</span>, <span class=”nhanmanh”> tự do</span>

17

Hình 2- 2 Minh họa về tác dụng thuộc tính Margin

Padding: Được hiểu như một thuộc tính đệm Padding không ảnh hưởng tới khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng

Cú pháp: Tương tự margin

1.3.3.7 Border

Thuộc tính border-width: Border-width là một thuộc tính CSS quy định độ rộng cho viền của một đối tượng web Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels

Thuộc tính border-color: Border-color là thuộc tính CSS quy định màu viền cho một đối tượng web Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ

Thuộc tính border-style: Border-style là thuộc tính CSS quy định kiểu viền thể hiện của một đối tượng web CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền

Hình 2- 3 Các kiểu đường viền trong thiết kế

Ví dụ: Định viền cho 3 thành phần h1, h2, p như sau:

1.3.3.8 Height & Width

Thuộc tính Width: Width là một thuộc tính CSS dùng để quy định chiều rộng cho một thành phần web

Padding:<padding-top>|<padding-right>|<padding-bottom>|<padding-left>

19

TÓM TẮT NỘI DUNG BÀI 1

1 Khái niệm CSS

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho

các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

- Cú pháp CSS cơ bản: Selector { property:value; }

- Đơn vị chiều dài sử dụng trong CSS: %, inch, cm, mm, em, ex, pt, pc

- Đơn vị màu sắc: color name, RGB, Hexa RGB

- Vị trí đặt CSS: có 3 cách đặt

+ Nội tuyến (Kiểu tuyến tính): Nhúng trực tiếp CSS vào từng thẻ HTML

+ Bên trong thẻ style: Rút tất cả các thuộc tính CSS vào thẻ style và đặt ở phần đầu trang web

+ Ngoại tuyến: Đặt tất cả thuộc tính CSS vào một file CSS ở ngoài và thực hiện liên kết tới trang web cần định dạng

- Mức độ ưu tiên Style: Theo thứ tự từ cao đến thấp CSS nội tuyến, CSS bên trong, CSS bên ngoài và CSS mặc định của trình duyệt

2 Các style cơ bản trong CSS

- Background: gồm các thuộc tính background-color, background-image,

Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>

- Thuộc tính Margin và Padding

Margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left>

Padding:<padding-top> | <padding-right> | <padding-bottom> | <padding-left>

- Thuộc tính border: border-width , border-color, border-style

- Thuộc tính Height & Width: max-width, min-width, max-height, min-height

20

BÀI TẬP BÀI 1

Câu 1: Xác định các hệ màu sử dụng trong CSS? Lấy ví dụ minh họa

Câu 2: Trình bày các thuộc tính CSS để làm việc với bảng trên trang web?

Câu 3: Thuộc tính Float trên CSS có chức năng gì? Cho ví dụ minh họa?

Câu 4: So sánh sự thay đổi trong các phiên bản CSS, CSS2 và CSS3? Cho ví dụ

Câu 5: Trình bày một số bộ chọn Selectors được bổ sung trong phiên bản CSS3? Mô tả tính năng của các bộ chọn đó

21

BÀI THỰC HÀNH BÀI 1

Bài thực hành số 1: Thiết kế trang web có nội dung như hình minh họa

Hình 2- 4 Minh họa về bài thực hành số 1

Yêu cầu và hướng dẫn thực hiện:

1 Trang web

– Tiêu đề: Bài tập số 1 – Lề trái=lề phải=lề trên=50 – Đặt màu nền cho trang web

2 Nội dung hiển thị - Tạo table như hình minh họa

3 Định dạng

- Thiết kế 2 tập tin style1.1.css và style1.2.css

để định dạng cho bảng biểu với kết quả như hình minh họa

23

Bài thực hành số 2: Thiết kế trang web có nội dung như hình minh họa:

Hình 2- 5 Minh họa về bài thực hành số 2

1 Trang web - Tiêu đề: Bài tập số 2

- Lề trái=lề phải=lề trên=50

2 Nội dung hiển thị - Dùng table tạo hai danh sách như hình minh họa

3 - Thiết kế tập tin style2.css để định dạng

cho trang web

24

Bài thực hành số 3: Thiết kế trang web có nội dung như hình minh họa:

Hình 2- 6 Minh họa về bài thực hành số 3

+ Sử dụng css thiết kế menu ngang

+ Đặt tên trang web: bai_tap so_3.html

1 Trang web - Tiêu đề: Bài tập số 3

2 Nội dung hiển thị - Sử dụng HTML thiết kế trang web trên

3 Định dạng - Thiết kế tập tin style3.css để định dạng

cho trang web

Bài thực hành số 4: Phát triển bài tập 3, thêm menu con cho các thành phần

Hình 2- 7 Minh họa về bài thực hành số 4

Mô tả:

1 Trang web - Tiêu đề: Bài tập số 4

2 Định dạng - Thiết kế tập tin style4.css để định dạng cho

menu trên

25

Bài thực hành số 5: Thiết kế trang web có nội dung như hình minh họa:

Hình 2- 8 Minh họa về bài thực hành số 5

+ Sử dụng css để dàn trang

+ Mô tả:

1 Trang web - Tiêu đề: Bài tập số 5

2 Định dạng - Thiết kế trang style5.css để định dạng cho

trang web trên

27

HƯỚNG DẪN TỰ HỌC Ở NHÀ

- Thành thạo với các cách sử dụng CSS trong việc thiết kế giao diện

- Nắm chắc được các style cơ bản trong CSS và chức năng của chúng Mở rộng tìm hiểu các thuộc tính khác thuộc style đã học

- Sử dụng phần mềm soạn thảo NotePad để viết lệnh tạo các tệp tin style.css theo hướng dẫn và yêu cầu bài thực hành

- Truy cập trang web “Trường Cao đẳng Công nghiệp Nam định” tại địa chỉ http:\\www.cnd.edu.vn Thực hiện lưu trang web lên máy tính Tìm đến thư mục lưu trữ và mở tệp tin Style.css Tìm hiểu các thẻ, thuộc tính và tác động của chúng lên website hiện tại

28

NỘI DUNG THẢO LUẬN BÀI 1

Chủ đề: Các điểm mạnh của CSS3 trong việc thiết kế trang web

2 Hỗ trợ mạnh cho các thiết bị có kích thước màn hình khác nhau

Media Queries mới được ra mắt trong CSS3 hỗ trợ tính tương thích với nhiều kích thước màn hình khác nhau mà không cần chỉnh sửa nội dung hiển thị, làm tăng tính uyển chuyển của ứng dụng

3 Giúp các công cụ tìm kiếm hoạt động hiệu quả hơn

Ngoài việc hỗ trợ về giao diện thì CSS3 còn giúp loại bỏ những đoạn code thừa trong HTML khi việc sử dụng những thẻ thuộc tính trong HTML không còn cần thiết nữa

4 Đồng bộ cho website

Bằng việc sử dụng duy nhất 1 file css nên luôn đảm bảo về sự đồng bộ về giao diện giữa những trang khác nhau trong cùng một website Ngoài ra, khi muốn thay đổi giao diện của website thì cũng chỉ cần thay đổi 1 lần duy nhất trong file css đó

5 Tương thích mạnh mẽ với hầu hết trình duyệt

CSS3 là ngôn ngữ được hỗ trợ bởi hầu hết các trình duyệt trên thế giới Và nó thể hiện một website trên nhiều trình duyệt khác nhau cũng khá nhất quán Tuy nhiên, người thiết kế web vẫn cần xác định rõ trình duyệt được người dùng sử dụng nhiều nhất để có sự điều chỉnh tốt nhất cho trình duyệt đó

29

Bài 2 CÔNG CỤ TRONG THIẾT KẾ WEB MỤC TIÊU

- Trình bày được các bước cơ bản khi thiết kế một ứng dụng website

- Trình bày được các thành phần trên một website cũng như vai trò của chúng: trang chủ, trang liên hệ, trang thông tin

- Xây dựng (vẽ) được bố cục trang web đối với từng ứng dụng cụ thể: website bán hàng, website tin tức, website quảng cáo

- Cài đặt và sử dụng các công cụ hỗ trợ trong việc thiết kế website: Notepad++, Photoshop, FrontPage, Dreamwave

2.1 CÁC BƯỚC THIẾT KẾ MỘT ỨNG DỤNG

2.1.1 Phân tích người dùng

Phân tích người dùng để xác định được các thông tin như trình độ, sở thích, các lĩnh vực quan tâm, cấu hình trang thiết bị, phần mềm…để tránh đưa ra một trang web không có ý nghĩa Nếu khi xây dựng chúng ta không biết người dùng dự định là ai, thì tất cả việc thiết kế, cho dù có được thực hiện kĩ lưỡng đến đâu cũng dẫn đến một chương trình không hiệu quả Ngoài ra khi xây dựng, người thiết kế cũng cần phải phân tích các mối quan tâm và khả năng của chính bản thân xem khả năng thiết kế các trang web có hiệu quả và ấn tượng không? Có đủ trình độ chuyên môn để tạo ra được các trang có lượng thông tin phong phú dựa trên các tài nguyên sẵn có không?

Sau đây là một số kĩ thuật thực hiện phân tích người dùng:

- Mô tả mục tiêu: Xác định chính xác mục tiêu của trang web một cách ngắn gọn Mục tiêu cần được mô tả một cách xúc tích, rõ ràng, không quá rườm rà, chi tiết

- Xác định vấn đề giải quyết: Từ mô tả mục tiêu ở bước trên, nêu ra các vấn đề cần giải quyết để đạt được mục tiêu, tóm tắt phương pháp giải quyết

- Xác định người dùng: Liệt kê các đặc điểm của khách hàng như tuổi tác, nghề nghiệp, giới tính, thu nhập, trình độ, vùng cư trú, cấu hình trang thiết bị, phần mềm… vào một danh sách để phân tích và xử lí sau này

- Liệt kê các nguồn tài nguyên: Có sẵn những gì để hoàn thành công việc cả về mặt trang thiết bị, công cụ phần mềm…và cả về trình độ chuyên môn? Có thể làm được những gì, và sẽ nhờ giúp đỡ những gì?

- Xây dựng bảng tiến độ thực hiện: Xác định thời gian cần để hoàn thành sản phẩm với các tài nguyên sẵn có, thời gian cần để thực hiện từng bước của quá trình…

2.1.2 Thiết kế các chức năng và cấu trúc trang

Thiết kế chức năng và cấu trúc trang thường được thực hiện theo các cách sau:

- Phác thảo thiết kế một cách đơn giản và thuận tiện: Người dùng có thể dùng bút

để thiết kế sơ đồ trên giấy, hay có thể dùng các chương trình máy tính để phác thảo Tuy nhiên việc sử dụng các chương trình máy tính có thể sẽ làm hạn chế năng suất làm việc vì các công cụ có sẵn thường bị giới hạn

- Việc thiết kế nên đi từ trừu tượng đến cụ thể: Việc đưa ra các chi tiết ngay từ đầu có thể sẽ làm mất đi tổng quan của vấn đề Phải xác định khung của chức năng trước rồi sau đó mới lựa chọn nội dung để điền vào

30

- Đưa ra càng nhiều cách trình bày từ chính khả năng Luôn quan sát và sưu tập các trình bày tốt đã đạt giải, đã được nhiều người công nhận, hay các trình bày mà yêu thích

- Luôn cập nhật các thay đổi về công nghệ web Luôn có các tài liệu mới nhất về HTML, cũng như các thông tin về các dạng tập tin và các thiết bị mới được hỗ trợ bởi các nhà sản xuất

- Luôn ghi nhớ đối tượng đánh giá cách trình bày là người dùng chứ không phải nhà thiết kế

- Thử càng nhiều giải pháp càng tốt và hãy ghi nhận các nhận xét, phản hồi của những người cộng tác để hoàn chỉnh thiết kế

2.1.3 Xây dựng nội dung

Là một người thiết kế trang web cần phải đảm bảo việc nội dung và thiết kế là tương thích Để đáp ứng được thì trong quá trình thiết kế cần thực hiện các việc sau:

- Sửa đổi, hiệu chỉnh các nội dung đã có hoặc các nội dung mà người dùng có quyền thay đổi

- Xin hỗ trợ và cố vấn của những chuyên gia đối với các chủ đề ngoài lĩnh vực chuyên môn

- Thiết lập đường dây liên lạc giữa người thiết kế và những người tạo nội dung Đưa ra các qui ước, các đặc tả cho nội dung như môi trường hỗ trợ, định dạng tập tin, cách nén, qui ước đặt tên tệp tin, …

- Đảm bảo càng nhiều thông tin càng tốt Cần phải có sự kết hợp chặt chẽ giữa văn bản và đồ họa, hình ảnh, âm thanh trong nội dung

- Tạo một cấu trúc cây thư mục hợp lí cho nội dung và thường xuyên sao lưu để đảm bảo an toàn

2.1.4 Thiết kế và kiểm tra bố cục trang web

Việc kiểm tra bố cục trang web cần thực hiện các bước sau:

- Liên lạc với người quản trị server để xem việc tổ chức các tập tin như thế nào

và các đặc tả nào có sẵn Cho người quản trị biết các loại tập tin nào mà ứng dụng đang sử dụng nhưng chưa được hỗ trợ

- Sử dụng các liên kết trong các trang tới các cấu trúc thư mục tương tự như cấu trúc thư mục trên server

- Ghi nhận các ảnh thường được dùng trong việc truy xuất các trang thông thường để đưa vào cache Bằng cách này có thể tăng tốc độ truy xuất các trang

- Thử nghiệm trên server để kiểm tra xem nó hoạt động đúng như thiết kế hay không

- Ngoài ra khi kiểm tra còn phải xem xét nội dung có ăn khớp với bố cục và khung trang của website hay không? Để thực hiện cần tiến hành các công việc sau: + Kiểm tra các trang hoạt động cục bộ, riêng lẻ để dễ hiệu chỉnh, đánh giá

+ Làm việc theo module, nghĩa là cho nhóm các trang liên quan nhau hoạt động trôi chảy trước khi mở rộng ra

+ Thay đổi các quyết định trước đó nếu việc triển khai bị vướng mắc hoặc công nghệ đã thay đổi lúc đưa nội dung vào

31

2.1.5 Kiểm tra và đánh giá

Các trang hiệu quả nhất là kết quả của việc thiết kế và đánh giá cẩn thận Và để thực hiện kiểm tra, đánh giá một ứng dụng cần thực hiện các bước cơ bản sau:

- Kiểm tra hoạt động của các liên kết nội bộ và các nguồn tài nguyên

- Kiểm tra độ chính xác của các liên kết ngoại Không có gì tệ hơn là các liên kết với các trang bên ngoài không còn tồn tại nữa, hoặc là được chuyển đến nơi khác, hoặc

là không còn phù hợp nữa

- Thử các trang với nhiều trình duyệt khác nhau Thực hiện điều này để kiểm tra tính tương thích của trang với các trình duyệt, xem thử thiết kế trang đã tận dụng hết các hỗ trợ của trình duyệt chưa…

- Thử các trang bằng nhiều cách kết nối khác nhau Thử xem việc hiển thị các trang có ảnh hưởng như thế nào nếu kết nối bằng mạng cục bộ, đường kết nối tốc độ cao, đường điện thoại…

- Thử các trang ở tình trạng mức độ truy cập cao Nếu server chạy tốt trong các giờ cao điểm thì những giờ khác có thể chấp nhận được

- Thử các trang với nhiều dạng người dùng khác nhau Nếu trang web đề cập về các mối quan tâm chung thì hãy tranh thủ thử trang web với những đồng sự, bạn bè…Hãy ghi chú và quan sát Có thể người dùng không cần thay đổi phiên bản của trang web nhưng sẽ cần các thông tin vì trang liên tục được cập nhật hóa

2.2 MỘT SỐ NGUYÊN TẮC QUAN TRỌNG TRONG THIẾT KẾ WEB

2.2.1 Thiết kế giao diện hướng đến người dùng

Giao diện đồ họa cho người dùng sử dụng (GUI) được thiết kế nhằm cho người dùng điều khiển máy tính của họ Ngày nay, người sử dụng yêu cầu một mức độ hoàn hảo của mọi thiết kế giao diện đồ họa, kể cả trang web Mục đích là cung cấp mọi cần thiết cho tất cả độc giả quan trọng của chúng ta, mô phỏng công nghệ web cho mọi người mong chờ của họ, và không bao giờ đòi hỏi người đọc chỉ đơn giản là làm theo một giao diện mà đặt những cản trở không cần thiết lên con đường của họ

Đây là nơi nghiên cứu của chúng ta về các nhu cầu và tâm lý học khách hàng là những yếu tố quyết định Không thể thiết kế cho một độc giả vô danh mà chúng ta không biết đến các yêu cầu của người đó Chúng ta nên tạo các kịch bản mẫu cho các nhóm độc giả đang tìm kiếm thông tin trên website chúng ta Một độc giả có kinh nghiệm tìm một mẩu tin nhất định có được sự giúp đỡ hay cản trở thiết kế của chúng ta? Một độc giả mới có bị lúng túng trước một hệ thống menu phức tạp? Thử nghiệm các thiết kế của chúng ta và nhận các phản hồi từ độc giả là phương pháp tốt nhất để tìm ra các ý tưởng thiết kế cho phép độc giả cảm nhận cái từ website của chúng ta

2.2.2 Định hướng thiết kế

Với thực tại của công nghệ web, đa số

độc giả tương tác với các trang web bằng cách

thực hiện các liên kết giữa các tài liệu Vấn đề

chủ yếu của giao diện trong các website là độc

giả không ý thức được họ đang ở đâu trong tổ

chức thông tin Các biểu tượng nhất quán, dễ

hiểu, các lược đồ đồ họa đồng nhất và bản

khái quát, màn hình tổng hợp có thể cho độc

giả sự tin tưởng là họ có thể tìm thấy cái họ

32

tìm mà không lãng phí thời gian

Độc giả phải luôn có khả năng quay lại trang chủ và các điểm chủ chốt trên website của chúng ta Các liên kết cơ bản này nên có trên mọi trang web, nó thường là các nút ấn đồ họa với hai mục đích chính: tạo các mối liên kết cơ bản và giúp tạo một biểu tượng đồ họa thông báo cho độc giả biết họ vẫn còn đang ở trong website chúng

ta Ví dụ trên website của 24h.com.vn luôn có thanh biểu tượng sau ở cuối mỗi trang

Hình 3- 1 Phần Footer giúp định hướng chức năng

2.2.3 Trang cuối cùng (dead-end)

Mọi trang web trong ứng dụng nên có ít nhất

một liên kết Các trang “dead-end” là các trang

không liên kết đến các trang khác trong cùng một

website – Chúng thường làm tạo cảm giác không tốt

cho độc giả khi đang thực hiện xem thông tin trên

trang web

Ngoài ra khi thực hiện thiết kế, nhà thiết kế

cũng cần phải chú ý đến các liên của của website đặt

ở các vị trí phù hợp đảm bảo cho người đọc có thể

truy cập tại bất kì vị trí nào của ứng dụng.Ví dụ các

trang ở sâu trong ứng dụng sẽ có chứa các liên kết liên kết lên trên, về trang chủ hoặc quay lại menu

2.3 CẤU TRÚC WEBSITE

2.3.1 Trang chủ - home page

Homepage là trang đầu tiên khi khách hàng truy cập vào một ứng dụng website Homepage là nơi liệt kê các liên kết đến các trang khác của website, ở đây thường trình bày các thông tin mới nhất của doanh nghiệp, tóm tắt giới thiệu doanh nghiệp, giới thiệu đối tác, dịch vụ, sản phẩm, các chương trình khuyến mãi, sự kiện, hội thảo, các thế mạnh điển hình đặc trưng

2.3.2 Trang liên hệ - contact

Bao gồm các hình thức liên hệ với doanh nghiệp, thông qua địa chỉ email, số điện thoại, trực tiếp tại văn phòng, trụ sở, qua các hệ thống trả lời trực tuyến thường có form liên hệ để người xem gửi yêu cầu ngay trên website

2.3.3 Trang giới thiệu thông tin - about us

Khi người xem muốn tìm hiểu về nhà cung cấp vì vậy doanh nghiệp cần có một trang giới thiệu về mình, nêu ra những kinh nghiệm, thế mạnh của mình so với những doanh nghiệp khác

2.3.4 Trang giới thiệu về sản phẩm/dịch vụ - products/services

Để doanh nghiệp mô tả chi tiết về các danh mục sản phẩm hình ảnh, thông tin về sản phẩm dịch vụ hoạt động của doanh nghiệp mình

33

2.3.5 Trang hướng dẫn hoặc chính sách - policies

Dùng để cung cấp thông tin cho người xem trong trường hợp họ muốn mua hay đặt hàng, dịch vụ Thông tin trong trang này thường hướng dẫn họ làm gì, chính sách của doanh nghiệp như thế nào Trang này giúp doanh nghiệp tiết kiệm nhiều công sức trả lời câu hỏi “làm thế nào” của người xem Đó là một số chức năng cơ bản cần

có cho một website, ngoài ra còn phụ thuộc vào lĩnh vực hoạt động, lĩnh vực kinh doanh, ngành nghề để có thể tạo nên một website hiệu quả nhất

2.3.6 Một số cấu trúc website mẫu

- Cửa hàng điện tử, siêu thị điện tử: Với mô hình siêu thị điện tử, website gồm

các phần chính sau:

+ Thông tin hàng hóa: là cơ sở dữ liệu phân loại nhiều nhóm sản phẩm, sản phẩm mới, sản phẩm đang khuyến mãi v.v Thông tin về từng sản phẩm gồm: hình, giá, giới thiệu ngắn, mô tả thông số, loại sản phẩm

+ Thông tin giới thiệu, hướng dẫn: gồm những thông tin như: giới thiệu chủ sở hữu website, chính sách mua bán, giao hàng, trả lại hàng, hướng dẫn cách tìm kiếm hàng hóa v.v

+ Công cụ mua hàng, thanh toán: nhất thiết phải có công cụ giỏ mua hàng (shopping cart), chức năng thanh toán (qua mạng, qua bưu điện, chuyển tiền, qua ATM, thanh toán khi giao hàng ) Nên có thông tin hướng dẫn các cách thức thanh toán khác nhau để người mua hiểu rõ và chọn lựa

+ Chức năng thành viên dành cho người đã mua hàng để tiết kiệm thời gian nhập thông tin khi họ mua hàng những lần sau và để cung cấp thông tin lịch sử mua hàng, giới thiệu hàng hóa mới, hàng hóa khách hàng quan tâm cho khách hàng

+ Một số chức năng tự chọn khác như chức năng tìm kiếm sản phẩm trong siêu thị, chức năng nhận bản tin định kỳ

- Đấu giá trực tuyến: Với mô hình đấu giá trực tuyến, website gồm các phần

chính sau:

+ Thông tin hàng hóa: là cơ sở dữ liệu phân loại nhiều nhóm sản phẩm Thông tin về từng sản phẩm gồm: hình, giá, giới thiệu ngắn, nhóm sản phẩm, giá sàn, thời gian kết thúc đấu giá, giá hiện tại, điều khoản khác liên quan đến việc bán món hàng + Thông tin giới thiệu, hướng dẫn: gồm những thông tin như: giới thiệu chủ sở hữu website, chính sách mua-bán, quy định tham gia đấu giá, quy định giao hàng, trả lại hàng, hướng dẫn cách tìm kiếm hàng hóa v.v

+ Công cụ rao bán, công cụ chọn mua, công cụ hỗ trợ thanh toán, công cụ tìm kiếm hàng hóa

+ Thành viên: để lưu thông tin thành viên tham gia mua, bán, đấu giá, phục vụ các mục tiêu: Xác nhận tư cách tham gia, Lưu thông tin lịch sử tham gia mua, bán, đấu giá, Phục vụ việc quản lý mối quan hệ khách hàng giữa thành viên và website

34

Hình 3- 2 Trang web bán hàng trực tuyến

- Sàn giao dịch B2B: Với mô hình sàn giao dịch B2B, website gồm các phần chính:

+ Thông tin hàng hóa: là cơ sở dữ liệu phân loại nhiều nhóm sản phẩm Thông tin về từng sản phẩm gồm: hình, giá, giới thiệu ngắn, nhóm sản phẩm, nhà sản xuất + Danh mục thông tin về doanh nghiệp: phân loại theo ngành nghề, theo quốc gia, địa phương, theo nhu cầu mua – bán – tìm đối tác

+ Thông tin chào hàng (chào mua, chào bán): như rao vặt, phục vụ nhu cầu tìm kiếm đối tác của các doanh nghiệp

+ Thông tin giới thiệu, hướng dẫn: gồm những thông tin như: giới thiệu chủ sở hữu website, chính sách mua-bán, quy định tham gia giới thiệu trên website, hướng dẫn cách sử dụng website v.v

+ Những công cụ hỗ trợ như: đăng tải thông tin, tìm kiếm thông tin, hỏi thông tin, nhận bản tin định kỳ

+ Thành viên: lưu thông tin thành viên tham gia phục vụ các mục tiêu: xác nhận

tư cách tham gia; lưu thông tin lịch sử tham gia tạo sự tiện lợi cho thành viên khi cần truy xuất lịch sử tham gia; và phục vụ việc quản lý mối quan hệ khách hàng giữa thành viên và website

Hình 3- 3 Trang web mô hình B2B

35

- Cổng thông tin (Portal): Với mô hình cổng thông tin, website gồm các phần chính sau:

+ Phân loại thông tin: là cơ sở dữ liệu phân loại nhiều nhóm thông tin Thông tin

về từng “thông tin” gồm: địa chỉ website, giới thiệu ngắn về website, tựa đề dành cho website

+ Chức năng tìm kiếm thông tin

+ Chức năng gửi email cho bạn bè để giới thiệu trang web đang xem

Hình 3- 4 Trang web cổng thông tin điện tử tỉnh Nam Định

- Website thông tin phục vụ việc quảng bá, quảng cáo:

+ Với website thông tin, phần chính là cơ sở dữ liệu các thông tin, được phân chia theo từng thể loại Phần phụ là những thông tin quảng cáo (banner - cột dọc bên phải trang web) và thông tin liên hệ với chủ sở hữu website khi có nhu cầu quảng cáo Điển hình là http://www.vnexpress.net/

+ So với các website thông tin dạng này thì http://www.vnexpress.net/ còn thiếu một chức năng cho phép mọi người tham gia gửi bài viết Bài viết đạt chất lượng sẽ được VNExpress.Net đăng tải, có thể có hoặc không có nhuận bút, phục vụ hai điều:

có thêm nhiều bài viết phong phú, khách quan; và tạo điều kiện cho người viết chuyên nghiệp hoặc không chuyên tham gia đăng bài Đây là mô hình các website tương tự trên thế giới đang thực hiện

36

Điểm mạnh của NotePad++ so với các trình soạn thảo đơn giản được cung cấp sẵn từ Windows như NotePad hay WordPad…là hỗ trợ điểm sáng, tô màu các cấu trúc ngữ pháp của 48 ngôn ngữ lập trình, kịch bản và ngôn ngữ đánh dấu Đồng thời người dùng cũng có thể tự tạo một cấu trúc cú pháp bằng tiện tích tích hợp sẵn User Language Define System

Hình 3- 5 Màn hình làm việc của NotePade++

Nhược điểm chính của NotePad++ là không hỗ trợ nhà lập trình trong việc thiết

kế các giao diện của các ứng dụng phần mềm

2.4.1.2 Microsoft FrontPage

Microsoft FrontPage (Microsoft Office FrontPage) là chương trình tạo web bán chuyên nghiệp, nó nằm chung với các chương trình Microsoft Word, Microsoft Excel, Microsoft PowerPoint, tạo nên bộ chương trình văn phòng Microsoft Office Trong các phiên bản trước đây (Microsoft Office 97, 2000, XP) bộ Microsoft Office có 6 chương trình và tất cả nằm gọn trong 1 bộ cài Tới phiên bản 2003, bộ Microsoft Office trở lên khổng lồ với 10 chương trình và hãng Microsoft đã tách FrontPage ra thành 1 bộ cài độc lập

37

Hình 3- 6 Màn hình làm việc chính của Microsoft FrontPage

Một số tính năng trong phiên bản cuối cùng của FrontPage bao gồm:

- FrontPage 2003 có thêm tùy chọn mới “Split” để người lập trình xem mã trong Code View và một tùy chọn “Preview” để xem trước thiết kế

- Dynamic Web Templates (DWT) đã được bao gồm cho lần đầu tiên trong FrontPage 2003 cho phép người dùng tạo ra một mẫu đơn có thể được sử dụng trên nhiều trang và thậm chí toàn bộ trang web

- Interactive Buttons cung cấp cho người dùng một cách dễ dàng mới để tạo ra đồ họa web để điều hướng và các liên kết, loại bỏ sự cần thiết của một gói phần mềm chỉnh sửa ảnh phức tạp như Adobe Photoshop

- Kiểm tra khả năng truy cập cho người dùng khả năng để kiểm tra xem mã nguồn của họ là tiêu chuẩn phù hợp và trang web của họ là dễ dàng tiếp cận cho người khuyết tật An tối ưu hóa HTML được bao gồm để hỗ trợ trong việc tối ưu hóa code để làm cho nó rõ ràng và nhanh hơn để xử lý

- Intellisense, mà là một hình thức gợi ý, là một tính năng mới quan trọng trong FrontPage 2003 mà hỗ trợ người dùng trong khi gõ trong Code View Khi làm việc trong Code View, Intellisense sẽ gợi ý thẻ và / hoặc tài sản cho mã mà người dùng đang bước vào mà làm giảm đáng kể thời gian để viết mã Quick Tag Editor cho người dùng thẻ hiện đang trong khi chỉnh sửa trong Design View Điều này cũng bao gồm các tùy chọn để chỉnh sửa các thẻ cụ thể tài sản từ bên trong Tag Editor

- Đoạn mã cho người sử dụng lợi thế để tạo ra các đoạn của tác phẩm của họ thường được sử dụng mã cho phép họ lưu trữ nó để truy cập dễ dàng bất cứ khi nào nó

là cần thiết tiếp theo

- FrontPage 2003 bao gồm hỗ trợ cho các lập trình ASP.NET một server-side ngôn ngữ kịch bản cho biết thêm rằng các tương tác vào các trang web và các trang Web

- FrontPage 2003 được VBA hỗ trợ trong lập trình