Bài giảng điện tử môn tin học: Thiết kế web với frontpage 2003 ppt

THIẾT KẾ WEB VỚI MICROSOFT THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2003 FRONTPAGE 2003 Võ Quang Trung – Khoa Công nghệ Thông tin – Võ Quang Trung – Khoa Công nghệ Thông tin – Trường ĐH Đồng Tháp Trường ĐH Đồng Tháp E-mail: E-mail: vqtrung@pud.edu.vn vqtrung@pud.edu.vn NỘI DUNG NỘI DUNG Chương I: Một số khái niệm cơ bản Chương I: Một số khái niệm cơ bản Chương V: Multimedia hóa trang web Chương V: Multimedia hóa trang web Chương II: Ngôn ngữ HTML Chương II: Ngôn ngữ HTML Chương III: Tạo trang web với FrontPage 2003 Chương III: Tạo trang web với FrontPage 2003 Chương IV: Xử lý văn bản Chương IV: Xử lý văn bản & & một số đối tượng khác một số đối tượng khác  Mạng Internet là gì? Mạng Internet là gì?  Các dịch vụ quan trọng trên mạng Internet Các dịch vụ quan trọng trên mạng Internet   Dịch vụ FTP Dịch vụ FTP   Dịch vụ Telnet Dịch vụ Telnet   Dịch vụ Mail Dịch vụ Mail   Dịch vụ Web Dịch vụ Web  Dịch vụ World Wide Web (Web) Dịch vụ World Wide Web (Web)   Trình duyệt Web (Web Browser) Trình duyệt Web (Web Browser)   Phục vụ Web (Web Server) Phục vụ Web (Web Server) Chương I: Chương I: CÁC KHÁI NIỆM CƠ BẢN CÁC KHÁI NIỆM CƠ BẢN   Web site, trang web: Web site, trang web:  Trang Web: trang thông tin có chứa các siêu văn bản Trang Web: trang thông tin có chứa các siêu văn bản  Trang chủ (Homepage): trang đầu tiên của trang Website Trang chủ (Homepage): trang đầu tiên của trang Website  Web site là một vị trí trên Internet (nơi cung cấp dịch vụ Web site là một vị trí trên Internet (nơi cung cấp dịch vụ web). web).   URL ( URL ( U U niform niform R R esource esource L L ocation): ocation):  Là địa chỉ để định vị các nguồn tài nguyên trên Web. Là địa chỉ để định vị các nguồn tài nguyên trên Web.  Cấu trúc của một URL: Cấu trúc của một URL: <Giao thức>://<tên miền>[/Path][/Document] <Giao thức>://<tên miền>[/Path][/Document] Ví dụ: Ví dụ: http://www.pdu.edu.vn/khoacntt/index.php http://www.pdu.edu.vn/khoacntt/index.php Chương I: Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt) CÁC KHÁI NIỆM CƠ BẢN (tt)   Mô hình hoạt động của dịch vụ Web: Mô hình hoạt động của dịch vụ Web: Chương I: Chương I: CÁC KHÁI NIỆM CƠ BẢN (tt) CÁC KHÁI NIỆM CƠ BẢN (tt) Internet HTML HTML … … …………… …………… …………… …………… ……… ……… http://www.pud.edu.vn http://www.pud.edu.vn Xử lý yêu cầu Xử lý yêu cầu Web Server  Giới thiệu HTML: Giới thiệu HTML:  Là ngôn ngữ dùng để lập trình tạo ra các trang web (ở dạng Là ngôn ngữ dùng để lập trình tạo ra các trang web (ở dạng tập tin văn bản đơn giản) tập tin văn bản đơn giản)  HTML dùng các thẻ (tag) để thông báo cho các web browser HTML dùng các thẻ (tag) để thông báo cho các web browser hiển thị. hiển thị.  Hầu hết các web browser đều hiểu được ngôn ngữ HTML Hầu hết các web browser đều hiểu được ngôn ngữ HTML  Cú pháp các thẻ (tag) trong HTML: Cú pháp các thẻ (tag) trong HTML:  <Tên thẻ [TT1 = <GT1> TT2 = <GT2> ]> </Tên <Tên thẻ [TT1 = <GT1> TT2 = <GT2> ]> </Tên thẻ> thẻ>  Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậm đậm Chào các bạn Chào các bạn Chương II: Chương II: NGÔN NGỮ HTML NGÔN NGỮ HTML ( ( H H yper yper t t ext ext M M arkup arkup L L anguage) anguage)  Cấu trúc trang web tĩnh: Cấu trúc trang web tĩnh: <HTML> <HTML> <HEAD> <TITLE> … </TITLE> </HEAD> <HEAD> <TITLE> … </TITLE> </HEAD> <BODY> <BODY> <! Nội dung trang web > <! Nội dung trang web > </BODY> </BODY> </HTML> </HTML>  Một số thẻ HTML thông dụng: Một số thẻ HTML thông dụng:  Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML> Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML> và kết thúc bằng: </HTM> và kết thúc bằng: </HTM>  Thẻ <HEAD>: Phần đầu của trang web Thẻ <HEAD>: Phần đầu của trang web  Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong <HEADER>) <HEADER>) Chương II: Chương II: NGÔN NGỮ HTML (tt) NGÔN NGỮ HTML (tt) Ví dụ Ví dụ : : Đặt tiêu đề của trang web là: “Thông báo” Đặt tiêu đề của trang web là: “Thông báo” <HEAD> <HEAD> <TITLE>Thông báo</TITLE> <TITLE>Thông báo</TITLE> </HEAD> </HEAD>  Thẻ <BODY>: Chứa nội dung trang web. Thẻ <BODY>: Chứa nội dung trang web. <BODY [BACKGROUND=url BGCOLOR=color …]> <BODY [BACKGROUND=url BGCOLOR=color …]> Nội dung trang web Nội dung trang web </BODY> </BODY>  Chú thích trong HTML: dùng dấu <! và dấu > Chú thích trong HTML: dùng dấu <! và dấu > <! Nội dung chú thích > <! Nội dung chú thích > Một số thẻ HTML thông dụng (tt) Một số thẻ HTML thông dụng (tt)  Ví dụ: Ví dụ: Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòng Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòng chữ: “Chào các bạn !” ở dạng chữ đậm và nghiêng chữ: “Chào các bạn !” ở dạng chữ đậm và nghiêng < < HTML> HTML> <HEAD> <HEAD> <TITLE>Giới thiệu</TITLE> <TITLE>Giới thiệu</TITLE> </HEAD> </HEAD> <BODY> <BODY> Chào các bạn ! Chào các bạn ! </BODY> </BODY> </HTML> </HTML> Một số thẻ HTML thông dụng (tt) Một số thẻ HTML thông dụng (tt)  Các thẻ định dạng văn bản: Các thẻ định dạng văn bản: Một số thẻ HTML thông dụng (tt) Một số thẻ HTML thông dụng (tt) Tên thẻ Tên thẻ Giải thích Giải thích Ví dụ Ví dụ … … Dạng chữ đậm Dạng chữ đậm Hello world ! Hello world ! … … Dạng chữ nghiêng Dạng chữ nghiêng Hello world ! Hello world ! … … Dạng chữ gạch chân Dạng chữ gạch chân Hello world ! Hello world ! <S>…</S> <S>…</S> Dạng chữ gạch giữa Dạng chữ gạch giữa <S>Hello world!</S> <S>Hello world!</S> …… Size=“N”> …… Định dạng font chữ: Định dạng font chữ: Color: chỉ định màu Color: chỉ định màu Face: Chỉ định font chữ Face: Chỉ định font chữ Size: kích thước Size: kích thước Hello world face=“Arial”>Hello world … … Tạo chỉ số trên Tạo chỉ số trên X2 X2   X X 2 2 … … Tạo chỉ số dưới Tạo chỉ số dưới H2O H2O   H H 2 2 O O [...]... chọn nơi chứa web site 2 Click chọn web site cần mở 3 Click Open để mở web site CHƯƠNG III: 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 CHƯƠNG III: 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ế... 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 Click save để lưu trang web Nhập tên trang web CHƯƠNG III: 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 1 Click vào đây 2.Click vào để mở web site... của FrontPage 2003: Thanh tiêu đề Thanh Menu Thanh công cụ chuẩn Thanh định dạng Page tab Đóng trang web hiện tại Task pane Vùng thiết kế Chế độ làm việc Thanh cuộn ngang – dọc CHƯƠNG III: 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 1 Click vào đây 2.Click vào để tạo web site mới  Hộp thoại Web site Templates... Đưa web site vào vận hành thử nghiệm  Phát hiện và khắc phục lỗi  Nhận ý kiến đóng góp (về giao diện, chức năng, …)  Chỉnh sửa lần cuối Bảo trì và nâng cấp:  Cần phải tiếp thu các công nghệ mới để có thể nâng cấp web site nếu cần thiết CHƯƠNG III: 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. .. trong thẻ THIẾT KẾ MỘT WEB SITE THẾ NÀO ? Phân tích hệ thống web site:  Tìm hiểu đối tượng (khách hàng, người truy cập) của web site  Tìm hiểu các yêu cầu của khách hàng  Xây dựng mô hình hệ thống của web site:  Chức năng của từng trang  Cấu trúc của các trang  Mối liên kết giữa các trang  Xây dựng các mô hình cơ sở dữ liệu (nếu cần thiết)  Thu thập thông tin cần thiết (do khách hàng... cho các trang web THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt) Xây dựng từng trang web cụ thể:  Cần liên hệ với nhà cung cấp Host để biết được các thông tin về hệ thống mà web site sau này sẽ vận hành  Nếu có nhiều người cùng tham gia: nên quy ước cách đặt tên các trang web (tên file), tên các thư mục, tên biến  Cần chú ý sử dụng đường dẫn tương đối khi đưa hình ảnh, âm thanh hay tạo các liên kết giữa các... trang web đích trong một cửa sổ mới  "_top", "_parent", "_self“: dùng cho những trang web có chứa frame  Text: là đoạn văn bản hiển thị để người dùng click vào  Tạo liên kết đến E-mail: . THIẾT KẾ WEB VỚI MICROSOFT THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2003 FRONTPAGE 2003 Võ Quang Trung – Khoa Công nghệ Thông tin – Võ Quang Trung – Khoa Công nghệ Thông tin – Trường. Web Dịch vụ Web  Dịch vụ World Wide Web (Web) Dịch vụ World Wide Web (Web)   Trình duyệt Web (Web Browser) Trình duyệt Web (Web Browser)   Phục vụ Web (Web Server) Phục vụ Web (Web. hóa trang web Chương V: Multimedia hóa trang web Chương II: Ngôn ngữ HTML Chương II: Ngôn ngữ HTML Chương III: Tạo trang web với FrontPage 2003 Chương III: Tạo trang web với FrontPage 2003 Chương

Định dạng
Số trang	107
Dung lượng	4,52 MB