THÔNG TIN 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Ơ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 70 2.3 Form selector 2.4 Chọn theo thuộc tính Thay đổi nội dung, thuộc tính 3.1 Duyệt danh sách element Cách 1: 71 Cách 2: 3.2 Tạo element 3.3 Đọc, thay đổi nội dung element Đọc nội dung text Đọc nội dung html Thay đổi nội dung text Thay đổi nội dung html 72 3.4 Đọc, thay đổi thuộc tính Đọc giá trị thuộc tính Thay đổi giá trị thuộc tính 3.5 Chèn nội dung append: chèn nội dung vào cuối element prepend: chèn nội dung vào đầu element after: chèn nội dung vào sau element before: chèn nội dung vào trƣớc element Ví dụ: 3.6 Làm việc với CSS Thêm/xóa giá trị thuộc tính class o addClass: thêm nhiều class o removeClass: xóa nhiều class o toggleClass: lần lƣợt thêm/xóa class Ví dụ: Sử dụng phƣơng thức css 73 3.7 Thay đổi kích thƣớc Các phƣơng thức thay đổi kích thƣớc width() height() innerWidth() innerHeight() outerWidth() outerHeight() Hình 8.1 jQuery dimensions Ví dụ: Xử lý kiện 4.1 Quy tắc chung 74 Ví dụ 1: Ví dụ 2: 4.2 Xử lý số kiện thƣờng gặp ready: document đƣợc tải focus: control form nhận đƣợc trỏ blur: control form khơng cịn chiếm trỏ keypress: nhấn phím control nhận trỏ 75 change click: click chuột mousehover: trỏ chuột element mouseout: trỏ chuột di chuyển khỏi element 4.3 Xử lý đối tƣợng Event Trong mục 5.2, xây dựng hàm xử lý cho kiện mà không dùng đến tham số kiện Hàm xử lý kiện đầy đủ phải có tham số kiện Vị trí tƣơng đối trỏ chuột (event.pageX, event.pageY) 76 Loại kiện (event.type) Cho biết phím (hoặc nút chuột) đƣợc nhấn (event.which) Tạo hiệu ứng hoạt ảnh 5.1 Ẩn, Ẩn Hiện: tƣơng tự nhƣ ẩn, thay hide show Ẩn chuyển sang hiện, chuyển sang ẩn (toggle) 77 5.2 Fade-in, Fade-out Hiện lên (fadeIn) Ẩn xuống (fadeOut): tƣơng tự lên, thay fadeIn fadeOut Ẩn chuyển sang hiện, chuyển sang ẩn (fadeToggle) 78 5.3 Sliding Cách dùng tham số: speed, easing, callback tƣơng tự nhƣ mục 5.1 5.2 5.4 Tạo hoạt hình Cấu trúc tổng qt: Trong đó: speed, easing callback tham số tùy chọn Ví dụ: CÂU HỎI, BÀI TẬP 7.1 Thiết kế trang web thay đổi màu ngẫu nhiên cho đoạn văn click chuột lên nút 7.2 Thiết kế trang web tự động thêm đƣờng kẻ ngang (màu ngẫu nhiên) click chuột lên nút 7.3 Thiết kế trang web hiển thị danh sách HSSV (Mã HSSV, Họ lót, Tên, Giới tính, Năm sinh) Khi click chuột lên nút “Thêm” chèn dịng cuối bảng (có input cho ngƣời dùng nhập thông tin) Sau nhập thông tin, ngƣời dùng click chuột lên nút “Ghi” hiển thị thơng tin nhập dịng vừa chè (các input khơng cịn) U CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Dùng jQuery Lập trình thay đổi nội dung, thuộc tính element Lập trình thêm, xóa element 79 CHƢƠNG 8: PUBLISH WEBSITE Mã mơn: MH25.8 Giới thiệu: Là q trình đƣa website đƣợc thiết kế xong máy tính cục bạn lên môi trƣờng mạng thực , tƣơng tác với ngƣời dùng thực Mục tiêu: Làm việc với bƣớc xuất website Quảng bá website Bảo trì website Nội dung chính: Đăng ký web hosting miễn phí 1.1 Giới thiệu Xuất website đƣợc chia thành nhiều bƣớc: Lựa chọn tên miền Lựa chọn web server Uploadn website Cập nhật chỉnh sửa website Quảng bá website 1.2 Lựa chọn tên miền Publish web lên web hosting miễn phí Bƣớc 1: Đăng ký tài khoản Hostinger: http://www.hostinger.vn/order 80 Bƣớc 2: Điền đầy đủ thông tin bấm vào tạo tài khoản Bƣớc 3: Vào Email để xác nhận tài khoản Truy cập vào đƣờng dẫn trên, sau nhấp vào nút đăng kí bảng Free Ngay sau danh sách tài khoản xuất tài khoản bạn vừa tạo Chú ý: thơng thường phải 3h để tên miền truy cập Để truy cập vào trang quản lý tài khoản hosting gắn với tên miền bạn nhìn sang bên phải tên miền trên, chọn ” Chuyển” Thông tin website nhƣ thông số cài đặt 81 Publish lên web local IIS IIS – Inernet Infomation Service phần mở rộng Microsoft, sử dụng Windows NT IIS đƣợc dùng để triển khai dịch vụ HTTP, HTTPS, FTP, FTTPS, SMTP NNTP Trong tìm hiểu bƣớc để thiết lập web server với IIS Mặc định, IIS khơng đƣợc tích hợp sẵn, cần sử dụng, ngƣời dùng ngƣời quản trị phải cài đặt thêm thành phần IIS đƣợc cài đặt Windows Server Windows Client nhƣ Windows 7, Windows 8, Windows 10… Các bƣớc thực hiện: Bƣớc 1: Mở Internet Information Services Manager Hình 8.1: Mở rộng menu dạng bạn thấy Default Web Site Bƣớc 2: Ở bên phải IIS Manager, xem phần Browse Website Nhấp vào Browse *:80 (http) Trang web mặc định mở trình duyệt web mặc định 82 Hình 8.2: Nhấp vào Browse *:80 (http) Sẽ thấy trang web nhƣ sau Lƣu ý địa có nội dung localhost Đó địa để nhập vào trang web Hình 8.3: Địa để nhập vào trang web CÂU HỎI, BÀI TẬP 8.1 Kiểm tra cài đặt IIS máy tính 8.2 Publish website lên IIS 83 TÀI LIỆU THAM KHẢO [1] http://w3schools.com 84 ... 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... 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ị. .. 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
Ngày đăng: 27/10/2022, 04:10
Xem thêm: