Giao_trinh_Frontpage

Giáo trình fontpage Nguyễn Thành Nam MỤC LỤC Bài 1: BẮT ĐẦU VỚI FRONTPAGE 3 1. Không gian làm việc FrontPage 3 4 1.1 Menu (Thực đơn) 4 1.2 Thanh ToolBar 4 1.3 Màn hình soạn thảo 5 1.4 Các vùng điều khiển 5 2. Các lệnh đơn giản của FrontPage 5 2.1 Các lệnh làm việc với tệp (file) 5 2.2 Các lệnh soạn thảo 6 3. Ngôn ngữ HTML và tổng quan về trang Web 6 4. Tạo trang mới 7 5. Cất nội dung trang hiện thời vào file 8 6. Cất nội dung của trang tại FrontPage web hiện thời 8 7. Tạo trang mẫu 9 8. Mở một trang trong FrontPage Editor 9 9. Thuộc tính trang 10 9.1 Lựa chọn trên Margin 11 9.2 Lựa chọn Custom 11 1. Sự khác nhau giữa tài liệu Word và tài liệu HTML 12 2. Cấu trúc trang Web 13 3. Địa chỉ trang Web 14 4. Tạo màu nền, màu text và ảnh nền cho trang 14 1. Định dạng text 16 2. Đặt text lui vào so với lề của đoạn hiện thời (To indent text) 18 3. Đặt lề text lùi ra so với lề của đoạn hiện thời (To outdent text) 18 4. Làm việc với Paragraphs 19 4.1 Tạo một dòng mới mà không có khoảng trắng với dòng trên đó 19 4.2 Tạo một đoạn mới 19 4.3 Dóng lề cho đoạn 19 4.4 Thay đổi style cho đoạn 19 4.5 Chèn một ngắt dòng 20 4.6 Chèn kí tự đặc biệt 20 1. Tạo danh sách bullet 21 2. Tạo danh sách definition 22 3. Tạo danh sách directory 22 THCS Nâm N’Đir Trang Giáo trình fontpage Nguyễn Thành Nam 4. Tạo danh sách menu 23 5. Tạo danh sách lồng nhau 23 6. Tạo danh sách có thứ tự 23 7. Thay đổi thông số của danh sách 23 Các loại siêu liên kết 25 1. Tạo các Text Link 26 1.1 Tạo text hyperlink từ FrontPage Explorer 26 1.2 Tạo text hyperlink tới trang mới 27 27 1.3 Tạo text hyperlink tới một trang trên World Wide Web 28 1.4 Tạo text hyperlink tới trang hoặc file trong FrontPage web hiện thời 28 2. Tạo Image Link 30 2.1 Tạo image hyperlink tới một trang mới 30 2.2 Tạo image hyperlink tới một trang trên World Wide Web 30 2.3 Tạo image hyperlink tới trang hoặc file trong FrontPage web hiện thời 31 3. Thay đổi HyperText và Hypermedia 31 3.1 Lần theo follow text hyperlink trở về sau (forward) 31 3.2 Lần theo image hyperlink về sau (forward) 32 3.3 Lần theo một hyperlink ngược về phía trước (backward) 32 4. Xoá và thay đổi các Hyperlink 32 4.1 Thay đổi text hyperlink 32 4.2 Thay đổi image hyperlink 32 4.3 Xoá text hyperlink 32 4.4 Xoá image hyperlink 33 4.5 Kiểm tra các hyperlinks 33 4.6 Sửa một hyperlink hỏng 33 4.7 Sắp đặt lại (recalculate) các hyperlinks 34 4.8 Tạo e-mail hyperlink 35 4.9 Tạo hyperlink tới file của Microsoft Word, Excel, hoặc PowerPoint 36 5. Bookmark 36 5.1 Tạo Bookmark 36 5.2 Tạo link với BookMark 37 5.3 Xoá Bookmark 37 5.4 Chuyển tới bookmark 37 1. Các loại ảnh được hỗ trợ trong HTML 39 2. Chèn một hình ảnh 40 2.1 Chèn ảnh từ một file 40 2.2 Chèn ảnh từ FrontPage web hiện thời 40 2.3 Chèn ảnh từ World Wide Web 41 2.4 Chèn clip art 41 2.5 Chèn một video clip 41 2.6 Cách chèn một video clip từ Microsoft Clip Gallery của Microsoft Office 97 42 3. Sửa ảnh 42 THCS Nâm N’Đir Trang Giáo trình fontpage Nguyễn Thành Nam 3.1 Cách sử dụng các nút trên thanh công cụ Image 42 3.2 Thay đổi cách sắp đặt ảnh 43 3.3 Tạo thumbnail image 44 3.4 Tuỳ biến video clip 44 3.5 Thay đổi kích thước (Resample) file ảnh 45 3.6 Thay đổi kích thước ảnh 45 4. Tạo ảnh trong suốt 45 5. Chuyển đổi ảnh 46 5.1 Chuyển thành ảnh GIF 46 5.2 Chuyển thành ảnh JPEG 46 6. Các chức năng khác 47 6.1 Import ảnh vào FrontPage web 47 6.2 Chỉ định độ ảnh có độ phân giải thấp 48 6.3 Đặt hyperlink ngầm định cho ảnh 49 6.4 Tạo text thay thế cho ảnh 49 1. Tạo Hotspot 51 1.1 Tạo Circular Hospot 51 1.2 Tạo Polygon Hospot 51 1.3 Tạo Rectangle Hospot 51 1.4 Tạo Text Hospot 52 2. Thay đổi Hospot 52 2.1 Chọn hotspot 52 2.2 Highlight hotspot 52 2.3 Di chuyển hotspot 52 1. Tạo Table 53 2. Tạo bảng trong bảng khác 54 3. Thuộc tính của table 54 4. Điều chỉnh bảng 55 4.1 Chọn cả bảng hoặc một phần của nó 55 4.2 Chèn một ô 56 4.3 Chèn hàng hoặc cột 56 4.4 Phân tách ô 56 4.5 Trộn các ô 57 4.6 Dãn ô 57 4.7 Thay đổi kích thước bảng 58 4.8 Thay đổi kích thước ô 59 4.9 Phân bố các hàng và cột đều nhau 59 5. Xoá bảng và một phần của nó 60 5.1 Xoá ô, hàng, cột 60 5.2 Xoá bảng 60 5.3 Xoá caption của bảng 60 6. Định dạng table 60 6.1 Thay đổi màu nền của một hoặc nhiều ô 60 6.2 Thay đổi màu nền của bảng 60 THCS Nâm N’Đir Trang III Giáo trình fontpage Nguyễn Thành Nam 6.3 Bổ sung ảnh nền cho một ô 61 6.4 Bổ sung ảnh nền cho toàn bảng 61 6.5 Thay đổi màu các đường viền ô 62 6.6 Thay đổi màu đường viền bảng 63 6.7 Thay đổi hình dạng của ô 63 6.8 Thay đổi layout của bảng 63 7. Các thao tác khác 64 7.1 Bổ sung caption cho bảng 64 7.2 Sửa caption của bảng 64 7.3 Bổ sung tiêu đề ô 64 7.4 Chuyển bảng thành text 64 1. Tạo trang frame 66 1. Tạo Form 74 2. Thêm trường vào form 75 3. Thuộc tính của form 75 What to do with form results? 75 4. Sử dụng tạo form bằng Wizard 77 Contact Information: Thông tin để liên hệ với người sử dụng 78 Product Information: Thông tin sản phẩm 79 Personal Information: Thông tin cá nhân 80 One of several options: Lựa chọn duy nhất trong tuỳ chọn 80 Any of several option: Một vài lựa chọn trong tuỳ chọn 81 Boolean: Lựa chọn Có hoặc Không 81 Date: Kiểu dữ liệu nhập vào là ngày 81 Range: Kiểu dữ liệu trên form là một miền các giá trị để chọn lựa 81 Number: Dữ liệu nhập trên form là số 81 String: Dữ liệu nhập trên form là dòng text 81 Paragraph: Dữ liệu nhập là text nhiều dòng 81 1. Các thao tác với trường 84 1.1 Sao chép một trường 84 1.2 Xóa một trường trên form 84 1.3 Hiển thị trường xác nhận 84 2. Text Boxes 84 2.1 Tạo trường Text Box 84 2.2 Tạo trường mật khẩu 85 2.3 Thay đổi thuộc tính của trường text box 85 3. Scrolling Text Boxes 89 3.1 Tạo trường scrolling text box 89 3.2 Thay đổi thuộc tính của trường scrolling text box 89 3.3 Hạn chế giá trị nhập tại trường 90 4. Check Boxes 90 4.1 Tạo trường check box 90 4.2 Thiết lập thuộc tính cho trường check box 90 5. Radio Buttons 91 THCS Nâm N’Đir Trang IV Giáo trình fontpage Nguyễn Thành Nam 5.1 Tạo trường radio button 91 5.2 Thay đổi thuộc tính của trường radio-button 92 6. Drop-Down Menus 92 6.1 Tạo trường drop-down menu 93 6.2 Qui định việc nhập dữ liệu cho trường drop-down menu 95 7. Trường Push Buttons và Image 95 7.1 Tạo trường push button 95 7.2 Thay đổi thuộc tính của trường push button 96 7.3 Tạo trường Image 96 8. Trường ẩn - Hidden 97 1. Chèn một cấu thành FrontPage 99 1.1 Chú giải - Comment 99 1.1 Trường xác nhận – Confirmation Field 100 1.3 Hit Counter – Bộ đếm 100 1.4 Chèn trang - Included Page 100 1.5 Chèn mã HTML – Insert HTML 101 1.6 Ảnh với thời gian hiển thị đi kèm - Scheduled Image 101 1.7 Scheduled Include Page 102 1.8 Substitution 103 1.9 Page Banner 103 THCS Nâm N’Đir Trang V Giáo trình fontpage Nguyễn Thành Nam Bài 1: BẮT ĐẦU VỚI FRONTPAGE Chào mừng các bạn khi đến với Microsoft FrontPage, một bộ công cụ tạo và điều hành web site một cách lí tưởng mà người thiết kế không nhất thiết phải biết những kiến thức về lập trình, FrontPage có mọi thứ mà bạn cần để thiết kế và xây dựng trang Web và Web site cho bạn. FrontPage bao gồm FrontPage Explorer, tại đây, bạn có thể tạo, thiết kế, quản lí toàn bộ Web site và FrontPage Editor, nơi mà bạn có thể tạo và sửa đổi các trang Web mà không cần phải biết ngôn ngữ đánh dấu siêu văn bản (HTML). FrontPage bao gồm nhiều tính năng hỗ trợ cho việc tạo Web site một cách dễ dàng nhất, chẳng hạn như bộ thư viện thiết kế đồ hoạ chuyên nghiệp, một tập hợp đầy đủ các các wizard và các mẫu để tạo trang và FrontPage web, những phần tử active cung cấp những chức năng và hàm phức tạp mà không cần lập trình, và một danh sách các nhiệm vụ dành cho việc kiểm soát và tạo FrontPage web. Bạn có thể dùng FrontPage Explorer để tạo cấu trúc của Web site, áp dụng các bố cục đồ hoạ cho trang, tổ chức các file và folder, nhập và xuất các file, kiểm tra và so sánh các siêu liên kết, quản trị quyền truy nhập, giám sát các nhiệm vụ, và đặc biệt là cho phép tiếp cận với FrontPage Editor để thiết kế và sửa đổi nội dung của trang Web. Bạn có thể dùng FrontPage Explorer để xuất bản các trang web trên máy tính của mình, trên một một tổ chức intranet hoặc World Wide Web. FrontPage Editor hỗ trợ cho bạn việc tạo, thiết kế và sửa đổi các trang Web. Chẳng hạn như đưa text, ảnh, bảng, các mẫu biểu và các phần tử khác nữa vào trang web, FrontPage Editor sẽ hiển thị chúng như khi chúng xuất hiện trên trình duyệt. Mặc dù là một công cụ có tính năng hoàn hảo, FrontPage Editor lại rất dễ dàng cho việc sử dụng bởi vì nó trở nên thân thiện khi có giao diện của một trình xử lí văn bản. Bạn không cần phải học ngôn ngữ HTML để sử dụng FrontPage Editor bởi vì nó có thể tạo mọi thẻ HTML cho bạn, các thẻ mở rộng như style-sheet, frame, các điều khiển ActiveX. Nếu bạn muốn soạn trực tiếp các mã lệnh HTML, bạn có thể sử dụng chế độ view HTML của FrontPage. Trong chế độ này, bạn có thể vào text, soạn THCS Nâm N’Đir Trang Giáo trình fontpage Nguyễn Thành Nam các thẻ HTML và các mã kịch bản, sử dụng các lệnh chuẩn của trình soạn thảo văn bản như cắt, dán, tìm kiếm và thay thế. FrontPage là một thành viên trong họ sản phẩm của Microsoft Office và chia sẻ nhiều tính năng của Microsoft Word và Microsoft Excel, chẳng hạn như thư viện ClipArt, kiểm tra lỗi chính tả và tạo bảng một cách dễ dàng. Ngoài ra, FrontPage cũng quản lí các siêu liên kết được tạo trong tài liệu Microsoft Office 97. Dưới đây là một vài đặc điểm của FrontPage Editor: Bạn có thể tạo một trang HTML mơi dựa trên các wizard và template. FrontPage Editor đưa ra nhiều lựa chọn về định dạng trang, và bạn có thể tạo mẫu thiết kế của chính mình. Bạn có thể áp dụng một hay nhiều các bố cụ đồ hoạ của FrontPage, chúng được tạo bởi các nhà thiết kế chuyên nghiệp, tạo cho bạn các trang web sống động và hấp dẫn. Bạn cũng có thể đưa vào và thiết kế viền trang, chèn các thanh định hướng liên kết, giúp người sử dụng lướt trên Web site của bạn. Bạn cũng có thể mở bất kì file HTML nào trong FrontPage Editor và toànbộ tag của chúng sẽ được dịch và hiển thị trên màn hình của FrontPage hoặc mở các file với nhiều khuôn dạng khác nhau và FrontPage Editor tự động chuyển đổi chúng thành HTML, chẳng hạn như Microsoft Word, Microsoft Excel, WordPerfect, FrontPage Editor tự động nhận ra các siêu liên kết từ tài liệu Microsoft Office 97. Bạn có thể chèn text trong mọi style HTML, tạo các danh sách đa cấp, thay đổi kích thước và màu sắc của text, áp dụng các khuôn dạng cơ bản cho text. Sử dụng style sheet, bạn có thể điều khiển lề, khoảng cách giữa các dòng, màu sắc, font và kích thước của chữ. Bạn có thể đưa các ảnh với bất kì định dạng nào, và FrontPage Editor tự động chuyển đổi chúng sang dạng GIF hoặc JPEG. Kích đúp vào ảnh, bạn có thể sử dụng chương trình tạo ảnh tương ứng. Bạn cũng có thể tạo ánh xạ ảnh bằng cách thêm các Hotspot trên ảnh chứa siêu liên kết. Sử dụng các lệnh sửa đổi ảnh, bạn có thể cắt xén, quay, thay đổi kích thước, tạo ảnh đen trắng, tạo độ sáng tối cho ảnh. FrontPage cũng hỗ trợ một thư viện phong phú ClipArt, các ảnh, và các video clip. Bạn có thể tạo form chứa các trường text, check box, radio button, thực đơn drop-down, và push button. Khi bạn tạo form, điều khiển form mặc định THCS Nâm N’Đir Trang Giáo trình fontpage Nguyễn Thành Nam tự động cất thông tin trên form vào một file hoặc gửi chúng tới một địa chỉ e- mail. Bạn có thể chọn một điều khiển từ tập các điều khiển form của FrontPage hoặc thêm điều khiển của mình cho form. Sử dụng các lệnh về tạo bảng, bạn có thể tạo, chèn hàng và cột, dóng lề cho chúng, tạo màu nền, Bạn có thể thêm các chức năng mạnh vào trang bằng cách chèn các cấu thành FrontPage. Chúng sẽ thêm các khả năng tương tác chẳng hạn như thanh định hướng, nhóm thảo luận, tìm kiếm, và điều khiển form. Ví dụ, cấu thành mục lục (Table of Contents) tự động tạo outline của FrontPage web với các siêu liên kết đến từng trang Bạn có thể tạo một trang frame mới, thay đổi hiển thị của chúng và gán trang khởi tạo cho mỗi frame. FrontPage hiển thị trang frame của bạn dưới dạng những gì bạn nhìn thấy là những gì bạn có (WYSIWYG). Bạn có thể chèn các điều khiển ActiveX, plug-ins, và các Java applet trên FrontPage Editor. Bạn cũng có thể tiếp cận tới một phiên soạn các kịch bản, tạo và chèn các kịch bản JavaScript và VBScript. 1. Không gian làm việc FrontPage Không gian làm việc của FrontPage bao gồm hai phần chính trên màn hình giao diện của nó, FrontPage Explorer và FrontPage Editor. Cả hai bao gồm: - Thực đơn - Thanh công cụ - Màn hình soạn thảo - Các vùng điều khiển FrontPage Explorer chỉ cho bạn các chế độ hiển thị khác nhau của FrontPage web: - Folders View - All Files View - Navigation View - Hyperlinks View THCS Nâm N’Đir Trang Giáo trình fontpage Nguyễn Thành Nam - Hyperlink Status View - Themes View - Tasks View Màn hình làm việc của FrontPage Editor:  1.1 Menu (Thực đơn) Các thực đơn cơ bản của FrontPage bao gồm: - File: các lệnh làm việc với file và tổng thể trên trang Web. - Edit: Các lệnh soạn thảo thông dụng (tương tự các lệnh trong mọi hệ soạn thảo văn bản khác ngoại trừ một vài lệnh đặc thù). - View: Hiển thị các thanh công cụ. - Go: Các lệnh sắp xếp các đối tượng đồ họa tương đối với nhau. - Insert: Chèn các đối tượng vào trang Web. - Format: Các lệnh tạo khuôn. - Tools: Các công cụ và lựa chọn. - Table: Các lệnh tạo bảng trên trang. - Frame: Các lệnh làm việc với Frame. - Windows, Help: Các thực đơn truyền thống của Windows. 1.2 Thanh ToolBar FrontPage có một số ToolBar có thể hiện hoặc ẩn trên màn hình. Các lệnh trong thực đơn View dùng để làm ẩn hoặc hiện các Toolbar này. THCS Nâm N’Đir Trang Giáo trình fontpage Nguyễn Thành Nam Một hình ảnh đầy đủ của các ToolBar 1.3 Màn hình soạn thảo Màn hình soạn thảo nằm ở trung tâm. FrontPage có hai chế độ soạn thảo cho mỗi trang (file) Web: Normal và HTML. Chế độ Normal là chuẩn và là mặc định của FrontPage. Trong chế độ HTML, FrontPage cho phép làm việc trực tiếp với các Tag theo chuẩn của HTML. Kết hợp hài hòa giữa hai chế độ soạn thảo này sẽ tạo ra các trang Web vừa ý. Chế độ Preview cho phép xem trực tiếp kết quả của trang Web trên các browser mà không cần phải có thêm các phần mềm này. 1.4 Các vùng điều khiển Bao gồm các nút điều khiển cửa sổ, thanh cuốn và dòng trạng thái. 2. Các lệnh đơn giản của FrontPage Các nhóm lệnh sau trên trang soạn thảo FrontPage có ý nghĩa và kết quả tương tự như đối với các phần mềm soạn thảo khác (ví dụ WinWord, Lotus WordPro, ). 2.1 Các lệnh làm việc với tệp (file) Các lệnh trên thực đơn File hoặc trên Standard Toolbar: New, Open, Close, Save, Save As, Page Setup, PrintPreview, Print. THCS Nâm N’Đir Trang . FrontPage có mọi thứ mà bạn cần để thiết kế và xây dựng trang Web và Web site cho bạn. FrontPage bao gồm FrontPage Explorer, tại đây, bạn có thể tạo, thiết kế, quản lí toàn bộ Web site và FrontPage. phần chính trên màn hình giao diện của nó, FrontPage Explorer và FrontPage Editor. Cả hai bao gồm: - Thực đơn - Thanh công cụ - Màn hình soạn thảo - Các vùng điều khiển FrontPage Explorer chỉ. hoàn hảo, FrontPage Editor lại rất dễ dàng cho việc sử dụng bởi vì nó trở nên thân thiện khi có giao diện của một trình xử lí văn bản. Bạn không cần phải học ngôn ngữ HTML để sử dụng FrontPage