Thiết kế Web với HTML - Lê Anh Nhật

7.1. Giới thiệu frame Frame mở rộng khả năng hiển thị trang web bằng cách cho phép chia miền hiển thị thành nhiều vùng. Mỗi vùng như vậy được gọi là frame và có những đặc điểm sau: Nó có thể truy cập tới một URL một cách độc lập với các frame khác. Mỗi frame có thể đặt tên, dùng làm đích trong liên kết. Nó có thể tự thay đổi kích thước khung nhìn, hoặc có thể không thay đổi đối với người sử dụng. * Cú pháp Frame Cấu trúc cơ bản: 	 	 	 7.2. Thẻ Frameset rows: chỉ chia hàng, tuỳ theo tham số. cols: chỉ chia cột, tuỳ theo tham số. border: độ dày đường viền. framespacing: khoảng cách các frame. n1, n2, m1, m2, ...: là giá trị thuộc tính được tính bằng điểm hoặc phần trăm tương đối. Và có thể là dấu '*', frame tương ứng sẽ tự động điều chỉnh. N: là độ dày tương ứng với các thuộc tính. frameborder: thiết lập đường viền cho toàn bộ tập frame, có giá trị yes hoặc no. Ví dụ: chia thành 2 hàng, hàng thứ nhất chiếm 30% màn hình, còn lại là hàng thứ 2. chia 3 cột, cột thứ 2 có độ rộng 100 điểm, các cột còn lại sẽ tự động phân chia. : đặt đường viền, khoảng cách, ... 7.3. Thẻ frame Cú pháp: noresize: nếu có thuộc tính này thì người sử dụng không thể thay đổi kích thước hiển thị frame. name: gán một tên cho một frame, nó có thể làm đích cho các liên kết từ các tài liệu khác. with: chiều rộng frame. height: chiều cao frame. scrolling: đặt thuộc tính thanh cuốn. Ví dụ: tạo trang web có 4 frame như sau: vi du ve frame...index... 	 	 	 	 	 	 	 	Xin lỗi, trình duyệt không trợ giúp frame Tệp "frame_index.html" vi du ve frame...content... MỤC LỤC Cấu trúc trang web Tệp "frame_content.html" 7.4. Thực hành tự do Chương 8. FORM 8.1. Form Form cho phép bạn nhận thông tin hay phản hồi từ người dùng. Tạo Form: Action = “URL”> 	 	 yêu cầu thông tin bằng một trong nhiều cách khác nhau : nhận giá trị trị Post hoặc Get 8.2. Trường văn bản và các thuộc tính. > 	Text….. Cho phép người dùng nhập nhiều dòng văn bản vào Form với số dòng và số cột cần hiển thị. Text: Hướng dẫn người sử dụng nhập dữ liệu. Value: OFF (giá trị mặc định) nếu không dùng Wrap. 8.3. Text Box. Cho phép người dùng nhập một đoạn văn bản có chiều dài Size và chiều dài tối đa cho đoạn văn bản là MaxLength (Size Khi nhập dữ liệu vào thì các ký tự được dấu đi và thay vào đó là những ký tự “*” hay “x” tuỳ thuộc vào trình duyệt. 8.5. Check Box String Tuỳ chọn này được dùng khi có nhiều giá trị cho một tuỳ chọn. Muốn xác định trạng thái mặc định của checkBox là đánh dấu hoặc không đánh dấu thì thêm một trong hai giá trị: Checked hoặc UnChecked String: Là xâu thông báo lựa chọn. 8.6. Radio Button String Cho phép người dùng lựa chọn trong các tuỳ chọn được định trước. Thuộc tính Name phải giống nhau và thuộc tính Value phải khác nhau 8.7. Trường Hidden. Được thiết kế để truyền (ngầm) giá trị đến Web Server và Script. Giá trị truyền thường là một từ khoá, giá trị kiểm tra hay một chuỗi bất kỳ 8.8. Submit Button. Dùng để chuyển dữ liệu trên Form mà người sử dụng đã nhập sang một trang mới. String: Là dòng chữ ghi trên nút, nếu không có Value thì mặt định là Submit ghi trên nút 8.9. Reset Button. Dùng để xoá dữ liệu trên Form mà người sử dụng đã nhập, khởi động lại cho các phần tử trên Form. String: Là dòng chữ ghi trên nút, nếu không có Value thì mặt định là Reset ghi trên nút 8.10. ComboBox và ListBox. Multiple > 	 String 	 String 	 String 	…………. : Định nghĩa một phần tử trong danh sách. Multiple: Cho phép người dùng chọn cùng một lúc nhiều giá trị. Bài tập thực hành Nhập vào thông tin của một sinh viên, sau đó in ra thông tin của sinh viên đó. Chương 9 LẬP TRÌNH SCRIPTING VỚI VBSCRIPT 9.1. Cơ bản về VBScript. 9.1.1. VBScript là gì? Một Script trong tài liệu HTML nói chung có hai phần: + Phần của tài liệu sẽ có một Script Container đặc biệt chứa định nghĩa của các hàm được script dùng. + Lời gọi hàm làm nhiệm vụ truyền và nhận các giá trị. 9.1.2. Tại sao dùng VBScript. - VBScript là tập con của Visual Basic - Làm việc với ActiveX: Mặc dù Microsoft bắt đầu hỗ trợ javacript và các ngôn ngữ Script khác truy cập các ActiveX Component, VBScript vẫn là sự lựa chọn của Microsoft và hầu hết những người ủng hộ ActiveX. - Dùng kỹ thuật Dynamic HTML. . 9.1.3. Thêm VBScript vào trang. Tag Một vài Tag HTML chấp nhận ngôn ngữ Script bên trong chúng Tất cả các lệnh VBScript sẽ xuất hiện trong các Tag Ví dụ: 9.2. Các sự kiện trong VBScript 9.2.1. Quản lý sự kiện trong VBScript. Các sự kiện trên Form trong 9.2.2. Tạo các trình quản lý sự kiện - Trong VBScript, các sự kiện được quản lý bằng hàm Sub nằm ở phần đầu tài liệu. - Lấy dữ liệu trong Form: Document. - Để viết dữ liệu ta dùng Document.Write “String” - Mở một cửa sổ mới: Window.Open (“page.Html”, “Window Name”); - Nèi c¸c chuçi dïng ký tù & - ChuyÓn tõ chuçi sang sè: Hàm Cdbl(value) 9.2.1. Khai báo biến, hằng * Khai báo biến: Biến của Asp có kiểu dữ liệu là Variant nên không cần sử dụng từ khoá As với kiểu dữ liệu khai báo. Dim , ,…… 	 Ví dụ: Có thể sử dụng biến mà không cần khai báo. 9.2. Tóm tắt cú pháp VBscript * Khai báo biến mảng: + Mảng 1 chiều: Dim (số phần tử) Ví dụ: Dim A(50) + Mảng 2 chiều: Dim (số dòng, số cột) Ví dụ: Dim B(10, 20) + Khai báo mảng có phần tử cố định: 	Dim (phần tử 1, phần tử 2,….) + Khai báo mảng động: Dim () Ví dụ: Dim mang() + Có thể khai báo lại mảng động: ReDim (số phần tử) Ví dụ: ReDim mang(3) * Khai báo hằng: Const = - Với :	Kiểu xâu ký tự: Để trong “…” 	Kiểu ngày: Để trong #....# 	Kiểu Logic: True hoặc False 	Kiểu số: 1.3.2. Dòng chú thích ‘ Nội dung dòng chú thích 9.2.2. Dấu gạch dưới - Có thể dùng phép toán “&” hay “+” để nối chuỗi. Ví dụ: SQL = Select Mahs, ho_ten, ngay_sinh, gioi_tinh “_ 	& “From tbl_hoso” hoặc SQL = “ Select Mahs, ho_ten, ngay_sinh, gioi_tinh” _ SQL = SQL & “From tbl_hoso” Dấu gạch dưới “_” dùng để tiếp nối các câu lệnh quá dài. 9.2.3. Phát biểu điều khiển a, IF …THEN 	SELECT CASE 	CASE 	 	CASE 	 	…………………………… 	[CASE ELSE 	] 	END SELECT b, SELECT CASE 9.2.4. Phát biểu vòng lặp a, FOR…NEXT FOR = TO [STEP ] 	 [EXIT FOR] 	 NEXT b, FOR EACH…NEXT FOR EACH IN 	 NEXT c, DO…LOOP 9.2.5. Khai báo hàm và thủ tục a, Thủ tục: SUB (danh sách các tham số) 	 END SUB - Gọi thủ tục: - Khai báo CALL b, Hàm: FUNCTION (danh sách các tham số) 	 END FUNCTION * Khai báo * Gọi hàm = (danh sách tham số) * Hàm có sẵn - Các hàm chuyển đổi kiểu dữ liệu - Các hàm format - Các hàm toán học Cho phép định dạng dữ liệu Int, Abs, Atn, Cos, Exp, Fix, Hex, Log, Oct, Rnd, Randomize, Round, Sin, Sqr, Tan - Các hàm thao tác với chuỗi - Các hàm ngày tháng - Các hàm kiểm tra * Isdate: Kiểm tra có phải đúng kiểu ngày tháng không? * IsNumeric: Kiểm tra có phải đúng kiểu số không? Chương 10 LẬP TRÌNH SCRIPTING VỚI JAVASCRIPT 10.1. Tổng quan về JavaScript • Ñôn giaûn. • Ñoäng (Dynamic). • Höôùng ñoái töôïng (Object Oriented Javascript laø moät ngoân ngöõ thoâng dòch (interpreter), chöông trình nguoàn cuûa noù ñöôïc nhuùng (embedded) hoaëc tích hôïp (integated) vaøo taäp tin HTML chuaån 10.1.1. Ñaëc tính cuûa ngoân ngöõ Javascript:  ñaëc tính 10.1.2. Ngoân ngöõ JavaScript: - Moät trong nhöõng ñaëc tính quan troïng cuûa ngoân ngöõ JavaScript laø khaû naêng taïo vaø söû duïng caùc ñoái töôïng (Object) Object 10.2. Nhóng JavaScript vµo file HTML Sö dông mét trong c¸ch c¸ch sau ®©y: - Sö dông c¸c c©u lÖnh vµ c¸c hµm trong cÆp thÎ - Sö dông c¸c file nguån JavaScript - Sö dông mét biÓu thøc JavaScript lµm gi¸ trÞ cña mét thuéc tÝnh HTML - Sö dông thÎ sù kiÖn (event handlers) trong mét thÎ HTML nµo ®ã 10.2.1. Sö dông thÎ SCRIPT Có ph¸p: - Dßng chó thÝch: // Néi dung ghi chó hay /* Néi dung ghi chó */ 10.2.2. Sö dông mét file nguån JavaScript VÝ dô: 10.3. Söû duïng Javascript 10.3.1. Cuù phaùp cô baûn cuûa leänh JavaScript xaây döïng caùc haøm, caùc phaùt bieåu, caùc toaùn töû vaø caùc bieåu thöùc treân cuøng moät doøng vaø keát thuùc baèng ; 10.3.2. Caùc khoái leänh Nhieàu doøng leänh coù theå ñöôïc lieân keát vôùi nhau vaø ñöôïc bao bôûi { } Phụ lục Đăng ký web ở  Tạo mới một Account Ktra thông tin user Nhập thông tin cá nhân Next để tiếp tục Kích vào đây để tiếp tục Chọn Điền họ tên đầy đủ Lựa chọn thể loại site Tiếp tục Nhập thông tin cá nhân Tiếp tục để kết thúc Nếu đăng kýthành công Kích vào dòng này Địa chỉ trang web của bạn để vào thư mục và xây dựng trang web Tạo một trang mới Tạo một thư mục mới Upload 1 file Upload nhiều file Trang:  Trang:  Đăng ký miễn phí Đăng ký miễn phí 2. Chon tên miền 1. lựa chọn 3. tiếp tục 1. tiếp tục 2a.tạo tên miền khác 2b. tiếp tục Bỏ các dấu tích Tiếp tục Khai báođầy đủ thông tincá nhân Tiếp tục Báo thiết lập thành công Tên người sử dụng đ/c trang web địa chỉ để login = FTP địa chỉ để login điều khiển Vào trang web https://controlpanel.netfirms.com để đăng nhập vào điều khiển gõ tên người sử dụng mật khẩu lựa chọn ngôn ngữ tiếp tục Thông tin chính Công cụ của trang web Quản lý các tệp Quản lý các tệp Load các tệp lên mạng lựa chọn "file" hoặc "Directory" để tạo Nhập tên kích tạo các file, directory để trong nay Bài 12Gộm lại hay phân mảnh Việc tổ chức thông tin trên trang web Để tổ chức thông tin, ta có thể: Gom chúng lại với nhau, hoặc chia chúng thành nhiều phần riêng biệt. Thiết kế web cho độc giả xem: Độc giả rất ít khi đọc một tài liệu dài. Việc lên xuống trong trang web thường làm họ nhàm chán. Phần đa độc giả là tìm một mẩu tin, họ sẽ khó chịu khi phải rà soát trong một trang dài đầy chữ. Thiết kế trang web cho máy tính: Một trang web dài sẽ cần nhiều thời gian để nạp từ mạng xuống. Một đoạn thông tin ngắn, súc tích sẽ thích hợp hơn với màn hình máy tính. Tại sao ta không chia nhỏ một tài liệu dài và sử dụng các siêu liên kết hyperText? Chia nhỏ thông tin nên đảm bảo: Không nên chia cắt quá nhỏ. Từ một đến ba trang (in) là đủ cho một đoạn thông tin trên web. Việc áp dụng chia thông tin phải linh động và nhất quán với ý thức chung. Cách tốt nhất để chia và tổ chức thông tin thực hiện theo tổ chức của nội dung. Thực hành: Xem lại các trang web mà bạn đã thiết kế: Nó có dài quá không? Hay ngắn cụt lửng? Hãy tạo một trang bìa và có các liên kết thích hợp đến các trang web của bạn.