thiết kế và lập trình web bằng ngôn ngữ ASP phần 3

CÀI ĐẶT WEBSERVER IIS HỖ TRỢ PHP Vào trang http://www.php.net/downloads.php, chọn trong mục Windows Binaries/PHP 4.3.1 installer để tải phần mềm mới nhất về. Thực hiện chương trình php-4.3.1-installer.exe để chương trình tự cài đặt và cấu hình webserver IIS hỗ trợ PHP. Chú ý rằng phải cài IIS trước khi cài PHP và trong màn hình setup của PHP,

dịng thứ hai, hình thức hiển thị liệu khác Mã HTML Khi bắt đầu soạn thảo trang web, tag sau đóng vai trò khung cho việc định nghĩa trang HTML Xét ví dụ trang HTML đơn giản sau: Title of the web page An example of a simple web page • : Định nghĩa phạm vi văn HTML • : Định nghĩa mô tả trang HTML Các thông tin không hiển thị dạng nội dung trang web Hiển thị trình duyệt This is webpage This is webpage This is webpage This is webpage • : Mơ tả tiêu đề trang Tiêu đề trang web thường hiển thị tiêu đề cửa sổ hiển thị trang web Thơng tin dùng số máy tìm kiếm để xây dựng mục trang web Hầu hết tag HTML có tag bắt đầu tag kết thúc tương ứng Tag kết thúc tương ứng với tag khác chỗ có thêm kí tự “/” Ví dụ: tag có tag kết thúc tương ứng Các tag không phân biệt chữ thường chữ hoa Nghĩa tag , Trong trình đọc trang web để hiển thị, trình duyệt bỏ qua khoảng trắng thừa dấu ngắt dòng văn liệu tag Đó lí mà ba đoạn sau hiển thị Đoạn Đoạn The browser will ignore new lines and extra spaces in the text The browser will ignore new lines and extra spaces in the text Lê Đình Duy - ĐH KHTN Tp HCM Đoạn • : Xác định vùng “thân” trang web Đây phần mà liệu với tag HTML dùng để định dạng nội dung trang web Một tag thông thường bao gồm hai thành phần: tên tag (dùng biết tag định nghĩa gì) thuộc tính tag (dùng biết liệu hiển thị nào) Ví dụ sau minh họa việc thay đổi thuộc tính FACE SIZE tag Mã HTML This is a web page This is a web page The browser will ignore new lines and extra spaces in the text 61 62 Hiển thị trình duyệt This is webpage This is webpage Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org MỘT SỐ TAG CƠ BẢN CỦA HTML 2.2 Định dạng văn 2.1 Định dạng trang 2.2.1 Định dạng phân đoạn Định dạng trang thông thường bao gồm thơng tin tiêu đề trang, bảng mã kí tự dùng, màu nền, ảnh nền, từ khóa Tag

dùng để định dạng phân đoạn (paragraph) Thuộc tính thường gặp ALIGN dùng để canh chỉnh liệu phân đoạn LEFT (trái), RIGHT (phải) CENTER (canh giữa) JUSTIFY (canh hai bên) Ví dụ sau minh họa việc hiển thị đặt thuộc tính canh chỉnh cho tag

cách gán thuộc tính ALIGN tag giá trị “LEFT”, “CENTER”, “RIGHT”: Để đặt tiêu đề cho trang web, ta dùng tag , ví dụ muốn có tiêu đề trang web thiết kế “Chào mừng bạn đến với trang web này”, ta dùng: Chào mừng bạn đến với trang web này Để đặt bảng mã mà trang web dùng, ta sử dụng thiết lập thơng số cho tag Ví dụ thiết lập sau: cho biết trang web dùng bảng mã Unicode-UTF-8

This is webpage

Ta đặt màu nền, ảnh màu chữ cho toàn trang web cách đặt thuộc tính BGCOLOR, BACKGROUND TEXT tương ứng tag Ví dụ sau đặt màu cho trang web màu đỏ, màu chữ màu trắng: Ví dụ sau minh họa trang web có định dạng trang trình bày trên: Hình 3.1 – Các thuộc tính canh chỉnh tag

Chào mừng bạn đến với trang web này Trong phân đoạn, việc ngắt dịng lúc soạn thảo khơng ảnh hưởng đến việc hiển thị Trình duyệt hiểu ngắt dịng phân đoạn thơng qua tag Ví dụ:

Họ tên: Lê Đình Duy Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – ĐH Khoa Học Tự Nhiên

Hình 3.2 – Khơng thể xuống dịng thiết kế Lê Đình Duy - ĐH KHTN Tp HCM 63 64 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Để hiển thị mục dòng, ta phải chỉnh lại đoạn mã HTML cách thêm vào cuối mục tag sau:

Họ tên: Lê Đình Duy Nghề nghiệp: Giảng viên Địa chỉ: Khoa CNTT – ĐH Khoa Học Tự Nhiên

2.2.2 Định dạng chữ Tag để định dạng font chữ, màu sắc, kích thước, văn Các thuộc tính tag thường là: FACE: loại font chữ, SIZE: kích thước, COLOR: màu chữ Ngồi ra, để định dạng chữ in đậm ta dùng tag , in nghiêng dùng tag , gạch dùng tag Thuộc tính COLOR dùng tag thường định nghĩa tên qui ước (ví dụ RED: màu đỏ, BLUE: màu xanh da trời, ) mã RGB dạng chữ số hệ 16 bắt đầu dấu # (ví dụ #FF0000) Ví dụ sau định dạng đoạn văn với font Tahoma, in đậm, kích thước +2 (10pt) Thuật xử người xưa Để có kết hiển thị là: Thuật xử người xưa 2.3 Định dạng hình ảnh Hình 3.3 – Dùng tag muốn xuống dịng Ngồi ra, ta dùng đường kẻ ngang với tag để tạo phân cách thành phần trang web Thuộc tính thường gặp ALIGN (dùng để canh chỉnh vị trí đường này) COLOR (màu sắc) Nội dung trang web Cập nhật năm 2003 Mọi ý kiến, góp ý xin liên hệ Webmaster Tag dùng để chèn ảnh video clip vào trang web Các định dạng tập tin ảnh video sau hỗ trợ Internet Explorer: *.avi, *.bmp, *.emf, *.gif, *.jpg, *.jpeg, *.mov, *.mpg, *.mpeg, *.png, *.wmf, Đối với trang web không chứa hình ảnh, nội dung văn hiển thị sau nằm toàn trang web Tuy nhiên với trang web có chứa hình ảnh, hình ảnh tập tin độc lập với tập tin chứa trang web Tag dùng trang web để thơng báo cho trình duyệt đọc tập tin ảnh hiển thị vị trí đặt tag Ví dụ, trang web muốn hiển thị hình ảnh linh vật biểu tượng Seagames 22 sau đoạn văn “Linh vật Seagames 22”, phải bao gồm hai tập tin; Một tập tin hình ảnh linh vật, ví dụ linhvat.gif Tập tin lại chứa đoạn văn “Linh vật Seagames 22” tag sau:
Linh vật Seagames 22
Hình 3.4 – Phân cách tag Các thuộc tính bao gồm: SRC (tên tập tin hình ảnh), WIDTH, HEIGHT (kích thước ảnh), BORDER (đường viền khung quanh ảnh), ALT (văn thay dùng không hiển thị), ALIGN Lê Đình Duy - ĐH KHTN Tp HCM 65 66 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org (canh chỉnh), Thuộc tính ALT dùng ta muốn đưa chuột đến hình ảnh có dịng chữ tooltip hiển thị bên 2.4 Định dạng hyperlink (siêu liên kết) Tag dùng để đặt hyperlink Đoạn văn (hay hình ảnh, ) nằm tag đóng vai trị “dấu hiệu” (anchor) hyperlink Thơng thường, trỏ chuột thay đổi hình dạng (thường hình bàn tay) di chuyển ngang qua đoạn văn Một hyperlink cho phép liên kết tới vị trí khác bên trang web chứa hyperlink (liên kết nội) tới trang web khác (liên kết ngoại) Để tạo liên kết nội, ta cần thực hai bước Bước đánh dấu vị trí (bookmark) nơi cần liên kết thuộc tính NAME Bước tạo hyperlink đến vị trí vừa đánh dấu Ví dụ sau minh họa việc tạo liên kết nội để người dùng nhấn vào hyperlink “Go to Chapter 1” trình duyệt chuyển đến vị trí Chapter trang web Mã HTML Hiển thị trình duyệt Go to Chaper 2 Chapter 1 Go to chapter Lê Đình Duy - ĐH KHTN Tp HCM Gửi email Mở tập tin cửa sổ định nghĩa TARGET Một số giá trị dùng để gán cho thuộc tính TARGET tag là: Giá trị TARGET Name _blank _parent _self _top Ý nghĩa Nạp trang web cửa sổ FRAME có tên name Nạp trang web vào cửa sổ trống Cửa sổ khơng có tên Nạp trang web vào cửa sổ cha gần trang web hành Nạp trang web vào cửa sổ với trang web hành Ðây giá trị mặc định hyperlink Nạp trang web vào cửa sổ cao nhât (topmost) HTML sử dụng kí tự đặc biệt (ví dụ “” để đánh dấu tag, ), để hiển thị kí tự đặc biệt này, ta phải dùng nhóm kí tự thay sau: Chapter Để liên kết tới trang web khác, điền địa URL trang web vào mục HREF Xem ví dụ sau: Mã HTML Ý nghĩa Hiển thị cửa sổ tải tập tin theo giao thức FTP 2.5 Định dạng số kí tự đặc biệt Dấu # mục HREF dấu hiệu liên kết nội Intel Home Page Home Click here Download Mã HTML Download Email me Forum Ý nghĩa Liên kết đến trang máy chủ khác Liên kết đến trang khác thư mục Gọi hàm JavaScript Kí tự cần hiển thị < > & “ khoảng trng Â, #, Ơ 1/2 , 1/3, /4 ữ, đ, â Mó thay th < > & " ¢, £, ¥ ¼, ½, ¾ ÷, ° ®, © Hiển thị cửa sổ tải tập tin 67 68 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org 2.6 Chuyển hướng trang tự động (Automatic redirect) Để định nghĩa trang tự động chuyển sang địa khác sau khoảng thời gian định trước, ta chèn sau tag tag sau: Trang web chứa tag tự động chuyển sang trang http://domain/directory/file.html sau khoảng thời gian giây ĐỊNH DẠNG BẢNG BIỂU Tag dùng để định dạng bảng với tag , để định dạng dòng, cột Các dòng, cột bảng thường gọi cell Các thuộc tính thường dùng là: BORDER (định nghĩa đường viền, đặt giá trị khơng có đường viền), BGCOLOR (màu nền), ALIGN (canh chỉnh), WIDTH (chiều rộng, theo % kích thước cửa sổ pixel), CELLPADDING (khoảng cách nội dung đường biên cell), CELLSPACING (khoảng cách cell) Đoạn mã HTML sau minh họa bảng liệu gồm có dịng, cột, kích thước 300 pixel, khoảng cách nội dung đường biên cell 5: MSSV Họ tên 9901234 Trần Đức Vũ Lê Đình Duy - ĐH KHTN Tp HCM 69 Hình – Minh họa bảng đơn giản Để trộn (merge)/tách (split) dòng cột lại với ta dùng thuộc tính tương ứng ROWSPAN COLSPAN Ví dụ sau minh họa bảng vừa có trộn/tách dòng cột: Mã nhóm MSSV Họ tên Nhóm 01 9901234 Trần Đức Văn 9901235 Hoàng Minh Vũ 70 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org xử lí liệu nhập từ form), METHOD (phương thức chuyển liệu), NAME (tên form – dùng cho xử lí sau này) Người dùng nhập liệu cho form thông qua ô nhập liệu (thường gọi controls) textbox, checkbox, radio button, push button, dropdown listbox, Các ô nhập liệu đặt phần bao quanh cặp tag Khi form submit, liệu mà người dùng nhập vào ô nhập liệu chuyển đến chương trình xử lí form theo dạng = Chính mà thuộc tính NAME thuộc tính quan trọng khai báo ô nhập liệu Hình – Minh họa bảng có trộn/tách cột Có hai cách để thiết lập bề rộng (WIDTH) cell bảng, tính theo % tính theo pixel Trong nhiều trường hợp, việc đặt theo % làm cho kích thước bảng thay đổi tùy theo liệu độ phân giải hình máy người dùng, để đảm bảo tính quán hiển thị liệu bảng, nên chọn cách tính theo pixel Trong thiết kế trang web, bảng biểu đóng vai trị quan trọng cơng cụ dùng để thể trình bày phức tạp trang web Hiện nay, phần mềm hỗ trợ soạn thảo trang web hỗ trợ chưa tốt thao tác phức tạp bảng biểu Do đó, cách tốt kết hợp hai Nghĩa là, việc sử dụng phần mềm để phát sinh bảng biểu cách trực quan, ta phải sử dụng mã HTML để can thiệp phần mềm không đáp ứng trình bày phức tạp có bảng vừa lồng vào nhau, dòng cột trộn/tách nhiều lần, Một form submit, liệu chuyển đến cho chương trình xử lí form theo dạng = Người ta dùng dấu “&” để ngăn cách liệu control khác Ví dụ sau minh họa form liệu submit có dạng: http://localhost/Update.asp?USERID=ledduy&FULLNAME=Le+Dinh +Duy&EMAIL=ledduy@yahoo.com&btnSubmit=Update
Full Name: Email:
FORM VÀ CÁC THÀNH PHẦN CỦA FORM Form thường dùng công cụ hỗ trợ nhập liệu cho ứng dụng Web, tương tự hộp thoại (dialog) ứng dụng Windows Hoạt động form thông thường là: ứng dụng hiển thị form để yêu cầu nhận thông tin từ người dùng, người dùng điền thông tin kết thúc việc nhập liệu cách submit form Sau liệu chuyển đến chương trình xử lí tương ứng Hình – Cách liệu chuyển đến trình xử lí form Một số kí tự đặc biệt chuyển đổi trước liệu chuyển đi: Tag dùng để thiết lập form nhập liệu Các thuộc tính là: ACTION (được dùng để định chương trình Lê Đình Duy - ĐH KHTN Tp HCM 71 72 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Kí tự nhập vào Kí tự thay chuyển + %3D %0A %0D %25 %38 Để tạo ô nhập liệu dạng hộp văn bản, nút nhấn, checkbox, radio button, … ta dùng tag đặt giá trị tương ứng với loại nhập liệu cho thuộc tính TYPE khoảng trắng = dấu xuống dòng (line feed) ðầu dòng (carriage return) % & Giá trị gán cho thuộc tính VALUE nhãn nút nhấn Ví dụ sau minh họa việc tạo hai nút Submit Reset: 4.3 Radio button 4.1 Hộp văn (TextBox) Dùng để nhập liệu dịng Để tạo nhập liệu dạng này, ta định thuộc tính TYPE=”TEXT” tag Ví dụ sau minh họa mã HTML dùng để tạo ô nhập liệu dạng hộp văn bản, có tên USRNAME, kích thước 25 kí tự, giá trị mặc định ledduy: Username: Thuộc tính SIZE dùng để số kí tự hiển thị nhập liệu (đây chiều rộng nhập liệu) Thuộc tính MAXLENGTH dùng để số kí tự tối đa nhập Khi muốn định liệu nhập vào control dạng mật (nghĩa kí tự nhập vào khơng hiển thị mà thay vào dấu *), ta định thuộc tính TYPE=”PASSWORD”.Ví dụ: Password: Dùng để chọn tập lựa chọn liệt kê Để tạo nhóm radio button, ta phải định thuộc tính TYPE=”RADIO” tag radio button radio buttuon phải có giá trị thuộc tính NAME Khi form submit, liệu radio button chọn (giá trị gán cho thuộc tính VALUE) chuyển với tên radio button Để đặt radio button mặc định, ta thêm vào thuộc tính CHECKED Ví dụ: Ví dụ sau minh họa lựa chọn giới tính (Sex) thơng qua hai radio button Nam (Male) Nữ (Female): Sex:Male Female 4.4 Checkbox 4.2 Nút nhấn (Button) Khi định thuộc tính TYPE=”BUTTON” tag ta tạo nút nhấn nói chung Trong form thơng thường có hai loại nút nhấn đặc biệt nút nhấn SUBMIT nút nhấn RESET Nút nhấn RESET nút nhấn mà người dùng nhấn chuột vào, liệu ô nhập liệu khác khác đặt giá trị mặc định lúc khởi tạo Để tạo ta Lê Đình Duy - ĐH KHTN Tp HCM định thuộc tính TYPE=”RESET” tag Trong nút nhấn SUBMIT nút nhấn dùng để kết thúc việc nhập liệu form Để tạo nút nhấn dạng này, ta định thuộc tính TYPE=”SUBMIT” tag 73 Dùng để chọn nhiều tập lựa chọn đề nghị Khi ta định thuộc tính TYPE=”CHECKBOX” tag , ta tạo ô nhập liệu kiểu checkbox Tương tự radio button, checkbox check, giá trị trả tương ứng với giá trị thuộc tính VALUE Để đặt check box ON, ta thêm vào thuộc tính CHECKED 74 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Ví dụ sau minh họa nhóm checkbox dùng để lấy thơng tin ngôn ngữ chọn: Language: English French Japanese Để tạo nhập liệu có kiểu HIDDEN, ta định thuộc tính TYPE=”HIDDEN” tag ví dụ sau: Mỗi form submit, ngồi nhập liệu hiển thị hình, ta có thêm nhập liệu có tên “USRID” giá trị “ledduy” chuyển đến cho trình xử lí 4.5 Dropdown listbox Dùng để lựa chọn Ta sử dụng tag để tạo Mỗi mục dropdown listbox định nghĩa tag Ví dụ sau minh họa việc chọn nghề nghiệp liệt kê sẵn: Occupation: Other Engineer Teacher Doctor Worker 4.7 Vùng văn (TextArea) Dùng để nhập liệu nhiều dịng Để tạo nhập liệu dạng ta dùng tag Dữ liệu nằm cặp tag giá trị trả control dạng Ví dụ: Other information: Thuộc tính ROWS COLS dùng để số dịng cột vùng liệu nhập Để đặt mục chọn dropdown listbox mặc định, ta thêm vào thuộc tính SELECTED Để tạo multi-select listbox ta đặt thêm thuộc tính SIZE MULTIPLE vào tag Khi form submit, liệu tương ứng với mục chọn (giá trị gán cho thuộc tính VALUE tag ) dropdown listbox chuyển với tên dropdown listbox Ví dụ trường hợp ví dụ trên, người dùng chọn Worker, giá trị trả ô nhập liệu 4.6 Ô liệu ẩn (Hidden field) Dùng để lưu trữ thông tin form cần thiết cho chương trình xử lí sau lại khơng hiển thị dạng control Ta lấy ví dụ form cập nhật thông tin sinh viên Các thông tin mà người dùng cập nhật thường Họ tên, Ngày tháng năm sinh, hiển thị ô nhập liệu form Tuy nhiên để chương trình xử lí form cập nhật biết cần cập nhật sinh viên nào, cần phải có thêm thơng tin Mã số sinh viên (giả sử đóng vai trị khóa sở liệu) Thơng tin Mã số sinh Lê Đình Duy - ĐH KHTN Tp HCM viên lưu trữ nhập liệu form có kiểu HIDDEN Thông tin không hiển thị hình người dùng chuyển form submit 75 Ví dụ sau minh họa form nhập liệu gồm có đầy đủ ô nhập liệu kể trên: Username: Password: Sex:Male Female Language: English French Japanese Occupation: Other Engineer Teacher Doctor 76 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Worker Other information:

Hình 3.10 - Minh họa frame Tag định nghĩa cách tổ chức frame Tag định nghĩa chi tiết frame Các thuộc tính tag là: ROWS (định nghĩa số frame phân theo chiều dọc), COLS (định nghĩa số frame phân theo chiều ngang), FRAMEBORDER (định nghĩa đường viền khung frame con, giá trị YES NO) Hình – Minh họa form nhập liệu FRAME Nội dung hiển thị trình duyệt tích hợp từ nhiều cửa sổ khác nhau, cửa sổ chứa URL tương ứng với trang web Ví dụ sau cho ta thấy có ba cửa sổ, cửa sổ chứa thực đơn nằm ngang, cửa sổ chứa thực đơn bên trái cửa sổ chứa nội dung bên phải Trong trường hợp dùng tag để định nghĩa Các thuộc tính tag là: SRC (địa URL trang web hiển thị frame), NAME (tên frame, dùng thành phần TARGET hyperlink), BORDER (đường viền khung, khơng muốn có đường viền đặt giá trị 0), MARGINHEIGHT, MARGINWIDTH (canh chỉnh lề), SCROLLING (có hiển thị scrollbar hay khơng, giá trị thường dùng YES, NO, AUTO), NORESIZE (không cho phép người dùng hiệu chỉnh kích thước frame window) Để định nghĩa frame lồng ta dùng tag lồng Ví dụ sau minh họa định nghĩa trang web trên: Lê Đình Duy - ĐH KHTN Tp HCM 77 78 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Welcome to IS-EDU Site 6.2 Các cách sử dụng style sheets Có cách sử dụng style sheets tùy vào nhu cầu thiết kế: • Bằng cách liên kết (linking) đến tập tin chứa style sheet Cách cho phép bạn thay đổi cách trình bày nhiều trang web cách dễ dàng thông qua việc sửa đổi tập tin chứa style sheet mà thơi • Bằng cách nhúng (embedding) style sheet vào tập tin HTML Cách cho phép bạn thay đổi cách trình bày trang web thông qua việc sửa định nghĩa style sheet ban đầu • Bằng cách thêm inline styles vào trang HTML Cách cho phép bạn thay đổi cách nhanh chóng cách thể hện tag, nhóm tag khối thơng tin trang web CASCADING STYLE SHEET (CSS) Sử dụng style sheet giúp cho người soạn thảo trang web dễ dàng thiết kế hiệu chỉnh trang web đồng thời đảm bảo tính qn trình bày website Một style sheet mẫu định dạng (template) HTML tag Khái niệm style sheet trang Web tương tự với khái niệm templates MS Word Bạn thay đổi trình bày văn Word thông qua việc thay đổi style văn Một cách tương tự, bạn thay đổi trình bày trang Web cách thay đổi style sheet gán cho HTML tag 6.1 Các lợi ích style sheet: Sử dụng thuộc tính leading, margins, indents, point sizes, and text background colors trang web Đây thuộc tính mà tag HTML khơng hỗ trợ trực tiếp Thay đổi thuộc tính trang web toàn trang web website mà khơng cần phải hiệu chỉnh dịng liên quan đến định dạng tậpt in HTML Ví dụ, ta dùng tag với thuộc tính FACE=Arial để định font chữ cho văn trang web website, ta phải hiệu chỉnh tag toàn trang web ta muốn đổi tất văn sang font chữ khác, ví dụ Tahom a Lê Đình Duy - ĐH KHTN Tp HCM 79 6.3 Cú pháp bản: Cả hai kiểu linked and embedded style sheets chứa nhiều định nghĩa style Một định nghĩa style (style definition) gồm có HTML tag, sau danh sách thuộc tính tag đặt bên dấu “{“ “}” Mỗi thuộc tính xác định tên thuộc tính, theo sau dấu “:” giá trị thuộc tính Các thuộc tính phân cách với dấu “;” Ví dụ sau minh họa style definition gán cho tag : FONT{font-size: 15pt; font-weight: bold} Sau định nghĩa style mới, để dùng tag, ta gán tên style cho thuộc tính class tag Ví dụ sau minh họa style có tên txtInputText, sau dùng để định font chữ cho dropdown listbox: Test 80 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org Tuổi Trẻ Lao Ðộng Thanh Niên
6.4 Liên kết đến Style Sheet Để sử dụng style sheet cho trang web site, trước tiên bạn phải tạo tập tin css lưu trữ định nghĩa style, sau trang web muốn sử dụng style sheet này, bạn phải tiến hành thủ tục liên kết Ví dụ, bạn có tập tin style sheet có tên MYSTYLES.CSS đặt địa http://internet-name/mystyles.css, để liên kết vào trang web mình, bạn thêm dịng sau nằm tag Title of article H2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} P {font: 10pt/12pt "Arial"; color: black} > 6.6 Sử dụng Inline Styles Các định nghĩa Inline style ảnh hưởng trực tiếp đến tag hành Chúng nhúng vào bên tag cách sử dụng tham số STYLE Ví dụ: Tuổi Trẻ Lao Ðộng Thanh Niên 6.5 Nhúng STYLE Block vào trang HTML Để nhúng a style sheet, bạn thêm block vào đầu trang web tag Cách cho phép bạn thay đổi trình bày trang web mà Theo sau tag định dạng kết thúc tag Ví dụ sau định nghĩa style cho tag , , ,
: Lê Đình Duy - ĐH KHTN Tp HCM 81 82 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org THỰC HÀNH SỬ DỤNG PHẦN MỀM SWISH ĐỂ TẠO CÁC HIỆU ỨNG ĐỒ HỌA ĐƠN GIẢN Phần mềm Swish cho phép tạo hiệu ứng động từ đơn giản đến phức tạp Kểt cuối ứng dụng tập tin swf chạy trình duyệt có cài đặt sẵn Macromedia Flash Player Đối tượng soạn thảo hiệu ứng động Swish gọi Movie (đoạn phim) Một movie tập hợp nhiều Scene (phân cảnh) khác nhau, scence bao gồm tập hợp Objects (đối tượng) Hai đối tượng hỗ trợ phiên Swish 1.51 Text Objects (tập kí tự) Image Objects (hình ảnh) Các đối tượng scence hoạt hình (animate) thơng qua việc thiết lập Effects (hiệu ứng) Các hiệu ứng lập trình sẵn để sinh Frames (khung hình) tương ứng Hình 12 – Cửa sổ View Window Sau cài đặt xong, phải đăng kí sử dụng Một đăng kí sử dụng hợp lệ làm mờ mục Purchase hình làm việc Swish 1.2 Thiết lập thông số cho movie Trong tab General, hiệu chỉnh thông số liên quan đến chiều rộng, chiều cao, màu nền, tốc độ hiển thị khung hình movie Lưu ý rằng, ta hiệu chỉnh chiều rộng chiều cao cách dùng chuột hiệu chỉnh View Window 1.1 Cài đặt Swish Cài đặt Swish từ đĩa CD Khởi động ứng dụng Swish Màn hình làm việc xuất với View Window Hình 13 – Hiệu chỉnh thông số movie 1.3 Tạo lập movie đơn giản Ngay khởi động, ứng dụng tự động tạo scence có tên Scene1 Nếu muốn chèn thêm scene khác, nhấn nút bên trái nút hình chữ T cơng cụ chọn thực đơn Modify/Insert Scene Ta chèn đối tượng văn vào scene cách nhấn nút hình chữ T cơng cụ chọn thực đơn Modify/Insert Text Trong trường hợp có nhiều đối tượng văn Hình 11 – Màn hình làm việc Swish Lê Đình Duy - ĐH KHTN Tp HCM 83 84 Email: ledduy@ieee.org Lê Đình Duy - ĐH KHTN Tp HCM Email: ledduy@ieee.org scene, để thiết lập thứ tự, ta chọn đối tượng nhấn nút mũi tên lên mũi tên xuống đạt vị trí mong muốn Để thay đổi vị trị mặc định văn vừa ra, click vào cửa sổ View Window kéo đến vị trí mong muốn Ví dụ ta kéo đoạn văn phía phải View Window: Hình 14 – Thay đổi vị trí văn vừa chèn vào Để thay đổi nội dung đoạn văn bản, chọn tab Text hình làm việc thay Chúng ta thay đổi font chữ, kích thước, màu sắc, kiểu chữ (bold, italic, ) Hình 16 – Thiết lập hiệu ứng cho đối tượng Đối với số hiệu ứng, có hộp thoại yêu cầu bạn nhập thuộc tính hiệu ứng Nếu muốn giữ thuộc tính mặc định, chọn OK hình thiết lập hiệu ứng Ví dụ: Hình 15 – Hiệu chỉnh nội dung thuộc tính văn Để thêm vào hiệu ứng cho đối tượng scene, chọn Timeline Tab click đối tượng cần đặt hiệu ứng, sau nhấn nút Add Effect Lê Đình Duy - ĐH KHTN Tp HCM 85 Hình 17 – Thiết lập thơng số cho hiệu ứng 86 Email: ledduy@ieee.org ... nghĩa Nạp trang web cửa sổ FRAME có tên name Nạp trang web vào cửa sổ trống Cửa sổ khơng có tên Nạp trang web vào cửa sổ cha gần trang web hành Nạp trang web vào cửa sổ với trang web hành Ðây giá... khoảng trắng vào hiển thị, ba đoạn cho kết là: THIẾT KẾ TRANG WEB The browser will ignore new lines and extra spaces in the text GIỚI THIỆU VỀ HTML HTML ngôn ngữ dùng để xây dựng trang web Nó mơ... dạng nội dung trang web Hiển thị trình duyệt This is webpage This is webpage This is webpage This is webpage • : Mô tả tiêu đề trang Tiêu đề trang web thường hiển thị tiêu