Báo Cáo Môn WEB: THIẾT KẾ VÀ LẬP TRÌNH WEB CƠ BẢN: WEBSITE BẢN TIN BÓNG ĐÁ TRÊN MOBILE

BÁO CÁO MÔN: THIẾT KẾ VÀ LẬP TRÌNH WEB CƠ BẢN: WEBSITE BẢN TIN BÓNG ĐÁ TRÊN MOBILE Giảng viên hướng dẫn: ThS. Nguyễn Thị Như Sinh viên thực hiện: Nhóm 1 CN Tin K11 1. Võ Đức Thắng 2. La Văn Cương 3. Nguyễn Đình Thắng Trang web bản tin bóng đá trực tuyến, thiết kế đa thiết bị của nhóm sinh viên CNTT k11 trường đại học tây nguyên

TRƯỜNG ĐẠI HỌC TÂY NGUYÊN BỘ MÔN TIN HỌC BÁO CÁO MƠN: THIẾT KẾ VÀ LẬP TRÌNH WEB CƠ BẢN: WEBSITE BẢN TIN BÓNG ĐÁ TRÊN MOBILE Giảng viên hướng dẫn:ThS Nguyễn Thị Như Sinh viên thực hiện:Nhóm - CN Tin K11 Võ Đức Thắng La Văn Cương Nguyễn Đình Thắng Bn Ma Thuột – 28/05/2014 TRƯỜNG ĐẠI HỌC TÂY NGUYÊN BỘ MÔN TIN HỌC BÁO CÁO WEB CƠ BẢN THIẾT KẾ WEBSITE BẢN TIN BÓNG ĐÁ TRÊN MOBILE GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN ThS NGUYỄN THỊ NHƯ NHÓM – CN TIN K11 Contents MỤC LỤC: PHÂN CÔNG NHIỆM VỤ: Phần Phân tích thiết kế hệ thống: Phần thống nhóm làm chung Kế hoạch thực dự án: STT Tên công việc Thời gian Thời gian Thời gian dự kiến bắt đầu hoàn thành Khảo sát+ xem ngày 13/02/2014 14/02/201 website mẫu Thảo luận ngày 15/02/2014 15/02/201 Phân tích-thiết kế hệ thống+ 5ngày 16/02/2014 20/02/201 xây dựng CSDL vật lý Phác thảo ngày 21/02/2014 24/02/201 template Báo cáo đề ngày 25/02/2014 25/02/201 cương Tiến hành xử lý ngày 17/03/2014 22/03/201 ảnh Thiết kế cấu trúc cho website 10 ngày 24/03/2014 02/04/201 cho hệ thống Thiết kế giao 10 ngày 03/04/2014 12/04/201 diện website Thiết kế giao Võ Đức diện trang chủ Thắng hình ảnh Thiết kế giao La Văn diện trang Cương chuyên mục nội dung tin tức 10 11 12 13 14 15 Thiết kế giao diện trang admin, bảng xếp hạng lịch thi đấu Tiến hành code page Soạn thảo nội dung đưa vào website Nội dung trang chủ hình ảnh Nội dung trang chuyên mục trang tin tức Nội dung trang BXH, lịch thi đấu Lắp ráp hoàn thành website Chạy thử Kiểm tra lỗi sửa lỗi Nghiệm thu, hoàn thành website hồn chỉnh Báo cáo dự án Nguyễn Đình Thắng ngày 13/04/2014 ngày 17/04/2014 17/04/201 21/04/201 Võ Đức Thắng La Văn Cương Nguyễn Đình Thắng 10 ngày 22/04/2014 03/05/201 ngày 07/05/2014 ngày 12/05/2014 10/05/201 17/05/201 ngày 21/05/2014 28/05/201 ngày Phân công công việc:  Thiết kế template “Trang chủ” Page kế thừa:Võ Đức Thắng  Thiết kế Logo, template “Tin tức” Page kế thừa: La Văn Cương  Thiết kế template “Quản Lý” Page kế thừa: Nguyễn Đình Thắng PHẦN I: GIAO DIỆN PHÁC THẢO Phần chung Website có template chính: Template TRANG CHỦ Template trang có chức QUẢN LÝ Template trang TIN TỨC Giao diện phác thảo Trang chủ  Giao diện phác thảo TRANG CHỦ (Võ Đức Thắng) ♦ Giao diện trang chủ phác thao qua loại sử dụng công nghệ thiết kết website responsive(thay đổi theo loại hình views)  Giao diện destop  Giao diện tablet  Giao diện Mobile Giao diện phác thảo trang TIN TỨC  Giao diện phác thảo trang TIN TỨC (La Văn Cương)  Giao diện trang tin tức phác thao qua loại sử dụng công nghệ thiết kết website responsive(thay đổi theo loại hình views)  Giao diện desktop Phần nội dung tin tức: Phần chuyên mục:  Giao diện tablet Phần nội dung tin tức Phần chuyên mục:  Giao diện Mobile Phần nội dung tin tức Phần chuyên mục: 10 } openable { background: url(img/menu_arrow_down.png) 198px 12px no-repeat, #690; } text { width: 183px; padding: 9px 0px; display: block; margin-left: 10px; float: left; overflow: hidden; } content { position: relative; margin-left: 220px; padding-top: 100px; height:auto; } breadLine { height: auto; border: 1px solid #690; border-radius: 0 5px 5px; margin-top:-100px; background:#690 repeat; } tieude{ font-size:24px; 53 text-align:center; padding-top:10px; color:#FFF; } noidung { padding:20px 20px 20px 40px; min-height:300px; height:auto; width:90%; border-radius:5px; border:1px solid #CCC; margin:auto; } /*css login */ loginBox { width: 340px; position: absolute; left: 50%; top: 50%; margin-top: -133px; margin-left: -150px; background: #F9F9F9; border: 1px solid #CCC; } loginHead { background:#360; padding: 9px 10px 10px; 54 margin-bottom: 10px; } control-group { padding: 0px 20px 0px; margin-bottom: 10px; } #inputemail{ width:300px; height:30px; } label{ position:absolute; font-weight:bold; width:110px; margin-right:15px; } #username,#password, #name, #email, #career, #tell, #address { margin-left:120px; width:300px; height:30px; border-radius:3px; } #gioitinh,#decentralization{ margin-left:120px; width:53px; height:36px; } 55 .open{ background:url(img/menu_arrow_up.png) 198px 12px no-repeat, #690; } #inputcontent{ height:200px; width:680px; } #inputtitle{ height:30px; width:680px; } footer{ text-align:center; margin-top:10px; width:960px; height:100px; background:url(img/backgrounds/body.jpg); border-radius:5px 5px 5px 5px; border: 1px solid #690; } #mytable{ border-collapse: collapse; width: 100%; margin: 0px auto; line-height: 18px; border: 1px solid #ddd; font-weight: bold; 56 color: #444; font-size: 13px; font-family: Helvetica,Arial,Verdana; font-style: normal; float: left; } table{ border-collapse:collapse; width:100%; margin:0px auto; line-height:18px; border:1px solid #ddd; font-weight:bold; color:#444; font-size:13px; font-family:Helvetica,Arial,Verdana; font-style:normal; float:left; } table thead tr, table tfoot tr{ height:20px; background-color:#ddd; } table td{ padding:7px; 57 border-bottom:1px solid #ddd; background-color:#f9f9f9; cursor:pointer; } scoll{ height:500px; overflow:auto; border:1px groove #CCC; } 58 Javascript sử dụng: $(document).ready(function(){ $('nav').navResponsive(); }); // Gọi MenuResonsive //FUNCTION TẠO MENU RESPONSIVE (function($){ $.fn.extend({ navResponsive: function() { return this.each(function() { var nav = $(this); // s-collapse menu items nav.find('.nav-menu').find('li a').on('click',function(e){ var ul = $(this).siblings('ul'); if(ul.length){ e.preventDefault(); } if($(this).closest('nav').hasClass('s-collapse')) { ul.find('ul').hide(); ul.find('a.s-collapsetrigger').removeClass('active').text('='); if(ul.is(':hidden')){$(this).find('.scollapsetrigger').addClass('active').text('-'); } else{ $(this).find('.s-collapse-t rigger').removeClass('active').text('='); } ul.slideToggle(100); } }); /* Menu so xuong */ nav.find('.s-collapse-trigger').click(function(e){ e.preventDefault(); var nav = $(this).siblings('.nav-menu'); if(nav.is(':hidden')){ 59 $(this).addClass('active').text('-'); } else{ $(this).removeClass('active').text('='); } $(this).siblings('.nav-menu').slideToggle(); }); /* chon ti le de hien thi menu so xuong */ var defaultWidth = 0; nav.find('.nav-menu').each(function(){ defaultWidth += $(this).outerWidth(); }); if(nav.innerWidth() < defaultWidth + 150){ nav.addClass('s-collapse'); nav.find('.nav-menu').slideUp(500); } $(window).resize(function(){ var el = nav.find('.nav-menu'); if(nav.innerWidth() < defaultWidth + 150) { if(!nav.hasClass('s-collapse')) { nav.addClass('s-collapse', 300); el.find('ul').hide(); el.hide(); nav.find('.s-collapsetrigger').removeClass('active').text( '='); } } else { if(nav.hasClass('s-collapse')) { nav.find('.s-collapsetrigger:last').addClass('active').text( '-'); nav.removeClass('s-collapse', 300); el.find('ul').show(); el.fadeIn(); } 60 } }); }); } }); })(jQuery); Mô tả giao diện Trang chủ: 61 Mô tả giao diện trang Tin Tức: + Giao diện trang chuyên mục 62 + Giao diện trang nội dung 63 64 65 ... ĐẠI HỌC TÂY NGUYÊN BỘ MÔN TIN HỌC BÁO CÁO WEB CƠ BẢN THIẾT KẾ WEBSITE BẢN TIN BÓNG ĐÁ TRÊN MOBILE GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN ThS NGUYỄN THỊ NHƯ NHÓM – CN TIN K11 Contents MỤC LỤC:... ảnh Thiết kế cấu trúc cho website 10 ngày 24/03/2014 02/04/201 cho hệ thống Thiết kế giao 10 ngày 03/04/2014 12/04/201 diện website Thiết kế giao Võ Đức diện trang chủ Thắng hình ảnh Thiết kế. .. công công việc:  Thiết kế template “Trang chủ” Page kế thừa:Võ Đức Thắng  Thiết kế Logo, template ? ?Tin tức” Page kế thừa: La Văn Cương  Thiết kế template “Quản Lý” Page kế thừa: Nguyễn Đình