Tài liệu hướng dẫn thực hành học phần Thiết kế và Lập trình Web với mục đích: Cung cấp nguồn tài liệu hỗ trợ giảng viên trong việc giảng dạy học phần; Hỗ trợ sinh viên học tập học phần một cách hiệu quả. Mời các bạn cùng tham khảo nội dung phần 1 tài liệu dưới đây.
Ủ NN TR ỜN TÀI LIỆU N N TỈN ĐẠI ỌC T Ủ ẦU MỘT ỚN N ẪN T ỰC T IẾT KẾ VÀ LẬP TR N N U ỄN N ÀN WE ỮU VĨN VÕ QUỐC L NĂM 2017 N Ủ NN TR ỜN TÀI LIỆU N N TỈN ĐẠI ỌC T Ủ ẦU MỘT ỚN N ẪN T ỰC T IẾT KẾ VÀ LẬP TR N N U ỄN N ÀN WE ỮU VĨN VÕ QUỐC L NĂM 2017 N MỤC LỤC IỚI T IỆU C N N ÔN N Ữ TML 1.1 Mục tiêu 1.2 Yêu cầu chung 1.3 Bài tập thực hành Bài tập Thiết kế trang Gioithieu.html Bài tập Thiết kế trang Left.html 10 Bài tập Thiết kế trang Sanpham.html 11 Bài tập Thiết kế trang Chitietsanpham.html 12 Bài tập Thiết kế trang Dangnhap.html 13 Bài tập Thiết kế trang Dangky.html 15 Bài tập Thiết kế trang Right.html 17 Bài tập Thiết kế trang Header.html 19 Bài tập Thiết kế trang Nav.html 20 Bài tập 10 Thiết kế trang Trangchu.html 20 1.4 Bài tập áp dụng 24 C N N ÔN N Ữ CSS 25 2.1 Mục tiêu 25 2.2 Bài tập thực hành 25 Bài tập Định dạng phần Header 26 Bài tập Định dạng phần Nav 27 Bài tập Định dạng phần Body 30 Bài tập Định dạng phần Footer 37 Bài tập Định dạng trang Dangky.html 37 2.3 Bài tập áp dụng 38 C N N ÔN N Ữ J V SCRIPT 39 3.1 Mục tiêu 39 3.2 Bài tập thực hành 39 Bài tập Tạo trang Hello.html 39 Bài tập Tạo trang Time.html 40 Bài tập Kiểm tra thông tin trang Dangky.html 41 Bài tập Tạo calendar 44 Bài tập Tạo Slider chuyển hình 48 3.3 Bài tập áp dụng 50 C N N ÔN N Ữ SP.NET 51 4.1 Mục tiêu 51 4.2 Tài nguyên sử dụng 51 4.3 Bài tập thực hành 55 Bài tập Tạo Website xây dựng lớp xử lý liệu 55 Bài tập Tạo User Control MasterPage 58 Bài tập Xây dựng trang hiển thị thông tin sách 65 Bài tập Xây dựng trang Đăng nhập, Đổi mật khẩu, Đăng ký 69 Bài tập Xây dựng trang xử lý giao dịch mua hàng 77 Bài tập Xây dựng trang quản trị 89 4.4 Bài tập áp dụng 100 TÀI LIỆU T M K ẢO 101 IỚI T IỆU Chúng biên soạn tài liệu hướng dẫn thực hành học phần Thiết kế Lập trình Web với mục đích: Cung cấp nguồn tài liệu hỗ trợ giảng viên việc giảng dạy học phần Hỗ trợ sinh viên học tập học phần cách hiệu Tài liệu phân bố làm chương: Chương - Ngôn ngữ HTML (HyperText Markup Language): Trình bày dạng tập để sinh viên hình thành kỹ thiết kết trang Web với thẻ HTML Các tập theo cấu trúc Website để sinh viên có nhìn tổng quan trình thiết kế Website Chương - Ngôn ngữ CSS (Cascading Style Sheets): Áp dụng ngôn ngữ CSS vào việc định dạng tập Chương Giúp sinh viên sử dụng ngôn ngữ CSS để định dạng trang Web Chương - Ngôn ngữ JAVASCRIPT: Trình bày số tập có sử dụng ngôn ngữ Javascript để điều khiển số hành vi trang Chương - Ngôn ngữ ASP.NET: Hệ thống tập tổng hợp trang trình thiết kế HTML chuyển qua ASP.NET phát triển thêm số trang để hoàn thiện website Mỗi phần tập theo trình tự từ thiết kế trang tổng thể tới trang chi tiết Giúp sinh viên nắm quy trình thiết kế lập trình Website ngơn ngữ ASP.NET Trong phạm vi hạn hẹp tài liệu đề cập tất vấn đề lĩnh vực Thiết kế Lập trình Web địi hỏi Nhóm tác giả mong muốn nhận góp ý độc giả để tài liệu hoàn thiện tốt Mùa thu 2017 Nhóm tác giả C N N ÔN N Ữ TML 1.1 Mục tiêu Thiết kế giao diện trang Web với thẻ HTML 1.2 cầu chung Tạo cấu trúc thư mục lưu trữ Web sau: Mỗi thư mục lưu định dạng file tương ứng Hình ảnh sử dụng để làm tập cung cấp sẵn địa https://tinyurl.com/TKvaLTWeb Sử dụng phần mềm thiết kế Website (Notepad, Dreamweaver, Sublime text, Atom, …) Các tập lưu vào thư mục BaitapHTML 1.3 ài tập thực hành Bài tập phần kết hợp với định dạng CSS (phần hướng dẫn Chương 2) để thực trang: Trangchu.html: Được tách thành phần riêng (mỗi phần tập chương này) kết hợp lại Bài tập 10 Header (Bài tập 8) Nav (Bài tập 9) Left (Bài tập 2) Right (Bài tập 7) Sanpham (Bài tập 3) Footer (Bài tập 10) Gioithieu.html, Dangky.html, Dangnhap.html, Chitietsanpham.html: Tương ứng tập 1, 4, 5, Các trang hoàn thiện hiển thị vùng Sanpham (Hình trên) để tạo thành Website với trang có bố cục thống ài tập Thiết kế trang Gioithieu.html Ý nghĩa sử dụng: Là trang giới thiệu công ty chủ quản Website cầu: Đoạn văn 1: Size 6, in đậm, canh lề Khi click chuột vào www.abc.com liên kết đến trang chủ website này, click chuột vào hotro@abc.com liên kết cho gửi email tới địa này, click chuột vào Liên hệ liên kết tới trang liên hệ (Lienhe.html) Đoạn văn “Nguyên tắc hoạt động”: Size 5, in đậm, màu đỏ Đoạn văn “Định hướng kinh doanh: Size 5, in đậm, màu xanh Dùng thẻ ul, ol để tạo danh sách có thứ tự khơng có thứ tự cho nội dung văn ướng dẫn: Tạo file lưu với tên Gioithieu.html Tạo cặp thẻ quy định phần trang web: Nhà sách ABC Tạo nội dung cho trang (trong cặp thẻ body): Dùng thẻ h2 với thuộc tính align="center" (hoặc thẻ p kết hợp với thẻ font với thuộc tính size (quy định cỡ chữ) thẻ b (in đậm)) cho đoạn văn 1: GIỚI THIỆU CÔNG TY CỔ PHẦN THƢƠNG MẠI VÀ DỊCH VỤ SÁCH ABC Dùng thẻ p kết hợp thẻ b thẻ a để định dạng tạo liên kết cho đoạn 2:Cty Cổ phần Thƣơng Mại Dịch vụ sách ABC số cơng ty Thƣơng mại điện tử Việt Nam bắt đầu với Website www.abc.com từ tháng 12/2005.
Tương tự dùng thẻ p kết hợp thẻ b font với thuộc tính color để tạo đoạn “Nguyên tắc hoạt động” “Định hướng kinh doanh:NGUYÊN TẮC HOẠT ĐỘNG
ĐỊNH HƢỚNG KINH DOANH
Dùng thẻ ul ol để tạo danh sách:- Tuyệt đối tôn trọng quyền luật xuất bản
- Cam kết tạo sách có chất lƣợng, có giá trị, ln bắt kịp xu thời đại
- Lấy độc giả làm trung tâm
- Gia tăng lợi ích cho đối tác
- Khơi dậy phát huy khả sáng tạo cá nhân
- Mua quyền, dịch xuất ấn phẩm từ tiếng nƣớc tiếng Việt ngƣợc lại với tủ sách:
- V- Biz: Những sách cung cấp cách tƣ duy, kinh nghiệm, kĩ mang tính ứng dụng cao cho nhà lãnh đạo, ngƣời hoạt động lĩnh vực kinh doanh, nhân viên công sở,…
- V-Buddism: Tủ sách Phật pháp ứng dụng Thaihabooks nhận đƣợc quan tâm, tin tƣởng Phật tử bạn đọc Các sách mang lại triết lý sâu sắc nhà Phật nhƣng gắn liên với sống hàng ngày, giúp ngƣời sống hạnh phúc có ý nghĩa hơn.
- V-Parents: Những sách giúp bậc cha mẹ nuôi dạy tốt hơn, thấu hiểu dựa tƣ vấn chuyên gia hàng đầu Việt Nam giới.
- V-Teen: Những sách giúp tháo gỡ vƣớng mắc, khơi dậy tiềm năng, định hƣớng nghề nghiệp cho tuổi lớn.
- V-Smile: Bao gồm sách chủ đề văn hoá, văn học, giáo dục, lịch sử, du ký… làm phong phú thêm đời sống tinh thần, bổ sung kiến thức chuyên sâu nhiều lĩnh vực sống cho bạn đọc
- Cung cấp dịch vụ liên quan đến quyền xuất bản Dùng thẻ p cấu trúc nội dung bên thẻ footer:
- Ngoại ngữ
©2016 - Nhà sách ABC Allright Reserved
Website phát triển để sử dụng làm tập thực hành môn Thiết kế Lập trình Web
Email: abc.thudaumotuniversity@gmail.com
1.4 ài tập áp dụng Sinh viên tự tìm chủ đề (lĩnh vực cần có website để giới thiệu, quản lý) thiết kế Website cho chủ đề với yêu cầu: Tạo thư mục MyWebsite, thư mục tạo thư mục Images, Styles, JS Sưu tập xử lý hình ảnh sử dụng cho việc thiết kế trang (lưu vào thư mục Images) Dùng thẻ cấu trúc trang (div, header, footer, article, section, aside), thiết kế giao diện trang chủ (lưu thư mục MyWebsite) Tạo trang hiển thị tin tức (sản phẩm) theo nhóm, trang liên hệ, trang đăng ký, trang đăng nhập, Chú ý: Nên chọn chủ đề để xây dựng phát triển thành đồ án cuối kỳ cho học phần Cần tham khảo số Website với chức tương ứng để biết cách thiết kế 24 C N N ÔN N Ữ CSS 2.1 Mục tiêu Định dạng trang Web ngôn ngữ CSS 2.2 ài tập thực hành Sinh viên sử dụng tài nguyên làm Chương để phát triển tiếp Chương Hãy tạo file Style.css thư mục Script chèn vào trang Trangchu.html Bài tập 10 (Chương 1) để định dạng cho trang này: Kết Trangchu.html cần đạt sau định dạng: 25 ài tập Định dạng phần Header cầu: Quy định độ rộng cho phần thẻ header 1200px hiển thị trình duyệt Định dạng cho phần hình logo hiển thị bên trái phần Đăng nhập, Đăng ký, hiển thị bên phải ướng dẫn: Thêm thuộc tính id cho thẻ div chứa hình logo id cho thẻ div chứa nội dung Đăng nhập, Để tránh khoảng cách mặc định thẻ trình duyệt sinh cần thiết lập thuộc tính margin padding 0px cho tất thẻ: *{ margin:0px; padding:0px; } Thiết lập độ rộng canh lề cho phần header: header{ width:1200px; margin:0px auto; } Chuyển thẻ sang trái sang phải: div#logo{ float:left; ;//Thêm số định dạng cần thiết } div#dn{ float:right; ;//Thêm số định dạng cần thiết } 26 Định dạng màu chữ, font chữ, cỡ chữ, in đậm cho nội dung thẻ liên kết phần : div#dn a{ font-family:Verdana, Geneva, sans-serif; font-size:13px; font-weight:bold; color:#000; } Đặt thuộc tính thay đổi màu chữ rê chuột vào liên kết: header div#dn a:hover{ color:#900; } ài tập Định dạng phần Nav cầu: Định dạng màu cho thẻ nav, độ rộng thẻ thay đổi theo độ rộng trình duyệt Phần nội dung thẻ giới hạn độ rộng 1200px, hiển thị Quy định thẻ ul hiển thị bên trái thẻ div chứa nội dung tìm kiếm hiển thị bên phải Đưa thẻ li ul lên hàng bỏ bullet trước li Nội dung thẻ li xuất gạch chân rê chuột vào Một số định dạng khác theo hình mẫu ướng dẫn: Thêm thẻ div thẻ nav để chứa nội dung thẻ nav đặt id cho thẻ div này: Thiết lập thuộc tính css để định dạng: 27 Ngăn khơng cho thẻ nav trôi lên phần trống thẻ header thuộc tính clear, thiết lập màu chiều cao cho thẻ nav: nav{ clear:both; background-color:#79B22F; height:45px; } Quy định độ rộng canh cho nội dung thẻ nav: nav div#subnav{ width:1200px; margin:0px auto; } Chuyển thẻ ul sang trái, bỏ bullet cho mục thẻ ul, chuyển mục li lên hàng thiết lập thêm số thuộc tính margin padding: nav ul{ float:left; list-style:none; margin-left:50px; } nav ul li{ float:left; padding:11px 15px; } Thiết lập font chữ, màu chữ, cỡ chữ, in đậm bỏ đường gạch chân (do liên kết tạo ra) cho văn thẻ a mục li: nav ul li a{ color:#206AB5; font-size:16px; font-family:Arial; text-decoration:none; font-weight:bold; } Thiết lập thuộc tính để rê chuột vào thẻ li xuất đường gạch chân: nav ul li:hover a{ 28 border-bottom:5px solid #206AB5; } Đưa thẻ div (chứa nội dung tìm kiếm) sang phải thuộc tính float, thiết lập màu nền, kích thước, khung viền khoảng cách cần thiết: nav div#subnav>div{ float:right; background-color:white; padding-left:10px; margin-top:5px; margin-right:5px; height:34px; width:380px; border:0.5px solid #CED2DD; border-radius:5px; } Định dạng cho nội dung thẻ div tìm kiếm: nav div#subnav>div input[type=text] { float:left; height:29px; width:250px; font-size:14px; border:none; } nav div#subnav>div input[type=submit] { float:right; height:100%; width:80px; background:#F7F2E7; border-top-right-radius:5px; border-bottom-right-radius:5px; border-left:0.5px solid #CED2DD; font-size:14px; } Thiết lập thuộc tính rê chuột vào nút Tìm sách trỏ chuột chuyển sang hình bàn tay: nav div#subnav>div input[type=submit]:hover{ 29 cursor:pointer; } ài tập Định dạng phần Body cầu: Quy định độ rộng thẻ div bao phần nội dung trang 1200px hiển thị giữa, định dạng màu đổ bóng Trong thẻ article quy định vùng hiển thị cho phần Left bên trái, Sản phẩm Right bên phải Thêm nội dung “Sách mới” trước sản phẩm thiết lập màu chuyển màu Phần Sản phẩm tạo thêm sản phẩm để có sản phẩm trang Thiết lập định dạng chung cho sản phẩm (theo hình mẫu), rê chuột lên hình sản phẩm hình di chuyển lớn lên ướng dẫn: 30 Đặt id cho thẻ div chứa nội dung phần thân trang (), id cho thẻ aside (id="left", id="right") để phân biệt hai vùng Quy định độ rộng, màu nền, đổ bóng canh cho nội dung thẻ : div#body{ width:1200px; margin:0px auto; background-color:#edeaea; box-shadow: 4px 8px rgba(0, 0, 0, 0.2), 6px 20px rgba(0, 0, 0, 0.19); } Quy định độ rộng vùng hiển thị cho thẻ aside thẻ section: article{ display:table-row; } aside#left, aside#right, section{ display:table-cell; vertical-align:top; } aside#left{ width:240px; } section{ width:750px; padding:0px 8px; } aside#right{ width:200px; } Định dạng chi tiết cho phần nội dung thẻ : Thêm thẻ div bao nội dung “Sách theo chủ đề” “Sách theo nhà xuất bản”, xóa thẻ b thẻ p (sẽ dùng thuộc tính font-weight để thay thế): 31SÁCH THEO CHỦ ĐỀ
Sách mới
Hướng Dẫn Tự Học Photoshop CS (Photoshop 6.0)
Đơn giá: 50,000 VNĐ
Chép thẻ div thành năm thẻ sửa lại sách với nội dung tùy ý Thiết lập định dạng cho khối div thẻ : section>p{ /*Định dạng chuyển màu cho thẻ p*/ background: linear-gradient(#a5b4c4, #206AB5, #206AB5); border-top-left-radius:2px; border-top-right-radius:2px; text-align:center; font-size:16px; font-weight:bold; color:white; height:25px; padding-top:5px; } sach{ width:240px; height:320px; 35 background-color:#c7e5f2; margin:3px; border-radius:5px; border:1px dashed #79B22F; text-align:center; float:left; } tensach { margin-top:5px; vertical-align:top; height: 40px; } tensach a{ font-weight:bold; color:#133a62; font-size:14px; } tensach a:hover{ font-style:italic; } hinhsach{ box-shadow: 4px 8px rgba(0, 0, 0, 0.2), 6px 20px rgba(0, 0, 0, 0.19); width:150px; height:200px; /*Các thuộc tính dùng để tạo hiểu ứng transform*/ transition:all 0.5s ease; } /*Tăng kích thước hình lên 1.1 rê chuột vào*/ hinhsach:hover{ transform: scale(1.1); } dongia { margin-top:10px; font-size:15px; 36 } gia{ color:red; font-weight:bold; } nutchonmua { margin:7px 0px; height:30px; } ài tập Định dạng phần Footer cầu: Thiết lập chiều cao cho khối footer 100px Văn canh lề ướng dẫn: Định dạng màu cho thẻ footer, chiều cao thẻ footer: footer{ background-color:#79B22F; height:100px; padding-top:10px; } Canh lề văn thẻ p, xác định khoảng cách thẻ p: footer>p{ text-align:center; font-size:17px; margin-top:5px; } ài tập Định dạng trang Dangky.html 37 cầu: Sử dụng giao diện Trangchu.html (đã định dạng trên) làm giao diện cho trang đăng ký Không hiển thị hình Slide.jpg Nội dung thẻ section định dạng hình ướng dẫn: Đổi tên trang Dangky.html (trong Chương 1) thành Temp.html Lưu Trangchu.html thành Dangky.html Xóa thẻ chèn hình Slide.jpg Xóa nội dung thẻ section chép nội dung trang Temp.html vào Tạo file Dangky.css chèn vào trang Dangky.html để định dạng cho form đăng ký Thiết lập id class cho thẻ cần thiết 2.3 ài tập áp dụng Sinh viên tự thiết lập thuộc tính css để định dạng cho trang tạo mục 1.4 (Chương 1) 38 ... dụng 10 0 TÀI LIỆU T M K ẢO 10 1 IỚI T IỆU Chúng biên soạn tài liệu hướng dẫn thực hành học phần Thiết kế Lập trình Web với mục đích: Cung cấp nguồn tài liệu hỗ trợ giảng... Sanpham.html 11 Bài tập Thiết kế trang Chitietsanpham.html 12 Bài tập Thiết kế trang Dangnhap.html 13 Bài tập Thiết kế trang Dangky.html 15 Bài tập Thiết kế trang Right.html... height :10 0%; width:80px; background:#F7F2E7; border-top-right-radius:5px; border-bottom-right-radius:5px; border-left:0.5px solid #CED2DD; font-size :14 px; } Thiết lập thuộc tính rê chuột vào nút