BÀI GIẢNG : Microsoft Office FrontPage 2003 docx

BÀI GIẢNG :BÀI GIẢNG : Microsoft Office FrontPage 2003Microsoft Office FrontPage 2003 Microsoft Office FrontPage 2003Microsoft Office FrontPage 2003 1 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 Mục tiêu: - Thiết kế một web site đơn giản ở chế độ design của FrontPage 2003 của FrontPage 2003 - Vài ví dụ mẫu: - Bài tập 1: trang web đầu tiên - Bài tập2 3: mụctiêulàmquen Bài tập 2 , 3: mục tiêu làm quen - Bài tập 4, 5: mục tiêu tiếp theo à ậ ê ố ù - B à i t ậ p 6, 7: mục ti ê u cu ố i c ù n g 2 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: Những nội dung chính: - Khởi động FrontPage - Màn hình làm việc của FrontPage -Giới thiệu các thanh công cụ chính Các chế độ thiếtkế củaFrontPage - Các chế độ thiết kế của FrontPage 3 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 1. Khởi động và thoát FP - Khởi động: Start/ Programs/ MicrosoftOffice/ Microsoft FrontPage 2003 - Thoát FrontPage: Bấm nút X trên thanh tiêu đề của FP. - Đóng 1 trang mà không thoát FP: bấm nút X tại phần ngoài bên phải tên trang web Lưu ý : nếu tran g web chưa đư ợ c lưu thì sẽ có thôn g báo lưu tran g web. Bấm Yes nếu cần lưu ý g ợ g g thông tin chỉnh sửa hoặc No nếu hủy bỏ việc hiệu chỉnh trang web. 4 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 2. Màn hình làm việc của FrontPage Skhikhởi độ àhìh - S au khi khởi độ ng, m à n hì n h của FP hiện ra, sẵn sàng để làm việc - Để tạo một trang web mới, bấm nút New, chọn tiếp Blank Page ở Task Panel Blank Page ở Task Panel bên khung trái 5 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 3. Các thanh công cụ của FrontPage 31Cáh àđóáthhô 3 . 1 Cá c h xem v à đó ng c á c th an h c ô ng cụ - Chọn View Ch Tlb - Ch ọn T oo lb ar s - Chọn hoặc bỏ chọn trước tên các thanh công cụ để hiệnhoặc ẩn chúng thanh công cụ để hiện hoặc ẩn chúng . - Các thanh công cụ hữu ích: Standard, Formatting Drawing Pictures Formatting , Drawing , Pictures … 6 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 3. Các thanh công cụ của FrontPage 3 2 Thanh công cụ Standard 3 . 2 Thanh công cụ Standard Là thanh công cụ được dùng nhiều nhất, tập hợp các úlệ h ệ ả lý n ú t lệ n h quan trọng trong vi ệ c qu ả n lý : - Tập tin: tạo mới, lưu trữ, mở, sao chép… Kiểm tra lỗi chính tả in ấnxemkếtquả trang web đãthiếtkế - Kiểm tra lỗi chính tả , in ấn , xem kết quả trang web đã thiết kế - Các thao tác soạn thảo đơn giản: sao chép, cắt, dán các đối tượng - Chèn các thành phần đặcbiệtchènbảng siêu liên kếthìnhảnh Chèn các thành phần đặc biệt , chèn bảng , siêu liên kết , hình ảnh … 7 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 3. Các thanh công cụ của FrontPage 33Th h ô F tti 3 . 3 Th an h c ô ng cụ F orma tti n g Là thanh công cụ dùng để định dạng nhanh vănbản: dạng nhanh văn bản: - Kiểu văn bản, các loại font chữ, kích thước chữ dùng trong thiết kế - Các dạng nghiêng, đậm, gạch dưới, canh lề vănbản Các dạng nghiêng, đậm, gạch dưới, canh lề văn bản - Tạo số hoặc kí tự đặc biệt đầu mỗi đoạn - Kẻ khung, màu nềnvàmàuchữ củavănbản. Kẻ khung, màu nền và màu chữ của văn bản. 8 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 3.4 Thanh công cụ Pictures Là thanh công cụ dùng để hiệu chỉnh các đối tượng hình ảnh: - Chèn hình ảnh, nhập nội dung trực tiếp lên trên ảnh - Lật ảnh ngang, sang trái, phải, xoay ảnh - Các hiệu ứng cơ bản: làm mờ hoặc trong suốt, độ sáng, tối, độ tương hả ủ ả h p hả n c ủ a ả n h . - Cắt hình ảnh, định kích thước ảnh, tạo bản đồ liên kết ảnh… 9 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 3. Các thanh công cụ của FrontPage 3.5 Thanh công cụ Table Là thanh công cụ rất quan trọng trong thiết kế web, ngoài chức năng kẻ bảng và thựchiện các thao tác trựctiếptrênbảng nó còn dùng để bảng và thực hiện các thao tác trực tiếp trên bảng , nó còn dùng để định vị vị trí đối tượng trên trang web: - Giúp kẻ bảng nhanh, thêm hoặc xóa bớt các thành phần trên bảng - Nối, tách các ô, thêm, xóa dòn g cột - Định vị tương đối văn bản trong từng ô - Chọnmàuchobảng hoặcô - Chọn màu cho bảng hoặc ô . 10 [...]... II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I Giới thiệu FrontPage 200 3: 4 Các phương thức xem trang: Trong FrontPage có 4 phương thức xem một trang web 4.1 Chế độ Design: Chế độ nhập nội dung, bố cục, thiết kế website Ở chế độ này có thể sử dụng hầu hết các menu lệnh, các biểu tượng trên những thanh công cụ 12 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I Giới thiệu FrontPage 200 3: 4 Các phương thức xem trang:...PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I Giới thiệu FrontPage 200 3: 3 Các thanh công cụ của FrontPage 3.6 Cá th h ô 3 6 Các thanh công cụ khá khác - Thanh công cụ DHTML Effect: giúp tạo các hiệu ứng đặc biệt cho trang web như nhấp chuột, rê chuột, … vào một đối tượng - Thanh công cụ Positioning: dùng để nhúng, định vị vị trí đối tượng - Thanh Navigation: chọn View/ Navigation: Dùng để xem... trang web của mình 15 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: • Những nội dung chính phần II: • Các khái niệm cơ bả á khá ệ bản • Cách tạo một website • Cách tạo một trang web đơn • Lưu trữ và hiệu chỉnh • Xem website đã thiết kế 16 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: • Các khái niệm cơ bản: • Webpage: một trang web đơn chứa nội... mặc định images và _private Nhấp đúp vào index.htm để bắt đầu nhập nội dung cho trang web 18 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: 1 Cách tạo một website rỗng: 19 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: 1 Cách tạo một website rỗng: Lưu : - Trong bước chọn mẫu website, có thể chọn các mẫu khác nhau cho các mục đích khác nhau Ví dụ với... General, OK 22 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: 4 Lưu trang web Sau khi tạo một trang web, phải lưu trữ trang web đó lại để tránh việc mất dữ liệu bất ngờ - Lưu lần đầu: File > Save ặ p ợ g hoặc nhấp biểu tượng - Tiêu đề trang web: bấm Change title để thay đổi tiêu đề trang web 23 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: 4 Lưu trang web... g g g g 14 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I Giới thiệu FrontPage 200 3: 4 Các phương thức xem trang: 4.4 4 4 Chế độ Preview: Chế độ này cho phép xem trước kết quả thiết kế Ở chế độ này hầu hết các thanh công cụ sẽ bị mờ không hoạt động được, và một vài thành phần có thể sẽ hiển thị không chính xác Tốt nhất nên xem kết quả thiết kế trang web bằng xác trình duyệt IE Tóm lại: Trong 4 chế độ xem... phương thức xem trang: 4.2 Chế độ Split: hế l Chế độ này sẽ chia đôi màn hình làm 2, một màn hình , ộ dùng để nhập nội dung, bố cục, thiết kế giống chế độ Design, màn hình còn lại hiển thị chi tiết các ò ể ế á mã lệnh, các thẻ tag của ngôn ngữ HTML 13 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I Giới thiệu FrontPage 200 3: 4 Các phương thức xem trang: 4.3 Chế độ Code: hế d Chế độ này hiển thị chi tiết các... thể sử dụng nút lệnh Preview trên thanh công cụ để lựa chọn nhanh 25 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: 26 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II Các thao tác trên trang web: 6 Mở lại trang web cũ Để mở lại một trang web cũ hoặc hiệu chỉnh một website tải về từ Internet, ta làm như sau: Chọn File>Open, chọn đường dẫn lưu trang web trong ô Look in, chọn trang... bình thường 27 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 III Chèn nội dung văn bản vào trang web: Các nội dung chính: - Tìm hiểu cách nhập văn bản vào trang web - Lựa chọn font chữ, định dạng văn bản - Thay đổi màu nền, màu chữ, kẻ khung … - Tạo danh sách dạng liệt kê - Tìm kiếm và thay thế kí tự 28 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 III Chèn nội dung văn bản vào trang web: - Nội dung văn bản là... những nội dung quan trọng thiết đề, trọng, yếu, nên: - Làm cỡ chữ đậm hoặc nghiêng ở tiêu đề - Thay đổi màu sắc so với các văn bản thường - Canh lề hợp l : trái, giữa, phải - Lựa chọn font ch : nên chọn font chữ Unicode : Arial, Tahoma, hoặc Times New Roman 29 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 III Chèn nội dung văn bản vào trang web: 1 Xuống dòng: Shift Enter hay Enter 2 2 Sao chép di chuyển nội . BÀI GIẢNG :BÀI GIẢNG : Microsoft Office FrontPage 200 3Microsoft Office FrontPage 2003 Microsoft Office FrontPage 200 3Microsoft Office FrontPage 2003 1 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE. FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 Mục tiêu: - Thiết kế một web site đơn giản ở chế độ design của FrontPage 2003 của FrontPage 2003 - Vài ví dụ mẫu: - Bài tập 1: trang. ặ ấ c ấ pc h a h o ặ cc ấ pcon. 11 PHẦN II: THIẾTKẾ WEB VỚI FRONTPAGE 2003 THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 200 3: 4. Các phương thức xem trang: Trong FrontPage có 4 phương Trong FrontPage