Chương 4 Sử dụng frontpage 2003 để tạo một trang web đơn giản

SỬ DỤNG FRONTPAGE 2003 ĐỂ TẠO MỘT TRANG WEB ĐƠN GIẢN Giảng viên: Phạm Mạnh Cương E-mail: cuongpm@sonadezi.edu.vn CHƯƠNG 4: NỘI DUNG 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 Mở FrontPage 2003: Start  Programs  Microsoft Office  Microsoft FrontPage 2003 Màn hình làm việc của FrontPage 2003: 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Tạo web site mới: Mở MS.FrontPage Click vào hình mũi tên bên cạnh biểu tượng New  Web site  Hộp thoại Web site Templates xuất hiện 2.Click vào để tạo web site mới 1. Click vào đây 2.Click chọn mẫu web site 1.Nhập đường dẫn chứa web site. Hoặc click vào nút Browse để chọn 3.Click Ok để tạo website mới Chú ý: Phải tạo thư mục chứa web site trước khi tạo web site Sau khi tạo web site xong màn hình như sau xuất hiên: Thư mục chứa các hình ảnh Trang chủ của web site Tạo trang web mới Tạo thư mục mới Cần tạo thêm thư mục “Media” để chứa các file âm thanh, các đoạn video, các file flash 2. Nhập tên thư mục là “Media”  ấn Enter 1. Click tạo thư mục mới 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Tạo trang web mới: Click chọn biểu tượng new Click chọn biểu tượng save (hình chiếc đĩa mềm). Hộp thoại Save as xuất hiện Nhập tên trang web Click save để lưu trang web 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Mở web site đã có: Mở MS.FrontPage Click vào hình mũi tên bên cạnh biểu tượng Open  Open Site  Hộp thoại Open site xuất hiện 2.Click vào để mở web site 1. Click vào đây 2. Click chọn web site cần mở 1. Click chọn nơi chứa web site 3. Click Open để mở web site 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Mở trang web đã có: Sau khi mở web site xong, màn hình xuất hiện như sau Click phải vào trang cần mở và chọn Open 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Chuyển đổi giữa các chế độ làm việc: Có 3 chế độ làm việc: Design: chế độ thiết kế Code: chế độ soạn mã lệnh Split: chế độ vừa thiết kế vừa viết mã lệnh Preview: Chế độ chạy thử trang web trong FrontPage 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Thiết đặt thuộc tính cho trang web: Sau khi tạo trang web xong, công việc đầu tiên là ta thiết đặt thuộc tính cho nó. Bao gồm các thuộc tính chính: Tiêu đề trang web Định dạng lề cho trang web Font chữ, kích thướt, màu chữ mặc định của trang web Màu nền, ảnh nền và nhạc nền (nếu cần thiết) Để thiết đặt các thuộc tính này ta thực hiện: Click phải vào vùng trống trên trang web  Page properties để mở hộp thoại Page properties. Đặt tiêu đề cho trang web: Chọn tab General  nhập nội dung vào mục Title  click OK 1. Chọn tab General 2. Nhập tiêu đề 3. Click OK 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Định dạng lề cho trang web: Mở hộp thoại Page properties Chọn tab Advanced Định lề trên: nhập giá trị vào ô Top Margin Định lề trái: nhập giá trị vào ô Left Margin Định lề dưới: nhập giá trị vào ô Bottom Margin Định lề phải: nhập giá trị vào ô Right Margin 1. Chọn tab Advanced 2. Nhập giá trị để định lề, trên, trái, dưới, phải 3. Click Ok 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Định dạng font chữ, kích thướt, màu chữ mặc định: Mở hộp thoại Page properties Chọn tab Advanced Click chọn nút Body style. Hộp thoại Modify style xuất hiện Click nút Format  Font Chọn các giá trị cần thiết rồi click OK để thiết lập  Các bước như sau: 1. Click vào Body style để mở hộp thoại modify style 2. Click Format Font để mở hộp thoại Font Chọn font chữ Chọn kiểu chữ: bình thường, đậm, nghiên, … Click Ok để thiết đặt Nhập vào kích cỡ chữ (ví dụ: 12px) Chọn màu chữ 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Chèn ảnh nền: Mở hộp thoại Page properties Chọn tab Formatting  Background picture  Browse để chọn ảnh nền  OK     Chú ý: Phải đảm bảo rằng ảnh đã được lưu trong thư mục Images trước khi chọn nó làm ảnh nền 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Thiết đặt màu nền: Mở hộp thoại Page properties Chọn tab Formatting  Background  Chọn màu  OK 1. TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003 (tt) Đưa nhạc nền vào trang web: Mở hộp thoại Page properties Chọn tab Formatting  Background picture  Browse để chọn ảnh nền  OK Chú ý: Phải đảm bảo rằng file nhạc đã được lưu trong thư mục Media trước khi chọn nó làm nhạc nền Nếu muốn bài hát tự động lặp lại: Bỏ chọn mục Forever  nhập vào số lần lặp lại trong ô Loop 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Nhập văn bản: Khi ta gõ từng ký tự từ bàn phím thì chúng sẽ xuất hiện bên trái con nháy (con trỏ văn bản) Xoá một ký tự bên trái con nháy: ấn phím BackSpace (“”) nằm trên phím “Enter” Xoá một ký tự bên phải con nháy: ấn phím “Delete” Xoá nhiều ký tự cùng lúc: tô đen (chọn khối) ký tự cần xoá và ấn phím “Delete” Chọn khối (nhiều ký tự): Đặt con nháy ở đầu khối cần chọn -> ấn giữ phím “Shift” -> click chuột vào vị trí kết thúc của khối cần chọn. Hoặc ấn giữ phím “shift” và ấn các phím mũi tên: , , ,  2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chọn một dòng: Đưa con nháy về đầu dòng  ấn giữ phím “Shift”  ấn phím “End” Hoặc đưa con nháy về cuối dòng  ấn giữ phím “Shift”  ấn phím “Home” Chép (copy) một khối: Chọn khối cần chép  R-Click vào khối vừa chọn  Copy Hoặc chọn khối cần chép  ấn tổ hợp phím: “Ctrl + C” Cắt (cut) một khối: Chọn khối cần chép  R-Click vào khối vừa chọn  Cut. Hoặc chọn khối cần chép  ấn tổ hợp phím: “Ctrl + X” Dán (paste) một khối đã được copy hoặc cắt: R-Click vào vị trí cần dán  Paste Hoặc ấn tổ hợp phím: “Ctrl + V” 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Định dạng đoạn: gồm các định dạng sau Canh lề đoạn (trái, phải, giữa, đều) Khoảng cách giữa các đoạn Khoảng cách giữa các dòng Thực hiện: Chọn đoạn cần định dạng  Format  Paragraph 1. Chọn đoạn 2. Click Format  Paragraph Canh lề cho đoạn Khoảng các giữa các dòng trong đoạn Định khoảng cách trên, dưới của đoạn Click Ok 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Định dạng ký tự gồm các định dạng sau Font chữ, kiểu chữ, kích thướt Màu chữ, màu nền Thực hiện: Chọn đoạn cần định dạng  Format  Font. Hộp thoại Font xuất hiện và thực hiện định dạng như trước Chọn font chữ Chọn kiểu chữ: bình thường, đậm, nghiên, … Click Ok để thiết đặt Nhập vào kích cỡ chữ (ví dụ: 12px) Chọn màu chữ 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn các ký tự đặc biệt (Symbol): Click Insert  Symbol  chọn symbol cần chèn  click nút Insert Tạo các Bookmark trong trang: Bookmark: là các điểm đánh dấu của một đoạn Được dùng để tạo các điểm đến của các liên kết trong Thực hiện: Chọn các ký tự làm tiêu đề của đoạn  Insert  Bookmark. Hộp thoại Bookmark xuất hiện Nhập tên Bookmark Click OK 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn các siêu liên kết (Hyperlink): có 2 loại Liên kết trong (liên kết đến các Bookmark nằm trong chính trang đó) Liên kết ngoài: là liên kết đến các trang web khác Chèn liên kết trong: Chọn các ký tự làm liên kết Chọn Insert  Hyperlink ( hoặc ấn tổ hợp phím “Ctrl” + K) Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ Hộp thoại Insert hyperlink xuất hiện  click nút Bookmark Chọn tên Bookmark cần liên kết đến  click OK     1. Click Bookmark 2. Chọn Bookmark 3. Click OK 4. Click OK 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn liên kết ngoài: Chọn các ký tự làm liên kết Chọn Insert  Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K) Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ Hộp thoại Insert hyperlink xuất hiện  click chọn trang web cần liên kết  OK Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Address  click OK 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn dòng chữ chạy (marquee) trên trang web: Chọn các ký tự cần chèn Chọn Insert  Web component. Hộp thoại Insert web componet xuất hiện. Thực hiện theo các hình sau: Sau khi click Finish hộp thoại Marquee properties xuất hiện Hướng chuyển động Thời gian trì hoãn Số lượng Dạng chuyển động Màu nền Font, màu, kích thướt chữ Click OK để thiết đặt 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn Layer: Layer là một đối tượng cho phép ta đặt văn bản, hình ảnh, âm thanh, … vào trong nó Layer được đặt ở vị trí bất kỳ trong trang web (ta có thể di chuyển chúng một cách tùy ý) Chèn layer vào trang web: click Insert  Layers (hoặc click vào biểu tượng Layer ( ) trên thanh công cụ 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Nhập văn bản: Click vào một vị trí trên Layer  con nháy xuất hiện và ta có thể nhập văn bản một cách bình thường Chèn các đối tượng khác vào Layer: Click vào một vị trí trên Layer  chèn các đối tượng bình thường Điều chỉnh độ rộng và di chuyển Layer: Sau khi chèn Layer vào trang web, layer xuất hiện như sau: Điều chỉnh kích thướt theo chiều rộng Điều chỉnh kích thướt theo chiều rộng và cao Ấn giữ phím trái chuột và di chuyển chuột để di chuyển layer Điều chỉnh kích thướt theo chiều cao 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn bảng (table): Table cho phép hiển thị danh sách theo dòng, cột Table cho phép ta tạo các ô để đặt các đối tượng vào đúng vị trí của chúng (table chính xác hơn layer) Chèn Table vào trang web: click Table  Insert  Table Hộp thoại Insert table xuất hiện Nhập số dòng (rows), số cột vào ô (columns) Canh lề table (trái, phải, giữa) Thiết đặt độ rrọng và độ cao của table Độ rộng và màu của đường viền Chọn màu nền Chọn ảnh nền Click OK để chấp nhận 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Một số thao tác cơ bản với table: Di chuyển giữa các ô: ấn phím “Tab” để đi đến ô kế tiếp hoặc “Shift” + “Tab” để đi lùi về ô phía trước Chọn một hoặc nhiều dòng: Chọn 1 dòng: click vào ô đầu tiên của dòng  ấn giữ phím Shift  click vào ô cuối cùng của dòng. Chọn nhiều dòng: click vào ô đầu tiên của dòng đầu tiên cần chọn  ấn giữ phím Shift  click vào ô cuối của dòng cuối cần chọn Chọn một hoặc nhiều cột: Chọn 1 cột: click vào ô đầu tiên của cột  ấn giữ phím Shift  click vào ô cuối cùng của cột Chọn nhiều cột: click vào ô đầu tiên của cột đầu tiên cần chọn  ấn giữ phím Shift  click vào ô cuối của cột cuối cần chọn 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Thêm dòng mới vào bảng: Thêm một dòng mới vào cuối bảng: click vào ô cuối cùng của bảng (ô dưới phải)  ấn phím “Tab” Thêm một hoặc nhiều dòng tại vị trí bất kỳ: Click vào vị trí (dòng) cần thêm Click Table  Insert  Rows or Columns Hộp thoại Insert Rows or Columns xuất hiện 2. Thêm vào phía bên dưới dòng hiện hành 3. Thêm vào phía trên dòng hiện hành Click OK để thêm 1. Nhập số dòng cần thêm 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Thêm cột mới vào bảng: Thêm một cột mới vào bảng: click phải vào cột cần thêm  Insert columns. Cột mới sẽ được thêm vào trước cột hiện tại. Thêm một hoặc nhiều cột tại vị trí bất kỳ: Click vào vị trí (cột) cần thêm Click Table  Insert  Rows or Columns Hộp thoại Insert Rows or Columns xuất hiện 1. Click chọn Columns 3. Thêm vào phía bên trái cột hiện hành 3. Thêm vào phía bên phải cột hiện hành Click OK để thêm 2. Nhập số cột cần thêm 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Xóa cột: Chọn cột cần xóa Click phải vào cột vừa chọn  Delete columns Hoặc: Click Table  Delete columns 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Trộn (Merge) nhiều ô: Chọn các ô cần trộn Click phải vào các ô được chọn  Merger cells Hoặc: Click Table  Merge cells 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Tách (split) một ô thành nhiều ô: Chọn ô cần tách Click phải vào ô được chọn  Split cells Hoặc: Click Table  Split cells Hộp thoại Split cells xuất hiện 1. Trộn thành nhiều cột 1. Trộn thành nhiều dòng 3. Click OK để trộn 2. Nhập số lượng dòng/cột cần trộn 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Định dạng table: gồm các dịnh dạng chính Định dạng đường viền (border) Định dạng ảnh nền, màu nền Thực hiện: click vào table cần định dạng  Table Properties. Định dạng Border 2. Chọn màu đường viền 1. Chọn mẫu đường viền 2. Độ rộng đường viền 4. Khoảng cách từ đường viền đến chữ 5. Click OK để thiế đặt Định dạng ảnh nền, màu nền Chọn màu nền Click OK để thiết đặt Chọn ảnh nền 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Làm việc với khung (Frame): Một trang web có thể chứa nhiều frame Mỗi Frame chứa một trang web Frame giúp cho trình duyệt cùng một lúc có thể hiển thị một hoặc nhiều trang web trong cùng 1 cửa sổ Tuy nhiên không phải mọi trình duyệt điều hỗ trợ frame Tạo một trang web có frame ta thực hiện: Click mũi tên bên cạnh biểu tượng New  Page Hộp thoại Page template xuất hiện  Frames pages Chọn mẫu Hiển thị mẫu của trang Click OK Chèn trang web đã có vào frame Tạo trang web mới cho frame 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Định dạng khung: Click phải vào vùng trống trên khung  Frame Properties Hộp thoại Frame Properties xuất hiện Chọn trang web cần chèn vào frame Chiều cao và chiều rộng của frame Cho phép điều chỉnh kích thướt của frame khi hiển thị Click OK để đồng ý Xuất hiện các thanh cuộn khi cần thiết 2. XỬ LÝ VĂN BẢN & MỘT SỐ ĐỐI TƯỢNG KHÁC Chèn các thanh siêu liên kết: FrontPage 2003 hỗ trợ các thanh siêu liên kết đa dạng Thực hiện: Click Insert  Navigation Chọn kiểu thanh liên kết Click Next Chọn kiểu thanh liên kết Click Next Chọn kiểu hiển thị Click Finish Chèn thêm liên kết mới Xóa liên kết đang chọn Click OK Chỉnh sửa liên kết Di chuyển thứ tự liên kết 3. MULTIMEDIA HÓA TRANG WEB Multimedia hóa trang web làm cho nó trở nên sinh động, thu hút nhiều người truy cập hơn. Tuy nhiên, phải chú ý đến dung lượng của các tập tin media để đảm bảo thời gian tải về hợp lý Chèn ảnh vào trang web: Insert  Picture Chọn “Clip art”: nếu ta muốn chèn từ bộ sưu tập ảnh của FrontPage Chọn “From File”: nếu file ảnh đã tồn tại trên đĩa Chú ý: ảnh phải được chép vào thư mục “Images” của web site Click chọn 3. MULTIMEDIA HÓA TRANG WEB Chú ý: Sau khi chèn xong ta phải save trang web lại Nếu file ảnh vừa chèn chưa có trong web site thì màn hình Save embedded files xuất hiện để yêu cầu chúng ta lưu lại file ảnh vừa chèn 2. Chọn thư mục Images 3. Click OK Đổi tên file nếu cần thiết 1. Click Change Folder 4. Click OK 3. MULTIMEDIA HÓA TRANG WEB (tt) Đưa bộ sưu tập ảnh vào trang web: Bộ sưu tập ảnh có thể hiện thị một Album ảnh lên trang web FrontPage 2003 hỗ trợ 4 kiểu hiển thị bộ sưu tập ảnh Thực hiện: Chọn Insert  Picture  New Photo Gallery. Hộp thọai Photo Gallery xuất hiện Chú ý: Ảnh phải được chép vào thư mục “Images” trước khi chèn vào bộ sưu tập ảnh Nếu ảnh chưa có thì sau khi save trang web  xuất hiện hộp thoại Save embedded files  thực hiện các thao tác giống như trước 2. Sau khi chèn ảnh xong  Layout 3. Chọn kiểu hiển thị 4. Click OK 1. Click Add  Picture from file 6. Click OK 3. MULTIMEDIA HÓA TRANG WEB (tt) Chèn chữ nghệ thuật (Word Art): Thực hiện: Chọn Insert  Picture  Word art Nhập nội dung 1. Chọn mẫu 2. Click OK để mở hộp thoại Edit WordArt Text 5. Click OK để kết thúc Điều chỉnh nội dung dòng chữ Điều chỉnh mẫu WordArt Điều chỉnh hình dáng 3. MULTIMEDIA HÓA TRANG WEB (tt) Chèn file âm thanh, video: Các file âm thanh được dùng phổ biến là: *.wma, *.mid (các file này có dung lượng nhỏ hơn các file *.mp3, *.wav) Các file video được dùng phổ biến là: *.wmv, *.avi Thực hiện: Chọn Insert  Web component  Hộp thoại Web component xuất hiện Chú ý: File âm thanh, video phải được chép vào thư mục “Media” của web site Trước khi chèn Nếu file âm thanh, video chưa có thì khi save trang web sẽ xuất hiện hộp thoại Save embedded files Click chọn Change Folder  chọn thư mục “Media”  OK  OK 3. MULTIMEDIA HÓA VÀ XUẤT BẢN WEB SITE (tt) Chèn file hoạt hình Flash: Thực hiện: Chọn Insert  Picture  Movie in flash format Hộp thoại Select file xuất hiện 3. MULTIMEDIA HÓA VÀ XUẤT BẢN WEB SITE (tt) Sử dụng đối tượng MS Window Media Player: Thực hiện: Chọn Insert  Advanced Controls  ActiveX control  Windows Media Player  Click nút Finish Click phải vào đối tượng Media player  ActiveX Control Properties Cần chỉ định File Media được thực hiện khi trang web được tải về trình duyệt Chú ý: File được thực hiện bắt buộc phải được đặt trong thư mục “Media” của web site Chọn thư mục Media Chọn file cần chèn Click Open để chèn Sau khi chèn xong ta điều chỉnh lại đường dẫn cho File vừa chèn như sau: Xóa bỏ phần này để tạo đường dẫn tương đối Click OK để kết thúc