TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆTIỂU LUẬN MÔN HỌCTHỰC HÀNH THIẾT KẾ WEB THIẾT KẾ WEBSITE GIỚI THIỆU VỀ CÁC DANH LAM THẮNG CẢNH TẠI VIỆT NAM GV: ThS... TRƯỜNG ĐẠI HỌC TH
Trang 1TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ
TIỂU LUẬN MÔN HỌCTHỰC HÀNH THIẾT KẾ WEB
THIẾT KẾ WEBSITE GIỚI THIỆU VỀ CÁC DANH LAM THẮNG
CẢNH TẠI VIỆT NAM
GV: ThS Nguyễn Hữu Vĩnh SVTH: Ngô Kiến Quốc MSSV: 2024802010256 LỚP: D20CNTT02
Trang 2TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT CÔNG NGHỆ
TIỂU LUẬN MÔN HỌCTHỰC HÀNH THIẾT KẾ WEB
THIẾT KẾ WEBSITE GIỚI THIỆU VỀ CÁC DANH LAM THẮNG
CẢNH TẠI VIỆT NAM
GV: ThS Nguyễn Hữu Vĩnh SVTH: Ngô Kiến Quốc MSSV: 2024802010256 LỚP: D20CNTT02
BANH DƯƠNG - 04/2021
Trang 3MỤC LỤC
MỤC LỤC ii
DANH MỤC HANH iv
MỞ ĐẦU 1
CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 2
1.1 Tên Đề Tài: 2
1.2 Mục Tiêu Của Đề Tài: 2
1.3 Ý Nghĩa Của Đề Tài: 2
1.4 Đối Tượng Của Đề Tài: 2
1.5 Một Số Trang Chính Của Website: 2
CHƯƠNG 2 GIỚI THIỆU VỀ CÔNG NGHỆ 3
2.1 Giới Thiệu Về HTML 3
2.1.1 HTML là gì? 3
2.1.2 Công dụng của HTML 3
2.1.3 Định dạng của HTML 3
2.2 Giới thiệu về Adobe Dreamweaver 3
2.3 Ngôn ngữ CSS 4
2.4 Ngôn ngữ Javascript 4
CHƯƠNG 3 THIẾT KẾ GIAO DIỆN 6
3.1 Sơ đồ tổng quát của một website: 6
3.2 Giao Diện Trang Chủ 7
3.3 Giao diện Khách Hàng: 9
3.3.1 Giao diện đăng kí: 9
3.3.2 Giao Diện Trang Đăng Nhập: 10
3.4 Giao diện Giới thiệu một số danh lam thắng cảnh tại Việt Nam 11
3.4.2 Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh 13
3.5 Giao Diện Trang Liên Hệ 17
CHƯƠNG 4 Thiết Kế Chương Trình 18
4.1 Trang Chủ: 18
4.1.1 Source Code HTML: 18
4.1.2 Source Code CSS: 26
Trang 44.1.3 Source Code JavaScript: 28
KẾT LUẬN 30 TÀI LIỆU THAM KHẢO 31
Trang 5DANH MỤC HANH
Hình 3.1: Giao diện trang chủ 7
Hình 3.2: Giao diện trang chủ 8
Hình 3.3: Giao diện trang đăng ký 9
Hình 3.4: Giao Diện Trang Đăng Nhập 10
Hình 3.5: Giao Diện Trang Giới Thiệu Sơ Lược Một Số Danh Lam Thắng Cảnh .11 Hình 3.6: Giao Diện Trang Giới Thiệu Sơ Lược Một Số Danh Lam Thắng Cảnh 12
Hình 3.7: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh 13
Hình 3.8: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh 14
Hình 3.9: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh 15
Hình 3.10: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh 16
Hình 3.11: Giao diện trang liên hệ 17
Trang 6MỞ ĐẦU
Đất nước Việt Nam thân yêu của chúng ta tuy nhỏ bé nhưng nơi đâu cũng có những danh lam thắng cảnh say mê lòng người, khiến du khách đã tới một là không thể nào quên được Từ đồng bằng tới vùng núi non hùng vĩ, khắp nơi trên đất nước đềumang vẻ hữu tình, thơ mộng đượm hồn dân tộc Đến với mỗi vùng miền khác nhau, ta
sẽ được chiêm ngưỡng những cảnh đẹp khác nhau và rồi đọng lại trong tâm hồn mỗi người con đất Việt chính là lòng tự hào, tự tôn dân tộc sâu sắc Và bên cạnh đó cùng với sự phát triển đầy mạnh mẽ của khoa học công nghệ thì chuyện ta đem những danh lam thắng cảnh của Việt Nam vươn ra với cường quốc năm châu là chuyện hết sức dễ dàng Đó là lí do tôi chọn đề tài “Thiết kế website giới thiệu về danh lam thắng cảnh tại Việt Nam”.5
Trang 7CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 1.1 Tên Đề Tài:
THIẾT KẾ WEBSITE GIỚI THIỆU VỀ CÁC DANH LAM THẮNG CẢNH TẠI VIỆT NAM
1.2 Mục Tiêu Của Đề Tài:
Thiết kế website giới thiệu về danh lam thắng cảnh nổi tiếng tại Việt Nam
1.3 Ý Nghĩa Của Đề Tài:
Đưa thông tin chi tiết về các danh lam thắng cảnh nổi tiếng tại Việt Nam
1.4 Đối Tượng Của Đề Tài:
Đối Tượng nghiên cứu chủ yếu là những danh lam thắng cảnh tại Việt Nam
1.5 Một Số Trang Chính Của Website:
Trang Chủ: Khách hàng sẽ được giới thiệu sơ lược về những danh lam thắng cảnh tại Việt Nam
Trang Liên Hệ: Khách hàng có thể liên hệ với bên chăm sóc khách hàng để được
tư vấn kĩ càng hơn hay giải đáp mọi thắc mắc của khách hàng đặt ra
Trang Khách Hàng: Giúp cho bên khách hàng có thể đăng kí tài khoản khi chưa
có tài khoản hoặc đăng nhập tài khoản khi đã có tài khoản
Trang Chi Tiết Về Danh Lam Thắng Cảnh: Khách hàng nhấn vào danh lam thắng cảnh nào sẽ được xem chi tiết về danh lam thắng cảnh đó
CHƯƠNG 2
CHƯƠNG 3
Trang 8CHƯƠNG 4
Trang 9CHƯƠNG 5 GIỚI THIỆU VỀ CÔNG NGHỆ 5.1 Giới Thiệu Về HTML.
5.1.1 HTML là gì?
CHƯƠNG 6 HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu vănbản) là ngôn ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõmột trang Web được hiển thị như thế nào trong trình duyệt
CHƯƠNG 7 Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho cáctrình duyệt (Web browsers) cách hiển thị các thành phần của trang như text vàgraphics
CHƯƠNG 8 HTML là ngôn ngữ xác định cấu trúc của thông tin
CHƯƠNG 9 HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiệnthị văn bản và các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác
9.1.1 Công dụng của HTML.
CHƯƠNG 10 Thiết kế được nội dung và hình thức của trang web
CHƯƠNG 11 Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tintrực tuyến bằng cách dùng các liên kết được chèn vào trang web
CHƯƠNG 12 Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin ngườidùng, quản lý giao dịch…
CHƯƠNG 13 Thêm vào đối tượng các hình ảnh video, âm thanh,
13.1.1 Định dạng của HTML.
CHƯƠNG 14 Là một tập tin có phần mở rộng là htm hoặc html
CHƯƠNG 15 Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi làTag(thẻ), thường được đặt xung quanh một khối văn bản nào đó
CHƯƠNG 16 Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage,notepad…và được sử dụng nhiều nhất đó là adobe dreamweaver
16.1 Giới thiệu về Adobe Dreamweaver
CHƯƠNG 17 Macromedia Dreamweaver 8 là trình biên soạn HTML chuyênnghiệp dùng để thiết kế, viết mã và phát triển website cùng các trang web và các ứngdụng web Cho dù bạn có thích thú với công việc viết mã HTML thủ công hoặc bạnthích làm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạnnhững công cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn
Trang 10CHƯƠNG 18 Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạntạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả các thànhphần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 vănbản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trongMacromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vàoDreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việcchèn Flash vào trang web.
CHƯƠNG 19 Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web độngdựa theo dữ liệu sử dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP.Nếu sở thích của bạn là làm việc với dữ liệu XML, Dreamweaver cung cấp nhữngcông cụ cho phép bạn dễ dàng tạo các trang XSLT, chèn file XML và hiển thị dữ liệuXML trên trang web của bạn
CHƯƠNG 20 Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêngmình những đối tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mãJavaScript để mở rộng những khả năng của Dreamweaver với những hành vi mới,những chuyên gia giám định Property mới và những báo cáo site mới
20.1 Ngôn ngữ CSS.
CHƯƠNG 21 CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trìnhbày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML, …
CHƯƠNG 22 CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với
sự sáng tạo trong việc kết hợp các thuộc tính giúp mang lại hiệu quả cao
CHƯƠNG 23 CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau”trên mọi hệ điều hành
CHƯƠNG 24 CSS đưa ra phương thức áp dụng từ một file CSS ở ngoài Có hiệuquả đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộctính trình bày nào đó
CHƯƠNG 25 CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh
vi hơn
25.1 Ngôn ngữ Javascript.
CHƯƠNG 26 Với HTML chỉ biểu diễn thông tin chứ chưa phải là các trang Webđộng có khả năng đáp ứng các sự kiện từ phía người dùng
Trang 11CHƯƠNG 27 Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript đểthực hiện chức năng này Sau đó đổi tên thành JavaScript để tận dụng tính đại chúngcủa ngôn ngữ lập trình Java.
CHƯƠNG 28 JavaScript là ngôn ngữ dưới dạng script có thể gắn với các fileHTML Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.CHƯƠNG 29 JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiềukiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học NhưngJavaScript không là ngôn ngữ hướng đối tượng như C++/Java
CHƯƠNG 30
Trang 12CHƯƠNG 31 THIẾT KẾ GIAO DIỆN 31.1 Sơ đồ tổng quát của một website:
CHƯƠNG 32
Website Gi i Thi u Vềề Danh Lam Thắắng C nh T i Vi t ớ ệ ả ạ ệ
Nam
Khách Hàng
Trang 1332.1 Giao Diện Trang Chủ
Mục đích: Chức năng này cho phép người dùng xem danh sách Danh LamThắng Cảnh nổi bật và mới nhất
Mô tả chức năng: Trang này cho phép người dùng xem thông tin các địađiểm ngoài ra còn có thể sử các menu ngang chính, ngang phụ để sang trang
Trang 14khác,
Trang 15Hình 32.1.1.1: Giao diện trang chủ
CHƯƠNG 33
Hình 33.1.1.1: Giao diện trang chủ
CHƯƠNG 34 - Phần 1: Logo của trang web + Menu ngang chính
CHƯƠNG 35 - Menu ngang chính bao gồm các mục: Trang chủ, liên hệ, khách hàng Mỗi danh mục liên kết đến một trang với nội dung khác nhau
CHƯƠNG 36 - Phần 2: Một video động giữa trang
CHƯƠNG 37 - Phần 3: Ở giữa chứa các sản phẩm nổi bật và mới nhất được liên kết với trang chi tiết sản phẩm
Trang 16CHƯƠNG 38 - Phần 4: Menu ngang phụ gồm: Sáu trang liên kết, hai icon lùi lại và tiến tới một trang
CHƯƠNG 39 - Phần 5: Footer
CHƯƠNG 40
Trang 1740.1 Giao diện Khách Hàng:
40.1.1 Giao diện đăng kí:
Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng của trang.
Chức năng: Cho phép khách hàng có thể đăng ký thông tin để trở thành khách
hàng
CHƯƠNG 41
Hình 41.1.1.1: Giao diện trang đăng ký
CHƯƠNG 42
Trang 1842.1.1 Giao Diện Trang Đăng Nhập:
Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm của trang.
Trang 1946.1 Giao diện Giới thiệu một số danh lam thắng cảnh tại Việt Nam
CHƯƠNG 47
Hình 47.1.1.1: Giao Diện Trang Giới Thiệu Sơ Lược Một Số Danh Lam Thắng Cảnh
Trang 20CHƯƠNG 48
Hình 48.1.1.1: Giao Diện Trang Giới Thiệu Sơ Lược Một Số Danh Lam Thắng Cảnh
Trang 21CHƯƠNG 49
Trang 2249.1.1 Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
CHƯƠNG 50
Trang 23Hình 50.1.1.1: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
Trang 24CHƯƠNG 51
Trang 25Hình 51.1.1.1: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
Trang 26CHƯƠNG 52
Trang 27Hình 52.1.1.1: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
CHƯƠNG 53
Hình 53.1.1.1: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
CHƯƠNG 54
Trang 2854.1 Giao Diện Trang Liên Hệ
CHƯƠNG 55
Hình 55.1.1.1: Giao diện trang liên hệ
CHƯƠNG 56
Trang 29CHƯƠNG 57 Thiết Kế Chương Trình 57.1 Trang Chủ:
CHƯƠNG 61 <meta charset="utf-8">
CHƯƠNG 62 <! InstanceBeginEditable name="doctitle" >
CHƯƠNG 63 <title>KOT | KINGOFTOURS >Trang 1</title>
CHƯƠNG 64 <! InstanceEndEditable >
CHƯƠNG 65 <! InstanceBeginEditable name="head" >
CHƯƠNG 66 <link rel="stylesheet" href=" /css/bootstrap.min.css" />
CHƯƠNG 67 <link rel="stylesheet" awesome/4.1.0/css/font-awesome.min.css"/>
href="https://netdna.bootstrapcdn.com/font-CHƯƠNG 68 <link rel="stylesheet" href=" /css/design.css" />
CHƯƠNG 69 <link rel="stylesheet" href=" /css/bootstrap-theme.min.css"/>
CHƯƠNG 70 <script src=" /jquery/jquery.min.js"></script>
CHƯƠNG 71 <script src=" /js/design.js"></script>
CHƯƠNG 72 <script src=" /js/bootstrap.min.js"></script>
CHƯƠNG 73 <! InstanceEndEditable >
CHƯƠNG 74 <! InstanceParam name="Trang" type="boolean" value="true" >CHƯƠNG 75 <! InstanceParam name="ThanTrang" type="boolean" value="true" >
CHƯƠNG 76 <! InstanceParam name="belowheader" type="boolean" value="true" >
CHƯƠNG 77 <! InstanceParam name="Tieude" type="boolean" value="true" >CHƯƠNG 78 </head>
CHƯƠNG 79
Trang 30CHƯƠNG 80 <body>
CHƯƠNG 81 <div class="container-fluid" id="main">
CHƯƠNG 82 <header class="container-fluid">
CHƯƠNG 83 <nav class="navbar navbar-default">
CHƯƠNG 84 <! Brand and toggle get grouped for better mobile display >CHƯƠNG 85 <div class="navbar-header">
CHƯƠNG 86 <button type="button" class="navbar-toggle collapsed" toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
data-expanded="false">
CHƯƠNG 87 <span class="sr-only">Toggle navigation</span>
CHƯƠNG 88 <span class="icon-bar"></span>
CHƯƠNG 89 <span class="icon-bar"></span>
CHƯƠNG 90 <span class="icon-bar"></span>
CHƯƠNG 91 </button>
CHƯƠNG 92 <a class="navbar-brand" href="Trang1.html"><img
src=" /images/Logo.png" width="400px" height="120px"/></a>
id="bs-example-navbar-CHƯƠNG 96 <ul class="nav navbar-nav navbar-right">
CHƯƠNG 97 <li><a href="Trang1.html">Trang Chủ</a></li>
CHƯƠNG 98 <li><a href="Dang-Nhap.html">Khách Hàng</a></li>CHƯƠNG 99 <li><a href="Liên%20Hệ.html">Liên Hệ</a></li>
CHƯƠNG 100 <li role="separator" class="divider"></li>
CHƯƠNG 101 <li><form class="navbar-form navbar-left">
CHƯƠNG 102 <div class="form-group">
Trang 31CHƯƠNG 103 <input type="text" class="form-control"
placeholder="Search " size="20"><button type="submit" class="btn
btn-default"><span class="glyphicon glyphicon-search" ></span></button>
CHƯƠNG 111 <! InstanceBeginEditable name="EditRegion5" >
CHƯƠNG 112 <div class="container-fluid text-center">
CHƯƠNG 113 <video muted loop id="homeVideo"
onmouseover="this.play()" style="height: 700px; width: 1200px">
CHƯƠNG 114 <source src=" /images/Sea%20-%206399.mp4"
type="video/mp4"></video>
CHƯƠNG 115 <! <iframe width="100%" height="600"
src="https://www.youtube.com/embed/SOplg0pl19U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> >
CHƯƠNG 121 <! InstanceBeginEditable name="EditRegion6" >
CHƯƠNG 122 <h1 text align="center">TOP 18 danh lam thắng cảnh Việt Nam nổi tiếng thế giới</h1>
CHƯƠNG 123 <! InstanceEndEditable >
Trang 32CHƯƠNG 124
CHƯƠNG 125 <div class="row">
CHƯƠNG 126 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
CHƯƠNG 127
CHƯƠNG 128 <! InstanceBeginEditable name="EditRegion4" >
CHƯƠNG 129 <div class="media">
CHƯƠNG 130 <div class="media-body">
CHƯƠNG 131 <a class="pull-right" href=" /Trang
html/TrangChiTiet/VinhHaLong.html"><img class="media-object"
src=" /images/vinh%20ha%20long.jpg" alt=" " width="100%" height="450px"></a>CHƯƠNG 132 <h2 class="media-heading"><a href=" /Trang html/TrangChiTiet/VinhHaLong.html">Danh lam thắng cảnh Vịnh Hạ Long</a></h2>CHƯƠNG 133 <div>Xứng đáng là một kỳ quan thế giới ở ViệtNam, tới đây bạn sẽ được chiêm ngưỡng một khung cảnh tuyệt đẹp mà tạo hóa đã ban tặng Có lẽ chính vì vậy mà vịnh Hạ Long luôn là một trong những điểm thu hút khách
du lịch trong và ngoài nước ở miền Bắc nước ta Ngoài ngồi trên thuyền ngắm nhìn phong cảnh vịnh, bạn còn có thể chèo thuyền kayak, lặn biển, đi bộ đường dài, đi xe đạp và tham gia các hoạt động ngoài trời khác tại kỳ quan Việt Nam này nhé!</div>CHƯƠNG 134 </div>
CHƯƠNG 135 </div><! Vịnh Hạ Long >
CHƯƠNG 136 <div class="media">
CHƯƠNG 137 <div class="media-body">
CHƯƠNG 138 <a class="pull-left" href=" /Trang
html/TrangChiTiet/TrangAnNinhBinh.html"><img class="media-object"
src=" /images/trang-an-ninh-binh.jpg" alt=" " width="500px" height="400px"></a>CHƯƠNG 139 <h2 class="media-heading"><a href=" /Trang html/TrangChiTiet/TrangAnNinhBinh.html">Quần thể danh thắng Tràng An – Ninh Bình</a></h2>
CHƯƠNG 140 <div>Nằm ở đồng bằng sông Hồng của Việt Nam, quần thể danh thắng Tràng An được UNESCO công nhận là di sản thế giới vào năm
2014 Đây cũng là một trong các danh lam thắng cảnh ở Việt Nam sở hữu các đỉnh núi