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
Trang 1TRƯỜ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 1 - CN Tin K11
1 Võ Đức Thắng
2 La Văn Cương
3 Nguyễn Đình Thắng
Buôn Ma Thuột – 28/05/2014
Trang 2TRƯỜ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
Trang 3MỤC LỤC: 3
PHẦN I: GIAO DIỆN PHÁC THẢO 3
1 Phần chung 3
2 Giao diện phác thảo Trang chủ 4
3 Giao diện phác thảo các trang TIN TỨC 4
4 Giao diện phác thảo các trang Quản Lý 11
PHẦN II: XÂY DỰNG QUY CÁCH CHUNG CHO WEBSITE 11
1 Thiết kế chung 11
2 Xây dựng nội dung cho Website 11
3 Quy tắc xây dựng code 12
4 Định dạng các thành phần HTML chung 12
5 Code HTML một số page đại diện 24
a Code Template Trang Chủ 24
b Code Template Trang Hình Ảnh(Trang Phát Triển) 26
c Code Template Trang Tin tức 28
d Code Template Trang Quản Lý 44
6 Code JavaScript Được Sử Dụng 47
a Code JavaScript Trang Chủ 47
b Code JavaScript Trang Hình Ảnh(Trang Phát Triển) 49
c Code JavaScript Trang Tin Tức 49
d Code CSS Trang Admin 49
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 này thống nhất cả nhóm làm chung
Kế hoạch thực hiện dự án:
STT Tên công việc Thời gian
dự kiến
Thời gian bắt đầu
Thời gian hoàn thành
Trang 4website mẫu 4
4 3
10 Soạn thảo nội
dung đưa vào
Trang 513 Kiểm tra lỗi và
14 Nghiệm thu, hoàn thành
website hoàn
chỉnh
7 ngày 21/05/2014 28/05/201
4
15 Báo cáo dự án 1 ngày
Phân công công việc:
Thiết kế template “Trang chủ” và các Page kế thừa:Võ Đức Thắng
Thiết kế Logo, template “Tin tức” và các Page kế thừa: La Văn Cương
Thiết kế template “Quản Lý” và các Page kế thừa: Nguyễn Đình Thắng
PHẦN I: GIAO DIỆN PHÁC THẢO
1 Phần chung
Website có 3 template chính:
1 Template của TRANG CHỦ
2 Template của các trang có chức năng QUẢN LÝ.
3 Template của trang TIN TỨC
2 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 của trang chủ được phác thao qua các loại màn sử dụng công nghệ thiết kết website responsive(thay đổi theo từng loại màn hình views)
Giao diện trên destop
Giao diện trên tablet
Trang 6 Giao diện trên Mobile
3 Giao diện phác thảo các trang TIN TỨC
Giao diện phác thảo các trang TIN TỨC (La Văn Cương)
Giao diện của các trang tin tức được phác thao qua các loại màn sử dụng công nghệ thiết kết website responsive(thay đổi theo từng loại màn hình views)
Giao diện trên desktop Phần nội dung tin tức:
Phần chuyên mục:
Trang 7 Giao diện trên tablet
Trang 8Phần nội dung tin tức
Phần chuyên mục:
Trang 9 Giao diện trên Mobile Phần nội dung tin tức
Trang 10Phần chuyên mục:
Trang 124 Giao diện phác thảo các trang Quản Lý
PHẦN II: XÂY DỰNG QUY CÁCH CHUNG CHO WEBSITE
1 Thiết kế chung
Website có 3 template tổng quát(Trang chủ, Tin tức, Admin) và một template phát triển(Hình ảnh), mỗi template sẽ được xây dựng thành
một file template mẫu bằng Dreamweaver, các Page sẽ lấy nền từ các file
Template chung này
2 Xây dựng nội dung cho Website
Nội dung của Website được xây dựng dựa trên phần Phân tích chức năng và Phân tích yêu cầu của người sử dụng (Trong phần Phân tích thiết
kế hệ thống - chung của nhóm).
Trang 133 Quy tắc xây dựng code
- Sắp xếp các thẻ một cách logic, code phân cấp, không xô lệch Đặt tên
có ý nghĩa cho id và class.
- Sử dụng CSS để định dạng và trang trí cho Website
- Tổ chức CSS có hệ thống, sắp xếp thuộc tính CSS theo quy định sẵn.
- Sử dụng tính kế thừa trong CSS: Nếu nhiều thuộc tính con của một thuộc tính cha cùng sử dụng chung một kiểu style trên Website, sẽ tối
ưu hơn nếu ta định nghĩa style cho thuộc tính cha thông qua kế thừa trong CSS để áp dụng cho tất cả các thuộc tính con.
- Website hiển thị nội dung từ trái sang phải trên xuống, giúp người dùng dễ dàng nắm được nội dung truyền tải.
4 Định dạng các thành phần HTML chung
- Nội dung của Website được định dạng hoàn toàn bởi file CSS bên ngoài.
- Các thành phần cần định dạng được chia thành các id và class, nội
dung định dạng các id và class này nằm ở file CSS chung cho
Website.
- Sử dụng Reset CSS để đảm bảo hiển thị tốt trên các trình duyệt khác nhau.
CHI TIẾT PHẦN ĐỊNH DẠNG CHUNG:
Các thành phần tổng quát của Website: Header, Nav, Aside, Section, Article, Footer.
Các vị trí đó trong bản thiết kế được áp dụng bởi các Selector
CSS cùng tên.
Body
Định dạng Font chữ và background chung cho Website, cỡ chữ 100% theo trình duyệt đã đặt sẵn.
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
margin: 0;
padding: 0;
backgroup-image:url( /Images/img/background.png);}
content Quy định chiều rộng, phần article{
Trang 14chứa nội dung chính của
website Tự động căn vào
giữa phần body Bằng cặp
thẻ <center></center> được
đánh dấu bằng thẻ Article
font-family:"Times New Roman", Times, serif;
font-size:100%;
}.containter{
width:960px;
height:2990px;
background-image:url( /Images/img/background.png);}
Trang 15Nền nổi bật so với body
và footer nhằm tạo điểm nhấn lạ mắt người dùng, với thuộc tính backgroup
có màu xanh nõn chuối, chiều rộng sẽ chạy full theo từng loại màn hình Chiều cao để tự động nhằm phục vụ cho menu responsive khi qua các loại màn hình
nav{
display: block;
width: 960px;
font-family: "Arial, Helvetica, sans-serif;
font-size:100%;
border-radius: 10px 10px 10px 10px;}
Trang 16Với Footer ở đây chứa
1 vài thông tin liên quan đến nhóm thực hiện và
1 menu ngang có về đầu trang.! Chiều cao được
cố định là 150px, nền được trùng với nền của body có 1 thẻ<hr/>
phân biệt vùng
footer{
font-family:"Times New Roman", Times, serif;
font-size:100%;
width:100%;
height:150px;
backgroundimage:url( /Images/img /background.png);
} hr{
border:1px groove #CCC; width:auto;height:2px;} NỘI DUNG RIÊNG CỦA TRANG CHỦ
Aside
Thẻ này thay cho phần định thẻ div left phần hay chứa quảng cáo, phần này chia làm 2 class 1 dành cho đồng
hồ và lịch, 2 dành cho quảng cáo.
aside{
font-family:"Times New Roman", Times, serif;
font-size:100%;
} siderbar{
/*width:243px;*/
width:26.20%;
height:auto;
border-radius: 10px 10px 10px 10px;
/*border:1px groove blue;*/ float:left;
}
Trang 17Thẻ này phục vụ cho việc chạy chữ và chạy hình ảnh, đồng hồ và lịch được mặc đinh chiều cao và chiều rộng dùng để hiển thị đồng
hồ lịch bên siderbar
.siderbar embed{
width:215px; height:215px; }
Trang 18border-radius: 0px 0px 0px 0px; -moz-box-shadow: 2px 2px 2px #000000;
-webkit-box-shadow: 2px 2px 2px #000000;
box-shadow: 2px 2px 2px
#000000;
} media-queries Phần thay đổi nội dung
bài viết theo tỉ lệ màn hình với những tỉ lệ của từng loại màn hình, phần code này giúp căn chỉnh hợp lý những phần nội dung của một bài viết cũng như cả một trang web hoàn chỉnh.
@media only screen and (min-width: 0px) and (max-width: 960px)
{ body{
width:100%;
margin:3%;
text-align:justify;
font-size:14px;
Trang 19} content{
width:94%;
float:left;
} }
NỘI DUNG RIÊNG CỦA TRANG CHUYÊN MỤC
Aside Thẻ là phần hay chứa quảng cáo
.quangcao1-sidebar{
background-color:#fff; width:245px;
float:left;
margin:19px 0 0 23px;
} quangcao1-sidebar img{
width:245px;
border:1px solid #79B43F;
} article Thẻ chứa phần nội dung
bài viết và chuyên mục, các tin bài, hầu như chỉ
có phần nội dung thay đổi.
Article tin tleft{
width:50%;
float:left;
margin-right:1%;
} Article tin p.tieude1{
font-weight:bold;
} Article tin img{
margin-top:3%;
width:45%;
float:left;
border: 2px solid #f5f5f5; box-shadow: 0 0 3px gray;
} article tin mucchinh{
Trang 20float:right;
} article tin tright img{
margin-left:2%;
} Article tin tright{
width:49%;
float:left;
} tinkhac a{
line-height:25px;
} tinkhac ul{
margin-left:2%;
} tinkhac p{
border-top:2px solid #79B43F; border-bottom:1px solid
#D4D4D4;
Trang 21font-weight:bold; width:100%;
} tinkhac kright{
width:49%;
float:left;
margin-left:2%; margin-right:-1%;
.midcontent{
margin-top:292px; margin-bottom:90px;
} midcontent img{
width:625px;
margin-left:20px;
} midcontent p.mtieude{
font-style:italic; font-size:87.5 %; color:blue;
text-align:center;
} midcontent p.tacgia{
font-weight:bold; color:#333;
float:right;
Trang 22} binhluan{
width:670px;
border-top:3px solid #79B43F; background:#dde8f4;
body {
font-family:"Times New Roman", Times, serif;
background:url(img/backgrounds/body.jp g) repeat;
Trang 23là màu nền của thuộc tính body.
breadLine {
height: auto;
border: 1px solid #690;
border-radius: 0 0 5px 5px; margin-top:-100px;
noidung {
padding:20px 20px 20px 40px; min-height:300px;
footer {
text-align:center;
margin-top:10px;
Trang 24height:100px;
background:url(img/backgrounds/body.jp g);
border-radius:5px 5px 5px 5px; border: 1px solid #690;
}
Trang 255 Code HTML một số page đại diện
a Code Template Trang Chủ
Trang 28b Code Template Trang Hình Ảnh(Trang Phát Triển)
Trang 30c Code Template Trang Tin tức
Code trang chuyên mục:
<a href="#"><img src="img/11.jpg"></a>
<p>Mourinho sẽ lại huấn luyện Porto</p>
<section class="khung">
<ul>
<li class="first">BÀI BÓNG ĐÁ NGOẠI HẠNG ANH NHIỀU NGƯỜI ĐỌC</li>
<li><a href="#">Tin HOT tối 16/5: Messi có thể ở lại Barca tới</a></li>
<li><a href="#">TRỰC TIẾP Arsenal - Hull City: Giải quyết bằng hiệp phụ</a></li> <li><a href="#">Tức tối vì Man City vô địch, Ryan Giggs tắt phụt </a></li>
Trang 31<li><a href="#">World Cup 2014: “Quân” Chelsea đông hơn tất cả</a></li>
<p class="tieude1"><a href="#">Tin HOT tối 17/5: “Bom tấn” ở AnFew</a></p>
<p class="bo">MU đón tân binh; Liverpool chi đậm mua ngôi sao; GĐĐH giải NHA có thể
<p class="tieude1"><a href="#">Arsenal - Hull City: Lịch sử gọi tên</a></p>
<p class="bo">(23h, 17/5) Arsenal đứng trước cơ hội giải cơn khát danh hiệu suốt 9 năm qua.</p>
</section>
<p class="next"><a href="#">Đọc Tiếp »</a></p>
</article>
</article>
Trang 32<p class="next"><a href="#">Đọc Tiếp »</a></p>
Trang 33<ul class="list">
<li><p><a href="#"> Ancelotti và nỗi ám ảnh Decima</a></p></li>
<li><p><a href="#"> Video Madrid Masters: Nadal đứng như tượng vì pha bóng khó của đối thủ </a></p></li>
<li><p><a href="#"> Man City và Liverpool chuẩn bị trước giờ G</a></p></li> <li><p><a href="#"> 5 lý do để tin rằng Toni Kroos không rời Bayern trong mùa hè tới</a></p></li>
<li><p><a href="#"> 10 cầu thủ thuận chân trái hay nhất châu Âu mùa này tin ảnh</a></p></li>
<li><p><a href="#"> Những ứng cử viên sáng giá nhất tại World Cup
2014</a></p></li>
<li><p><a href="#"> Đội hình tiêu biểu Bundesliga mùa 2013/14 tin
ảnh</a></p></li>
<li><p><a href="#"> Chelsea tung bom tiền vụ Callejon</a></p></li>
<li><p><a href="#"> Điểm tin trưa 10/05: “Người nhà” chỉ trích Barca</a></p></li> <li><p><a href="#"> Video: David Beckham, ông vua của những quả tạt
<li><p><a href="#"> HLV Prandelli khen đã rồi chê tuyển Anh</a></p></li>
<li><p><a href="#"> Đua vô địch La Liga, cờ bỗng rơi vào tay Barcelona</a></p></li> <li><p><a href="#"> Hàng thủ nhận “tiếp viện”, Barca sẽ vô địch?</a></p></li> <li><p><a href="#"> Khi số phận của Liverpool phải dựa vào 'hàng thải'</a></p></li> <li><p><a href="#"> Barcelona thông báo ngày chia tay Carles Puyol</a></p></li> <li><p><a href="#"> Công Vinh nói gì về thầy Nhật ở đội tuyển Việt
Nam?</a></p></li>
<li><p><a href="#"> Giggs tin Rooney sẽ tỏa sáng tại World Cup 2014</a></p></li>
Trang 34<p class="tieude1"><a href="#">Lampard trên đường rời Chelsea</a></p>
<p class="bo">HLV Mourinho muốn Lampard tiếp tục gắn bó với Chelsea ở mùa giải tới.</p>
Trang 35<a href="#"><img src="img/20.jpg"></a>
<p class="next"><a href="#">Đọc Tiếp »</a></p>
</article>
<article class="t7right">
Trang 36<a href="#"><img src="img/21.jpg"></a>
<section class="mucchinh">
<p class="tieude1"><a href="#">Thế giới “huyền bí” của Jose Mourinho (Kỳ 2)</a></p> <p class="bo">Mourinho vẫn tin Ferguson xem mình như một người bạn chân chính, nhưng rồi </p>
<li><a href="#">Hazard làm lành với Mourinho, muốn ở lại Chelsea</a></li> <li><a href="#">Ông Phát khích lệ tuyển nữ VN trước trận gặp Úc</a></li>
<li><a href="#">Nasri bị loại khỏi ĐT Pháp do đồng đội "đâm sau lưng"</a></li> <li><a href="#">Liga trước vòng cuối: Định mệnh ở Nou Camp</a></li>
<li><a href="#">World Cup còn 28 ngày: Sai lầm lớn của FIFA</a></li>
<li><a href="#">Chia tay, Maradona đòi quà bồ cũ</a></li>
<li><a href="#">Lý do VTV không phát sóng Asian Cup bóng đá nữ</a></li>
Trang 37<li><a href="#">Van Gaal: “Máy sấy tóc” mới của MU (kỳ 1)</a></li>
<li><a href="#">Eto'o ám chỉ HLV Mourinho là “kẻ ngu ngốc”</a></li>
<li><a href="#">Với Van Gaal, MU đặt mục tiêu trở lại… cúp C1</a></li>
<li><a href="#">Kỷ lục “dị”: Thay 25 cầu thủ khi đấu với Man City</a></li>
<li><a href="#">Nhìn lại NHA 2013/14: Những phát ngôn "bất hủ"</a></li> <li><a href="#">Rio Ferdinand đi “giải sầu” cùng Aguero</a></li>
<li><a href="#">Vì bố mẹ vợ, Suarez có thể gia nhập Barca</a></li>
<li><a href="#">World Cup còn 29 ngày: Liverpool “tranh” Gerrard với ĐT Anh</a></li>
<li><a href="#">Arsenal tìm sát thủ: Hãy đợi Benzema</a></li>
<li><a href="#">Tiết lộ: Vì Costa, Mou biến Luiz thành "vật tế thần"</a></li> <li><a href="#">NHA 2013/14: Suarez, Yaya Toure nhận nhiều điểm 10</a></li> </ul>