giáo trình frontpagedoc tham khảo
Chơng Thiết kế trang Web Microsoft FrontPage 3.1 Tổng quan FrontPage 2000 3.1.1 Giới thiệu Microsoft Office FrontPage 2000 phần mềm dùng để tạo trang Web hay Web Site Đồng thời hỗ trợ nhiều tính nh: + Dễ dàng trang Web sinh động, đầy màu sắc + Cung cấp công cụ liên kết, hình ảnh âm + Nhiều khung trang Form nhập liệu + Phát triển trang Web liên kết với sở liệu + Chuyển trang lên mạng Internet cách thuận tiện nhanh chóng Để cài đặt FrontPage, cần cấu hình tối thiểu máy tính: - CPU Pentium 100 - 16MB Ram - 65MB trống đĩa - Hệ điều hành 9.x tơng đơng Cách cài đặt: - Đa đĩa CD có chứa chơng trình cài đặt FrontPage vào ổ đĩa CD (Ví dụ: đĩa CD: Office 2003) Chạy tập tin setup.exe để thực chơng trình cài đặt - Trong hộp hội thoại Microsoft FrontPage 2000 End User License Agreement: chọn ô I accept the iterm in the License Agreement, kích chuột nút lệnh Next để tiếp tục - Trong hộp Microsoft FrontPage 2000 Ready to Install: Chọn nút lệnh Install Now để thực cài đặt Hoặc chọn nút lệnh Customize chọn mục cần thiết cách đánh dấu chọn ô tơng ứng để cài đặt FrontPage theo lựa chọn Để sử dụng trình duyệt Web trang Web hiển thị Font tiếng Việt cần thực nh sau: Khởi động Start/Programs/Internet Explorer Chọn menu, Tool / Internet Options Trong hộp Internet Options, chọn thẻ General kích chuột vào nút Fonts Trong hộp hội thoại Font, chọn Font tiếng Việt mục Web page font 3.1.2 Tiếp cận môi trờng Microsoft Office FrontPage 2003 a Khởi động FrontPage Khởi động FrontPage cách: kích chọn nút lệnh Start/Programs/Microsoft FrontPage Hoặc kích đúp chuột vào biểu tợng FrontPage hình Desktop (Hình 1) b Thoát khỏi FrontPage Nên lu tập tin lại trớc thoát khỏi FrontPage, không FrontPage hỏi bạn có cần lu tập tin hay không Thoát khỏi ProntPage cách chọn menu File/Exit, kích nút Close tiêu đề (góc bên phải hình), nhấn tổ hợp phím Alt+F4 Thanh tiờu (Title bar) Thanh chuyn ch lm vic (Page View) Thanh thc n (Menu bar) Thanh cụng c (Toolbar) Thanh nh dng (Formating) Thanh chn cụng vic (Page Tab) Màn hình thiết kế trang Web Thanh hin th trang (Page View Panel) Thanh trng thỏi (Status bar) Thanh cun (Scroll bar) Trong cửa sổ làm việc FrontPage, gồm thành phần sau: Views Bar: Thanh chuyển đổi chế độ hiển thị (views) Page Tab: Dùng để chọn trang làm việc Title Bar: Hiển thị tên trang Web vị trí trang Web site Menu Bar: Chứa thực đơn lệnh Scroll Bars: Dùng để di chuyển đến trang hành Status Bar: Thanh trạng thái, thờng dùng để quan sát đích liên kết Page View Panes: khung hiển thị trang, gồm chế độ: Normal, Html Preview Thanh công cụ Standard Bar Formatting Bar: Là công cụ thờng dùng 3.1.3 Tiếp cận trang Web Để dễ tiếp cận, ta thiết kế Web đơn giản làm quen với thao tác thực thiết kế (Design) trang Web * Tạo trang Web mới: Muốn tạo trang Web mới: Chọn menu, File/New/Page kích chuột vào nút lệnh New công cụ Standard, nhấn tổ hợp phím Ctrl+N Xuất hộp hội thoại nh sau: Nó cho phép xem trớc hình thức hiển thị trang Web bạn tạo Kích nút OK để tạo trang Trang có tên mặc định new_page_X.htm * Mở trang Web bất kỳ: Chọn menu File/Open, kích chuột vào nút Open công cụ Standard, nhấn tổ hợp phím Ctrl + O Hộp hội thoại Open File xuất nh sau: Trong mục Look in: Chọn ổ đĩa th mục chứa tập tin cần mở Sau đó, chọn tập tin cần mở chọn nút lệnh Open Trong hình FrontPage cho phép mở lúc nhiều tập tin đồng thời Muốn làm việc với tập tin kích chuột chọn tiêu đề tập tin đó, chọn menu Windows\(tên tập tin) * Xóa trang Web: Kích chuột vào mục Folders Views Bar, chọn trang cần xóa Sau đó, chọn menu Edit/Delete Kích chuột nút OK để đồng ý xóa trang Web * Lu trang Web: Kết thúc việc thiết kế trang Web, để lu tài liệu lên đĩa Có hai trờng hợp: a Lu với tên mới: Trang Web đợc thiết kế lần đầu muốn thay đổi tên Ta chọn menu File/Save as Khi xuất hộp hội thoại Save as cho phép đặt tên cho trang Web thay cho tên cũ new_page_X.htm b Lu với tên cũ: Trang Web có đĩa, có tên Ta lu lại sau thiết sửa chữa Chọn menu File/Save kích nút lệnh Save công cụ nhấn tổ hợp phím Ctrl+S * Đóng trang Web: chọn menu, File/Close Web * Các thể trang Web: Để xem thể trang Web trình duyệt Web, chọn thẻ Preview khung hiển thị trang Page View Pane, kích vào nút lệnh Preview in Browser công cụ Chọn thẻ Normal để trở lại hình thiết kế Ngoài ra, chọn thẻ HTML, cho phép sửa chữa mã lệnh HTML cho trang Web 3.2 Tạo Web định dạng trang Web 3.2.1 Tạo trang Web đơn giản Tạo trang Web mới: Chọn menu, File/New/Page, sau chọn Normal page hộp hội thoại New, kích chọn nút lệnh OK Để đa nội dung vào trang Web: Nhập nội dung văn cho trang Web tơng tự nh trình soạn thảo văn khác nh Microsoft Word, NotePad, WordPad, Ví dụ: Tạo trang Web đơn giản có nội dung Hello FrontPage 2000 nh sau: Trong hình thiết kế, nhập dòng chữ Hello FrontPage 2000 lu nội dung vừa tạo Sau đó, xem thể trang Web cách chọn thẻ Preview khởi động Internet Explorer, chọn tập tin htm vừa tạo 3.2.2 Định dạng trang Web a Đặt tiêu đề cho trang Web: Để xuất tiêu đề trang Web tiêu đề (Title), kích chuột phải vào trang, chọn mục Page Properties, hộp thoại Page properties chọn thẻ General, nhập tiêu đề trang Web vào khung Title, kích chọn OK b Thiết lập lề cho trang Web: Để thiết lập lề cho trang Web cách: Kích chuột phải vào trang cần thiết lập lại lề trang Web, chọn Page Properties, hộp Page Properties chọn thẻ Margins Mục Specify top margin: chọn giá trị để tạo khoảng cách từ mép cửa sổ đến nội dung trang (tính theo pixel) Mục Specify left margin: chọn giá trị để tạo khoảng cách từ mép trái cửa sổ đến nội dung trang (tính theo pixel) FrontPage tạo khoảng cách mặc định 15 Pixels không đánh dấu chọn hai mục 3.2.3 Tạo màu nền, hình cho trang Web Để tạo màu hình cho trang Web, kích chuột phải vào trang cần tạo, chọn Page Properties Trong hộp hội thoại Page Properties, chọn thẻ Background (hoặc menu chọn Format/Background) * ý nghĩa mục: Mục Formating: Dùng để định dạng hình nền, để tạo hình chọn mục Backgroud Picture chọn nút lệnh Browse Trong hộp hội thoại Select Background Picture, chọn tập tin hình cần tạo nền, sau chọn nút lệnh OK Mục Color: Định dạng màu nền, màu chữ hay màu liên kết (HyperLink) cho trang Web - Background: Tạo màu cho trang Web, nhng màu thể không đánh dấu mục Background Picture - Text: Màu chữ - Hyperlink: Màu cho đối tợng có tạo liên kết - Visited Hyperlink: Màu cho đối tợng liên kết đợc duyệt - Active Hyperlink: Màu cho đối tợng có liên kết đa trỏ chuột đến đối tợng Sau đó, chọn nút lệnh OK để thiết lập định đạng 3.2.4 Định dạng Font Cũng nh trình ứng dụng soạn thảo văn khác, FrontPage hỗ trợ chức định dạng Font chữ cho tài liệu trang Web a Định dạng Font chữ cho toàn tài liệu: Nếu muốn toàn tài liệu trang Web có kiểu chữ kích thớc chữ mà không cần định dạng cho đoạn văn bản, ta thực nh sau: Trong hình Normal trang Web, kích chuột phải, chọn Page Properties Trong hộp thoại này, chọn thẻ General, sau chọn nút lệnh Style , xuất hộp hội thoại Modify Style: Tại hộp này, kích chọn nút Format/Font, xuất hộp hội thoại Font: 10 Kích chuột vào nút lệnh Options, xuất hộp thoại Option for Saving Results of Form: Kích chuột vào mũi tên xuống mục File name, chọn Formatted Text 52 Khi nhấn nút Submit liệu Form gửi đến tập tin ta nhập Web Server Nếu tập tin cha có tự động tạo 3.9 Thành phần Component Để trang Web thêm sinh động, linh hoạt lôi ngời dùng Cần chèn thêm Component FrontPage nh tạo chữ chạy (Marquee), tạo nút đa sắc, hay tạo ảnh động (banner), Nếu mở trang Web Component không thi hành, cần kiểm tra lớp Component có nằm cấp th mục trang Web hay không Hay có lớp Component hay không? Nếu cần chép tập tin *.class từ th mục Program files/Microsoft Office/Office/Fpclass (đối với FrontPage 2000) Program files/Microsoft FrontPage/Office/Fpclass (đối với FrontPage 98) 3.9.1 Dùng Component để tạo nút đa sắc (Hover) Trên menu, chọn Insert/Component/Hover Button Xuất hộp thoại Hover properties: Thực thiết lập lại thuộc tính nút nh sau: Mục Button Text: Nội dung hiển thị nút 53 Mục Link to: Thiết lập liên kết đến địa trang Web hay Web site kích chuột vào nút Hover Mục Button color: Chọn màu cho nút Hover Mục Effect: chọn hiệu ứng đa trỏ chuột đến Mục Width, Height: thiết lập chiều dài chiều cao nút Mục Background color: Thiết lập màu Mục Effect color: đặt màu hiệu ứng đa trỏ đến 3.9.2 Tạo chữ chạy (Marquee) Để tạo dòng chữ chạy vị trí trang Web, dùng Component Marquee Tiến hành tạo nh sau: Trên menu, chọn Insert/Component/Marquee Trong hộp thoại Marquee Properties: Mục Text: Nội dung văn Marquee 54 Mục Direction: muốn văn chạy từ trái sang phải chọn Left, để văn chạy từ phài sang trái chọn Right Mục Speed: thiết lập tốc độ chạy văn (giá trị ô Delay lớn tốc độ chạy chậm Giá trị ô Amount biểu thị bớc dịch chuyển văn bản) Mục Behavior: tùy thuộc giá trị lựa chọn Marquee có cách chạy khác nhau: Scroll_chạy theo dạng cuộn; Slide_chạy theo dạng trợt; Alternate_chạy xen kẽ từ trái sang phải từ phải sang trái Mục Repeat: xác định số lần lặp Marquee Nếu chọn mục Continuously Marquee lặp liên tục, ngợc lại Marquee lặp theo số lần lặp thiết lập số lần mục Times Mục Align with text: thiết lập vị trí Marquee Mục Size: chỉnh kích thớc Marquee Mục Backgroud color: thiết lập màu cho Marquee Để thiết lập số định dạng khác cho Marquee nh định dạng font chữ, màu sắc chữ, kích chọn nút lệnh Style 3.9.3 Tạo ảnh động (Banner) Để tạo ảnh động, ta sử dụng Component Banner Component hiển thị hình danh sách dựa vào thời gian định, thời điểm khác có hình khác đợc thể Số ảnh đợc thể tùy thuộc số ảnh đợc nạp vào danh sách Cách tiến hành tạo ảnh động (banner) nh sau: Trên menu, chọn Insert/Component/Banner ad Manager Xuất hộp thoại Banner ad Manager Properties nh sau: 55 Thay đổi giá trị thuộc tính: Mục Width: Thay đổi độ rộng Component Bề rộng với bề rộng ảnh Mục Height: Thay đổi chiều cao Component Chiều cao chiều cao ảnh Mục Transition effect: Tạo hiệu ứng lần đa ảnh vào Mục Show each picture for (seconds): Thời gian lần ảnh đa ảnh vào, đợc tính giây Mục Link to: Tạo liên kết với trang Web Web site khác Có thể nhập địa liên kết vào khung kích chuột chọn nút lệnh Browse chọn trang cần liên kết Để đa ảnh vào vào danh sách, thực nh sau: Kích chuột vào nút lệnh Add, hộp thoại Add Picture for Banner Ad xuất hiện: 56 Sau đó, chọn file ảnh cần đa vào danh sách Thực tơng tự để đa ảnh vào danh sách (Để tạo ảnh đa vào danh sách cần tạo ảnh có kích thớc nhau) 3.10 Sơ lợc DHTML DHTML (Dynamic HTML) tính FrontPage Tính cho phép tạo hiệu ứng cho ảnh cho văn đa vào kiện đợc gọi Tùy thuộc vào loại đối tợng kiện có hiệu ứng khác Mỗi kiện thủ tục tơng ứng đợc thi hành Các thủ tục đợc thiết lập tập tin animate.js Vì vậy, cần chép tập tin vào th mục trang Web gọi Với tính tạo cho ảnh hay text (chữ) bay theo góc độ khác mở trang Web hay đổi màu chữ trỏ chuột đến chúng 3.10.1 Tạo ảnh, chữ bay mở trang Web Để thực tạo ảnh chữ bay mở trang Web, ta thực nh sau: 57 Chọn đối tợng ảnh chọn chuỗi cần tạo hiệu ứng Trên menu, chọn Format/Dynamic HTML Effect Xuất hộp thoại DHTML Effect: Chọn kiện mục On, gồm: + Click: Sự kiện tác động ta kích chuột lên đối tợng + Double Click: Sự kiện tác động ta kích đúp chuột lên đối tợng + Mouse Over: Sự kiện tác động ta đa trỏ chuột đến đối tợng + Page load: Sự kiện tác động load trang Web Sau chọn kiện, ta chọn hiệu ứng mục Apply Tùy thuộc kiện khác nhau, có hiệu ứng khác Cuối cùng, chọn giá trị cho hiệu ứng tơng ứng mục Choose Setting Sau tạo DHTML, cần phải lu thay đổi vừa chọn 3.11 Xuất trang Web 58 3.11.1 Giới thiệu Khi thiết kế xong Web site thực việc xuất Web site lên môi trờng Internet Web site nhóm tập tin có mối liên hệ với siêu liên kết (HyperLink), việc xuất Web site chép tất tập tin Web site đến nơi đặc biệt Chú ý: Cần kiểm tra tất mối liên kết xem trớc Web site trình duyệt trớc xuất Web site 3.11.2 Xem Web site trớc xuất Để thực xem Web site trớc xuất bản, ta thực nh sau: Trên menu, chọn View/Reports, chọn mục Site Summary Dùng để xem toàn thông tin Web site 59 Nó thể thông tin số tập tin HTM, số lợng ảnh đợc dùng, số lợng tập tin có liên kết, tập tin liên kết, số lợng liên kết Đồng thời thể tổng số Kilobyte Web site dùng, 3.11.3 Xuất Web site Trớc xuất Web site, cần tìm Web Server để xuất Có nhiều dịch vụ cho phép xuất trang Web Dịch vụ tiếng Web presence provider thờng cung cấp phơng pháp chuyển giao tập tin sang trang Web họ (thờng FTP) phải trả khoảng chi phí bổ sung sử dụng khoảng đĩa trống hay sử dụng trang đặc biệt đợc nhiều ngời tham quan đến Để xuất Web đến Web Server (HTTP) xuất FTP Server Ta thực nh sau: Đóng tất tất trang Page Views Trên menu, chọn File/Publish Web kích chuột vào nút lệnh Publish Web công cụ Xuất hộp thoại Publish Web: Chọn vị trí để xuất Web site cách nhập địa URL Web Server hộp Specify the location to publish your web to 60 Chỉ định tất trang Web muốn xuất cách kích chuột chọn mục Publish all pages , ngợc lại kích chọn mục Publish changed pages only Sau kích chuột vào nút lệnh Publish Khi xuất Web site, tất trang hình đợc tải lên mạng Ngoại trừ tập tin không muốn xuất bấm Dont Publish Khi FrontPage xuất thành công, xuất hộp thoại chứa địa URL, qua mở Web site trình duyệt để xem lại + Một số ý: * Đăng ký Web site miễn phí Internet Vào địa http://www.freeservers.com để đăng ký Web site miễn phí với địa truy cập có dạng http://.freeservers.com 61 Gõ vào địa mà bạn dự định đăng ký vào ô yourname Sau kích chuột vào Go Màn hình ra, chọn mục cuối 100% Free Hosting Option kích chuột vào nút SignUp Điền vào thông tin liên quan cần thiết nh Họ tên, mật khẩu, email, Cuối gõ vào ARTL để chắn bạn đồng ý với quy định Freeservers cung cấp dịch vụ miễn phí 62 Nếu đăng ký thành công, hình sau cung cấp cho bạn số lựa chọn xây dựng Web site * Cài đặt sử dụng PWS (Personal Web Server) Microsoft đa lựa chọn cho trình phát triển web site Personal Web Server hay PWS PWS giống nh web server: nhận yêu cầu, tìm trang web cần thiết, chạy kịch bản, liên kết liệu trả trang đáp ứng Tuy nhiên, PWS thờng trú nhớ máy tính mà nhà thiết kế web làm việc - Cài đặt PWS từ đĩa CD WIN98: - Đa đĩa CD Windows 98 ổ đĩa CD-ROM - Vào Start/Run - Gõ vào [X]:\add-ons\pws\setup.exe (X tên ổ đĩa CD-ROM) - Với đa số ngời dùng, cài đặt điển hình (typical install) tốt Nếu chọn cài đặt theo yêu cầu (custom install), chọn thành phần sau: 63 + Common Program file + MDAC 1.5 + Personal Web Server + Transaction Server - Bạn đợc yêu đa th mục Web mặc định (C:\Inetpub\wwwroot) - Chấp nhận mặc định cho phần Transaction Server Chơng trình cài đặt tất tập tin cần thiết Sau khởi động lại máy tính 3.12 Một số kỹ thiết kế Web 3.12.1 Tổ chức Web site Khi muốn thiết kế Web site, cần phải phân định rõ cách tổ chức hay cấu trúc Web site Tức là, cần biết Web site có bao trang Web, mối liên kết trang sao, Sẽ có hình ảnh đợc thể trang Web nội dung hình thành nh nào, nh tổ chức Web site cần ý đến cấu trúc Web site 64 Tổ chức Web site MyWebsite Images Bground Image1.gif Image2.jpg Image3.jpg html Trang1.htm Trang2.htm Trang3.htm Index.htm Ngoài ra, tổ chức Web site theo cấu trúc khác, nhng chúng phải phân định rõ ràng có tính tập trung 3.12.2 Thiết kế trang Web a Về màu sắc Không nên sử dụng gam màu chói để tạo nền, hay font chữ gam màu khiến ngời đọc có cảm giác khó chịu Không nên sử dụng hình có nhiều màu sắc nhiều chi tiết Nên sử dụng màu font chữ màu có độ tơng phản cao, tức không dùng màu chữ tông màu với màu b Hình ảnh 65 Không nên dùng tập tin hình ảnh có kích thớc lớn Không nên sử dụng ảnh *.GIF động đặt liên tiếp làm trang Web bị rối ảnh động c Cách trình bày Với tiêu đề trang, nên dùng hình ảnh để tạo tiêu đề Mỗi trang nên tạo liên kết đến trang khác hay tạo liên kết với trang chủ Nên đặt liên kết phía trái trang hay đầu trang Đối với trang Web có nội dung dài, cần có thêm liên kết cuối trang Có thể dùng Frame để tách trang danh mục (trang tạo liên kết) với trang nội dung Không nên lạm dụng nhiều việc sử dụng frame, điều khó quản lý trang Web nh tạo rắc rối tạo liên kết đến trang Web khác 66