Giáo trình Thiết kế trang web (Nghề Quản trị mạng máy tính Cao đẳ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Ơ Đ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 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 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 BÀI 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 để chúng tơi 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 BÀI 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 BÀI 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 BÀI 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS 248 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 BÀI 4: TÙY BIẾN GIAO DIỆN WEB VỚI CSS3 24 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 BÀI 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 BÀI 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO 4762 Template Dreamwaver 62 Navigation Menu .66 Đối tƣợng nâng cao 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 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 BÀI 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Ơ ĐUN Tên mơ đun: THIẾT KẾ TRANG WEB Mã mô đun: MĐ20 Thời gian thực mô đun: 90 (Lý thuyết: 30 giờ; thực hành, thí nghiệm, thảo luận, tập: 56 giờ; kiểm tra: giờ) I.VỊ TRÍ, TÍNH CHẤT MƠ ĐUN: - Vị trí: Mơ đun đƣợc bố trí sau sau sinh viên học xong môn học Hệ quản trị Cơ sở liệu, Cơ sở 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 II 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 website; - Có khả sử dụng dụng thẻ HTML; - Biết cách tổ chức thông tin trang chủ; - Sử dụng thành thạo công cụ thiết kế Web; - Xây dựng đƣợc ứng dụng Multimedia; - Cài đặt, cấu hình đƣợc dịch vụ IIS; - Có khả kết hợp với sở liệu để tạo trang Web động - Bố trí làm việc khoa học đảm bảo an toàn cho ngƣời phƣơng tiện học tập III NỘI DUNG MÔ ĐUN Nội dung tổng quát phân phối thời gian : Thời gian (giờ) Số TT Thực hành, thí Tổng Lý nghiệm, số thuyết thảo luận, tập Tên mô đun Tổng quan www – ngôn ngữ HTML 25 10 13 Lịch sử www Nhập môn ngôn ngữ HTML Trang văn trang Bảng biểu(Table) trang khung(Frame) Multimedia trang Web Thiết kế web tĩnh Kiểm tra Tổng quan Trang văn trang Bảng biểu(Table) trang khung(Frame) Multimedia trang Web Các yếu tố động trang Khung nhập-Form Liên kết Thiết kế web động Tổng quan ASP.Net ADO.Net Các đối tƣợng ASP.Net Các đối tƣợng ADO.Net Cộng 60 18 40 90 30 56 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 ứ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 10 72 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: 73 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 74 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 75 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 76 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ỏ 77  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) 78  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) 79 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) 80 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 quát: 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 81 BÀI 8: PUBLISH WEBSITE Mã môn: MĐ 20.8 Giới thiệu: Là 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 82 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 83 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 84 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 85 TÀI LIỆU THAM KHẢO [1] http://w3schools.com 86 ... 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... 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 BÀI 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ữ HTML Trang văn trang Bảng biểu(Table) trang khung(Frame) Multimedia trang Web Thiết kế web tĩnh Kiểm tra Tổng quan Trang văn trang Bảng biểu(Table) trang khung(Frame) Multimedia trang Web Các