Tài liệu Thiết kế Web với Microsoft Fronpage phần 4 doc

THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2000 (PHẦN4) Trong phần hướng dẫn bạn tạo hiệu ứng cho nút Nghĩa di chuyển chuột đến nút thay đổi Tuy nhiên, đưa chuột lên nút (Mouse Over) phía tiêu đề khơng thấy có thay đổi thay vịng trịn phía trước chữ phải đổi màu (như thấy phần Preview cửa sổ Xara WebStyle) Để hiệu chỉnh điều này, bạn thực thao tác sau: Trước tiên, bạn phải đảm bảo rằng: Ngoài cơng cụ có sẵn cửa sổ Frontpage như: Standard, Formating, Picture, v.v… cịn phải có thêm cơng cụ DHTML Effects Trong trường hợp khơng thấy có cơng cụ này, bạn nhấp phải chuột vào phần trống bên phải chữ Help sau nhấp chọn vào mục DHTML Effects (Nếu phía trước chữ có dấu v, chứng tỏ công cụ mở) Hoặc cách chọn Format > Dynamic HTML Effects từ trình đơn Tiếp theo, bạn nhấp chọn nút Giới thiệu Tại mục công cụ DHTML Effects xuất dòng chữ On < Choose an event > (các mục cịn lại bị mờ – khơng cho phép có chọn lựa nào) Bạn nhấp chọn vào mũi tên hướng xuống mục sau chọn Mouse over Lúc này, mục thứ hai hiển thị với nội dung Apply < Choose an Effect > Bạn nhấp vào mũi tên hướng xuống sau chọn Swap Picture Khi thực xong bước trên, mục thứ ba công cụ thị với nội dung ban đầu < Choose Settings > Bạn nhấp vào mũi tên hướng xuống chọn Choose picture… Khi đó, bạn thấy xuất hai hộp thoại Picture Select File Trong hộp thoại Select File, bạn đường dẫn đến thư mục chứa nút Danh sách nút hiển thị khung bên dưới, bạn nhấp chọn file gioi thieu over (tên file xuất mục File name) Xong nhấp chọn OK để hoàn tất Để lưu trữ lại kết thực hiện, bạn nhấp chọn File > Save nhấn tổ hợp phím Ctrl + S Xong, việc hiển thị chúng lên trình duyệt Web để xem nút Giới thiệu có thay đổi mong muốn không? Bạn nhấp chọn vào biểu tượng Preview in Browser Cửa sổ Microsoft Internet Explore xuất Bạn đưa chuột lên nút Giới thiệu Lúc này, trỏ chuột có hình bàn tay vịng trịn trước chữ Giới thiệu đổi màu Tương tự, bạn nhấp chọn nút lại thực bước thao tác cho chúng Tuy nhiên, thay chọn file gioi thieu over bạn chọn: cai dat over, ly thuyet over, bai tap over, xem phim over, tham khao over thoat over Khi thực xong, bạn nhấn Ctrl + S để lưu lại Và lần nữa, bạn nhấp chọn vào biểu tượng Preview in Browser để kiểm tra thao tác thực nút Bây giờ, bạn thấy thay đổi nút đưa chuột đến Cuối cùng, điều đơn giản lại quan trọng việc hình thành cấu trúc trang Web bạn phải tạo liên kết (Hyperlink) cho nút Điều có nghĩa nhấp vào nút trang Web mở trang chứa số nội dung cần thiết (do yêu cầu thiết kế) Để dễ hình dung công việc, bạn thao tác cụ thể nút Giới thiệu với yêu cầu sau: Nhấp vào nút Giới thiệu để mở trang Web có tên gioi thieu.htm Yêu cầu gồm hai việc xử lý tạo trang Web có tên gioi thieu.htm tạo liên kết từ nút Giới thiệu đến trang htm Trước tiên, tạo trang gioi thieu.htm: Trong cửa sổ Frontpage, bạn nhấp phải chuột vào trang Frame bên Một menu xuất hiện, bạn nhấp chọn Open Page in New Window Trang homepage bottom.htm (trang Frame bên dưới) mở rộng Nhớ bạn khơng thao tác trang Bạn tạo trang Web cách nhấp chọn File > New > Page trình đơn nhấn tổ hợp phím Ctrl + N Hộp thoại New xuất Trong hộp thoại này, tab General tab hành cho bạn sẵn số mẫu Web thông dụng Tuy nhiên, bạn nhấp chọn mẫu (mẫu có tên Normal Page) Xong, nhấp chọn OK Một trang Web tạo với tên mặc định new_page_1.htm Bạn lưu lại trang cách nhấp chọn File > Save nhấn tổ hợp phím Ctrl+S Hộp thoại Save As xuất Trong hộp thoại này, mục Look in, bạn đường dẫn đến thư mục lưu trữ (thư mục lưu trữ trang homepage top, homepage bottom homepage) Sau đó, mục File name, bạn nhập tên cho file gioi thieu Xong nhấp Save để kết thúc việc lưu trữ Tiếp tục, trang này, bạn nhập vào chữ GIỚI THIỆU tơ đen Bạn nhấp chọn Font VNI-Bodon-Poster chọn cỡ chữ (36 pt) Tiếp theo, bạn nhấp vào nút canh Sau đó, nhấp vào mũi tên hướng xuống bên phải chữ A chọn màu đỏ (Red) Bây giờ, bạn nhấp vào cửa sổ làm việc để xem lại sau nhấn Ctrl + S để lưu lại kết (Với trang gioi thieu.htm này, phần trống phía tiêu đề GIỚI THIỆU bạn đưa nội dung cần thiết vào.) Khi nhấn Ctrl + S để lưu lại, bạn nhấp vào dấu x để đóng trang gioi thieu.htm lại Tiếp tục, bạn nhấp vào dấu x lần để đóng trang homepage bottom.htm lại Khi thực xong việc đóng hai trang gioi thieu.htm homepage bottom.htm, bạn đưa trở lại trang tổng hợp với hai trang Frame Tiếp theo, bạn tạo liên kết để nhấp vào nút Giới thiệu trang gioi thieu.htm (vừa tạo) hiển thị trang Frame bên cách thực thao tác sau: Trước tiên, bạn nhấp chọn nút Giới thiệu Khi nhấp chọn, bạn thấy xuất khung bao quanh nút hình minh họa Tiếp theo, bạn nhấp chọn Insert > Hyperlink… trình đơn nhấn tổ hợp phím Ctrl + K Hoặc nhấp vào biểu tượng Hyperlink cơng cụ chuẩn Hộp thoại Edit Hyperlink xuất Trong hộp thoại này, theo thói quen bạn nhấp vào mục Look in để đường dẫn đến trang Web có tên gioi thieu.htm Tuy nhiên, trường hợp này, bạn không thực (Look in rỗng) Tuy nhiên, bạn lo lắng vấn đề Bạn nhấp vào biểu tượng Make a hyperlink to a file on your computer Hộp thoại Select File xuất nằm chồng lên hộp thoại Edit Hyperlink Trên hộp thoại Seclect File, mục Look in, bạn đường dẫn đến thư mục chứa trang Web có tên gioi thieu.htm (Trong tập này, trang gioi thieu.htm lưu thư mục CD LOGO) Khi chọn đường dẫn, danh sách trang Web lưu trữ xuất khung bên Bạn nhấp chọn file gioi thieu (Tên file xuất mục File name) Khi chọn xong, bạn nhấp nút OK Sau chọn OK, hai hộp thoại Select File Edit Hyperlink đóng lại Tiếp tục, bạn nhấn Ctrl + S để lưu lại thao tác thực Để hiển thị kết thực lên hình trình duyệt, bạn nhấp chọn biểu tượng Preview in Browser công cụ chuẩn Hoặc cách nhấp chọn File > Preview in Browser… từ trình đơn Hộp thoại Preview in Browser xuất Bạn chấp nhận thơng số mặc định sau nhấp chọn Preview (Hộp thoại xuất bạn chọn File > Preview in Browser…) Sau nhấp chọn nút Preview, cửa sổ Microsoft Internet Explorer xuất Nội dung trang Web hiển thị hình trình duyệt Bạn nhấp chuột vào nút Giới thiệu (Lúc trỏ chuột có hình bàn tay, vịng trịn trước chữ Giới thiệu đổi màu) Và điều quan trọng trang gioi thieu.htm hiển thị trang Frame với tiêu đề GIỚI THIỆU (như thiết kế trước đó) Ngồi ra, bạn kiểm tra thao tác thực cách nhấp vào tab Preview cửa sổ FrontPage (khơng phải mở hình trình duyệt) Sau nhấp chọn Preview (chữ Preview in đậm lên so với chữ tab bên cạnh), bạn nhấp nút Giới thiệu bạn nhận kết hiển thị giống chạy hình trình duyệt Tuy nhiên, bạn thấy hai cách hiển thị không đẹp mắt có ngang phân cách hai trang Frame Để che không cho hiển thị phân cách này, bạn thực thêm số thao tác đơn giản sau: Đầu tiên, bạn nhấp chọn vào tab Normal cửa sổ FrontPage Lưu ý: Cửa sổ Preview dùng để hiển thị kết Nếu bạn muốn có thay đổi hay chỉnh sửa lên Web bắt buộc phải trở lại cửa sổ Normal Sau nhấp chọn tab Normal để trở cửa sổ thiết kế, bạn đưa chuột vào đường phân cách hai trang Frame thấy trỏ chuột có hình mũi tên hai đầu Bạn nhấp chuột phải Một menu xuất với chọn lựa Frame Properties… Bạn nhấp chọn Hộp thoại Frame Properties xuất Trong hộp thoại này, bạn nhấp vào nút Frame Page… Hộp thoại Page Properties xuất với tab mặc định tab Frames Nếu tab chưa chọn, bạn nhấp chuột để chọn tab Trong tab này, bạn thấy hộp kiểm phía trước chữ Show Boders chọn Bây bạn nhấp vào hộp kiểm để loại bỏ Sau nhấp vào hộp kiểm Show Boders, số ô màu trắng mục Frame Spacing trả giá trị Bạn giữ nguyên mặc định nhấp chọn nút OK Sau nhấp chọn OK, bạn đưa trở lại hộp thoại Frame Properties Bạn giữ nguyên thông số mặc định nhấp chọn nút OK Lúc này, cửa sổ FrontPage, đường phân cách hai trang Frame bị ẩn Bạn nhấn Ctrl + S để lưu lại sau cho trang Web hiển thị lên trình duyệt Nhấp chọn nút Giới thiệu Lúc này, trang Web bạn trông đẹp mắt với “biến mất” đường phân cách hai trang Frame Cuối cùng, để hoàn chỉnh cấu trúc trang Web này, bạn tiến hành tạo trang cai dat.htm, ly thuyet.htm, bai tap.htm, xem phim.htm, thamkhao.htm thoat.htm Sau đó, nhấp vào nút Cài đặt, Lý thuyết, Bài tập, Xem phim, Tham khảo Thoát để tạo liên kết đến trang theo bước hướng dẫn trình bày trước Chúc bạn thành cơng!   ... việc hình thành cấu trúc trang Web bạn phải tạo liên kết (Hyperlink) cho nút Điều có nghĩa nhấp vào nút trang Web mở trang chứa số nội dung cần thiết (do yêu cầu thiết kế) Để dễ hình dung cơng việc,... cụ thể nút Giới thiệu với yêu cầu sau: Nhấp vào nút Giới thiệu để mở trang Web có tên gioi thieu.htm Yêu cầu gồm hai việc xử lý tạo trang Web có tên gioi thieu.htm tạo liên kết từ nút Giới thiệu... làm việc để xem lại sau nhấn Ctrl + S để lưu lại kết  (Với trang gioi thieu.htm này, phần trống phía tiêu đề GIỚI THIỆU bạn đưa nội dung cần thiết vào.) Khi nhấn Ctrl + S để lưu lại, bạn nhấp