Đại Cương Về Thiết Kế Web Và Lập Trình Web- P7 doc

5 290 0
Đại Cương Về Thiết Kế Web Và Lập Trình Web- P7 doc

Đang tải... (xem toàn văn)

Thông tin tài liệu

http://www.ebook.edu.vn 31 Ví dụ minh họa: <HTML> <HEAD> <TITLE>HTML Forms</TITLE> <BODY> <FORM METHOD="POST" ACTION="http://www.cse.com.vn/scripts/auth.asp"> <P> Tên NSD <INPUT TYPE="TEXT" SIZE="30"><BR> Mật khẩu <INPUT TYPE="PASSWORD" SIZE="20"> </P> <INPUT TYPE="SUBMIT" VALUE="Đăng nhập"> </FORM> </BODY> </HTML> Hình 2.4 Ví dụ về thẻ INPUT trong FORM d. Tạo một danh sách lựa chọn bằng thẻ SELECT và OPTION Cú pháp: <SELECT NAME="tên danh sách" SIZE="chiều cao"> <OPTION VALUE=value1 SELECTED> Tên mục chọn thứ nhất <OPTION VALUE=value2> Tên mục chọn thứ hai <! Danh sách các mục chọn > </SELECT> http://www.ebook.edu.vn 32 Ví dụ minh họa: <HTML> <HEAD> <TITLE>Danh sách lựa chọn</TITLE> </HEAD> <BODY> <P>Thông tin:</P> <SELECT> <OPTION VALUE="1" SELECTED>Thời tiết <OPTION VALUE="2">Truyền hình <OPTION VALUE="3">Thị trờng <OPTION VALUE="4">Thời sự QT </SELECT> </BODY> </HTML> Hình 2.5 Ví dụ tạo một danh sách lựa chọn e. Tạo hộp soạn thảo văn bản bằng thẻ TEXTAREA Cú pháp: <TEXTAREA COLS=số cột ROWS=số hng NAME=tên > Văn bản ban đầu </TEXTAREA> http://www.ebook.edu.vn 33 Ví dụ minh họa: <HTML> <HEAD> <TITLE>Hộp soạn thảo</TITLE> </HEAD> <BODY> <P >Nhận xét:</P> <TEXTAREA COLS="30" ROWS="5" NAME="nx"> </TEXTAREA> </BODY> </HTML> Hình 2.6 Tạo hộp soạn thảo văn bản 2.3 DHTML (Dynamic HTML) 2.3.1 Định nghĩa: Ngôn ngữ đánh dấu siêu văn bản động (Dynamic Hypertext Markup Language) là phiên bản mở rộng của HTML và JavaScript, ngôn ngữ này đợc dùng để tạo trang thông tin trên World Wide Web. Dynamic HTML có vị trí văn bản và đồ họa rất chính xác vì nó cho phép nội dung của trang Web thay đổi mỗi khi ngời dùng nhấn, kéo hay trỏ vào nút, hình ảnh hay các thành phần khác trên trang này. 2.3.2 Đặc điểm Ngôn ngữ đánh dấu siêu văn bản động mang lại cho các nhà phát triển khả năng tạo những trang Web có hình thức và tính năng nh một ứng dụng thực sự. HTML động cho phép ngời dùng định vị chính xác văn bản và hình ảnh trên trang Web. Cả hai trình duyệt của Netscape và Microsoft và mới nhất là của Mozilla đều hỗ trợ hệ CSS để kiểm soát vẻ ngoài của trang Web. Ví dụ, các nhà phát triển có thể thay đổi kiểu chữ và kích cỡ của từng dòng tiêu đề trên Web site một cách đơn giản bằng cách thay đổi đặc tả trong trang đơn xác định hình thức http://www.ebook.edu.vn 34 (Cascading Style Sheet) tơng ứng. HTML động có cả khả năng liên kết cơ sở dữ liệu với trang Web để sửa đổi nội dung ngay trong khi thực thi. Trớc khi trang HTML động đợc duyệt, trình duyệt phải bổ sung mã chơng trình chạy ngoài trình duyệt nh Java hay thành phần ActiveX. 2.3.3 Một số hiệu ứng DHTML a. Tạo chuỗi ký tự chuyển động Cú pháp: <MARQUEE BEHAVIOR =type DIRECTION =LEFT | RIGHT LOOP =n VSCROLLAMOUNT=n SCOLLDELAY =n > Chuỗi ký tự muốn chuyển động </MARQUEE> Các thuộc tính: Các tham số ý nghĩa BEHAVIOR Xác định cách thức chuyển động, với type=scroll thì chuỗi ký tự bắt đầu xuất hiện tại 1 cạnh của cửa sổ màn hình và biến mất ở cạnh bên kia, với type=slide thì chuỗi bắt đầu chuyển động từ 1 cạnh và dừng lại ở cạnh bên kia khi chuỗi chạm vào cạnh kia, với type=alternate thì chuỗi xuất hiện từ bên này sang bên kia và chuyển động ngợc lại. DIRECTION Định hớng chuyển động cho chuỗi ký tự. LOOP Xác định số lần chuyển động của chuỗi. Nếu loop=infinite thì chuỗi sẽ xuất hiện liên tục. VSCROLLAMOUNT Xác định tốc độ chuyển động của chuỗi, tính bằng số pixel/giây. SCOLLDELAY Thời gian ngừng sau 1 lần chuyển động. Nếu không có các thuộc tính trên thì chuyển động lặp đi lặp lại từ phải sang trái với tốc độ 6 pixel/1 giây và thời gian ngừng giữa các lần chạy là 90 giây. Ví dụ minh họa: <HTML> <HEAD> <TITLE>Chuỗi ký tự chuyển động</TITLE> </HEAD> <BODY> <P><font color=red face=tahoma size=4></font></P> <MARQUEE BEHAVIOR=scroll DIRECTION=LEFT http://www.ebook.edu.vn 35 LOOP=infinite SCROLLAMOUNT=60 SCOLLDELAY=5 >Ví dụ chuỗi ký tự chuyển động trong DHTML </MARQUEE> </BODY> </HTML> b. Thay đổi hình dạng chuột khi qua một vị trí Cú pháp: <TD STYLE= cursor:thuộc tính của cursor> Các thuộc tính và hình dạng tơng ứng: Auto Hand Move Text Wait Help Default Crosshair Ví dụ minh họa: <HTML> <HEAD> <TITLE>Ví dụ về Cursor</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR> <TD STYLE=cursor:auto>auto</TD> <TD STYLE=cursor:hand>hand</TD> <TD STYLE=cursor:move>move</TD> <TD STYLE=cursor:text>text</TD> <TD STYLE=cursor:wait>wait</TD> <TD STYLE=cursor:help>help</TD> <TD STYLE=cursor:default>default</TD> <TD STYLE=cursor:crosshair>crosshair</TD> </TR> </TABLE> </BODY> </HTML> 2.4 Câu hỏi và bài tập chơng 2 Câu 1: Khái niệm ngôn ngữ HTML? Câu 2: Nêu các thẻ xác định cấu trúc tài liệu HTML và ý nghĩa của chúng. Câu 3: Ngôn ngữ đánh dấu siêu văn bản động (DHTML): khái niệm, đặc điểm. Bài 1: Thiết kế website chơng trình đào tạo cử nhân CNTT hệ cao đẳng trờng Sĩ quan CH-KT Thông tin, trang gồm 3 frame nh hình sau, toàn bộ website sử dụng font Time New Roman, yêu cầu: Top frame gồm có logo bên trái, chính giữa là banner của site, dòng slogan chạy bên dới. . vị chính xác văn bản và hình ảnh trên trang Web. Cả hai trình duyệt của Netscape và Microsoft và mới nhất là của Mozilla đều hỗ trợ hệ CSS để kiểm soát vẻ ngoài của trang Web. Ví dụ, các nhà. khả năng liên kết cơ sở dữ liệu với trang Web để sửa đổi nội dung ngay trong khi thực thi. Trớc khi trang HTML động đợc duyệt, trình duyệt phải bổ sung mã chơng trình chạy ngoài trình duyệt. khái niệm, đặc điểm. Bài 1: Thiết kế website chơng trình đào tạo cử nhân CNTT hệ cao đẳng trờng Sĩ quan CH-KT Thông tin, trang gồm 3 frame nh hình sau, toàn bộ website sử dụng font Time New

Ngày đăng: 08/07/2014, 08:20

Từ khóa liên quan

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan