thiết kế giao diện web tin tức

Trong đó, có các lý do chính khiến cho doanh nghiệp cần sở hữu một website của riêngmình như sau: - Website – văn phòng thứ hai của mọi doanh nghiệp.. - Hơn cả giá trị cung cấp thông tin

MỤC LỤC

LỜI CẢM ƠN

LỜI MỞ ĐẦU

1.3 Nguyên nhân tại sao cần phải thiết kế Website 6

3.2 Khi chạy thuật toán tìm dãy con tăng dài nhất 21

LỜI MỞ ĐẦU

Trên thế giới hiện nay, tin học là một ngành phát triển không ngừng Có thể nói tin học đã chiếm một vị trí quan trọng trong cuộc sống hàng ngày và trong các ngành khoa học kỹ thuật Trong những năm gần đây cùng với sự phát triển chung của ngành tin học thế giới và khu vực, ngành tin học nước ta đó có bước phát triển nhất định

Việc đưa tin học vào công việc quản lý nhằm giảm bớt sức lao động của con người, tiết kiệm thời gian, độ chính xác cao và tiện lợi hơn rất nhiều so với việc làm quản lý giấy tờ bằng thủ công như trước đây Tin học hóa nhằm thu hẹp không gian lưu trữ, tránh làm thất lạc dữ liệu, tự động hóa và cụ thể hóa các thông tin theonhu cầu của con người Còn ở Việt Nam, ngành tin học tuy còn non trẻ nhưng cũng đang từng bước bứt phá được những thành công trong việc áp dụng tin học vào việc phát triển kinh tế, xã hội Tuy nhiên để có thể quảng bá hình ảnh sản phẩm và tin tức đến với nhiều người dùng hơn nên họ đã phát triển ra các trang web để phổ biến tiếp cận đến nhiều người Cũng từ đó ngành thiết kế website là một ngành vô cùng hot, chúng em đã chọn đề tài “thiết kế giao diện web tin tức” cho báo cáo lần này

Nhận thấy đây là một trong những ngành được ưa chuộng rất nhiều tại ViệtNam cũng như trên toàn thế giới Chúng em đã cảm thấy rất phấn khích khi nhậnthấy điều đó và đã phải chuẩn bị rất nhiều thời gian, tài liệu để hoàn thành báo cáonày

Chúng em xin cảm ơn thầy giáo Cù Việt Dũng đã hướng dẫn nhiệt tình giúp

chúng em hoàn thành được đề tài của mình với một bài toán quản lý Trong quátrình làm bài, chắc chắn chúng em sẽ mắc phải những thiếu sót nên rất mong nhậnđược sự đóng góp ý kiến của thầy để chúng em có cơ hội sửa sai, phát triển trongthực tế và từng bước hoàn thiện mình

Chúng em xin chân thành cảm ơn!

CHƯƠNG 1: GIỚI THIỆU TRANG WEB

1.1 Giới thiệu chung về website

Website (tiếng Anh: website[1]), còn gọi là trang web (có thể nhầm lẫn với "web

page") hoặc trang mạng, là một tập hợp trang web, thường chỉ nằm trong một tên

có thể được xây dựng từ các tệp tin HTML (trang mạng tĩnh) hoặc vận hành bằng

ASP.NET, Java, Ruby on Rails, Perl, )

Website được giao tiếp và hiển thị cho người dùng truy cập bằng các phần mềmđược gọi là trình duyệt website Một sô trình duyệt website nổi tiếng có thể kể đến

windows và được thay thế bởi Edge trên Windows 10 hay Chrome được phát triểnbởi Google và Firefox được phát triển bởi Mozilla

1.2 Các loại website

+ Website tĩnh: là website mà người quản trị (những người không phải làlập trình viên) không thể tùy ý thay đổi nội dung và hình ảnh mà phải

+ Website động: website được viết kèm theo một bộ công cụ quản trị đểtùy biến nội dung dành cho webmaster (người quản trị) có thể dễ dàng

thay đổi nội dung, hình ảnh Website động được thiết kế bởi các lậptrình viên để làm sao cho phép website có thể thay đổi được nội dung thường xuyên Một số công nghệ, ngôn ngữ để xây dựng website động

1.3 nguyên nhân tại sao cần phải thiết kế website?

Hiểu được website là gì bạn chắc chắn không thể bỏ qua tầm quan trọng củawebsite, nhất là đối với các doanh nghiệp cung cấp các sản phẩm, dịch vụ Trong

đó, có các lý do chính khiến cho doanh nghiệp cần sở hữu một website của riêngmình như sau:

- Website – văn phòng thứ hai của mọi doanh nghiệp Nếu như văn phòng trongthực tế là nơi để thực hiện các giao dịch của doanh nghiệp và qua đó để thể hiệnđược bộ mặt của doanh nghiệp, để doanh nghiệp gây ấn tượng với khách hàng Thìwebsite cũng được ví như là một văn phòng thứ hai của doanh nghiệp trên Internet.Thông qua website, khách hàng đã có thể cập nhật được những thông tin về doanh

nghiệp, về sản phẩm, về dịch vụ của bạn Bên cạnh đó, phong cách thiết kế ấntượng cũng sẽ tạo nên dấu ấn của bạn trong lòng khách hàng.

- Website giúp khẳng định thương hiệu và là công cụ cạnh tranh với đối thủ Khikhách hàng có nhu cầu tìm kiếm bất kỳ thông tin về sản phẩm, dịch vụ hành độngđầu tiên của khách hàng chính là tìm kiếm thông tin trên Internet Ngay lúc này,phải chăng website chính là một công cụ chính để bạn cạnh tranh và thu hút kháchhàng hơn so với đối thủ cạnh tranh Không chỉ cần hiểu website là gì mà doanhnghiệp bạn cần sở hữu ngay một website chuyên nghiệp để thu hút khách hàng vàcạnh tranh với đối thủ

- Website sẽ là nơi cung cấp nguồn thông tin hữu ích Tất tần tật mọi thông tin màbạn mong muốn truyền tải đến khách hàng đều có thể thông qua website Bởi theođịnh nghĩa website là gì, website đã được giải mã là một trang thông tin đặc biệtdành cho khách hàng Tất cả mọi thông tin về doanh nghiệp, dịch vụ, sản phẩm đếnchương trình khuyến mãi, hướng dẫn sử dụng, chia sẻ bí quyết bạn đều có thể cậpnhật trên trang web của mình Tuy nhiên, mọi thông tin cần được thể hiện một cách

rõ ràng, mạch lạc để tạo nên sự thu hút đối tượng mục tiêu mà bạn nhắm đến

- Không chỉ bán hàng, website còn là kênh để thực hiện các công việc giao tiếp vàchăm sóc khách hàng 24/24 Một trong những ưu điểm đặc biệt nhất của website sovới bất kỳ công cụ nào khác là cho phép sự tương tác từ 2 phía giữa khách hàng vàdoanh nghiệp Bạn có thể tận dụng website để thực hiện các cuộc khảo sát nho nhỏ

để hiểu khách hàng mình hơn hay thu thập những đánh giá của khách hàng vềdoanh nghiệp của mình Từ những nguồn thông tin quý báu này, bạn đã có thể dễdàng cải thiện chất lượng sản phẩm, dịch vụ của mình sao cho phù hợp nhất vớikhách hàng mà không cần tốn quá nhiều thời gian, chi phí cho các cuộc khảo sát

- Hơn cả giá trị cung cấp thông tin và bán hàng, website còn là một trong nhữngyếu tố không thể thiếu để doanh nghiệp thực hiện các kế hoạch Marketing củamình Với sự phát triển không ngừng của Internet, Marketing Online cũng trở thànhmột công cụ đắc lực để doanh nghiệp thu hút khách hàng bên cạnh các phươngpháp Marketing truyền thống Để thực hiện được điều đó, chắc chắn không thểthiếu website Chính vì vậy, các doanh nghiệp cần hành động ngay để sở hữu chomình môt website chuyên nghiệp cho các kế hoạch phát triển, định hướng dài hạn

CHƯƠNG 2: THIẾT KẾ TRANG WEB

Để thiết kế website này, mình sẽ sử dụng chủ yếu 3 ngôn ngữ cơ bản nhất làHTML để xây dựng lên bố cục website và dùng CSS để tô điểm cho trang web đẹphơn, sau cùng sẽ sử dụng Javascript để tạo một số hiệu ứng cho website

2.1 Xây dựng trang chủ

Trang chủ là trang quan trọng nhất của website, khi người dùng click vào đườnglink của trang web thì sẽ hiển thị lên trang chủ đầu tiên Ở trang chủ sẽ được sắpxếp khối tất cả các tin tức một cách bao quát nhất để khi chỉ cần lướt qua ta cũng cóthể biết được khối lượng các tiên tức, tin chính của các loại tin tức

2.1.1 Chia khối cho trang chủ

Đầu tiên mình sẽ sử dụng ngôn ngữ HTML để xây dựng các khối trong trang chủbằng các thẻ <div> Ở đây mình sẽ chia ra làm 3 khối cho trang chủ đó là phầnthanh menu, nội dung và phần chân trang bằng:

Sau đó mình sẽ CSS một chút cho đẹp và hiển thị rõ các khối này khi chạy demo.

2.1.2 Thiết kế từng khối

- thanh menu:

Mình sẽ tạo một menu gồm một số trang tin tức chính, bằng cách thêm một

số khối con vào thẻ <div> của menu đồng thời cũng chỉnh css để tạo thànhmột menu hoàn chỉnh:

Kết quả sau khi sửa thêm CSS

Đồng thời mình sẽ chèn thêm phần logo của trang lên trên cho bắt mắt và sửalại màu phần nội dung:

Từ đó mình thu được kết quả:

- Nội dung

Trong phần nội dung này mình sẽ chỉ sử dụng một khối ở giữa để up các thông tinlên và để cách 2 bên tạo khoảng trống cho trang web thêm chuyên nghiệp bằngcách thêm thẻ <div id =”giua”> vào trong phần nội dung của trang sau đó CSS:

Ở trong, phần này mình sẽ chia ra 3 khối nhỏ mỗi khối tương ứng với các bài viếttrong trang con là: tin tức hot, tin tức thời sự, tin tức thể thao

Mỗi khối sẽ chia nhỏ thêm ra làm 2 bài viết mỗi bài viết sẽ mỗi bài viết sẽ có 2phần là logo và text:

2.2 Xây dựng trang con.

Ở trang con mình sẽ tạo 3 trang con chính là: trang tin tức hot, trang tin tức thời sự,trang tin tức thể thao ứng với 3 khối lớn ở trang chủ

2.2.1 Thiết kế trang con

Trong phần trang con này mình coppy y nguyên code của trang chủ, nhưng chỉ giữlại khối tin tức hot và loại bỏ 2 khối còn lại

Chỉ sửa <title> và thẻ giới thiệu ta thu được:

Tương tự như vậy mình làm tiếp với 2 trang còn lại là tin tức thời sự và tin tức thểthao Để các trang này liên kết với nhau mình cho tất cả vào 1 mục + ảnh và càiđường dẫn các thẻ <a> ở thanh menu:

2.2.2 Thiết kế bài viết

Trong bài viết mình chỉ lấy khung của trang chủ và nội dung để trống

Ở nội dung mình sẽ tạo title cho bài viết bằng thẻ <h1>

và thẻ <br> để xuống dòng tiếp đến sẽ là ảnh minh họa của bài viết bằng thẻ

<img>

từ đây mình sẽ cho xuống dòng 2 lần để tạo khoảng trống và bo toàn nội dung bàiviết là thẻ <h6> mỗi dòng của nội dung cách nhau bằng 2 thẻ <br>

kết thúc ta được 1 trang bài viết hoàn chỉnh:

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

Để có thể click vào ảnh và link đế các bài viết này, mình sẽ chèn thẻ <a> vào tất cảcác ảnh đại diện

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

tạo hiệu ứng khu di chuột vào ảnh sẽ được zoom to ra:

bằng cách chỉnh CSS hover:

Cứ như vậy với tất cả các bài viết còn lại mình thu được một trang tin tức trên giaodiện desktop hoàn chỉnh

2.3 Responsive toàn trang

Để responsive được mình sẽ phải thêm thẻ <meta> vào phần <head> ở đầu của tất

cả các trang và bài viết:

Sau đó ở phần Responsive này mình sẽ chia ra làm 3 giai đoạn chiều rộng width+ 1: từ 0px đến 800px

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

Tiếp theo là responsive với width 800px đén 1142px:

Do phần giữa ở nội dung mình cài từ đầu là:

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

margin: auto;

margin-left: 20%;

kết hợp với chỉnh sửa chân trang:

nên đã thu được kết quả sau:

Như vậy có thể thấy ở giao diện của máy tính bảng sẽ không còn khoảng cách 2bên như ở laptop nữa thay vào đó nội dung sẽ được full màn hình

Và cuối cùng là width từ 1142px trở lên mình đã sửa đa số các đơn vị từ px sang %

để có thể kéo giãn tùy thích Đây là giao diện desktop nên sẽ không có nhiều khácbiệt

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

CHƯƠNG 3 : KẾT QUẢ ĐẠT ĐƯỢC

3.1 Ý nghĩa

Ngày nay, số lượng website tin tức riêng ở Việt Nam đã là một con số không thểđếm được, nội dung cập nhật, tin tức mỗi ngày tương đối là giống nhau Điều thu

hút người truy cập ở đấy chính là nằm ở thiết kế web tin tức, giao diện bắt mắt, bố

cục rõ ràng dễ dàng tìm kiếm, dung lượng ít, tải nhanh,… Nếu các doanh nghiệpđang có ý định xây dựng một trang báo mạng cho riêng mình thì cần phải chú ý đếncác đặc điểm kể trên và tạo dựng cho website của mình một ấn tượng riêng, mộtphong cách riêng, như vậy mới thu hút được độc giả internet hết sức nhạy bén vàbiết chọn lọc như hiện nay

Sau rất nhiều ngày lên ý tưởng và thiết kế giao diện trang web tin tức chỉ bằngngôn ngữ HTML, CSS và JAVASCRIFT Chúng em đã hoàn thành xong bằng codethuần 100% Nhằm nâng cao trình độ lập trình website và thiết kế bắt mắt

3.2 Tính năng của web tin tức

Website tin tức là dạng web khá đặc thù vì nội dụng và thông điệp mà nó truyền tảiđến là tất cả những sự kiện, tin tức diễn ra trong xã hội hàng ngày Do đó, khi thiết

kế web tin tức cần phải tuân thủ những tiêu chuẩn khắt khe về kỹ thuật, mỹ thuật,các khâu thiết kế và xây dựng nên một trang web tin tức, nội dung của trang web và

bố cục bài trí của trang web phải đặt như thế nào Sau đây là những tính năng cần

có khi thiết kế website tin tức:

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

● Website tin tức cung cấp đầy đủ các tính năng cơ bản của một website như:

quản lý bài viết, quản lý hình ảnh, quản lý quảng cảo, hỗ trợ tìm kiếm, thống kê… không giới hạn về số lượng bài viết, ký tự hay thời điểm đăng tải

● Khi thiết kế webiste dạng này với đặc thù riêng là phải phục vụ đến nhiều đối tượng đọc giả trên toàn cầu nên cần thiết kế web đẹp, giao diện và bố cụcđơn giản, máy chủ ổn định và chịu tải cao, dung lượng và băng thông lớn, tốc độ truy cập nhanh và rất thuận tiện cho người tìm kiếm

● Mức độ kỹ thuật của một website tin tức không chỉ thể hiện ở giao diện người dùng, mà còn thể hiện trong hệ thống quản trị nội dung (CMS) cho phép phân quyền nhiều cấp theo yêu cầu quản trị viên như các thành viên chỉđược quyền đăng tin, các thành viên chỉ được quyền đăng video, các thành viên được duyệt bài viết, các thành viên được quyền public bài viết và nhiều tính năng phần quyền khác

● Có tính năng đặt lịch hẹn giờ bài viết và thống kê lưu lượng người dùng truy cập vào website và xem bài viết trong quản trị

● Tương thích với mọi thiết bị và tích hợp với các mạng xã hội

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

● Cho phép người dùng đăng ký thành viên để chia sẻ thông tin, bình luận…

● Và nhiều kỹ thuật đặc trưng khác sử dụng hệ thống lấy dữ liệu tự động, giải pháp chống quá tải và tắc nghẽn đường truyền, tài nguyên phần cứng,… Tínhnăng tự động backup, cho phép phục hồi website bất cứ khi nào nếu có xảy

ra sự cố không may xảy ra như lỗi server, tràn bộ đệm,…

Sở hữu một website tin tức trong thời đại ngày nay chính là một vũ khí sắc bén giúp bạn tăng cường doanh về nhiều mặt Trên đây là sơ bộ về những tính năng cầnthiết trong việc thiết kế website tin tức mà bạn có thể tham khảo khi có ý định làm một website tin tức Chúc các bạn thành công

Downloaded by v? ngoc (vuchinhhp10@gmail.com)

KẾT LUẬN

Công nghệ thông tin mở ra triển vọng to lớn trong việc đổi mới các phương pháp và hình thức dạy học Những phương pháp dạy học theo cách tiếp cận kiến tạo, phương pháp dạy học theo dự án, dạy học phát hiện và giải quyết vấn đề càng

có nhiều điều kiện để ứng dụng rộng rãi

Tiếp thu và ứng dụng những thành tựu của công nghệ thông tin trong công việc kinh doanh Cùng với việc sử dụng công nghệ thông tin thực hành cho việc giải các bài toán khó là vô cùng cần thiết Toán học là gốc rễ của tất cả mọi lĩnh vựctrong cuộc sống, giúp chúng ta hoàn thành công việc với độ chính xác cao nhất và với cách tối ưu nhất

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

Sau thời gian nghiên cứu và thực hiện, đề tài đã đạt được các yêu cầu đề ra như sau: Thiết kế giao diện trang web tin tức bằng HTML,CSS và JAVASCRIPT bắt mắt, tiện dụng tới tốc độ xử lý cao

- Lên ý tưởng và tìm hiểu sâu về các ngôn ngữ lập trình website như HTML, CSS và JAVASCRIPT để thiết kế lên giao diện website tin tức

- Thiết kế thành công website tin tức bằng 3 ngôn ngữ trên với một số hiệu ứng và sự kiện cơ bản

Downloaded by v? ngoc (vuchinhhp10@gmail.com)