Tiểu luận môn học thiết kế web đề tài thiết kế website shop sen đá

+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng thân thiết của Shop.. + Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm và nhận được nhiều khuyế

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

KHOA KỸ THUẬT CÔNG NGHỆ

TIỂU LUẬN MÔN HỌC

KHOA KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN

Họ và tên giảng viên: Nguyễn Hữu Vĩnh

Tên đề tài: THIẾT KẾ WEBSITE Shop Sen Đá Nội dung nhận xét:

Điểm:

Bằng số:

Bằng chữ:

GIẢNG VIÊN CHẤM

(Ký, ghi rõ họ tên)

NGUYỄN HỮU VĨNH MỤC LỤC

1

Danh Mục Hình: 4

Lời Mở Đầu 5

1 SƠ ĐỒ THIẾT KẾ TRANG WEB 6

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI 7

1 Tên Đề Tài 7

2 Mục Tiêu của Đề Tài 7

3 Ý Nghĩa Của Đề Tài 7

4 Đối Tượng Của Đề Tài 7

5 Một Số Trang Chính Của Website 7

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ 8

1 Giới Thiệu Về HTML 8

1.1 HTML là gì? 8

1.2 Công dụng của HTML 8

1.3 Định dạng của HTML 8

Là một tập tin có phần mở rộng là htm hoặc html 8

2 Giới thiệu về Adobe Dreamweaver 8

3 Ngôn ngữ CSS 9

4 Ngôn ngữ Javascript 10

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 11

1 ĐẶT TẢ GIAO DIỆN 11

2.NỘI DUNG TRANG WEB 12

1.1 CHỨC NĂNG CHÍNH CỦA WEBSITE: 12

1.2 CẤU TRÚC TRANG WEB : 12

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 28

1 Kết quả đạt được: 28

Việc chưa làm được: 28

2 Hướng phát triển của đề tài 29

TÀI LIỆU KHAM KHẢO 30

2

Danh Mục Hình

Hinh 1 Giao diện trang chủ 13

Hinh 2 Giao diện trang giới thiệu 15

Hinh 3 Giao diện trang Liên hệ 16

Hinh 4 Giao diện khi click vào facebook 17

Hinh 5 Giao diện khi click vào instagram 18

Hinh 6 Giao diện khi click vào twiter 19

Hinh 7 Giao diện thanh header 20

Hinh 8 Giao diện thanh Menu 20

Hinh 9 Giao diện cho thanh trái bao gồm Danh mục,Sen bán nhiều và Lịch 21

Hinh 10 Hiệu ứng marque(Chạy danh sách sen bán nhiều) 22

Hinh 11 Tạo bảng lịch bằng Javacript 23

Hinh 12 Giao diện sản phẩm của cửa hàng 24

Hinh 13 Tạo giao diện Footer 25

3

Hinh 14 Giao diện Danh mục 25Hinh 15 Tạo giao diện đăng nhập 26Hinh 16 Giao diện Đăng ký 27

Lời Mở ĐầuBạn rất thích sen đá?Bạn muốn muốn mua sen đá đẹp nhưng không có nhiều thời gian để lựa chọn Hiện nay, trên thế giới công nghệ thông tin và thương mạiđiện tử đang phát triển rất mạnh mẽ Kỹ thuật số giúp chúng ta tiết kiệm đáng kểcác chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác Hơn nữa, thương mại điện tử còn giúp con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu và sở thích của con người Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn

và các website mua bán sen đá trên mạng sẽ giúp ta làm được điều đó

4

Bạn muốn tìm một sản phẩm đáng tin cậy, bạn muốn có những chậu hoa sen xinh đẹp, bạn muốn khi đi làm (đi học) về được ngắm những chậu bông sen xinh đẹp Chính vì những nhu cầu đó của bạn Shopsen đã thành lập website nhằm mang lại sự tiện lợi khi bạn muốn trồng sen đá trong nhà mình Website shop có rất nhiều tính năng bạn có thể khám phá và học được nhiều mẹo chăm sóc sen đá hay ,shop update bài hằng ngày, mỗi ngày bạn sẽ thu thập được nhiềuthông tin hữu ích.

5

1 SƠ ĐỒ THIẾT KẾ TRANG WEB

6

CHƯƠNG 1 TỔNG QUAN VỀ ĐỀ TÀI

1 Tên Đề Tài.

+ THIẾT KẾ WEBSITE Shop Sen Đá

2 Mục Tiêu của Đề Tài.

+ Thiết kế Website Shop Sen Đá

3 Ý Nghĩa Của Đề Tài.

+ Tối ưu và tiết kiệm thời gian của khách hàng

+ Quảng bá thương hiệu

4 Đối Tượng Của Đề Tài.

+ Đối tượng nghiên cứu chủ yếu là các giống sen đá đẹp và chất lượng

5 Một Số Trang Chính Của Website.

+ Trang chủ: Đây là trang khách hàng xem hoặc tham khảo các mặt hàng của cửa hàng có sẵn để lựa chọn.

+ Trang đăng ký: Người dùng đăng ký tài khoản để trở thành khách hàng

thân thiết của Shop

+ Trang đăng nhập: Người dùng đăng nhập tài khoản để đặt mua sản phẩm

và nhận được nhiều khuyến mãi của shop

Sơ đồ

7

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ

1 Giới Thiệu Về HTML.

1.1HTML là gì?

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

Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trìnhduyệt (Web browsers) cách hiển thị các thành phần của trang như text vàgraphics

HTML là ngôn ngữ xác định cấu trúc của thông tin

HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thị vănbả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

1.2Công dụng của HTML.

Thiết kế được nội dung và hình thức của trang web

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ếnbằng cách dùng các liên kết được chèn vào trang web

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

2 Giới thiệu về Adobe Dreamweaver

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ụngweb 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

8

thích làm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấpcho bạn những công cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn.Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạonhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả cácthà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

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ấpnhữ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

Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mìnhnhữ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 vimới, những chuyên gia giám định Property mới và những báo cáo site mới

CSS đưa ra phương thức áp dụng từ một file CSS ở ngoà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ínhtrình bày nào đó

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

9

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Đượctrình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn.

JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểu đốitượ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

10

Đồ án Môn học: Thiết kế Web

CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH

1 ĐẶT TẢ GIAO DIỆN

Project:

- File css: chứa toàn bộ code CSS của trang web

- File anh: chứa toàn bộ hình ành được sử dụng trong trang web

- File js: chứa toàn bộ code Javascript của trang web

o File shopsen.html , file dangnhap.html và Dangky

Đồ án Môn học: Thiết kế Web

2.NỘI DUNG TRANG WEB

1.1 CHỨC NĂNG CHÍNH CỦA WEBSITE:

- Website được tạo ra với chức năng chính là kinh doanh ý tưởng lập trình

website được mô tả bởi những sản phẩm mà em đã phát triển thành công

- Chức năng mua sản phẩm có sẵn, đặt hàng sản phẩm theo yêu cầu.

1.2 CẤU TRÚC TRANG WEB :

 Mục đích: Chức năng này cho phép người dùng xem danh sách Sản Phẩmnổi bật và mới nhất

 Trong giao diện cho người dùng, chọn kiểu hiển thị từng theo Loại SảnPhẩm

 Mô tả chức năng: Trang này cho phép người dùng xem thông tin sảnphẩm ngoài ra còn có thể sử các menu dọc,ngang để sang trang khác,…

Đồ án Môn học: Thiết kế Web

Hinh 1 Giao diện trang chủ

Đồ án Môn học: Thiết kế Web

Trang web được chia làm 5 phần:

- Phần 1: Logo của trang web

- Phần 2 - Menu ngang: Bao gồm các mục: trang chủ, giới thiệu, liên hệ,đăng ký, đăng nhập Mỗi danh mục liên kết đến một trang với nội dung khácnhau

- Phần 3: Bên trái hiển thị sản phẩm bán nhiều nhất, quảng cáo được sử dụngthẻ Marquee để chạy và lịch ngày tháng năm

- Phần 4: Ở giữa chứa các sản phẩm nổi bật và mới nhất

- Phần 5: Footer

Mục đích: Khi vào trang này, khách hàng sẽ biết được một số nét khái quát

về loại sen đá, lịch sử hình thành và phát triển, định hướng phát triển trongtương lai

Đồ án Môn học: Thiết kế Web

Hinh 2 Giao diện trang giới thiệu

Đồ án Môn học: Thiết kế Web

 Mục đích:Trang này mục đích để khách hàng có thể liên lạc với shop

 Chức năng: Trong giao diện này cho phép người dùng gửi những thôngtin về sản phẩm, thái độ phục vụ, cũng như phản hồi những sai phạm của nhânviên về shop

Hinh 3 Giao diện trang Liên hệ

Đồ án Môn học: Thiết kế Web

Hinh 4 Giao diện khi click vào facebook

Đồ án Môn học: Thiết kế Web

Đồ án Môn học: Thiết kế Web

Hinh 5 Giao diện khi click vào instagram

Hinh 6 Giao diện khi click vào twiter

Đồ án Môn học: Thiết kế Web

Hinh 7 Giao diện thanh header

Đồ án Môn học: Thiết kế Web

Hinh 8 Giao diện thanh Menu

Đồ án Môn học: Thiết kế Web

Hinh 9 Giao diện cho thanh trái bao gồm Danh mục,Sen bán nhiều và Lịch

Hinh 10 Hiệu ứng marque(Chạy danh sách sen bán nhiều)

Đồ án Môn học: Thiết kế Web

Hinh 11 Tạo bảng lịch bằng Javacript

Đồ án Môn học: Thiết kế Web

Hinh 12 Giao diện sản phẩm của cửa hàng

Đồ án Môn học: Thiết kế Web

Hinh 13 Tạo giao diện Footer

Đồ án Môn học: Thiết kế Web

Hinh 14 Giao diện Danh mục

 Mục đích: Giúp khách hàng có thể dễ dàng lựa chọn nhiều loại sản phẩm theo nhu cầu và sở thích

Đồ án Môn học: Thiết kế Web

Hinh 15 Tạo giao diện đăng nhập

 Mục Đích: Người dùng đăng nhập tài khoản để đặt mua sản phẩm củatrang

Hinh 16 Giao diện Đăng ký

Đồ án Môn học: Thiết kế Web

 Mục Đích: Người dùng đăng ký tài khoản để trở thành khách hàng củatrang

Chức năng: Cho phép khách hàng có thể đăng ký thông tin để trở thànhkhách hàng

CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Đồ án Môn học: Thiết kế Web

Trong thời buổi công nghiệp hóa hiện nay, mọi người rất có ít thời giandành cho bản thân cũng như các công việc nhỏ như mua sắm hay tìm một khônggian để giải tỏa stress Bạn muốn tìm những loài cây nhỏ trồng được trongphòng, hay tìm những sản phẩm cho chất lượng tốt nhưng bạn lại không có quánhiều thời gian

Do Nhu cầu như vậy nên Shop Sen Đá đã ra mắt và giải quyết vấn các đề đómột cách dễ dàng chỉ cần một cú click của khách hàng mọi việc sẽ được giảiquyết Khách hàng sẽ được giao tận nơi mà không mất nhiều thời gian, kháchhàng có thể tìm hiểu nhiều mẹo và thông tin do web của shop cung cấp, đồngthời khách hàng có thể liên hệ đặt lịch hẹn hay được tư vấn từ phía nhân viênshop Vừa tiện ích cho khách hàng mà đồng thời shop lại được yêu quý

Website Shop Sen Đá thứ nhất dùng để quảng bá cho shop, thứ hai là kênhthông tin cho mọi người, thứ ba là một địa chỉ tin cậy để những khách hàng cónhu cầu chăm sóc thú cưng của mình Qua quá trình nghiên cứu và cố gắng thựchiện dưới sự hướng dẫn tận tình của Giảng viên, sự giúp đỡ của bạn bè trongkhóa học đồ án nghiên cứu thể hiện được những điều sau:

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

Thiết kế thành công được một trang web hoàn chỉnh, tương đối đầy đủ về mặt nội dung Cấu trúc trang web được bố trí hợp lý, phù hợp, khách hàng đến đây có thể dễ dàng truy cập, tìm kiếm các sản phẩm và tương tác với nhóm Để hoàn thành website, nhóm đử sử dụng tương đối nhiều các dòng lệnh bao gồm CSS và Javascript mặc dù kiến thức về lập trình web còn yếu

Việc chưa làm được:

- Do kiến thức về lập trình web còn hạn chế nên sản phẩm của nhóm còn

nhiều thiếu sót Vì thời gian có hạn chế nênquy mô website chưa thực sự

ấn tượng, thêm vào đó, tài liệu tham khảo khảo trên Internet đa phần là ngoại ngữ nên gây không ít khó khăn cho nhóm trong quá trình phát triển sản phẩm

Đồ án Môn học: Thiết kế Web

- Việc biểu diễn các thông tin trên website chưa được linh hoạt

- Phân tích thiết kế chưa được hoàn chỉnh

- Nhiều chức năng còn thiếu và chưa sử dụng được

2 Hướng phát triển của đề tài

 Giao diện đẹp, thân thiện với người dùng, có nhiều chức năng vàtương tác tốt hơn với người dùng

 Thiết kế, bổ sung các tính năng còn thiếu hay chưa thật sự hoànchỉnh trong quá trình sử dụng

 Website sẽ ngày càng được hoàn thiện hơn trong thời gian sắp tới cả

về hình thức lẫn nội dung

Đồ án Môn học: Thiết kế Web

TÀI LIỆU KHAM KHẢO

- Tài liệu bài giảng môn “Thiết kế website” của thầy Nguyễn Hữu Vĩnh

- Website WWW: http://www.hiepsiit.com

- Một số tài liệu khác