Giáo Trình Thiết Kế Web Dành Cho Nghề Thiết Kế Đồ Họa Trung Cấp

Khám phá giáo trình thiết kế web cho nghề thiết kế đồ họa trung cấp, cung cấp kiến thức và kỹ năng cần thiết để thành công trong ngành.

• Tác giả: Phạm Anh Đức
• Trường học: Trường Cao Đẳng Cơ Điện Xây Dựng Việt Xô
• Chuyên ngành: Thiết Kế Đồ Họa
• Đề tài: Giáo Trình Thiết Kế Web Cho Nghề Đồ Họa Trung Cấp
• Loại tài liệu: Giáo Trình
• Năm xuất bản: 2019
• Địa điểm: Ninh Bình

Mục lục chi tiết

• LỜI NÓI ĐẦU
• 1. BÀI 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ
• 2. BÀI 2: GIAO DIỆN WEB
• 3. BÀI 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ
• 4. BÀI 4: MÃ NGUỒN MỞ
• 5. BÀI 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE
• MÔ ĐUN: THIẾT KẾ WEB

Tóm tắt

I. Tổng Quan Về Giáo Trình Thiết Kế Web Nghề Đồ Họa Trung Cấp

Giáo trình thiết kế web cho nghề đồ họa trung cấp là một tài liệu quan trọng, giúp sinh viên nắm vững kiến thức và kỹ năng cần thiết trong lĩnh vực này. Tài liệu này không chỉ cung cấp lý thuyết mà còn tích hợp thực hành, giúp sinh viên áp dụng kiến thức vào thực tế. Nội dung giáo trình được biên soạn dựa trên các tiêu chuẩn quốc gia và tham khảo từ nhiều nguồn tài liệu uy tín trong và ngoài nước.

1.1. Mục Tiêu Của Giáo Trình Thiết Kế Web

Mục tiêu chính của giáo trình là giúp sinh viên hiểu rõ cấu trúc của một website, quy trình xây dựng và phát triển website, cũng như các vấn đề liên quan đến an toàn và bảo mật website.

1.2. Đối Tượng Sử Dụng Giáo Trình

Giáo trình này được thiết kế cho sinh viên ngành đồ họa trung cấp, những người muốn nâng cao kỹ năng thiết kế web và áp dụng vào công việc thực tế.

II. Những Thách Thức Trong Thiết Kế Web Cho Nghề Đồ Họa

Thiết kế web cho nghề đồ họa trung cấp đối mặt với nhiều thách thức, từ việc nắm vững ngôn ngữ lập trình đến việc tạo ra giao diện người dùng hấp dẫn. Các sinh viên cần phải làm quen với nhiều công nghệ khác nhau và cập nhật xu hướng thiết kế mới nhất để đáp ứng nhu cầu thị trường.

2.1. Khó Khăn Trong Việc Học Ngôn Ngữ Lập Trình

Sinh viên thường gặp khó khăn trong việc học các ngôn ngữ lập trình như HTML, CSS, và JavaScript. Việc nắm vững các ngôn ngữ này là rất quan trọng để xây dựng một website chất lượng.

2.2. Xu Hướng Thiết Kế Thay Đổi Nhanh Chóng

Thế giới thiết kế web luôn thay đổi, đòi hỏi sinh viên phải liên tục cập nhật kiến thức và kỹ năng mới để không bị lạc hậu.

III. Phương Pháp Học Tập Hiệu Quả Trong Thiết Kế Web

Để học thiết kế web hiệu quả, sinh viên cần áp dụng các phương pháp học tập tích cực. Việc kết hợp lý thuyết và thực hành sẽ giúp sinh viên nắm vững kiến thức và kỹ năng cần thiết.

3.1. Học Từ Các Dự Án Thực Tế

Tham gia vào các dự án thực tế sẽ giúp sinh viên áp dụng kiến thức đã học vào thực tiễn, từ đó nâng cao kỹ năng thiết kế web.

3.2. Sử Dụng Tài Nguyên Học Tập Trực Tuyến

Có nhiều tài nguyên học tập trực tuyến miễn phí và trả phí giúp sinh viên nâng cao kỹ năng thiết kế web, từ video hướng dẫn đến các khóa học trực tuyến.

IV. Ứng Dụng Thực Tiễn Của Thiết Kế Web Trong Ngành Đồ Họa

Thiết kế web không chỉ là một kỹ năng mà còn là một phần quan trọng trong ngành đồ họa. Các sản phẩm thiết kế web có thể được sử dụng trong nhiều lĩnh vực khác nhau, từ quảng cáo đến truyền thông.

4.1. Thiết Kế Giao Diện Người Dùng

Thiết kế giao diện người dùng là một phần quan trọng trong thiết kế web, giúp tạo ra trải nghiệm tốt cho người dùng và thu hút khách hàng.

4.2. Tối Ưu Hóa Website Để Tăng Trưởng Doanh Thu

Việc tối ưu hóa website không chỉ giúp cải thiện trải nghiệm người dùng mà còn tăng trưởng doanh thu cho doanh nghiệp thông qua việc thu hút nhiều khách hàng hơn.

V. Kết Luận Về Giáo Trình Thiết Kế Web Nghề Đồ Họa Trung Cấp

Giáo trình thiết kế web cho nghề đồ họa trung cấp là một tài liệu quý giá, giúp sinh viên trang bị kiến thức và kỹ năng cần thiết để thành công trong lĩnh vực này. Việc áp dụng các phương pháp học tập hiệu quả sẽ giúp sinh viên phát triển bản thân và đáp ứng nhu cầu thị trường.

5.1. Tương Lai Của Ngành Thiết Kế Web

Ngành thiết kế web đang phát triển mạnh mẽ, với nhiều cơ hội nghề nghiệp cho những người có kỹ năng phù hợp. Sinh viên cần chuẩn bị tốt để nắm bắt cơ hội này.

5.2. Khuyến Khích Đổi Mới Trong Học Tập

Khuyến khích sinh viên đổi mới trong học tập và sáng tạo trong thiết kế sẽ giúp họ nổi bật trong ngành công nghiệp cạnh tranh này.

Nội dung chính

Giáo Trình Thiết Kế Web (Nghề Thiết Kế Đồ Họa – Trình Độ Trung Cấp)

Tổng quan về giáo trình

Giáo trình môn học: Thiết kế Web (Mã mô đun: MĐ 38) là tài liệu đào tạo chuyên môn nghề được biên soạn bởi Thạc sỹ Phạm Anh Đức, phát hành năm 2019 tại Trường Cao đẳng Cơ điện Xây dựng Việt Xô (Khoa Công nghệ Thông tin và Ngoại ngữ, Ninh Bình). Tài liệu được xây dựng căn cứ trên chương trình khung quốc gia nghề Quản trị mạng máy tính và áp dụng trực tiếp cho chương trình đào tạo nghề Thiết kế đồ họa trình độ Trung cấp.

Trong cấu trúc chương trình đào tạo, mô đun Thiết kế Web được bố trí giảng dạy sau khi người học đã hoàn thành các môn học chung và các môn học cơ sở chuyên ngành. Môn học đóng vai trò cầu nối giữa tư duy thẩm mỹ đồ họa và kỹ năng hiện thực hóa giao diện số thông qua các công nghệ web tiêu chuẩn.

Mục tiêu học tập của giáo trình được xác định rõ ràng trên ba phương diện:

• Về kiến thức: Trang bị cho người học khả năng trình bày cấu trúc tổng thể của một website, nắm vững quy trình 6 bước xây dựng và phát triển website, đồng thời hiểu rõ các nguyên lý cơ bản liên quan đến an toàn và bảo mật hệ thống web.
• Về kỹ năng: Hình thành năng lực xây dựng và lập trình trang web hoàn chỉnh bằng các ngôn ngữ đánh dấu và định dạng (HTML, CSS, JavaScript, XML), kết hợp với kỹ năng cài đặt, tùy biến hệ quản trị nội dung mã nguồn mở.
• Về năng lực tự chủ và trách nhiệm: Rèn luyện phương pháp làm việc khoa học, bảo đảm tiến độ xây dựng và vận hành trang web, tuân thủ các quy chuẩn an toàn lao động trong môi trường làm việc với máy tính.

Giáo trình có tổng thời lượng 90 giờ, được thiết kế theo phương thức tích hợp lý thuyết và thực hành. Cấu trúc nội dung gồm 5 bài học chính, phân bổ 29 giờ lý thuyết, 58 giờ thực hành/thảo luận/bài tập và 3 giờ kiểm tra định kỳ. Điểm đặc sắc của giáo trình là việc kết hợp chặt chẽ giữa phân tích bố cục thẩm mỹ đa ngành hàng với kỹ thuật lập trình mã nguồn mở, phục vụ trực tiếp cho nhu cầu sản xuất thực tế.

---

Nội dung kiến thức cốt lõi

Các chương và chủ đề chính

Nội dung giáo trình được tổ chức thành 5 bài học với tiến trình sư phạm từ nền tảng công nghệ mạng, phân tích bố cục giao diện, lập trình giao diện tĩnh đến triển khai mã nguồn mở và xuất bản website:

• Bài 1: Các định nghĩa và thuật ngữ (3 giờ lý thuyết, 0.5 giờ kiểm tra/thực hành): Giới thiệu tổng quan về Internet, cơ chế truyền gói dữ liệu (packet switching) dựa trên giao thức IP; phân loại các dịch vụ mạng như Web, E-mail, FTP (hoạt động theo mô hình máy chủ và máy khách), Gopher, Newsgroup, Usenet, Mailing List, Telnet, VoIP (Voice over Internet Protocol với các đầu số dịch vụ 171 VNPT, 178 Viettel), WAP. Giới thiệu lịch sử World Wide Web từ đề xuất siêu văn bản của Ted Nelson (1965) đến dự án chính thức của Tim Berners-Lee (1989); phân biệt Web page và Website; hướng dẫn sử dụng các trình duyệt (Google Chrome, Firefox, Safari, Opera) và các thao tác thực hành như duyệt web ẩn danh (Incognito), quản lý Bookmark, quản lý Tab.
• Bài 2: Giao diện Web (4 giờ lý thuyết, 12 giờ thực hành): Khảo sát 7 dạng giao diện website thương mại theo đặc thù ngành hàng: quán cà phê, mỹ phẩm/dụng cụ làm đẹp, thời trang/quần áo, công nghệ/điện tử, đồ trang sức/phụ kiện, đồ ăn/thực phẩm, kinh doanh hoa tươi. Định hình cấu trúc 5 thành phần cơ bản của trang web gồm Header, Navigation, Content, Sidebar, Footer; giới thiệu hệ thống thẻ ngữ nghĩa HTML5 để xây dựng bố cục: <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>.
• Bài 3: Ngôn ngữ HTML - CSS (11 giờ lý thuyết, 28 giờ thực hành, 2 giờ kiểm tra):
  • HTML: Cấu trúc tài liệu (<html>, <head>, <title>, <body>); thẻ tiêu đề từ <h1> đến <h6>; đoạn văn bản <p>; định dạng chữ (<strong>, <i>, <u>, <strike>); thuộc tính nội tuyến style (color, background-color, font-size, font-family, text-align); liên kết siêu văn bản <a> (với các thuộc tính href, title, target _self, _blank, _top, _parent) và liên kết neo (#id); nhúng ảnh qua thẻ <img src alt />; cấu trúc bảng qua thẻ <table>, <tr>, <th>, <td>; xây dựng biểu mẫu <form> với các phương thức GET/POST, mã hóa application/x-www-form-urlencoded, multipart/form-data và các trường điều khiển (Text Input đơn dòng, Password Input, Textarea đa dòng, Checkbox, Radio Button, Select Box, File Upload Box, Button submit/reset/button/image, Hidden Form); tích hợp đa phương tiện qua thẻ <video> HTML5.
  • CSS: Giới thiệu cơ chế tách biệt định dạng với nội dung; cú pháp chuẩn Selector { property: value; }; 3 phương pháp nhúng CSS (Inline, Internal trong thẻ <style>, External qua thẻ <link>); hệ thống đơn vị đo chiều dài (%, in, cm, mm, em, ex, pt, pc, px) và đơn vị màu sắc (Color-name, RGB, Hexadecimal); các thuộc tính xử lý nền (background-color, background-image, background-repeat, background-attachment, background-position) và cú pháp viết rút gọn (shorthand); các thuộc tính định dạng văn bản/font chữ (font-family, font-style, font-variant, font-weight, font-size) và cú pháp rút gọn font.
• Bài 4: Mã nguồn mở (8 giờ lý thuyết, 14 giờ thực hành, 1 giờ kiểm tra): Khái niệm phần mềm mã nguồn mở; bản chất và chức năng của Web Server; quy trình cài đặt máy chủ cục bộ và cài đặt hệ quản trị nội dung WordPress; quản trị nội dung thông qua AdminCP (tạo danh mục, soạn thảo bài viết, quản lý thư viện ảnh, phân quyền người dùng); phân tích cấu trúc mã nguồn WordPress; tìm kiếm, cài đặt và tùy biến Theme; can thiệp mã CSS trực tiếp trong Theme; cấu hình Widget, Menu, tùy chỉnh Header/Background; tối ưu hóa tìm kiếm (SEO) và danh mục 21 website cung cấp theme miễn phí.
• Bài 5: Xuất bản và duy trì Website (3 giờ lý thuyết, 4 giờ thực hành): Nguyên lý đăng ký Tên miền (Domain Name) và dịch vụ lưu trữ (Web Hosting); xác thực thông số máy chủ và quy trình chuyển tải mã nguồn lên server; quy trình kiểm thử, phát triển nội dung sau triển khai; các biện pháp phòng ngừa rủi ro và bảo đảm an toàn, bảo mật thông tin trước các hiểm họa trực tuyến.

Progression Logic của giáo trình:
[Hạ tầng mạng & Thuật ngữ Web] (Bài 1)
[Bố cục & Mỹ thuật Giao diện] (Bài 2)
[Lập trình mã nguồn HTML/CSS] (Bài 3)
[Quản trị mã nguồn mở CMS] (Bài 4)
[Triển khai Domain/Hosting & Bảo mật] (Bài 5)

Kiến thức nền tảng được xây dựng

Giáo trình thiết lập hệ thống tri thức nền tảng mang tính học thuật và kỹ thuật bao gồm:

• Lý thuyết mạng và truyền thông dữ liệu: Nguyên lý chuyển mạch gói, giao thức liên mạng IP, mô hình tương tác Client-Server qua giao thức HTTP và FTP, lịch sử phát triển khái niệm Hypertext của Ted Nelson và Tim Berners-Lee.
• Nguyên lý phân tách nội dung và định dạng: Chuẩn hóa theo tiêu chuẩn W3C (World Wide Web Consortium), trong đó HTML đóng vai trò dựng khung dữ liệu và ngữ nghĩa, còn CSS kiểm soát toàn bộ cách thức hiển thị và giao diện trực quan.
• Cấu trúc dữ liệu và điều khiển: Cấu trúc phân cấp tài liệu DOM cơ bản, cơ chế truyền dữ liệu biểu mẫu qua phương thức GET/POST, mã hóa dữ liệu nhị phân phục vụ tải tập tin lên máy chủ.

Kỹ năng phát triển

Người học được rèn luyện và hoàn thiện các nhóm kỹ năng thực hành nghề nghiệp:

• Kỹ năng kỹ thuật (Technical skills): Soạn thảo mã nguồn HTML/CSS theo đúng chuẩn cú pháp; tổ chức cấu trúc thẻ ngữ nghĩa HTML5; tối ưu mã CSS thông qua các thuộc tính rút gọn (shorthand); thiết lập môi trường Web Server cục bộ và cài đặt, cấu hình mã nguồn WordPress.
• Kỹ năng phân tích (Analytical skills): Phân tích yêu cầu khách hàng để xác định bố cục giao diện phù hợp với đặc thù từng lĩnh vực kinh doanh; đánh giá tính hợp lý của hệ thống điều hướng (Navigation); kiểm thử các lỗi hiển thị trên các trình duyệt web khác nhau.
• Kỹ năng thực thi thực tế (Practical competencies): Đăng ký tên miền, cấu hình thông số hosting, tải mã nguồn lên máy chủ; vận hành hệ thống quản trị nội dung; thực hiện các thao tác an toàn thông tin và bảo mật dữ liệu website.

---

Phương pháp giảng dạy và học tập

Giáo trình áp dụng phương pháp đào tạo tích hợp (Integrated Competency-based Training), kết hợp chặt chẽ giữa giảng giải lý thuyết chuyên ngành và hướng dẫn thao tác mẫu trên phòng máy vi tính. Trong tổng số 90 giờ của toàn bộ mô đun, thời lượng thực hành và bài tập chiếm 58 giờ (tương đương 64.4%), tạo điều kiện để người học chuyển hóa kiến thức lý thuyết thành sản phẩm thực tế.

Phân bổ thời lượng mô đun Thiết kế Web (90 giờ):

Phương pháp học tập và tổ chức bài tập được triển khai qua các hình thức:

• Nghiên cứu tình huống giao diện thực tế (Case Studies): Phân tích các mẫu thiết kế website đại diện cho 7 ngành nghề kinh doanh phổ biến (ẩm thực, mỹ phẩm, thời trang, điện tử, trang sức, đồ ăn, hoa tươi). Người học học cách lựa chọn màu sắc, bố trí hình ảnh và cấu trúc danh mục dựa trên đặc thù người dùng của từng ngành.
• Bài tập thực hành kỹ thuật theo quy trình: Hướng dẫn từng bước (step-by-step) các thao tác phức tạp như: cấu hình trình duyệt Google Chrome (tạo phiên ẩn danh, đánh dấu bookmark, quản lý tab); viết mã tạo bảng và biểu mẫu thu thập dữ liệu; thiết lập hình nền với các giá trị repeat-x, repeat-y, fixed, scroll; định dạng hệ thống font chữ dự phòng (family-names kết hợp generic families).
• Đánh giá kết quả học tập: Được thực hiện thông qua 3 bài kiểm tra định kỳ phân bổ tại Bài 1, Bài 3 và Bài 4. Tiêu chí đánh giá tập trung vào độ chính xác của mã nguồn, khả năng hiển thị tương thích trên trình duyệt và kỹ năng tùy biến hoàn thiện một website mã nguồn mở.
• Hướng dẫn tự học: Giáo trình yêu cầu người học tự thực hành cài đặt các gói phần mềm mã nguồn mở, tra cứu thư viện CSS, thực hành thay đổi thông số giao diện qua tệp style.css và khai thác 21 địa chỉ cung cấp theme miễn phí để mở rộng tư liệu thiết kế.

---

Điểm nổi bật và cập nhật

Giáo trình phản ánh các bước chuyển dịch quan trọng trong công nghệ phát triển web tại thời điểm biên soạn:

• Cập nhật cấu trúc ngữ nghĩa HTML5: Thay thế cách phân chia khối thuần túy bằng các thẻ có ý nghĩa cấu trúc rõ ràng (header, nav, section, article, aside, footer). Điều này giúp các công cụ tìm kiếm hiểu chính xác ngữ nghĩa của trang web, hỗ trợ tối ưu hóa tìm kiếm (SEO) ngay từ giai đoạn dựng khung mã nguồn.
• Chuẩn hóa đa phương tiện không phụ thuộc Plugin: Giáo trình ghi nhận sự xuất hiện của thẻ <video> trong chuẩn HTML5, giúp phát video và âm thanh trực tiếp trên trình duyệt mà không cần cài đặt các tiện ích bổ trợ như Adobe Flash, từ đó giảm áp lực phần cứng và tăng tính tương thích cho các thiết bị di động.
• Tích hợp hệ quản trị nội dung mã nguồn mở (CMS): Thay vì dừng lại ở việc lập trình web tĩnh thuần túy, tài liệu dành riêng Bài 4 để hướng dẫn sử dụng WordPress – nền tảng quản trị nội dung phổ biến. Người học được tiếp cận quy trình quản lý bài viết, cấu hình plugin, biên tập giao diện theme và quản trị người dùng.
• Gắn kết với quy trình sản xuất và kinh doanh thực tế: Khung quy trình 6 bước (Xác định yêu cầu $\rightarrow$ Chọn domain/hosting $\rightarrow$ Thiết kế $\rightarrow$ Chạy thử/Fix lỗi $\rightarrow$ Điều hành/Phát triển $\rightarrow$ Bảo trì) giúp người học nắm bắt toàn diện chu trình vòng đời của một dự án web thực tế trong doanh nghiệp.

---

Đối tượng sử dụng giáo trình

Giáo trình Thiết kế Web phục vụ các nhóm đối tượng cụ thể trong hệ thống giáo dục nghề nghiệp:

• Học sinh, sinh viên trình độ Trung cấp và Cao đẳng: Tài liệu được thiết kế trực tiếp cho học viên ngành Thiết kế đồ họa và nghề Quản trị mạng máy tính. Đây là tài liệu học tập bắt buộc của mô đun MĐ 38.
• Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành các môn học chung (chính trị, pháp luật, tin học đại cương) và các môn cơ sở ngành CNTT trước khi tham gia mô đun này; có kỹ năng thao tác cơ bản với hệ điều hành và trình duyệt web.
• Giảng viên chuyên ngành: Sử dụng giáo trình làm tài liệu chuẩn để soạn đề cương bài giảng, phân bổ tiến trình 90 giờ học và xây dựng ngân hàng bài tập thực hành, bài kiểm tra đánh giá năng lực nghề nghiệp.
• Người tự học và kỹ thuật viên đồ họa: Là tài liệu tham khảo cho người mới bắt đầu tìm hiểu quy trình xây dựng web, cung cấp các bảng tra cứu nhanh về thuộc tính CSS, thẻ HTML và các thao tác triển khai tên miền, hosting.

---

Câu hỏi thường gặp

1. Giáo trình này phù hợp với đối tượng nào?

Giáo trình được biên soạn chuyên biệt cho học sinh, sinh viên hệ Trung cấp nghề Thiết kế đồ họa và Quản trị mạng máy tính, đồng thời phù hợp với những người bắt đầu học thiết kế website từ nền tảng cơ bản.

2. Cần chuẩn bị kiến thức nền tảng gì trước khi học?

Người học cần hoàn thành các môn học đại cương và cơ sở ngành công nghệ thông tin, có kỹ năng sử dụng máy tính cơ bản và hiểu biết sơ bộ về tổ chức tệp tin, trình duyệt web.

3. Giáo trình có điểm gì khác biệt so với các tài liệu lập trình web chuyên sâu?

Tài liệu được kết cấu theo mô hình đào tạo nghề với hơn 64% thời lượng là thực hành. Cách tiếp cận tập trung mạnh vào thiết kế bố cục thẩm mỹ theo từng ngành hàng kinh doanh, sử dụng HTML5/CSS3 chuẩn SEO và quản trị website nhanh chóng thông qua mã nguồn mở WordPress, không đi quá sâu vào các ngôn ngữ lập trình back-end phức tạp.

4. Phương pháp tự học giáo trình như thế nào để đạt hiệu quả cao?

Người học nên kết hợp đọc lý thuyết với thực hành trực tiếp trên máy vi tính: gõ mã từng ví dụ HTML/CSS thay vì sao chép, tự tay cài đặt môi trường máy chủ cục bộ, cài đặt WordPress và áp dụng thay đổi giao diện theo các kịch bản ngành hàng được nêu trong Bài 2.

5. Giáo trình cung cấp những tài liệu và công cụ bổ trợ nào?

Giáo trình tích hợp sẵn các bảng tra cứu thuộc tính CSS (màu sắc, đơn vị đo lường, cấu trúc rút gọn), hướng dẫn thao tác trên trình duyệt Google Chrome, danh mục 21 website cung cấp theme WordPress miễn phí và quy trình chi tiết về đăng ký tên miền, hosting.

---

Kết luận

Giáo trình Thiết kế Web (Mã mô đun: MĐ 38) của Trường Cao đẳng Cơ điện Xây dựng Việt Xô cung cấp một hệ thống tri thức hoàn chỉnh và chuẩn hóa về kỹ thuật thiết kế giao diện web ở trình độ trung cấp nghề. Tài liệu bao quát từ các khái niệm cơ sở về hạ tầng Internet, quy chuẩn mã hóa HTML/CSS, bố cục giao diện thẩm mỹ cho đến quy trình quản trị nội dung mã nguồn mở và xuất bản trực tuyến.

Lộ trình học tập được thiết kế mạch lạc qua 5 bài học, giúp người học từng bước xây dựng năng lực nghề nghiệp vững chắc, đáp ứng các tiêu chuẩn kỹ thuật trong sản xuất và phát triển website thực tế. Để nâng cao hiệu quả đào tạo, người học nên kết hợp việc nghiên cứu giáo trình với các tài liệu chuẩn từ tổ chức W3C và hệ thống tài liệu hướng dẫn kỹ thuật của cộng đồng WordPress.

Trích đoạn nội dung tài liệu

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN TRƢỜNG CAO ĐẲNG CƠ ĐIỆN XÂY DỰNG VIỆT XÔ KHOA CÔNG NGHỆ THÔNG TIN VÀ NGOẠI NGỮ GIÁO TRÌNH MÔN HỌC: THIẾT KẾ WEB NGHỀ: THIẾT KẾ ĐỒ HOẠ TRÌNH ĐỘ TRUNG CẤP 1 TUYÊN BỐ BẢN QUYỀN: Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể đƣợc phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. 2 LỜI NÓI ĐẦU Chƣơng trình khung quốc gia nghề Quản trị mạng máy tính đã đƣợc xây dựng trên cơ sở phân tích nghề, phần kỹ thuật nghề đƣợc kết cấu theo các môđun, môn học. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo các môđun, môn học đào tạo nghề là cấp thiết hiện nay.

Thiết kế web là mô đun đào tạo nghề đƣợc biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu thiết kế và lập trình web trong và ngoài nƣớc, kết hợp với kinh nghiệm trong thực tế sản xuất. Mặc dầu có rất nhiều cố gắng, nhƣng không tránh khỏi những khiếm khuyết, rất mong nhận đƣợc sự đóng góp ý kiến của độc giả để giáo trình đƣợc hoàn thiện hơn. Ninh Bình 2019 Biên Soạn Thạc sỹ: Phạm Anh Đức 3 MỤC LỤC Bài 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ.

Internet và dịch vụ Internet. Lợi ích của Internet. Dịch vụ Internet. Giới thiệu về WWW.

Quy trình xây dựng Website. Web page, Website. Trình duyệt Web. Khái niệm trình duyệt Web.

Các trình duyệt Web. Một số thao tác cơ bản với trình duyệt Web. 13 Bài 2: GIAO DIỆN WEB. Các loại giao diện Website.

Bố cục giao diện Web. Xây dựng giao diện Web theo yêu cầu. 29 Bài 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ. Giới thiệu HTML.

Các thẻ cơ bản trong HTML. Thẻ định dạng văn bản. Thẻ căn chỉnh nội dung. Giới thiệu CSS .Các lệnh cơ bản trong CSS.

Định dạng chữ. Các lệnh CSS khác. 52 Bài 4: MÃ NGUỒN MỞ. Giới thiệu mã nguồn mở.

Khái niệm mã nguồn mở. 64 4: Quản trị nội dung Website Wordpress. Làm việc với AdminCP. Cài đặt Plugin cho WordPress.

Cài đặt Themes cho WordPress. Chỉnh giao diện bằng CSS trong Theme .Tuỳ chỉnh header va background. Hƣớng dẫn viết bài mới Wordpress .Cách tạo menu trong Wordpress. Hƣớng dẫn tạo trang mới (Add new pages).

Hƣớng dẫn Widget Wordpress. Tối ƣu hoá tìm kiếm (SEO). 21 website để tìm theme miễn phí. 128 Bài 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE.

Đăng ký tên miền, hosting. Tên miền – domain. Đăng ký dịch vụ. Cài đặt Website lên Server.

Xác nhận thông tin server. Đƣa mã nguồn lên server. Phát triển Website. Kiểm tra và thử nghiệm nội dung.

Phát triển nội dung. Bảo mật Website. Hiểm họa đối với Website. 129 5 MÔ ĐUN: Thiết kế Web Mã mô đun: MĐ 38 Vị trí, ý nghĩa, vai trò của Mô đun: - Vị trí: Mô đun đƣợc bố trí sau khi sinh viên học xong các môn học chung, các môn cơ sở chuyên ngành đào tạo chuyên môn nghề.

- Tính chất: Là mô đun chuyên môn nghề Mục tiêu mô đun: - Về kiến thức + Trình bày đƣợc cấu trúc của một Website; + Trình bày đƣợc quy trình xây dựng và phát triển Website; + Trình bày đƣợc các vấn đề liêu quan đến an toàn và bảo mật Website. - Về kỹ năng: Tạo đƣợc Website dựa trên các ngôn ngữ HTML, CSS, Javascrip, XML.; - Về năng lực tự chủ và trách nhiệm + Bố trí làm việc khoa học đảm bảo thời gian xây dựng và vận hành Website. + Cần cù, chủ động trong học tập, đảm bảo an toàn trong học tập. Nội dung mô đun: 1.

Nội dung tổng quát và phân phối thời gian: Thời gian Thực Số hành, thí Tên chương mục Tổng Lý Kiểm tra TT nghiệm, số thuyết thảo luận, Bài tập Bài 1: Các định nghĩa và 3 3 thuật ngữ 1. Internet và dịch vụ Internet 0. Lợi ích của Internet. Dịch vụ Internet.

Giới thiệu về WWW 0. Dịch vụ WWW. Giao thức trong WWW. Quy trình xây dựng Website 0.

Web page, Website 0. Trình duyệt Web 0. Khái niệm trình duyệt Web. Các trình duyệt Web 6 5.

Một số thao tác cơ bản với trình duyệt Web 6: Phần mềm trong thiết kế 0.5 Web Bài 2: Giao diện Web 16 4 12 1. Các loại giao diện Website 1 1 2 2. Bố cục giao diện Web 3 1 2 3. Xây dựng giao diện Web 12 2 10 theo yêu cầu Bài 3: Ngôn ngữ HTML - 41 11 28 2 CSS 1.

Giới thiệu HTML 0. Các thẻ cơ bản trong HTML 14 4 9 1 2. Thẻ định dạng văn bản. Thẻ căn chỉnh nội dung.

Liên kế - Link. Biểu mẫu – Form 2.Giới thiệu CSS 0.Các lệnh cơ bản trong CSS 12 3 9 4. Định dang khung. Định dạng chữ.

Sắp xếp các khối. Xây dựng giao diện Web tử 10 2 7 1 file. Xây dƣng Web chuẩn SEO 4 1 3 Bài 4: Mã nguồn mở 23 8 14 1 1. Giới thiệu mã nguồn mở 0.

Khái niệm mã nguồn mở. Các loại mã nguồn mở 2. Khái niệm Web server. Tác dụng Web Server.

Cài đặt Web server. Cài đặt Wordpress 2 1 1 3. Giới thiệu Wordpress 3. Cài đặt Wordpress 7 4: Quản trị nội dung Website 6 2 4 Wordpress 4.

Tạo danh mục. Tạo bài viết. Quản lý bài viết, quản lý ảnh. Quản lý ngƣời dùng.

Quản lý bố các thành phần khác 5. Cấu trúc mã nguồn 3 1 2 Wordpress 6: Theme Wordpress 6 1 4 1 6. Thay đổi Theme Wordpress 6. Tìm và cài đặt Theme Wordpress 6.

Chỉnh sửa Theme Wordpress 7: Plugin Wordpress 2. Tác dụng của Plugin Wordpress 7. Các Plugin cơ bản Bài 5: Xuất bản và duy trì 7 3 4 Website 1. Đăng ký tên miền, hosting.

Tên miền – domain. Đăng ký dịch vụ 2. Cài đặt Website lên Server 2 1 1 2. Xác nhận thông tin server.

Đƣa mã nguồn lên server. Phát triển Website. Kiểm tra và thử nghiệm nội dung 3. Phát triển nội dung.

Bảo mật Website 1. Hiểm họa đối với Website. Cộng 90 29 58 3 8 Bài 1 CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ Mã bài: MĐ 21 – 01. Giới thiệu: Internet là một hệ thống thông tin toàn cầu có thể đƣợc truy nhập công cộng gồm các mạng máy tính đƣợc liên kết với nhau.

Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên mạng đã đƣợc chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trƣờng đại học, của ngƣời dùng cá nhân và các chính phủ trên toàn cầu. Mục tiêu: - Trình bày đƣợc internet và dịch vụ internet; - Phân loại đƣợc WWW; - Thiết lập đƣợc quy trình xây dựng web; - Mô tả đƣợc các trình duyệt web - Thực hiện các thao tác an toàn với máy tính. Nội dung chính: 1.

Internet và dịch vụ Internet 1. Internet là một hệ thống thông tin toàn cầu có thể đƣợc truy nhập công cộng gồm các mạng máy tính đƣợc liên kết với nhau. Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên mạng đã đƣợc chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trƣờng đại học, của ngƣời dùng cá nhân và các chính phủ trên toàn cầu.

Lợi ích của Internet Internet có rất nhiều lợi ích đối với cuộc sống thƣờng ngày:  Đọc báo, xem tin tức Online  Lƣớt Facebook, xem phim, nghe nhạc trực tuyến  Gửi nhận Mail, tìm kiếm thông tin trên mạng  Mua bán, học tập, thậm chí chữa bệnh qua mạng  … Nói tóm lại, Internet mang lại CỰC KỲ tiện ích cho con ngƣời, nó cung cấp một khối lƣợng thông tin Khổng Lồ. Các cách thức thông thƣờng để truy cập Internet là quay số, băng rộng, không dây, vệ tinh và qua điện thoại cầm tay. Dịch vụ Internet 1.1 Web, E-Mail, FTP, hội thoại Website - trang web, trang mạng, là một tập hợp trang web, thƣờng chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của 9 Internet. Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP.

Website có thể đƣợc xây dựng từ các tệp tin HTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website động). Website có thể đƣợc xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP,.NET, Java, Ruby on Rails. Email - Thư điện tử (từ chữ Electronic mail) là một hệ thống chuyển nhận thƣ từ qua các mạng máy tính. Email là một phƣơng tiện thông tin rất nhanh.

Một mẫu thông tin (thƣ từ) có thể đƣợc gửi đi ở dạng mã hoá hay dạng thông thƣờng và đƣợc chuyển qua các mạng máy tính đặc biệt là mạng Internet. Nó có thể chuyển mẫu thông tin từ một máy nguồn tới một hay rất nhiều máy nhận trong cùng lúc. Ngày nay, email chẳng những có thể truyền gửi đƣợc chữ, nó còn có thể truyền đƣợc các dạng thông tin khác nhƣ hình ảnh, âm thanh, phim, và đặc biệt các phần mềm thƣ điện tử kiểu mới còn có thể hiển thị các email dạng sống động tƣơng thích với kiểu tệp HTML. Hoạt động của FTP cần có hai máy tính, một máy chủ và một máy khách).

Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi là trình chủ, lắng nghe yêu cầu về dịch vụ của các máy tính khác trên mạng lƣới. Máy khách chạy phần mềm FTP dành cho ngƣời sử dụng dịch vụ, gọi là trình khách, thì khởi đầu một liên kết với máy chủ. Một khi hai máy đã liên kết với nhau, máy khách có thể xử lý một số thao tác về tập tin, nhƣ tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy của mình, đổi tên của tập tin, hoặc xóa tập tin ở máy chủ v. Vì giao thức FTP là một giao thức chuẩn công khai, cho nên bất cứ một công ty phần mềm nào, hay một lập trình viên nào cũng có thể viết trình chủ FTP hoặc trình khách FTP.

Hầu nhƣ bất cứ một nền tảng hệ điều hành máy tính nào cũng hỗ trợ giao thức FTP.