Giáo trình thiết kế web

Hầu hết chức HTML có thẻ mở thẻ đóng tạo thành cặp giới hạn đoạn văn Ví dụ thẻ “bold” nghĩa chữ béo Toàn đoạn văn thể dạng chữ béo (hay chữ đậm) văn xem trình duyệt tương ứng Ví dụ xin chào lên xin chào Ngày nay, phát triển thác lũ mạng toàn cục, HTML ngày trở nên phức tạp hoàn thiện để đáp ứng yêu cầu nảy sinh q trình phát triển (như âm thanh, hình ảnh động, v.v…) Người ta gọi phiên HTML đánh số để biểu thị HTML 2, HTML 2+, HTML 3,… để phiên sau Một điểm mạnh HTML văn tuân thủ tiêu chuẩn HTML lên hình hay in ra, tóm lại hiểu được, loại phần mềm hay máy tính mà người đọc có, khơng phân biệt trình duyệt (NetScape Windows hay Lynx UNIX, chí cho người khiếm thị phần mềm đặc biệt) Người ta tranh cãi nhiều Internet HTML “tốt” Định hướng nguyên thủy HTML tạo phương pháp vạn để lưu giữ thể thông tin Sau người ta coi HTML ngôn ngữ định hướng nội dung – “trong tài liệu có gì” quan trọng nhiều so với “tài liệu có đẹp khơng” Tác giả mong nhận góp ý từ bạn đọc Xin chân thành cảm ơn MỤC LỤC LỜI MỞ ĐẦU CHƯƠNG 1: NHỮNG KHÁI NIỆM CƠ SỞ 1.1 World Wide Web gì? 1.2 HTML gì? 1.3 Các đặc điểm siêu văn 11 1.3.1 Độc lập với phần cứng phần mềm 11 1.3.2 Độc lập với khái niệm trang thứ tự trang 11 1.3.3 Website trang chủ - homepage 11 1.4 Soạn thảo văn - vấn đề chung 12 1.4.1 Trang mã nguồn HTML trang Web 12 1.4.2 Các thẻ HTML 13 1.4.3 Các quy tắc chung 14 1.4.4 Cấu trúc tài liệu HTML 16 1.4.5 Các phần tử HTML (HTML element) 17 Bài tập 17 CHƯƠNG : TRÌNH BÀY TRANG 18 2.1 Tạo tiêu đề 18 2.2 Thẻ trình bày trang 19 2.2.1 Một số thẻ 19 2.2.2 Các thuộc tính thẻ trình bày trang 22 Bài tập 24 CHƯƠNG 3: DANH SÁCH VÀ BẢNG TRONG HTML 26 3.1 Các kiểu danh sách 26 3.1.1 Danh sách không đánh số thứ tự 26 3.1.2 Danh sách đánh số thứ tự 27 3.1.3 Danh sách định nghĩa 28 3.1.4 Danh sách phối hợp, lồng 29 3.2 Bảng biểu 30 3.2.1 Khung cấu trúc 30 3.2.2 Một số lưu ý bảng 31 3.2.3 Các ví dụ 34 Bài tập 37 CHƯƠNG 4: ĐƯA HÌNH ẢNH VÀO TÀI LIỆU HTML 38 4.1 Hình ảnh tĩnh 38 4.1.1 Tệp ảnh 38 4.1.2 Thẻ 38 4.2 Các thuộc tính thẻ chèn hình ảnh 38 4.2.1 Thuộc tính ALT 38 4.2.2 Thuộc tính WIDTH HEIGHT 39 4.2.3 Thuộc tính ALIGN 40 4.2.4 Thuộc tính VSPACE HSPACE 40 Bài tập 41 CHƯƠNG 5: CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN 42 5.1 Thẻ neo mối liên kết 42 5.1.1 Thuộc tính HREF 42 5.1.2 Liên kết – External Links 42 5.1.3 Địa tuyệt đối 43 5.1.4 Địa tương đối 43 5.1.5 Liên kết nội – Internal Link 43 5.2 Dùng hình ảnh làm đầu mối liên kết 44 5.2.1 Thay chữ hình 44 5.2.2 Image Map - thẻ AREA 44 5.3 Đưa âm vào tài liệu 44 5.3.1 Liên kết đến tệp âm 44 5.3.2 Tạo âm 45 5.4 Đưa Video vào tài liệu 45 5.4.1 Chèn tệp Video 45 5.4.2 Nhúng tệp video 46 Bài tập 46 CHƯƠNG 6: BÀY TRÍ NỀN VÀ KHUNG 47 6.1 Màu văn 47 6.1.1 Đặt màu 47 6.1.2 Màu chữ văn 47 6.1.3 Màu đầu mối liên kết - Thuộc tính LINK, VLINK ALINK 47 6.1.4 Thuộc tính mã màu 48 6.2 Nạp hình ảnh làm cho trang văn 49 6.2.1 Thuộc tính BACKGROUND 49 6.2.2 Water mark 49 6.2.3 Hãy ký tên vào tài liệu 49 6.3 Khung – Frames 50 6.3.1 Trang trí khung 51 6.3.2 Thành phần FRAMESET 52 6.4 Thiết lập Target, thẻ NOFRAME IFRAME 55 6.4.1 Thiết lập Target 55 6.4.2 Thẻ NOFRAMES 55 6.4.2 Nhúng frame - thẻ IFRAME 56 Bài tập 56 CHƯƠNG 7: BIỂU MẪU STYLE VÀ CASCADING STYLE SHEET 57 7.1 FORM 57 7.1.1 FORM gì? 57 7.1.2.Các thành phần FORM 58 7.1.3 Thêm tính cấu trúc cho FORM 64 7.2 Cascading style sheet 66 7.2.1 Inline Style 66 7.2.2 Giới thiệu Style Sheet 67 7.2.3 Javascript Style Sheet 68 7.2.4 Thuật ngữ Style Sheet 71 7.2.5 Các thích Style Sheet 85 7.2.6 Lợi ích Style Sheet 85 7.2.7 Kết hợp Style Sheet với HTML 86 7.2.8 Thứ tự ưu tiên style (Cascading) 90 CHƯƠNG 8: CÔNG CỤ SOẠN THẢO TRỰC QUAN WEB (MICROSOFT FRONTPAGE 2003) 92 8.1 Tạo trang Web 92 8.1.1 Bắt đầu sử dụng FrontPage2003 92 8.1.2 Tạo trang từ template 93 8.1.3 Tạo lưu trang 94 8.1.4 Tạo đề mục 95 8.1.5 Chọn font màu 96 8.2 Tổ chức trang với liên kết, danh sách bảng 99 8.2.1 Thêm hyperlink vào trang Web 99 8.2.2 Tạo danh sách 101 8.2.3 Tổ chức trang với bảng 103 8.2.4 Hiển thị hình ảnh trang Web 110 8.2.5 Tạo Web site 122 8.2.5.Khai thác site 124 8.3 Phát triển nhanh site với template 131 8.3.1 Chọn template Web site 131 8.3.2 Tạo Web site 132 8.3.3 Tạo tùy biến Web site ta 133 8.3.4 Thêm loại bỏ lời thích 135 8.3.5 Khai thác template Personal Web Site 135 8.3.6 Thêm tem thời gian vào trang Web 136 8.3.7 Lưu thay đổi sang site 137 8.4 Tạo site với trợ giúp Wizard FrontPage 2003 138 8.4.1 Mở wizard tạo site 138 8.4.2 Nhập site có vào FrontPage 140 8.4.3 Chọn phương pháp import 140 8.4.4 Chọn vị trí để lưu site 143 8.4.5 Thu thập thông tin phản hồi từ khách tham quan Web site ta 143 8.4.6 Lưu thông tin phản hồi khách tham quan sang file 146 8.4.7 Nhận thông tin phản hồi khách tham quan email 147 Bài tập 149 BẢNG CÁC TỪ VIẾT TẮT 148 TÀI LIỆU THAM KHẢO 149 CHƯƠNG 1: NHỮNG KHÁI NIỆM CƠ SỞ 1.1 World Wide Web gì? World Wide Web (WWW) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL) - Các giao thức, để truy nhập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML) Các ràng buộc ba chế nêu rõ Giới thiệu URL: Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, chương trình,… - có địa mà mã hóa URL Các URL thường gồm phần: - Việc đặt tên chế dùng để truy nhập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên - Tên thân tài nguyên, đường dẫn Ví dụ coi URL rõ trang W3C Technical Reports: http://www.w3.org/TR URL đọc sau: Có tài liệu sẵn dùng theo giao thức HTTP, lưu máy www.w3.org, truy nhập theo đường dẫn “/TR” Các chế khác ta thấy tài liệu HTML bao gồm “mailto” thư điện tử “ftp” FTP Đây ví dụ khác URL Ví dụ ám tới hộp thư (mailbox) người dùng: ….đây văn … Mọi góp ý, xin gửi thư tới Joe Cool Các định danh đoạn (fragment identifiers): Một số URL ám tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu kết nối (gọi định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2 Các URL tương đối: Một URL tương đối không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy tài liệu Các URL tương đối gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn Các URL giải toàn URL sử dụng URL gốc Như ví dụ giải pháp URL tương đối, giả sử có URL gốc “http://www.acme.com/support/intro.html” URL tương đối đánh dấu cho liên kết siêu văn bản: Suppliers mở rộng thành URL đầy đủ “http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Trong HTML, URL dùng để: - Liên kết tới tài liệu tài nguyên khác, (xem A LINK) - Liên kết tới kiểu dạng bên kịch (script) (xem LINK SCRIPT) Gồm ảnh, đối tượng, applet trang, (xem IMG, OBJECT, APPLET INPUT) Tạo dồ ảnh (xem MAP AREA) Tạo form (xem FORM) Tạo khung tài liệu (xem FRAME IFRAME) Trích dẫn dẫn bên (xem Q, BLOCKQUOTE, INS DEL) - Tham khảo quy ước siêu liệu mô tả tài liệu (xem HEAD) Ngày người ta dùng máy tính cơng cụ hữu ích để truy nhập Internet, chủ yếu tìm kiếm thơng tin Các thơng tin văn bản, hình ảnh âm hay thơng tin đa phương tiện… Với giao diện thân thiện việc sử dụng ký hiệu, biểu tượng gợi tả gần giống với hình ảnh đời thường cần thao tác đơn giản ta có thơng tin cần tìm kiếm trước mặt Nhu cầu sử dụng máy tính để truy cập Internet tìm kiếm thông tin ngày nhiều người sử dụng máy tính có trình độ tin học tiếng Anh để hiểu thông báo máy khác Làm để người dễ dàng sử dụng máy tính để truy cập Internet cơng cụ phục vụ đắc lực cho việc tra cứu tìm kiếm thơng tin mạng thơng tin rộng lớn tồn cục Việc trở nên dễ dàng ý tưởng siêu văn (Hypertext) Siêu văn văn “thơng minh” giúp người đọc tìm cung cấp cho họ tài liệu liên quan Người đọc khơng phải cơng tìm kiếm kho thông tin Internet vô tận Khái niệm siêu văn nhà tin học Ted Nelson đề xuất vào năm 1965 ước mơ (“Computer Dreams”) khả máy tính tương lai Ơng hy vọng máy tính có trí tuệ người, biết cách truy tìm thơng tin cần thiết Dự án thực siêu văn kỹ sư trẻ người Anh tên Tim Berners – Lee Sau tốt nghiệp Đại học Oxfort (Anh) năm 1976, năm 1980 Tim viết chương trình mơ mối liên kết hai chiều đồ thị kiểu liên kết siêu văn Năm 1989, làm việc Viện nghiên cứu kỹ thuật hạt nhân châu Âu (CERN) Berne (Thụy sỹ), thấy đồng nghiệp vất vả việc tra tài liệu, Tim đưa đề án lưu trữ siêu văn máy tính cho dễ dàng tìm kiếm tài liệu Trong giới siêu văn WWW, người sử dụng dễ dàng từ tài liệu sang tài liệu khác thông qua mối liên kết Như ta du lịch xa lộ thông tin phong phú ngồi nhà Kỹ thuật siêu văn giúp cho ta sang tận Luvrơ Paris mà chiêm ngưỡng kiệt tác hội họa Chính góp phần tạo bước phát triển bùng nổ Internet năm gần 1.2 HTML gì? Để phổ biến thơng tin tồn cục, cần ngôn ngữ phổ biến dễ hiểu, kiểu việc phổ biến tiếng mẹ đẻ mà toàn máy tính hiểu Ngơn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) HTML cho tác giả ý nghĩa để: Phổ biến tài liệu trực tuyến với heading, văn bản, bảng, danh sách, ảnh, v.v… Hình 8.30 Hộp thoại Date and Time Chọn tùy chọn Display để xác định làm cho tem thời gian thay đổi:  Nếu thay đổi thực tay thay đổi cho trang, chọn Date This Page Wass Last Editor  Nếu thay đổi FrontPage cập nhật trang lý đó, chọn Date This Page Was Last Automatically Updated Trong menu Date Format thả xuống, chọn cách mà ngày tháng xuất Nếu thời gian cũng hiển thị, menu Time format thả xuống, thay đổi giá trị từ (none) sang giá trị khác Click OK Tem thời gian xuất trang, trơng giống ta nhập vào Sau tem thời gian thêm, để thực thay đổi, click đúp cửa sổ hiệu chỉnh, hộp thoại Date and Time mở lại Tất thành phần Web khác hiệu chỉnh theo cách 8.3.7 Lưu thay đổi sang site Nếu ta tạo Web site cá nhân từ template, ta làm với cách hiệu chỉnh text, tiêu đề hyperlink Để lưu trang sau làm việc nó, click nút Save cơng cụ Standard Để xóa trang file khác, loại bỏ vĩnh viễn khỏi site, thực bước sau đây: Quay trở khung nhìn Folders: click tab Web Site nằm cửa sổ hiệu chỉnh Click phải tên file khung xem Folder 137 Chọn Delete từ menu tắt Một hộp thoại Confirm Delete hỏi file có nên thực bị xóa hay khơng Click Yes để xác định việc xóa No ta thay đổi ý định Khi ta sẵn sàng xem công việc mà ta thực hiện, click nút Preview in Browser công cụ Standard Site ta mở trình duyệt Web, ta thưởng thức giống người khác tham quan – click hyperlink nút liên kết để xem mỗi trang 8.4 Tạo site với trợ giúp Wizard FrontPage 2003 8.4.1 Mở wizard tạo site Nhiều phần mềm sử dụng wizard, hộp thoại vốn có làm cho cơng việc khó khăn trở nên dễ dàng cách phân chia thành loạt câu hỏi FrontPage chương trình khác Office xác lập máy tính thơng qua wizard cài đặt, hình thức quen thuộc với ta Trong FrontPage, wizard xem template thơng minh Chúng sử dụng để tạo site trang Web phức tạp đến nỗi xử lý template Bằng cách phân chia tác vụ thành loạt bước đơn giản hơn, wizard giúp ta tạo Web site phức tạp - chẳng hạn site công ty chuyên nghiệp 20 trang site hỗ trợ khách hàng - cách trả lời vài câu hỏi đơn giản Hai loại wizard có sẵn FrontPage: wizard Web site tạo toàn site wizard trang Các wizard tạo ta tạo site thêm trang vào site hành Để gọi site wizard, thực bước sau: Trên menu Standard chọn File  New Khung New mở (ở phía bên phải cửa sổ - xem hình vẽ dưới) 138 Hình 8.31 Khung New Click hyperlink More Web Site Templates Hộp thoại Web Site Templates mở với tab General nằm Ta sử dụng số wizard để tạo toàn site:  Database Interface Wizard tạo site vốn nối kết với sở liệu Microsoft Access, hiển thị record trang Web lưu thông tin thu thập site vào sang sở liệu  Discussion Web Site Wizard tạo bảng thông báo nơi khách tham quan đến site ta giao tiếp với  Corporate Presence Wizard chép Web site có sang máy tính ta, khơng tạo FrontPage Để khởi động wizard, chọn click nút OK Hộp thoại wizard xuất Để sử dụng wizard, trả lời câu hỏi mà đặt sau click Next để xem câu hỏi Khi ta tiến đến câu hỏi sau cùng, nút Finish hiển thị thay cho nút Next Khi ta sẵn sàng hoàn tất tùy chọn mà ta chọn wizard, click Finish 139 8.4.2 Nhập site có vào FrontPage Nếu ta tạo Web site phần khác trước sử dụng FrontPage, ta nên quan tâm đến Import Web Site Wizard, vốn sử dụng để đưa site tất file vào FrontPage để hiệu chỉnh Với wizard này, ta tận dụng tính FrontPage site mà ban đầu không tạo phần mềm Wizard nhập site từ thư mục máy tính ta, thư mục mạng, Web site Internet Để nhập site, thực bước sau: Trên menu Standard chọn File  New để mở khung New Click hyperlink More Web site Templates Hộp thoại Site Templates mở ra, liệt kê tất site wizard mà ta chọn Chọn biểu tượng Import Web Site Wizard Trong hộp danh sách Specify the Location of the New Web Site, FrontPage chọn tên cho thư mục nơi file site lưu trữ Để chọn thư mục khác, click nút Browse Hộp thoại New Web Site Location xuất Sử dụng hộp thoại để tìm kiếm mở thư mục nơi ta lưu trữ Web site mà ta làm việc FrontPage Mỡi site FrontPage phải cung cấp thư mục riêng Để tạo thư mục cho site nhập vào này, click nút Create New Folder Hộp thoại New Folder xuất Cho thư mục tên Name click OK Trong hộp thoại New Web Site Location, click nút Open Thư mục liệt kê hộp thoại danh sách Specify the Location of the New Website Import Web Wizard Click OK Import Web Wizard mở 8.4.3 Chọn phương pháp import Câu hỏi hỏi Import Web Site Wizard cách để truy tìm site, trình bày hình 140 Hình 8.32 Import Web Site Wizard Một site nhập theo năm cách, phụ thuộc vào vị trí kiểu truy cập mà ta có vị trí đó:  FrontPage Server Extensions SharePoint Servicess, kỹ thuật hiệu đòi hỏi Web server trang bị với tính  FPT (File Transfer Protocol), cách phổ biến mà file trao đổi Internet  HTTP (HyperTExxt Transfer Protocol), cách để truy tìm trang Web file khác vốn truy xuất mạng cục  WebDAV, hệ thống tạo nội dung Web phổ biến phương pháp khác Cách tốt để nhập site sử dụng FrontPage Server Extensions SharePoint Services điều truy tìm trang file khác đưa vào Web site chúng khơng trình bày trực tiếp cho khách tham quan Khi ta sử dụng FrontPage để tạo Web site, làm việc với nhiều file hậu cảnh suốt trình chuẩn bị trang Ví dụ, site ta sử dụng theme, có hai chục file đồ họa thư mục Những file không biểu diễn trực tiếp cho người tham quan site ta Thay vào đó, chúng sử dụng FrontPage để tạo nút hover, đồ họa định dạng trang 141 Bằng cách sử dụng server extension SharePoint Servicers, wizard cũng nhập site (subsite) – Web site chứa bên thư mục site khác (Ví dụ, Web site thư mục C:\My Sites\Sports\baseball) Nếu site để nhập nằm phần mở rộng Web server SharePoint, ta sử dụng chúng để nhập Web site tồn site nó: Chọn FrontPage Server Extensions SharePoint Services Nhập địa Web trang chủ Web thuộc site vào trường text Web Site Location Để đưa vào site con, chọn hộp kiểm Include Subsites Nếu site mà ta muốn nhập nằm máy tính ta (hoặc thư mục máy tính khác mạng ta), ta chép từ thư mục đó: Chọn tùy chọn File System click đúp Browse Hộp thoại New Publish Location xuất Sử dụng hộp thoại để tìm chọn thư mục Web site (thư mục nơi trang chủ lưu trữ) Chọn thư mục click Open Thư mục hiển thị trường text Web Site Location Để nhập site lúc (nếu có), chọn hộp kiểm Include Subsites Nếu site nằm Web server mà ta truy cập cách sử dụng File Transfer Protocol (FTP), tiêu chuẩn chung cho việc trao đổi file với Internet server, ta sử dụng FTP account ta để nhập site Sau cách thực hiện: Chọn FTP Trong trường text Web Site Location, nhập địa FTP server Bởi sử dụng FTP, địa có ftp:// đứng trước thay http:// Trong trường Root Directory, gõ nhập vị trí tên thư mục mà ta chứa trang chủ site Nếu server đòi hỏi Passive FTP, click hộp kiểm Use Passive FTP Nếu ta tận dụng phần mở rộng SharePoint, FTP lựa chọn tốt tùy chọn còn lại Nếu site nằm Web server mà không trang bị phần mở rộng SharePoint (hoặc ta khơng biết), ta lưu file việc truy tìm chúng từ Web cách sử dụng HTTP Tùy chọn HTTP không hiệu phần mở rộng, SharePoint, FTP lấy trang liên kết cơng cộng từ trang chủ Nó cũng bỏ qua file sử 142 dụng để tạo trang đó, chẳng hạn theme FrontPage file khác vốn sử dụng để tạo site Tuy nhiên, biện pháp sau HTTP sử dụng để nhập site: Chọn HTTP Nhập địa Web trang chủ thuộc site trường text Web Site Location FrontPage tỷ mỉ địa chỉ: Thay sử dụng địa chẳng hạn www.example.com, cụ thể cũng tham chiếu tên trang chủ (nói cách khác, địa www.example.com/index.html) Sau chọn phương pháp import, click Next để tiếp tục Wizard cập nhật để phản ảnh lựa chọn ta Nếu ta nhập site từ vị trí bảo vệ password, hộp thoại Name and Password Required mở Sử dụng trường Name Pasword để cung cấp thông tin đăng nhập ta, sau click OK Sau chọn phương pháp nhập, click Next 8.4.4 Chọn vị trí để lưu site Câu hỏi mà wizard đặt nơi để lưu site Bởi ta chọn thư mục, xuất trường text trường Local Copy Location, trường tắt để ta khơng thể thay đổi Tuy nhiên, có cách để thay đổi thực thay đổi ta thay đổi ý định chọn thư mục khác: Hủy chọn hộp kiểm Add to Current Web Site Trường Location Copy Location nút Browse trở nên chọn Click nút Browse Hộp thoại New Page Location xuất Sử dụng hộp thoại để chọn (hoặc tạo) thư mục nơi mà file site lưu Chọn thư mục click Open Hộp thoại đóng lại, đưa ta trở wizard Chọn hộp Add to Current Web Site Click Next để đến câu hỏi 8.4.5 Thu thập thông tin phản hồi từ khách tham quan Web site ta Một form dễ để tạo trang phản hồi - vị trí site ta nơi khách tham quan gửi cho ta lời nhận xét góp ý riêng tư Điều cung cấp dịch vụ tiện lợi cho khách tham quan ta có ưu điểm thư hai – cho phép ta bỏ qua địa email ta từ site ta Tại điều lại hữu dụng? Khi ta bắt đầu xuất Web, địa email mà ta đặt trang nhanh chóng phát spammer - người tiếp thị 143 email tạp nhạp lắp đầy inbox lời đề nghị mang tính thương mại khơng cần thiết Để tìm địa để thêm vào danh sách thư tín họ, cá spammer thường xuyên sử dụng phần mềm để truy tìm trang World Wide Web Điều mà ta chắn tránh khỏi site ta tìm thấy nhanh chóng chương trình - thường thời gian ngắn từ đến hai tuần Bằng cách đặt trang phản hồi thay địa ta site ta, ta giảm lượng spam mà ta nhận Để thêm trang phản hồi vào site ta, thực bước sau: Mở site (nếu chưa mở) menu Standard chọn File  New Khung New mở nằm dọc theo cửa sổ biên soạn Click hyperlink More Page Templates Hộp thoại Page Templates mở ra, hiển thị trang mà ta tạo cách sử dụng template wizard Chọn biểu tượng Feedback Form click OK Một trang phản hồi tạo sử dụng màu, text giống với phần còn lại site Nó mở cửa sổ biên soạn Một đường chấm chấm biểu thị đường viền form Mỗi phần form phải đặt đường biên soạn Ở đầu trang, đoạn tơ màu đỏ tía mơ tả form cung cấp số thơng tin hướng dẫn cách sử dụng Text lời bình chú, text giải thích xuất cửa sổ biên soạn FrontPage trang xem trình duyệt Web (Để kiểm tra điều này, click nút Preview ben cửa sổ biên soạn) 144 Hình 8.33 Hiệu chỉnh trang phản hồi Để xóa lời chú thích, click lần nhấn phím Delete Nếu ta muốn thay đổi cách diễn đạt câu hỏi, hiệu chỉnh ta thường thực text khác FrontPage: Nhấp trỏ trường sử dụng bàn phím để thêm loại bỏ thơng tin Việc định vị định dạng thành phần khác form cũng thay đổi giống phần khác trang Web Để xóa phần form, kéo chuột lên nhấn phím Delete Khi trang phản hồi tạo ra, FrontPage xác lập để lưu câu trả lời sang file feedback.txt thư mục _private Web site Để thực thi điều này, ta phải xuất site ta lên Web server trang bị FrontPage Server Extensions SharePoint Servers, cải tiến nhằm giúp người sử dụng FrontPage thêm tính đặc biệt (giống vậy) vào site họ Vào thời điểm này, ta thay đổi cách thông tin phản hồi khách tham quan lưu Nó lưu sang file theo nhiều dạng khác gửi đến ta email 145 8.4.6 Lưu thông tin phản hồi khách tham quan sang file Những câu trả lời thu thập form lưu trữ file Web server ta theo ba dạng khác nhau: - Text - Dạng xem biên soạn text tải chương trình sở liệu trang bảng tính, chẳng hạn Microsoft Acccess Microsoft Excel - HTML - Dạng đọc trình duyệt - XML – Đây dạng phổ biến cho liệu tích hợp rộng rãi vào FrontPage 2003 chương trình còn lại Office Để lưu thông tin phản hồi sang file, thực bước sau đây: Click phải nơi đường viền form - đường chấm chấm minh họa ban đầu hình Chọn Form Properties từ menu ngữ cảnh Hộp thoại Properties xuất minh họa hình Hình 8.34 Chọn cách lưu thơng tin phản hồi khách Thông tin phản hồi khách tham quan lưu dạng text Để chọn dạng khác, click nút Options Hộp thoại Saving Results xuất Sử dụng hộp File Format xổ xuống để chọn dạng cho thông tin phản hồi: 146  Để giúp ta đọc dễ dàng với Microsoft Excel chương trình sở liệu khác, chọn Text Data-base Using Comma as a Separator Điều tạo file text với phần mở rộng tên file.csv  Để đọc trình duyệt Web, lựa chọn tốt HTML Formatted Text Within HTML Điều tạo file.html vốn sử dụng định dạng với trang Web mà ta tạo ForntPage  Để lưu theo dạng XML, chọn XML Điều tạo file.xml Click OK Để chọn thư mục nơi file lưu trữ đó, click nút Browse Hộp thoại Current Web site xuất Sử dụng hộp thoại để chọn thư mục site ta Click OK để đóng hộp thoại Form Properties Form xác lập để lưu trữ thông điệp phản hồi file định Nếu file không hữu người sử dụng form phản hồi tạo 8.4.7 Nhận thông tin phản hồi khách tham quan email Thông tin phản hồi cũng gửi đến ta email thay lưu site ta Khi gửi đến, trơng giống 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âu trả lời khác form phản hồi hiển thị dòng riêng biệt Trong ví dụ này, Sam Snett với địa email snett@samspublishing.com gửi đề 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ừ địa tự động trả lời thiết lập Web host ta - ta thay đổi địa thành địa người liên lạc với ta mô tả phần Để gửi trả lời phản hồi đến địa email, thực bước sau: 147 Click chuột phải nơi form chọn Form Properties từ menu tắt vừa xuất Hộp thoại Form Properties mở Nhập địa email trường text E-mail Address Địa phải địa email ta địa người trả lời thư cho site ta Xóa text hộp Filename Thông tin phản hồi gửi thư cách sử dụng dạng ví dụ SamSnett Để chọn dạng khác, click nút Options Hộp thoại Saving Result xuất Click tab Email Result để đưa lên phía trước Chọn dạng hộp Email Format thả xuống Các tùy chọn có sẵn giống cá tùy chọn dành cho file Email phản hồi cung cấp dòng chủ đề “Data posted to form 1”, theo sau địa Web trang phản hồi Để xác lập dòng chủ đề khác giúp dễ dàng tìm email này, gõ nhập trường text Subject Line Để tận dụng địa email người điền đầy đủ thông tin vào form, nhập text UserEmail trường text Reply-To Line chọn hộp kiểm Form Field Name nằm kế bên (xem hình dưới) Hình 8.35 Hộp thoại Saving Result Click OK để đóng hộp thoại Saving Results, sau click OK để đóng hộp thoại Form Properties 148 Khi lưu kết form dạng email, FrontPage hiển thị hộp thoại định form gửi kết email hỏi xem địa email có nên loại bỏ hay khơng Nếu ta biết Web server ta cung cấp server Extensions SharePoint, click No để giữ lại địa email bỏ qua lời cảnh báo Sau ta xuất trang phản hồi, hoạt động cách xác Bài tập Thay tự viết thẻ HTML, dùng công cụ FrontPage để tạo tất trang Web cho tập chương trước 149 BẢNG CÁC TỪ VIẾT TẮT Browser: trình duyệt chương trình đọc nội dung file XML hiển thị thông tin file lên hình Cascading Style Sheets: ngơn ngữ khai báo cách hiển thị phần tử file XML Style sheet: cách gọi tắt Cascading Style Sheets ám đến file chứa 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 Rect: Hình chữ nhật Circle: Hình trịn Polygon: Hình tam giác Transparency: Độ suốt 150 TÀI LIỆU THAM KHẢO [1] 24 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 151 ... template Web site 131 8.3.2 Tạo Web site 132 8.3.3 Tạo tùy biến Web site ta 133 8.3.4 Thêm loại bỏ lời thích 135 8.3.5 Khai thác template Personal Web Site... ngắn hơn, cửa sổ hẹp bề ngang ke? ?o dài để hiển thị cho hết nội dung Độ dài văn HTML thực không bị hạn chế 1.3.3 Website trang chủ - homepage Một website bó trang web liên kết với liên kết với... chịt mạng nhện Hàng triệu Website liên kết với tạo thành World Wide Web – WWW Có thể tưởng tượng núi nhỏ trang web mỗi ngày cao thêm, phát triển cách thêm vào nhiều trang web lý thú khác 11 Có

Định dạng
Số trang	152
Dung lượng	2,19 MB