Frontpage là một chương trình soạn thảo Web chuyên nghiệp, nó giúp cho người thiết kế thoát khỏi các mã nguồn HTML và có thể thiết kế Website theo ý riêng của minh. Frontpage cung cấp nhiều công cụ cũng như kỹ thuật tạo trang Web một cách nhanh chóng. Điểm mạnh của Frontpage thể hiện qua việc hỗ trợ phát hành Website lên mạng Internet. FrontPage cho phép người dùng:
• Tạo cấu trúc một Website
• Khởi tạo và soạn thảo một trang Web. • Chèn hình ảnh, âm thanh, files
• Khởi tạo các loại liên kết • Thiết kế ảnh.
• Tự động tạo Background và Butom • Tạo định dạng Frames và Table
• Hiển thị và kiểm tra kết quả bằng trình duyệt • Phát hành Web.
Trong bài thực hành tổng quan này chúng ta sẽ xây dựng hoàn chỉnh một Website cá nhân đơn giản.
Khởi động và thoát khỏi FrontPage
Khởi động Frontpage: ChọnStart->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ọnFile->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ọnFile- >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ọnFile ->New ->Web
• Chọn trang Web cá nhân Personal Web • Đặt tên và chỉ ra đường dẫn trang Web
• ChọnNavigationtrong 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 doFrontpagecung cấp. ChọnFormat-> Them
• Tạo bằng cách sử dụng nền bằng một ảnh tuỳ ý: ChọnFormat-> 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ọnFile ->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ọnFile->Save, chọn đường dẫn và lưu tên file
Chèn hình ảnh (adsbygoogle = window.adsbygoogle || []).push({});
• Chọn menuInsert->Picture->Clip ArthoặcFrom File
• Chỉ ra đường dẫn và tên file ảnh cần chèn (Ví dụ: C:\program files\Microsoft office\ office\tutorial\fp2000.gif và 2000.gif)
Đặ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ọnProperties Image, chọnStyle->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 trongProperties Image, chọnAppearance. ChọnKeep 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ọnPicture->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 menuInsert->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ọnProperties Image, chọnVideo. ChọnShow
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 trongRepeat. ChọnOn file Openđể đoạn video chạy khi chúng ta mở trang Web, chọnOn 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ọnInsert->Bookmark, đặt tên phần cần đánh dấu trong hộp thoạiBookmark name. Chọn OK
• Di chuyển chuột tới phần tạo liên kết, chọnInsert->Hyperlink. Trong cửa sổ Create Hyperlink chọnBookmark, chọn tên Bookmark đã đánh dấu
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 menuInsert->Hyperlinkhoặ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: (adsbygoogle = window.adsbygoogle || []).push({});
• ChọnFormat->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 trongOn, chọn hiệu ứng trong danh sáchApply
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ọnShared 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ọnThemvà 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ọnInsert->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ạngTexthayButtons
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 bảng
• ChọnTable->Insert Table, chỉ ra số dòng và cột cần tạo trongSize. Các tham số:
• Alignment: xác định vị trí hiển thị của bảng • Specify width: đặt chính xác kích thước bảng
• Border size: độ dày đường viền khung bảng (tính theo pixel) • Cell padding:vị trí dòng văn bản viết trong bảng
• Cell Spacing: độ dày đường viền của các cột và hàng trong bảng (tính theo pixel)
Chèn thêm dòng hoặc cột
• ChọnTable->Split Cellschỉ ra số dòng và cột cần chèn (hoặc chọn Insert-> Rows, Columns)
Đặt thuộc tính cho bảng
• ChọnTable->Table Propertiesđặt lại các thuộc tính về vị trí, màu sắc, kích thước, đường viền, màu nền… cho bảng
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ọnFile->New
• ChọnFrames Pages
• ChọnBanner and Contentstạo trang Web gồm 3 khung như hình vẽ • Chọn OK
• ChọnNew Pageđể soạn thảo một trang mới. ChọnSet 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. (adsbygoogle = window.adsbygoogle || []).push({});
Đư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ọnFile ->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.
• ChọnPublish all pages, overwriting any already on the destinationkhi 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ọnInclude subwebskhi chúng ta cần đẩy các thư mục con của Website lên máy chủ.
• ChọnSecure 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ọnPublic