Giáo trình Thiết kế website (Nghề: Thiết kế đồ hoạ - Cao đẳng) - Trường Cao đẳng nghề Đồng Tháp

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!

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 Web
Vă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ăn
Align: đị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

circle, Danh sách khơng có thứ tự
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:

Giáo trình Thiết kế website (Nghề: Thiết kế đồ hoạ - Cao đẳng) - Trường Cao đẳng nghề Đồng Tháp

Checkbox, RadioButton Các thuộc tính

Điều khiển Panel và PlaceHolder