Giáo Trình Thiết Kế Trang Web Nghề Quản Trị Mạng Máy Tính Tại Trường Cao Đẳng Cộng Đồng Đồng Tháp

Giáo trình thiết kế trang web cho nghề quản trị mạng máy tính tại trường cao đẳng cộng đồng Đồng Tháp, cung cấp kiến thức và kỹ năng cần thiết.

• Trường học: Cao Đẳng Cộng Đồng Đồng Tháp
• Chuyên ngành: Quản Trị Mạng
• Đề tài: Giáo Trình Thiết Kế Web Cho Nghề Quản Trị Mạng Tại Cao Đẳng Cộng Đồng Đồng Tháp
• Loại tài liệu: Giáo Trình
• Năm xuất bản: 2017
• Địa điểm: Đồng Tháp

Mục lục chi tiết

• LỜI GIỚI THIỆU
• 1. BÀI 1: MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWAVER, THẺ HTML
• 2. BÀI 2: TẠO TRANG WEB BẰNG HTML5
• 3. BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS
• 4. BÀI 4: TÙY BIẾN GIAO DIỆN VỚI CSS3
• 5. BÀI 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT
• 6. BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO
• 7. BÀI 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY
• 8. BÀI 8: PUBLISH WEBSITE

Tóm tắt

I. Tổng quan về Giáo Trình Thiết Kế Web Tại Cao Đẳng Cộng Đồng Đồng Tháp

Giáo trình "Thiết kế Web" được biên soạn nhằm cung cấp cho sinh viên ngành Quản trị mạng những kiến thức cơ bản về thiết kế web. Nội dung giáo trình bao gồm các khái niệm, quy trình thiết kế, và các công cụ cần thiết để tạo ra một trang web hoàn chỉnh. Việc nắm vững kiến thức này là rất quan trọng trong bối cảnh công nghệ thông tin ngày càng phát triển.

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 có khả năng thiết kế giao diện, lập trình cơ bản và sử dụng các thẻ HTML. Sinh viên cũng sẽ được trang bị kỹ năng tổ chức thông tin và xây dựng ứng dụng multimedia.

1.2. Đối tượng áp dụng giáo trình

Giáo trình này được áp dụng cho sinh viên ngành Quản trị mạng tại Cao đẳng Cộng đồng Đồng Tháp, những người muốn phát triển kỹ năng trong lĩnh vực thiết kế web.

II. Thách thức trong việc thiết kế web cho sinh viên ngành Quản trị mạng

Sinh viên thường gặp nhiều thách thức trong việc nắm bắt các công nghệ mới và áp dụng chúng vào thực tiễn. Việc thiếu kinh nghiệm thực hành có thể dẫn đến khó khăn trong việc thiết kế và phát triển các trang web động. Ngoài ra, việc cập nhật kiến thức về công nghệ thông tin cũng là một thách thức lớn.

2.1. Thiếu kinh nghiệm thực hành

Nhiều sinh viên chưa có cơ hội thực hành nhiều với các công cụ thiết kế web, dẫn đến việc khó khăn trong việc áp dụng lý thuyết vào thực tế.

2.2. Cập nhật công nghệ mới

Công nghệ thiết kế web luôn thay đổi, sinh viên cần phải liên tục cập nhật kiến thức để không bị lạc hậu.

III. Phương pháp giảng dạy hiệu quả trong giáo trình thiết kế web

Giáo trình sử dụng phương pháp giảng dạy kết hợp lý thuyết và thực hành, giúp sinh viên có thể áp dụng kiến thức vào thực tế. Các bài tập thực hành được thiết kế để sinh viên có thể tự tay tạo ra các trang web đơn giản và dần dần nâng cao độ phức tạp.

3.1. Kết hợp lý thuyết và thực hành

Mỗi bài học đều có phần thực hành, giúp sinh viên áp dụng ngay kiến thức đã học vào việc thiết kế trang web.

3.2. Sử dụng công cụ thiết kế hiện đại

Giáo trình hướng dẫn sinh viên sử dụng các công cụ thiết kế web hiện đại như Adobe Dreamweaver, giúp họ làm quen với môi trường làm việc thực tế.

IV. Ứng dụng thực tiễn của giáo trình thiết kế web

Giáo trình không chỉ giúp sinh viên nắm vững kiến thức lý thuyết mà còn trang bị cho họ kỹ năng thực hành cần thiết để có thể làm việc trong lĩnh vực quản trị mạng. Sinh viên có thể áp dụng những gì đã học để thiết kế các trang web cho doanh nghiệp hoặc cá nhân.

4.1. Thiết kế trang web cho doanh nghiệp

Sinh viên có thể thực hiện các dự án thiết kế web cho doanh nghiệp, giúp họ có thêm kinh nghiệm thực tế và xây dựng portfolio.

4.2. Tạo ra các sản phẩm cá nhân

Ngoài việc làm cho doanh nghiệp, sinh viên cũng có thể tự tạo ra các trang web cá nhân để thể hiện khả năng và sáng tạo của mình.

V. Kết luận về tương lai của giáo trình thiết kế web

Giáo trình "Thiết kế Web" tại Cao đẳng Cộng đồng Đồng Tháp sẽ tiếp tục được cập nhật và hoàn thiện để đáp ứng nhu cầu ngày càng cao của thị trường lao động. Việc trang bị cho sinh viên những kiến thức và kỹ năng cần thiết sẽ giúp họ tự tin hơn khi bước vào nghề.

5.1. Cập nhật nội dung giáo trình

Giáo trình sẽ được cập nhật thường xuyên để phản ánh những thay đổi trong công nghệ và nhu cầu của thị trường.

5.2. Định hướng nghề nghiệp cho sinh viên

Giáo trình không chỉ dừng lại ở việc giảng dạy kiến thức mà còn hướng đến việc định hướng nghề nghiệp cho sinh viên trong lĩnh vực quản trị mạng.

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

ỦY BAN NHÂN DÂN TỈNH ĐỒNG THÁP TRƢỜNG CAO ĐẲNG CỘNG ĐỒNG ĐỒNG THÁP GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ TRANG WEB NGÀNH, NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số: /QĐ-CĐCĐ ngày tháng năm 2017 của Hiệu trƣởng trƣờng Cao đẳng Cộng đồng Đồng Tháp) Đồng Tháp, năm 2017 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 LỜI GIỚI THIỆU Mạng Internet được coi như một tổ hợp các Website, người sử dụng có thể đi từ trang này sang trang khác, có thể tương tác với các trang Web để hiển thị những nội dung khác nhau tùy thuộc theo yêu cầu. Hiện nay, hầu hết các tổ chức, công ty đều sử dụng Website để giới thiệu và quảng bá sản phẩm, dịch vụ của mình. Việc thiết kế Website là rất quan trọng, nó thể hiện thương hiệu và đẳng cấp của công ty và tổ chức.

Vì thế, thiết kế Website đã trở thành công việc và là nghề được nhiều bạn trẻ ưa thích. Giáo trình môn học “ Thiết kế Web ” được biên soạn dựa theo đề cương chi tiết môn học Thiết kế Web thuộc BÀI trình đào tạo nghề Quản trị mạng của trường Cao đẳng Cộng đồng Đồng Tháp. Giáo trình này cung cấp cho sinh viên ngành Quản trị mạng máy tính những kiến thức căn bản về thiết kế web như : Các khái niệm cơ bản của thiết kế Web, quy trình thiết kế Web, các thẻ HTML cơ bản, các công cụ và phần mềm để thiết kế được giao diện Web, lập trình với ngôn ngữ ASP.NET kết hợp với cơ sở dữ liệu để tạo ra các trang Web động,. Tuy đã có nhiều cố gắng trong quá trình biên soạn nhưng vẫn còn nhiều thiếu sót, chúng tôi mong nhận được các ý kiến đóng góp của các thầy cô, đồng nghiệp và các bạn sinh viên để chúng tôi có thể hoàn thiện giáo trình này hơn ……, ngày … tháng … năm 202… Tham gia biên soạn 3 MỤC LỤC  LỜI GIỚI THIỆU.

Error! Bookmark not defined. Error! Bookmark not defined. BÀI 1: MÔI TRƢỜNG TẠO TRANG WEB TĨNH DREAMWAVER, THẺ HTML. Error! Bookmark not defined.

Error! Bookmark not defined. Quản lý nội dung trong site. Error! Bookmark not defined. Chọn vùng nhìn.

Error! Bookmark not defined. Thẻ HTML cơ bản. Error! Bookmark not defined. CÂU HỎI, BÀI TẬP.

Error! Bookmark not defined.9 BÀI 2: TẠO TRANG WEB BẰNG HTML5. Sử dụng các thẻ ngữ nghĩa. Sử dụng các thẻ mới của HTML5 trong Form. Sử dụng HTML5 GraphicsSVG.

Sử dụng các HTML Media .26 CÂU HỎI, BÀI TẬP. Error! Bookmark not defined.7 BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS. Giới thiệu CSS và các loại CSS. Error! Bookmark not defined.

Tạo và sử dụng CSS. Error! Bookmark not defined. Tạo định dạng chung cho trang web. Tạo giao diện trang web canh giữa trình duyệt.

Tạo hiệu ứng đổi định dạng cho menu. Tạo khung viền bo tròn cho nội dung. Error! Bookmark not defined.2 CÂU HỎI, BÀI TẬP. Error! Bookmark not defined.2 BÀI 4: TÙY BIẾN GIAO DIỆN WEB VỚI CSS3.

Error! Bookmark not defined. Error! Bookmark not defined. Error! Bookmark not defined. Error! Bookmark not defined.

Error! Bookmark not defined. Error! Bookmark not defined.47 CÂU HỎI, BÀI TẬP .48 BÀI 5: XỬ LÝ TƢƠNG TÁC VỚI JAVASCRIPTS. Tổng quan Javascript. Sử dụng cấu trúc điểu khiển.

Sử dụng mảng và hàm .57 CÂU HỎI, BÀI TẬP .61 BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO. Template trong Dreamwaver. Đối tƣợng nâng cao trong Javascript .67 CÂU HỎI, BÀI TẬP .73 BÀI 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY. Tổng quan JQuery.

Thay đổi nội dung, thuộc tính. Xử lý sự kiện. Tạo hiệu ứng và hoạt ảnh .83 CÂU HỎI, BÀI TẬP .85 BÀI 8: PUBLISH WEBSITE. Đăng ký web hosting miễn phí .Error! Bookmark not defined.

Publish web lên web hosting miễn phí. Publish web lên local IIS .87 CÂU HỎI, BÀI TẬP .89 5 GIÁO TRÌNH MÔ ĐUN Tên mô đun: THIẾT KẾ TRANG WEB Mã mô đun: MĐ20 Thời gian thực hiện mô đun: 90 giờ (Lý thuyết: 30 giờ; thực hành, thí nghiệm, thảo luận, bài tập: 56 giờ; kiểm tra: 4 giờ) I.VỊ TRÍ, TÍNH CHẤT MÔ ĐUN: - Vị trí: Mô đun đƣợc bố trí sau khi sau khi sinh viên học xong các môn học Hệ quản trị Cơ sở dữ liệu, Cơ sở dữ liệu, đƣợc đào tạo cho trình độ cao đẳng nghề quản trị mạng máy tính. - Tính chất: Là mô đun đào tạo nghề bắt buộc. MỤC TIÊU MÔ ĐUN: - Định hƣớng đƣợc kết cách thiết kế Web site; - Thiết kế đƣợc giao diện ; - Lập trình cơ bản website; - Có khả năng sử dụng dụng các thẻ HTML; - Biết cách tổ chức thông tin trên trang chủ; - Sử dụng thành thạo các công cụ thiết kế Web; - Xây dựng đƣợc các ứng dụng Multimedia; - Cài đặt, cấu hình đƣợc dịch vụ IIS; - Có khả năng kết hợp với cơ sở dữ liệu để tạo ra các trang Web động.

- Bố trí làm việc khoa học đảm bảo an toàn cho ngƣời và phƣơng tiện 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 (giờ) Thực Số hành, thí Tên các bài trong mô đun Tổng Lý Kiểm TT nghiệm, số thuyết tra thảo luận, bài tập 1 Tổng quan về www – ngôn ngữ 5 2 3 HTML 1. Lịch sử www 2.

Nhập môn ngôn ngữ HTML 3. Trang và văn bản trên trang 4. Multimedia trên trang Web 2 Thiết kế web tĩnh 25 10 13 2 6 1. Trang và văn bản trên trang 3.

Multimedia trên trang Web 5. Các yếu tố động trên trang 6. Khung nhập-Form 7. Liên kết 3 Thiết kế web động 60 18 40 2 1.

Tổng quan về ASP.Net và ADO. Các đối tƣợng ASP. Các đối tƣợng ADO.Net Cộng 90 30 56 4 7 BÀI 1: MÔI TRƢỜNG TẠO TRANG WEB TĨNH DREAMWEAVER Mã môn: MĐ 20.1 Giới thiệu: Adobe DreamWeaver là ứng dụng thiết kế web đƣợc sử dụng phổ biến nhất hiện nay. Adobe DreamWeaver hỗ trợ các chức năng mạnh mẽ cho cả ngƣời thiết kế và lập trình web.

Mục tiêu:  Biết công dụng của từng thành phần trong DreamWeaver  Biết tạo và quản lý site  Biết quản lý nội dung trong site  Quản lý cẩn thận nội dung trong site, tránh xóa nhằm nội dung, site Nội dung chính: 1. Khởi động  Click đôi chuột lên biểu tƣợng Adobe DreamWeaver trên desktop  Vào Start  Programs  Adobe DreamWeaver Hình 1. Giao diện Adobe DreamWeaver 1. Quản lý các palette  Vào menu Window  Chọn/bỏ chọn để hiện/ẩn palette.

Vị trí hiển thị của các palette  Muốn mở rộng palette nào thì click chuột lên biểu tƣợng của palette đó  Click chuột lên biểu tƣợng để mở rộng tất cả palette 2. Quản lý các site Vào menu Site  Manage Sites. Xuất hiện hộp thoại quản lý các site. Hộp thoại Manage Sites 2.

Tạo site  Click chuột lên nút New Site  Đặt tên cho site, chọn ổ đĩa, thƣ mục chứa site rồi chọn Save trong hộp thoại Site Setup 10 Hình 1. Hộp thoại Site Setup 2. Xóa site  Trong hộp thoại Manage Site, chọn site cần xóa trong danh sách  Click chuột lên biểu tƣợng Delete the current selected sites ( ) 3. Quản lý nội dung trong site 3.

Cấu trúc site Mở rộng palette Files. Cấu trúc site cần tạo sẽ có nội dung nhƣ sau: Hình 1. Cấu trúc site 3. Các loại tập tin trong site  .html: trang web, tài liệu html  .gif: tập tin hình ảnh, dùng để chèn, định dạng nền cho trang web, thƣờng đƣợc đặt trong thƣ mục images  .css: tập tin định dạng cho trang web, thƣờng đƣợc đặt trong thƣ mục styles  .js: tập tin javascript, chứa các đoạn mã thực thi trên trình duyệt, thƣờng đƣợt đặt trong thƣ mục scripts 11 3.

Quản lý thƣ mục, tập tin  Yêu cầu: tạo 03 thƣ mục images, scripts, styles và tập tin index.html trong site  Các bƣớc thực hiện o Click chuột phải lên đối tƣợng chứa trong palette Files, chọn New Folder o Đặt tên cho folder cần tạo o Click chuột phải lên site, chọn New File, đặt tên cho tập tin cần tạo 4. Chọn vùng nhìn làm việc Hình 1. Các tùy chọn vùng nhìn làm việc  Click đôi chuột lên trang web cần thiết kế  Click chuột lên biểu tƣợng vùng nhìn cần chọn o Code: thiết kế trang bằng các thể HTML o Design: thiết kế trang bằng cách kéo thả các element vào trang web o Split: tách cửa sổ tài liệu thành 2 vùng nhìn Code và Design 5. Thẻ HTML cơ bản 5.

Tìm hiểu cấu trúc tài liệu HTML  Hầu hết các element bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng. Ví dụ: <body> … </body>  Nội dung đƣợc đặt giữa thẻ mở và thẻ đóng. Ví dụ: <p>Đây là đoạn văn bản</p>  Một số thẻ đặc biệt vừa mở và đóng o <br />: ngắt xuống dòng o <hr />: tạo đƣờng kẻ nằm ngang o <img … />: chèn ảnh (sẽ đƣợc tìm hiểu chi tiết ở phần sau)  Thuộc tính của element đƣợc đặt trong thẻ mở. o Ví dụ: <img src=“images/i1.jpg” /> o src: là thuộc tính o images/i1.jpg: giá trị của thuộc tính src.

o Giá trị của thuộc tính luôn đƣợc đặt trong cặp dấu nháy kép “”  Element nào đƣợc mở trƣớc thì phải đóng sau 5. Thiết kế trang web bằng các thẻ HTML cơ bản 5. META, LINK, STYLE, SCRIPT  META o Tạo từ khóa tìm kiếm o Tạo nội dung mô tả cho trang 12 5. TABLE, TR, TD, TH  TABLE: Tạo bảng  TR: Tạo dòng trong bản  TD: Tạo ô trong dòng  TH: Tƣơng tự TD nhƣng là ô tiêu đề, nội dung đƣợc tự động tô đậm và canh giữa ô Ví dụ: 5.

DIV, P, BR, HR  DIV: Chia vùng riêng, chiếm hết chiều ngang của vùng chứa Ví dụ:  P: Tạo đoạn văn bản Ví dụ: 13  BR: Ngắt xuống dòng trong đoạn văn bản  HR: Tạo đƣờng kẻ ngang Ví dụ: <hr /> 5. IMG, A  IMG: Chèn ảnh vào trang web Ví dụ:  A: Tạo liên kết đến trang web Ví dụ: 5. OL, UL, LI  OL: Tạo danh sách đánh số thứ tự  UL: Tạo danh sách không đánh số thứ tự  LI: Tạo mục trong danh sách Ví dụ: 14 5.