Tiểu luận môn học thự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
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.02 MB, 42 trang )
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ỌC
THỰ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
0
0
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ỌC
THỰ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
i
0
0
MỤ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
ii
0
0
4.1.3. Source Code JavaScript:.............................................................................28
KẾT LUẬN................................................................................................................30
TÀI LIỆU THAM KHẢO.........................................................................................31
iii
0
0
DANH 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
iv
0
0
MỞ ĐẦ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 đều
mang 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
1
0
0
CHƯƠ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.
2
0
0
CHƯƠNG 4.
3
0
0
CHƯƠ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ăn
bả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ác
trì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ện
thị 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 tin
trự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ười
dù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ên
nghiệp dùng để thiết kế, viết mã và phát triển website cùng các trang web và các ứng
dụ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ạn
thích làm việc trong mơi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn
những công cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn.
4
0
0
CHƯƠNG 18. Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn
tạ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ành
phầ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ăn
bả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 trong
Macromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào
Dreamweaver. Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việc
chè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 động
dự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ững
cô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ệu
XML trên trang web của bạn.
CHƯƠNG 20. Dreamweaver có thể tùy biến hồn tồn. Bạn có thể tạo cho riêng
mì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ình
bà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 ở ngồi. Có hiệu
quả đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc
tí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.
5
0
0
CHƯƠ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úng
củ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 file
HTML. Đượ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ều
kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng tốn học. Nhưng
JavaScript khơng là ngơn ngữ hướng đối tượng như C++/Java.
CHƯƠNG 30.
6
0
0
CHƯƠ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
Đắng
Nhập
Trang Chủ
Đắng Kí
Chi Tiềắt
Sản Phẩm
7
0
0
Liền Hệ
32.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 Lam
Thắ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 ngồi ra cịn có thể sử các menu ngang chính, ngang phụ để sang trang
8
0
0
khác,
9
0
0
Hì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.
10
0
0
CHƯƠ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.
11
0
0
40.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.
12
0
0
42.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.
CHƯƠNG 43.
CHƯƠNG 44.
CHƯƠNG 45.
Hình 45.1.1.1: Giao Diện Trang Đăng Nhập
CHƯƠNG 46.
13
0
0
46.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
14
0
0
CHƯƠ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
15
0
0
CHƯƠNG 49.
16
0
0
49.1.1. Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
CHƯƠNG 50.
17
0
0
Hình 50.1.1.1: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
18
0
0
CHƯƠNG 51.
19
0
0
Hình 51.1.1.1: Giao Diện Chi Tiết Một Số Danh Lam Thắng Cảnh
20
0
0
