Giáo trình Thiết kế website nghề Thiết kế đồ hoạ cung cấp cho người học những kiến thức như: Tổng quan về WWW – Ngôn ngữ HTML; Thiết kế web tĩnh; Thiết kế web động. Mời các bạn cùng tham khảo!
UỶ BAN NHÂN DÂN TỈNH ĐỒNG THÁP TRƯỜNG CAO ĐẲNG NGHỀ ĐỒNG THÁP GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ WEBSITE NGÀNH, NGHỀ: THIẾT KẾ ĐỒ HỌA TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định Số: /QĐ-CĐCĐ-ĐT ngày tháng Hiệu trưởng Trường Cao đẳng nghề Đồng Tháp) Đồng Tháp, năm 2017 năm 2017 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm Bài 1: Tổng quan WWW – Ngôn ngữ HTML **)0(** Lịch sử WWW World Wide Web, gọi tắt Web WWW, mạng lưới tồn cầu khơng gian thơng tin tồn cầu mà người truy nhập (đọc viết) qua máy tính nối với mạng Internet Thuật ngữ thường hiểu nhầm từ đồng nghĩa với thuật ngữ Internet Nhưng Web thực dịch vụ chạy Internet, chẳng hạn dịch vụ thư điện tử Web phát minh đưa vào sử dụng vào khoảng năm 1990, 1991 viện sĩViện Hàn lâm AnhTim Berners-Lee Robert Cailliau (Bỉ) CERN, Geneva, Switzerland Các tài liệu World Wide Web lưu trữ hệ thống siêu văn (hypertext), đặt máy tính mạng Internet Người dùng phải sử dụng chương trình gọi trình duyệt web (web browser) để xem siêu văn Chương trình nhận thông tin (documents) ô địa (address) người sử dụng yêu cầu (thông tin ô địa gọi URL (Uniform Resource Locator)), sau chương trình tự động gửi thơng tin đến máy chủ chứa trang web (web server) hiển thị trình duyệt người xem Người dùng theo liên kết siêu văn (hyperlink) trang web để nối với tài liệu khác gửi thông tin phản hồi theo máy chủ trình tương tác Hoạt động truy tìm theo siêu liên kết thường gọi duyệt Web Nhập môn Ngôn ngữ HTML: 2.1 Giới thiệu ngôn ngữ HTML: Sau lóng ngóng với vài trang Web du lịch Internet, bạn nghĩ phải có gói phần mềm tinh vi để thu tất hiệu ứng trang trí đầy quyến rũ Mặc dù có số cơng cụ dành cho ngƣời say mê HTML thực sự, bạn dùng trình soạn thảo văn Notepad Windows để tạo trang Web hấp dẫn Sự thật hầu hết trang khơng có khác ngồi văn đƣợc gia cố thêm phần tử HTML xếp đặt quy cách Để hiểu cách hoạt động chúng, bạn phải xem xét từ cụm từ Ngôn ngữ đánh dấu siêu văn xem chúng có ý nghĩa gì: Siêu văn (HyperText) Như bạn biết, liên kết siêu văn từ hay câu trang Web dùng để đến trang Web khác Khi nhấn chuột lên liên kết này, trình duyệt bạn (như Netscape Navigator Internet Explorer) đưa bạn tức khắc đến trang Web mà không cần hỏi han Vì liên kết siêu văn thật tính đặc trưng World Wide Web, trang Web thường biết tài liệu siêu văn Cho nên HTML có từ siêu văn tên nó, bạn dùng để tạo nên tài liệu siêu văn Đánh dấu (Markup) Có từ điển định nghĩa markup dẫn chi tiết kiểu dáng ghi viết tay để xếp chữ in Trong lĩnh vực này, viết lại định nghĩa sau: lệnh chi tiết kiểu dáng đánh vào tài liệu văn để đưa lên WWW Đó HTML theo định nghĩa tóm tắt Nó gồm vài mã đơn giản để tạo văn nét đậm nghiêng bảng liệt kê dấu chấm đầu dịng, hình đồ hoạ chèn thêm vào, với xác định mối liên kết siêu văn Bạn đánh mã vào chỗ thích hợp tài liệu văn gốc, trình duyệt Web thực việc dịch chúng Ngơn ngữ (Language) Đây từ dễ nhầm lẫn cụm từ Nhiều người diễn giải HTML nhƣ ngơn ngữ lập trình HTML khơng có liên quan đến việc lập trình máy tính HTML gọi ngơn ngữ gồm tập hợp nhỏ nhóm hai đến ba chữ từ mà bạn dùng để quy định kiểu dáng nét đậm nghiêng 2.2 Cú pháp thẻ ngôn ngữ HTML Bây sâu vào khái niệm đằng sau HTML, xem xét số ví dụ mẫu Để bắt đầu, tất công việc phải làm khởi động trình soạn thảo văn u thích bạn bảo đảm có tài liệu rỗng hiển thị Trình xử lý văn bạn phải có khả lưu tập tin dạng văn Notepad làm việc cách tự động; trình xử lý văn khác, Word WordPerfect, có tuỳ chọn văn hộp thoại Save As Hãy tham khảo tài liệu thuyết minh trình xử lý văn Đồng thời bạn phải lưu trang với đuôi mở rộng HTM HTML, Homepage.htm chẳng hạn Tạo lập trang Web vấn đề đơn giản, cần đánh văn bạn vào chèn thêm ký hiệu đánh dấu, gọi thẻ có dạng sau: văn chịu tác động Phần thẻ mã (thường có hai chữ) xác định hiệu ứng mà bạn yêu cầu Ví dụ, cho thẻ nét đậm Cho nên bạn muốn câu ACME Coyote Suppplies xuất theo kiểu chữ đậm (bold), bạn phải đưa dòng sau vào tài liệu mình: ACME Coyote Supplies Thẻ báo cho trình duyệt (browser) hiển thị tất phần văn phông chữ đậm, liên tục thẻ Dấu gạch chéo (/) xác định thẻ kết thúc, báo cho trình duyệt ngưng hiệu ứng HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn (paragraph), tiêu đề, tên trang, liệt kê, liên kết, nhiều thứ 2.3 Cấu trúc tổng thể trang HTML Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa cần thiết, tất có cấu trúc sở, nên đa số trình duyệt chạy hầu hết kiểu máy tính hiển thị thành cơng hầu hết trang Web Các tập tin HTML bắt đầu thẻ Thẻ khơng làm khác ngồi nhiệm vụ báo cho trình duyệt Web biết đọc tài liệu có chứa mã HTML Tương tự, dịng cuối tài liệu bạn ln ln thẻ , tương đương Hết Chi tiết catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu thân Phần đầu giống lời giới thiệu cho trang Các trình duyệt Web dùng phần đầu để thu nhặt loại thông tin khác trang Để xác định phần đầu, bạn đưa thêm thẻ thẻ vào sau thẻ Mặc dù bạn đặt số chi tiết bên phạm vi phần đầu này, nhƣng phổ biến tên trang Nếu có xem trang browser, tên trang xuất dải tên cửa sổ browser Để xác định tên trang, bạn đặt đoạn văn tên thẻ Ví dụ bạn muốn tên trang My Home Sweet Home Page, bạn đưa vào sau: My Home Sweet Home Page Phần thân nơi bạn nhập vào văn xuất trang Web lẫn thẻ khác quy định dáng vẻ trang Để xác định phần thân, bạn đặt thẻ sau phần đầu (dưới ) Trang văn trang: Như trình bày trên, bạn bổ sung văn trang Web cách đánh vào thẻ Tuy nhiên, cần nhớ bắt đầu đoạn văn (chương, mục) mà ấn phím Enter Bạn phải dùng thẻ để báo cho browser biết bạn muốn chuyển vào đoạn văn mới: My Home Sweet Home Page Văn xuất phần thân trang WebVăn xuất đoạn văn HTML bao gồm nhiều thẻ làm đẹp cho văn trang Bạn thấy trên, từ câu thành dạng chữ đậm nhƣ đặt vào thẻ Bạn biểu văn theo kiểu chữ nghiêng cách bao chúng lại thẻ , làm cho từ xuất dạng cách đơn với thẻ Giống chương sách, nội dung nhiều trang Web chia thành đoạn Để giúp phân cách đoạn làm cho dễ đọc hơn, bạn sử dụng tiêu đề Lý tƣởng nhất, tiêu đề phải có tác dụng đề mục nhỏ, thể ý tưởng tóm tắt đoạn văn Để làm cho đề mục bật, HTML có loại thẻ tiêu đề để hiển thị văn theo phông chữ đậm với nhiều cỡ chữ khác nhau, từ ứng với phông lớn đến ứng với phông nhỏ Bảng biểu(Table) trang khung(Frame) 4.1 Bảng biểu Bảng HTML xác định thẻ Một bảng chia nhiều dòng ( với thẻ ) dòng chia nhiều cột ( với thẻ ) td viết tắt "table data" , chứa nội dung liệu Một thẻ chứa text, liên kết,ảnh , danh sách , form , bảng khác *Thuộc tính border Nếu bạn khơng sử dụng thuộc tính border , bảng hiển thị khơng có viền Thỉnh thoảng điều hữu ích muốn bảng có viền Để hiển thị bảng có viền ta thêm thuộc tính border Giá trị thuộc tính đo pixels độ dày viền bạn thử giá trị 10,20,50 để thấy khác biệt *Tiêu đề bảng Thông tin tiêu đề bảng xác định thẻ Trình duyệt tự động hiển thị text phần tử có in đậm Ví dụ1: Dòng 1, Cột 1 Dòng 1, Cột 2 Dòng 2, Cột 1 Dòng 2, Cột 2 Kết quả: Dòng 1, Cột Dòng 1, Cột Dòng 2, Cột Dòng 2, Cột 4.2 Trang khung frame HTML có thẻ trình bày cho phép chia vùng hiển thị cửa sổ trình duyệt thành nhiều khung, khung cửa sổ độc lập, hiển thị tài liệu HTML khác Khung cho phép người thiết kế hiển thị đồng nhiều tài liệu HTML khác để tiện theo d i, so sánh Ví dụ, khung bên trái hiển thị nút bấm, khung bên phải hiển thị tài liệu tương ứng Multimedia trang Web 5.1 Nghe nhạc, âm : Trong tình đặc biệt, muốn làm cho trang web sinh động hơn, ví dụ ngồi việc cung cấp thơng tin dạng ngơn ngữ, website cịn có âm Ở trường hợp này, ứng dụng âm cho nhiều mục đích khác nhau: + Giải trí: nghe nhạc, đọc truyện,… + Học tập: hướng dẫn audio, luyện kỹ listening tiếng anh,… Ví dụ2: 5.2 Video: Cũng giống audio tag, video tag HTML tag hỗ trợ từ HTML5 phép nhúng video clip vào trang web Ví dụ3: Bài 2: Thiết Kế Web Tĩnh =**= Tổng quan: Website tĩnh thiết kế kỹ thuật HTML (Hypertext Mark-up Language) Chỉ đáp ứng việc giới thiệu thông tin cho người dùng xem, cao sử dụng Form trực tuyến (Online Form) để thu nhận ý kiến ngườii xem gửi e-mail định danh trước Website tĩnh trang bị kỹ thuật Java Script, Flash Macromedia hay Animation Gif, giúp cho giao diện trang web thêm sống động hấp dẫn Website động (Dynamic Web Pages) thường thiết kế kỹ thuật ASP (Active Server Pages) chạy Windows hay PHP (PHP Hypertext Preprocessor) với Linux) Động xin đừng hiểu hình ảnh sống động thay đổi hình ảnh đoạn hoạt hình (animation) Ở động giúp người xem tương tác với website Website động cần phải có sở liệu tùy theo mục đích website, có thành phần như: Inner search: Phần tìm kiếm giúp người xem nhanh chóng tìm đến trang web website có chứa vấn đề mà họ quan tâm Member account: tài khoản dành cho Hội Viên Với Username Password, Hội Viên truy cập (log-in) vào khu vực hạn chế (Member Area) có nhiều quyền lợi hẳn so với khu vực công cộng (Public Area) Việc cung cấp tài khoản giúp cho người chủ website kinh doanh website cách thu phí Hội Viên (Member Fee) phân cấp quản lý nội từ xa Shopping Cart: Thành phần giúp cho việc mua bán mạng (online trading) thực thông qua giả định việc chọn bỏ hàng chọn vào giỏ mua hàng Các thơng số liên quan đến hàng cập nhật vào tài khoản người Mua, giúp cho việc xác định cơng nợ tốn Tham khảo www.vnplas.com Online Payment: Thành phần giúp cho việc buôn bán mạng khả thi: Tiền trao cho Bên Bán hàng chuyển cho Bên Mua Tham khảo www.vnplas.com Forum: Diễn đàn trực tuyến: Một khu vực hạn chế giúp cho đối tượng dùng site liên hệ trực tiếp với thời gian thực (Real Time) Khác với liên lạc e-mail có khoảng thời gian chậm trễ (Delay) người gửi mail người nhận mail không trực tuyến thời điểm Tham khảo http://www.vnplas.com/forum Do tính vượt trội so với website tĩnh, website động dùng vào mục đích: Kinh doanh Thẻ Hội Viên (Membership): Chủ website thu phí Hội Viên cấp cho Hội viên account để truy cập vào khu vực hạn chế Chỉ có Hội Viên đựơc vào khu vực sử dụng thông tin Tham khảo www.camnangthuky.com Thương mại Điện Tử (E-Commerce): hay cịn gọi Bán hàng qua mạng Sơng Mây cung cấp giải pháp khác tùy thuộc vào đối tượng người mua hình thức: C.O.D, thẻ tín dụng VASC Payment Quản lý từ xa (Remote Management): Bằng việc phân quyền khu vực hạn chế cho người dùng, website trở thành cơng cụ quản lý doanh nghiệp lý tưởng, đặc biệt công ty đa quốc gia có chi nhánh văn phòng đại diện rải rác khắp nơi giới, đơn giản hơn, cho cơng ty có nhiều chi nhánh, cửa hàng, văn phòng nước Công cụ cho nguời quản lý web: với website động, việc cập nhật thơng tin cho website khơng cịn vấn đề nhà chuyên nghiệp Người quản lý website (Site Admin) tự cập nhật website mà khơng cần có kiến thức chun sâu thiết kế web Việc dễ dàng giúp cho website ln chăm sóc trở nên hiệu hẳn so với webiste tĩnh, vốn đòi hỏi người quản lý site có trình độ kỹ thuật Diễn đàn trực tuyến: với web động, diễn đàn tạo cho website dáng vẻ chuyên nghiệp tạo cho khách hàng niềm tin tưởng vào công ty Quý Vị Tuy nhiên việc quản lý diễn đàn phải coi trọng, tránh bị lạm dụng vào mục đích phi pháp Trang văn trang (HTML): 2.1 Cấu trúc trang web tĩnh: … 2.2 Một số thẻ HTML thông dụng: a/ Thẻ : Trang web tĩnh bắt đầu : kết thúc bằng: b/ Thẻ : Phần đầu trang web c/ Thẻ : Đặt tiêu đề cho trang web (thẻ nằm d/ Thẻ : Chứa nội dung trang web Nội dung trang web e/ Chú thích HTML: dùng dấu Ví dụ1: Tạo trang web với tiêu đề là: “Giới thiệu” in dòng chữ: “Chào bạn !” dạng chữ đậm nghiêng Giới thiệu Chào bạn ! f/ Các thẻ định dạng văn Tên thẻ Giải thích Ví dụ … Dạng chữ đậm Hello world ! … Dạng chữ nghiêng Hello world ! … Dạng chữ gạch chân Hello world ! … Dạng chữ gạch Hello world! Color: định màu …… Face: Chỉ định font chữ Size: kích thước Hello world … Tạo số X2 X2 … Tạo số H2O H2O Xuống dòng
……
Tạo đoạn vănAlign: định hình thức canh Hello world !
lề Width: độ dài (tính pixel) , , , , Tiêu đề (Heading) , Tạo siêu liên kết Đường kẻ ngang(align, width, size)- Danh sách có thứ tự
- mot
- hai
- mot
- hai
- Danh sách tự định nghĩa mot Để tạo phân trang định thuộc tính AllowPaging=”true” cho điều khiển DetailView Với thuộc tính định dạng thuộc nhóm thuộc tính: Pagersettings d Minh họa: Trong ví dụ bạn liên kết liệu với Table Khachhang đưa vào BoundField CheckBoxField, điền vào liệu với thuộc tính DataField thiết đặt cho tiêu dề với HeaderText Tạo phân trang định dạng trình bày góc bên phải Kết xuất chương trình 2.15.2 DetailView a Hiển thị liệu với FormView FormView đưa hiển thị liệu với điều khiển tùy biến để hiển thị liệu ghi Ví dụ: Trang XemthongtinNXB.aspx b Trình bày liệu sử dụng Edit Template FormView hỗ trợ trình bày liệu dạng tùy biến cho tất Field DataList o Tạo FormView vào trang lien kết liệu o Tại cửa sổ thiết kế chọn Edit Tempalte từ cửa sổ FormView Task o Thiết kế trình bày với Control điều khiển tương tự thiết kế DataList với điều khiển tùy biến (tạo table dóng cột) hình c Xử lý phân trang với điều khiển DetailView Để tạo phân trang định thuộc tính AllowPaging=”true” cho điều khiển DetailView Với thuộc tính định dạng thuộc nhóm thuộc tính: Pagersettings d Minh họa: Trong ví dụ bạn liên kết liệu với Table NhaXuatBan đưa vào Label, điền vào liệu với thuộc tính Text cho File tương tứng thiết đặt cho tiêu dề với HeaderText Tạo phân trang định dạng trình bày phía trang Kết xuất chương trình 2.16 Điều khiển kiểm tra liệu Như bạn biết, PostBack Server, trang Web ln kiểm tra tính hợp lệdữ liệu (nếu có u cầu thiết kế) Nếu liệu khơng hợp lệ (bỏ trống, vi phạm miền giá trị, mật nhập lại không đúng, …), trang web PostBack Server a1 Điều khiển Required Field Validator Điều khiển dùng để kiểm tra giá trị điều khiển phải nhập Sử dụng điều khiển để kiểm tra ràng buộc liệu khác rỗng (bắt buộc nhập) Thuộc tính tính Giá trị mặc định thuộc tính chuỗi rỗng a2 Điều khiển Compare Validator Điều khiển dùng để so sánh giá trị điều khiển với giá trị điều khiển khác giá trị xác định trước Thơng qua thuộc tính Operator, thực phép so sánh như: =, , >, >=, = o LessThan: < o LessThanEqual:
