Ủ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ÔN HỌC THIẾT KẾ WEB NGÀNH, NGHỀ QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ TRUNG CẤP (Ban hành kèm theo Quyết định số 323/QĐ CĐCĐ ng[.]
Ủ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ƠN HỌC: THIẾT KẾ WEB NGÀNH, NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ: TRUNG CẤP (Ban hành kèm theo Quyết định số: 323/QĐ-CĐCĐ ngày 06 tháng năm 2019 Hiệu trƣởng trƣờng Cao đẳng Cộng đồng Đồng Tháp) Đồng Tháp, năm 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin đƣợc phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Mạng Internet coi tổ hợp Website, người sử dụng từ trang sang trang khác, tương tác với trang Web để hiển thị nội dung khác tùy thuộc theo yêu cầu Hiện nay, hầu hết tổ chức, công ty sử dụng Website để giới thiệu quảng bá sản phẩm, dịch vụ Việc thiết kế Website quan trọng, thể thương hiệu đẳng cấp công ty tổ chức Vì thế, thiết kế Website trở thành công việc nghề nhiều bạn trẻ ưa thích Giáo trình mơn học “ Thiết kế Web ” biên soạn dựa theo đề cương chi tiết mơn học Thiết kế Web thuộc chương trình đào tạo nghề Quản trị mạng trường Cao đẳng Cộng đồng Đồng Tháp Giáo trình cung cấp cho sinh viên ngành Quản trị mạng máy tính kiến thức thiết kế web : Các khái niệm thiết kế Web, quy trình thiết kế Web, thẻ HTML bản, công cụ phần mềm để thiết kế giao diện Web, lập trình với ngơn ngữ ASP.NET kết hợp với sở liệu để tạo trang Web động, Tuy có nhiều cố gắng q trình biên soạn cịn nhiều thiếu sót, chúng tơi mong nhận ý kiến đóng góp thầy cơ, đồng nghiệp bạn sinh viên để hồn thiện giáo trình ……, ngày … tháng … năm 202… Tham gia biên soạn MỤC LỤC LỜI GIỚI THIỆU Error! Bookmark not defined MỤC LỤC Error! Bookmark not defined CHƢƠNG 1: MÔI TRƢỜNG TẠO TRANG WEB TĨNH DREAMWAVER, THẺ HTML Giới thiệu Error! Bookmark not defined Quản lý site Error! Bookmark not defined.2 Quản lý nội dung site Error! Bookmark not defined.3 Chọn vùng nhìn Error! Bookmark not defined.4 Thẻ HTML Error! Bookmark not defined CÂU HỎI, BÀI TẬP Error! Bookmark not defined.9 CHƢƠNG 2: TẠO TRANG WEB BẰNG HTML5 21 Sử dụng thẻ ngữ nghĩa 21 Sử dụng thẻ HTML5 Form 22 Sử dụng HTML5 GraphicsSVG .24 Sử dụng HTML Media 26 CÂU HỎI, BÀI TẬP Error! Bookmark not defined.7 CHƢƠNG 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS 228 Giới thiệu CSS loại CSS Error! Bookmark not defined.8 Tạo sử dụng CSS Error! Bookmark not defined.9 Tạo định dạng chung cho trang web 30 Tạo giao diện trang web canh trình duyệt .30 Tạo hiệu ứng đổi định dạng cho menu 31 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 CHƢƠNG 4: TÙY BIẾN GIAO DIỆN WEB VỚI CSS3 22 Rounded Corners Error! Bookmark not defined Border Images Error! Bookmark not defined.4 Backgrounds Error! Bookmark not defined.5 Colors Error! Bookmark not defined.7 Gradients Error! Bookmark not defined.8 Shadows Error! Bookmark not defined.9 Text 41 Fonts 42 2D Transforms 42 10 3D Transforms 44 11 Transitions 46 12 Animations 47 13 Box Sizing .47 14 User Interface 47 CÂU HỎI, BÀI TẬP .48 CHƢƠNG 5: XỬ LÝ TƢƠNG TÁC VỚI JAVASCRIPTS 50 Tổng quan Javascript 50 Sử dụng cấu trúc điểu khiển 55 Sử dụng mảng hàm .57 CÂU HỎI, BÀI TẬP .61 CHƢƠNG 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO .4562 Template Dreamwaver 62 Navigation Menu .66 Đối tƣợng nâng cao Javascript 67 CÂU HỎI, BÀI TẬP .73 CHƢƠNG 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY 74 Tổng quan JQuery 74 Chọn element 75 Thay đổi nội dung, thuộc tính 77 Xử lý kiện 80 Tạo hiệu ứng hoạt ảnh 83 CÂU HỎI, BÀI TẬP .85 CHƢƠNG 8: PUBLISH WEBSITE 86 Đăng ký web hosting miễn phí Error! Bookmark not defined.86 Publish web lên web hosting miễn phí 86 Publish web lên local IIS 87 CÂU HỎI, BÀI TẬP .89 GIÁO TRÌNH MƠN HỌC Tên mơn học: THIẾT KẾ WEB Mã mơn học: MH25 Thời gian thực môn học: 45 ; (Lý thuyết: 15 giờ; Thực hành : 28 giờ, Kiểm tra : giờ) I Vị trí, tính chất mơn học: - Vị trí: Thiết kế web môn đƣợc học sau học xong môn Tin học ứng dụng, Mạng máy tính - Tính chất: Mơn học Thiết kế web môn học tự chọn chƣơng trình đào tạo Trung cấp Quản trị mạng máy tính II Mục tiêu mơn học: - Về kiến thức: + Hiểu khái niệm Internet, web + Biết bƣớc thiết kế website + Biết sử dụng phần mềm để thiết kế + Áp dụng ngôn ngữ HTML, CSS để xây dựng trang web tĩnh + Áp dụng Javascript vào xử lý Form - Về kỹ năng: + Thao tác đƣợc công cụ để xây dựng quản trị website + Thực thi quản lý, biên tập xây dựng phát triển Web - Về lực tự chủ trách nhiệm: Rèn luyện tác phong học tập nghiêm túc, làm việc khoa học, chuẩn xác III Nội dung môn học: Nội dung tổng quát phân bổ thời gian: Thời gian (giờ) Thực hành, Số TT Tên chƣơng, mục Tổng Lý Kiểm thínghiệm, thảo số thuyết tra luận, tập Chƣơng 1: Tổng quan Web 1 0 Chƣơng 2: Các thẻ HTML 19 12 Chƣơng 3:CSS (CascadingStyle Sheets) 4 Chƣơng 4: Javascript 17 12 Cộng 45 15 28 Nội dung môn học/mô đun: CHƢƠNG 1: MƠI TRƢỜNG TẠO TRANG WEB TĨNH DREAMWEAVER Mã mơn: MH25.1 Giới thiệu: Adobe DreamWeaver ứng dụng thiết kế web đƣợc sử dụng phổ biến Adobe DreamWeaver hỗ trợ chức mạnh mẽ cho ngƣời thiết kế lập trình web Mục tiêu: Biết công dụng thành phần DreamWeaver Biết tạo quản lý site Biết quản lý nội dung site Quản lý cẩn thận nội dung site, tránh xóa nhằm nội dung, site Nội dung chính: Giới thiệu 1.1 Khởi động Click đơi chuột lên biểu tƣợng Adobe DreamWeaver desktop Vào Start Programs Adobe DreamWeaver Hình 1.1 Giao diện Adobe DreamWeaver 1.2 Quản lý palette Vào menu Window Chọn/bỏ chọn để hiện/ẩn palette Hình 1.2 Vị trí hiển thị palette Muốn mở rộng palette click chuột lên biểu tƣợng palette Click chuột lên biểu tƣợng để mở rộng tất palette Quản lý site Vào menu Site Manage Sites Xuất hộp thoại quản lý site Hình 1.3 Hộp thoại Manage Sites 2.1 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 chọn Save hộp thoại Site Setup Hình 1.4 Hộp thoại Site Setup 2.2 Xóa site Trong hộp thoại Manage Site, chọn site cần xóa danh sách Click chuột lên biểu tƣợng Delete the current selected sites ( ) Quản lý nội dung site 3.1 Cấu trúc site Mở rộng palette Files Cấu trúc site cần tạo có nội dung nhƣ sau: Hình 1.5 Cấu trúc site 3.2 Các loại tập tin site htm, html: trang web, tài liệu html jpg, png, gif: tập tin hình ảnh, dùng để chèn, định dạng cho trang web, thƣờng đƣợc đặt thƣ mục images css: tập tin định dạng cho trang web, thƣờng đƣợc đặt thƣ mục styles js: tập tin javascript, chứa đoạn mã thực thi trình duyệt, thƣờng đƣợt đặt thƣ mục scripts 3.3 Quản lý thƣ mục, tập tin Yêu cầu: tạo 03 thƣ mục images, scripts, styles tập tin index.html site Các bƣớc thực o Click chuột phải lên đối tƣợng chứa 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 Chọn vùng nhìn làm việc Hình 1.6 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 thể HTML o Design: thiết kế trang cách kéo thả element vào trang web o Split: tách cửa sổ tài liệu thành vùng nhìn Code Design Thẻ HTML 5.1 Tìm hiểu cấu trúc tài liệu HTML Hầu hết element bắt đầu thẻ mở kết thúc thẻ đóng Ví dụ: … Nội dung đƣợc đặt thẻ mở thẻ đóng Ví dụ:Đây đoạn văn bản
Một số thẻ đặc biệt vừa mở đóng o : ngắt xuống dịng o : tạo đƣờng kẻ nằm ngang o : chèn ảnh (sẽ đƣợc tìm hiểu chi tiết phần sau) Thuộc tính element đƣợc đặt thẻ mở o o o o Ví dụ: src: thuộc tính images/i1.jpg: giá trị thuộc tính src Giá trị thuộc tính ln đƣợc đặt cặp dấu nháy kép “” Element đƣợc mở trƣớc phải đóng sau 5.2 Thiết kế trang web thẻ HTML 5.2.1 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 10 5.2.2 TABLE, TR, TD, TH TABLE: Tạo bảng TR: Tạo dịng TD: Tạo dịng TH: Tƣơng tự TD nhƣng ô tiêu đề, nội dung đƣợc tự động tô đậm canh ô Ví dụ: 5.2.3 DIV, P, BR, HR DIV: Chia vùng riêng, chiếm hết chiều ngang vùng chứa Ví dụ: P: Tạo đoạn văn Ví dụ: 11 BR: Ngắt xuống dòng đoạn văn HR: Tạo đƣờng kẻ ngang Ví dụ: 5.2.4 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.2.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 danh sách Ví dụ: 12 5.2.6 FORM, INPUT, SELECT, OPTION FORM: Tạo form cho ngƣời truy cập nhập thông tin vào trang web INPUT: Tạo điều khiển cho phép ngƣời dùng nhập/chọn liệu, đặt FORM SELECT: Tạo danh sách chọn OPTION: Tạo mục danh sách chọn Ví dụ: CÂU HỎI, BÀI TẬP 1.1 Thiết kế trang web theo mẫu: tạo layout cho TrangChu.html 13 14 2.2 Tạo form điều khiển form YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Đúng cấu trúc tài liệu HTML Đúng quy tắc: mở trƣớc, đóng sau Giao diện đăng ký phải đƣợc đặt form 15 CHƢƠNG 2: TẠO TRANG WEB BẰNG HTML5 Mã môn: MH25.2 Giới thiệu: HTML5 phiên HTML, hỗ trợ element ngữ nghĩa rõ ràng Với HTML5, trang web đƣợc thiết kế với số lƣợng element hơn, rõ ràng hơn, chèn multimedia đơn giản Mục tiêu: Biết công dụng tag HTML5 Bố cục, thiết kế đƣợc trang web HTML5 Cẩn thận, an tồn Nội dung chính: Sử dụng thẻ ngữ nghĩa section: định nghĩa vùng tài liệu Ví dụ: article: định nghĩa viết (bài forum, blog, báo) Ví dụ: nav, menu: định nghĩa vùng chứa navigation (thƣờng gọi menu) trang Ví dụ: header: định nghĩa vùng header (banner) trang/bài viết Ví dụ: 16 footer: định nghĩa vùng cuối trang (thông tin liên hệ, quyền) Ví dụ: Sử dụng thẻ HTML5 FORM datalist, keygen, output Các type input FORM o color: chọn màu o date: chọn ngày o time: chọn 17 o email: nhập email o month: chọn tháng, năm o week: chọn tuần năm o number: chọn số o range: chọn giá trị vùng giới hạn Sử dụng HTML Graphics SVG 1.1 SVG gì? SVG viết tắt Scalable Vector Graphics, định dạng hình ảnh (tƣơng tự nhƣ JPG, PNG, mà thƣờng dùng) 18 SVG đƣợc sử dụng để vẽ đồ họa 2D ứng dụng đồ họa website, phần lớn hữu ích cho sơ đồ kiểu vecto nhƣ biểu đồ Pie, đồ thị hai chiều hệ tọa độ X, Y SVG chuẩn thức tổ chức web giới W3C Ƣu điểm Hình ảnh SVG phóng to nhƣng khơng vỡ ảnh Hình ảnh SVG đƣợc in với chất lƣợng cao độ phân giải Hình ảnh SVG đƣợc tạo chỉnh sửa javascript Hình ảnh SVG tìm kiếm, đánh mục, nén,… Hình ảnh SVG chuyển động sử dụng thành phần animation xây dựng sẵn Hình ảnh SVG chứa liên kết đến tài liệu khác SVG hầu nhƣ đƣợc hỗ trợ tất trình duyệt Phần tử HTML vùng chứa để vẽ đồ họa SVG có vài phƣơng thức để vẽ nhƣ: đƣờng thẳng, hình hộp, hình trịn, văn hình ảnh đồ họa 3.2 Vẽ đƣờng tròn SVG Để vẽ đƣờng tròn ta dùng thẻ Các thuộc tính là: cx: vị trí tâm, tính từ mép trái SVG cy: vị trí tâm, tính từ mép r: bán kính fill: xác định màu tô stroke: đƣờng biên 3.3 Vẽ hình ellipse SVG 19 Để vẽ hình ellipse ta sử dụng thẻ Các tham số tƣơng tự vẽ hình trịn, thêm hai thuộc tính: rx: bán kính từ tâm đến mép bên trái ry: bán kính từ tâm đến mép phía Sử dụng HTML Media Các đặc trƣng HTML5, bao gồm hỗ trợ audio video tự nhiên mà không cần Flash Thẻ HTML5 làm đơn giản để thêm đa phƣơng tiện tới Website Bạn cần thiết lập thuộc tính src để nhận diện nguồn phƣơng tiện bao gồm thuộc tính control để ngƣời sử dụng chơi dừng đa phƣơng tiện 4.1 Nhúng video Một phần tử video cho phép nhiều phần tử source trình duyệt sử dụng định dạng đƣợc nhận đầu tiên: Ví dụ: play video cho 20 ... ngành Quản trị mạng máy tính kiến thức thiết kế web : Các khái niệm thiết kế Web, quy trình thiết kế Web, thẻ HTML bản, công cụ phần mềm để thiết kế giao diện Web, lập trình với ngơn ngữ ASP.NET kết... trình mơn học “ Thiết kế Web ” biên soạn dựa theo đề cương chi tiết mơn học Thiết kế Web thuộc chương trình đào tạo nghề Quản trị mạng trường Cao đẳng Cộng đồng Đồng Tháp Giáo trình cung cấp cho... tính chất mơn học: - Vị trí: Thiết kế web môn đƣợc học sau học xong môn Tin học ứng dụng, Mạng máy tính - Tính chất: Mơn học Thiết kế web môn học tự chọn chƣơng trình đào tạo Trung cấp Quản trị