Giáo trình thiết kế web nâng cao

BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CÔNG NGHIỆP NAM ĐỊNH GIÁO TRÌNH THIẾT KẾ WEB NÂNG CAO NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG (Lưu hành nội bộ) Dùng cho đào tạo: Trung cấp Nam Định, năm 202… BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CƠNG NGHIỆP NAM ĐỊNH GIÁO TRÌNH THIẾT KẾ WEB NÂNG CAO NGÀNH/CHUYÊN NGÀNH: TIN HỌC VĂN PHÒNG (Lưu hành nội bộ) CHỦ BIÊN: LÊ HỮU TOẢN Nam Định, năm 202… LỜI GIỚI THIỆU Trong năm gần đây, với phát triển Công nghệ thơng tin mạng máy tính phát triển rộng rãi, kéo theo ứng dụng mạng máy tính internet dịch vụ trở nên thiếu sống đại Để phục vụ việc học tập nghiên cứu sinh viên Công nghệ thông tin, trường Cao đẳng Công nghiệp Nam Định, chúng tơi biên soạn giáo trình Thiết kế Web nâng cao Giáo trình bao gồm bài, có phần kiến thức lý thuyết, câu hỏi phần thực hành cụ thể: Bài CSS Bài Công cụ thiết kế Web Bài Thiết kế giao diện Web Photoshop Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng ứng dụng Web tĩnh từ đến nâng cao công nghệ HTML, CSS Photoshop Được biên soạn với phương châm đảm bảo tính logic, khoa học, thiết thực, dễ hiểu nhằm trang bị sinh viên kiến thức phục vụ cho nghiên cứu, thiết kế ứng dụng Web Tài liệu xây dựng nhằm đáp ứng nhu cầu học tập nghiên cứu sinh viên trường Cao đẳng Cơng nghiệp Nam Định Do thời gian có hạn nên phạm vi giáo trình, khơng thể đề cập tất vấn đề nóng hổi lĩnh vực thiết kế Web Nhóm tác giả mong nhận ý kiến đóng góp từ thầy để tài liệu hoàn chỉnh Nam Định, tháng năm 20… Chủ biên MỤC LỤC LỜI GIỚI THIỆU MỤC LỤC DANH MỤC CHỮ VIẾT TẮT DANH MỤC BẢNG, HÌNH VẼ Bài CSS 1.1 KHÁI NIỆM CSS 1.2 QUY ƯỚC VỀ CSS 1.2.1 Cú pháp CSS 1.2.2 Đơn vị CSS 10 a Đơn vị chiều dài 10 b Đơn vị màu sắc 10 1.2.3 Vị trí đặt CSS 11 1.3 SỬ DỤNG STYLE TRONG CSS 12 1.3.1 Mức độ ưu tiên style 12 1.3.2 Cách khai báo style 13 1.3.3 Một số Style 13 1.3.3.1 Background 13 1.3.3.2 Font Chữ 14 1.3.3.3 Text 15 1.3.3.4 Định dạng liên kết 15 1.3.3.5 Span & Div 16 1.3.3.6 Margin & Padding 16 1.3.3.7 Border 17 1.3.3.8 Height & Width 17 TÓM TẮT NỘI DUNG BÀI 19 BÀI TẬP BÀI 20 BÀI THỰC HÀNH BÀI 21 HƯỚNG DẪN TỰ HỌC Ở NHÀ 27 NỘI DUNG THẢO LUẬN BÀI 28 Bài CÔNG CỤ TRONG THIẾT KẾ WEB 29 2.1 CÁC BƯỚC THIẾT KẾ MỘT ỨNG DỤNG 29 2.1.1 Phân tích người dùng 29 2.1.2 Thiết kế chức cấu trúc trang 29 2.1.3 Xây dựng nội dung 30 2.1.4 Thiết kế kiểm tra bố cục trang web 30 2.1.5 Kiểm tra đánh giá 31 2.2 MỘT SỐ NGUYÊN TẮC QUAN TRỌNG TRONG THIẾT KẾ WEB 31 2.2.1 Thiết kế giao diện hướng đến người dùng 31 2.2.2 Định hướng thiết kế 31 2.2.3 Trang cuối (dead-end) 32 2.3 CẤU TRÚC WEBSITE 32 2.3.1 Trang chủ - home page 32 2.3.2 Trang liên hệ - contact 32 2.3.3 Trang giới thiệu thông tin - about us 32 2.3.4 Trang giới thiệu sản phẩm/dịch vụ - products/services 32 2.3.5 Trang hướng dẫn sách - policies 33 2.3.6 Một số cấu trúc website mẫu 33 2.4 CÔNG CỤ THIẾT KẾ 35 2.4.1 Công cụ soạn thảo 35 2.4.1.1 Notepad++ 35 2.4.1.2 Microsoft FrontPage 36 2.4.1.3 Macromedia Dreamwave 38 2.4.2 Công cụ tạo xử lý ảnh tĩnh 40 2.4.3 Công cụ tạo xử lý ảnh động 43 TÓM TẮT NỘI DUNG BÀI 46 BÀI TẬP BÀI 47 BÀI THỰC HÀNH BÀI 48 NỘI DUNG THẢO LUẬN BÀI 52 Bài THIẾT KẾ GIAO DIỆN WEB BẰNG PHOTOSHOP 54 3.1 XÂY DỰNG BỐ CỤC TRANG WEB 54 3.2 THIẾT KẾ LAYOUT WEB 56 3.2.1 Thành phần thiết kế 56 3.2.2 Thiết kế Layout 57 3.3 XUẤT PSD SANG TRANG WEB HTML 67 3.3.1 Ý nghĩa 67 4.3.2 Các bước thực 68 a Giai đoạn 1: Cắt layout 68 b Giai đoạn 2: Định dạng lại layout cho trang web với HTML CSS 68 TÓM TẮT NỘI DUNG BÀI 72 BÀI TẬP BÀI 73 BÀI THỰC HÀNH BÀI 74 HƯỚNG DẪN TỰ HỌC 77 NỘI DUNG THẢO LUẬN BÀI 78 PHỤ LỤC 80 TÀI LIỆU THAM KHẢO 85 DANH MỤC CHỮ VIẾT TẮT ARPA Advanced Research Projects Agency TCP/IP Transmission Control Protocol/Internet Protocol WWW World Wide Web HTML HyperText Markup Language SGML Standard Generalized Markup Language CGI Common Gateway Interface ISP Internet Service Provider URL Uniform Resource Locator HTTP HyperText Transfer Protocol RFC Request For Comments IETF Internet Engineering Task Force MIME Multipurpose Internet Mail Extensions URI Uniform Resource Identifier URN Uniform Resource Name UA User Agent SMTP Simple Mail Transfer Protocol NNTP Network News Transfer Protocol FTP File Tranfer Protocol DNS Domain Name System HTTPS Hypertext Transfer Protocol Secure SSL Secure Socket Layer TLS Transport Layer Security CSS Cascading Style Sheets GUI Graphical User Interface STL Standard Template Library DWT Dynamic Web Templates SEO Search Engine Optimization DANH MỤC BẢNG, HÌNH VẼ Hình 2- Minh họa CSS Hình 2- Minh họa tác dụng thuộc tính Margin 17 Hình 2- Các kiểu đường viền thiết kế 17 Hình 2- Minh họa thực hành số 21 Hình 2- Minh họa thực hành số 23 Hình 2- Minh họa thực hành số 24 Hình 2- Minh họa thực hành số 24 Hình 2- Minh họa thực hành số 25 Hình 2- Minh họa thực hành số 26 Bảng 2- Bảng đơn vị chiều dài 10 Bảng 2- Bảng đơn vị màu sắc 10 Bảng 2- Thuộc tính định vị ảnh 14 Hình 3- Phần Footer giúp định hướng chức 32 Hình 3- Trang web bán hàng trực tuyến 34 Hình 3- Trang web mơ hình B2B 34 Hình 3- Trang web cổng thơng tin điện tử tỉnh Nam Định 35 Hình 3- Màn hình làm việc NotePade++ 36 Hình 3- Màn hình làm việc Microsoft FrontPage 37 Hình 3- Màn hình làm việc Dreamwave 38 Hình 3- Các chức mục Insert DreamWave 39 Hình 3- Chế độ Split lập trình DreamWave 39 Hình 3- 10 Các đối tượng bảng Insert chia thành nhóm 40 Hình 3- 11 Màn hình làm việc Photoshop 41 Hình 3- 12 Các nhóm chức cơng cụ Photoshop 42 Hình 3- 13 Màn hình làm việc Macromedia Flash 44 Hình 3- 14 Minh họa thực hành số 48 Hình 3- 15 Minh họa thực hành số 49 Hình 3- 16 Minh họa thực hành 50 Hình 3- 17 Màn hình làm việc DreamWave 52 Hình 3- 18 Thanh cơng cụ Macromedia Dreamwave 52 Hình 3- 19 Thanh công cụ Macromedia Dreamwave 53 Hình 3- 20 Thanh cơng cụ Macromedia Dreamwave 53 Hình 4- Bố cục trang web thiết kế vẽ tay 54 Hình 4- Bố cục trang web thiết kế phần mềm 55 Hình 4- Layout cột với kích thước cố định 55 Hình 4- Layout cột có kích thước khác 55 Hình 4- Layout cột layout kết hợp 56 Hình 4- Các thành phần thiết kế 57 Hình 4- Hình ảnh tạo file tài liệu Photoshop 58 Hình 4- Tạo layer để thay đổi background 59 Hình 4- Tạo màu cho layer 59 Hình 4- 10 Lựa chọn vùng làm header cho trang web 59 Hình 4- 11 Thay đổi màu cho header 60 Hình 4- 12 Vùng lựa chọn làm điều hướng 60 Hình 4- 13 Thiết lập thông số 61 Hình 4- 14 Kết thu 61 Hình 4- 15 Phần hiển thị header điều hướng 62 Hình 4- 16 Tạo tên website vào header 62 Hình 4- 17 Nhập danh mục chức 63 Hình 4- 18 Tạo nút Hover button 63 Hình 4- 19 Giao diện thu 63 Hình 4- 20 Thiết kế chức tìm kiếm 63 Hình 4- 21 Tạo layer khung hình 64 Hình 4- 22 Thiết kế layer hình ảnh 64 Hình 4- 23 Hình ảnh chèn vị trí 64 Hình 4- 24 Tạo nội dung cho khung hình 65 Hình 4- 25 Thiết kế dải dây băng chứa tiêu đề 65 Hình 4- 26 Nội dung chèn vào trang thiết kế 65 Hình 4- 27 Thiết kế layer footer 66 Hình 4- 28 Thiết kế layer footer 66 Hình 4- 29 Hình ảnh trang web thiết kế hồn thiện 67 Hình 4- 30 Hình ảnh trang web sau định dạng HTML CSS 71 Hình 4- 31 Trang chủ website bán hàng kĩ thuật số 74 Hình 4- 32 Trang chủ website bán đồ trang sức 75 Hình 4- 33 Trang chủ website công ty 76 Hình 4- 34 Trang chủ website Business Co 77 Hình 4- 30 Hình ảnh trang web sau định dạng HTML CSS 71 TÓM TẮT NỘI DUNG BÀI Bố cục trang web - Bố cục trang web (layout web) việc thực trình bày nội dung, tài liệu lên webpage - Để xây dựng bố cục cần ý: + Độ phân giải trang web + Kỹ thuật xây dựng layout: Gồm có layout cột với kích thước cố định, layout cột với cột có tỉ lệ kích thước khác nhau, Layout cột kết hợp cột với cột + Phương pháp xây dựng bố cục: Sử dụng bảng sử dụng CSS Thiết kế layout - Các thành phần cần thiết kế: logo, chuyển hướng, nội dung, header, footer, phần trống - Các bước thiết kế: + Bước 1: Tạo tài liệu + Bước 2: Tạo background vùng khác trang web + Bước 3: Sử dụng phần mềm FrontPage để thiết kế logo, xử lý bo góc, hình ảnh, nội dung cho trang web Xuất PSD sang trang web HTML - Cắt layout: Cần phân tích giao diện thiết kế để có nhìn tổng thể thành phần cắt + Header: gồm logo, ngôn ngữ menu top + Phần Left: menu left, hình ảnh quảng cáo, thơng tin + Phần Right: gồm sản phẩm, tin tức… + Phần footer: thông tin tổ chức, cá nhân, copy right… - Định dạng lại layout cho trang web HTML CSS + Bước 1: Tạo trang HTML + Bước 2: Sử dụng CSS kết hợp với hình ảnh cắt từ file PSD để định dạng cho vùng thiết kế từ trước: top_background, main_container, top_bar, header… 72 BÀI TẬP BÀI Câu 1: Kể tên thành phần thiết kế layout cho trang web? Phân tích thành phần? Câu 2: Truy cập trang web http:\\www.cnd.edu.vn Cho biết layout trang thiết kế theo dạng nào? Độ phân giải trang web? Câu 3: Nêu lệnh Photoshop để làm việc với layer? Câu 4: Trình bày công cụ Photoshop làm việc với layer dạng văn bản? 73 BÀI THỰC HÀNH BÀI Bài thực hành số 1: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện trang chủ website bán hành kĩ thuật số Hình 4- 31 Trang chủ website bán hàng kĩ thuật số 74 Bài thực hành số 2: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện trang chủ website bán đồ trang sức Hình 4- 32 Trang chủ website bán đồ trang sức 75 Bài thực hành số 3: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện trang chủ website công ty Hình 4- 33 Trang chủ website cơng ty 76 Bài thực hành số 4: Sử dụng phần mềm Adobe Photoshop thiết kế giao diện trang chủ website Business Co Hình 4- 34 Trang chủ website Business Co HƯỚNG DẪN TỰ HỌC - Thường xuyên tìm hiểu cấu trúc trang web tiếng mạng Tìm phương pháp xây dựng bố cục phù hợp với xu trang web - Thành thạo công cụ phần mềm Photoshop - Thực hành thường xuyên với việc thiết kế giao diện trang web phần mềm xử lý ảnh 77 NỘI DUNG THẢO LUẬN BÀI Chủ đề: Phương pháp cắt layout hiệu cho trang Web Bước 1: Phân tích giao diện đánh giá tổng quan qui định chung trước tiến hành cắt Ví dụ trang Web thiết kế Photoshop có giao diện sau: Khi tiến hành cắt chia tạm thời thành vùng: Vùng Header Vùng Content Vùng Footer Bước 2: Cắt vùng xác định Bước 3: Tiếp tục thực cắt chia nhỏ vùng Header, Content Footer 78 Ví dụ Header cắt thực cắt thành phần nhỏ sau: Vùng header Vùng header Vùng header Đối với vùng nhỏ cắt thành hình ảnh nhỏ nhằm tăng khả xử lý, tốc độ truy cập trang web Ví dụ phần header cắt nhỏ thành cờ thể ngôn ngữ trang web: Chú ý: - Việc cắt layout tỉ mỉ, chi tiết việc thực chuyển sang định dạng HTML hiệu - Cần xác định rõ ràng thành phần giữ lại trang web thành phần loại bỏ để việc cắt layout thực xác 79 PHỤ LỤC Bảng thuộc tính giá trị thuộc tính CSS Thuộc tính Mơ tả Giá trị Background Background Thuộc tính rút gọn cho tất thuộc tính background-color background-image background-repeat background-attachment background-position background-color Thiết lập màu cho đối tượng transparent background-image Thiết lập ảnh cho đối tượng background-repeat Thiết lập chế độ lặp ảnh url none Repeat repeat-x repeat-y no-repeat background- attachment Thiết lập ảnh cuộn/cố định background-position Thiết lập vị trí thể ảnh Font Scroll fixed top left top center top right center left center center center right bottom left bottom center bottom right x% y% xy Font Thuộc tính ngắn cho tất thiết lập font font-style font-variant font-weight font-size font-family font-style Thiết lập chế độ in nghiêng, xiên hay bình thường normal italic oblique font-variant Thiết lập font bình thường hay small-caps font-weight Thiết lập in đậm, thường normal small-caps normal bold bolder lighter 100 – 900 80 font-size Thiết lập kích cỡ font font-family Thiết lập loại font hiển thị trang web/ đối tượng web xx-small x-small small medium large x-large xx-large smaller larger % family-name generic-family Text Thiết lập màu chữ text-indent Thiết lập khoảng thụt đầu dòng % text-align Thiết lập chế độ văn left right center justify letter-spacing Thiết lập khoảng cách ký tự normal text-decoration Thêm hiệu ứng đặc biệt cho văn none underline Color overline line-through blink text-transform Change case văn none upper lower capitalize Pseudo-classes :link Liên kết chưa thăm :hover Mouse over thành phần :visited Liên kết thăm :active Kích hoạt thành phần Margin Margin Thuộc tính ngắn cho thiết lập margin margin-top Thiết lập lề cho thành phần 81 margin-top margin-right margin-bottom margin-left auto % margin-right Thiết lập lề phải cho thành phần auto % margin-bottom Thiết lập lề cho thành phần auto % margin-left Thiết lập lề trái cho thành phần auto % Padding Padding padding-top padding-right padding-bottom padding-left Border Thuộc tính ngắn cho thiết lập padding padding-top padding -right padding bottom padding -left Thiết lập đệm cho thành phần Thiết lập đệm phải cho thành phần Thiết lập đệm cho thành phần % % % Thiết lập đệm trái cho thành phần % Border Thuộc tính ngắn cho tất border-width thiết lập border cho border-color border-style thành phần border-width Thiết lập độ rộng đường viền thin medium thick border-color Thiết lập màu cho đường viền Thiết lập kiểu đường viền none hidden solid dotted dashed double groove ridge inset outset border-style border-top-color Thiết lập độ rộng viền phía Thiết lập màu viền phía border-top-style Thiết lập kiểu viền phía border-right-width Thiết lập độ rộng viền phải border-top-width 82 border-right-color Thiết lập màu viền phải border-right-style Thiết lập kiểu viền phải border-bottom-width border-bottom-color Thiết lập độ rộng viền bên Thiết lập màu viền bên border-bottom-style Thiết lập kiểu viền bên border-left-width Thiết lập độ rộng viền trái border-left-color Thiết lập màu viền trái border-left-style Thiết lập kiểu viền trái Width Width Thiết lập chiều rộng đối tượng max-width Thiết lập chiều rộng tối đa cho đối tượng auto % none % Thiết lập chiều rộng tối thiểu cho đối tượng Height % Height Thiết lập chiều cao cho đối tượng max-height Thiết lập chiều cao tối đa cho đối tượng auto % none % min-height Thiết lập chiều cao tối thiểu cho đối tượng min-width % Layout Position left right none Float Cố định đối tượng Clear Cách thức xử đối left tượng liên quan với đối tượng right both none floated Position định vị đối tượng Top Thiết lập tọa độ đỉnh đối tượng 83 relative absolute auto % Right Thiết lập tọa độ bên phải đối tượng auto % Bottom Thiết lập tọa độ đáy đối tượng auto % Left Thiết lập tọa độ bên trái đối tượng auto % z-index Định lớp đối tượng auto number 84 TÀI LIỆU THAM KHẢO A TIẾNG VIỆT Chủ biên Phạm Hữu Khang (2012), “Xây dựng ứng dụng Web PHP & MySQL”, Nhà xuất Mũi Cà Mau Phạm Hữu Khang - Hoàng Đức Hải (2010), “Xây Dựng Ứng Dụng Web Bằng PHP Và MySQL”, Nhà xuất Phương Đông Bài giảng thiết kế web HTML/CSS, Trung tâm đào tạo Nhất Nghệ Nhóm tác giả Elicom, Ngơn ngữ HTML cho WWW, NXB Hà Nội Nhóm tác giả Elicom, Cẩm nang thiết kế website, NXB Hà Nội Steven Holzner - Gia Việt biên dịch (2010), “Thiết Kế Web Động Với PHP (Tái Bản Lần 3)”, Nhà xuất Thống Kê B TIẾNG ANH Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor, “Flash MX tutorials”, Macromedia Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor, “Dreamweaver MX tutorials”, Macromedia Jay Greenspan - Brad Bulger (2009), “MySQL/PHP Database Applications”, M&T Books C CÁC TRANG WEB 10 http://www.w3school.com 11 http://www.hocwebchuan.com 12 http://www.visibooks.com 85 ... cụ thể: Bài CSS Bài Công cụ thiết kế Web Bài Thiết kế giao diện Web Photoshop Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng ứng dụng Web tĩnh từ đến nâng cao công nghệ HTML, CSS Photoshop... trường Cao đẳng Công nghiệp Nam Định, chúng tơi biên soạn giáo trình Thiết kế Web nâng cao Giáo trình bao gồm bài, có phần kiến thức lý thuyết, câu hỏi phần thực hành cụ thể: Bài CSS Bài Công cụ thiết. .. 52 Bài THIẾT KẾ GIAO DIỆN WEB BẰNG PHOTOSHOP 54 3.1 XÂY DỰNG BỐ CỤC TRANG WEB 54 3.2 THIẾT KẾ LAYOUT WEB 56 3.2.1 Thành phần thiết kế 56 3.2.2 Thiết kế Layout