học phần thiết kế giao diện web báo cáo về website giới thiệu về hà nội

Hiện nay, việc thiXt kX m`t trang website đã trởnên dễ dàng hơn va có nhiều công c\ hỗ trợ tiện lợi, để thiXt kX được m`t trangweb chZng ta cJn phải hiểu rõ bản chất và cách hoOt đ`ng củ

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC PHENIKAA -oOo -

HỌC PHẦN THIẾT KẾ GIAO DIỆN WEBBÁO CÁO VỀ WEBSITE GIỚI THIỆU VỀ HÀ NỘI

Nhóm sinh viên thực hiện: 3 thành viênBao gồm:

1.Nguyễn Thị Thanh Huyền MSSV: 22013534

2 Lê Nguyễn Gia Huy

3 Nguyễn Hoài Nam

MSSV: 22014366 MSSV: 22013038Giảng viên: Ths Nguyễn Thị Hồng Hoa

Khoa: Công Nghệ Thông Tin

PHẦN THÔNG TIN CƠ BẢN1.Thông tin cán bộ hỗ trợ, hướng dẫn:

1.1 Họ và tên: Ths Nguyễn Thị Hồng Hoa

1.2 Đơn vị: Khoa Công Nghệ Thông Tin

2 Tên tập thể tác giả

Nguyễn Thị Thanh Huyền 22013534 22013534@st.phenikaa-uni.edu.vn

Lê Nguyễn Gia Huy 22014366 22014366@st.phenikaa-uni.edu.vn

Nguyễn Hoài Nam 22013038 22013038@st.phenikaa-uni.edu.vn

3 Phân công nhiệm vụ

Nội dung công việcSinh viên thực hiện

Nav footer, Giao diện của home Báo cáo Nguyễn Hoài Nam

Tổng hợp code, giao diện du lịch của website

Nguyễn Thị Thanh HuyềnGiao diện của Ẩm thực của Website Lê Nguyễn Gia Huy

2

LỜI MỞ ĐẦU

NhHng nIm gJn đLy, Ngành Du lịch ngày càng lNn mOnh, việc quảng bádu lịch ngày càng giH vai trò quan trọng trong các đời sống ĐTc biệt vNi sựxuất hiện của Website du lịch ngày nay đã khiXn nhiều cá nhLn, doanh nghiệplNn nhỏ ngày càng chZ [ hơn tNi việc áp d\ng nó để cOnh tranh, trưng bày sảnphẩm và tOo cơ h`i cho manh Hiện nay, việc thiXt kX m`t trang website đã trởnên dễ dàng hơn va có nhiều công c\ hỗ trợ tiện lợi, để thiXt kX được m`t trangweb chZng ta cJn phải hiểu rõ bản chất và cách hoOt đ`ng của ngôn ngH đánhdấu siêu vIn bản HTML (Hypertext Markup Language), kèm theo việc áp d\ngCSS (Cascading Style Sheets) và JavaSript, nó tOo thành b` ba công nghệ nềntảng cho World Wide Web (WWW) Lợi ích của CSS mang lOi là rất lNn, hỗtrợ các đoOn mã của HTML được tối ưu hơn, dễ nhan hơn, dễ chỉnh sửa hơn.Riêng về ngôn ngH JavaSript đã làm cho trang web sinh đ`ng hơn, bắt mắt vàtOo được thiện cảm vNi người nhan B` ba này bù đắp cho nhau nhHng thiXu sótđể thống nhất thành m`t thể hoàn chỉnh, từ đó tOo điều kiện cho nhiều cá nhLn,doanh nghiệp dễ dàng tiXp cận công nghệ web để tOo ra m`t website ph\c v\cho công việc, đời sống của nhHng người muốn khám phá về thủ đô Hà N`i nóichung và toàn b` Việt Nam nói riêng Va vậy, để nắm bắt được yêu cJu trênnên nhóm bọn em đã quyXt định thiXt kX m`t website giNi thiệu về Hà N`i vNicái tên TOP 10 HANOI ( TOP 10 HANOI là sẽ m`t trang web giNi thiệu về cácđịa điểm du lịch, giải trí, mua sắm, ẩm thực và các dịch v\ uy tín tOi thành phốHà N`i Trang web này cung cấp thông tin khách quan giZp người dùng có cáinhan tổng quan về nhHng nơi và dịch v\ đáng tin cậy, được đánh giá cao tOi HàN`i ).

MỤC LỤC

NỘI DUNG

LỜI MỞ ĐẦU

MỤC LỤC

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1.1Giới thiệu tổng quan về Internet

a Giới thiệu về JavaSript

b Cách thức hoạt động của JavaScript

c Cách sử dụng JavaScript:

CHƯƠNG II: PHÂN TÍCH CẤU TRÚC & XÂY DỰNG WEBSITE

2.1Cấu trúc lưu trữ

2.2Cấu trúc trang:

2.3Phân tích cấu trúc mỗi site:

CHƯƠNG III: MÔ TẢ CÁC KỊCH BẢN SỬ DỤNG ĐỐI VỚI WEBSITE ĐÃ XÂY DỰNG

3.1 Nhu cầu người dùng:

TÀI LIỆU THAM KHẢO………

Minh họa Internet

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1.1Giới thiệu tổng quan về Internet – Dịch vụ web

- Internet hay còn gọi là MOng là m`t hệ thống thông tin toàn cJu có thểđược truy nhập công c`ng gồm các mOng máy tính được liên kXt vNinhau Hệ thống này truyền thông tin theo kiểu nối chuyển gói dH liệu(packet switching) dựa trên m`t giao thức liên mOng đã được chuẩn hóa(giao thức IP) Hệ thống này bao gồm hàng ngàn mOng máy tính nhỏ hơncủa các doanh nghiệp, của các viện nghiên cứu và các trường đOi học,của người dùng cá nhLn và các chính phủ trên toàn cJu, được liên kXt bởim`t loOt các công nghệ mOng điện tử, không dLy và mOng quang.Internet mang theo m`t loOt các tài nguyên và dịch v\ thông tin, chẳnghOn như các tài liệu và ứng d\ng siêu vIn bản được liên kXt vNi nhaucủa World Wide Web (WWW), thư điện tử, điện thoOi và chia sẻ file.

- Internet mang nhiều ứng d\ng và dịch v\, nổi bật nhất là World Wide

Web, bao gồm phương tiện truyền thông xã h`i, thư điện tử, ứng d\ng diđ`ng, trò chơi trực tuyXn.

- HJu hXt các máy chủ cung cấp các dịch v\ ngày nay được lưu trH trong

các trung tLm dH liệu và n`i dung thường được truy cập thông qua cácmOng phLn phối n`i dung hiệu xuất cao.

6

- Bằng cách dùng HTML đ`ng hoTc Ajax, lập tranh viên có thể được tOo ravà xử l[ bởi số lượng lNn các công c\, từ m`t chương tranh soOn thảo vInbản đơn giản – có thể gõ vào ngay từ nhHng dòng đJu tiên – cho đXnnhHng công c\ xuất bản WYSIWYG phức tOp Hypertext là cách mà cáctrang Web (được thiXt kX bằng HTML) được kXt nối vNi nhau Và nhưthX, đường link có trên trang Web được gọi là Hypertext Như tên gọi đãnói, HTML là ngôn ngH đánh dấu bằng thẻ (Markup Language), nghĩa làbOn sử d\ng HTML để đánh dấu m`t tài liệu text bằng các thẻ (tag) đểnói cho tranh duyệt Web cách để cấu trZc nó để hiển thị.

b Cấu trúc cơ bản và một số thẻ thông dụng của HTML

- Cấu trZc cơ bản của HTML: 1<html>

2 <head>

3 <title>TIÊU ĐỀ CỦA TRANG WEB</title> 4 CÁC THẺ KHAI BÁO THÔNG TIN TRANG WEB 5</head>

6 <body>

7 NHỮNG NỘI DUNG MÀ CHUNG TA MUỐN HIỂN THỊ TRÊN TRANG WEB

8 </body> 9</html>

script> Dùng để nhZng các tập tin JavaScript none7 <style></style> Dùng để bao bọc m`t n`i dung về CSS none8 <body></body> Thẻ chứa n`i dung chính của website blocklevel9 <h1></h1> Thẻ để thể hiện tiêu đề của m`t vấn đề nào

10 <div></div> Thẻ này là thẻ thường dùng để chứa n`idung blocklevel11 <span></span> Thẻ chứa n`i dung inline12 <p></p> Thẻ chứa n`i dung (đoOn vIn) blocklevel

14 <ul></ul> KXt hợp vNi thẻ <li> để mô tả liệt kê theodOng danh sách blocklevel15 <img> Thẻ dùng để hiển thị m`t hanh ảnh nào đó Inline

8

18 <br> Thẻ xuống hàng blocklevel19 <hr> Thẻ tOo đường kẻ ngang levelblock20 <table></table> TOo bảng blocklevel

24 <u></u> TOo chH gOch chLn inline25 <s></s> TOo chH gOch cắt ngang inline27 <button>

</button> TOo nZt bấm hiển thị thêm thông tin

blocklevel29 <pre></pre> Định dOng n`i dung levelblockVà còn nhiều m`t số thẻ khác như <nav>, <option>,v.v…

- Entities:

ResultDescriptionEntity NameEntity Number

non-breaking space &nbsp; &#160;

a Giới thiệu về CSS

- CSS (viXt tắt của từ Cascading Style Sheets) được dùng để miêu tả cáchtranh bày các tài liệu viXt bằng ngôn ngH HTML và XHTML Ngoài rangôn ngH định kiểu theo tJng cũng có thể dùng cho XML, SVG, XUL.Các đTc điểm kỹ thuật của CSS được duy tra bởi World Wide WebConsortium (W3C) Thay va đTt các thẻ quy định kiểu dáng cho vInbản HTML (hoTc XHTML) ngay trong n`i dung của nó, bOn nên sửd\ng CSS.

b Công dụng của CSS

- HOn chX tối thiểu việc làm rối mã HTML của trang Web bằng các thẻquy định kiểu dáng (chH đậm, chH in nghiêng, chH có gOch chLn, chHmàu), khiXn mã nguồn của trang Web được gọn gàng hơn, tách n`i dungcủa trang Web và định dOng hiển thị, dễ dàng cho việc cập nhật n`i dung.- TOo ra các kiểu dáng có thể áp d\ng cho nhiều trang Web, giZp tránh

phải lTp lOi việc định dOng cho các trang Web giống nhau.

10

body font-family { :verdana; color:#0000FF;}

 Tham chiXu tNi tệp tin CSS trên từ trang Web bằng đoOn mã (mã có thể nằm ngoài thẻ <head>):

2 font-size Kích thưNc của vIn bản

3 font-style Định kiểu cho font chH nghiêng hay thẳng4 font-variant Định kiểu cho font chH thường hoTc chH

5 font-weight Kiểu của chH

6 line-height Chiều cao giHa các dòng của vIn bản7 text-transform

Định dOng hiển thị của font chH trong vInbản như chH hoa, chH thường, chH cái đJuviXt hoa

8 text-decoration Định dOng các trang trí thêm cho vIn bản

 Background Group: định dOng hanh ảnh nền cho đối tượng nào đó.

STTNhóm thuộc tínhMiêu tả

1 letter-spacing Khoảng cách giHa các k[ tự

2 word-spacing trong đoOn vIn bảnTIng hoTc giảm khoảng cách giHa các từ 3 text-align Sắp xXp các n`i dung theo chiều ngang4 text-indent đoOn vIn bảnKhoảng cách thu`c vào đJu dòng của m`t5 white-space vIn bảnĐịnh dOng cho khoảng trắng trong đoOn 6 display Các kiểu hiển thị của m`t phJn tử HTML7 vertical-alignn Vị trí của m`t phJn tử

 Border Group: định dOng đường viền cho m`t đối tượng nào đó.

border-top-width, border-right-widthborder-bottom-width, border-left-width

Đ` r`ng của đường viền

border-top-style, border-right-styleborder-bottom-style, border-left-style

Kiểu hiển thị của đường viền

bottom, margin-left

Khoảng cách đối vNi phJn tử bên ngoài4 paddingpadding-top, padding-right, padding-

Hình minh họa các # màucơ bản CSS

6 clear

Xoá các thu`c tính float của các phJn tử phía trên

 List Group: định dOng cho các danh sách.

1 list-style-position

Vị trí của icon <li>, giá trị mTc định là outsite

2 list-style-type Kiểu icon của <li>3 list-style-image Hanh ảnh icon của <li> Position Group: định dOng tọa đ` của m`t phJn tử HTML nào đó.

7 overflow, overflow-x, overflow-y ChX đ` hiển thị thanh cu`n

e Bảng màu CSS

a Giới thiệu về JavaSript

- JavaScript, theo phiên bản hiện hành, là m`t ngôn ngH lập tranh thôngdịch được phát triển từ các [ niệm nguyên mẫu Ngôn ngH này đượcdùng r`ng rãi cho các trang web (phía người dùng) cũng như phía máychủ (vNi Nodejs) Nó vốn được phát triển bởi Brendan Eich tOi Hãngtruyền thông Netscape vNi cái tên đJu tiên Mocha, rồi sau đó đổi tênthành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScriptcó cZ pháp tương tự C, nhưng nó gJn vNi Self hơn Java .js là phJn mởr`ng thường được dùng cho tập tin mã nguồn JavaScript.

- JavaScript là ngôn ngH phức tOp hơn HTML hoTc CSS và nó không đượcphát hành ở dOng beta cho đXn nIm 1995 Ngày nay, JavaScript được hỗtrợ bởi tất cả các tranh duyệt web hiện đOi và được sử d\ng trên hJu hXtmọi trang web để có chức nIng mOnh mẽ và phức tOp hơn.

b Cách thức hoạt động của JavaScript

JavaScript là ngôn ngH lập tranh dựa trên logic, có thể được sử d\ng đểsửa đổi n`i dung trang web và khiXn nó hoOt đ`ng theo nhiều cách khácnhau để đáp ứng vNi hành đ`ng của người dùng Các cách sử d\ng phổbiXn cho JavaScript bao gồm confirmation boxes, calls-to-action, vàthêm thông tin mNi vào thông tin hiện có.

- Nói tóm lOi, JavaScript là ngôn ngH lập tranh cho phép các nhà phát triểnweb thiXt kX các trang web tương tác HJu hXt các hoOt đ`ng mà bOn sẽthấy trên m`t trang web là nhờ JavaScript, giZp tIng cường các kiểmsoát và hành vi mTc định của tranh duyệt.

14

c Cách sử dụng JavaScript:

- Sử d\ng thẻ <script> đoOn mã JavaScript… </script>

- Tham chiXu dưNi dOng thư viện : sử d\ng tag link theo cZ pháp <script type =”text/javascript” src=”url_trỏ_đXn _file_js”></script>Tam hiểu thêm về JQuery tOi đLy: https://www.w3schools.com/jqueryTheo dõi Youtube BODUA Group để tam hiểu về JavaScript nói riêng và ThiXt kX Web nói chung:

https://www.youtube.com/channel/UCf3vstUYEnFWVjWumM3Ij3g

CHƯƠNG II: PHÂN TÍCH CẤU TRÚC & XÂY DỰNGWEBSITE

2.1Cấu trúc lưu trữ

- TOo 1 thư m\c theo yêu cJu vNi tiêu đề: “Nhóm”

- Chứa website giao diện trang chủ (index.html), các được giNi thiệu vào,

mở bán và trưng bày c\ thể như và cuối cùng là thư m\c hanh ảnh

(images) và tệp định dOng (style.css).2.2Cấu trúc trang:

- Giao diện trực quan, đơn giản nhưng không kém phJn bắt mắt, giZpngười dùng có thể tam kiXm nhHng sản phẩm được trưng bày m`t cách dễdàng va các website đã được liên kXt chTt chẽ.

- Hiện tOi, trang web đang chứa n`i dung thu`c thể loOi trưng bày, mô tảvà giNi thiệu về các địa điểm ẩm thực và du lịch tOi Thủ đô Hà N`i.

2.3Phân tích cấu trúc mỗi site:

- Trang chủ gồm 3 phJn:

16

 Thanh điều hưNng: dùng thẻ <nav> , được tOo ra tỉ mỉ trong quá tranhthiXt kX size, font, color, và là cJu nối trong việc liên kXt các site khácvNi nhau.

"https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- "https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi- </ >a      </div>

      <divclass="menu-item">        <ul>

          <li>

            <href="#">              <h4>Ẩ(m Thực</h4>            </ >a

          </li>

// Tương tự với các thư mục khác        </ul>

      </div>    </div>  </nav> KXt quả :

+ PhJn thứ hai, tOo ra thư m\c chính cho home của web , gồm các thẻ<span> , <p> và < button> để giNi thiệu lược về trang web này

 <divclass="main">

    <divclass="content-box">      <h2>

        <span>TOP 10 Hà Nội</span> - TOP CÁC ĐỊA ĐIỂ(M, DỊCH VỤUY TÍN TẠI HÀ NỘI

    </div>  </div>

+ NZt <button> ( Xem thêm ) khi ta nhấp chu`t vào dòng lệnh <script>   <script>

 varloadMoreBtn = document.getElementById('loadMoreBtn');

loadMoreBtn.addEventListener('click', function () {  alert('Button clicked! You can add your logic here.');});

  </script>+ KXt quả:

+ PhJn tiXp theo, dùng thẻ < div > tOo ra tiêu đề thư m\c “ Khám phá danh m\c“ và dùng các thẻ < span >,<a>,< tOo ra danh sach n`i dung “ Ẩm thực , DuLịch ,…”

  <divclass="content-menu">

    <divclass="content-menu-title">      <h2>KHÁM PHÁ DANH MỤC</h2>    </div>

    <divclass="content-menu-item">      <span>

        <href="#amthuc">          <img

"https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- "https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuong- <h3>Ẩ(m Thực</h3>        </ >a

      </span>

// Tương tự với các danh mục khác KXt quả :

18