Bài giảng Thiết kế Web 1: Bài 1 - Nguyễn Đức Cương

Bài giảng Thiết kế Web 1: Bài 1 do Nguyễn Đức Cương biên soạn cung cấp cho các bạn những kiến thức về tổng quan www – internet; web, Web tĩnh, Web động; các kiến thức cơ bản thiết kế web (HTML, CSS,..); công dụng, ý nghĩa của một số công cụ thiết kế, lập trình Web (MS Front Page, Dreamweaver 8, MS Expression Web, VS Studio 2005,...).
Nội dung trích xuất từ tài liệu:
Bài giảng Thiết kế Web 1: Bài 1 - Nguyễn Đức Cương MÔN HỌC: THIẾT KẾ WEB 1 Giảng viên: Nguyễn Đức Cương Email: cuongnguyenduc@gmail.com Web: http://www.nguyenduccuong.com PHẦN 1: NGÔN NGỮ HTML (HyperText Markup Language) Bài 1: TỔNG QUAN VỀ WEB Mục tiêu  Nắm vững kiến thức cơ bản về www – internet.  Hiểu được thế nào là web, Web tĩnh, Web động  Hiểu được các kiến thức cơ bản thiết kế web: HTML, CSS,..  Biết được công dụng, ý nghĩa của một số công cụ thiết kế, lập trình web: MS Front Page, Dreamweaver 8, MS Expression Web, VS Studio 2005,.. http://nguyenduccuong.com Slide 3 1 Tại sao lại là WEB?  Văn phòng di động 24/24  Thông tin liên lạc mọi lúc, mọi nơi  Giới thiệu quảng bá hình ảnh nhà trường, công ty,..  Thực hiện dịch vụ mua bán nhanh, thuận tiện,.. Nội dung  Các thuật ngữ cơ bản  Giới thiệu các kiến thức cơ bản thiết kế web: HTML, CSS,..  Giới thiệu một số công cụ thiết kế web: MS Front Page, Dreamweaver 8, MS Expression Web, VS Studio 2005,.. http://nguyenduccuong.com Slide 5 Tài nguyên  Phần cứng:  Máy tính chạy Win 2000 hoặc cao hơn.  Phần mềm:  Phần mềm TK Web: Dreamweaver MX, VS Studio,..  Trình duyệt: IE, Fire Fox,.. http://nguyenduccuong.com Slide 6 2 Nguồn tham khảo  Giáo trình thiết kế web – trường ĐH Công nghiệp Tp HCM  Principle web design - Joel Sklar  http://www.google.com  http://w3c.org  … http://nguyenduccuong.com Slide 7 Các thuật ngữ cơ bản  Internet :  TCP/IP:(Transfer Control Protocol/Internet Protocol)  Mô hình Client-Server:  Internet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server…)  Internet Service Provider (ISP):  Internet Protocol :  Phương thức truyền tin trong internet – thông qua gateway http://nguyenduccuong.com Slide 8 http://nguyenduccuong.com Slide 9 3 Các thuật ngữ cơ bản  World Wide Web (WWW):dịch vụ truy xuất tài liệu trên các máy.  Web Browser :  Internet Explorer, Mozilla FireFox, Nestcape, …  Hosting provider:  DNS: Domain Name Service  Publish: làm cho trang web chạy trên internet  URL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng. http://nguyenduccuong.com Slide 10 Các thuật ngữ cơ bản  Web: Một ứng dụng chạy trên mạng (Client-Server) tương tự ứng dụng khác. Nhưng được chia sẻ toàn cầu thông qua mạng Internet và các dịch vụ của nó.  Web Page: tập tin được lưu với phần mở rộng là .html, htm (web tĩnh); aspx, php,.. (web động).  Website: Một tập hợp nhiều web page, thể hiện thông tin của một tổ chức hoặc một chủ đề nào đó http://nguyenduccuong.com Slide 11 Tổng quan HTML  HTML (HyperText markup Language) gồm các thẻ (tag), đoạn mã đặc biệt – là sự định dạng để báo cho trình duyệt Web biết cách hiển thị.  Cho phép liên kết các loại âm thanh, hình ảnh bên trong trang web.  HTML không phải là ngôn ngữ lập trình  Trình soạn thảo trang web :Notepad, ..  Hỗ trợ thiết kế: FrontPage, Dreamweaver,...  MS VS Studio,.. http://nguyenduccuong.com Slide 12 4 Tổng quan HTML – Tag HTML  Cú pháp:  Object  TagName : ,  Object : văn bản, ảnh,..  ListPropeties: danh sách thuộc tính của Tag http://nguyenduccuong.com Slide 13 Tổng quan HTML – Tag HTML  Nếu có nhiều thuộc tính thì các thuộc tính cách nhau khoảng trắng Object  Ví dụ: nội dung http://nguyenduccuong.com Slide 14 Cấu trúc trang web Nội dung thông tin của trang web Nội dung hiển thị trên trình duyệt http://nguyenduccuong.com Slide 15 5 Thao tác trên trình duyệt  Refresh (Reload) – F5  Chỉnh kích cỡ - View/Text size (Zoom)  Bảng mã – View/Encoding (Character Encoding)  Xem mã nguồn – View/Source (Page Source)  Lưu lại trang ưa thích- Favorites (Bookmark),.. http://nguyenduccuong.com Slide 16 Một số phần mềm thiết kế web  Phần mềm không hỗ trợ giao diện TK:  Notepad, Text pad,..  PM hỗ trợ thiết kế  FrontPage: 2000, 2003, Expression Web (2007)  Macromedia Dreamweaver: MX, 8,..  MS VS Studio 2000, 2003, 2005,..  PHP Designer  Các ví dụ http://nguyenduccuong.com Slide 17 Tổng quan HTML – các tag cơ bản  Hiển thị tiêu đề web:  Welcome to my web page  Tạo heading cho văn bản (6 cấp – từ H1 – H6)  HTML là gì?  Ngắt đoạn  ,  Kẻ đường ngang  http://nguyenduccuong.com Slide 18 6 Tổng quan HTML – các tag cơ bản  Định dạng văn bản: đậm, nghiêng,..  Văn bản  văn bản  Văn bản  Định dạng font chữ   Định dạng toàn trang   http://nguyenduccuong.com Slide 19 Tổng quan HTML – các tag cơ bản  Cho đối tượng chuyển động:  Object  Chèn ảnh vào trang web   Chèn âm thanh   Chèn movie Tổng quan HTML – các tag cơ bản  : định dạng font chữ Định dạng Font chữ cho cả tài liệu thì đặt tag trong phần Định dạng từng phần hoặc từng từ thì đặt tại vị trí muốn định dạng  Cú pháp: Nội dung hiển thị http://nguyenduccuong.com Slide 22 Tổng quan HTML – các tag cơ bản  : Chứa nội dung của tra ...