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

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Ư

NHÓM 1 – CN TIN K11

2


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 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
Thời gian
Thời gian
dự kiến
bắt đầu
hoàn thành
1
Khảo sát+ xem
2 ngày
13/02/2014 14/02/201
website mẫu
4
2
Thảo luận
1 ngày
15/02/2014 15/02/201

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

24/03/2014 02/04/201
và cho hệ thống
4
8
Thiết kế giao
10 ngày
03/04/2014 12/04/201
diện website
4
Thiết kế giao
Võ Đức
diện trang chủ và
Thắng
hình ảnh
Thiết kế giao
La Văn
diện trang
Cương
chuyên mục và
nội dung tin tức
3


9
10

11
12
13
14

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

Nguyễn
Đình
Thắng
5 ngày

13/04/2014

4 ngày

17/04/2014

17/04/201
4
21/04/201
4
Võ Đức
Thắng
La Văn
Cương
Nguyễn
Đình
Thắng

10 ngày

22/04/2014

03/05/201
4

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

Website có 3 template chính:
1.

Template của TRANG CHỦ
4


2.
3.

Template của các trang có chức năng QUẢN LÝ.
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



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:

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

9


Phần chuyên mục:

10


11


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

12


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).
3. 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.
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

trình duyệt đã đặt sẵn.
13

body

{

font-family:Arial, Helvetica,
sans-serif;
font-size:100%;
margin: 0;


content

Quy định chiều rộng, phần
chứ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ẻ được
đánh dấu bằng thẻ Article

14

padding: 0;
backgroupimage:url(../Images/img/background.
png);}
article{
font-family:"Times New
Roman", Times, serif;

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;

background:#79B43F;
}

nav{

nav

display: block;
width: 960px;
font-family: "Arial,
Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
position: relative;

Sử dụng thẻ có sẵn của
HTML5 phục vụ cho
phần menu chuyển
hướng mặc định chiều
rộng là 960px theo
chuẩn lưới 960
}

section{
section

Thẻ dùng để đánh dấu
và được bo góc với góc
bo là 10px;

15

font-family:"Times New
Roman", Times, serif;
font-size:100%;
border-radius: 10px 10px
10px 10px;}


footer

Vớ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{

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;

/*border:1px groove blue;*/
float:left;
}


Embed

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

17

.siderbar embed{
width:215px;
height:215px;
}


Form. class="bongda">,
class="bongdath"
>,

media-queries

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;*/

float:left;
clear:both;
width:98.50%;
height:auto;
margin-top:5px;
margin-bottom:5px;
margin-left:8px;
border:1px dotted #333333;
margin-right:8px;
border-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 only screen and (min-width:
0px) and (max-width: 960px)
{
.body{
width:100%;
margin:3%;
text-align:justify;
font-size:14px;
}
.content{
width:94%;
float:left;
}

}

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 .tin img{
margin-top:3%;
width:45%;
float:left;
Thẻ chứa phần nội dung
border: 2px solid #f5f5f5;
bài viết và chuyên mục,
box-shadow: 0 0 3px gray;
các tin bài, hầu như chỉ
}
có phần nội dung thay
article .tin .mucchinh{
đổi.
width:50%;
float:right;
}
article .tin .tright img{
margin-left:2%;
}
Article .tin .tright{
width:49%;
float:right;
}

.tinkhac{
19


Form (class="tinkhac">)

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%;
}

.tinkhac .kright{
width:49%;
float:left;
margin-left:2%;
margin-right:-1%;
}

NỘI DUNG RIÊNG CỦA TRANG NỘI DUNG
Là phần hiển thị nội dung .midcontent{
tin tức và hình ảnh, trong
margin-top:292px;
đó có phần bình luận
margin-bottom:90px;
dành cho người đọc và
}
mục tin khác
.midcontent img{
width:625px;
margin-left:20px;
}
.midcontent p.mtieude{
20


font-style:italic;
font-size:87.5 %;
color:blue;
text-align:center;

Aside

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{

width:245px;
border:1px solid #79B43F;
}

CÁC THÀNH PHẦN CHÍNH CỦA TRANG ADMIN
body {
font-family:"Times New Roman",
Định dạng font
Times, serif;
chữ chung cho
webiste. Đặt
background:url(img/backgrounds/body.jp
màu nền cho
g) repeat;
trang.
font-size:100%;
}
header {
Đặt màu nền cho header,
background:#79b43f;
có độ cao 100px pixel.
height:100px;
}
Cố định aside về bên trái section {
21


(menu)

Section

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

noidung {
padding:20px 20px 20px 40px;
min-height:300px;
height:auto;
width:90%;
border-radius:5px;
border:1px solid #CCC;
margin:auto; }
footer {
text-align:center;
margin-top:10px;
width:960px;
height:100px;

Căn giữa text, text màu
trắng, và nằm phía dưới
của article, hình nền trùng
background:url(img/backgrounds/body.jp
với màu của body.
g);
border-radius:5px 5px 5px 5px;
border: 1px solid #690;
}

22


5. Code HTML một số page đại diện
a. Code Template Trang Chủ

23


24


25