Tập huấn công nghệ thông tin web - Thiết kế web

TẬP HUẤN CÔNG NGHỆ THÔNG TINWEB - THIẾT KẾ WEB Lecture: Nguyễn Đức Cương - FIT Tại sao lại là WEB?Văn phòng di động 24/24Thông tin liên lạc mọi lúc, mọi nơiGiớ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,..Mục tiêuNắ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 độngHiể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,..Nội dungCác thuật ngữ cơ bảnGiớ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,..Tài nguyênPhầ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,..Nguồn tham khảoGiáo trình thiết kế web – trường ĐH Công nghiệp Tp HCMPrinciple web design - Joel SklarCác thuật ngữ cơ bảnInternet : 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 gatewayCác thuật ngữ cơ bảnWorld 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 ServicePublish: làm cho trang web chạy trên internetURL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng. Các thuật ngữ cơ bảnWeb: 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 đó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ìnhTrình soạn thảo trang web :Notepad, ..Hỗ trợ thiết kế: FrontPage, Dreamweaver,...MS VS Studio,..Tổng quan HTMLCú pháp: Object TagName : , Object : văn bản, ảnh,..ListPropeties: danh sách thuộc tính của TagCấ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 Một số các ví dụHiển thị tiêu đề web:Welcome to my web pageTạo heading cho văn bảnHTML là gì?Ngắt đoạn, Kẻ đường ngangMột số các ví dụĐịnh dạng văn bản: đậm, nghiêng,..Văn bảnĐịnh dạng font chữĐịnh dạng toàn trangMột số các ví dụCho đối tượng chuyển động:ObjectChèn ảnh vào trang webChèn âm thanhChèn movieThao tác trên trình duyệtRefresh (Reload) – F5Chỉ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),..Một số phần mềm thiết kế webPhầ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 DesignerCác ví dụTạo siêu liên kếtobject_seft_topTên cửa sổWeb tĩnh – độngWebsite tĩnh:Được thiết kế bằng kỹ thuật HTML (Hypertext Mark-up Language). Chỉ đáp ứng được việc giới thiệu thông tin cho người dùng xem.Sử dụng thêm các kỹ thuật như Java Script, Flash Macromedia hay Animation Gif.Web động (dynamic web):ASP (Active Server Pages) chạy Windows PHP (PHP Hypertext Preprocessor) với Linux. JSP (Java Server Page) – Linux, WindowWeb site độngNgười sử dụng không cần có nhiều kỹ thuật webTin tức (CMS)Inner search:Member account:Shopping Cart: Online Payment:Forum:E-learning (học trực tuyến)Web site độngQuảng bá công ty, nhà trường, cá nhân,..Thương mại Điện Tử (E-Commerce):Quản lý từ xa (Remote Management): phù hợp công ty có nhiều chi nhánh ở các vị trí khác nhauCông cụ cho nguời quản lý web: cho phép cập nhật thông tin mà không cần có kiến thức nhiều về TK webDiễn đàn trực tuyến: tạo tính chuyên nghiệp. Web site độngGồm 2 phần:Phần Front-End – phần dành cho phía người sử dụng – xem nội dungPhần Back – End: phần quản trị dành cho nhà quản lý web siteĐiều kiện thiết lập web độngHiểu biết HTML, CSS,..Cơ sở dữ liệu: MS Access, Sql Server, MySql..Ngôn ngữ lập trình: Asp.Net, PHP..Web Server: IIS, Apache,..