Bài tập lớn học phần thiết kế web Đề tài 28 thiết kế website cập nhật tin tức bóng Đá

 Màu chữ văn bản: color  Font chữ văn bản: font-family  Kích cỡ font chữ văn bản: font-size  Căn lề cho văn bản: text-align HTML color + Màu tông html được biểu diễn với tên của màu

1

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB

ĐỀ TÀI 28: THIẾT KẾ WEBSITE CẬP NHẬT TIN TỨC

2

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN HỌC PHẦN: THIẾT KẾ WEB

3

LỜI MỞ ĐẦU

Ngày nay với sự phát triển của ngành công nghệ thông tin và những tiện ích mà

nó mang lại, việc tiếp cận các thông tin nóng hổi một cách nhanh chóng sẽ rất dễ thu hút được nhiều người đọc hơn Nhận thức được những nhu cầu tìm kiếm thông tin giải trí, hàng loạt các doanh nghiệp đã nắm bắt được nhu cầu ấy và cho ra mắt vô số các website mang với nhiều mục đích khác nhau như thương mại, giải trí và mua bán … và để đáp ứng được những nhu cầu ấy Và đấy là lúc mà website tin tức về bóng đá được nhiều người chú ý và quan tâm đã ra đời, giúp cho mọi người có thể hiểu rõ được những gì đang diễn ra trên sân cỏ

Với website, việc cập nhật thông tin sẽ vô cùng dễ dàng và nhanh chóng Dù có bất kì ở đâu hay bất kì thời điểm nào, chỉ với thiết bị có thể kết nối được mạng Internet là

có thể dễ dàng truy cập vào website tin tức bóng đá nhanh chóng và tiện lợi Không giống như với loại báo giấy truyền thống thường đưa tin đến người đọc một cách chậm chạp, đấy cũng chính là lợi thế lợi nhất của website tin tức về bóng đá, dễ dàng cập nhật được các thông tin mới nhất và nhanh chóng nhất

Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường đã đưa môn học vào trương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên bộ môn - thầy/cô

đã dạy dỗ, truyền đạt những kiến thức quý báu cho em trong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học Kỹ năng giao tiếp của thầy/cô, em đã có thêm cho mình nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắc chắn sẽ là những kiến thức quý báu, là hành trang để em có thể vững bước sau này Bộ môn là môn học thú vị, vô cùng bổ ích và có tính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn của sinh viên Tuy nhiên, do vốn kiến thức còn nhiều hạn chế

và khả năng tiếp thu thực tế còn nhiều bỡ ngỡ Mặc dù em đã cố gắng hết sức nhưng chắc chắn bài tiểu luận khó có thể tránh khỏi những thiếu sót và nhiều chỗ còn chưa chính xác, kính mong thầy/cô xem xét và góp ý để bài tiểu luận của em được hoàn thiện hơn

4

GIỚI THIỆU ĐỀ TÀI

Tên đề tài

Xây dựng trang web cập nhật tin tức bóng đá

Nội dung làm đề tài

Nhóm em dựa trên những tin tức mới nhất của bóng đá, những trận đấu gần đây và những hightlight đẹp mắt trên youtube giúp cho các bạn cập nhật tin tức bóng đá Nhóm em sử dụng ứng dụng visual stdio code để tạo ra trang web

Các công nghệ sử dụng

Nhóm chúng em sử dụng các ngôn ngữ html, javascript, css và sử dụng code trên ứng dụng visual studio code

Và chúng em sử dụng trang web draw.io để thiết kế mô hình trang web

Phân chia công việc :

tiến độ làm việc

Nguyễn Phú Quang Hưng Làm giao diện trang chủ, chương 3

Nhóm đã thống nhất tạo trang web trên ứng dụng visual studio code với các ngôn ngữ lập trình như HTML, CSS, Javascript và sử dụng Bootstrap để căn chỉnh CSS

Mục tiêu chính của đề tài là cập nhật 1 trang web có các tin tức mới nhất những trận đấu hay và những bàn thắng đẹp mắt

6

MỤC LỤC Chương 1 CƠ SỞ LÝ THUYẾT Error! Bookmark not defined 1.1 Ngôn ngữ HTML Error! Bookmark not defined 1.2.CSS Error! Bookmark not defined 1.3.JAVASCRIPT 17

1.4 BOOTSTRAP 20

Chương 2 XÂY DỰNG GIAO DIỆN CHO TRANG WEB 22

2.1 Các chức năng của trang web 22

2.2 Thiết kế giao diện 24

2.3 Liên kết giao diện 31

Chương 3 Kết luận 35

3.1 Kết quả đạt được 35

3.2 Nội dung cần cải tiến 35

3.3 Bài học kinh nghiệm rút ra 36

Phụ lục 37

HTML được dùng để tạo nội dung cho trang web

Thiết kế giao diện cho trang web

HTML5 hiện đang là phiên bản HTML mới nhất với những cải tiến rõ rệt so với các phiên bản trước Bởi vậy hiện nay, mọi người thường sử dụng HTML5 để thiết kế giao diện website

Tuy nhiên, bạn chỉ có thể dùng HTML để tạo bộ khung sườn cho trang web mà thôi Để thiết kế hoàn thiện một trang web, bạn cần sử dụng đến CSS để chỉnh sửa màu sắc, kích thước, vị trí của các biểu tượng và một số vấn đề phức tạp khác Bên cạnh đó, bạn còn cần phải có kiến thức chuyên môn về lập trình

Lập trình tương tác cho trang web

8

Thông qua HTML, bạn có thể lập trình tương tác giữa người dùng với trang web Để làm được điều này, bạn cần dùng code JavaScript JavaScript sẽ tạo ra những hiệu ứng khi người dùng nhấp và di chuyển chuột trên website

HTML được dùng để lập trình tương tác cho trang web

Cấu trúc HTML

<html></html>: định nghĩa phạm vi của văn bản html

<head></head>: định nghĩa các mô tả về trang html Thông tin trong thẻ này không được hiển thị trên trang web

<title></title>: mô tả tiêu đề trang web

<body></body>: xác định vùng thân của trang web nơi chứa các thông tin hiển thị trên trang

9

+ Đường kẻ ngang(Horizontal Rules): <hr/>

+ Các tag định dạng chuỗi

+ Định dạng chữ: <em>, <i>, <b>, <font>

+ Tạo siêu liên kết: <a> thẻ này ta sẽ tìm hiểu ở phần riêng

+ Xuống dòng: <br/>

Các tag trình diễn văn bản

+ Định dạng kiểu chữ :

 <b> : Bold text

 <strong> :Important text

 <i> : Italic text

 <em> : Emplasized text

 <mark> : Marked text

 <small> : Smaller text

 <del> : Deleted text

 <ins> : Inserted text

 <sub> : Subscript text

 <sup> : Superscript text

Các tag trình diễn văn bản

+ Tag<pre>: hiển thị đúng dạng văn bản đã soạn thảo(khoảng trắng, xuống dòng) + Một số tag khác

 <blockquote>: phát hiện trích dẫn từ 1 nguồn khác

 <q>: biểu diễn dấu nháy kép

 <abbr>: thẻ đánh dấu cum từ viết tắt(sẽ hiển thị thông tin đầy đủ cum từ viết tắt khi ta dê truột qua chúng)

 <address>: biểu diễn thông tin liên hệ của chủ tác giả tài liệu, bài viết Thường thêm ngắt dòng trước và sau thẻ này và thông tin trong thẻ được viết

in nghiêng

 <bdo>

 <cite>

 Màu chữ văn bản: color

 Font chữ văn bản: font-family

 Kích cỡ font chữ văn bản: font-size

 Căn lề cho văn bản: text-align HTML color

+ Màu tông html được biểu diễn với tên của màu xác định trước, hoặc các giá trị RGB, HEX, HSL, RGBA hoặc HSLA

 RGB: sử dụng 3 màu chính(Đỏ, Xanh lục, Xanh lam viết tắt là RGB)

sử dụng tổ hợp với nhau theo nhiều phương thức để tạo thành các màu khác nhau

 HEX: là cách thể hiện màu từ nhiều mô hình màu khác nhau thông qua các giá trị thập lục phân Mỗi giá trị màu HEX tuân theo định dạng #RRGGBB(Đỏ, Xanh lục, Xanh lam) Các số nguyên thập lục phân có thể nằm trong phạm vi 00-FF để chỉ định cường độ màu sắc

+ Cách lấy giá trị trong thuộc tính mầu của html

 RGB: style=“background-color: rgb(value1, value2, value3)”

 HEX: style=“background-color: #ff…”

 HSL: style=“background-color: hsl(value,%,%)”

 RGBA:style=“background-color:rgba(value1,value2, value3,value4)”

 HSLA: style=“background-color:rgb(value1, %,%, value2)”

11

HTML Link

+ Liên kết được sử dụng hầu hết trong các trang web Cho phép người dung chuyển

từ trang web này sang một trang khác bằng cách nhấp vào link được cung cấp bởi một Tag liên kết trang <a> hay còn gọi là (anchor-mỏ neo)

+ Cú pháp: <a href=“url” target=“…”> Link text</a> Ta sẽ tìm hiểu các giá trị truyền vào với href và target

+ Các dạng url: url có dạng được viết như sau

+ protocol://site address/dierectory/filename

+ Các giá trị được truyền vào thuộc tính target:

 _blank: tải trang web vào cửa sổ mới

 _parent: tải trang web vào cửa sổ cha của nó

 _self: tải trang web vào chính cửa sổ hiện hành

 _top: tải trang web vào cửa sổ cao nhất + Phân loại liên kết trang

 Liên kết ngoại(external link): khi click vào link sẽ cho phép ta chuyển sang trang mới thông qua “url” của thuộc tính href của tag <a>

 <a href = “url”>Text đại diện</a>

 Liên kết bookmark: khi click vào link cho phép ta chuyển đến frame(chỉ mục) nào đó trong cục bộ của trang web đó thông qua thuộc tính id của frame đó

 Liên kết Email

 url: có 2 loại địa chỉ

 Địa chỉ tuyệt đối: là vị trí tuyệt đối so với mạng internet

 Địa chỉ tương đối: là vị trí tương đối so với trang web hiện hành đang chứa liên kết

 Một số ký hiệu đường dẫn

HTML List: Trong HTML có thể tạo được danh sách Không Theo Thứ Tự (Unordered list), danh sách Theo Thứ Tự (Ordered list) và danh sách Miêu Tả (Description list)

 Tag <div></div> cùng với 1 số tag như <span></span>,

<section></section>, … là các phần tử khối(tìm hiểu HTML block và Inline)

 Chứa được hầu hết các tag trong html

 Một số tag không được chứa bên trong tag <divv></div>:

<html></html>, <meta></meta>, <body></body>, <title></title>, < link ></link>

 Một số thẻ không nên chứa bên trong tag <div></div>: <style>

</style>, <script></script >

HTML span

 Tag <span></span>: thuộc nhóm phần tử Inline(nội dòng)

 Tag <span></span>: thường được sử dụng để gộp nhóm các phần tử

mà không làm ảnh hưởng đến các văn bản chung của một hang

 Tag <span></span> không có thuộc tính bắt buộc nhưng kiểu lớp và

id là phổ biến sử dụng cùng với css để tạo style cho văn bản HTML class

 Class là một thuộc tính của các phần tử trong HTML dùng để chỉ địn một lớp cho phần tử(tag) HTML

 Nhiều phần tử HTML có thể cùng chia sẻ một class

 Sử dụng thuộc tính class: được sử dụng để trỏ đến một tên class Chúng thường được sử dụng cùng với CSS và javascript để truy cập

và thao tác các phần tử với tên lớp cụ thể HTML id

Thuộc tính id của phần tử HTML dùng để chỉ định một id duy nhất cho một phần tử HTML

alt: chú thích cho hình ảnh trong trường hợp không có hình ảnh

Ảnh nền cho trang web

Sử dụng thuộc tính cho thẻ body đặt ảnh nền cho trang web <body background=“Image Path">

Image Map: Thẻ HTML <map> định nghĩa một bản đồ hình ảnh Bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp truột được Các khu vực được xác định bằng một hoặc nhiều thẻ <area>

shape=“rect”, shape=“circle”… : thuộc tính khoanh vùng được chọn, vùng có thể dạng hình chữ nhật hoặc hình tròn

coords: phối hợp với thuộc tính shape xác định vị trí vùng trọn

Animated Image: chèn các ảnh động

Floating Image : Sử dụng thuộc tính Float CSS căn trái, phải cho images

Image as a Link: chèn ảnh vào một link

Tag video <video>

<video [control]>

<source src=“path" type=“format">

<source src=" path" type=“format">

</video>

[control]: Các tham số điều khiển video controls(có thể pause, play,…)

14

autoplay(tự động chạy) path: Đường dẫn đến file video(có thể là thư mục chứa file video hoặc một link có đường dẫn tuyệt đối đến file video của một trang web nào đó)

format: định dạng file video mà các trình duyệt hỗ trợ( tùy từng trình duyệt có thể hỗ trợ các định dạng như: wav, mp4, avi, ogg…)

Tag audio <audio>

 <video [control]>

<source src=“path" type=“format">

<source src=" path" type=“format">

 </video>

[control]: Các tham số điều khiển video controls(có thể pause, play,…)

autoplay(tự động chạy) path: Đường dẫn đến file audio(có thể là thư mục chứa file audio hoặc một link có đường dẫn tuyệt đối đến file audio của một trang web nào đó)

format: định dạng file audio như (mp3…) Tag Iframe <iframe>

 Iframe được sử dụng như một khung để cho phép hiển thị nội dung của một trang web bên trong nó

 Cú pháp: <iframe src="url" title="description"></iframe>

 Một số thuộc tính của iframe

src: đường dẫn địa chỉ của trang web cần đưa vào khung iframe width, height: độ rộng, chiều cao của iframe

border: viền cho iframe Nếu muốn bỏ viền ta sẽ style giá trị như sau:[style=“border:none;”] Trong html 5 viền của frame set bởi thuộc tính frameborder mặc định là 0

title: mô tả trang web trong khung iframe

15

name: có thể set name cho iframe trong trường hợp này mục đích

để có thể set target = “name” cho một thẻ link(<a>) HTML Layout

Khi truy cập vào một trang web nào đó điều đầu tiên ta có thể thấy là hình thức,

bố cục của trang web đó

Để tạo ra bố cục này ta sẽ sử dụng các phần tử HTML về cơ bản bao gồm các tag: header, nav, section, article, aside, footer cùng với một số kỹ thuật khác như CSS, javascript

Layout của một trang web: về cơ bản một trang web chia làm 4 phần chính

 Phần trên cùng: header phần này thường để banner của trang web

 Phần bên trái: aside nơi để các link liên kết nội trong website

 Phần bên phải: container nơi chứa nội dung trang web

 Phần cuối cùng: footer nơi chứa các thông tin email, nhà phát hành website, thông tin liên hệ

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng

vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động

16

JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng Là

một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp:

HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website.

CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…

JavaScript: Tạo nên những nội dung “động” trên website Cùng tìm hiểu rõ hơn ở phần

dưới đây

JS là viết tắt của JavaScript, khi có JS bạn sẽ hiểu đó đang nói đến JavaScript.

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Nó có thể can thiệp với các hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thể

Bạn thử truy cập vào một số website trên internet thì sẽ thấy có những hiệu ứng slide, menu xổ xuống, các hình ảnh chạy qua chạy lại rất đẹp tất cả các chức năng này

Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code

17

backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như Angular,

jQuery, RactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript Fullstack.

Các khái niệm liên quan đến JavaScript

Dưới đây là một số khái niệm về một số thuật ngữ liên quan đến JS để bạn có thể nắm được

và hiểu hơn khi tìm hiểu về JS là gì?

JavaScript Framework là gì?

Là thư viện được xây dựng dựa trên JS phục vụ cho từng mục đích và lĩnh vực khác nhau

JavaScript Framework là thư viện được xây dựng dựa vào ngôn ngữ lập trình JavaScript

Từ đó, mỗi framework được tạo ra để phục cho từng lĩnh vực khác nhau Bạn có thể tìm hiểu kỹ hơn về framework là gì, sẽ giúp bạn có thêm nhiều thông tin rõ ràng hơn Hiện nay,

có rất nhiều JavaScript Framework thông dụng như:

Reactjs: Thư viện dùng cho ứng dụng mobile.

Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy chủ.

Angular: Dùng để xây dựng ứng dụng Single Page….

Client-side JavaScript là gì?

Client-side JavaScript là form phổ biến được sử dụng phổ biến hiện nay Một trang web

không cần một HTML tĩnh, nhưng có thể bao gồm các chương trình có thể tương tác với người dùng hay điều khiển trình duyệt và tạo nội dung HTML động

Javascript hoạt động trên trang web như thế nào?

Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúng được tham

chiếu qua file js hoặc JavaScript

Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được download về máy client khi truy cập

Tại đây, chúng sẽ được hệ thống xử ý Vì vậy, bạn không cần phải tải về máy server rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đến client

Javascript dùng để làm gì?

18

Bên cạnh việc tìm hiểu javascript là ngôn ngữ gì thì chúng được sử dụng để làm gì cũng

rất quan trọng Việc nắm bắt được mục đích của ngôn ngữ đặc biệt này sẽ giúp bạn dễ dàng

sử dụng chúng hơn trong công việc Cụ thể như sau:

Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript chính là

getElementById () Chúng được sử dụng để tìm một phần tử của HTML với id =”demo”

và dùng để thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello JavaScript” tag<img>

Thay đổi giá trị thuộc tính HTML: Tổng quan về javascript còn có thể sử dụng để thay

đổi các giá trị của thuộc tính Ví dụ: thay đổi thuộc tính src (source) của

Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi thuộc tính

của HTML ở trên Ví dụ: document.getElementById(‘demo’).style.fontSize = ’35px;

Ẩn các phần tử HTML: Một hoạt động tiếp theo là Javascript có thể ẩn được các phần tử

HTML Chúng có thể được thực hiện thông qua hoạt động thay đổi kiểu hiển thị các phần

tử HTML

Hiển thị các phần tử HTML: Một điểm đặc biệt là JavaScript có thể hiển thị được các

yếu tố HTML ẩn Đồng thời, cũng có thể thực hiện được thông qua cách thay đổi kiểu hiển thị phần tử

Ngôn ngữ CSS:

19

CSS được viết tắt từ Cascading Style Sheets, là một ngôn ngữ lập trình web được thiết kế

với mục đích đơn giản quá quá trình làm cho trang web trở nên đẹp mắt hơn CSS xử lý phần giao diện của trang web, chúng ta có thể kiểm soát màu sắc của văn bản, font chữ khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục hình ảnh nên

sử dụng như thế nào là hợp lý và CSS luôn đi với với các ngôn ngữ khác với mục đích thiết

kế website bằng ngôn ngữ hiệu quả cao phục vụ cho các mục đích kinh doanh và còn hơn thế nữa

Lịch sử phát triển của CSS:

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML

không được thiết kế để gắn tag để giúp định dạng trang web

20

Cấu trúc của một đoạn CSS

Một đoạn CSS bao gồm các phần như thế này:

Tức là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính sẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối Một vùng chọn có thể sử dụng không giới hạn thuộc tính

Bootstrap:

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra

một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích

thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế

giao diện website

File chính của Bootstrap :

Dưới đây là 3 File chính giúp quản lý các chức năng của Website và giao diện người dùng:

Bootstrap.CSS

Bootstrap.JS

Glyphicons

Bootstrap.CSS

Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của các trang Web

HTML có nhiệm vụ quản lý cấu trúc và nội dung thì CSS sẽ xử lý bố cục của Website Vì vậy mà hai cấu trúc này phải tồn tại cùng nhau để thực hiện được hành động cụ thể Giờ bạn sẽ không phải tốn thời gian để chỉnh sửa thủ công chỉ để thay đổi một thiết kế nhỏ Thay vào đó, bạn có thể dùng CSS để tạo giao diện thống nhất trên nhiều Website mà không bị giới hạn

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng như bảng, bố cục hình Bạn cần mất một ít thời gian để CSS ghi nhớ hết tất cả các khai báo và bộ chọn

21

Bootstrap.JS

File JavaScript sẽ chịu trách nhiệm cho việc tương tác của các trang Web

Đây là phần cốt lõi vì chứa các File JavaScript, nó chịu trách nhiệm cho việc tương tác

của Website Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển sẽ sử dụng jQuery Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúp bạn thêm nhiều chức năng vào trang Web

Theo kinh nghiệm của tôi, jQuery sẽ thực hiện một số chức năng như:

Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một cách linh hoạt

Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript

jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS

Thêm một số tính năng động cho nội dung các trang Web của bạn

Tuy Bootstrap với các thuộc tính Element HTML và CSS có thể hoạt động tốt, nhưng vẫn

cần jQuery để tạo thiết kế Responsive Nếu thiếu đi phần này, bạn chỉ có thể dùng các phần tĩnh của CSS mà thôi

Glyphicons

22

Trong giao diện trang Web, phần không thể thiếu chính là Icons Chúng thường được liên kết với các dữ liệu nhất định và các hành động trong giao diện người dùng

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở khóa bộ Halflings

Glyphicons để bạn sử dụng miễn phí Tại bản miễn phí, tuy chỉ có giao diện chuẩn nhưng phù hợp với các chức năng thiết yếu

Nếu như bạn muốn có các Icon phong cách hơn thì có thể mua bộ bộ Icon Premium khác nhau Chắc chắn các Icon tại Glyphicons sẽ giúp cho trang Web của bạn trông đẹp và nổi bật hơn

CHƯƠNG 2: xây dựng giao diện cho website

2.1 Mô tả các chức năng chính của website

Một website cập nhật tin tức bóng đá là một website chuyên cung cấp và tổng hợp các thông tin mới nhất về bóng đá, bao gồm các giải đấu, các câu lạc bộ, các cầu thủ, các trận đấu, v.v… website cập nhật tin tức bóng đá có thể có nhiều chức năng khác nhau, tùy thuộc vào mục tiêu và đối tượng của website Tuy nhiên, một số chức năng chính của website cập nhật tin tức bóng đá là:

Xem tin tức bóng đá: Chức năng này cho phép người dùng xem các tin tức mới nhất về

bóng đá, được cập nhật liên tục từ nhiều nguồn khác nhau Người dùng có thể xem tin tức theo chuyên mục, theo giải đấu, theo câu lạc bộ, hoặc theo từ khóa

Xem kết quả bóng đá: Chức năng này cho phép người dùng xem kết quả của các trận đấu

bóng đá diễn ra trên toàn thế giới, được cập nhật nhanh chóng và chính xác Người dùng

có thể xem kết quả theo ngày, theo giải đấu, hoặc theo câu lạc bộ Người dùng cũng có thể xem chi tiết của từng trận đấu, bao gồm tỉ số, thời gian, đội hình, thống kê, sự kiện, v.v…

Xem video highlight: Chức năng này cho phép người dùng xem lại những pha bóng hay

và quan trọng của các trận đấu bóng đá đã diễn ra Người dùng có thể xem video highlight theo ngày, theo giải đấu, hoặc theo câu lạc bộ Người dùng cũng có thể xem video highlight của các cầu thủ nổi tiếng hoặc các pha bóng đẹp mắt

Xem lịch thi đấu: Chức năng này cho phép người dùng xem lịch thi đấu của các trận đấu

bóng đá sắp diễn ra trên toàn thế giới Người dùng có thể xem lịch thi đấu theo ngày, theo giải đấu, hoặc theo câu lạc bộ Người dùng cũng có thể xem thông tin chi tiết của từng trận đấu, bao gồm thời gian

23

Xem bảng xếp hạng: Chức năng này cho phép người dùng xem bảng xếp hạng của các

giải đấu bóng đá trên toàn thế giới Người dùng có thể xem bảng xếp hạng theo giải đấu, hoặc theo khu vực Người dùng cũng có thể xem thông tin chi tiết của từng giải đấu

Phần Tìm kiếm: giúp cho người dùng có thể tìm những tin tức cần thiết hoặc phù hợp với bản

thân một cách nhanh chóng mà không phải mất quá nhiều thời gian để đọc tiêu đề của từng bài báo

Phần mục lục: giúp cho người đọc tìm được các nhóm thông tin mà mình mong muốn, các bài

báo ở từng phần trong mục lục sẽ nằm cùng trong một giải đấu, khu vực,

Phần tường thuật: trang web chứa các bài tường thuật của các trận đấu giúp cho người đọc nắm

bắt được các diễn biến của trận đấu từ thời gian ghi bàn, các diễn biến lỗi, các pha sử lý , khi này người dùng sẽ có tất cả các thông tin của trận đấu mà không cần phải xem trận đấu đó

24

2.2 Thiết kế giao diện

*Giao diện trang chủ:

Chức năng của trang chủ : chứa các liên kết khác, ví dụ như: mục lục, menu Bên cạnh đó trang chủ còn chứa các bài báo mới, các thông tin nổi bật Người dùng có thể tương tác

để đến với các phần tin tức phù hợp với nhu cầu của mình hoặc có thể đọc các bài báo được hiển thị ở trang chủ Ví dụ: người dùng có thể ấn vào phần “video hightlight” ở

25

phần menu để có thể xem các pha sử lý hay và các bàn thắng có trong một trận đấu nào

đó

*Giao diện của một bài báo:

Chức năng của giao diện bài báo: trong giao diện này sẽ có chứa hình ảnh, nội dung thông tin của bài báo Khi này người dùng có thể tin tức bóng đá Khi ở trong giao điện này người dùng người dùng vẫn có thể tương tác để thay đổi nội dung một cách dễ dang

Ví dụ: khi bạn đang trong giao diện của bài báo bạn có thể trực tiếp chuyển qua bài báo

có rất nhiều video thế nên sau khi xem xong một video người dùng có thể xem tiếp các video khác hoặc không thì người dùng có thể chuyển qua các giao diện khác thông qua menu hoặc mục lục để đọc tin tức bóng đá, xem lịch thi đấu, xem kết quả các trận đấu đã

diễn ra

28

*Giao diện tỉ số:

Chức năng của giao diện tỉ số: ở phần giao diện này sẽ cung cấp cho người dùng thông tin về tỉ số của các trận đấu đã diễn ra Sau khi xem tỉ số người dùng có thể chuyển giao diện một cách dễ dàng thông qua menu và mục lục hoạc nếu người dùng muốn đọc nhữn tin nó thì có thể trọn trực tiếp một bài báo muốn đọc ở trong phần tin nóng