Bài giảng chương 3: Một số công cụ thiết kế website

Chương 3. MỘT SỐ CÔNG CỤ THIẾT KẾ WEBSITE Nguyễn Quang Trung Bộ môn CNTT TMĐT – Khoa TMĐT – Trường ĐH Thương Mại Email: trungnq@vcu.edu.vn 9/8/2010 Công cụ thiết kếWeb - HTML 2 Nội dung • Ngôn ngữ ñánh dấu siêu văn bản HTML • PHP, Javascript • Một số công cụ hỗ trợ thiết kế website 9/8/2010 Công cụ thiết kếWeb - HTML 3 3.1. Ngôn ngữ HTML 3.1.1. Tổng quan về HTML 3.1.2. Các thẻ của HTML 3.1.3. Sử dụng Frontpage thiết kế web tĩnh 3.1.4. Định dạng website với CSS 9/8/2010 Công cụ thiết kếWeb - HTML 4 3.1.1. Tổng quan về HTML • HTML=HyperText Markup Language – Ngôn ngữ ñánh dấu siêu văn bản – Ngôn ngữ ñể viết các trang web. • Do Tim Berner Lee phát minh và ñược W3C (World Wide Web Consortium) ñưa thành chuẩn năm 1994 • Các trang Web ñầy sinh ñộng mà bạn thấy trên WWW là các trang siêu văn bản ñược viết bằng HTML • HTML cho phép bạn tạo ra các trang phối hợp hài hoà giữa văn bản thông thường với hình ảnh, âm thanh, video, các mối liên kết ñến các trang siêu văn bản khác 9/8/2010 Công cụ thiết kếWeb - HTML 5 3.1.1. Tổng quan về HTML • HTML là ngôn ngữ của các thẻ ñánh dấu - Tag. Các thẻ này xác ñịnh cách thức trình bày ñoạn văn bản tương ứng trên màn hình. • HTML không phân biệt chữ hoa, chữ thường • Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết sai cú pháp chỉ dẫn ñến kết quả hiển thị không ñúng với dự ñịnh. 9/8/2010 Công cụ thiết kếWeb - HTML 6 HyperText Là các văn bản thông minh biết cách tìm kiếm và cung cấp cho người ñọc các tài liệu khác có liên quan Các thông tin mà siêu văn bản hỗ trợ rất ña dạng: văn bản, hình ảnh, âm thanh,.. Làm thế nào ñể tra cứu, tìm kiếm thông tin ña phương tiện trên mạng thông tin rộng lớn nhất toàn cầu??? 3 3.1.1. Tổng quan về HTML 9/8/2010 Công cụ thiết kếWeb - HTML 7 HTML là một ngôn ngữ tương tự như các ngôn ngữ lập trình Nó có cú pháp chặt chẽ ñể viết các lệnh thực hiện việc trình diễn văn bản. Các từ khoá có ý nghĩa xác ñịnh ñược cộng ñồng Internet thừa nhận và sử dụng. Ví dụ b = bold, br=break, ... Language 3.1.1. Tổng quan về HTML 9/8/2010 Công cụ thiết kếWeb - HTML 8 HTML cho phép liên kết nhiều trang văn bản rải rác khắp nơi trên Internet. HTML dựa trên nền tảng là một văn bản. Các thành phần khác như hình ảnh, âm thanh, video .. ñều phải "cắm neo" vào một ñoạn văn bản nào ñó. Text? Hyper? Next 3.1.1. Tổng quan về HTML 9/8/2010 Công cụ thiết kếWeb - HTML 9 Trang mã nguồn HTML và trang Web? + Trang mã nguồn HTML là một tệp văn bản bình thường gồm các kí tự ASCII, có thể ñược tạo ra bằng bất cứ bộ soạn thảo thông thường nào. + Theo quy ước, tất cả các tệp mã nguồn của trang siêu văn bản phải có ñuôi là .html hoặc .htm Soạn thảo siêu văn bản 9/8/2010 Công cụ thiết kếWeb - HTML 10 + Nói soạn siêu văn bản tức là tạo ra trang mã nguồn ñúng quy ñịnh ñể bộ duyệt hiểu ñược và hiển thị ñúng. + Khi dùng bộ duyệt - browser ñọc nội dung trang mã nguồn và hiển thị nó lên màn hình máy tính thì ta thường gọi là trang Web. + Vậy trang web không tồn tại trên ñĩa cứng của máy tính. Nó là cái thể hiện của trang mã nguồn qua xử lí của bộ duyệt. Soạn thảo siêu văn bản 9/8/2010 Công cụ thiết kếWeb - HTML 11 3.1.2. Các thẻ HTML • Các thẻ - Tag dùng ñể báo cho bộ duyệt_brower cách thức trình bày văn bản trên màn hình hoặc dùng ñể chèn một mối liên kết ñến các trang khác... • Mỗi thẻ gồm một từ khoá - KEYWORD với cú pháp Hầu hết các lệnh thể hiện bằng một cặp hai thẻ : thẻ mở và thẻ ñóng 9/8/2010 Công cụ thiết kếWeb - HTML 12 3.1.2. Các thẻ HTML • Cấu trúc chung của một siêu văn bản Tiêu ñề trang ... Các khai báo khác ở ñây ... Nội dung cần thể hiện ở ñây 9/8/2010 Công cụ thiết kếWeb - HTML 13 3.1.2. Các thẻ HTML • Các lớp thẻ – Cấu trúc (structure) – Định dạng (formatting) – Ảnh (image) – Danh sách (list) – Bảng (table) – Form – Khung hiển thị (frame) 9/8/2010 Công cụ thiết kếWeb - HTML 14 Lớp thẻ cấu trúc • Là các thẻ xác ñịnh các thành phần trong cấu trúc của một siêu văn bản: – ... – ... , ... – ... • Một số thuộc tính của thẻ … – Background: Ảnh nền, ñược hiển thị theo kiểu xếp gạch – Bgcolor, text, link, alink, vlink: Tương ứng là các thuộc tính quy ñịnh màu nền, màu văn bản, màu siêu liên kết, màu liên kết ñang hoạt ñộng, màu liên kết ñã thực sự ñược duyệt. – Leftmargin, topmargin: Căn lề trái, lề trên của tài liệu theo pixel 9/8/2010 Công cụ thiết kếWeb - HTML 15 Lớp thẻ ñịnh dạng • Các thẻ ñịnh dạng vật lý như – ..., ... , ... , ... , ... • Các thẻ ñịnh dạng logic như – ... – ... , ... – ... • Các thẻ ñịnh dạng khối như – .. 9/8/2010 Công cụ thiết kếWeb - HTML 16 Các thẻ trình bày trang trong HTML + Tạo dòng trắng: , + Xuống dòng: + Căn chính giữa: … + Đường kẻ ngang: ... , ,.. 9/8/2010 Công cụ thiết kếWeb - HTML 17 Superscript text ñược tạo ra bằng cặp thẻ : ... Subscript text ñược tạo bằng cặp thẻ : ... Ví dụ: Số mũ và chỉ số 9/8/2010 Công cụ thiết kếWeb - HTML 18 Heading • Thẻ - Hn, n ∈ (1.. 6) • Thuộc tính - Align - Title Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 9/8/2010 Công cụ thiết kếWeb - HTML 19 Đầu ñề mức 1 Đầu ñề mức 2 Đầu ñềmức Đầu ñề mức Đầu ñề mức Đầu ñềmức Đầu ñề mức Heading Mức thấp nhất...Đầu ñề mức 6 ...Đầu ñề mức 5 ...Đầu ñề mức 4 ...Đầu ñề mức 3 ...Đầu ñề mức 2 Mức cao nhất...Đầu ñề mức 1 Chú thíchThẻTên 9/8/2010 Công cụ thiết kếWeb - HTML 20 Align • Thẻ - div - center • Thuộc tính - align Left Right Center Justify DIV Center Center 9/8/2010 Công cụ thiết kếWeb - HTML 21 Font & Color • Thẻ - font • Thuộc tính - face - size - color - style Arial Size 1 Size 7 Red Blue 72pt 9/8/2010 Công cụ thiết kếWeb - HTML 22 Link & URL & Bookmark • Thẻ - a • Thuộc tính - href - title - name + WEB Resource + File System + Bookmark 9/8/2010 Công cụ thiết kếWeb - HTML 23 Lớp thẻ âm thanh, hiện ảnh • Chèn hình ảnh vào trang web – thẻ không có thẻ kết thúc, gồm các thuộc tính: • Src: Đường dẫn ñến file ảnh • Alt: Đoạn văn bản hiển thị khi không có ảnh • Width, height: Độ rộng, chiều cao của ảnh khi hiển thị • Border: Độ ñậm của ñường viền xung quanh ảnh • Vspace, hspace: Khoảng cách theo chiều dọc và theo chiều ngang của ảnh với các phần tử khác • Lowsrc: Đường dẫn ñến file ảnh thứ 2’ (cho phép hiển thị 2 ảnh trong 1 không gian) 9/8/2010 Công cụ thiết kếWeb - HTML 24 Lớp thẻ âm thanh, hiện ảnh (tt) • Chèn hình ảnh vào trang web – thẻ không có thẻ kết thúc, gồm các thuộc tính: • align = ‘left | right’: căn lề trái | phải • align = ‘top | texttop’: phần trên của ảnh ở vị trí cao nhất của phần tử | phần tử text trên nó • align = ‘middle | absmiddle’: ñường căn giữa của ảnh trùng với ñường cơ sở | ñường căn giữa của dòng hiện thời • align = ‘baseline’: biên dưới của ảnh trùng với ñường cơ sở của dòng hiện thời • align = ‘bottom | absbottom’: biên dưới của ảnh trùng với ñường cơ sở | biên dưới của dòng hiện thời 9/8/2010 Công cụ thiết kếWeb - HTML 25 Lớp thẻ âm thanh, hiện ảnh (tt) • Chèn file âm thanh – thẻ không có thẻ kết thúc, gồm các thuộc tính: • Src: Đường dẫn ñến file cần chạy • Width, height: Kích thước khung ñiều khiển • Autoplay: Tự ñộng bật hay không • Controller: Có hiện thị bảng ñiều khiển không • Loop: Có tự ñộng lặp lại khi hết không 9/8/2010 Công cụ thiết kếWeb - HTML 26 Lớp thẻ tạo danh sách • Gồm các loại danh sách – ... : Danh sách thư mục – ... : Danh sách ñược ñịnh nghĩa – ... : Danh sách thực ñơn – ... : Danh sách có thứ tự – ... : Danh sách không có thứ tự • Các loại danh sách có thể lồng nhau 9/8/2010 Công cụ thiết kếWeb - HTML 27 • Ds không thứ tự - ul (unordered lists) - li • Ds có thứ tự - ol (ordered lists) - li • Thuộc tính - type • Ds các ñịnh nghĩa - dl (definition lists) - dt (title) - dd (detail) DISC | CIRCLE | SQUARE A | a | I | i | 1 List 9/8/2010 Công cụ thiết kếWeb - HTML 28 Đây là một danh sách không có thứ tự ! •Đây •là •một •danh •sách •không có thứ tự ! Unordered Lists Thẻ UL ñầy ñủ …… Trong ñó “Kiểu chấm tròn” bao gồm: “Disc” : Chấm tròn ñậm “Circle” : Chấm tròn rỗng “Square” : Chấm vuông ñậm 9/8/2010 Công cụ thiết kếWeb - HTML 29 1. Đây 2. là 3. một 4. danh 5. sách 6. có thứ tự ! Ordered Lists Thẻ OL ñầy ñủ …… Trong ñó: X là Kiểu ký hiệu ñược dùng N là giá trị bắt ñầu của danh sách Đây là một danh sách có thứ tự ! 9/8/2010 Công cụ thiết kếWeb - HTML 30 Môc 1: Chó thÝch râ môc 1 Môc 2: Chó thÝch râ môc 2 Môc 3: Chó thÝch râ môc 3 Mục 1: Chú thích rõ mục 1 Mục 2: Chú thích rõ mục 2 Mục 3: Chú thích rõ mục 3 Danh sách ñịnh nghĩa Defined Lists 9/8/2010 Công cụ thiết kếWeb - HTML 31 Lớp thẻ tạo bảng • Bao gồm các thẻ – ...: Giới hạn bảng – ... : Đặc tả các dòng của bảng – ...: Đặc tả ô dữ liệu của bảng – ...: Đặc tả ô tiêu ñề của bảng – ...: Đặc tả tên bảng 9/8/2010 Công cụ thiết kếWeb - HTML 32 Table 9/8/2010 Công cụ thiết kếWeb - HTML 33 Table • Thẻ - table • Thuộc tính - border - bordercolor - cellspacing - cellpadding - background - bgcolor - width - height - style - align 9/8/2010 Công cụ thiết kếWeb - HTML 34 Table • Thẻ - tr • Thuộc tính - align, valign - width, height - background - bgcolor • Thẻ - td • Thuộc tính - align, valign - width, height - background - bgcolor - colspan - rowspan 9/8/2010 Công cụ thiết kếWeb - HTML 35 ThÎ gièng nh- nh-ng cho ch÷ in ®Ëm vµ c¨n chÝnh gi÷a - (heading). Bắt ®Çu mét « cña b¶ng(B3/4t ®Çu cét trong mét hµng). Bắt ®Çu mét dßng cña b¶ng - table row. TABLE - bắt ®Çu b¶ng. BORDER - ®Æt khung næi 3D xung quanh b¶ng. BGCOLOR - ®Æt mµu nÒn cña b¶ng <TABLE BORDER=n BGCOLOR="#rrggbb“ WIDTH=n% HEIGHT=n%> Mô tảTAG/Attribute Table 9/8/2010 Công cụ thiết kếWeb - HTML 36 ALIGN=CENTER|RIG HT Thuéc tÝnh dïng kÌm bªn trong c¸c thÎ , hay ®Ó c¨n lÒ ch÷ trong mét « cña b¶ng theo chiÒu ngang VALIGN=TOP|BOTTO M Thuéc tÝnh dïng kÌm c¸c thÎ , hay ®Ó c¨n lÒ ch÷ trong « b¶ng theo chiÒu ®øng. WIDTH=n% Thuéc tÝnh dïng kÌm c¸c thÎ hay ®Î ®Æt ®é réng cña « b¶ng . COLSPAN=n Thuéc tÝnh dïng kÌm c¸c thÎ hay ®Ó gi·n mét « theo chiÒu ngang chiÕm nhiÒu cét h¬n c¸c « trªn dßng kh¸c. ROWSPAN=n Thuéc tÝnh dïng kÌm c¸c thÎ hay ®Ó gi·n mét « theo chiÒu ®øng chiÕm nhiÒu dßng h¬n c¸c « ë cét kh¸c KÕt thóc b¶ng Table 9/8/2010 Công cụ thiết kếWeb - HTML 37 Form • Sử dụng ñể chứa mọi ñối tượng khác • Không nhìn thấy khi trang web ñược hiển thị • Quy ñịnh một số thuộc tính quan trọng như method, action. • Thẻ tạo form: … • Có thể có nhiều form trong một tài liệu • Form không ñược lồng nhau 9/8/2010 Công cụ thiết kếWeb - HTML 38 Form • Các thuộc tính: – name=“tên_form”: Không quan trọng lắm – action=“ñịa chỉ nhận dữ liệu”: Nên sử dụng ñường dẫn tương ñối nếu nằm trong cùng 1 web – Enctype: cách thức dữ liệu ñược mã hóa ñể gửi – method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị: • GET (mặc ñịnh) • POST 9/8/2010 Công cụ thiết kếWeb - HTML 39 Các thẻ trong form • – Trường nhập dữ liệu • ... – Danh sách chọn • … – Mục chọn trong danh sách • ... – Trường nhập dữ liệu nhiều dòng 9/8/2010 Công cụ thiết kếWeb - HTML 40 • Là một trường của form cho phép người dùng nhập dữ liệu theo nhiều dạng • Thuộc tính: – Name: Dùng ñể ñịnh danh – Type: Có thể nhận một trong các giá trị sau text|radio|checkbox|password|file|hidden|image|submit|reset|button – Value – Size, maxlength, src, align – Checked 9/8/2010 Công cụ thiết kếWeb - HTML 41 Hộp nhập văn bản 1 dòng (Oneline Textbox) • Sử dụng ñể nhập các văn bản ngắn (trên 1 dòng) hoặc mật khẩu • Thẻ: • Thuộc tính: – name=“tên_ñt”: quan trọng – type=“text”:Ô nhập văn bản thường – type=“password”: ô nhập mật khẩu – value=“giá trị mặc ñịnh” 9/8/2010 Công cụ thiết kếWeb - HTML 42 Checkbox • Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn ñược ñưa ra bằng cách ñánh dấu (“tích”). • Thẻ: : mỗi ô nhập cần 1 thẻ • Thuộc tính: – name=“tên_ñt”: quan trọng – type=“checkbox” – value=“giá trị”: ñây là giá trị chương trình sẽ nhận ñược nếu NSD chọn ô này. – checked: nếu có thì nút này mặc ñịnh ñược chọn 9/8/2010 Công cụ thiết kếWeb - HTML 43 Option Button (Radio Button) • Cho phép chọn một lựa chọn trong một nhóm lựa chọn ñược ñưa ra. • Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này. • Thẻ: : Mỗi ô cần 1 thẻ • Thuộc tính: – name=“tên_ñt”: quan trọng. Các ñối tượng cùng tên thì thuộc cùng nhóm. – type=“radio” – value=“giá trị”: ñây là giá trị chương trình sẽ nhận ñược nếu NSD chọn ô này. – checked: nếu có thì nút này mặc ñịnh ñược chọn 9/8/2010 Công cụ thiết kếWeb - HTML 44 Combo Box (Drop-down menu) • Bao gồm một danh sách có nhiều phần tử. Tại một thời ñiểm chỉ có 1 phần tử ñược chọn • NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên bên phải hộp danh sách. • Thẻ tạo hộp danh sách: Danh sách phần tử • Thuộc tính: – name=“tên_ĐT”: quan trọng • Thẻ tạo 1 phần tử trong danh sách: Tiêu ñề phần tử • Thuộc tính: – value=“giá trị”: giá trị chương trình nhận ñược nếu phần tử ñược chọn – selected: nếu có thì phần tử này mặc ñịnh ñược chọn 9/8/2010 Công cụ thiết kếWeb - HTML 45 Listbox • Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc, có thể lựa chọn nhiều phần tử • Thẻ: … • Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác: – size=“số dòng” – multiple: cho phép lựa chọn nhiều phần tử cùng lúc • Thẻ … tương tự của combo box 9/8/2010 Công cụ thiết kếWeb - HTML 46 Hộp nhập TextArea • Cho phép nhập văn bản dài trên nhiều dòng. • Thẻ: Nội dung mặc ñịnh • Thuộc tính: – name=“tên_ĐT”: quan trọng – rows=“số dòng” – cols=“số cột” rows tính theo số dòng văn bản, cols tính theo số ký tự chuẩn trên dòng. 9/8/2010 Công cụ thiết kếWeb - HTML 47 Nút lệnh • Sử dụng ñể NSD ra lệnh thực hiện công việc. • Trên web có 3 loại nút: – submit: Tự ñộng ra lệnh gửi dữ liệu – reset: ñưa mọi dữ liệu về trạng thái mặc ñịnh – normal: người lập trình tự xử lý • Thẻ: • Thuộc tính: – name=“tên_ĐT”: thường không quan trọng – type=“submit”: nút submit – type=“reset”: nút reset – type=“button”: nút thông thường (normal), it sử dụng. – value=“tiêu ñề nút” 9/8/2010 Công cụ thiết kếWeb - HTML 48 - Dùng ñể tương tác, gửi thông tin từ Form ñến WebServer - Có 2 cách dùng: + Click nút lệnh thì submit tới URL ñược chỉ ra trong form + Click nút lệnh thì gọi ñến một hàm khác <Input type=“Button” name=“cmdName” value=“Giá trị” Onclick=“Tên_hàm”> Nút lệnh 9/8/2010 Công cụ thiết kếWeb - HTML 49 Đa phương tiện • Âm thanh nền: – Thuộc tính: • src=“ñịa chỉ file âm thanh” • loop=“n”: số lần lặp. -1: mặc ñịnh: mãi mãi. 9/8/2010 Công cụ thiết kếWeb - HTML 50 Đa phương tiện (tt) • Video trên IE sử dụng Windows Media Player <object classid="clsid:22D6F312-B0F6-11D0-94AB- 0080C74C7E95“ id="MediaPlayer1“ width=“rộng” height=“cao”> 9/8/2010 Công cụ thiết kếWeb - HTML 51 Flash <object classid="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000" codebase=" e/cabs/flash/swflash.cab#version=6,0,29,0" width=“số" height=“số"> <embed src="ten_file.swf" quality="high" pluginspage=" yer" type="application/x-shockwave-flash" width="số " height="số "> 9/8/2010 Công cụ thiết kếWeb - HTML 52 Một số thẻ meta thông dụng • Thẻ : – Đặt ở giữa … – Thường dùng quy ñịnh thuộc tính cho trang web – Có tác dụng lớn với Search Engine – 2 cách viết thẻ : 9/8/2010 Công cụ thiết kếWeb - HTML 53 Một số thẻ meta thông dụng (tt) • • • • <META HTTP-EQUIV="refresh" CONTENT="delay;url=new url"> • • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> 9/8/2010 Công cụ thiết kếWeb - HTML 54 Cú pháp ñể tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài nhãm tõ lµm ®Çu mèi Ví dụ : Đại học Thương Mại Trang chủ HyperLink 9/8/2010 Công cụ thiết kếWeb - HTML 55 Lớp thẻ tạo khung • Chia vùng hiển thị của trang web thành nhiều vùng con theo chiều dọc, ngang • Mỗi vùng con là một frame có ñặc ñiểm: – Có thể truy cập tới một URL ñộc lập với frame khác. – Mỗi frame có thể ñược ñặt tên. – Có thể thay ñổi kích thước khung nhìn, cho phép hay không cho phép người dùng thay ñổi kích thước này • Tài liệu có cấu trúc frame, không có phần tử body 9/8/2010 Công cụ thiết kếWeb - HTML 56 … • Frameset: dùng ñể phân vùng hiển thị trên trình duyệt – Cols = n | * | n% – Rows = n | * | n% – Border, bordercolor • Frame: Nằm trong frameset dùng ñể ñịnh nghĩa từng vùng – Src: URL chứa nội dung của vùng – Name, bordercolor, noresize, marginwidth, marginheight – Scrolling = ‘yes|no|auto’ 9/8/2010 Công cụ thiết kếWeb - HTML 57 Khung (tt) • Tạo trang web chứa các khung: – Thay thẻ … bằng: các khung nội dung trong trường hợp trình duyệt không hỗ trợ khung 9/8/2010 Công cụ thiết kếWeb - HTML 58 Khung (tt) • Một số thuộc tính của – rows = “n1, n2, … nk” hoặc cols = “n1, n2, … nk”: Quy ñịnh có k dòng (hoặc cột), ñộ rộng dòng (cột) thứ i là ni. ni là số, có thể thay bằng *: phần còn lại – frameborder = yes hoặc no – framespacing = “n”: Khoảng cách giữa 2 khung 9/8/2010 Công cụ thiết kếWeb - HTML 59 Khung (tt) • Tạo 1 khung có nội dung là 1 trang web nào ñó: – Thuộc tính: • src=“Địa chỉ chứa nội dung” • name=“tên khung” • noresize: Không ñược thay ñổi kích thước • Thẻ mặc ñịnh – Thuộc tính • target=“Cửa sổ mặc ñịnh” • href=“Địa chỉ gốc mặc ñịnh” 9/8/2010 Công cụ thiết kếWeb - HTML 60 Ví dụ