Bài giảng Microsoft Office FrontPage 2003 - Phần II: Thiết kế Web với FrontPage 2003

BÀI GIẢNG : Microsoft Office FrontPage 2003 1 PHẦN II: 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 - Vài ví dụ mẫu: - Bài tập 1: trang web đầu tiên - 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 ng 2 PHẦN II: 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ết kế của FrontPage- 3 PHẦN II: 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 trang web chưa được lưu thì sẽ có thông báo lưu trang web. Bấm Yes nếu cần lưu 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Ế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 S khi khởi độ à hì h- au ng, m n n 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 bên khung trái 5 PHẦN II: 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 1 Cá h à đó á th h ô. c xem v ng c c an c ng cụ - Chọn View Ch T lb- ọn oo ars - Chọn hoặc bỏ chọn trước tên các thanh công cụ để hiện hoặc ẩn chúng . - Các thanh công cụ hữu ích: Standard, Formatting Drawing Pictures, , 6 PHẦN II: 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. Là thanh công cụ được dùng nhiều nhất, tập hợp các ú lệ h ệ ả lýn t n quan trọng trong vi c qu n : - Tập tin: tạo mới, lưu trữ, mở, sao chép 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 đặc biệt chèn bảng siêu liên kết hình ảnh , , , 7 PHẦN II: 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 3 Th h ô F tti. an c ng cụ orma ng Là thanh công cụ dùng để định 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ăn bản - Tạo số hoặc kí tự đặc biệt đầu mỗi đoạn - Kẻ khung, màu nền và màu chữ của văn bản. 8 PHẦN II: 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ả ủ ả hp n c a n . - 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Ế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ự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òng cột - Định vị tương đối văn bản trong từng ô - Chọn màu cho bảng hoặc ô . 10 PHẦN II: 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 6 Cá th h ô khá. c an c ng cụ 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 dạng cây phân cấp trong trang web, rất hữu ích trong trường hợp cần tạo nhanh những nút liên kết các trang trong cùng cấp, ấ h h ặ ấc p c a o c c p con. 11 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 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 2003: 4. Các phương thức xem trang: hế độ l4.2 C Sp it: 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 2003: 4. Các phương thức xem trang: hế độ d4.3 C Co e: Chế độ này hiển thị chi tiết các mã lệnh, các thẻ tag của ngôn ngữ HTML. Dành riêng cho những người rành về ngôn ngữ thiết kế web HTML 14 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 I. Giới thiệu FrontPage 2003: 4. Các phương thức xem trang: 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. trình duyệt IE Tóm lại: Trong 4 chế độ xem trang này, chúng ta sẽ thiết kế trang web ở chế độ Design, sau đó chuyển ngay sang chế độ Preview để xem kết quả. Nếu không vừa ý thì chuyển lại chế độ Design rồi tiếp tục hiệu chỉnh cho đến khi hoàn thành 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: á khá ệ bả• C c i ni m cơ 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 dung cụ thể về một vấn đề nào đó. Trong webpage có chứa liên kết tới các webpage khác • Website: tập hợp của các webpage mà mỗi trang đều có liên kết với nhau. • Trang chủ: thường được đặt tên là index.htm, chứa liên kết tới toàn bộ các webpage còn lại trong website Trang chủ thường. dùng thể hiện các nội dung quan trọng nhất mà muốn người khác phải chú ý . Có thể hình dung trang chủ của một website giống trang bìa của một tờ báo. 17 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: Thườ dù để t ột b it ỗ hư ó ội dng ng ạo m we s e r ng, c a c n ung: - Vào menu File, chọn New -> xuất hiện khung thoại bên phải màn hình, chọn More website templates. - Chọn một mẫu bất kỳ bên khung trái tùy vào yêu cầu sử dụng, bấm nút Browse và chọn đường dẫn lưu website, nhấp OK khi hoàn tất. - Trên FP sẽ xuất hiện một website mới chưa có nội dung và có sẵn 1 tập tin index.htm, 2 folder 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 mẫu Personal Web Site thì sẽ xuất hiện nhiều mục hơn là khi chọn mẫu One Page WebSite - Trong phần này, chúng ta chỉ quan tâm tới việc tạo một trang web đơn (webpage), vì việc tạo website chỉ thực sự dành cho những dự án lớn hoặc một trang web cá nhân cần đầu tư nhiều công sức, thời gian và kiến thức. 20 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II. Các thao tác trên trang web: 2. Cấu trúc tổng quát của một trang web: Cấu trúc tổng quát của một trang web gần giống với cấu trúc khi tạo một website, bao gồm: - Tập tin index.htm làm trang chủ, ậ à ẽ đ h đầ êt p tin n y s ược c ạy u ti n khi mở trang web - Các folder con chứa các thành phần khác của website, như folder images chỉ chứa các tập tin hình ảnh, folder webpages chứa các trang web con khác 21 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II. Các thao tác trên trang web: 3. Tạo một trang web mới Trang web mới sẽ được tạo theo 2 cách: - Tạo một trang web trắng chưa có nội dung - Tạo một trang web theo những mẫu có sẵn trong FrontPage 3.1 Tạo một trang web trắng File > New > chọn Blank page ở khung chọn bên phải 3.2 Tạo trang web mới theo những mẫu có sẵn File > New > More page templates, chọn một mẫu có sẵn trong phần 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 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 T hữ lầ lư t ữ tiế th hỉ ầ hấ biể tượ ế ốrong n ng n u r p eo, c c n n p u ng n u mu n lưu đè lên tập tin cũ hoặc chọn File > Save as nếu muốn lưu trữ với tên khác. Lưu ý: nếu trang web cần lưu có kèm hình ảnh thì khi lưu nó sẽ hỏi có muốn lưu kèm hình hay không? Bấm OK để xác nhận việc lưu trữ web với hình ảnh 24 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 II. Các thao tác trên trang web: 5. Xem trang web bằng trình duyệt - Sau khi thiết kế và lưu trang web, ta có thể xem kết quả ở chế độ Preview, tuy nhiên ở chế độ này đôi khi hiển thị không chính xác. Do đó cách xem tốt nhất là sử dụng trình duyệt web. - Vào File, chọn Preview in browser, sau đó chọn trình duyệt và độ phân giải màn hình cần xem. - Hoặ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 web cần mở ở khung trống bên dưới, bấm nút Open. Sau đó tiến hành hiệu chỉnh 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à phần thiết yếu của một trang web, nên viết rõ ràng, dễ hiểu, ngắn gọn nhưng phải đầy đủ thông tin - Để gây chú ý hơn đến những tiêu đề những nội dung quan trọng thiết, , 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 Sao chép di chuyển nội dung văn bản. , 3. Hủy bỏ thao tác vừa thực hiện ộ4. Định dạng font chữ - H p thoại Font 5. Thay đổi màu nền, màu văn bản, kẻ khung 6. Paragraph, danh sách liệt kê, tìm kiếm và thay thế 30 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 IV. Chèn hình ảnh vào trang web: Đặc điểm: - Hình ảnh là thành phần làm cho trang web trở nên sinh động, hấp dẫn và bắt mắt hơn có thể thay thế cho đoạn văn bản dài bằng một, hình minh họa đơn giản và dễ hiểu. - Có dung lượng lớn nên cần nhiều thời gian để hiển thị trên trang ì ậ ả ê ó ộ ý ấ ó à ắweb. V v y nh n n c n i dung hay nghĩa nh t định, c m u s c hợp tông màu trang web. Định vị hình ảnh hợp với từng chủ đề. - Không nên lạm dụng quá nhiều hình ảnh - Không nên dùng ảnh gốc có dung lượng lớn, tốt nhất là tạo một ảnh thu nhỏ (thumbnail) và liên kết nó với ảnh gốc 31 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 IV. Chèn hình ảnh vào trang web: 1. Phân loại hình ảnh 2 Chèn ảnh: từ tập tin và thư viện CilpArt. . 3. Sao chép và di chuyển ảnh. 4. Hộp thoại Picture Properties. 5. Thanh công cụ xử lý hình ảnh 6. Ảnh nền và màu nền trang web. 32 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 V. Chèn bảng vào trang web: 1. Tạo bảng - Chèn bảng - Chèn thêm cột/ dòng - Chọn các thành phần trong bảng - Xóa ô, dòng, cột, bảng - Trộn ô - Tách ô - Canh lề trong ô 33 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 V. Chèn bảng vào trang web: 2. Chèn các thành phần vào bảng ƒ Chèn văn bản hình ảnh chèn bảng vào ô , , 3. Thanh công cụ Table 4. Hộp thoại Table Properties ƒ Hộp thoại Table Properties ƒ Hộp thoại Cell Properties ƒ Màu nền từng ô ƒ Hình nền từng ô 34 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 VI. Chèn một số thành phần đặc biệt: 1. Chèn nhạc nền trang web File > Properties 2. Tạo dòng chữ chạy Marquee Insert/ Web Component/ Marquee 3. Chèn các nút nhấn tương tác Insert/ Interactive Button 35 PHẦN II: THIẾT KẾ WEB VỚI FRONTPAGE 2003 VII. Siêu liên kết: 1. Siêu liên kết ƒ Các bước tạo một liên kết Liê kết tới tậ tiƒ n p n ƒ Liên kết tới trang web khác ƒ Liên kết tới địa chỉ e-mail ƒ Liên kết ra bên ngoài ƒ Kiểm tra liên kết bằng trình duyệt ệ hỉ h l ê kế2. Hi u c n i n t 3. Liên kết bằng hình 36 TÀI LIỆU SINH VIÊN THAM KHẢO [1] N ễ Thiê Bằ ( hủ biê ) H à Đứ Hải Phươ L I t t h i. guy n n ng c n , o ng c , ng an, n erne c o mọ người, Nhà xuất bản Lao Động Xã Hội, 2008. ễ ễ[2]. Nguy n Ngọc Tuấn, Nguy n Công Sơn, Giáo trình thực hành Internet, Nhà xuất bản Thống Kê, 1999. [3]. Nguyễn Ngọc Điệp, Bài giảng Internet và Ứng dụng, ĐH Lạc Hồng, 2010. 37 38