tài liệu giảng dạy môn thiết kế web

tài liệu giảng dạy môn thiết kế web

…

18 1.2.3.2 Danh sách có thứ tự 20 1.2.4 Thẻ chèn hình ảnh, âm 22 BÀI 29 SIÊU LIÊN KẾT VÀ KHUNG 29 1.4.1 Siêu liên kết – Hyperlink 29 1.3.1.1 Liên kết 29 1.3.1.2 Liên kết 32 1.4.2 Khung – frame 33 1.3.2.1 Thẻ … 33 1.3.2.2 Thẻ … 39 1.3.2.3 Thẻ … 40 BÀI 46 BẢNG BIỂU TRÊN WEB 46 1.4.1 Tạo bảng 46 1.4.2 Các thuộc tính định dạng bảng 46 1.4.2.1 Thuộc tính thẻ bảng 46 1.4.2.2 Thuộc tính thẻ dòng 47 1.4.2.3 Thuộc tính thẻ / cột , 48 1.4.3 Thiết kế giao diện Web 50 BÀI 61 FORM VÀ CÁC CONTROLS 61 1.5.1 Ý nghĩa form trang Web cách khởi tạo 61 1.5.2 Các thành phần form 62 1.5.2.1 Thẻ 62 1.5.2.2 Thẻ … 64 1.5.2.3 Thẻ … 65 1.5.2.4 Thẻ … 66 Tài liệu giảng dạy Môn Thiết kế Web CHƯƠNG 75 CÔNG CỤ HỖ TRỢ THIẾT KẾ WEB 75 2.1 Ý nghĩa số công cụ hỗ trợ thiết kế Web 75 2.2 Một số chức hỗ trợ đáng ý 77 2.3 Xuất kết 81 CHƯƠNG 82 BẢNG MẪU NẠP CHỒNG – CSS 82 3.1 Khái niệm 82 3.2 Phân loại 83 3.2.1 Inline style sheet 83 3.2.2 Internal style sheet 85 3.2.3 External style sheet 87 3.3 Bộ chọn 89 3.4 Các thuộc tính CSS thông dụng thiết kế giao diện 90 CHƯƠNG 100 NGÔN NGỮ JAVASCRIPT 100 4.1 Giới thiệu 100 4.2 Biến, toán tử, toán hạng, hằng, hàm, lệnh JavaScript 101 4.2.1 Biến JavaScript 101 4.2.2 Toán tử 103 4.2.3 Hằng số 104 4.2.4 Hàm 104 4.2.5 Các lệnh điều khiển JavaScript 107 4.2.6 Tham chiếu đến đối tượng HTML 113 Tài liệu giảng dạy Mơn Thiết kế Web DANH MỤC HÌNH Hình 1-1-1: Mơ hình hoạt động dịch vụ Web Hình 1-1-2: Cấu trúc trang HTML Hình 1-1-3: Trang Vidu1-1-1.html trình duyệt Firefox Hình 1-2-1: Ví dụ canh lề đoạn văn thẻ 11 Hình 1-2-2: Trang Vidu1-2-2.html định dạng đoạn thẻ

12 Hình 1-2-3: Trang Vidu1-2-3.html định dạng tiêu đề thẻ Heading 13 Hình 1-2-4: Trang Vidu1-2-4.html – tổng hợp thẻ định dạng văn 16 Hình 1-2-5: Trang Vidu1-2-5.html – Một số thử nghiệm với thẻ 18 Hình 1-2-6: Trang Vidu1-2-6.html, ví dụ danh sách khơng thứ tự 20 Hình 1-2-7: Trang Vidu1-2-7.html, ví dụ danh sách có thứ tự 22 Hình 1-2-8: Trang Vidu1-2-8.html 24 Hình 1-2-9: Trang Vidu1-2-9.html 26 Hình 1-3-1: Liên kết 29 Hình 1-3-2: Liên kết ngồi 29 Hình 1-3-3: Liên kết thực thi 29 Hình 1-3-4: Trang Vidu1-3-1.html 30 Hình 1-3-5: Trang Vidu1-3-2.html 33 Hình 1-3-6: giaodienFrameset1.html 35 Hình 1-3-7: Trang frameset1_banner.html 36 Hình 1-3-8: Trang frameset1_menu.html 36 Hình 1-3-9: Trang frameset1_nd1.html 37 Hình 1-3-10: Trang frameset1_nd2.html 38 Hình 1-3-11: Trang Vidu1-3-5.html 41 Hình 1-4-1: Trang Vidu1-4-1.html 50 Hình 1-4-2: Trang Vidu1-4-2.html 52 Hình 1-5-1: Trang Vidu1-5-1.html 68 Hình 2-1: Màn hình khởi động – chọn cửa sổ làm việc mà bạn mong muốn 76 Hình 2-2: Chọn kiểu file 76 Hình 2-3: Cửa sổ Code 77 Hình 2-4: Dreamweaver hỗ trợ code 77 Hình 2-5: Chế độ Slipt 78 Hình 2-6: Chế độ Design 78 Hình 2-7: Thanh Common 79 Hình 2-8: Thanh Layout 79 Hình 2-9: Thanh form 79 Hình 2-10: Thanh Text 80 Hình 2-11: Thanh Application 80 Hình 2-12: Hiệu chỉnh Encoding 80 Hình 2-13: Xuất kết 81 Hình 3-1: Trang Vidu3-1.html 84 Hình 3-2: Trang Vidu3-2.html 86 Hình 3-3: Trang Vidu3-3.html 88 Hình 4-1: Hộp thoại OK 105 Hình 4-2: Hộp thoại YES/NO 105 Hình 4-3: Hộp thoại lấy thơng tin 105 Tài liệu giảng dạy Môn Thiết kế Web CHƯƠNG NGÔN NGỮ HTML BÀI TỔNG QUAN VỀ NGÔN NGỮ HTML  Mục tiêu học tập: Sau học xong này, người học có thể: - Trình bày tổng quan ngơn ngữ HTML 1.1.1 Các khái niệm Internet Web Tiền thân Internet ARPANET, mạng máy tính xây dựng Bộ Quốc phòng Mỹ (DOD) vào năm 1969 dùng để kiểm thử độ tin cậy mạng nhằm kết nối sở nghiên cứu với mục đích quân sự, bao gồm số lượng lớn trường đại học, viện nghiên cứu ARPANET khởi đầu với quy mơ nhỏ nhanh chóng bành trướng khắp nước Mỹ Thành công ARPANET nhân lên gấp bội, ngày nhiều trường đại học đăng ký tham gia Tuy nhiên, quy mô lớn mạng gây khó khăn vấn đề quản lý Từ ARPANET chia thành hai phần: MILNET hệ thống mạng dành cho quân ARPANET nhỏ hơn, không thuộc DOD Tuy nhiên hai mạng liên kết với nhờ giải pháp kỹ thuật gọi IP (Internet Protocol – Giao thức Internet), cho phép thông tin truyền từ mạng sang mạng khác cần thiết Tất mạng nối vào Internet sử dụng IP Năm 1989, Tim Berners Lee viện Kỹ thuật hạt nhân Châu Âu – CERN (Conseil Européen pour la Recherche Nucléaire) phát minh giao thức World Wide Web – viết tắt WWW hay gọi ngắn gọn Web, sau ngơn ngữ HTML (HyperText Markup Language) Có thể nói cách mạng Internet người ta truy cập trao đổi thông tin cách dễ dàng Tuy nhiên Web lúc khơng có điểm giống Web mà biết ngày Trình duyệt Web điều khiển chuột không hỗ trợ đồ Tài liệu giảng dạy Môn Thiết kế Web họa Nhưng người dùng Internet lúc nhanh chóng cảm nhận sức mạnh tiềm Web Web trưởng thành nhanh Trong vài năm ngắn ngủi có cải tiến lớn Ý nghĩa trình duyệt Web dùng chuột khả hỗ trợ đa phương tiện: ViolaWWW (1992), NCSA Mosaic 1.0 (1993), Netscape Navigator 1.0 (1994), Microsoft Internet Explorer 1.0 (1995), … Trong thực tế, ứng dụng Web tồn hai loại trang Web tĩnh trang Web động Trang Web tĩnh trang HTML không kết nối sở liệu Ngược lại, trang Web động trang Web có kết nối sở liệu Điều có nghĩa trang Web động làm tươi, liệu trình bày trang Web đọc từ sở liệu Nói cách khác, cho dù trang Web tĩnh hay động, bạn muốn trình bày liệu trình duyệt Web, bạn cần phải khai báo thẻ HTML bên theo quy luật định Mỗi trang Web gọi Webpage Tập hợp nhiều trang Web liên kết với theo cấu trúc tổ chức cá nhân xây dựng nên gọi Website Mỗi Website có trang Web hiển thị người dùng truy cập vào Website đó, trang Web gọi Homepage Homepage cung cấp nhìn tổng quan Website Một Website muốn cung cấp thông tin cho tồn giới cần đưa lên trình phục vụ Web (Web Server) cần đăng ký tên miền, địa URL (Uniform Resource Locator – Địa định vị nguồn tài nguyên Internet) để truy cập đến với cú pháp: ://// Ví dụ: http://joomlaviet.org/forum/index.php Địa định vị nguồn tài nguyên phân hai loại: địa tuyệt đối địa tương đối Địa tuyệt đối địa có cú pháp đầy đủ gồm giao thức, tên miền, tên đường dẫn (nếu có) tên tập tin Web hiển thị Địa tương đối gồm đường dẫn (nếu có) tên tập tin Trình duyệt tự động xác định địa tuyệt đối cách lấy phần thông tin bị khuyết từ URL trang Web hành kết hợp với URL tương đối Tài liệu giảng dạy Môn Thiết kế Web 1.1.2 Cách hoạt động trang Web Cách hoạt động trang Web thơng qua mơ hình sau: Hình 1-1-1: Mơ hình hoạt động dịch vụ Web Giải thích mơ hình: Khi người sử dụng Internet mở trình duyệt (Web Browser) máy tính, gõ vào địa trình duyệt địa trang Web nhấn phím enter để xác nhận lệnh Điều có nghĩa yêu cầu dịch vụ HTTP phát sinh gửi đến trình phục vụ Web  Trình phục vụ Web nhận yêu cầu tiến hành tìm kiếm hệ thống mà Web Server lưu trữ địa trang yêu cầu  Kết tìm kiếm gửi cho máy tính mà người sử dụng gửi yêu cầu  Nếu tìm thấy, trình duyệt Web máy tính người sử dụng có nhiệm vụ hiển thị nội dung trang Web theo ý định người thiết kế trang Web 1.1.3 Cấu trúc trang HTML Như trình bày trên, muốn trình bày định dạng liệu trình duyệt phải theo cấu trúc HTML Đây ngôn ngữ thông dụng dùng để thiết kế Web tĩnh Một trang HTML đánh dấu bắt đầu thẻ kết thúc thẻ Như vậy, nội dung đặt cặp thẻ không hợp lệ Thẻ gọi thẻ mở, thẻ gọi thẻ đóng Bên hai thẻ này, bạn khai báo sử dụng hầu hết thẻ HTML Tuy nhiên có vài thẻ HTML khơng hỗ trợ trình duyệt lại hỗ trợ trình duyệt khác Những trường hợp đặc biệt đó, nhóm biên soạn tài liệu giới thiệu đến bạn tìm hiểu thẻ HTML cụ thể Trang Web tĩnh có tên mở rộng html htm Có thể soạn thảo mã HTML Tài liệu giảng dạy Môn Thiết kế Web chương trình soạn thảo văn Ví dụ, bạn soạn Microsoft Office Word, Notepad, WordPad, FrontPage, Dreamweaver, … Ngôn ngữ HTML không phân biệt ký tự HOA / thường khai báo tên thẻ Ví dụ: bạn gõ hay hay mang ý nghĩa khai báo bắt đầu trang HTML Và bạn khai báo thẻ đánh dấu phần đầu trang HTML thẻ hay hay thẻ đóng Các thẻ HTML định nghĩa sẵn, bạn cần nhớ tên thẻ ý nghĩa để sử dụng mà không cần tự định nghĩa cho thẻ Điều quan trọng bạn cần nhớ thuộc tính kèm bên thẻ để tùy chỉnh cho phần nội dụng mà bạn muốn hiển thị lên trình duyệt cho linh hoạt ý định hiển thị bạn Một điều lưu ý bạn cần gõ xác tên thẻ khơng có dấu cách tên thẻ HTML định nghĩa sẵn Ví dụ: cách viết tên thẻ sau sai: < head>, , , Nếu bạn muốn thêm thuộc tính cho thẻ sau tên thẻ, bạn nhấn phím khoảng cách sau xác định thuộc tính cho thẻ Thẻ HTML có hai loại: thẻ kép thẻ đơn Thẻ kép loại thẻ có thẻ mở thẻ đóng Thẻ mở viết sau: Thẻ đóng phải khai báo có thẻ mở Cách viết thẻ đóng sau: Nội dung cần hiển thị lên Web, bạn đặt cặp thẻ mở thẻ đóng để có định dạng thẻ khai báo Thẻ đơn loại thẻ có thẻ mở mà khơng có thẻ đóng Nếu sử dụng nhiều thẻ HTML để định dạng cho nội dung thẻ phải lồng Tức thẻ HTML tuân theo quy luật mở trước đóng sau Tiêu đề trang Web Đây tiên trang Web đầu Phần đầu: chứa mô tả trang Web Phần thân: chứa nội dung trang Web Định nghĩa trang HTML Hình 1-1-2: Cấu trúc trang HTML Để soạn thảo mã HTML, ta Notepad gõ lưu nội dung trang HTML Hình 1Tài liệu giảng dạy Môn Thiết kế Web 1-2 với tên Vidu1-1-1.html Lưu ý: để hiển thị tiếng Việt lên trình duyệt, trình lưu tập tin, bạn cần chọn Encoding: Unicode Encoding: UTF-8 Sau mở tập tin trình duyệt Web, ta thấy giao diện trang sau: Hình 1-1-3: Trang Vidu1-1-1.html trình duyệt Firefox Bạn thêm thuộc tính định dạng cho thẻ HTML với cấu trúc:  Câu hỏi (bài tập) củng cố: Khi trang Web có sử dụng nhiều hình ảnh động giao diện Vậy khẳng định trang Web động khơng? Tại sao? Trình bày sơ lược lịch sử phát triển www Trình bày chức Web Browser Web Server Tài liệu giảng dạy Môn Thiết kế Web BÀI CÁC THẺ HTML CƠ BẢN  Mục tiêu học tập: Sau học xong này, người học có thể: - Vận dụng thẻ HTML 1.2.1 Thẻ , thích ký hiệu đặc biệt Trong cặp thẻ … dùng thuộc tính định dạng cho tồn nội dung trang như: Background=“URL” với URL đường dẫn đến tập tin hình ảnh dùng làm ảnh cho phần nội dung trang Bgcolor= “color” với color mã màu hệ thập lục phân từ khóa tên màu tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá), white (màu trắng), … để định dạng màu trang Text=“color” với color mã màu hệ thập lục phân từ khóa tên màu tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá), white (màu trắng), … để định dạng màu chữ cho toàn trang Để ghi đoạn mã HTML, ta đặt nội dung thích cặp thẻ Khi dịch trang Web, trình duyệt bỏ qua phần nội dung nằm cặp thẻ Trong ngôn ngữ HTML, số ký tự đặc biệt bạn khơng thể gõ từ bàn phím Ví dụ gõ khoảng cách từ ký tự khoảng trắng hay nhiều ký tự khoảng trắng kết hiển thị lên trình duyệt Vì vậy, bạn muốn có nhiều khoảng trắng liên tục phải thực gọi mã HTML cho ký hiệu đặc biệt Sau bảng liệt kê số ký hiệu đặc biệt thường dùng: Mã HTML Ý nghĩa Mã HTML Ý nghĩa   Khoảng trắng ™ TM < < © © Tài liệu giảng dạy Môn Thiết kế Web Select (listbox) document.ten_form.ten_listbox.value length Checkbox document.ten_form.ten_checkbox[i].value length Radio document.ten_form.ten_radio[i].value length … … c) Tham chiếu đến trạng thái thẻ Chỉ có số đối tượng form kiểm tra trạng thái THẺ VD Select (combobox) document.ten_form.ten_combo.selected Select (listbox) document.ten_form.ten_listbox selected Checkbox document.ten_form.ten_checkbox[i] checked Radio document.ten_form.ten_radio[i] checked … … Nếu muốn tham chiếu đến trạng thái khung nhập liệu (chằng hạn Text Fiels, Password Field, …) có nhập thơng tin vào chưa, ta quay với dạng tham chiếu đến giá trị Fields Nếu sau tham chiếu mà trả rỗng tức Field chưa nhập liệu d) Một số phương thức PHƯƠNG THỨC DIỄN GIẢI document.ten_form.ten_tp_form.focus() Đặt trỏ nhấp nháy vào thành phần có tên ten_tp_form form có tên ten_form Tài liệu giảng dạy Mơn Thiết kế Web 114 window.close() Đóng sổ window.open(URL) Mở cửa sổ trình duyệt với địa URL window.history.back(i) Trở cửa sổ trình duyệt trang web i lần window.history.go(i) Trở cửa sổ trình duyệt trang web i lần … … e) Thao tác id thẻ HTML Khi muốn viết nội dung vào thành phần form ta quay dạng tham chiếu đến giá trị thẻ việc gán nội dung Nhưng thẻ HTML khơng thuộc thành phần biểu mẫu, áp dụng theo cách tham chiếu giá trị Lúc sử dụng thuộc tính id để nhận dạng thẻ HTML cần chèn thêm thông tin từ JavaScript Sau sử dụng thành phần getElementById(“ten_id”) Tuy nhiên có hai dạng truy cập vào id thẻ HTML Viết nội dung vào lấy nội dung trình bày sẵn cặp thẻ HTML đặt trước id: document.getElementById("ten_ID").innerHTML Thao tác với id thẻ: document.getElementById("ten_ID").id Trường hợp vừa muốn thao tác lên thẻ có id định lại vừa muốn thao tác nội dung bên thẻ: document.getElementById("ten_ID").outerHTML f) Sừ dụng số đối tượng Đối tượng String: Tài liệu giảng dạy Môn Thiết kế Web 115 Tài liệu giảng dạy Môn Thiết kế Web 116 Ví dụ 4-8: Sử dụng số phương thức đối tượng String var txt =“ Hello world!”; document.write (txt.length); document.write (txt.toUpperCase()); document.write (txt.substring(4,8)); Đối tượng Date: Tài liệu giảng dạy Mơn Thiết kế Web 117 Ví dụ 4-9: Sử dụng số phương thức đối tượng Date var myDate = new Date(); myDate.setFullYear(2010,0,14); myDate.setDate(myDate.getDate()+5); myDate.setFullDate(2010,0,14); var today = new Date(); if (myDate > today ) alert(“Hôm chưa đến ngày 14/1/2010”); else alert(“Hôm qua ngày 14/1/2010”); Đối tượng Array: Ví dụ 4-10: Sắp xếp mảng phương thức sort() Tài liệu giảng dạy Mơn Thiết kế Web 118 Ví dụ 4-11: Sử dụng phương thức ghép chuỗi Đối tượng Math: Tài liệu giảng dạy Mơn Thiết kế Web 119 Ví dụ 4-12: Tài liệu giảng dạy Môn Thiết kế Web 120  Câu hỏi (bài tập) củng cố: Hãy thiết kế trang HTML sau Yêu cầu: Khi click vào mục chọn màu lên thơng báo bạn chọn màu Lưu tập với tên JS_baitap1.html Tài liệu giảng dạy Môn Thiết kế Web 121 Hãy thiết kế trang HTML sau, lưu tập với tên JS_baitap2.html Dùng Javascript để xử lý nút: - Nút lời chào, click vào lời chào: Chào mừng bạn đến với Javascript - Khi bạn nhập họ tên vào textbox, click vào nút Xong, hộp thoại tên bạn vừa nhập - Khi click vào nút đóng trang web, website bạn bị đóng lại Viết chương trình mơ phổng máy tính điện tử Lưu với tên JS_baitap3.html - Sau bạn nhập vào số a, b Bạn chọn phép tốn xem kết phép tốn Tài liệu giảng dạy Môn Thiết kế Web 122 Bạn thiết kế form sau, lưu tập với tên JS_baitap4.html Lưu ý: - Nếu người dùng chưa nhập tên, chương trình xuất thơng báo Sau trỏ chuột xuất ô cần nhập tên - Tương tự, lập trình cho nhập tuổi - Đặc biệt, người dùng nhập tuổi ký tự số âm thơng báo lỗi, u cầu nhập lại, xóa bỏ liệu tuổi cũ, đặt trỏ chuột vào ô tuổi để người dùng nhập lại Nếu người dùng nhập thông tin, click vào nút gửi, lên thông tin tên, tuổi, năm sinh người dùng Tài liệu giảng dạy Môn Thiết kế Web 123 Hãy viết thông báo yêu cầu người dùng nhập vào chuỗi Sau kiểm tra xem chuỗi vừa nhập có ký tự Lưu tập với tên JS_baitap5.html Cho trước mảng gồm danh sách trái cây: orange, banana, mango, lemon, melon, tomato Hãy xếp lại theo thứ tự abc Lưu tập với tên JS_baitap6.html Tài liệu giảng dạy Môn Thiết kế Web 124 Cho hai mảng, mảng thứ gồm phần tử: 1, 2, Mảng thứ hai gồm phần tử: Nguyễn Văn A, Trần Văn C, Nguyễn Thị C Thực nối hai chuỗi lại Lưu tập với tên JS_baitap7.html Tài liệu giảng dạy Môn Thiết kế Web 125 Hãy tạo trang JS_baitap8.html Chú ý: - Kiểm tra tên đăng nhập rỗng chiều dài khác ký tự báo lỗi - Kiềm tra mật phải có ký tự nhiều 12 ký tự - Sau điền thông tin click vào nút nhập, thông tin vừa nhập điền vào cột tương ứng table - Hãy trang trí lại trang theo sở thích bạn Tài liệu giảng dạy Mơn Thiết kế Web 126 Hãy tạo trang JS_baitap9.html Yêu cầu: - Sau lần khách hàng nhập vào số lượng tranh tổng thành tiền cập nhật - Tổng thành tiền = ∑(đơn giá * số lượng) Tài liệu giảng dạy Môn Thiết kế Web 127 TÀI LIỆU THAM KHẢO  TÀI LIỆU THAM KHẢO ĐỂ BIÊN SOẠN NỘI DUNG MÔN HỌC: [1] - Xây dựng ứng dụng Web PHP & MySQL - chương 1, - Phạm Hữu Khang, NXB Phương Đông, 2007 [2] – Bài giảng mơn Lập trình Web, phần HTML, JavaScript – Đỗ Thanh Nghị - Khoa Công nghệ Thông tin Truyền thông, Trường Đại học Cần Thơ [3] – Bài giảng môn Thiết kế Web - Phạm Thị Trúc Mai – Bộ môn Công nghệ Thông tin, Khoa Kỹ thuật & Công nghệ, Trường Đại học Trà Vinh [4] – Tài liệu CSS tác giả WallPearl, địa Email: wallpearl@gmail.com [5] – http://www.w3schools.com/books/default.asp  TÀI LIỆU THAM KHẢO ĐỀ NGHỊ CHO HỌC VIÊN: [1] - Xây dựng ứng dụng Web PHP & MySQL - chương 1, - Phạm Hữu Khang, NXB Phương Đông, 2007 [2] – Tài liệu CSS tác giả WallPearl, địa Email: wallpearl@gmail.com [3] – http://www.w3schools.com/books/default.asp Tài liệu giảng dạy Môn Thiết kế Web 128 ... baitap3.html: Tài liệu giảng dạy Môn Thiết kế Web 27 Hãy thiết kế trang Web có nội dung sau lưu tập vào D:/hotenSV/ với tên baitap4.html: Tài liệu giảng dạy Môn Thiết kế Web 28 BÀI SIÊU LIÊN KẾT VÀ... giaodienFrameset1.html Tài liệu giảng dạy Môn Thiết kế Web 35 Hình 1-3-7: Trang frameset1_banner.html Hình 1-3-8: Trang frameset1_menu.html Tài liệu giảng dạy Môn Thiết kế Web 36 Hình 1-3-9: Trang... … 66 Tài liệu giảng dạy Môn Thiết kế Web CHƯƠNG 75 CÔNG CỤ HỖ TRỢ THIẾT KẾ WEB 75 2.1 Ý nghĩa số công cụ hỗ trợ thiết kế Web 75 2.2 Một số chức