Giáo trình HTML và thiết kế Web (Phần 2)
CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN
V.1. Thẻ neo và mối liên kết
Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một
tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó.
Liên kết siêu văn bản gồm có ba phần: giao thức, cái neo và địa chỉ hay URL
Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ
tạo neo là (Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định
rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau.
V.1.1. Thuộc tính HREF
HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên
kết đến:
Một tài liệu khác (external link) hay
Một phần khác nằm trong chính tài liệu đang đọc (internal link)
Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link
thì không cần phải có phần giao thức.
Tóm tắt nội dung tài liệu: Giáo trình HTML và thiết kế Web (Phần 2)
44 CHƯƠNG V. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN V.1. Thẻ neo và mối liên kết Các liên kết siêu văn bản trong một tài liệu HTML là để tham chiếu đến một tài liệu khác hay một phần tài liệu khác nằm trong tài liệu đó. Liên kết siêu văn bản gồm có ba phần: giao thức, cái neo và địa chỉ hay URL Để tạo một mối liên kết thì việc đầu tiên cần làm là thiết lập cái neo. Cặp thẻ tạo neo là (Anchor). Thẻ này có nhiều thuộc tính bắt buộc phải xác định rõ, ta sẽ tìm hiểu kỹ hơn ở phần sau. V.1.1. Thuộc tính HREF HREF (Hypertext REFerence – tham chiếu siêu văn bản) được dùng để liên kết đến: Một tài liệu khác (external link) hay Một phần khác nằm trong chính tài liệu đang đọc (internal link) Giao thức để tham chiếu HREF là HTTP. Nếu là liên kết nội tại – internal link thì không cần phải có phần giao thức. V.1.2. Liên kết ra ngoài – External Links Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị. Nên chọn các từ làm đầu mối sao cho gợi tả và sao cho tự nhiên, không ảnh hưởng đến nội dung và ý nghĩa của câu văn. Tránh sử dụng lặp đi lặp lại câu "nhấn vào đây" khi tạo đầu mối liên kết. 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 - là như sau: Nhóm từ đầu mối liên kết 45 V.1.3. Địa chỉ tuyệt đối Khi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức và đầy đủ địa chỉ URL của tệp đích. ... Ví dụ: ĐHQG Hà Nội Victorian Subject Associations on Internet V.1.4. Địa chỉ tương đối Nếu liên kết đến một tệp ở ngay trên máy chủ của bạn thì không cần dùng địa chỉ URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường đẫn đến thư mục nơi chứa tệp đích. ... Ví dụ: Ví dụ 1 V.1.5. Liên kết nội tại – Internal Link Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng. Để làm điều này, cần đánh dấu điểm đích - book mark- của liên kết bằng thẻ neo còn trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng tên nói trên. Lưu ý có thêm dấu "#". Ví dụ, để tạo liên kết nội tại từ đây nhảy về đầu trang ta cần tạo một book mark ở đầu trang với tên là Top chẳng hạn. Sau đó, tạo thẻ neo liên kết ở dòng dưới như sau 46 về đầu trang V.2. Dùng hình ảnh làm đầu mối liên kết V.2.1. Thay chữ bằng hình Như ở phần trên, cấu trúc thành phần HTML mối liên kết siêu văn bản là: Để thay “đầu mối liên kết” bởi một biểu tượng, hay một hình ảnh... Ta chỉ cần chèn một hình ảnh hay biểu tượng đó vào vị trí của “đầu mối liên kết”. Ví dụ: V.2.2. Image Map - thẻ AREA Thử hình dung ta có một bản đồ địa lý hành chính. Khi nhấn chuột vào vùng diện tích của một tỉnh thì một trang thông tin tương ứng với tỉnh đó sẽ hiện ra. Đó chính là Image Map. Với Image Map, “đầu mối liên kết” là một vùng trên một hình ảnh có hình dạng tùy ý nào đó. Các công cụ soạn thảo trực quan cho phép dễ dàng tạo Image Map. Một ví dụ về mã nguồn HTML của thành phần Image Map như sau: <AREA HREF=”chapter1.html” SHAPE=”rect” coords=”6, 22, 167, 169”> <AREA HREF=”chapter2.html” SHAPE=”circle” coords=”259, 106, 36”> <AREA HREF=”chapter3.html” SHAPE=”polygon” coords=”123, 196, 56, 211, 278, 201”> <IMG BORDER=”0” SRC=”image.gif” WIDTH=”400” HEIGHT=”600” USEMAP=”#Map01”> Đoạn mã trên sẽ tạo 3 đầu mối liên kết là ba vùng hình chữ nhật (rect), hình tròn (circle) và hình tam giác (polygon) trên nền ảnh image.gif. Khi nhấn chuột vào phạm vi 3 vùng này thì các tệp tương ứng chapter1.html, chapter2.html và chapter3.html sẽ được nạp về để hiển thị. 47 V.3. Đưa âm thanh vào tài liệu V.3.1. Liên kết đến tệp âm thanh Để chèn một đoạn âm thành vào tài liệu HTML ta cũng theo đúng quy tắc tạo mối liên kết thông thường. Trong thẻ neo, tại địa điểm URL bây giờ là địa chỉ của tệp âm thanh. Dưới đây là một ví dụ về việc chèn âm thành vào tài liệu. Khi nhấn chuột vào mối liên kết này, tệp âm thanh sẽ được phát lại. Papa V.3.2. Tạo âm thanh nền Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể nhúng âm thanh vào tài liệu, nghĩa là âm thanh nền phát ra khi trang tài liệu bắt đầu hiển thị. Để nhúng âm thanh vào tài liệu ta dùng thẻ <EMBED SRC=”URL” HEIGHT=”n” WIDTH=”n’ AUTOSTART=true|false LOOP=true|false> Trong đó: Thuộc tính Mô tả SRC=”URL” Đường dẫn đến tệp âm thanh HEIGHT=n Chiều cao của khung nhìn cho giao diện điều khiển của phần mềm phát âm thanh WIDTH=n Chiều rộng của khung nhìn cho giao diện điều khiển của phần mềm phát âm thanh AUTOSTART=true|false Âm thanh tự động được kích hoạt khi bắt đầu nạp tài liệu hiện thị (nên đặt là true) LOOP=true|false Thiết lập việc lặp lại nhiều lần hay chỉ một lần Đặt thẻ ở đâu thì khung nhìn của giao diện điều khiển việc phát tệp âm thanh xuất hiện ở đó. Ví dụ: <EMBED SRD=”music/papa.rmi” HEIGHT=50 WIDTH=200 AUTOSTART=true LOOP=true> 48 V.4. Đưa Video vào tài liệu V.4.1. Chèn tệp Video Việc chèn tệp video vào tài liệu HTML cũng giống như chèn tệp âm thanh. Ví dụ đoạn mã sau đây sẽ chèn một đoạn phim video vào tài liệu. Nó sẽ tạo ra một mối liên kết tới tệp video đã chọn và khi ta nhấn chuột vào mối liên kết thì sẽ được xem lại tệp video đó. Film Chú ý: Các tệp video đều có kích thước khá lớn nên hãy cân nhắc về tốc độ đường truyền của người dùng. V.4.2. Nhúng tệp video Thẻ cũng dùng để nhúng tệp video vào tài liệu: Ví dụ: Cũng tương tự như các thuộc tính của việc chèn tệp âm thanh: Thuộc tính Mô tả SRC=”URL” Tên và đường dẫn đến tệp video HEIGHT=n Chiều cao của khung hình chiếu video WIDTH=n Chiều rộng của khung hình chiếu video AUTOPLAY=true|false Đặt cho video tự chạy khi bắt đầu nạp tài liệu (không bắt buộc) CONTROLLER=true|flase Cho hiện giao diện điều khiển của phần mềm video ở liền ngay phía dưới khung hình. Thuộc tính này không bắt buộc. Mặc định là true. LOOP=true|false Thiết lập việc lặp lại nhiều lần hay chỉ một lần Vị trí đặt thẻ là nơi xuất hiện khung hình video. 49 Bài tập 1. Tạo một trang khác giới thiệu chi tiết hơn về mình và có liên kết tới trang giới thiệu chính của mình. 2. Chèn 2 ảnh vào trong trang giới thiệu chính sao cho khi click vào ảnh đó thì trang giới thiệu chi tiết được mở ra. Yêu cầu: ảnh thứ nhất sử dụng đường dẫn tuyệt đối, ảnh thứ hai sử dụng đường dẫn tương đối tới trang cần liên kết. 3. Tạo một trang thứ ba trong đó có chèn một đoạn Video clips ở giữa trang. 50 CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG VI.1. Màu nền và văn bản VI.1.1. Đặt màu nền Để văn bản trở nên đẹp và hấp dẫn, đôi khi đặt nền cho trang siêu văn bản. Thuộc tính BGCOLOR (Background Color). Dùng thuộc tính này kèm thẻ để đặt màu nền cho văn bản. Cú pháp như sau: Nội dung của tài liệu trong đó "#rrggbb" là red-green-blue, bộ ba số hai chữ số hệ đếm 16, xác định mã màu. VI.1.2. Màu chữ của văn bản Thuộc tính TEXT. Thuộc tính này để thiết lập màu cho các con chữ trong văn bản, trừ các đầu mối liên kết phải có màu khác đi. Nội dung của tài liệu ́ VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết. LINK - đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết. VLINK - Đặt màu sau khi đích liên kết đã được đến thăm (visited . ALINK - đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red Nội dung của tài liệu Kết hợp cùng với nhau 51 Color Control Example <BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF"> Đây là một tài liệu làm ví dụ về thiết đặt màu. Các chữ màu xám sáng trên nền đen, và <A HREF="nowhere.htm">đầu mối liên kết đầu tiên có màu vàng, chuyển màu xanh lá cây sáng khi được kích hoạt và có màu xanh nhạt khi điểm đích đã được thăm Lưu ý: Tổ hợp màu như trên chỉ được thiết đặt một lần cho toàn văn bản. Hãy thận trọng khi lựu chọn để đảm bảo dễ đọc, dễ nhìn. VI.1.4. Thuộc tính và mã màu <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Thuộc tính Mô tả BGCOLOR Đặt màu nền TEXT Đặt màu các con chữ, trừ các mối nối. LINK Đặt màu ban đầu của đầu mối liên kết khi chưa kích hoạt VLINK Đặt màu đầu mối liên kết khi đã thăm đích ALINK Đặt màu đầu mối liên kết khi kích hoạt Một vài mã màu hay dùng: Màu Mã black #000000 white #FFFFFF pale grey #DBDDE5 dark green #306020 green #405060 pale blue/green #00FFFF pale blue #A5D6F7 navy blue #000020 52 burgundy #800040 yellow #FFFF00 purple #601050 red #FF0000 orange red #FF2400 orange #FF7F00 neon blue #4D4DFF pale purple/orchid #9370DB maroon #8E236B scarlet #8C1717 pale purple #6B238E firebirch #8E2323 Tuy nhiên hiện nay nhiều trình duyệt chấp nhận dùng tên màu tiếng Anh thay cho các chữ số rất khó nhớ ở trên. VI.2. Nạp hình ảnh làm nền cho trang văn bản VI.2.1. Thuộc tính BACKGROUND Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn bản. Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn. Nội dung tài liệu ́ Ví dụ: Khi dùng ảnh làm nền cho trang Web cần phải nạp một tệp hình ảnh. Như ta đã biết tệp ảnh thường có kích thước lớn, làm chậm việc hiển thị trang tài liệu. Do đó cần chọn tệp ảnh có kích thước nhỏ làm ảnh nền. Toàn bộ trang văn bản sẽ được "lát nền" bằng hình ảnh này như ta lát nền nhà bằng gạch hoa. VI.2.2. Water mark Nhiều trang web có nền trang trí gắn chặt cố định, còn phần văn bản sẽ cuộn trôi bên trên mỗi khi ta di chuyển thanh trượt. Hiệu ứng này được tạo ra nhờ thiết lập thêm thuộc tính cho ảnh nền là 53 bgproperties="fixed" Ví dụ: <BODY BACKGROUND="images/backgnd.gif" bgproperties="fixed"> VI.2.3. Hãy ký tên vào tài liệu của mình Một thông lệ nên tuân theo là "kí tên" vào tài liệu. Nó giúp cho người đọc biết được những thông tin tối thiểu về tác giả soạn ra tài liệu, thời gian cập nhật... Việc đưa thêm địa chỉ của tài liệu Web vào cuối trang sẽ giúp cho người đọc lưu lại được xuất xứ của trang tài liệu. Đó là chưa nói đến ý nghĩa quan trọng của phần chữ kí này trong các tài liệu chính thức hoặc có tính thương mại. Phần chữ kí thường gồm các thông tin sau: Ngày khởi tạo lần đầu. Ngày sửa chữa cập nhật gần nhất. Tên (và e-mail) của tác giả Tuyên bố về bản quyền (nếu cần ) URL Đoạn mã HTML của phần chữ kí đại loại có thể như sau: Ngày viết: 20 September 1998 Ngày cập nhật: 20 October 2001 Tác giả: Nguyễn Văn Hùng email: webmaster@vitti.vnu.edu.vn"> Copyright © Viện Đào tạo công nghệ thông tin - VITTI, ĐHQG Hà nội, 1998. URL: ́ 54 Thẻ ... là mối liên kết đến dịch vụ thư điện tử, khi trỏ chuột vào đây sẽ kích hoạt dịch vụ e-mail để gửi đến địa chỉ nêu sau lệnh mailto. Hãy tập thói quen thêm chữ kí vào tài liệu của mình! VI.3. Khung – Frames HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau. Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung bên phải hiển thị tài liệu tương ứng. VI.3.1. Trang trí khung Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu trúc khác trang thông thường, không có khung. Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và FRAMESET thay cho BODY. Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame. Các thành phần thông thường khác vốn nằm trong BODY không được xuất hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESET sẽ bị bỏ qua. Ví dụ: Dưới đây là một ví dụ đơn giản. A simple frameset document 55 This frameset document contains: ..... Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây. Hình VI.1. Kết quả chạy đoạn code ví dụ Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ không được hiển thị mà thành phần NOFRAMES sẽ được xử lí. VI.3.2. Thành phần FRAMESET Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa bằng thẻ FRAME. a. Các thuộc tính và ví dụ minh họa rows = Danh sách các độ cao của các khung 56 Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần tử xác định độ cao (số dòng !) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử. Chiều cao thể hiện bằng - số pixel, - tỷ lệ phần trăm chiều cao màn hình - hay tỷ lệ phần chiều cao còn lại. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang. cols = Danh sách các độ rộng của các khung. ý nghĩa tương tự như trên. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc. Thuộc tính row thiết lập việc chia khung theo chiều ngang trong một frameset. Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều cao vùng hiển thị. Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset. Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng hiển thị. Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung. Các ví dụ. 1- Chia màn hình thành hai nửa: nửa trên và nửa dưới: ...the rest of the definition... 2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại. ...the rest of the definition... 3- Tạo lưới gồm 2 x 3 = 6 khung. ...the rest of the definition... 57 4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel. Dấu sao có nghĩa là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", gấp đôi khung thứ 3 (vì "*" tương đương với 1*). Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 lần lượt là: 300, 400, 100, 200 pixel !. ...the rest of the definition... b. Chia khung lồng nhau và thành phần FRAME Việc chia khung có thể lồng nhau nhiều mức. Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới. ...contents of first frame... ...contents of second frame, first row... ...contents of second frame, second row... ...contents of third frame... ... cho một thư mục mới nơi các file của site sẽ được lưu trữ. 4. Để chọn một thư mục khác, click nút Browse. Hộp thoại New Web Site Location sẽ xuất hiện. Sử dụng hộp thoại này để tìm kiếm và mở thư mục nơi ta sẽ lưu trữ các Web site mà ta sẽ làm việc trên đó bằng FrontPage. 5. Mỗi site FrontPage phải được cung cấp thư mục riêng của nó. Để tạo một thư mục cho site được nhập vào này, click nút Create New Folder. Hộp thoại New Folder xuất hiện. 6. Cho thư mục một tên trong Name và click OK. 7. Trong hộp thoại New Web Site Location, click nút Open. Thư mục được liệt kê trong hộp thoại danh sách Specify the Location of the New Website trong Import Web Wizard. 8. Click OK. Import Web Wizard mở ra. VIII.4.3. Chọn một phương pháp import Câu hỏi đầu tiên được hỏi bởi Import Web Site Wizard là cách để truy tìm site, như được trình bày ở hình dưới 152 Hình VIII.32. Import Web Site Wizard Một site có thể được nhập theo năm cách, phụ thuộc vào vị trí của nó và kiểu truy cập nào mà ta có đối với vị trí đó: FrontPage Server Extensions hoặc SharePoint Servicess, một kỹ thuật hiệu quả đòi hỏi một Web server được trang bị với một trong những tính năng này. FPT (File Transfer Protocol), cách phổ biến nhất mà các file được trao đổi trên Internet. HTTP (HyperTExxt Transfer Protocol), một cách để truy tìm các trang Web và các file khác vốn có thể truy xuất trên một mạng cục bộ. WebDAV, một hệ thống tạo nội dung Web ít phổ biến hơn các phương pháp khác. Cách tốt nhất để nhập một site là sử dụng FrontPage Server Extensions hoặc SharePoint Services bởi vì điều này có thể truy tìm các trang và các file khác được đưa vào một Web site ngay cả nếu chúng không được trình bày trực tiếp cho các khách tham quan. Khi ta sử dụng FrontPage để tạo một Web site, nó sẽ làm việc với nhiều file ở hậu cảnh trong suốt quá trình chuẩn bị một trang. Ví dụ, nếu site của ta sử dụng một theme, sẽ có hơn hai chục file đồ họa và các thư mục con của nó. Những file này không bao giờ được biểu diễn trực tiếp cho những người tham quan site của ta. 153 Thay vào đó, chúng được sử dụng bởi FrontPage để tạo các nút hover, đồ họa và định dạng các trang. Bằng cách sử dụng các server extension hoặc SharePoint Servicers, wizard cũng có thể nhập các site con (subsite) – các Web site được chứa bên trong các thư mục của một site khác. (Ví dụ, một Web site trong thư mục C:\My Sites\Sports\baseball). Nếu site để nhập nằm trên một phần mở rộng Web server hoặc SharePoint, ta có thể sử dụng chúng để nhập Web site này và toàn bộ site con của nó: 1. Chọn FrontPage Server Extensions hoặc SharePoint Services. 2. Nhập địa chỉ Web của trang chủ Web thuộc site vào trong trường text Web Site Location. Để đưa vào các site con, chọn hộp kiểm Include Subsites. Nếu site mà ta muốn nhập nằm trên máy tính của ta (hoặc trong một thư mục ở máy tính khác trên mạng của ta), ta có thể sao chép nó từ thư mục đó: 1. Chọn tùy chọn File System và click đúp Browse. Hộp thoại New Publish Location xuất hiện. Sử dụng hộp thoại này để tìm và chọn thư mục chính của Web site (thư mục nơi trang chủ của nó được lưu trữ). 2. Chọn thư mục và click Open. Thư mục được hiển thị trong trường text Web Site Location. 3. Để nhập các site con cùng một lúc (nếu có), chọn hộp kiểm Include Subsites. Nếu site nằm trên một Web server mà ta có thể truy cập bằng cách sử dụng File Transfer Protocol (FTP), một tiêu chuẩn chung cho việc trao đổi các file với một Internet server, ta có thể sử dụng FTP account của ta để nhập site. Sau đây là cách thực hiện: 1. Chọn FTP. 2. Trong trường text Web Site Location, nhập địa chỉ của FTP server. Bởi vì nó đang sử dụng FTP, địa chỉ sẽ có ftp:// đứng trước thay vì http:// 3. Trong trường Root Directory, gõ nhập vị trí và tên của thư mục mà ta chứa trang chủ của site. 154 4. Nếu server đòi hỏi Passive FTP, click hộp kiểm Use Passive FTP. Nếu ta không thể tận dụng các phần mở rộng hoặc SharePoint, thì FTP là lựa chọn tốt nhất trong các tùy chọn còn lại. Nếu site nằm trên một Web server mà không được trang bị các phần mở rộng hoặc SharePoint (hoặc nếu ta không biết), ta có thể lưu các file bằng việc truy tìm chúng từ Web bằng cách sử dụng HTTP. Tùy chọn HTTP không hiệu quả bằng các phần mở rộng, SharePoint, hoặc FTP - chỉ lấy các trang được liên kết công cộng từ trang chủ. Nó cũng bỏ qua các file được sử dụng để tạo các trang đó, chẳng hạn như các theme FrontPage và những file khác vốn được sử dụng để tạo site. Tuy nhiên, biện pháp sau cùng là HTTP có thể được sử dụng để nhập site: 1. Chọn HTTP. 2. Nhập địa chỉ Web của trang chủ thuộc site trong trường text Web Site Location. FrontPage tỷ mỉ về địa chỉ: Thay vì sử dụng một địa chỉ chính chẳng hạn như www.example.com, nó cụ thể hơn và cũng tham chiếu tên của trang chủ (nói cách khác, một địa chỉ nào như www.example.com/index.html). 3. Sau khi chọn một trong những phương pháp import, click Next để tiếp tục. Wizard được cập nhật để phản ảnh sự lựa chọn của ta. 4. Nếu ta đang nhập một site từ một vị trí được bảo vệ bởi password, một hộp thoại Name and Password Required mở ra. Sử dụng các trường Name và Pasword để cung cấp thông tin đăng nhập của ta, và sau đó click OK. Sau khi chọn một phương pháp nhập, click Next. VIII.4.4. Chọn vị trí để lưu site Câu hỏi kế tiếp mà wizard có thể đặt ra là nơi để lưu site. Bởi vì ta đã chọn một thư mục, nó xuất hiện trong trường text trường Local Copy Location, trường này được tắt để ta không thể thay đổi nó. Tuy nhiên, có một cách để thay đổi một thực hiện một thay đổi nếu ta thay đổi ý định và chọn một thư mục khác: 1. Hủy chọn hộp kiểm Add to Current Web Site. Trường Location Copy Location và nút Browse trở nên được chọn. 155 2. Click nút Browse. Hộp thoại New Page Location xuất hiện. Sử dụng hộp thoại này để chọn (hoặc tạo) một thư mục mới nơi mà các file của site sẽ được lưu. 3. Chọn thư mục và click Open. Hộp thoại đóng lại, đưa ta trở về wizard. 4. Chọn hộp Add to Current Web Site. Click Next để đi đến câu hỏi kế tiếp. VIII.4.5. Thu thập thông tin phản hồi từ các khách tham quan Web site của ta Một trong những form dễ nhất để tạo là một trang phản hồi - một vị trí trong site của ta nơi những khách tham quan có thể gửi cho ta một lời nhận xét góp ý riêng tư. Điều này cung cấp một dịch vụ tiện lợi cho những khách tham quan của ta và có một ưu điểm thư hai – nó cho phép ta bỏ qua địa chỉ email của ta từ site của ta. Tại sao điều này lại hữu dụng? Khi ta bắt đầu xuất Web, bất kỳ địa chỉ email mà ta đặt trên một trang sẽ nhanh chóng được phát hiện bởi các spammer - những người tiếp thị email tạp nhạp lắp đầy các inbox bằng những lời đề nghị mang tính thương mại không cần thiết. Để tìm các địa chỉ để thêm vào các danh sách thư tín của họ, cá spammer thường xuyên sử dụng phần mềm để truy tìm các trang trên World Wide Web. Điều mà ta chắc chắn không thể tránh khỏi là site của ta sẽ được tìm thấy nhanh chóng bởi những chương trình này - thường là trong một thời gian ngắn từ một đến hai tuần. Bằng cách đặt một trang phản hồi thay vì địa chỉ của ta trên site của ta, ta sẽ giảm đi lượng spam mà ta nhận được. Để thêm một trang phản hồi vào site của ta, hãy thực hiện các bước sau: 1. Mở site (nếu nó chưa được mở) và trên menu Standard chọn File New. Khung New mở nằm dọc theo cửa sổ biên soạn. 2. Click hyperlink More Page Templates. Hộp thoại Page Templates mở ra, hiển thị các trang mà ta có thể tạo bằng cách sử dụng các template hoặc wizard. 3. Chọn biểu tượng Feedback Form và click OK. Một trang phản hồi tạo sử dụng các màu, text và nền giống với phần còn lại của site. Nó mở trong cửa sổ biên soạn. Một đường chấm chấm biểu thị các đường viền của form. Mỗi phần của form phải được đặt trong đường biên soạn này. Ở đầu trang, 156 một đoạn được tô màu đỏ tía mô tả form và cung cấp một số thông tin hướng dẫn về cách nó được sử dụng. Text này là một lời bình chú, text giải thích xuất hiện chỉ trong cửa sổ biên soạn của FrontPage chứ không phải khi một trang được xem trong một trình duyệt Web. (Để kiểm tra điều này, click nút Preview ben dưới cửa sổ biên soạn). Hình VIII.33. Hiệu chỉnh một trang phản hồi 4. Để xóa lời chú thích, click nó một lần và nhấn phím Delete. 5. Nếu ta muốn thay đổi cách diễn đạt của một câu hỏi, hiệu chỉnh nó như ta thường thực hiện đối với bất kỳ text khác trong FrontPage: Nhấp con trỏ trên trường và sử dụng bàn phím để thêm hoặc loại bỏ các thông tin. 6. Việc định vị và định dạng các thành phần khác nhau của form cũng có thể được thay đổi giống như bất kỳ phần khác của một trang Web. 7. Để xóa bất kỳ phần của form, kéo chuột lên trên nó và nhấn phím Delete Khi một trang phản hồi được tạo ra, FrontPage xác lập nó để lưu các câu trả lời sang file feedback.txt trong thư mục _private của Web site. 157 Để thực thi điều này, ta phải xuất site của ta lên một Web server được trang bị bằng FrontPage Server Extensions hoặc SharePoint Servers, những cải tiến nhằm giúp những người sử dụng FrontPage thêm các tính năng đặc biệt (giống như vậy) vào các site của họ. Vào thời điểm này, ta có thể thay đổi cách thông tin phản hồi của khách tham quan được lưu như thế nào. Nó có thể được lưu sang một file theo nhiều dạng khác nhau hoặc gửi đến ta bằng một email. VIII.4.6. Lưu thông tin phản hồi của khách tham quan sang một file Những câu trả lời được thu thập trên một form có thể được lưu trữ trong một file trên Web server của ta theo ba dạng khác nhau: - Text - Dạng này có thể được xem trong một bộ biên soạn text hoặc được tải trong một chương trình cơ sở dữ liệu và trang bảng tính, chẳng hạn như Microsoft Acccess và Microsoft Excel. - HTML - Dạng này có thể được đọc bằng một trình duyệt. - XML – Đây là một dạng phổ biến cho dữ liệu được tích hợp rộng rãi vào FrontPage 2003 và các chương trình còn lại của bộ Office. Để lưu thông tin phản hồi sang một file, hãy thực hiện những bước sau đây: 1. Click phải ở bất cứ nơi nào trong các đường viền của form - đường chấm chấm được minh họa ban đầu ở hình trên. 2. Chọn Form Properties từ menu ngữ cảnh. Hộp thoại Properties xuất hiện như được minh họa trong hình dưới. 158 Hình VIII.34. Chọn cách lưu thông tin phản hồi của khách 3. Thông tin phản hồi của khách tham quan sẽ được lưu dưới dạng text. Để chọn một dạng khác, click nút Options. Hộp thoại Saving Results xuất hiện. 4. Sử dụng hộp File Format xổ xuống để chọn một dạng cho thông tin phản hồi: Để giúp ta đọc dễ dàng với Microsoft Excel và những chương trình cơ sở dữ liệu khác, hãy chọn Text Data-base Using Comma as a Separator. Điều này tạo một file text với phần mở rộng tên file.csv. Để đọc nó bằng một trình duyệt Web, một lựa chọn tốt là HTML hoặc Formatted Text Within HTML. Điều này tạo ra một file.html vốn sử dụng cùng một định dạng với các trang Web mà ta tạo bằng ForntPage. Để lưu theo dạng XML, chọn XML. Điều này tạo ra một file.xml. 5. Click OK. 6. Để chọn thư mục nơi file sẽ được lưu trữ ở đó, click nút Browse. Hộp thoại Current Web site xuất hiện. Sử dụng hộp thoại này để chọn một trong những thư mục trên site của ta. 7. Click OK để đóng hộp thoại Form Properties. Form sẽ được xác lập để lưu trữ các thông điệp phản hồi trong một file được chỉ định. Nếu file này không hiện hữu khi một người nào đó sử dụng form phản hồi sẽ được tạo ra. 159 VIII.4.7. Nhận thông tin phản hồi của khách tham quan bằng email Thông tin phản hồi cũng có thể được gửi đến ta bằng email thay vì được lưu trong một site của ta. Khi nó được gửi đến, nó trông giống như sau: Message Type: Suggestion Subject: Web Site Username: Sam Snett UserEmail: snett@samspublishing.com ContractRequested: ContacRequested Date: 22 Aug 2003 Time: 21:19:30 Comments: In this thing on? Trong email, các câu trả lời khác nhau trên form phản hồi được hiển thị trên các dòng riêng biệt. Trong ví dụ này, Sam Snett với địa chỉ email snett@samspublishing.com đã gửi một đề nghị với chủ đề “Web Site”. Mail hiển thị ở cuối. Sam đặt câu hỏi, “Is this thing on?” Thư phản hồi bắt nguồn từ một địa chỉ tự động trả lời được thiết lập bởi Web host của ta - ta có thể thay đổi địa chỉ này thành địa chỉ của người đang liên lạc với ta như một mô tả ở phần kế tiếp. Để gửi các trả lời phản hồi đến một địa chỉ email, hãy thực hiện các bước sau: 1. Click chuột phải ở bất cứ nơi nào trong form và chọn Form Properties từ menu tắt vừa xuất hiện. Hộp thoại Form Properties mở ra. 2. Nhập một địa chỉ email trong trường text E-mail Address. Địa chỉ này phải là địa chỉ email của ta hoặc địa chỉ của một người đang trả lời thư cho site của ta. 3. Xóa bất kỳ text trong hộp Filename. Thông tin phản hồi sẽ được gửi bằng thư bằng cách sử dụng dạng của ví dụ SamSnett. Để chọn một dạng khác, click nút Options. Hộp thoại Saving Result xuất hiện. 4. Click tab Email Result để đưa nó lên phía trước. 5. Chọn một dạng trong hộp Email Format thả xuống. Các tùy chọn có sẵn giống như cá tùy chọn dành cho các file. Email phản hồi được cung cấp dòng chủ đề “Data posted to form 1”, theo sau là địa chỉ Web của trang phản hồi. 160 6. Để xác lập một dòng chủ đề khác và giúp dễ dàng tìm những email này, hãy gõ nhập nó trong trường text Subject Line. 7. Để tận dụng địa chỉ email của người đã điền đầy đủ thông tin vào form, nhập text UserEmail trong trường text Reply-To Line và chọn hộp kiểm Form Field Name nằm ngay kế bên nó (xem hình dưới). Hình VIII.35. Hộp thoại Saving Result Click OK để đóng hộp thoại Saving Results, và sau đó click OK để đóng hộp thoại Form Properties. Khi lưu kết quả của một form dưới dạng email, FrontPage có thể hiển thị một hộp thoại chỉ định rằng form không thể gửi kết quả bằng email và hỏi xem địa chỉ email có nên được loại bỏ hay không. Nếu ta biết rằng Web server của ta cung cấp các server Extensions hoặc SharePoint, hãy click No để giữ lại địa chỉ email và bỏ qua lời cảnh báo. Sau khi ta xuất trang phản hồi, nó sẽ hoạt động một cách chính xác. Bài tập 1. Thay vì tự viết các thẻ HTML, hãy dùng công cụ FrontPage để tạo tất cả các trang Web cho các bài tập ở những chương trước. 161 BẢNG CÁC TỪ VIẾT TẮT Browser: trình duyệt là chương trình đọc nội dung của file XML và hiển thị thông tin của file lên trên màn hình. Cascading Style Sheets: một ngôn ngữ khai báo cách hiển thị các phần tử trong file XML. Style sheet: là cách gọi tắt của Cascading Style Sheets nhưng nó ám chỉ đến một file chứa các khai báo style.7 HTML: Hyper Text Markup Language. WWW: World Wide Web Markup: Đánh dấu Language: Ngôn ngữ Text: Văn bản Rect: Hình chữ nhật Circle: Hình tròn Polygon: Hình tam giác Transparency: Độ trong suốt 162 TÀI LIỆU THAM KHẢO [1] 24 bài tự học thiết kế Web với Front Page 2003, Thuận Thành, NXB Thanh niên. [2] HTML, DHTML and JavaScript, Aptech WorldWide’s book.
File đính kèm:
- giao_trinh_html_va_thiet_ke_web_phan_2.pdf