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 những năm gần đây, cùng với sự phát triển của Công nghệ thông tin thì mạng máy tính cũng được phát triển rộng rãi, kéo theo ứng dụng của mạng máy tính là internet và các dịch vụ cũng trở nên không thể thiếu trong cuộc sống hiện đại. Để phục vụ việc học tập và nghiên cứu của 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 3 bài, mỗi bài đều có phần kiến thức lý thuyết, câu hỏi và phần thực hành cụ thể: Bài 1. Công cụ trong thiết kế Web Bài 3. Thiết kế giao diện Web bằng Photoshop Giáo trình thiết kế Web hướng dẫn sinh viên xây dựng một ứng dụng Web tĩnh từ cơ bản đến nâng cao bằng công nghệ HTML, CSS và 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 những kiến thức cơ bản 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 và nghiên cứu của sinh viên trường Cao đẳng Công nghiệp Nam Định. Do thời gian có hạn nên trong phạm vi cuốn giáo trình, không thể đề cập được tất cả những vấn đề nóng hổi trong lĩnh vực thiết kế Web. Nhóm tác giả rất mong nhận được các ý kiến đóng góp từ các thầy cô để tài liệu hoàn chỉnh hơn. Chủ biên 1 MỤC LỤC LỜI GIỚI THIỆU.
2 DANH MỤC CHỮ VIẾT TẮT. 5 DANH MỤC BẢNG, HÌNH VẼ. KHÁI NIỆM CSS. QUY ƯỚC VỀ CSS.
Đơn vị chiều dài. Đơn vị màu sắc. Vị trí đặt CSS. SỬ DỤNG STYLE TRONG CSS.
Mức độ ưu tiên style. Cách khai báo style. Một số Style cơ bản. Định dạng liên kết.
17 TÓM TẮT NỘI DUNG BÀI 1. 19 BÀI TẬP BÀI 1. 20 BÀI THỰC HÀNH BÀI 1. 21 HƯỚNG DẪN TỰ HỌC Ở NHÀ.
27 NỘI DUNG THẢO LUẬN BÀI 1. CÔNG CỤ TRONG THIẾT KẾ WEB. CÁC BƯỚC THIẾT KẾ MỘT ỨNG DỤNG. Phân tích người dùng.
Thiết kế các chức năng và cấu trúc trang. Xây dựng nội dung. Thiết kế và kiểm tra bố cục trang web. Kiểm tra và đánh giá.
MỘT SỐ NGUYÊN TẮC QUAN TRỌNG TRONG THIẾT KẾ WEB. Thiết kế giao diện hướng đến người dùng. Định hướng thiết kế. Trang cuối cùng (dead-end).
CẤU TRÚC WEBSITE. Trang chủ - home page. Trang liên hệ - contact. Trang giới thiệu thông tin - about us.
Trang giới thiệu về sản phẩm/dịch vụ - products/services. Trang hướng dẫn hoặc chính sách - policies. Một số cấu trúc website mẫu. CÔNG CỤ THIẾT KẾ.
Công cụ soạn thảo. Công cụ tạo và xử lý ảnh tĩnh. Công cụ tạo và xử lý ảnh động. 43 TÓM TẮT NỘI DUNG BÀI 2.
46 BÀI TẬP BÀI 2. 47 BÀI THỰC HÀNH BÀI 2. 48 NỘI DUNG THẢO LUẬN BÀI 2. THIẾT KẾ GIAO DIỆN WEB BẰNG PHOTOSHOP.
XÂY DỰNG BỐ CỤC TRANG WEB. THIẾT KẾ LAYOUT WEB. Thành phần thiết kế. Thiết kế Layout.
XUẤT PSD SANG TRANG WEB HTML. Các bước thực hiện. Giai đoạn 1: Cắt layout. Giai đoạn 2: Định dạng lại layout cho trang web với HTML và CSS.
68 TÓM TẮT NỘI DUNG BÀI 3. 72 BÀI TẬP BÀI 3. 73 3 BÀI THỰC HÀNH BÀI 3. 74 HƯỚNG DẪN TỰ HỌC.
77 NỘI DUNG THẢO LUẬN BÀI 3. 80 TÀI LIỆU THAM KHẢO. 85 4 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 5 DANH MỤC BẢNG, HÌNH VẼ Hình 2- 1. Minh họa về CSS.
Minh họa về tác dụng thuộc tính Margin. Các kiểu đường viền trong thiết kế. Minh họa về bài thực hành số 1. Minh họa về bài thực hành số 2.
Minh họa về bài thực hành số 3. Minh họa về bài thực hành số 4. Minh họa về bài thực hành số 5. Minh họa về bài thực hành số 6.
Bảng đơn vị chiều dài. Bảng đơn vị màu sắc. Thuộc tính định vị ảnh nền. Phần Footer giúp định hướng chức năng.
Trang web bán hàng trực tuyến. Trang web mô hình B2B. Trang web cổng thông tin điện tử tỉnh Nam Định. Màn hình làm việc của NotePade++.
Màn hình làm việc chính của Microsoft FrontPage. Màn hình làm việc của Dreamwave. Các chức năng trong mục Insert của DreamWave. Chế độ Split khi lập trình trên DreamWave.
Các đối tượng trên bảng Insert được chia thành nhóm. Màn hình làm việc của Photoshop. Các nhóm chức năng trên thanh công cụ Photoshop. Màn hình làm việc của Macromedia Flash.
Minh họa bài thực hành số 5. Minh họa bài thực hành số 6. Minh họa bài thực hành 7. Màn hình làm việc của DreamWave.
Thanh công cụ Macromedia Dreamwave. Thanh công cụ Macromedia Dreamwave. Thanh công cụ Macromedia Dreamwave. Bố cục trang web được thiết kế bằng vẽ tay.
Bố cục trang web được thiết kế bằng phần mềm. Layout 2 cột với kích thước cố định. Layout 3 cột có kích thước khác nhau. Layout 4 cột hoặc layout kết hợp.
Các thành phần cơ bản khi thiết kế. Hình ảnh tạo mới file tài liệu Photoshop. Tạo layer mới để thay đổi background. Tạo màu cho layer.
Lựa chọn vùng làm header cho trang web. Thay đổi màu nền cho header. Vùng được lựa chọn làm thanh điều hướng. Thiết lập thông số.
Kết quả thu được. Phần hiển thị header và thanh điều hướng. Tạo tên website vào header. Nhập danh mục chức năng.
Tạo nút Hover button. Giao diện thu được. Thiết kế chức năng tìm kiếm. Tạo layer khung hình.
Thiết kế layer hình ảnh. Hình ảnh chèn đúng vị trí. Tạo nội dung cho khung hình. Thiết kế dải dây băng chứa tiêu đề.
Nội dung được chèn vào trang thiết kế. Thiết kế layer footer 1. Thiết kế layer footer 2. Hình ảnh trang web khi thiết kế hoàn thiện.
Hình ảnh trang web sau khi định dạng bằng HTML và CSS. Trang chủ website bán hàng kĩ thuật số. Trang chủ website bán đồ trang sức. Trang chủ website của một công ty.
Trang chủ website Business Co. CSS MỤC TIÊU - Trình bày được khái niệm và cú pháp cơ bản của CSS - Trình bày các phương pháp nhúng CSS vào một trang web để định dạng các thành phần: font chữ, màu chữ, đường viền, liên kết. - Sử dụng CSS và nắm rõ được mức độ ưu tiên của các Style khi gọi chúng. - Áp dụng các style CSS vào trong thiết kế giao diện website.
KHÁI NIỆM CSS CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,… Khác với HTML, CSS cung cấp cho người dùng hàng trăm thuộc tính để trình bày dành các đối tượng giúp mang lại hiệu quả. Ngoài ra, CSS còn được hỗ trợ bởi hầu hết các trình duyệt, nên người dùng hoàn toàn có thể yên tâm khi trang web chạy trên các hệ thống khác nhau như Windows, Linux hay trên một máy Mac. Với việc sử dụng các mã định dạng trực tiếp trong HTML sẽ làm tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài.
Giúp tăng hiệu quả đồng bộ khi người dùng tạo một website có hàng trăm trang hay cả khi muốn thay đổi một thuộc tính trình bày nào đó trên các trang web. Ngoài ra, CSS còn cho phép người dùng áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn. Hình 2- 1: Minh họa về CSS 8 1. QUY ƯỚC VỀ CSS 1.
Cú pháp CSS Cú pháp CSS cơ bản: Selector { property:value; } Trong đó: - Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Các đối tượng này có thể là tên các thẻ HTML, class hay id. Ví dụ: body, h2, p, img, #title, #content, .username,… Trong CSS ngoài viết tên selector theo tên thẻ, class, id. Chúng ta còn có thể viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là #entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry.
Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó như thẻ <img> và thẻ <a> cùng có class tên vistors nhưng đây lại là hai đối tượng khác nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần. Nên trong trường hợp này, nếu người dùng có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ ghi là img. Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm cho chúng có text màu đỏ.
- Property: Chính là các thuộc tính quy định cách trình bày: Background-color, font-family, color, padding, margin… Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu “;” để phân cách các thuộc tính.