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 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

1


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Ư


4
Phân tích-thiết
3
kế hệ thống+
5ngày
16/02/2014 20/02/201
xây dựng CSDL
4
vật lý
4
Phác thảo các
4 ngày
21/02/2014 24/02/201
template
4
5
Báo cáo đề
1 ngày
25/02/2014 25/02/201
cương
4
6
Tiến hành xử lý
7 ngày
17/03/2014 22/03/201
ảnh
4
Thiết kế cấu
7
trúc cho website 10 ngày

15

Thiết kế giao
diện trang admin,
bảng xếp hạng và
lịch thi đấu
Tiến hành code
các page
Soạn thảo nội
dung đưa vào
website
Nội dung trang
chủ và hình ảnh
Nội dung trang
chuyên mục và
trang tin tức
Nội dung trang
BXH, lịch thi
đấu.
Lắp ráp hoàn
thành website
cơ bản
Chạy thử
Kiểm tra lỗi và
sửa lỗi
Nghiệm thu,
hoàn thành
website hoàn
chỉnh
Báo cáo dự án


3 ngày

07/05/2014

6 ngày

12/05/2014

10/05/201
4
17/05/201
4

7 ngày

21/05/2014

28/05/201
4

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

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:

5


Phần chuyên mục:

6




Giao diện trên tablet
7


Phần nội dung tin tức

Phần chuyên mục:

8




Giao diện trên Mobile
Phần nội dung tin tức

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.
Thành Phần
Ý Tưởng
Nội Dung CSS
Body

Định dạng Font chữ và
background chung cho
Website, cỡ chữ 100% theo

font-size:100%;
}
.containter{
width:960px;
height:2990px;
backgroundimage:url(../Images/img/background.
png);}


header

Nề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

/* Header*/
header{
font-family:"Times New Roman",
Times, serif;
font-size:100%;
width:auto;
height:auto;

hr{
border:1px groove #CCC;
width:auto;height:2px;}

NỘI DUNG RIÊNG CỦA TRANG CHỦ

aside{

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.

16

font-family:"Times New
Roman", Times, serif;
font-size:100%;
}
.siderbar{
/*width:243px;*/
width:26.20%;
height:auto;
border-radius: 10px 10px
10px 10px;


Class bongda là class bao
gồm các chuyên mục của
bóng đá như Anh,Việt
Nam,Đức,Ý,Bóng Đá
Khác, Các Chuyên mục
này có thuộc tính chung
nằm trong bongda và
class: bongdath.

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.

article .bongda{
/*border:1px groove blue;*/
/*width:690px;*/
width:98.5888888%;
height:auto;
float:left;
}
article .bongdath{
text-align:left;
/*border:1px groove blue;*/

}

18


Aside

article

NỘI DUNG RIÊNG CỦA TRANG CHUYÊN MỤC
.quangcao1-sidebar{
background-color:#fff;
width:245px;
float:left;
Thẻ là phần hay chứa
margin:19px 0 0 23px;
quảng cáo
}
.quangcao1-sidebar img{
width:245px;
border:1px solid #79B43F;
}
Article .tin .tleft{
width:50%;
float:left;
margin-right:1%;
}
Article .tin p.tieude1{
font-weight:bold;
}


Article

Bao gồm các tin liên
quan tin cùng chuyên
mục với tin tức, chia làm
hai phần .

margin-top:35%;
border-top:1px dotted
#CCCCCC;
}
.tinkhac .kleft{
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;
color:#333;
font-weight:bold;
width:100%;
}


Body

Header
Section

Là phần dành riêng cho
quảng cáo

}
.midcontent p.tacgia{
font-weight:bold;
color:#333;
float:right;
margin-right:27px;
}
.binhluan{
width:670px;
border-top:3px solid #79B43F;
background:#dde8f4;
margin-top:110px;
background-color:#e1f2c3;
}
.quangcao1-sidebar{
background-color:#fff;
width:245px;
float:left;
margin:12px 0 0 23px;
}
.quangcao1-sidebar img{

(tiêu đề)

Section
(nội dung)

Footer

website với độ rộng là
float: left;
220px. Màu nền của aside
position: relative;
là màu nền của thuộc tính
width: 220px;
body.
}
breadLine {
height: auto;
Các section nằm trong
border: 1px solid #690;
article dungdội cao auto,
border-radius: 0 0 5px 5px;
đường viền và màu nền
margin-top:-100px;
màu xanh.
background:#690 repeat;
}

Các section được thể hiện
bằng các box. Box trên
cách box dưới 10px.


23


24


25