thiet ke web bang frontpage

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 ĐHSP Đồng Tháp Trường ĐHSP Đồ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 Web site Trang chủ (Homepage): trang đầu tiên của Web site  Web site là một vị trí trên Internet (nơi cung cấp dịch Web site là một vị trí trên Internet (nơi cung cấp dịch vụ web). vụ 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 (ở 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) dạng 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 HTML dùng các thẻ (tag) để thông báo cho các web browser hiển thị. browser hiển thị.  Hầu hết các web browser đều hiểu được ngôn ngữ Hầu hết các web browser đều hiểu được ngôn ngữ HTML 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 thẻ> <Tên thẻ [TT1 = <GT1> TT2 = <GT2> ]> </Tên thẻ>  Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậm Ví dụ: Hiển thị dòng chữ “Chao các bạn !” dạng in đậ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 Thẻ <HTML>: Trang web tĩnh được bắt đầu bằng :<HTML> :<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 Thẻ <TITLE>: Đặt tiêu đề cho trang web (thẻ này nằm trong <HEAD>) trong <HEAD>) 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 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 dò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 [...]... 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 xuất hiện 2.Click chọn mẫu web site 1.Nhập đường dẫn chứa web site Hoặc click... mở web site  Hộp thoại Open site xuất hiện 1 Click 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ế... 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  Hộp thoại Open... 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 1 Click tạo thư mục mới 2 Nhập tên thư mục là “Media”  ấn Enter CHƯƠNG III: TẠO MỘT TRANG WEB VỚI FRONTPAGE. .. Đư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. .. trang mới web web Một số thẻ HTML thông dụng (tt)  Tạo các liên kết (Hyper link):  Tạo liên kết đến trang web khác: Text Trong đó:  Url: là đường dẫn/địa chỉ của của trang web chuyển đến  Target có thể là các giá trị sau:  “_new” hoặc “_blank”: trình duyệt sẽ phải mở trang web đích trong một cửa sổ mới  "_top", "_parent", "_self“: dùng cho những trang web có chứa... thanh hay tạo các liên kết giữa các trang (copy các file ảnh/âm thanh vào thư mục của web site trước khi chèn chúng vào các trang web)  Giao diện: đơn giản, thân thiện, dễ dùng, hình ảnh, âm thanh, màu sắc, … tuỳ thuộc vào mục đích của web site  Xây dựng nội dung cho trang web: xúc tích và chính xác THIẾT KẾ MỘT WEBSITE THẾ NÀO ? (tt)  Khi lập trình cần chú ý đến thời gian thực hiện  Chú ý đến... thông tin cần thiết (do khách hàng cung cấp) để xây dựng nội dung 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... dài trên N dòng  Colspan: Số ô trải rộng trên M cột Chú ý: Thẻ phải nằm 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ô... Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh  Đưa nhạc nền vào web:  Một số thẻ HTML thông dụng (tt) Các thuộc tính:  Scr: là đường dẫn của file âm thanh (*.mid, *.wav, …)  Loop: số lần lặp lại bài nhạc Nếu loop= -1 hoặc “infinite” thì sẽ lặp đến khi chuyển sang trang mới web web  Chèn âm thanh, phim: Các . 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. 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. 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 

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