NỘI DUNG HỌC PHẦN THIẾT KẾ TRANG WEB

Thiết kế web là học phần thuộc khối kiến thức giáo dục chuyên nghiệp trong chương trình đào tạo trình độ đại học ngành khoa học thư viện, học phần trang bị cho sinh viên những kiến thức cơ bản về công nghệ web, nguyên lý hoạt động của ngôn ngữ web, thiết kế cấu trúc của 01 website trong hoạt động thông tin – thư viện. Ph

TRƯỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI KHOA VĂN HÓA, THÔNG TIN VÀ XÃ HỘI NỘI DUNG HỌC PHẦN THIẾT KẾ TRANG WEB Giảng viên: Phạm Quang Quyền Hà Nội, 8-2014 BỘ NỘI VỤ CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hạnh phúc TRƢỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI CHƢƠNG TRÌNH GIÁO DỤC ĐẠI HỌC NGÀNH ĐÀO TẠO: KHOA HỌC THƯ VIỆN ĐỀ CƢƠNG CHI TIẾT HỌC PHẦN Tên học phần: THIẾT KẾ TRANG WEB Mã học phần: Số đơn vị học trình: (45 tiết) Bộ môn phụ trách giảng dạy: Tổ môn thư viện/Khoa Văn hóa, Thơng tin & Xã hội Trình độ: Sinh viên năm thứ Phân bổ thời gian: - Lý thuyết : 20 tiết - Thực hành, tập : 23 tiết - Kiểm tra : 02 tiết Điều kiện tiên : Tin học Mô tả học phần: Thiết kế web học phần thuộc khối kiến thức giáo dục chuyên nghiệp chương trình đào tạo trình độ đại học ngành khoa học thư viện, học phần trang bị cho sinh viên kiến thức công nghệ web, nguyên lý hoạt động ngôn ngữ web, thiết kế cấu trúc 01 website hoạt động thông tin – thư viện Phân bổ thời lượng sau: Phân bổ thời lƣợng (tiết) Thực TT Nội dung học phần Tổng Lý hành, số thuyết Bài tập Chương 1: Khái quát chung 05 05 website mạng máy tính Chương 2: Cơng nghệ web 10 05 05 ngôn ngữ html Chương 3: Thực hành thiết kế web 30 10 20 Cộng 45 20 25 Mục tiêu học phần: - Kiến thức: Cung cấp cho sinh viên kiến thức công nghệ web : webserver, web browser, ngôn ngữ HTML,… Cung cấp kiến thức mơ hình website thư viện công cụ để thiết kế website - Kỹ năng: Trang bị cho sinh viên kỹ sau: + Thiết lập webserver + Thiết kế outline web + Xây dựng web tĩnh + Xây dựng web động + Quản trị (tạo lập, bảo trì, backup, ) sở liệu MySQL - Thái độ: Sinh viên có nhận thức vị trí, vai trị mơn học hoạt động chun mơn, có hiểu biết ngôn ngữ web, công nghệ web để vận dụng thiết kế vào website hoạt động thông tin – thư viện 10 Nhiệm vụ sinh viên: - Dự lớp; - Làm tập nhà, lớp, thảo luận; - Có tài liệu học tập; - Dự kiểm tra; - Dự thi kết thúc học phần 11 Tài liệu học tập: Slide Bài giảng Thiết kế web website:http://thuviennoivu.no-ip.org Tài liệu tham khảo: [1] Sử dụng DHTML CSS cho thiết kế web động - Nxb Lao Động Xã Hội [2] Tự học HTML XHTML - Nxb Thống Kê [3] Hướng dẫn sử dụng Dreamweaver cho thiết kế web - Nxb Lao Động Xã Hội 12 Phƣơng pháp nội dung đánh giá học phần: - - Chuyên cần thái độ học tập: đủ 80% thời lượng học lớp trở lên mức độ thể tập thực hành thảo luận theo nhóm (trọng số 10%) - - Kiểm tra học phần: 01 bài, trọng số 30% - - Thi hết học phần: trọng số 60% - 13 Thang điểm đánh giá: 10 - 14 Nội dung chi tiết học phần: CHƢƠNG KHÁI QUÁT CHUNG VỀ WEBSITE VÀ MẠNG MÁY TÍNH (5 tiết lý thuyết) 1.1 Lịch sử phát triển công nghệ web Ngày 6-8-1991, Tim Berners Lee cơng bố chương trình web Dự án “World Wide Web” Tim giới thiệu newsgroup alt.hypertext Ông cho biết dự án nhắm tới việc tạo liên kết tài liệu cách sử dụng “siêu văn bản” (hypertext) với internet Ngày 12-12-991: Máy chủ châu Âu online Paul Kunz, nhà khoa học thuộc trung tâm Stanford Linear Accelerator Center (SLAC), sau chuyến thăm phịng thí nghiệm Cern (nơi Berners Lee làm việc) định lập máy chủ cho Bắc Mỹ Đây việc làm cần thiết để đưa web khắp giới Máy chủ SLAC dùng phần mềm Berners Lee phát triển Tháng 11-1992: Đã có 26 máy chủ web online Ngày 22-4-1993: Trình duyệt Mosaic cho Windows đời Mosaic trình duyệt web chạy hệ điều hành Windows, phát triển Trung tâm quốc gia ứng dụng siêu máy tính (National Center for Supercomputing Applications) Hoa Kỳ Với trình duyệt này, cơng chúng tiếp cận web dễ dàng thân thiện Ngày 30-4-1993: Cern cơng bố World Wide Web miễn phí cho tất người Tim Berners Lee thuyết phục Cern “cho không” công nghệ web mã chương trình để người sử dụng tham gia phát triển Đây nguyên nhân chủ yếu giúp cho web phát triển nhanh chóng mạnh mẽ Tháng 5-1993: Viện cơng nghệ Massachusetts tung công nghệ mới, lần đưa tờ báo lên web Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng lập trình web cơng bố Tháng 11-1993: Webcam kết nối, truyền hình ảnh bình cà phê Tháng 2-1994: Tiền thân Yahoo đưa lên internet Hai sinh viên đại học Stanford David Filo Jerry Yang tác giả “Hướng dẫn World Wide Web Jerry”, sau đổi tên thành Yahoo Tháng 4-1994: BBC mở website cho chương trình TV: The Net Ngày 13-10-1994: Bill Clinton đưa Nhà Trắng lên web: whitehouse.gov Ngày 25-10-1994: Quảng cáo banner lần đầu xuất website ATT Tháng 2-1995: Radio HK thức trở thành đài phát trực tuyến “fulltime” Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trương Được Jeff Bezos thành lập từ năm 1994 với tên ban đầu Cadabra.com, Amazon.com công ty bán hàng trực tuyến lớn mạng Ít người biết siêu thị khổng lồ trực tuyến ban đầu hiệu sách Tháng 8-1995: Đã có 18.957 website Ngày 9-8-1995: “Bùng nổ tên miền com” Hàng loạt cơng ty trực tuyến thức mở cửa website Ngày 24-8-1995: Microsoft Internet Explorer (IE) phát hành phần Windows 95 Ngày 4-9-1995: eBay, website đấu giá trực tuyến thành lập Chủ nhân sàn đấu giá trực tuyến Pierre Omidyar Món hàng bán đèn chiếu laser hỏng Ngày 15-12-1995: Alta Vista, cơng cụ tìm kiếm đa ngơn ngữ mắt người sử dụng Internet Ngày 4-7-1996: Hotmail khai trương ngày quốc khánh Hoa Kỳ Tháng 8-1996: Số website đạt 342.081 Tháng 5-1997: BBC News mở website bầu cử năm Tháng 6-1997: Tên miền business.com bán với giá 150.000USD (80.000 bảng) Ngày 17-12-1997: Jorn Barger đưa khái niệm weblog, sau rút gọn thành blog Ngày 1-3-1998: Kozmo.com khai trương Được thành lập Joseph Park Yong Kang, Kozmo.com quyên góp 280 triệu USD, 60 triệu từ Amazon.com tun bố chuyển phát miễn phí thứ vịng 1g, từ DVD đến… cà phê Website sập tiệm vào tháng 42001 “bong bóng com” … xì Tháng 9-1998: Gã khổng lồ Google mở cửa văn phịng gara California Ngày 19-10-1998: Open Diary, blog community đời Tháng 5-1999: Shawn Fanning, sinh viên Boston thành lập Napster Đây chương trình P2P (peer to peer) sử dụng rộng rãi, chương trình Fanning viết từ cịn học trung học để chia sẻ file mp3 với bạn bè Napster thu hút đông đảo người dùng Internet cả… công ty kinh doanh âm nhạc, người coi P2P phạm pháp Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều người chơi (MMORPG) Ngày 19-8-1999: MySpace khai trương Đây website lưu trữ trực tuyến Website thành lập Tom Anderson, Chis DeWolfe nhóm lập trình viên Hiện MySpace có gần 100 triệu người sử dụng có hệ thống tin nhắn, blog âm nhạc, ảnh,… Tháng 11-1999: Boo.com trở thành site kinh doanh thời trang Ngày 10 -1-2000: AOL mua lại Time Warner, vụ sát nhập lớn lịch sử Ngày 2-7-2000: Hacker đánh sập website lớn có Yahoo, CNN Amazon Tháng 8-2000: Đã có gần 20 triệu Website Ngày 15-1-2001: Jimmy Wales sáng lập Bách khoa toàn thư trực tuyến Wikipedia Ngày 22-11-2001: Giáo hoàng John Paul II gửi thư điện tử từ laptop phòng làm việc ông Ngày 11-12-2002: FBI bắt đầu đăng tin truy nã tội phạm trực tuyến Ngày 28-4-2003: Apples đưa dịch vụ tải nhạc iTunes vào hoạt động Tháng 5-2003: Lần “flash mob” (một nhóm người tụ tập để làm điều khơng bình thường) tổ chức Manhattan Ngày 27-1-2004: Amazon.com lần thu lợi nhuận năm Ngày 5-2-2004: Bộ ngực Janet Jacksons trở thành hình ảnh tìm kiếm nhiều lịch sử web Trong nghỉ giải lao buổi diễn Justin Timberlake Superbowl, nhạc pop gặp rắc rối với trang phục Các engine tìm kiếm sau cho biết có sóng tìm kiếm hình ảnh kiện với từ khóa Janet Jackson hay Super Bowl Tháng 7-2004: Tim Berners Lee phong tước hiệp sĩ Ngày 9-11-2004: Mozilla Firefox mắt công chúng Tháng 2-2005: Website chia sẻ video youtube.com đời Tháng 10-2005: Thống kê cho thấy lượng website năm 2005 nhiều thời kì bùng nổ Tim Berners Lee dotcom 17 triệu site thành lập phong tước hiệp sĩ Ngày 12-4-2006: Google khai trương dịch vụ thu hẹp Trung Quốc mang tên Gu Ge Năm 2006: Đã có…92.615.362 website - 1.2 Cơ sở hạ tầng mạng máy tính 1.2.1 Phần cứng Máy chủ Máy trạm Các thiết bị mạng 1.2.2 Phần mềm Web server Quản trị webserver WebBrowser 1.3 Mơ hình mạng máy tính 1.3.1 Một số mơ hình vật lý mạng Mạng hình - Mạng tuyến tính - Mạng dạng vịng 1.3.2 Một số mơ hình logic mạng - Mạng client/server - Mạng ngang hàng (peer to peer) 1.3.3 Địa môi trường mạng - Địa IP (LAN/WAN/loopback) - Địa tên miền 1.4 Giới thiệu dịch vụ mạng máy tính 1.4.1 Dịch vụ www Là dịch vụ bản, quan trọng mạng máy tính cho phép làm việc theo mơ hình mạng để duyệt liệu kịch web 1.4.2 Dịch vụ FTP Là dịch vụ sử dụng giao thức truyền tệp tin cho phép làm việc với liệu dung lượng lớn thông qua cổng 21 1.4.3 Dịch vụ Email Dịch vụ cho phép thực việc nhận chuyển E-mail, sử dụng kết hợp 02 giao thức: SMTP (sử dụng cổng 25) POP3(sử dụng cổng 110) 1.5 Những lưu ý thiết kế web Tính cân bằng: Đó cân thị giác, hình khối màu sắc Tính cân đem lại cảm giác an toàn, tin tưởng Một website có cân tốt phải có hình khối vững chắc, mảng sáng tối rõ ràng, khối thành phần với hiệu ứng thị giác Độ tƣơng phản: Đây tiêu chí để đánh giá mức độ truyền cảm website tới người xem Vì thân website dạng tài liệu nhằm cung cấp thông tin cho người xem qua hệ thống thị giác Và với hệ thống thị giác người vốn nhạy cảm với website thiết kế tốtphải tạo cho người xem cảm giác tốt độ tương phản Đó tương phản chữ với nền, khối với nền, hình ảnh với background Độ tương phản chữ phải rõ ràng, vừa phải, khối màu khỏe Dưới điều ta nên tránh thiết kế website: * Quá tương phản: mảng màu trắng - đỏ đặt cạnh gây ức chế nhức mắt nhìn lâu * Kém tương phản: Đó gam màu có độ tương đồng chữ màu vàng đặt trắng, chữ đỏ thẫm đặt đen Điểm nhấn: Điều quan trọng, với website thiết kế đẹp điểm nhấn websiteln nơi ngƣời thiết kế tính tốn kỹ lưỡng Khơng thể đánh giá website đẹpnếu trơn tuồn tuột từ xuống đơn Vì hội họa thường dùng từ "truồi truội" để tác phẩm khơng có điểm nhấn, khơng có thu hút, khơng có "eyes catching" Khơng gian: Một website đẹp mang đến cho người xem cảm giác mẻ khơng gian mà người xem cảm nhận thấy rõ ràng Đó không gian nhiều ánh sáng, nhiều màu xanh cỏ Hay không gian trang trọng nhà hát Tất điều bị bỏ quên phần lớn sản phẩm thiết kế web Việt Nam Đó hệ việc sử dụng màu sắc tùy tiện, gam màu tùy tiện mảng màu khơng có giai điệu nhịp nhàng Ai vẽ hình mẫu đẹp, chi tiết tinh xảo, đặt vào khơng gian khơng hợp lý tự chuốc lấy thất bại Giống văn hóa Cồng chiêng người dân tộc vùng Tây Nguyên vậy, thấy cồng hay chiêng đẹp đặt khơng gian bảo tàng hay phòng sang trọng Mà đẹp thấy cảm nhận khơng gian mà vốn sinh ra, buôn làng, nhà rông với không gian văn hóa Tây Ngun Tính thống nhất: Đây điều khơng thể bỏ qua đánh giá website, thống đánh giá thành phẩn website font chữ, góc bo trịn, độ chuyển màu hay độ suốt hình khối Nếu để ý bạn dễ dàng bắt gặp lỗi tưởng nhỏ website thiết kế cẩu thả, qua qt người thiết kế khơng có đủ kinh nghiệm cần thiết để hiểu kiểm sốt tính thống Câu hỏi chƣơng Trình bày lịch sử phát triển cơng nghệ web Trình bày sở hạ tầng mạng máy tính Trình bày phân tích mơ hình vật lý mạng máy tính Trình bày phân tích mơ hình logic mạng máy tính Phân tích cấu trúc IP, IP – LAN, IP – WAN Phân tích dịch vụ mạng : www, ftp, email Phân tích ý thiết kế web CHƢƠNG CÔNG NGHỆ WEB VÀ NGÔN NGỮ HTML (10 tiết, 05 tiết lý thuyết+05 tiết thực hành) 2.1 Giới thiệu hệ điều hành mạng Microsoft Windows - Windows Server 2008 - Windows NT 2.2 Một số trình duyệt web 2.2.1 Internet Explorer 2.2.2 Mozillar Firefox 2.2.3 Google Chrome 2.3 Giới thiệu webserver 2.3.1 Apache Đây chương trình webserver sử dụng phổ biến Cách sử dụng đơn giản dùng gói cài đặt XAMPP XAMPP la mot ung dung de chay Webserver tren may tinh cua ban ma khong can phai mua hosting va domain Co the coi day la mot chuong trinh giup ban thuc hanh ve phat trien Web phuc vu hoc tap va giai tri XAMPP viết tắt X + Apache + Mysql + PHP + Perl Chữ X cross (platform ) ám dùng cho hệ điều hành khác nhau: Windows, Linux, Solaris MAC 2.3.2 Nginx Nginx (phát âm "engine x") chương trình server HTTP, reverse proxy IMAP/POP3 proxy server miễn phí, mã nguồn mở, có hiệu cao Nginx tác giả Igor Sysoev viết cho rambler.ru , trang web truy cập nhiều thứ nước Nga, chạy ổn định vòng hai năm rưỡi Igor cung cấp mã nguồn giấy phép kiểu BSD Hiện Nginx sử dụng từ 1% đến 4% số lượng tên miền toàn giới (Nguồn 1, 2) Mặc dù giai đoạn Beta, Nginx biết đến ổn định cao, nhiều tính năng, cấu hình đơn giản tiết kiệm tài nguyên 2.3.3 Wamp WAMP từ viết tắt "Windows, Apache, MySQL PHP" Khi bạn tải WAMP có nghĩa bạn cần tải chương trình để cài đặt ba điều khác WAMPs thuận tiện cho phép bạn tải cài đặt tất gói bạn cần để lưu trữ nội dung web động Nếu không, bạn phải tải ba gói riêng biệt Nguồn viết: http://thegioitinhoc.vn/domain-hosting/215140-tao-host-websiterieng-cua-ban-tren-windows-wamp.html#ixzz35qyQlZiw Link gốc: http://thegioitinhoc.vn 2.4 Phân loại website Việc phân loại website khơng có mục đích quan trọng nào, đơn giản phân loại website để mặt biết website làm gì, cung cấp giá trị cho người dùng, lẽ không cung cấp cho người dùng sớm muộn website khơng thể tồn 2.4.1 Theo mục đích sử dụng Website cá nhân - Thuơng mại điện tử (web bán hàng) - Báo điện tử (báo online) - Cổng thông tin (trường đại học) - Mạng xã hội - Trang tìm kiếm (Google) - Blog - Danh bạ - Sàn giao dịch - Dịch vụ trực tuyến (nhạc, phim, ảnh) - Trang việc làm - Diễn đàn - Web đấu giá 2.4.2 Theo nội dung quản trị Loại thứ “Phần mềm website” dành cho hệ thống website sử dụng code để thể chức mang tính “xử lý, tính tốn…” ví dụ website chứng khoán, ngân hàng để xử lý liệu hay website TMĐT để ứng dụng tương tác dịch vụ, sản phẩm… Đặc điểm loại website thiên hướng công nghệ bên nhân nhằm đem lại mức độ xử lý tốt nhất, nhanh xác yêu cầu tương tác bên cung cấp dịch vụ người dùng Loại chiếm khoảng 10% nhu cầu website chi phí dành cho loại thường cao Loại thứ hai “Trang web trình diễn trang web marketing – Kể Landing page hay Microsite” dành cho chiến dịch tiếp thị, trình diễn sản phẩm hay website thức doanh nghiệp nhằm mục đích coi website phương tiện online marketing để quảng bá hình ảnh thương hiệu công ty hay sản phẩm người dùng internet Đặc điểm loại cần phải có thiết kế độc quyền, đẹp, nặng trình diễn, thêm hiệu ứng đa phương tiện để đem lại hiệu hình ảnh ấn tượng Những website cần phải thiết kế công ty thiết kế web uy tín website mặt doanh nghiệp hay hình ảnh thương hiệu Website loại chiếm 80% nhu cầu thiết kế web chi phí bình dân chấp nhận với hầu hết doanh nghiệp Loại thứ ba “Web vệ tinh” dành cho doanh nghiệp có nhiều website muốn phát triển website vệ tinh khác nhằm phân khúc thị trường cho sản phẩm hay làm SEO cho dịch vụ riêng biệt Đặc điểm website đơn giản, tập trung vào nội dung cung cấp thơng tin rõ ràng, code tối ưu hóa tốt để dễ dàng làm SEO Website loại sử dụng mã nguồn mở hay web mẫu có sẵn để giảm chi phí triển khai, nhiên cần phải chuyên gia Seo tư vấn để chọn chiến lược tốt Loại website chiếm 10% nhu cầu chi phí mức thấp thường gọi web giá rẻ 10 - 2.5 Bố cục trang web 2.5.1 Outline Cấu trúc chung trang, thường gồm thành phần: Banner Button Navigation Location Bar Menu left Menu right Header Footer Content Các thành phần bố trí hình 2.5.2 Banner, navigation, button Độ phân giải hình ảnh gì? Khái niệm “resolution” - “độ phân giải” lượng thông tin chứa đựng tập tin ảnh kỹ thuật số hiển thị thiết bị in ra, thơng thường đo pixel Nói cách tổng quát, độ phân giải ảnh cao, việc hiển thị website trang in chi tiết mượt mà - vài ảnh có độ phân giải cao chứa nhiều pixels mức mà mà mắt người nhìn thấy Pixels Megapixels gì? Một pixel khối màu nhỏ đơn vị để tạo nên ảnh kỹ thuật số Một ảnh kỹ thuật số - tạo cách chụp phương pháp đồ họa khác - tạo nên từ hàng ngàn hàng triệu pixel riêng lẻ Bức ảnh chứa nhiều pixel chi tiết Một triệu pixel tương đương với megapixel; đó, máy ảnh kỹ thuật số 3.1 megapixel chụp ảnh chứa triệu pixel Hầu hết chương trình ứng dụng đồ họa diễn tả độ phân giải hình ảnh pixel dimensions - kích thước pixel, với số đo chiều ngang trước Ví dụ, hình ảnh có kích thước nêu “2592x1944” chứa 2,592 pixel hàng ngang 1,944 pixel hàng dọc Nhân số với cho ta 5,038,848 pixel hay độ phân giải xấp xỉ megapixel Mối liên hệ độ phân giải kích cỡ file Nói chung, hình ảnh nhiều megapixel cần sử dụng nhiều nhớ ổ cứng website để lưu trữ Tuy nhiên, định dạng ảnh bạn chọn để lưu ảnh ảnh hưởng đến kích cỡ Ví dụ, ảnh kỹ thuật số 3.1 megapixel lưu theo định dạng JPEG với mức nén ảnh thấp chiếm khoảng 600KB khơng gian ổ cứng Ngược lại, ảnh lưu định dạng khơng nén TIFF chiếm khoảng 9MB không gian lưu trữ Mối liên hệ độ phân giải với kích thước ảnh Ảnh lớn khơng chiếm dụng nhiều khơng gian lưu trữ mà cịn hiển thị lớn hình bạn in Ví dụ, ảnh megapixel 11 chứa nhiều pixel theo chiều ngang theo chiều dọc so với ảnh có megapixel, chiếm nhiều chỗ hình xem với kích thước đầy đủ (full size) Tuy nhiên, ảnh lấy trực tiếp từ máy ảnh kỹ thuật số với kích thước rộng hầu hết máy in lớn với website Điều có nghĩa bạn cần thu nhỏ ảnh lại (downsample) máy tính Khi bạn thu nhỏ ảnh ứng dụng biên tập ảnh, thực loại bỏ bớt pixel khỏi ảnh để làm nhỏ lại Q trình làm giảm chất lượng ảnh đến mức Thực ra, trình loại bỏ bớt liệu (remove data hay downsample) ln tốt q trình thêm liệu (add data hay resample) để làm ảnh lớn Phân biệt Pixels Per Inch Dots Per Inch Mặc dù thường dùng thay cho nhau, nhiên, mặt kỹ thuật, pixels per inch (PPI) dots per inch (DPI) PPI số lượng pixel có inch ảnh số hình máy tính PPI khơng ảnh hưởng đến chất lượng thực thân ảnh ảnh hưởng đến việc hiển thị ảnh trang web in DPI, khía cạnh khác, lại độ phân giải in mà máy in tạo Đây đặc tính vật lý máy in Mỗi dot máy in có kích thước vật lý xác định Máy in sử dụng dot mực để hiển thị hình ảnh; máy in tạo nhiều dot inch vng chất lượng in cao Các dòng máy in cấp thấp có DPI thấp dịng máy in cấp cap có DPI cao Ví dụ, máy in hỗ trợ 1200DPI có nghĩa máy thể in 1200 điểm inch (theo chiều ngang lẫn chiều dọc) Khi in ấn, điểm quan trọng cần ý, phải đảm bảo DPI phải lớn PPI Nếu DPI nhỏ PPI, máy in thể đầy đủ độ phân giải cao ảnh Nếu DPI lớn PPI, máy in sử dụng nhiều dot mực để biểu diễn pixel Trái ngược với PPI, DPI khơng phụ thuộc vào kích cỡ trang in DPI số cố định với máy in cho trước 2.6 Ngôn ngữ HTML 2.6.1 Khái niệm HTML (HyperText Markup Language) ngôn ngữ đánh dấu siêu văn thiết kế để tạo nên trang web Tập tin HTML văn có chứa thẻ đánh dấu (markup tags), thẻ đánh dấu giúp trình duyệt Web hiểu cách trình bày hiển thị trang Web Tập tin HTML có phần mở rộng (Extension) htm hay html tạo chương trình xử lý văn đơn giản Trong tập HTML phần tử (Element) đánh dấu thẻ HTML Các thẻ bao dấu < dấu > Thông thường thẻ HTML dùng theo cặp (thẻ bắt đầu, thẻ mở) (thẻ kết thúc, thẻ đóng), văn nằm cặp thẻ nội dung phần tử, số thẻ khơng cần thẻ kết thúc (thẻ đóng) Các thẻ HTML không phân biệt chữ hoa chữ thường, có nghĩa kiểu chữ xem 2.6.2 Chức 2.6.3 Cấu trúc 12 Cấu trúc tập tin văn HTML view source print? 2.7 Định dạng liệu thiết kế web 2.7.1 Định dạng ảnh thiết kế giao diện web - PNG : (Portable Net Graphics) định dạng ảnh có nhiều đặc điểm giống GIF ngoại trừ phần động (Có thể nén để đưa lên net, hỗ trợ lưu ảnh transparancy) có dải tần màu rộng hơn, đến 16 triệu màu, nên ngày sử dụng rộng rãi WWW với ảnh có chất lượng ảnh chụp - JPG : định dạng ảnh nén hiệu (Joint Photographic Experts Group), nén ảnh đến vài chục lần, nhiên chất lượng lượng ảnh suy giảm tỉ lệ thuận với hệ số nén (Compression) dựa nguyên tắc loại bỏ thông số màu để giảm thông tin cho file dựa xu hướng nhận thức màu sắc mắt người Do vậy, JPG gọi định dạng ảnh nén chịu thiệt Thường dùng để lưu ảnh chụp, tất nhiên tuỳ theo nhu cầu mà chọn độ nén thích hợp để bảo tồn chất lượng Các Lab dùng định dạng với hệ màu RGB để xuất ảnh - TIFF : (Tagged Image File Format) định dạng chủ yếu để lưu trữ ảnh, bao gồm đồ thị lẫn hình ảnh Đầu tiên xấy dựng hãng Aldus kết hợp với Microsoft để dùng cho kỹ thuật in PostScript TIFF định dạng thông dụng cho ảnh có dãi tần màu rộng sâu, phát triển song song với máy quét ảnh ngày trở thành định dạng hữu dụng dùng in ấn nhờ vừa bảo toàn thơng tin, vừa chấp nhận kỹ thuật nén LZW, ZIP làm giảm đáng kể dung lượng - GIF : (Graphis Interchange Format : Định dạng trao đổi hình ảnh) định dạng ảnh quản lý không 256 màu cho ảnh tĩnh khn hình cho ảnh động, dùng rộng rãi WWW dùng kỹ thuật nén bảo tồn LZW làm giảm kích thước file mà khơng làm thất thoát liệu Do giới hạn màu sắc nên thường dùng cho hình vẽ nét, sơ đồ vốn không cần dùng đến dải 16 triệu màu không phù hợp để lưu ảnh chụp - SWF: Flash đối tượng sử dụng phổ biến việc thiết kế giao diện web nói chung giao diện thư viện điện tử nói riêng, hầu hết thiết kế flash có qui trình đơn giản với khả giảm tối đa dung lượng đảm bảo hình ảnh động ấn tượng thiết bị thị Định dạng SWF dùng để lưu trữ flash cho việc thiết kế banner button ấn tượng với khả tùy biến cao : độ sâu ảnh khung hình ảnh tĩnh (frame) thường tối đa bit, tương đương 256 màu (256 colors) số khung hình chuyển động giây (thường dao động từ 10, 15, 20, 25, 30 fps(frames per second)) 2.7.2 Định dạng liệu văn 13 Định dạng xử lý văn nhằm để lưu trữ đối tượng thông tin dạng văn (text) hình ảnh tĩnh (graphic) Hiện nay, với xu hướng phát triển mạnh mẽ công nghệ thơng tin viễn thơng, giới có thay đổi lớn vừa tạo nhiều thời đồng thời khơng thách thức vấn đề quản trị sử dụng thơng tin, chuẩn định dạng để xử lý đối tượng thông tin dạng văn ngày xuất nhiều nhằm đảm bảo yếu tố kỹ thuật phát huy ưu điểm công nghệ thông tin hạn chế nhược điểm Sau số định dạng xử lý văn sử dụng phổ biến: - docx docm: định dạng tạo Microsoft Word 2007 - sxw: định dạng file tạo OpenOffice StartOffice Text - dotx, dotm: file mẫu Word 2007 - rtf txt: định dạng văn - doc: định dạng Word 97-2007 - dot: định dạng mẫu Word 97-2007 - psw: định dạng văn Pocket Word (Pocket PC) - pwd: định dạng Handheld PC - odt: định dạng văn OpenDocument Câu hỏi chƣơng Trình bày sơ lƣợc hệ điều hành mạng Phân tích ƣu nhƣợc số trình duyệt So sánh webserver: Apache, nginx, wamp So sánh website tĩnh động Thiết kế bố cục website thƣ viện Trình bày lấy ví dụ cụ thể cấu trúc ngơn ngữ HTML Phân tích định dạng liệu thiết kế web CHƢƠNG THỰC HÀNH THIẾT KẾ WEB 3.1 Thiết kế cấu trúc website 3.1.1 Thiết kế banner 3.1.2 Thiết kế icon 3.2 Thiết kế web tĩnh Microsoft front page 3.2.1 Khái niệm, chức Front Page 3.2.2 Các bước thiết kế web tĩnh Front Page 3.3 Cài đặt thành phần để thiết kế website động 3.3.1 Cài đặt server 3.3.2 Cài đặt joomla 3.3.3 Xuất website joomla Câu hỏi chƣơng 14 Phân tích cấu trúc website thƣ viện Phân tích cấu trúc front page Trình bày thành phần để thiết kế web động Thiết kế web tĩnh phần mềm Front Page với thành phần sau: Banner động định dạng gif Button 3D định dạng gif (Chú ý: Các Button có liên kết ngồi (out link)) Cài đặt xuất web joomla - KHOA, TRUNG TÂM TỔ BỘ MƠN NHĨM/NGƢỜI BIÊN SOẠN Phạm Quang Quyền 15 ... HÀNH THIẾT KẾ WEB 3.1 Thiết kế cấu trúc website 3.1.1 Thiết kế banner 3.1.2 Thiết kế icon 3.2 Thiết kế web tĩnh Microsoft front page 3.2.1 Khái niệm, chức Front Page 3.2.2 Các bước thiết kế web. .. kiện tiên : Tin học Mô tả học phần: Thiết kế web học phần thuộc khối kiến thức giáo dục chuyên nghiệp chương trình đào tạo trình độ đại học ngành khoa học thư viện, học phần trang bị cho sinh... web : webserver, web browser, ngôn ngữ HTML,… Cung cấp kiến thức mơ hình website thư viện cơng cụ để thiết kế website - Kỹ năng: Trang bị cho sinh viên kỹ sau: + Thiết lập webserver + Thiết kế