1. Trang chủ
  2. » Luận Văn - Báo Cáo

(Tiểu luận) đồ án cơ sởchuyên ngành bán quần áo nam

63 1 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 63
Dung lượng 2,18 MB

Cấu trúc

  • CHƯƠNG 1:Kiến Thức Đã Học (5)
    • 1.1. Internet là gì ? (18)
    • 1.2. Lịch sử phát triển của internet (18)
    • 1.3. Tầm quan trọng của internet (19)
    • 2.1. Máy chủ web (Web-Server) là gì ? (19)
    • 2.2. Các thành phần của Web-Server (20)
    • 2.3. Máy chủ Web (Web-Server) hoạt động như thế nào ? (21)
    • 3. Ngôn Ngữ HTML, CSS, JAVASCRIPT ? (23)
      • 3.1. Ngôn ngữ HTML ? (23)
        • 3.1.1. Giới thiệu HTML (23)
        • 3.1.2. Cấu trúc của HTML (24)
        • 3.1.3. Một số nguyên tắc khi sử dụng HTML (25)
        • 3.1.4. Trình chỉnh sửa HTML (26)
      • 3.2. Ngôn ngữ CSS ? (28)
        • 3.2.1. Cấu tạo và cú pháp CSS (28)
        • 3.2.2. Vị trí đặt CSS (28)
        • 3.2.3. Một số thuộc tính thường sử dụng (29)
      • 3.3. JavaScript ? (30)
        • 3.3.1. Khái niệm (30)
        • 3.3.2. Bạn có thể làm gì với JavaScript? (31)
        • 3.3.3. JavaScript hoạt động như thế nào? (31)
  • CHƯƠNG 2: Cách lưu trữ dữ liệu và cấu tạo của một trang web (35)
    • 2.1. Phần header (37)
    • 2.2. Phần content (37)
  • CHƯƠNG 3: Mô tả sản phẩm (38)
    • 2.1. Index.html (40)
    • 2.2. ListOfProducts.html (49)
    • 2.3. News.html (54)
    • 2.4. Contacts.html (58)
    • 2.5. SignIn.html (60)

Nội dung

Thức Đã Học

Internet là gì ?

Là một hệ thống thông tin toàn cầu có thể được truy nhập công khai, gồm các mạng máy tính được liên kết với nhau Hệ thống này cho phép truyền thông tin theo kiểu

“nối chuyển gói dữ liệu” (packet switching) dựa trên giao thức liên mạng đã được chuẩn hóa có tên: “giao thức IP”.

Lịch sử phát triển của internet

ARPANET được hình thành từ năm 1969, từ một dự án nghiên cứu của Bộ quốc phòng

Mỹ Lúc đó Internet chỉ liên kết 4 địa điểm:

 Đại học California - Los Angeles

 Đại học California - Santa Barbara

Thuật ngữ "Internet" xuất hiện lần đầu vào khoảng năm 1974 (tại thời điểm này, tên gọi chính thức vẫn được gọi là ARPANET) Các nhà cung cấp dịch vụ Internet (ISPs) bắt đầu xuất hiện vào cuối những năm 1980 Cho đến năm 1983, giao thức TCP/IP chính thức được coi như một tiêu chuẩn đối với ngành quân sự Mỹ, và tất cả các máy tính thực hiện kết nối với ARPANET đều bắt buộc phải sử dụng chuẩn mới này. ARPANET đã ngừng hoạt động vào năm 1990 Các kết nối riêng tư hạn chế với các bộ phận của Internet bởi các thực thể thương mại chính thức xuất hiện ở một số thành phố của Mỹ vào cuối năm 1989 và 1990, xóa bỏ những hạn chế cuối cùng đối với việc sử dụng Internet để mang theo giao thông thương mại.

Từ giữa những năm 1990, Internet đã có một tác động mang tính cách mạng đối với văn hóa, thương mại và công nghệ, bao gồm sự gia tăng của giao tiếp gần như ngay lập tức bằng thư điện tử, tin nhắn tức thời, cuộc gọi qua điện thoại Giao thức Internet (VoIP),tương tác hai chiều các cuộc gọi video và World Wide Web với các diễn đàn thảo luận, blog, mạng xã hội và các trang web mua sắm trực tuyến Cộng đồng nghiên cứu và giáo dục tiếp tục phát triển và sử dụng các mạng tiên tiến như JANET ở Vương quốc Anh và Internet2 ở Hoa Kỳ Lượng dữ liệu ngày càng tăng được truyền ở tốc độ cao hơn và cao hơn trên các mạng cáp quang hoạt động ở tốc độ 1 Gbit/s, 10 Gbit/s hoặc nhiều hơn.Internet tiếp quản bối cảnh truyền thông toàn cầu gần như ngay lập tức về mặt lịch sử: nó chỉ truyền được 1% thông tin truyền qua mạng viễn thông hai chiều vào năm 1993, đã là51% vào năm 2000 và hơn 97% thông tin được điều khiển vào năm 2007 ngày nayInternet tiếp tục phát triển, được thúc đẩy bởi lượng thông tin trực tuyến, thương mại, giải trí và mạng xã hội lớn hơn bao giờ hết Tuy nhiên, tương lai của internet toàn cầu có thể được định hình bởi sự khác biệt trong khu vực trên thế giới.

Tầm quan trọng của internet

Internet có tầm quan trọng cực kỳ cao và đem lại rất rất nhiều lợi ích chtoàn bộ mọi người trên thế giới Internet giúp cho thông tin truyền tải được nhanh chóng, thuận tiện và dễ dàng Tóm tắt lại internet có những lợi ích sau:

 Tra cứu thông tin một cách nhanh chóng tiện lợi và dễ dàng

 Kết nối mọi người lại với nhau thông qua các ứng dụng MXH như Facebook, Zalo, …

 Dễ dàng liên lạc với bạn bè người thân nhưng lại ít tốn kém như gọi điện qua Messenger

 Chơi game giải trí, nghe nhạc, đọc báo, lướt web, …

 Có thể truyền tải thông tin nhanh chóng đơn giản thông qua Mail, …

 Học tập qua các ứng dụng, công cụ trên internet.

Máy chủ web (Web-Server) là gì ?

Web-Server là tên gọi dành cho một loại máy chủ có dung lượng lớn, tốc độ cao có công dụng lưu trữ các thông tin trên internet như một ngân hàng dữ liệu bao gồm các website đã được thiết kế và các thông tin, tài khoản… có liên quan Nói một cách dễ hiểu, toàn bộ các website cần một chương trình máy tính, phân phối các trang web khi có yêu cầu từ người dùng Chiếc máy tính chạy chương trình này là web server Khi một người dùng sử dụng máy tính để truy cập một website, họ nhập và gửi yêu cầu tới internet về việc xem một trang web

Hình 1.Web server là hệ thống dùng để lưu trữ dữ liệu trên website

Mỗi web server đều có một địa chỉ IP hoặc cũng có thể có một domain name vì mỗi máy tính/ thiết bị kết nối internet đều được định danh với một địa chỉ nhận dạng duy nhất IP (viết tắt của từ Internet Protocol – giao thức internet) Thông qua địa chỉ này,các máy tính có thể tìm kiếm nhau Bất kỳ máy tính nào cũng có thể trở thành web server bởi việc cài đặt lên nó một chương trình phần mềm server software và sau đó kết nối vào Internet.

Các thành phần của Web-Server

2 phần chính quan trọng để thực hiện cấu hình máy chủ web không thể thiếu đó là phần cứng hoặc phần mềm, đôi khi phải cả phần mềm lẫn phần cứng.

Về phần cứng : Máy chủ web server sẽ được kết nối với internet và truy cập bằng một tên miền giống như mozilla.org Đây cũng là nơi lưu trữ các file thành phần của một website ( như file ảnh, CSS, Javascript và HTML) và có thể chuyển chúng tới thiết bị người dùng cuối cùng.

Về phần mềm : Web server sẽ bao gồm các phần để điều khiển người dùng truy cập tới các file lưu trữ trên một HTTP server Một HTTP server là một phần mềm có thể hiểu được các URL và giao thức trình duyệt đang sử dụng Bất cứ lúc nào trình duyệt cần đến file dữ liệu trên máy chủ, trình duyệt sẽ gửi yêu cầu file đó thông qua HTTP.

Máy chủ Web (Web-Server) hoạt động như thế nào ?

Để biết được Web Server hay máy chủ web hoạt động như thế nào thì bạn có thể hiểu như sau: bạn là client, khi bạn muốn lấy tìm kiếm thông tin nào đó trên trình duyệt, trình duyệt của bạn sẽ gửi một yêu cầu (request) tới webserver Lúc này, nó sẽ tìm kiếm thông tin được yêu cầu trên ổ đĩa mà nó lưu trữ Khi tìm thấy thông tin, máy chủ sẽ đọc và xử lý (nếu cần), cuối cùng sẽ gửi nó đến trình duyệt của bạn

Hình 2 cách Web-Server hoạt động

Lưu ý khi sử Web-Server

 Cần chuẩn bị một máy tính cấu hình cao, lưu trữ dung lượng khủng và đáp ứng được số lượng lớn người dùng truy cập Bởi xây dựng một máy chủ web là xây dựng một ứng dụng giúp người dùng có thể tìm kiếm nhanh chóng mọi thông tin liên quan đến trang web của mình.

 Cần đảm bảo việc khởi động và hoạt động không ngừng nghỉ 24/24 bởi một web server sẽ phải hoạt động trực tuyến và cung cấp thông tin nhanh chóng cho người dùng Nó giữ vai trò vô cùng quan trọng trong việc chuyển đổi các thông tin từ máy chủ đến các máy tính người dùng Hiện nay dịch vụ cho thuê phần mềm

2 server khá phát triển, giữa hàng trăm lựa chọn khác nhau bạn cần hết sức tỉnh táo để tìm hiểu và lựa chọn được địa chỉ cung cấp sản phẩm chất lượng nhất.

Ngôn Ngữ HTML, CSS, JAVASCRIPT ?

- HTML là thuật ngữ được viết tắt bởi Hyper Text Markup Language.

- HTML là ngôn ngữ dùng để mô tả những thông tin cần trình bày trong một trang web.

- HTML không phải là một ngôn ngữ lập trình, HTML chỉ đơn thuần là một “ngôn ngữ đánh dấu” (Markup Language).

- Các tập tin được tạo bởi HTML có thể mở để hiển thị, trình bày nội dung thông qua các trình duyệt web

- Để tạo một tập tin HTML, người ta có thể sử dụng bất cứ phần mềm soạn thảo văn bản nào để biên tập nội dung theo cú pháp trình bày của ngôn ngữ HTML.

- Tính đến nay HTML có khoảng 7 phiên bản chính thức :

HTML (HyperText Markup Language) là một ngôn ngữ trình bày dữ liệu dựa trên nguyên tắc “đánh dấu”, được thiết kế ra để tạo nên các trang web với các mẫu thông tin trình bày trên World Wide Web

Hình 3 Hình ảnh minh họa ngôn ngữ HTML5

Bắt đầu bằng tag và kết thúc bằng tag , thường bao gồm 2 phần :

 Head : là phần sử dụng cho mục đích khai báo thông tin về trang html:

 Các thành phần hỗ trợ định dạng

 Loại dữ liệu hiển thị trong trang

 Body : là phần thể hiện nội dung của trang html (người dùng có thể thấy được thông tin của phần này) Thường bao gồm:

Hình 4 Hình ảnh minh họa cấu trúc HTML

3.1.3.Một số nguyên tắc khi sử dụng HTML.

- Sử dụng thẻ tag định dạng theo từng cặp, tức là có thẻ mở thì phải có thẻ đóng vd:

văn bản

- thuộc tính sử dụng trong thẻ lệnh, luôn tồn tại theo từng cặp ở dạng key=value vd :

- Chỉ nên sử dụng chữ thường đối với tên của tag, không sử dụng chữ in hoa.

- Chỉ sử dụng ký tự hoặc ký số để đặt tên cho tập tin html, không sử dụng dấu tiếng việt và các ký tự đặc biệt khác

Một số tag sử dụng trong HTML

 Sử dụng cho tiêu đề (Headings): ,…

 Mô tả đoạn văn :

,

 Mô tả một phần văn bản:

 Tạo đường kẻ ngang:

Chúng ta bây giờ đã nắm được một số kiến thức cơ bản Hiên tại chúng ta đã có thể xây dựng những trang web đơn giản Đầu tiên chúng ta cần có công cụ giúp đỡ phù hợp, điều quan trọng nhất chúng ta cần là một trình soạn thảo HTML, có rất nhiều sự lựa chọn cho chúng ta trên thị trường, sau đây là một vài trình soạn thảo quen thuộc với chúng ta :

 Notepad++ Đây là công cụ quen thuộc không gì xa lạ đối với mấy bạn mới tập tành viết web Nó là chương trình nhỏ dễ dàng cài đặt và dễ dàng sử dụng

Hình 5 Hình ảnh minh họa notepad++

Tuy dễ dàng sử dụng nhưng Notepad++ vẫn có ưu và nhược điểm riêng:

+ Tính nắng tự động hoàn thành

+ Không hỗ trợ cho Mac

+ Có thể khó làm quen đối với ngườ mới tập lập trình

Một sự lựa chọn phổ biến khác cho các lập trình viên HTML đó là visual studio code. Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn mở gọn nhẹ nhưng có khả năng vận hành mạnh mẽ trên nhiều nền tảng

Hình 6 Hình ảnh minh họa visual studio code

Cũng như notepad++ visual studio code cũng có những ưu điểm và nhược điểm riêng của mình

+ Nhẹ và ít tốn dung lượng

+ Chạy được trên nhiều nền tảng

+ Đơn giản trong việc chỉnh sửa, xây dựng và gỡ lỗi

+ bộ nhớ và mức sử dụng pin của VSCode khá tệ.

Khái niệm : CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web.

Hình 7.Hình ảnh minh họa CSS

3.2.1.Cấu tạo và cú pháp CSS

Margin:0; tên thẻ , class, id

Width:100%; các thuộc tính như:

Selector{ Value: property: value; 100px, 50%, 1em, red, blu…

3.2.2.Vị trí đặt CSS Đối với CSS thì chúng ta có thể đặt 3 vị trí như sau:

 Đặt trực tiếp trong thẻ html

 Đặt bên trong cặp thẻ

Vd:

 Đặt bên ngoài và liên kết với file CSS

Sử dụng thẻ link trong phần head Vd:

3.2.3.Một số thuộc tính thường sử dụng

Màu chữ và màu nền:

Background-color, background-image, background-position

None, border(top, right, bottom, left), border-color

Text-align, text-decoration, text-transform

Margin-top, margin-right, padding-left, padding-top

Font-size, font-weight, font-style, font-family

Float: righr, float; left, clear: both

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới Nó cũng là một trong số

3 ngôn ngữ chính của lập trình web(html, css, javascript).

JavaScript được bắt đầu vào năm 1995 tại Netscape Communications Vào thời gian này, các nhà sản xuất Netscape browser nhận ra rằng, việc thêm một "glue language" để nâng cao trải nghiệm người dùng sẽ làm tăng sự tiêu thụ nội dung của người dùng.

Vì vậy, họ đã đưa Brendan Eich nhúng vào Scheme Programming language Tuy nhiên, tại thời điểm đó, Java hiện là một ngôn ngữ mới, nóng hổi của website, nên họ đã quyết định làm cho ngôn ngữ này gần gũi với cú pháp của Java Kết quả đem lại chính là JavaScript, với các tính năng của Scheme, định hướng đối tượng của SmallTalk và cú pháp của Java Phiên bản đầu tiên của ngôn ngữ này được đặt tên là Mocha vào tháng 5 năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995, và được đổi tên thành JavaScript vào tháng 12 năm 1995

Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trở thành,một đặc tính kỹ thuật tiêu chuẩn Vào tháng 6 năm 1997, đặc tính kỹ thuật chính thức đầu tiên cho ngôn ngữ được phát hành là ECMA-262 Phiên bản mới nhất của ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017.

3.3.2.Bạn có thể làm gì với JavaScript?

JavaScript là một trình thông dịch ngôn ngữ lập trình chính thức được nhúng bên trong trình duyệt web Bạn có thể thực hiện bất cứ điều gì trong JavaScript mà một ngôn ngữ thông thường như Java cho phép Bao gồm:

- Lưu trữ và truy vấn giá trị

- Xác định và gọi hàm

- Xác định các classes của riêng bạn

- Tải và sử dụng các mô-đun bên ngoài

- Viết trình xử lý sự kiện trả lời người dùng và các sự kiện khác

3.3.3.JavaScript hoạt động như thế nào?

Khi web browser tải một web page, HTML parser bắt đầu phân tích cú pháp HTML code và tạo DOM Bất cứ khi nào trình phân tích cú pháp gặp một chỉ thị CSS hoặc JavaScript, nó sẽ được chuyển giao cho CSS parser hoặc JavaScript engine theo yêu cầu JavaScript engine tải các tệp JavaScript bên ngoài và inline code, nhưng không chạy mã ngay lập tức, mà đợi HTML và CSS phân tích hoàn tất Khi điều này được thực hiện, JavaScript được thực thi theo thứ tự chúng được tìm thấy trên trang web: các biến và hàm được xác định, các lời gọi hàm được thực thi, trình xử lý sự kiện được kích hoạt, Các hoạt động này dẫn đến việc DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tức bởi trình duyệt.

Hình 8 Hình ảnh minh họa JavaScript Ưu điểm của JavaScript:

JavaScript có rất nhiều ưu điểm vượt trội hơn so với các đối thủ khác, chẳng hạn như:

 JavaScript là ngôn ngữ lập trình dễ học

 Lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn.

 JavaScript hoạt động trên nhiều trình duyệt, nền tảng.

 JavaScript giúp website tương tác tốt hơn với khách truy cập.

 JavaScript giúp website tương tác tốt hơn với khách truy cập.

 JavaScript nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác.

Không ngôn ngữ lập trình nào là hoàn hảo và không có khuyết điểm Bởi JavaScript là ngôn ngữ lập trình phổ biến, được sử dụng rộng rãi trên nền tảng website, vì vậy nó cũng là đối tượng tiềm năng của một lượng lớn hacker – những kẻ chuyên tìm kiếm lỗ hổng và các lỗi bảo mật và thâm nhập, đánh cắp dữ liệu nội bộ Một số khuyết điểm của JavaScript có thể kể đến như:

 Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất.

Cách lưu trữ dữ liệu và cấu tạo của một trang web

Phần header

Phần này có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button,đoạn flash, hoặc các form ngắn như form tìm kiếm, và thanh navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).

Phần content

Phần này là phần chứa nội dung trang web , chứa những gì bạn muốn thể hiện thường gồm có 2 phần là main content chứa các nội dung chính của trang web và content chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,

Phần này chứa các thông tin cần thiết để bạn liên hệ với chủ trang web phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,

Mô tả sản phẩm

Index.html

Cấu trúc trang này được chia làm 13 phần:

Hình 21 Hình ảnh minh họa vùng v1

Vùng này sử dụng position:fixed làm cho cho vùng đứng yên không bị kéo đi làm cho người thích thú, ngoài ra còn sử dụng background-color dẽ nhìn trong suốt, hover khi hơ chuột sẽ làm thay đổi màu

Hình 22 Hình ảnh minh họa css vùng v1

 Vungtren1 gồm các thông tin như tìm kiếm , đăng nhập

Hình 23 Hình ảnh minh họa code vùng vungtren1

Vùng này được sử dụng thuộc tính float để đẩy sang trái sang phải , margin để canh vị trí và color để chỉnh màu chữ

Hình 24 Hình ảnh minh họa css vùng vungtren1

Vùng này sử dụng bootstrap mega menu để thể hiện thông tin của các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).

Hình 25 Hình ảnh minh họa code vùng vungtren2

Các liên kết trong phần mega menu được canh giữa, định dạng theo color và background-color, text-decoration làm cho người dung nhìn thuận mặt hơn

Phần nội dung thứ hai là id =”v2”

Hình 26 Hình ảnh minh họa vùng v2

Phần v2 này nằm dưới vùng v1 , sử dụng bootstrap Slideshow để lướt ảnh làm cho người dung cảm thấy thú vị, nội dung của phần này chỉ có 2 hình ảnh

Hình 27 Hình ảnh minh họa code vùng v2

Phần nội dung thứ hai này sử dụng dịnh dạng width:100% để không bị lỗi khi ta mở lên trên nhiều thiết bị khác nhau, ngoài ra còn sử dụng javascript để hỗ trợ định dạng

Hình 28 Hình ảnh minh họa script vùng v2

Phần nội dung thứ ba là : id=”v3”

Hình 29 Hình ảnh minh họa vùng v3

Vùng này được sử dụng các tag ul li và định dạng display:inline block để cho chúng cùng nằm trên một dòng làm cho trang web them đẹp hơn

Hình 30 Hình ảnh minh họa css vùng v3

Phần nội dung thứ tư là : id=”v4”

Hình 31 Hình ảnh minh họa vùng v4

Phần nội dung thứ năm là :id=”v5”

Hình 32 Hình ảnh minh họa vùng v5

Phần nội dung thứ sáu là :id=”v6”

Hình 33 Hình ảnh minh họa vùng v6

Phần nội dung thứ bảy là :id=”v7”

Hình 34 Hình ảnh minh họa vùng v7

Phần nội dung thứ tám là :id=”v8”

Hình 35 Hình ảnh minh họa vùng v8

Phần nội dung thứ chín là :id=”v9”

Hình 36 Hình ảnh minh họa vùng v9

Phần nội dung thứ mười là :id=”v10”

Hình 36 Hình ảnh minh họa vùng v10

Phần nội dung thứ mười một là :id=”v11”

Hình 37 Hình ảnh minh họa vùng v11

Phần nội dung thứ mười hai là :id=”v12”

Hình 38 Hình ảnh minh họa vùng v12

Phần này sử dụng ul li và định dạng display:inline-block để chúng cùng nằm trên một hàng, trong phần li chứa các tag p, input và button , sử dụng định dạng width, height để chúng được cân bằng

Phần nội dung thứ mười ba là :id=”v13” cũng là vùng cuối cùng trong trang này

Hình 39 Hình ảnh minh họa vùng v13

Trong phần này em sử dụng 4 tag ul và dùng css để định dạng lại cho nó ngay thẳng và đều, ngoài ra em cũng sử dụng bootstrap icons để lấy những icons như facebook, zalo…

Hình 40 Hình ảnh minh họa css vùng v13

ListOfProducts.html

Đây là trang danh sách sản phẩm chứa nhiều thông tin về sản phẩm, Đối với trang này em chia thành 9 vùng.

Vùng thứ nhất là id=”v1”

Hình 21 Hình ảnh minh họa vùng v1

Vùng này tương tự như vùng v1 của trang Index

Vùng thứ hai là id=”v2”

Hình 41 Hình ảnh minh họa vùng v2

Vùng thứ hai này chỉ chứa một hình ảnh và nằm dưới phần vùng v1 em dungf định dạng css width:100% để được full màn hình và không bị lỗi khi mở bằng các thiết bị khác nhau

Vùng thứ ba là id=”v3”

Hình 42 Hình ảnh minh họa vùng v3

Phần này em dùng Bootstrap Slideshow để tạo sự lướt ảnh kết hợp với css color,margin, width, height để tạo % cho ảnh, ngoài ra em còn sử dụng javascript để hổ trợ các phần như nút next, prev, các chấm tròn dưới ảnh có thể lướt qua lướt lại.

Hình 43 Hình ảnh minh họa javascript vùng v3 Vùng thứ tư là id=”v4”

Hình 44 Hình ảnh minh họa vùng v4

Vùng này tương tự như vùng v3

Vùng thứ năm là id=”v5”

Hình 45 Hình ảnh minh họa vùng v5

Phần này tương tự vùng v3 và v4 , em chỉ thêm vào phần giảm giá

Vùng thứ sáu là id=”v6”

Hình 46 Hình ảnh minh họa vùng v6

Vùng thứ sáu này tương tự như vùng v5

Vùng thứ bảy là id=”v7”

Hình 47 Hình ảnh minh họa vùng v7

Vùng thứ tám là id=”v8”

Hình 48 Hình ảnh minh họa vùng v8

Vùng này em dung tag ul li lồng các tag p, input, button Sử dụng css display:inline- block để chúng cùng nằm trên một dòng , width, height, margin, padding để canh vị trí và tạo sự cân bằng

Hình 49 Hình ảnh minh họa css vùng v8

Vùng thứ chín là id=”v9”

Hình 50 Hình ảnh minh họa vùng v9

Vùng này thể hiện các thông tin cần thiết để liên hệ với chủ trang web khi gặp sựu cố,tìm hiểu các chính sách ưu đãi, tư vấn khi mua hàng,….

News.html

Phần nội dung của trang này em chia làm 8 vùng

Vùng thứ nhất là id=”v1”

Hình 21 Hình ảnh minh họa vùng v1

Vùng v1 này được định dạng và viết code nhưng v1 của các trang trên Vùng thứ hai là id=”v2”

Hình 51 Hình ảnh minh họa vùng v2

Vùng này chỉ chứa hình ảnh , em định dạng css width:100% để hiển thị full màn hình và không bị lỗi khi mở web trên thiết bị khác

Vùng thứ ba là id=”v3”

Hình 52 Hình ảnh minh họa vùng v3

Phần thứ hai này em sử dụng row và chia làm 3 column mỗi column sẽ chứa các tag p, img, h2 Sử dụng css margin, padding, width, height để chia đều cho mỗi column và canh vị trí sao cho đồng đều

Vùng thứ tư là id=”v4”

Hình 53 Hình ảnh minh họa vùng v4

Vùng này được em định dạng và viết code tương tự vùng v2

Vùng thứ năm là id=”v5”

Hình 54 Hình ảnh minh họa vùng v5

Vùng thứ sáu là id=”v6”

Hình 55 Hình ảnh minh họa vùng v6

Phần nội dung của vùng này giống như 3 vùng trên nhưng số trang được đánh số từ 1-

10, trang trước, trang sau và em dùng tag ul li và css display: inline-block để chúng nằm trên một dòng

Vùng thứ bảy là id=”v7”

Hình 56 Hình ảnh minh họa vùng v7

Vùng này em dung tag ul li lồng các tag p, input, button Sử dụng css display: inline- block để chúng cùng nằm trên một dòng, width, height, margin, padding để canh vị trí và tạo sự cân bằng

Hình 57 Hình ảnh minh họa css vùng v7

Vùng thứ tám là id=”v8”

Hình 58 Hình ảnh minh họa vùng v8

Vùng này thể hiện các thông tin cần thiết để liên hệ với chủ trang web khi gặp sựu cố, tìm hiểu các chính sách ưu đãi, tư vấn khi mua hàng,….

Contacts.html

 Trang này là trang để mọi người liên lạc khi gặp sự cố khó khan

 Đối với nội dung phần này em chia thành 4 vùng

Vùng thứ đầu tiên là id=”v1”

Hình 21 Hình ảnh minh họa vùng v1

Vùng này cũng tương tự vùng v1 của các trang trên Em sử dụng bootstrap mega menu và cũng được chia 2 phần, phần trên là các mục tìm kiếm, đăng nhập,… phần dưới chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con.

Vùng thứ hai là id=”v2”

Về vùng này được em chia thành 2 phần:

 Phần trên: là phần biểu diễn các thông tin như địa chỉ, số điện thoại, giờ làm việc,… Phần này em sử dụng bootstrap row column và chia thành 3 column để hiện thị thông tin cho đồng đều, sử dụng css color để điều chỉnh màu sắc cho phù hợp, font-size để hiển thị kích cỡ chữ sao cho hợp lí.

Hình 59 Hình ảnh minh họa phần trên

 Phần dưới: là các ô input để khách nhập thông tin khi muốn liên hệ để giải quyết sự cố nào đó khi mua hang trên trang web

Hình 60 Hình ảnh minh họa phần dưới

Vùng thứ ba là id=”v3”

Hình 61 Hình ảnh minh họa vùng v3

Vùng thứ tư là id=”v4”

Hình Hình 62 Hình ảnh minh họa vùng v4

SignIn.html

Phần này chứa nội dung đăng nhập của trang Theo em phần này chia làm 4 vùng Vùng thứ nhất là id=”v1”

Hình 21 Hình ảnh minh họa vùng v1

Vùng này cũng tương tự vùng v1 của các trang trước

Vùng thứ hai là id=”v2”

Hình 63 Hình ảnh minh họa vùng v2 Đối với vùng này em sử dụng bootstrap tab, gồm 2 tab đăng nhập và dăng kí, trong tab là các tag input để nhập tin khi đăng nhập hoặc đăng kí Em sử dụng css text- align:center để chúng canh giữa và các margin, width, height,… để phù hợp với đồ dài rộng của các tab

Vùng thứ ba là id=”v3”

Hình 64 Hình ảnh minh họa vùng v3

Vùng thứ tư là id=”v4”

Hình 65 Hình ảnh minh họa vùng v4

Ngày đăng: 20/09/2023, 15:16

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w