Bài giảng thiết kế Web - Chương trình kỹ thuật viên - Huỳnh Minh Phúc

 client.Nội dung gồm 5 phần:Căn bản về HTMLMột số lệnh Ngôn ngữ JavascriptPhần mềm hỗ trợ thiết kế web – DreamweaverPhần mềm xử lý ảnh Photoshop CS2Phần mềm tạo hiệu ứng Flash 8.0Thời lượng : 120 tiết.PHẦN IWEB – HTML - DREAMWEAVERInternet : mạng máy tính toàn cầu, các máy truyền thông với nhau bằng giao thức chung là TCP/IP (Transfer Control Protocol/Internet Protocol)CÁC KHÁI NIỆM CƠ BẢNIntranet : là mạng cục bộ không nối vào Internet, truyền thông bằng giao thức TCP/IP.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 ClientInternet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail Server, FTP Server)IAP từ chữ Internet Access Provider - nhà cung cấp khả năng truy cập Internet. Nếu hiểu Internet như một siêu xa lộ thông tin thì IAP là phương tiện để đưa bạn vào xa lộ, hay nói cách khác là kết nối bạn trực tiếp với Internet. IAP có thể làm luôn chức năng của ISP nhưng ngược lại thì không. Một IAP thường phục vụ cho nhiều ISP khác nhau. Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng. Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.Internet Protocol : tiêu chuẩn chi phối việc chuyển tải thông tin giữa các máy tính trong mạngWorld Wide Web (WWW): dịch vụ tra cứu thông tin Internet. Dịch vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser.Web Browser : trình duyệt Web. Dùng để truy xuất các tài liệu trên các Web Server. Internet ExplorerNestcapeFireFoxURL(Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng. Ví dụ: 207.46.130.149 được biểu diễn trong URL là www.microsoft.comPhân loại trang webDựa vào công nghệ phát triển, có 2 loại:Web tĩnhWeb độngDễ phát triểnKhó phát triển hơnTương tác yếuTương tác mạnhSử dụng HTMLSử dụng nhiều ngôn ngữ khác nhauThường dùng các công cụ trực quan để tạo ra trang webThường phải viết nhiều mã lệnhXác định cấu trúc website: phân cấpTour miền Bắc Trang chủWebsite Du lịchDu lịchViệt Nam Du lịchnước ngoài Đặt khách sạnĐặt vé máy bay Giới thiệu Du lịchmạo hiểm Tour miền Nam Tour miền Trung Phần dành cho khách hàngXác định cấu trúc website: ví dụXác định cấu trúc website: ví dụTrang quản trịWebsite Du lịchĐăng nhập Phân quyềnThay đổi nội dung đăng kýĐăng ký Cập nhậtnội dung Userđăng nhập Adminđăng nhậpPhần dành cho nhà quản trịMột số điều cần chú ýĐặc tả:Web để làm gì?Ai dùng?Trình độ người dùng?Nội dung, hình ảnh?Phân tíchMối liên quan giữa các nội dung?Thứ tự các nội dung?Một số điều cần chú ý (tt)Thiết kếSơ đồ cấu trúc websiteGiao diệnTĩnh hay độngCSDLNội dung từng trangLiên kết giữa các trangLập trìnhCấu trúc thư mụcCác module dùng chungMột số điều cần chú ý (tt)Kiểm thửKiểm tra trên nhiều trình duyệtKiểm tra trên nhiều loại mạngKiểm tra tốc độKiểm tra các liên kếtThử các lỗi bảo mậtCông bố website trên InternetCác điều kiện cần thiếtXây dựng websiteQuyền sử dụng hợp pháp DomainSử dụng tên miền con miễn phíĐăng ký tên miền riêngHostingSử dụng miễn phíThuê không gian riêngTự host website của mìnhDuy trì, phát triển và quảng bá websiteĐăng ký tên miềnXác định tên Tên tiếng ViệtTên giao dịch tiếng AnhTên viết tắtXác định nơi đăng kýĐăng ký tên miền càng sớm càng tốtThủ tục đơn giản, nhanh chóngKinh phí rẻViệt Nam: 450.000+480.000/nămNước ngoài: 8 – 12USDHostingXác định môi trường vận hành của websiteMáy chủ WindowsSupport ASP, PHP, SQL Server, MySQLĐắt hơn máy chủ LinuxMáy chủ LinuxSupport PHP, JSP, MySQLRẻ hơn máy chủ WindowsXác định dung lượng thực tế của website, khả năng sẽ mở rộngXác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu GIỚI THIỆU KHÁI QUÁT VỀ WEB & HTMLWeb:Web là một ứng dụng chạy trên mạng Client-Server, khách và chủ web liên lạc nhau bằng giao thức http (HyperText Transfer Protocol). Các web server cung cấp thông tin được định dạng theo ngôn ngữ HTMLWeb Page: là một file văn bản chứa những tag HTML hoặc những đọan mã đặc biệt mà trình duyệt web có thể hiểu và thông dịch được, file được lưu với phần mở rộng là .html hoặc htm. 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 đó2. HTML (HyperText makup Language): HTML gồm các đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình duyệt WebHypertext (Hypertext link) là một từ hay một cụm từ đặc biệt dùng để tạo liên kết giữa các trang web Mark up: là cách định dạng văn bản để trình duyệt hiểu và thông dịch được.Language: tập những quy luật để định dạng văn bản trên trang web.3. Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào: Notepad, FrontPage hoặc Dreamweaver.III. Dreamweaver1) Tổng quan về Dreamweaver:Là một phần mềm thiết kế Web chuyên nghiệp.Tương thích với nhiều đối tượng nhúng (Flash, Shockwave, Active X, ).Hỗ trợ các công cụ thiết kế trang Web động rất hiệu quả.2) Khởi động Dreamweaver: Chọn Start  Programs  Macromedia Dreamweaver3) Giao diện chính của Dreamweaver: GIỚI THIỆU DREAMWEAVER4) Chức năng các thành phần:  Thanh công cụ Document:GIỚI THIỆU DREAMWEAVERThiết kếbằngHTMLThiết kế bằngHTML và bằngcông cụThiết kếbằngcông cụTiêu đềcủa tranghiện hànhThể hiệnlỗi khithiết kếQuản lý fileXem thử kết quả bằng trình duyệtCáctùychọnkhithiếtkế4) Chức năng các thành phần:  Thanh công cụ Insert:Common:GIỚI THIỆU DREAMWEAVERTạoliênkếtTạoliênkếtđếnđịachỉmailTạođiểmneoBảng(table)ẢnhFlash,ActiveXNgàyChúthíchMẫuThẻ lựachọn4) Chức năng các thành phần:  Thanh công cụ Insert:Ngoài ra còn có các nhóm công cụ khác:+ Layout: cách bố trí, sắp xếp các thành phần.+ Forms: biểu mẫu.+ Text: định dạng văn bản.+ HTML: các thẻ HTML.+ Application: những ứng dụng trong Web động.+ Flash elements: các thành phần của Flash.GIỚI THIỆU DREAMWEAVER1) Tạo và lưu một trang Web:THIẾT KẾ TRANG WEBXuất hiện cửa sổ thiết kếHoặc chọn menu File  New Tạo mới một trang Web: click HTML(Create New) 1) Tạo và lưu một trang Web:THIẾT KẾ TRANG WEB1. Chọn đường dẫn nơi lưu file 2. Đặt tên file vàphần mở rộng 3.Chọn loại file4. Sau khi đã chọnđầy đủ thì click Save Lưu trang Web: chọn menu File  Save (Ctrl + S)Xuất hiện hộpthoại Save AsBài tậpSử dụng dreamweaver để:1. Tạo trang web liên hệ, lưu file với tên lienhe.html2. Tạo trang tin tức. Lưu file với tên tintuc.htmlChú ý: thực hành các bài tập week 1IV. CÚ PHÁP THẺ (TAG) HTML Cú pháp: Object TagName : tên tag HTML, liền với dấu “	ObjectVí dụ: nội dung V. CẤU TRÚC CƠ BẢN CỦA TRANG WEB 	Nội dung hiển thị trên trình duyệt	CÁC THẺ (TAG) HTML CƠ BẢN Thẻ này xác định phần nội dung chính của tài liệu – Phần thân của tài liệu. : Chứa nội dung của trang webCú pháp:Nội dung chính của trang web	Các thuộc tính của BgColor: thiết lập màu nền của trangText: thiết lập màu chữLink: màu của siêu liên kếtVlink: màu của siêu liên kết đã xem quaBackground: load một hình làm nền cho trang LeftMargin: Canh lề trái TopMargin: Canh lề trên của trangVí dụ:	 LearningHTML	Welcome to HTML	Các thẻ định dạng khối1. Thẻ : Dùng để ngắt đoạn và bắt đầu đoạn mới	Cú pháp:	 	Nội dung của đoạn 2. Các thẻ định dạng đề mục : Tạo header, gồm 6 cấp header, được đặt trong phần BODY	Cú pháp	 	Nội dung của Header 	: Ngắt dòng tại vị trí của tag.: Kẻ đường ngang trang	Cú pháp:	: đị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ạngCú pháp: 	Nội dung hiển thị7. : Chèn một hình ảnh vào trang WebCú pháp: 8. : Chèn một âm thanh vào trangWeb. Âm thanh này sẽ được phát mỗi khi người sử dụng mở trang Web.Cú pháp: 9. : Điều khiển đối tượng chạy một cách tự động trên trang Web	Cú pháp: 	 ObjectVí dụ: toi la chien sy10. : không hiển thị trong trang 	Cú pháp: 	 11. : định dạng chữ đậmCú pháp	 Nội dung chữ đậm12. Tag : Định dạng chữ nghiêng Cú pháp: Nội dung chữ nghiêng13. Tag : Gạch chân văn bảnCú pháp: Nội dung chữ gạch chân14. Tag và : Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanhCú pháp Nội dung chữ to Nội dung chữ nhỏ Ví dụ:Learning HTML Trường Đại Học Trà Vinh Trung tâm Tin học và Ngoại ngữ Victory Ví dụ:	 Learning HTML	 	Trường Đại Học Trà Vinh 	Trung Tâm tin học & Ngoại ngữ Victory	 	15. Các ký tự đặc biệt:Lớn hơn (>): >Ví dụ: If A > BThen A = A + 1Nhỏ hơn (If A < BThen A = A + 1If A > B Then A = A + 1 If A 	" To be or not to be? " That is the question Ký tự và &: &	Ví dụ:	 William & Graham went to the fairKý tự khoảng trắng:  " To be or not to be? " That is the question William & Graham went to the fair CÁC THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆTCách load lại trang Web: Click biểu tượng Refresh (F5) trên thanh công cụ.Chỉnh size chữ hiển thị trên trang: Chọn Menu View->Text sizeChỉnh lại font chữ: Chọn Menu View->EnCodingNếu trang Web không hiển thị được Font tiếng Việt: Chọn menu Tool chọn Internet Options->Chọn Tab Fonts chọn Font tiếng Việt Hoặc chọn Menu View>EnCodingchọn các font như User defined,Vietnamese.Các tuỳ chọn khác cho trang Web: Tools  Internet optionTab General(Hình 1): thiết lập các tùy chọn cho trình duyệt Use Current: chọn trang hiện tại để load lên mỗi lần khởi động IEUse Default: địa chỉ trang Web mặc định mỗi khi mở trình duyệt Ví dụ 	Khi mở IE thì tự động hiển thị trang Web Yahoo thì trong ô Address nhập:  , nếu chọn Use Blank thì hiển thị trang trắng .Chọn trang web mặc định khi mở trình duyệt Lưu lại các trang web đã duyệt qua tại máy Client và thông tin đăng nhập của user hiện hànhNếu khộng muốn lưu lại: Chọn Delete Cookies và Delete Files.thiết lập khoảng thời gian lưu trữ trang trong đối tượng HistoryTab Advance(Hình 2): có thể chọn các tùy chọn khác như:Ngăn chặn không cho tải hình xuống trang webMàu liên kết, cách thể hiện liên kết trên trangHiệu chỉnh trang Web: View source->hiệu chỉnhchọn File  Save để lưu lại F5 để cập nhật lại nội dung vừa hiệu chỉnhBài tậpTạo trang web giới thiệu, sau đó lưu lại với tên Liên hệ.htmlTạo các trang tin tức,. See you next class