Thực hành tạo Website bằng FrontPage2000

Cửa sổ làm việc

Thông thường, sau khi khởi động FrontPage, cửa sổ làm việc của chương trình Frontpage sẽ mở ra như dưới đây:

Con trỏ soạn thảoVùng soạn thảoThanh công cụ với các nút bấmKhung hiển thị trạng thái WebsiteThanh trạng tháiThanh Menu

Màn hình chính gồm các phần cơ bản như sau:

• Thanh menu lệnh chính (Menu bar):chứa tên các bảng lệnh như File, Edit, Insert,...
• Các thanh công cụ (Toolbars): gồm các nút biểu tượng lệnh, các danh sách lựa chọn lệnh. Rất nhiều thao tác soạn thảo thông thường được thực hiện nhờ các công cụ ở đây.
• Vùng soạn thảo văn bản (Text Area): là nơi đưa vào các đối tượng của trang Web như text, hình ảnh, bảng, ....
• Con chạy soạn thảo (Cursor): có dạng một thanh đứng nhấp nháy, là nơi định vị dữ liệu nhập vào.
• Thanh trạng thái : cho biết một số thông tin cần thiết cho trang soạn thảo.

Thanh menu lệnh chính

Dưới đây, chúng tôi xin cung cấp một số phím tắt thao tác trong soạn thảo Microsoft FrontPage.

Phím tắt thao tác với trang

Phím tắt cho các định dạng text và đoạn văn bản

Phím tắt để soạn thảo, di chuyển text và hình ảnh

Phím tắt để chọn text và hình ảnh

Phím tắt cho các menu lệnh và các thanh công cụ

Phím tắt gọi các trình ứng dụng

Phím tắt mục trợ giúp

Các thanh công cụ

Cũng tương tự như các phần mềm khác trong bộ chương trình Microsoft Office, FrontPage có giao diện rất trực quan, dễ sử dụng. Nhiều thao tác đã được chuyên dụng hoá bởi các nút lệnh, giúp cho người sử dụng tránh được những phiền phức khi gõ sai câu lệnh và giảm bớt được thao tác khi tạo trang Web. Các biểu tượng công việc này có thể truy cập trực tiếp bằng cách ấn vào biểu tượng trên thanh công cụ. Các chức năng trên thanh công cụ này tương ứng được đánh số như sau:

• Tạo một file mới
• Mở các file đã tồn tại
• Ghi file
• Xuất bản một Website lên máy chủ
• Hiển thị/ẩn danh sách các thư mục (tương tự như thao tác với Window Explorer)
• In file
• Xem trước Website hay trang Web hiện tại trên cửa sổ trình duyệt
• Kiểm tra chính tả trang Web đang soạn thảo.
• Cắt
• Sao chép vùng được lựa chọn
• Dán nội dung trong clipboard vào vị trí mới
• Sao chép định dạng của vùng lựa chọn để áp dụng cho một vùng mới
• Thực hiện lại hành động vừa thực hiện gần nhất
• Bỏ qua tác dụng của hành động vừa thực hiện gần nhất
• Chèn các thành phần đặc biệt tại vị trí con trỏ hiện tại
• Chèn bảng tại vị trí con trỏ hiện tại
• Chèn hình ảnh
• Chèn liên kết
• Làm mới lại giao diện hiện tại

• Dừng thao tác đang thực hiện
• Hiển thị các bookmark
• Trợ giúp

Những định dang dưới đây để áp dụng cho đoạn văn bản ta đang chọn

Chọn các định dạng mẫu

• Chọn phông chữ
• Chọn cỡ chữ
• Chọn chữ đậm
• Chọn chữ nghiêng
• Chọn chữ gạch chân
• Căn lề trái
• Căn lề giữa
• Căn lề phải
• Chọn đánh số theo dạng danh sách có thứ tự
• Chọn đánh số theo dạng danh sách không có thứ tự
• Thụt lề bên phải
• Thụt lề bên trái
• Chọn màu nền
• Chọn màu chữ

Khởi động và thoát khỏi FrontPage

Khởi động Frontpage: Chọn Start->Programs, chọn Microsoft Frontpage hoặc kích vào biểu tượng

***SORRY, THIS MEDIA TYPE IS NOT SUPPORTED.***

Thoát khỏi Frontpage: Chọn File->Exit

Hiển thị nội dung trang Web

Chúng ta có thể hiển thị trang Web dưới 4 trạng thái:

• Dạng soạn thảo thông thường: trong trường hợp này không thấy được các hiệu ứng của trang Web, dùng để soạn thảo nội dung trang.
• Dạng hiển thị bằng Preview: Dạng hiển thị Preview bằng trình duyệt có thể kiểm tra chính xác được nội dung và các hiệu ứng của trang Web (chọn File->Preview in browse->Internet Explorer5.0). Tuy vậy, chúng ta không thể soạn thảo được khi đang ở chế độ này.
• Hiển thị m nguồn HTML: ở dạng này chúng ta có thể sửa chữa trang Web bằng mã HTML.

Tạo một Website

• Chọn File ->New ->Web
• Chọn trang Web cá nhân Personal Web
• Đặt tên và chỉ ra đường dẫn trang Web

• Chọn Navigation trong thanh công cụ Views
• Chọn một vị trí trang Web nào đó trong Website để thêm, bớt các trang Web khác.
• Click vào một trong các trang Web có định dạng sẵn để soạn thảo hay sửa đổi nội dung.

Tạo mầu nền trang Web

Có hai cách tạo nền:

• Tạo bằng cách sử dụng nền có sẵn do Frontpage cung cấp. Chọn Format-> Them
• Tạo bằng cách sử dụng nền bằng một ảnh tuỳ ý: Chọn Format-> Backgroud

Chú ý nếu tạo mầu nền bằng Backgroud thì phải bỏ Them và ngược lại trên 1 trang Web.

Tạo một trang Web

• Mở một trang mới: Chọn File ->New->Page

• Soạn nội dung cho trang Web: chúng ta soạn nội dung trang Web như trong các trình soạn thảo thông thường
• Lưu file: Chọn File->Save, chọn đường dẫn và lưu tên file

Chèn hình ảnh

• Chọn menu Insert->Picture->Clip Art hoặc From File
• Chỉ ra đường dẫn và tên file ảnh cần chèn (Ví dụ: C:program filesMicrosoft office office utorialfp2000.gif và 2000.gif)
• Chọn OK

Đặt thuộc tính hiển thị ảnh

Đôi khi hình ảnh hiển thị trên trang Web không đúng như trong bản thiết kế. Frontpage cho phép chúng ta tuỳ chọn đặt hình ảnh ở vị trí tương đối (so với dòng văn bản) hoặc tuyệt đối trên trang Web. Việc đặt lại hình ảnh theo các bước sau:

• Chọn ảnh, click chuột phải chọn Properties Image, chọn Style->Format->Position. FrontPage đặt ảnh mặc định ở vị trí tương đối trong trang Web (None). Điều chỉnh lại độ lớn, vị trí, cách thức hiển thị ảnh trên trang Web trong:
• Wapping Style: cho phép chúng ta đặt vị trí ảnh so với dòng văn bản trên trang Web
• Positioning Style: nếu chọn Absolute hình ảnh sẽ hiển thị đúng theo giá trị Location and Size ở bất kỳ trình duyệt nào. Chọn Relative, hình ảnh hiển thị sẽ phụ thuộc vào trình duyệt Web
• Location and Size: xác định vị trí điểm ảnh ở điểm pixel nào trên trang Web (theo mặc định trang Web có kích thước 480x640)

• Đặt lại giá trị kích thước và khung viền của hình ảnh trong Properties Image, chọn Appearance. Chọn Keep aspect ratio để hình ảnh giữ nguyên tỷ lệ kích thước như ban đầu

Tạo biểu tượng cho hình ảnh

Đối với hình ảnh có kích thước lớn người ta thường tạo một biểu tượng nhỏ cho nó trên trang Web. Khi nhấn đúp ảnh vào biểu tượng ảnh sẽ tự động mở rộng thành hình ảnh ban đầu. Sau khi chèn hình ảnh vào trong trang Web, chọn Picture->Auto Thumbnail

Thực tế, khi ProntPage tạo thumbnail không phải là quá trình sửa đổi ảnh gốc mà là quá trình tự động copy ảnh với kích thước và độ phân giải nhỏ liên kết tới ảnh gốc.

Chèn đoạn video

Nhiều nhà thiết kế sử dụng video và các hình ảnh động tạo trang Web thêm phong phú và sinh động. Việc tạo hiệu ứng ảnh động có thể được làm từ các phần mềm tạo hình ảnh chuyên nghiệp hay sử dụng chính các hiệu ứng của Frontpage. Các bước thực hiện:

• Chọn menu Insert->Picture->Video
• Chỉ ra đường dẫn và tên file ảnh cần chèn (Ví dụ:D:/E-Book/dhqg.avi)
• Chọn video, kích chuột phải chọn Properties Image, chọn Video. Chọn Show control in Browser để hiển thị nút điều khiển video trên trang Web. Đặt số lần chạy và thời gian trễ của đoạn video trong Repeat. Chọn On file Open để đoạn video chạy khi chúng ta mở trang Web, chọn On Mouse Over đặt đoạn video chỉ chạy khi chúng ta di chuyển chuột qua nó.

Tạo liên kết tới một phần trong trang Web

Người ta thường sử dụng loại liên kết nội tại để liên kết tới một phần khác trong cùng trang Web trong trường hợp trang Web đó có nội dung quá dài hoặc có nhiều nội dung nhỏ tách biệt nhau. Để tạo được loại liên kết này cần phải đánh dấu vị trí chúng ta muốn liên kết tới. Các bước thực hiện:

• Đặt chuột tại vị trí cần tạo cần đánh dấu
• Chọn Insert->Bookmark, đặt tên phần cần đánh dấu trong hộp thoại Bookmark name. Chọn OK

• Di chuyển chuột tới phần tạo liên kết, chọn Insert->Hyperlink. Trong cửa sổ Create Hyperlink chọn Bookmark, chọn tên Bookmark đã đánh dấu
• Chọn OK

Tạo liên kết tới trang Web khác

Từ một trang Web chúng ta có thể liên kết tới nhiều trang Web khác nhau. Việc tạo liên kết ngoài tới bất kỳ một file nào (hình ảnh, văn bản, âm thanh) trên Internet được thực hiện thông qua địa chỉ liên kết URL. Trên trang Web các hình ảnh thường biểu tượng cho một công ty hay tổ chức nào đó. Khi chúng ta di chuyển và kích chuột tới biểu tượng này trang Web của công ty sẽ được hiển thị. Các bước thực hiện liên kết ngoài:

• Chọn hình ảnh, logo hay đoạn văn bản cần tạo liên kết
• Chọn menu Insert->Hyperlink hoặc chọn biểu tượng

• Chỉ ra địa chỉ trang cần liên kết tới trong hộp thoại URL

• Chọn OK

Tạo hiệu ứng cho dòng văn bản

Trang Web trở nên sinh động nhờ những hiệu ứng được thực hiện trên nó. FrontPage hỗ trợ thư viện tạo các hiệu ứng trong menu Component. Trong đó hiệu ứng cho dòng văn bản viết bằng ngôn ngữ đánh dấu siêu văn bản động DHTML được nhiều trang Web sử dụng. DHTML 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à đồ hoạ 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. Các bước thực hiện tạo hiệu ứng:

• Chọn Format->Dynamic HTML Effects để hiện Bar công cụ tạo hiệu ứng
• Chọn dòng văn bản cần tạo hiệu ứng
• Chọn sự kiện tạo hiệu ứng trong On, chọn hiệu ứng trong danh sách Apply

Phân chia trang Web thành nhiều thành phần

Ta có thể tổ chức trang Web thành nhiều phần bằng cách sử dụng công cụ Shared Border.

• Đưa chuột và trang Web dang soạn thảo
• Nhấn phím phải chuột
• Chọn Shared Border
• Lựa chọn cách chia trang

Tạo nút liên kết tự động

Frontpage tự động tạo các phím bấm theo theo lựa chọn Themvà tự động tạo các liên kết theo cấu trúc của Website.

• Chọn vị trí cần tạo
• Chọn Insert->Navigation Bar
• Lựa chọn cấu trúc liên kết của phím bấm theo sơ đồ.
• Có thể tạo phím bấm dạng Texthay Buttons

Tạo một bảng

Chúng ta có thể sử dụng bảng để hiển thị thông tin một cách có tổ chức, theo sự phân nhóm nào đó hay để hiển thị trang Web theo mục đích nghệ thuật nào đó.

Tạo khung

Tạo khung Frame là phương thức tạo trang Web có tính chuyên nghiệp cao. Do yêu cầu tổ chức nội dung trên trang Web có những nút chứa thông tin cố định và các phần nội dung thay đổi tuỳ thuộc vào từng nút đó mà chúng ta cần sử dụng khung. Mỗi Frame chính là một trang Web và nhiều khung có thể cùng thể hiện trên một màn hình của máy tính tạo thành trang Web chung. Các bước tạo trang Web gồm nhiều trang Web nhỏ hơn như sau:

• Chọn File->New
• Chọn Frames Pages
• Chọn Banner and Contents tạo trang Web gồm 3 khung như hình vẽ
• Chọn OK
• Chọn New Page để soạn thảo một trang mới. Chọn Set Intial Page để liên kết tới một trang Web có sẵn vào vị trí đó

• Có thể dùng công cụ Frames để phần chia một Frame thành nhiều Frame theo trục đứng hay ngang hoặc gộp nhiều Frames thanh một Frame. Khi ghi vào cần chú ý vị trí Frame để đặt tên được chính xác.

Đưa một Website lên máy chủ

Sau khi đã tạo song một Website đơn giản theo các bước trên chúng ta cần đẩy trang Web đó lên máy chủ để mọi người có thể truy cập vào. Để Website có thể hiển thị trên mạng Internet chúng ta cần đăng ký sử dụng tên miền với nhà cung cấp dịch vụ. Sau khi có địa chỉ trên Internet chúng ta làm như sau:

• Chọn File ->Publish Web
• Chỉ ra đường dẫn để truy cập tới trang Web đã cấp phép cho việc đăng ký trang Web này để truy cập lên vùng không gian do máy chủ Web cung cấp. Frontpage sẽ tự động copy các trang Web của chúng ta lên không gian đó.

• Chọn Publish all pages, overwriting any already on the destination khi chúng ta lần đầu đẩy toàn bộ trang Web lên đó, sau mỗi lần cập nhật chúng ta sẽ chọn Publish changed pages only để chỉ copy những trang Web sửa đổi lên trên máy chủ.
• Chọn Include subwebs khi chúng ta cần đẩy các thư mục con của Website lên máy chủ.
• Chọn Secure connection required (SSL) khi chúng ta cần yêu cầu việc kết nối khi copy Website lên máy chủ một cách bảo mật và an toàn..
• Chọn Public

Khái niệm

Khung là một trang HTML được hiển thị một phần trên trang Web. Các khung trong trang Web độc lập nhau. Một trang Web được tạo nên từ nhiều khung độc lập khác nhau. Tạo trang Web phức tạp, linh hoạt trong việc thiết kế Website. Quá nhiều khung sẽ làm phân tán sự chú ý của người dùng, làm cho màn hình phức tạp, khó sử dụng và dễ tạo nhầm lẫn trong quá trình liên kết tới các trang Web khác.

Mục đích của việc sử dụng nhiều khung tạo cho việc thiết kế trang Web có thể kết hợp các phần tử cố định và thay đổi. Phương pháp này cung cấp cách thể hiện nhất quán về các phần trong Website, cho phép chúng ta kết hợp nhiều trang Web đơn lẻ trong một trang chung.

Các bước thực hiện

Sao chép văn bản từ Word/Excel sang FrontPage

Trong Word->Excel->PowerPoint chúng ta chọn File->Save As và lưu trang đó lại dưới dạng file *.htm

Mở một trang Web mới, đánh dấu toàn bộ vùng cần sao chép từ Word dán vào trang Web. Chọn Edit->Paste Special, trong trường hợp này chúng ta cần chú ý các tuỳ chọn sau:

• One Formatted paragraph: toàn bộ văn bản chuyển thành một đoạn văn có định dạng duy nhất.
• Formatted paragraph: Sao chép toàn bộ văn bản với định dạng cũ
• Normal paragraph: Sao chép toàn bộ văn bản với định dạng Normal trong Frontpage
• Normal paragraph with line breaks: Sao chép toàn bộ văn bản với định dạng Normal trong Frontpage và thay dấu ngắt đoạn bằng dấu ngắt dòng
• Treat as HTML: Chọn tuỳ chọn này khi trong đoạn văn bản sao chép có mã HTML (tất cả thẻ HTML sẽ không hiện ra)

Sao chép biểu đồ từ Excel sang FrontPage

• Trong Excel chọn biểu đồ cần sao chép
• Trong FrontPage chọn File->Save As Web

• Chọn Selection Chart trong hộp thoại khi chỉ muốn lưu biểu đồ dưới dạng trang Web. Chọn Entire Workbook khi cần chuyển toàn bộ trang Excel sang trang Web, chọn đường dẫn lưu file.

Chuyển các tập tin Office thành trang Web

Trong FrontPage chọn File->Import và chỉ ra đường dẫn tới các tập tin Office cần chuyển vào trang Web.

chèn các phần tử Office vào FrontPage

Chèn bảng tính Excel:

• Chọn Insert->Component->Office Spreadsheet
• Kích chuột phải chọn ActiveX Control Properties, điền các thuộc tính sau

• Name: tên liên kết bảng tính với biểu đồ khác
• Alignment: lựa chọn cách hiển thị bảng tính
• Border thichness: chiều rộng đường biên bao quanh bảng tính
• Horizontal Spacing, Vertical Spacing: khoảng trống giữa bảng và văn bản trên trang Web
• Width, Height: kích thước của bảng tính
• HTML: địa chỉ trang Web hiển thị bảng tính nếu trình duyệt của người dùng không hỗ trợ bảng tính
• Kích chuột vào nút Properties Toolbox để xác định các thuộc tính của bảng tính

• General: cho phép quay trở lại ban đầu hoặc xem trợ giúp
• Format: định dạng phông chữ, kiểu chữ, kích thước và màu chữ, định dạng chiều rộng, chiều cao, màu sắc cột, cách hiển thị nội dung theo chiều dọc, chiều ngang, định dạng số..
• Show/Hide: hiển thị/tắt các thanh công cụ, đường gióng, thanh tiêu đề..
• Calculations: cho phép lựa chọn tính toán tự động hay bằng tay
• Find: tìm kiếm chuỗi văn bản trong bảng tính
• Import Data: hạn chế người dùng truy nhập tói một số ô trên bảng tính
• Title bar: thay đổi nội dung của thanh tiêu đề
• Advanced: thay đổi thuộc tính của bảng tính

Tạo bảng Pivot

• Trong Excel tạo một bảng cần Pivot, lưu bảng vidu.xls
• Trong FrontPage, chọn Insert->Component->Office PivotTable
• Chọn Properties Toolbox

• Trong Data Source chọn Connection, sau đó chọn Connection Editor
• Chọn Tab Provider, chọn Microsoft OLE DB Provider for ODBC Drivers

• Chọn Tab Connection, chọn Use Connection Strings, chọn Build.
• Chọn Tab Machine Data Source, chọn New

• Chọn User Data Source, chọn Next

• Chọn Microsoft Excel Driver (*.xls), chọn Next

• Chọn Finish, hộp thoại ODBC Microsoft Excel Setup xuất hiện như hình vẽ

• Chọn Select Workbook, chỉ ra đường dẫn tới file vidu.xls mà ta vừa tạo. Chọn OK
• Trong hộp thoại Command Text gõ: “Select * from vidu”, trong đó vidu là tên vùng cần tạo pivot trong bảng tính vidu.xls

• Xác định Pivot từ nguồn dữ liệu bằng cách chọn bảng Field List

• Đặt các thuộc tính lọc, sắp xếp, tính tổng... đối với từng trường trong Field List để hiển thị kết quả.

Thêm các biểu đồ Office: Các biểu đò sẽ hiển thị nội dung của bảng tính nhúng trong FrontPage

• Chọn Insert->Component->Office Spreadsheet nếu trong trang Web chưa có nội dung bảng tính
• Chọn Insert->Component->Office Chart

• Chọn loại biểu đồ (dạng cột, khung, đường kẻ...), chọn Next
• Chọn nguồn dữ liệu cho biểu đồ, chọn Next
• Điền tên biểu đồ, chọn vùng trên bảng tính cần lập biểu đồ, chọn Finish

• Chọn Chart Propety Toolbox thay đổi thuộc tính hiển thị của biểu đồ