Xây dựng Web

Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Thiết kế Web site trên FrontPage Nguyễn Đình Thắng TTGDTX tỉnh Phú Thọ Email: thangchd@yahoo.com Điện thoại: 0210.843726 2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close I. Giới thiệu về Website II. Khởi động và thoát khỏi chương trình FrontPage III. Cấu tạo và giao diện cửa sổ chương trình FrontPage Chương 1: Cấu tạo và giao diện cửa sổ chương trình FrontPage 3 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close 1- Website là gì - Là tập hợp các trang web do người làm việc tạo nên. Các trang web được xây dựng bằng các trình soạn thảo riêng. - Mỗi trang web có một địa chỉ Internet riêng gọi là URL - Các trang web được kết nối với nhau bằng các siêu liên kết - Website được đặt trên các máy phục vụ web (dịch vụ web server) - Khi vào Internet người sử dụng truy cập vào các máy phục này 2- Xây dựng trang web - Người làm việc xây dựng các trang web bằng các chương trình soạn thảo riêng - FontPage là một trình soạn thảo để xây dựng trang web I. Giới thiệu về Website 4 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close II. Khởi động và thoát khỏi chương trình FrontPage 1/Khởi động: - Start – Program - Microsoft FrontPage 2/Thoát: - Nhấn nút góc phải trên - Hoặc File - Exit - Hoặc Alt + F4 Nhấn nút X góc phải trên Microsoft FontPage Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close 5 III. Cấu tạo và giao diện cửa sổ chương trình FrontPage Chế độ cửa sổ soạn thảo Tên file đang xây dựng Thanh Pictures Phần soạn thảo nội dung Thanh tiêu đề Menu lệnh Thanh Standa Formatting Hộp đk cửa sổ Chế độ cửa sổ soạn thảo HTML Hiện thị nội dung đã soạn thảo 6 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Menu và Các thanh công cụ Thao tác nội dung Các hiển thị Thao tác chèn Các định dạng Công cụ hỗ trợ Bảng biểu Cửa sổ soạn thảo Mở file mới Lệnh ghi Cây và cửa sổ con Xem trình duyệt Sao chép địn dạng Tạo các thành phần Mở file đã có Đưa lên web server Lệnh in Chính tả Di chuyển sao chép Bảng biểu Chèn tranh ảnh Liên kết kiểu định dạng Font chữ cỡ chữ Kiểu chữ Canh lề Số thứ tự tự động Lý tự đầu các đoạn Tạo nền Màu chữ Dịch chuyển nội dung về bên trái, phải 7 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close I. Mục đích và yêu cầu bố cục của website II. Tạo các thư mục lưu trữ trang web III. Bảng biểu và tranh ảnh trong cấu trúc trang web Chương 2: Chuẩn bị xây dựng các trang web trên FrontPage 8 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close I. Mục đích và yêu cầu bố cục của website 1- Mục đích xây dựng web - Mở rộng quan hệ trong hợp tác phát triển - Trao dổi thông tin - Quảng cáo, giới thiệu sản phẩm - Hỗ trợ đối tác, khách hàng … 2- Yêu cầu bố cục của website - Bố cục chung + Trang tiêu đề + Trang chủ + Các trang khác - Số trang - Nội dung bố cục từng trang 9 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Yêu cầu bố cục của website ( tiếp ) T r a n g t h o T r o n g n u o c N g o a i n u o c T r a n g t i n L i e n k e t K i e n t h u c H e t h o n g u n g d u n g P h a n m e m T i n h o c P h a n m e m T i e u d u n g C o n g n g h i e p S a n p h a m D a n h n g o n T r a n g c h u C ¸ c t h « n g t i n q u ¶ n g b ¸ g i í i t h i Ö u Ví dụ: Sơ đồ bố cục website 1 0 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close II. Tạo các thư mục lưu trữ trang web 1- Tạo thư mục chính lưu trữ trang web - Mở ổ đĩa muốn lưu trang các trang web ( ví dụ ổ D: ) - Tạo thư mục chính để lưu các trang web (ví dụ: HTML) + Kích chuột phải vào nền cửa sổ + Chọn New - Folder - đăt. tên ( HLML ) - nhấn Enter Thư mục HTML [...]... để đưa vào trang web - Sử dụng trình sửa ảnh PhotoFiltre Ẩn hiện t.mục ảnh Xem thử Độ sáng và độ tương phản Kích thước Độ ảo Khung hình Xoay hình Công cụ sửa Ảnh sửa 1 Cắt xén Tranh ảnh trong thư mục Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Công cụ màu Chương 3: Xây dựng bố cục trang web trên FrontPage I II III 1 Định dạng mô hình cấu trúc trang web Xây dựng cấu trúc cho file tiêu đề Xây dựng cấu trúc file... C6 C7 C8 C9 Close 2- Xây dựng trang web từ cửa sổ frontpage a- Định dạng trang 2 Chọn Multilingual [UTF-8] 1 Lề trên, lề trái 3 Chọn 2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close b- Tạo khung bằng bảng biểu 2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close II- Tạo truy cập kiểm tra web khi đang xây dựng 1- Tạo đường dẫn truy cập - Start – Setting – Control panel 1.Phải chuột 6 7.Chọn thư mục Website 2.New 8 5.Next... dung Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close I Định dạng mô hình cấu trúc trang web 1- Chọn mô hình trang web theo mẫu a- Chọn mẫu trang web - File - New - Trong New ta chọn kiểu ( ví dụ: Header ) 1 File 4 Chọn Frames Pages 2 New 2 3 Page 5 Chọn kiểu 6 OK Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close b- Chọn thiết lập xây dựng trang web - Chọn thiết lập ( nên chọn New để tạo mới - rồi nhấn Save ) Chọn Set để... 1.Phải chuột tên truy cập 7.Chọn (tainguyen) 2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close 3- Truy cập đến trang website - Mở trình duyệt - Nhập đường dẫn đến trang web (http://maychu/Website/Trangchu.htm) (http://192.168.0.1/Website/Trangchu.htm) Nhâp đường dẫn 3 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close III Xây dựng cấu trúc cho file tiêu đề 1- Mở File tiêu đề - Vào thư mục chính - chọn file trang tiêu đề (header.htm)...2- Tạo các thư mục con lưu trữ trang web - Trong cửa sổ thư mục chính ( HTML ) tạo các thư mục sau: + Anhdong: Để lưu ảnh động + Anhtinh: Để lưu tranh ảnh tĩnh + Nutweb: Để lưu các nút + ungdung: Để lưu các phần mềm ứng dụng 1 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close III Bảng biểu và tranh ảnh trong cấu trúc trang web 1- Cách tạo bảng biểu - Đặt dấu nhắc nơi tạo - Table trên menu... trang web - Chọn thư mục chính đã tạo để lưu lại ( Tên cho file tiêu đề ) - Ví dụ: Đặt tên file là Header ở dòng Name - Nhấn Save 2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Lưu lại mô hình cấu trúc trang web ( tiếp ) - Chọn thư mục chính đã tạo để lưu lại ( Tên cho file nội dung ) - Ví dụ: Đặt tên file là center ở File Name - Save 2 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Lưu lại mô hình cấu trúc trang web. .. C4 C5 C6 C7 C8 C9 Close 2- Sử dụng bảng biểu xây dựng cấu trúc cho trang tiêu đề - Đặt dấu nhắc nơi bắt đầu - Chọn Table - chọn Insert - table - Chọn thông số như hình bên - OK - Đặt dấu nhắc trong ô vữa tạo - Chọn Table - chọn Insert - Table - Chọn thông số như hình bên - OK 3 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close 3- Tạo dòng danh mục liên kết của trang web Chọn dòng thứ 2 trong bảng vừa tạo - Chọn... biểu cho tiêu đề trang web Chọn dòng thứ 2 trong bảng - Chọn Format - Borders and Shading 1 Trang chủ Trang tin Trang thơ Tin học Liên kết Chọn màu kiểu khung ở Borders Chọn màu nền ở Shading -Chọn dòng thứ 1 trong - Chọn Format - Borders and Shading - Chọn khung ở Borders 3 Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Phần mềm Sản phẩm 2 5- Tạo hình ảnh, Font chữ cho tiêu đề trang web Đặt dấu nhắc vào dòng... cột, dòng Kiểm tra và thiết lập lại Kích thước cột đủ ký tự 1 Chia đều dòng, cột Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Màu nền Kích thước cột đủ ký tự 4 Chuẩn bị hình ảnh tĩnh và động đẻ đưa vào trang web a- Các File tranh, ảnh động và tĩnh - Các file tranh ảnh có đôi là GIF, JPG, ảnh động có đuôi là GIF - File có đuôi là PNG hỗ trợ nhiều chương trình, nhưng không tất cả 1 Home C1 C2 C3 C4 C5 C6 C7... trong thư mục ảnh tĩnh 4 Tiêu đề Sở Tài Chính Phú Thọ Trang chủ 3 Trang tin Trang thơ Tin học Liên kết Home C1 C2 C3 C4 C5 C6 C7 C8 C9 Close Phần mềm Sản phẩm Tạo hình ảnh, Font chữ cho tiêu đề trang web (tiếp) Đặt dấu nhắc ở cạnh phải tranh - Insert - Picture - From File Trang chủ Trang tin Trang thơ Tin học Liên kết 1 Chọn file tiêu đề trong thư mục tiêu đề Phần mềm Sản phẩm 2 Chọn Ok 4 Kéo Tiêu . 2- Xây dựng trang web - Người làm việc xây dựng các trang web bằng các chương trình soạn thảo riêng - FontPage là một trình soạn thảo để xây dựng trang web. hình cấu trúc trang web II. Xây dựng cấu trúc cho file tiêu đề III. Xây dựng cấu trúc file nội dung Chương 3: Xây dựng bố cục trang web trên FrontPage