THIẾT KẾ WEB VỚI MS FRONTPAGE 2003

THIẾT KẾ WEB VỚI MS FRONTPAGE 2003 Tổng hợp & Biên soạn: Huỳnh Đức Việt Email: huynhducviet@gmail.com Bài MỘT SỐ KHÁI NIỆM CƠ BẢN Các khái niệm   Internet mạng máy tính toàn cầu, bao gồm máy tính kết nối với nhằm trao đổi thông tin Các dịch vụ internet gồm:  WWW (World Wide Web): dịch vụ cung cấp thông tin  Trình duyệt Web (Web Browser)  Phục vụ Web (Web Server)  E-mail: thư điện tử  FTP (File Transfer Protocol): truyền tệp tin Các khái niệm (tt)   Internet Server: Server cung cấp dịch vụ Internet (Web Server, Mail Server, FTP Server…) Mô hình Client-Server: mô hình khách-chủ Server chứa tài nguyên dùng chung cho nhiều máy Client Các khái niệm (tt)  Giao thức (Protocol):    Tập hợp quy tắc thống máy tính mạng nhằm thực trao đổi liệu xác Ví dụ: TCP/IP, HTTP URL (Uniform Resource Locator)  Là địa để định vị nguồn tài nguyên Web  Cấu trúc URL: ://[/Path][/Document]  Ví dụ: http://www.vietnamnet.vn/tintuc/index.htm Các khái niệm (tt)  Web Là ứng dụng chạy mạng Client-Server, khách chủ web liên lạc giao thức http (HyperText Transfer Protocol)  Web Page Là file văn chứa tag HTML đoạn mã đặc biệt mà trình duyệt web hiểu thông dịch được, file lưu với phần mở rộng html htm  Website Một tập hợp nhiều web page, thể thông tin tổ chức chủ đề Các khái niệm (tt)  Web Server Là dạng phần mềm cài máy server để phục vụ quản lý website Ví dụ : apache, iis  Web Browser Là trình duyệt Web Dùng để truy xuất tài liệu Web Server Internet Explorer Nestcape Mozilla … Firefox Mô hình hoạt động dịch vụ web Xử lý yêu cầu Internet Web Server HTML… …………… …………… ……… http://www.duytan.edu.vn Phân loại web  Dựa vào công nghệ phát triển, có loại:   Web tĩnh: trang web tạo sẵn máy phục vụ trước người dùng yêu cầu  Dễ phát triển  Tương tác yếu  Sử dụng HTML Web động: trang web sẵn, tạo theo yêu cầu người sử dụng  Khó phát triển  Tương tác mạnh  Sử dụng nhiều ngôn ngữ khác nhau, viết nhiều mã lệnh Xây dựng công bố website 10  Xây dựng website Sử dụng chương trình hỗ trợ để thiết kế xây dựng trang web  Công bố website: cần yếu tố  Domain name   Địa IP khó nhớ khó sử dụng, cần phải xây dựng hệ thống địa Internet khác gọi hệ thống tên miền DNS để đặt tên cho máy tính Internet Hosting  Web hosting loại hình lưu trữ Internet cho phép cá nhân, tổ chức truy cập webiste họ thông qua World Wide Web Các thuộc tính định dạng (tt) 101  Định dạng trang  bacground-color: màu  background-image: ảnh    background- position: vị trí đặt ảnh gồm giá trị:left, right, center, top, bottom,inherit background-repeat: ảnh lặp – Repeat: lặp trang – Repeat-x: lặp theo chiều ngang – Repeat-y: lặp theo chiêù đứng background-attachment: giữ ảnh cuộn /không cuộn theo trang trình duyệt Các thuộc tính định dạng (tt) 102  Định dạng đường viền  border-style: kiểu đường viền  border-collapse: collapse: đường viền lún  border-bottom-style  border-left-style:double  border-right-style:double  border-top-style  border-left-color Định dạng cạnh khung Các thuộc tính định dạng (tt) 103  Định dạng hypertext link  Text-Decoration:none:  A:visited  A:link không gạch {styles cho vị trí xem} {styles cho vị trí chưa xem}  A:active {style cho link click}  A:hover {style trỏ lướt qua link} Bài FORM TRÊN TRANG WEB Các đối tượng nhập liệu 105   Cho phép người sử dụng nhập liệu trang web Dữ liệu gửi server để xử lý Người sử dụng nhập liệu thông qua điều khiển (controls) Có nhiều loại control: Form Oneline Textbox Checkbox Radio Button Button Combo box (drop-down menu) Listbox Hộp nhập văn nhiều dòng (TextArea) … Các đối tượng nhập liệu (tt) 106   Tất điều khiển có tên quy định qua thuộc tính name Tuy nhiên có số điều khiển name không quan trọng (các điều khiển mà sau không cần lấy liệu) Các điều khiển từ số đến số định nghĩa nhờ thẻ thuộc tính type xác định điều khiển tạo Form 107  Sử dụng để chứa đối tượng khác  Không nhìn thấy trang web hiển thị  Quy định số thuộc tính quan trọng method, action  Thẻ tạo form: …  Các thuộc tính:  name=“tên_form”: Không quan trọng  action=“địa nhận liệu”: Nên sử dụng đường dẫn tương đối nằm web  method=“phương thức gửi liệu” Chỉ có giá trị:  GET (mặc định)  POST Hộp nhập văn dòng (Textbox) 108  Sử dụng để nhập văn ngắn (trên dòng) mật  Thẻ:  Thuộc tính:  name=“tên_đt”: định danh đối tượng  type=“text”:Ô nhập văn thường  type=“password”: ô nhập mật  value=“giá trị mặc định” Checkbox 109  Cho phép chọn nhiều lựa chọn nhóm lựa chọn đưa cách đánh dấu (“tích”)  Thẻ: : ô nhập cần thẻ  Thuộc tính:  name=“tên_ĐT”: định danh đối tượng  type=“checkbox”  value=“giá trị”: giá trị chương trình nhận NSD chọn ô  checked: có nút mặc định chọn Radio Button 110   Cho phép chọn lựa chọn nhóm lựa chọn đưa Trên form có nhiều nhóm lựa chọn kiểu  Thẻ: : Mỗi ô cần thẻ  Thuộc tính:  name=“tên_đt”: định danh đối tượng Các đối tượng tên thuộc nhóm  type=“radio”  value=“giá trị”: giá trị chương trình nhận NSD chọn ô  checked: có nút mặc định chọn Nút lệnh (Button) 111  Sử dụng để NSD lệnh thực công việc  Trên web có loại nút:  submit: Tự động lệnh gửi liệu  reset: đưa liệu trạng thái mặc định  normal: người lập trình tự xử lý  Thẻ:  Thuộc tính:  name=“tên_ĐT”: thường không quan trọng  type=“submit”: nút submit  type=“reset”: nút reset  type=“button”: nút thông thường (normal)  value=“tiêu đề nút” Combo Box 112    Bao gồm danh sách có nhiều phần tử Tại thời điểm có phần tử chọn NSD chọn phần tử danh sách xổ xuống cách kích vào mũi tên bên phải hộp danh sách Thẻ tạo hộp danh sách: Danh sách phần tử  Thuộc tính:   name=“tên_ĐT”: quan trọng Thẻ tạo phần tử danh sách: Tiêu đề phần tử  Thuộc tính:  value=“giá trị”: giá trị chương trình nhận phần tử chọn  selected: có phần tử mặc định chọn Listbox 113     Tương tự Combo box, nhiên nhìn thấy nhiều phần tử lúc, lựa chọn nhiều phần tử Thẻ: … Thuộc tính: tương tự combo nhiên có thuộc tính khác:  size=“số dòng”  multiple: cho phép lựa chọn nhiều phần tử lúc Thẻ … tương tự combo box TextArea 114  Cho phép nhập văn dài nhiều dòng  Thẻ: Nội dung mặc định  Thuộc tính:  name=“tên_ĐT”: quan trọng  rows=“số dòng”  cols=“số cột” rows tính theo số dòng văn bản, cols tính theo số ký tự chuẩn dòng Kết thúc 115 [...]... liên kết (Hyperlink) 24    Là khả năng cho phép tạo liên kết giữa 1 đối tượng với một phần nội dung Khi ta kích chuột vào đối tượng thì phần nội dung sẽ được hiện ra Ta gọi:  Đối tượng sử dụng để kích chuột vào là: Đối tượng liên kết Đối tượng có thể là: văn bản, hình ảnh, một phần của ảnh  Địa chỉ nội dung sẽ được hiện ra là Đích liên kết Thẻ tạo liên kết: Đối tượng liên kết... số dòng mà ô này chiếm (mặc định là 1)  nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng Bài 3 MICROSOFT OFFICE FRONTPAGE 2003 1 Giới thiệu 36  FrontPage( FP) 2003 là phần mềm của Microsoft được phát triển để giúp cho công việc thiết kế web trở nên nhẹ nhàng đối với những người mới bắt đầu hay đã là người chuyên nghiệp ... () 3 Cấu trúc trang web 15 Tiêu đề trang web Nội dung thông tin của trang web 4 Trang web đầu tiên 16    Trang HTML có phần mở rộng (đuôi) là HTM hoặc HTML Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào (Notepad, EditPlus,…) Có nhiều trình soạn thảo HTML cho phép người dùng soạn thảo trực quan, kết quả sinh ra HTML... href=“gioithieu.htm”> Giới thiệu 10 Siêu liên kết (Hyperlink) (tt) 25  Thuộc tính:  href=“đích liên kết”: Nếu trong cùng web nên sử dụng đường dẫn tương đối  target=“tên cửa sổ đích” Tên cửa sổ phân biệt chữ hoa/thường Có một số tên đặc biệt:  _self: cửa sổ hiện tại  _blank: cửa sổ mới  Ví dụ: Liên hệ  Chú ý:  Liên kết với địa chỉ e-mail thì đặt href=“mailto:địa_chỉ_e-mail”... HTML tương ứng như:  Microsoft FrontPage  Macromedia Dreamweaver  … 4 Trang web đầu tiên (tt) 17  Soạn thảo:  Mở trình soạn thảo văn bản thuần (VD Notepad) gõ nội dung dưới  Ghi lại với tên “CHAO.HTM” Chao hoi Chao mung ban den voi HTML! 4 Trang web đầu tiên (tt) 18   Thử nghiệm:  Mở trình duyệt web (IE)  Vào File/Open, chọn... OK → Có kết quả như hình bên Thay đổi:  Quay lại Notepad, sửa lại nội dung trang web rồi ghi lại  Chuyển sang IE, nhấn nút Refresh (F5) → thấy kết quả mới Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần … 5 Soạn thảo văn bản 19  Văn bản được soạn thảo bình thường trong file HTML  Lưu ý:   Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang web là 1... đánh dấu siêu văn bản – Ngôn ngữ để viết các trang web Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 Đặc điểm:  HTML sử dụng các thẻ (tags) để định dạng dữ liệu  HTML không phân biệt chữ hoa, chữ thường  Các trình duyệt thường không báo lỗi cú pháp HTML Nếu viết sai chỉ dẫn đến kết quả hiển thị không đúng với dự định 2 Thẻ (tag) 13  Có nhiều thẻ, mỗi... thì đặt href=“mailto:địa_chỉ_e-mail”  Thực hiện lệnh JavaScript khi kích chuột vào thì đặt href=“javascript:lệnh” 11 Bản đồ ảnh 26   Bản đồ ảnh là một ảnh trong trang web được chia ra làm nhiều vùng, mỗi vùng khi click vào sẽ liên kết đến một địa chỉ URL Cách tạo: Trước hết phải chèn vào trang một ảnh và đặt nhãn cho ảnh = “type”... href="B1.htm"> ... Hộp thoại Web site Templates xuất Tạo trang web (tt) 39 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 Tạo trang web (tt)... Các khái niệm (tt)  Web Server Là dạng phần mềm cài máy server để phục vụ quản lý website Ví dụ : apache, iis  Web Browser Là trình duyệt Web Dùng để truy xuất tài liệu Web Server Internet... hoạt động dịch vụ web Xử lý yêu cầu Internet Web Server HTML… …………… …………… ……… http://www.duytan.edu.vn Phân loại web  Dựa vào công nghệ phát triển, có loại:   Web tĩnh: trang web tạo sẵn máy