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

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:12

Thêm vào BST

Báo xấu

157
lượt xem 13
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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,...).

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 trang web Các thuộc tính của  BgColor: thiết lập màu nền của trang  Text: thiết lập màu chữ  Link: màu của siêu liên kết  Vlink: màu của siêu liên kết đã xem qua  Background: load một hình làm nền cho trang  LeftMargin: Canh lề trái  TopMargin: Canh lề trên của trang http://nguyenduccuong.com Slide 23 Tổng quan HTML – các tag cơ bản Ví dụ: LearningHTML Welcome to HTML http://nguyenduccuong.com Slide 24 8
Tổng quan HTML – các tag cơ bản Tag Embed  Cú pháp:  Ví dụ: 
Tổng quan HTML – các tag cơ bản  : Định dạng chữ đậm (giống )  Cú pháp: Văn bản được nhấn mạnh  : Nội dung khối văn bản nhấn mạnh http://nguyenduccuong.com Slide 28 Tổng quan HTML – các tag cơ bản  : Giữ nguyên các định dạng như: ngắt dòng, khoảng cách, thích hợp với việc tạo bảng  Cú pháp: Nội dung văn bản cần định dạng trứơc với tất cả định dạng khoảng cách, xuống dòng và ngắt hàng http://nguyenduccuong.com Slide 29 Tổng quan HTML – các tag cơ bản  Ví dụ: Learning HTML Trường Đại Học Công Nghiệp TP.HCM Khoa Công Nghệ Thông Tin http://nguyenduccuong.com Slide 30 10
Tổng quan HTML – các tag cơ bản  : Chia văn bản thành các khối, có chung một định dạng  chia văn bản thành một khối bắt đầu từ một dòng mới.  tách khối nhưng không bắt đầu từ một dòng mới  Cú pháp: Nội dung của khối bắt đầu từ một dòng mới http://nguyenduccuong.com Slide 31 Tổng quan HTML – các tag cơ bản Ví dụ: Learning HTML Trường Đại Học Công Nghiệp TP.HCM Khoa Công Nghệ Thông Tin http://nguyenduccuong.com Slide 32 Tổng quan HTML – các tag cơ bản Nội dung của khối trong 1 dòng Ví dụ: Learning HTML Creating Web Pages With HTML http://nguyenduccuong.com Slide 33 11
Tổng quan HTML – các tag cơ bản  Các ký tự đặc biệt:  Lớn hơn (>): >  Nhỏ hơn (