Báo cáo Đồ án thiết kế web Đề tài thiết kế và xây dựng wesbite giới thiệu, quảng cáo cửa hàng bán giấy dán tường

+Web được phát minh và đưa vào sử dụng vào khoảng năm 1990, 1991 bởi viện sĩ Viện Hàn lâm Anh Tim Berners Lee và Robert Cailliau Bỉ tại CERN, Geneva, Switzerland HTML – Ngôn ngữ trình bà

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO ĐỒ ÁN THIẾT KẾ WEB

ĐỀ TÀI: Thiết kế và xây dựng wesbite giới thiệu, quảng cáo cửa hàng bán

giấy dán tường

Giảng viên hướng dẫn: TH.S Giang Hào Côn

Sinh viên thực hiện: Bùi Quang Anh

MSSV: 2200007998

Chuyên ngành: Công Nghệ Thông Tin

Đơn vị thực tập: Đại Học Nguyễn Tất Thành

Khóa: 2022 – 2023

TP.HCM, ngày 25 tháng 08 năm 2023

LỜI MỞ ĐẦU

Ngày nay công nghệ thông tin đã có những bước phát triển mạnh mẽ theo

cả chiều rộng và chiều sâu Máy tính điện tử không còn là một thứ phương tiện

quý hiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí thông

dụng của con người không chỉ ở công sở mà ngay cả trong gia đình Đứng trước

vai trò của thông tin hoạt động cạnh tranh gay gắt, các tổ chức và các doanh nghiệpđều tìm mọi biện pháp để xây dựng và hoàn thiện hệ thống thông tin của mình

nhằm tin học hóa các hoạt động tác vụ của đơn vị

Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải

thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại

hóa trên internet Thông qua các sản phẩm và công nghệ này, chúng ta dễ nhận ra

tầm quan trọng và tính tất yếu của thương mại điện tử Với những thao tác đơn

giản trên máy có nối mạng internet bạn sẽ có trong tầm tay những gì mà mình cần

mà không phải mất nhiều thời gian Bạn chỉ cần vào các trang dịch vụ thương mạiđiện tử, làm theo hướng dẫn và click vào những gì bạn cần Các nhà dịch vụ sẽ

mang đến tận nhà cho bạn

Ở Việt Nam cũng có rất nhiều doanh nghiệp đang tiến hành thương mại hóa

trên Internet nhưng do những khó khăn về cơ sở hạ tầng như viễn thông chưa pháttriển mạnh, các dịch vụ thanh toán điện tử qua ngân hàng chưa phổ biến nên chỉ

dừng lại ở mức độ giới thiệu sản phẩm và tiếp cận đơn hàng thông qua web Để

tiếp cận và đóng góp đẩy mạnh sự phổ biến của thương mại điện tử ở việt nam,

em đã tìm hiểu và cài đặt Website bán giấy dán tường Với sự hướng dẫn tận tình

của thầy: GIANG HÀO CÔN em đã hoàn thành cuốn báo cáo đồ án này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc chắn

không tránh khỏi đc những thiếu sót Em rất mong được sự thông cảm và góp ý của các quý thầy cô

Tp HCM, tháng 8 năm 2023

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô

của trường Đại học Nguyễn Tất Thành, đặc biệt là thầy GIANG HÀO CÔN đã tận tình hướng dẫn cho em những thông tin, kiến thức, kĩ năng cần thiết để có thể

hoàn thành bài báo cáo trên

Trong quá trình tìm hiểu, thực hiện khó tránh khỏi những sai sót, kính mong

các thầy cô bỏ qua Đồng thời do trình độ lý luận cũng như kĩ năng và kiến thức

còn hạn chế nên bài báo cáo không thể tránh khỏi những thiếu sót Em rất mong

nhận được những ý kiến của các thầy cô để em học thêm được nhiều kinh nghiệm

và sẽ hoàn thành tốt hơn trong những bài báo cáo sau

Sau cùng em xin kính chúc quý thầy cô dồi dào sức khỏe, niềm tin để tiếp

tục thực hiện sứ mệnh cao đẹp truyền đạt kiến thức cho thế hệ mai sau và luôn

thành công tốt đẹp trong công việc

Sinh viên thực hiện Bùi Quang Anh

TRƯỜNG ĐẠI HỌC NGUYỂN TẤT THÀNH KỲ THI KẾT THÚC HỌC PHẦN

TRUNG TÂM KHẢO THÍ HỌC KÌ III NĂM HỌC2023

PHIẾU CHẤM ĐIỂM TIỂU LUẬN/ĐỒ ÁN

Môn Thi: Thiết kế Web Lớp Học Phần:22DTH4B

Nhóm Sinh Viên Thực Hiện:18

Ngày Thi : 25/08/2023 Phòng Thi: L.505

Đề tài tiểu luận/báo cáo của sinh viên : Thiết kế Web bán giấy dán tường

Phần đánh giá của giảng viên ( căn cứ trên thang rubrics của môn học):

Điểm Đạt Được

TP HCM,Ngày….,Tháng… ,Năm

Giảng viên chấm thi

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

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ ĐỀ TÀI

1.1/ Lý do chọn đề tài: 11

1.2/ Mục tiêu nghiên cứu: 11

1.3/ Đối tượng nghiên cứu: 11

1.4/ Phạm vi nghiên cứu: 11

1.5/ Bố cục đề tài: 11

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1/ Tổng Quan về Internet và Web** 11

2.2/ Ngôn Ngữ HTML** 13

2.3/ Ngôn ngữ định dạng dữ liệu (CSS)** 18

2.4/ Bootstrap Framework** 19

2.5/ Web Layout** 20

2.6/ JavaScript & jQuery** 22

CHƯƠNG 3: THIẾT KẾT VÀ CÀI ĐẶT 3.1/ Sitmap (sơ đồ Website): 24

3.2/ Thiết kế và cài đặt: 25

KÊT LUẬN VÀ HƯỚNG PHÁT TRIỂN I Hướng mở rộng và phát triển của dự án thiết kế website bán giấy dán tường 57

II Ưu điểm, khuyết điểm và khả năng ứng dụng thực tế của dự án* 57

**Ưu điểm:** 57

**Khuyết điểm:** 57

TÀI LIỆU THAM KHẢO DANH MỤC BẢNG BIỂU Bảng 2.1.1………13

Bảng 2.2.1………14

Bảng 2.2.2………15

Bảng 2.2.3………15

Bảng 2.2.4………16

Bảng 2.2.5………16

Bảng 2.2.6………17

Bảng 2.2.7………17

Danh Mục Hình Ảnh

C:\Đồ án\Hinh\tv

C:\Đồ án\Hinh\banner

C:\Đồ án\Hinh

C:\Đồ án\Hinh\gdt3d

C:\Đồ án\Hinh\gdthq

C:\Đồ án\Hinh\gdtpk

C:\Đồ án\Hinh\gdtpn

C:\Đồ án\Hinh\gdtpte

C:\Đồ án\Hinh\gt

gdtpte Giấy dán tường phòng trẻ em

Chương 1: Giới thiệu chung về đề tài

1 Giới thiệu

SaiGonWallLuxury:Với xu hướng phát triển hiện đại như hiện nay, giấy dán tường là một vật thẩm mĩ không thể thiếu cho ngôi nhà.Vì thế nên việc tạo ra trang web bán giấy dán tường có thể đáp ứng nhu cầu của một số lượng lớn người tiêu dùng

SaiGonWallLuxury:Chuyên buôn bán các mặt hàng giấy dán tường

SaiGonWallLuxury: là website thương mại điện tử với mô hình B2C Khách

hàng xem các sản phẩm được nhà cung cấp đăng lên trên trang web, chọn

một sản phẩm và đặt hàng

SaiGonWallLuxury: là một website chuyên kinh doanh về các mặt hàng giấy dán tường Website được chia thành các trang web gồm có:

a Trang chủ: Hiển thị các danh mục sản phẩm.

b Đăng nhập : Cho phép người dùng đăng nhập

c Đăng kí :Cho phép người dùng đăng kí

d Shop: Hiển Thị Các Sản Phẩm

e Chi Tiết Sản Phẩm: Hiện thị thông tin chi tiết của sản phẩm

được chọn( đơn giá, mô tả, hình ảnh sản phẩm, )

f Giỏ Hàng: Hiển thị các sản phẩm khách hàng chọn mua

g Thanh Toán: Hiển thị thông tin giỏ hàng và lấy thông tin cần

thiết cho khách khi tiến hành thanh toán Nơi người mua sẽ thanh toán đơn hàng

h Liên hệ với chúng tôi:Khách hàng liên hệ với chúng tôi

i.Về Chúng Tôi:Giới thiệu trang web và công ty chúng tôi.

Chương 2:Cơ sở lý thuyết

2.1:Tổng Quan về Internet và Web

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”

+Có thể nói, Internet là mạng máy tính khổng lồ, được tạo thành dựa trên sự gia nhập của rất nhiều mạng máy tính của các doanh nghiệp, các viện nghiên cứu, các trường đại học, các

tổ chức, chính phủ và của cả các cá nhân (người dùng) trên toàn thế giới

Lịch sử phát triển

+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) 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ệnkết nối với ARPANET đều bắt buộc phải sử dụng chuẩn mới này

+1989 - Tim Berners-Lee phát minh ra giao thức World Wide Web, sau đó tạo ra ngôn ngữ Hypertext Markup Language – HTML

+25/12/1990 – Tim Berners-Lee viết trình duyệt (Web Browser) và Web server đầu tiên (CERN HTTPd)

+Giao thức TCP/IP ngày càng thể hiện những ưu điểm của nó, và quan trọng nhất là khả năng liên kết các hệ thống mạng khác nhau một cách dễ dàng Chính điều này cùng với các chính sách mở cửa đã cho phép các hệ thống mạng dùng cho mục đích nghiên cứu và thương mại có thể kết nối được với ARPANET

+Internet được sử dụng trong mọi lĩnh vực, từ Thương mại, Chính trị, Quân sự, cho đến Nghiên cứu, Giáo dục, Văn hoá, Xã hội

+Từ năm 1993 Internet phát triển rất nhanh Việt nam có Internet vào tháng 11/1997

Web là gì ?

+Là các dịch vụ phân tán cung cấp thông tin multimedia dựa trênhypertext

+Phân tán: thông tin được đặt trên nhiều máy chủ khắp thế giới Multimedia: thông tin bao gồm text, graphics, sound, video

+Hypertext: là kỹ thuật được sử dụng để truy cập thông tin

Các khái niệm căn bản

ISP (Internet Service Provider)

IPAddress

Domain name

Hosting: Web hosting, Email hosting, File hosting,

Web page – Website

Web Browser: Google Chrome, Safari, Firefox, Opera, Interne Explorer,

Search Engine: Google, Bing, Yahoo search,

Social network: Facebook, Google +, Twitter, pinterest,

World Wide Web và HTML

+World Wide Web còn được gọi tắt là Web (hay WWW), được xem là “không gian thông tin toàn cầu” mà mọi người có thể truy cập qua các máy tính có kết nối với mạng Internet +Web được phát minh và đưa vào sử dụng vào khoảng năm 1990, 1991 bởi viện sĩ Viện Hàn lâm Anh Tim Berners Lee và Robert Cailliau (Bỉ) tại CERN, Geneva, Switzerland

HTML – Ngôn ngữ trình bày dữ liệu Web

+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

+HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức của HTML là HTML 4.01 được công bố vào năm 1999

Bảng 2.1.1

Web tĩnh và động

+Có thêm ngôn ngữ lập trình Server như

ASP.NET, PHP, và cơ sở dữ liệu SQL

Server, MySQL,

+Cho phép người dùng có thể tương tác

với website

+Dễ dàng bảo trì và nâng cấp website

+Chi phí thiết kế website cao

+Ứng dụng cao: Thiết kế website bán

hàng, thiết kế website bất động sản, thiết

kế website doanh nghiệp

+Không cho phép người dùng tương tácvới website, các thông tin cần thay đổitrên website cần can thiệp trực tiếp đểsửa trên file HTML

+ Khó khăn trong việc bảo trì, nâng cấp+ Chi phí thiết kế website thấp+ Giao diện đẹp

2.2: Ngôn Ngữ HTML

Giới thiệu ngôn ngữ HTML

+HTML (HyperText Markup Language)

• Ngôn ngữ đánh dấu siêu văn bản

• Là ngôn ngữ xây dựng trang Web

• Chứa các chỉ dẫn cho trình duyệt Web hiển thị nội dung của một trang Web

+Một trang web gồm có 2 phần chính:

• Dữ liệu của trang web (văn bản, âm thanh, hình ảnh )

• Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu

trên hiển thị trên trình duyệt

Cấu trúc một tài liệu HTML

<! DOCTYPE html >

<html lang = "en" >

<head>

<meta charset = "UTF-8" >

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

<title > Document </ title >

+Để tăng khả năng trình bày cho các thẻ html, Có thể sử dụng Attribute

+Nhớ rằng 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+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

Các Tag HTML cơ bản

Sử dụng cho tiêu đề (Headings): <H1>, <H2>, <H6>

- Mô tả đoạn văn <p>, <br/>

- Mô tả một phần văn bản <span>

- Giữ nguyên nội dung <pre>

- Tạo đường kẻ ngang <hr/>

- Dùng cho định dạng: <b>, <i>, <u>, <sub>, <sup>

Ký tự đặt biệt

Bảng 2.2.1

“ Quotation mark &quot; &#34;

> Greater-than &gt; &#62;

Khoản trắng Non-breaking space &nbsp; &#160;

Tag xử lý hình ảnh

Chèn hình vào trang web

+Sử dụng thẻ: <img src=“url” alt=“text” width=“n” height=“n”>

+src=“url”: đường dẫn đến file hình ảnh

+alt=“text” :chú thích cho hình ảnh trong tường hợp không có hình

+width=“n”: qui định chiều rộng hình

+height=“n”: qui định chiều cao hình

Các thuộc tính:

behavior :Hành vi di chuyển của marquee bằng một trang 3 giá trị sau: scroll, slide alternate.direction: Hướng di chuyển của nội dung Giá trị của directioncó thể là left, right, up và down

width :Chiều rộng của marquee theo pixel hoặc %

height: Chiều cao của marquee theo pixel hoặc %

width=“n”: Chiều cao không gian tính bằng pixcel mà marquee di chuyển trong nó.height=“n”: Chiều rộng không gian tính bằng pixcel mà marquee di chuyển trong nó.scrolldelay: Độ chễ khi cuộn theo giây

scrollamount: Số lần cuộn theo số

loop: Vòng lặp cho nội dung của marquee theo số

bgcolor: Màu nền của marquee

Liên kết (Link) trong HTML

• URL là đường dẫn đến tài liệu mà các bạn muốn người dùng sẽ được chuyển đến

• Nội dung đại diện cho cái liên kết có thể là văn bản hoặc hình ảnh

3) Phân loại đường dẫn đến tài liệu: Thông thường thì "đường dẫn đến tài liệu" được chia

ra làm hai loại chính:

+Đường dẫn tuyệt đối

+Đường dẫn tương đối

Audio tag – Âm Thanh

<audio src=”url_audio” controls autoplay loop muted> Chuỗi thông báo thể hiện trường hợp trình duyết của người dùng không hỗ trợ audio tag</audio>

Bảng 2.2.2

src Đường dẫn đến tập tin audio

Controls Chỉ định việc hiển thị các nút điều khiển

Autoplay Đoạn audio sẽ tự động phát ngay sau khi tải trang xong Loop Tự động phát lặp lại sau mỗi lần kết thúc

Video Tag – Phim - hoạt cảnh

<video src=”url_audio” controls width=’val’ height=’val'> Chuỗi thông báo thể hiện trường hợp trình duyết của người dùng không hỗ trợ audio tag</video>

Bảng 2.2.3

src Đường dẫn đến tập tin audio

Controls Chỉ định việc hiển thị các nút điều khiển

Autoplay Đoạn video sẽ tự động phát ngay sau khi tải trang xong Width=’val’ Chiều rộng của khung video

Height=’val’ Chiều dài của khung video

poster Chỉ định ảnh bìa cho đoạn Video trước khi nó được phát Muted Tắt âm thanh của đoạn Video

Inline Frame (khung nội tuyến)

Cú pháp: <iframe src="https://www.youtube.com/embed/TDG3sVjuY78"width="320" height="320" title="YouTube video player" allowfullscreen></iframe>

+<iframe> </iframe> tag được dùng để chứa video bên trong iFrame

+Nguồn của iFrame (src) là phần nội dung gốc từ server bên ngoài (hoặc server nội bộ khác) Nguồn URL này phải được đặt trong dấu ngoặc kép

+Width và height là chiều rộng và cao của iFrame Bạn có thể thêm kích thước mặc định như là 680×480 pixels (px) trong ví dụ Hoặc, bạn có thể sử dụng số phần trăm (10%-100%)

2) Phân loại danh sách:

<li>Tên danh mục 1</li>

<li>Tên danh mục 2</li>

<li>Tên danh mục 3</li>

Một số thuộc tính thường được sử dụng bên trong thẻ <ol>

Bảng 2.2.4

type="value" Tùy chỉnh kiểu chỉ mục của các danh mục Trong đó, value có thể

được xác định dựa theo một trong các giá trị như sau: 1, a, A, i, I

reversed Đảo ngược thứ tự chỉ mục của các danh mục

start="n" Xác định thứ tự bắt đầu của chỉ mục đầu tiên

4) Cách tạo danh sách không thứ tự

Cú pháp

<ul>

<li>Tên danh mục 1</li>

<li>Tên danh mục 2</li>

<li>Tên danh mục 3</li>

</ul>

Một số thuộc tính thường được sử dụng bên trong thẻ <ul>

Bảng 2.2.5

disc Chỉ mục sẽ có kiểu là một dấu chấm tròn màu đen (mặc định)

circle Chỉ mục sẽ có kiểu là một dấu chấm tròn màu trắng viền đen

square Chỉ mục sẽ có kiểu là một ô vuông màu đen

none Không hiển thị chỉ mục

Bảng HTML (HTML Tables)

Các bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột

1) Các thẻ được được sử dụng trong việc tạo bảng

Bảng 2.2.6

<table> </table> Dùng để xác định một cái bảng

<tr> </tr> Dùng để xác định một hàng bên trong bảng

<th> </th> Dùng để xác định một ô (tiêu đề) bên trong hàng

<td> </td> Dùng để xác định một ô (bình thường) bên trong hàng

2) Cách thức tạo một cái bảng

Bước 1: Xác định một cái bảng Bằng thẻ: <table></table>

Bước 2: Xác định số hàng nằm bên trong bảng

Bước 3: Xác định số ô nằm bên trong mỗi hàng

3) Các thuộc tính được dung trong việc tạo bảng

width Thiết lập chiều rộng cho bảng hoặc các ô.

height Thiết lập chiều cao cho bảng hoặc các ô

align Canh lề cho nội dung bên trong ô (theo chiều ngang)

valign Canh lề cho nội dung bên trong ô (theo chiều dọc)

4) Cách gộp các ô bên trong bảng lại

4.1) Gộp các ô theo chiều ngang

Để gộp các ô theo chiều ngang thì chúng ta đặt thuộc tính colspan vào bên trong thẻ

mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải

4.2) Gộp các ô theo chiều dọc

Để gộp các ô theo chiều dọc thì chúng ta đặt thuộc tính rowspan vào bên trong thẻ

mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải

5)Tạo tiêu đề cho bảng

Để tạo một cái tiêu đề cho bảng thì chúng ta cần phải đặt thẻ <caption> nằm ở vị trí đầu tiên bên trong phần tử <table>

Cấu trúc HTML Form

<form method=”post/get” action=”url_access_when_submit”>Các thẻ input bên

trong</form>

Các thuộc tính của form:

method: giá trị của nó là POST hoặc GET, đây là cách thức gửi dữ liệu lên Server (sau này học PHP sinh viên sẽ được tìm hiểu)

action: đường dẫn đến tập tin xử lý khi người dùng submit form

Các thẻ HTML thu thập thông tin trong Form

HTML tag được sử dụng chủ yếu cho mục tiêu thu thập dữ liệu HTML Tag có thể tạo được đối tượng cho phép nhập dữ liệu trên giao diện của trang HTML theo một trong các hình thức:

textbox: Cho phép nhập thông tin ở dạng ngôn ngữ, chữ viết

radio button: Thể hiện danh sách các chọn lựa mang tính loại trừ

checkbox: Ô đánh dấu, có thể mang 2 trạng thái: (checked – unchecked)

password field: Giống như textbox, (Bảo mật, chỉ người nhập biết dữ liệu đã gõ)

button: Nút lệnh cho phép thực thi các hành động trên giao diện

submit: cũng tương tự như button

reset: giống như button

Thẻ Select (dropdown list)

Thẻ <select> và <option> trong HTML tạo ra một menu để chọn các tùy chọn, nó là một điều khiển (control) thường dùng như phần tử trong form HTML Các phần tử (các mục menu) được biểu diễn bởi thẻ <option>

Thẻ optgroup trong thẻ select

Thẻ <optgroup> (option group) dùng trong <select> để nhóm các option lại theo phân loại, theo chủ đề

thẻ div và thẻ span

Để tăng cường khả năng linh hoạt trong trình bày trên các trang web cũng như việc giới hạn phạm vi định dạng đối với dữ liệu trên một trang Html, chúng ta có thể sử dụng một trong 2 loại tag dưới đây

<div>: Tạo ra vùng chứa trên trang web, tag này có thể chứa bất kỳ tag html nào mà bạn biết Việc sử dụng div trên trang html cũng gần tương tự như việc tạo ra các phân đoạn (section) trong soạn thảo văn bản thông thường vậy

<span>: Tag này cũng mang ý nghĩa tương tự như div, tuy nhiên phạm vi ảnh hưởng của span mang ý nghĩa "hẹp” hơn, thường chỉ có hiệu lực trên phạm vi một nhóm ký tự thuộc paragraph mà thôi

Trình duyệt web chỉ tải một lần Do đó, trang web được load nhanh hơn

Giúp bố trí kiểm soát nhiều tài liệu theo một phong cách đồng nhất

Kiểm soát bố cục dàn trang chính xác hơn

Các dạng CSS

Có 3 dạng CSS

+CSS cục bộ (Inline CSS)

+CSS nội tuyến (Internal/Embedded CSS)

+CSS ngoại tuyến (External CSS)

Thứ tự ưu tiên trong CSS

CSS CỤC BỘ >> CSS NỘI TUYẾN>>CSS NGOẠI TUYẾN>>CSS MẶC ĐỊNH CỦA TRÌNH DUYỆT

Sử dụng Class Selector

Sử dụng cú pháp tên_class để khai báo Class Selector (tên_class không phân biệt HOA/thường.)

Các thuộc tính phổ biến

Ảnh hưởng tới chữ viết

font-family, font-size, font-style, font-weight, @font-face, text-decoration, text-transform, text-shadow

Ảnh hưởng trên đoạn văn

line-height, text-align, text-indent

Phạm ví, vị trí đối với vùng chứa

Background, border padding margin width, min-width, max-width height, min-height, , , , ,

max-height box-shadow left, top, bottom, right , position, z-index overflow display, , ,

2.4 BootStrap Framework

Giới thiệu Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub

Bootstrap cũng cung cấp cho chúng ta khả năng dễ dàng tạo các responsive web design

Responsive Web Desgin là gì?

Responsive web design là về việc tạo các trang web tự động điều chỉnh giao diện web để trông đẹp mắt trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn

Cách sử dụng Bootstrap

Tải trực tiếp từ trang cung cấp Bootstrap

Thông qua CDN Bootstrap

Lợi thế của việc sử dụng Bootstrap CDN

Nhiều người dùng đã tải xuống Bootstrap từ MaxCDN khi truy cập trang web khác Do đó,

nó sẽ được tải từ bộ nhớ cache khi họ truy cập trang web của chúng ta, dẫn đến thời gian tải nhanh hơn

Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng khi người dùng yêu cầu tập tin từ tập tin đó, tậptin đó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn

Hệ thống lưới Bootstrap (Grid System)

Grid system được sử dụng để tạo bố cục trang web thông qua một loạt các hàng và cột chứa nội dung

Hệ thống lưới của Bootstrap cho phép tối đa 12 cột trên toàn trang Nếu không muốn sử dụng tất cả 12 cột riêng lẻ, chúng ta có thể nhóm các cột lại với nhau để tạo các cột rộng hơn

Hệ thống lưới của Bootstrap đáp ứng và các cột sẽ tự động sắp xếp lại tùy thuộc vào kích thước màn hình.

Lớp lưới (Grid class)

.col- (thiết bị cực nhỏ - độ rộng màn hình nhỏ hơn 576px)

.col-sm- (thiết bị nhỏ - độ rộng màn hình bằng hoặc lớn hơn 576px)

.col-md- (thiết bị trung bình - độ rộng màn hình bằng hoặc lớn hơn 768px)

.col-lg- (thiết bị lớn - độ rộng màn hình bằng hoặc lớn hơn 992px)

.col-xl- (thiết bị cực lớn - độ rộng màn hình bằng hoặc lớn hơn 1200px)

.col-xxl- (thiết bị siêu lớn - độ rộng màn hình bằng hoặc lớn hơn 1400px)

Cấu trúc cơ bản của Bootstrap Grid

Trước tiên, chúng ta tạo một hàng (<div class="row">) Sau đó, chúng ta thêm số

lượng cột mong muốn (thẻ với các lớp col-*-* thích hợp)

Bootstrap List Group

Để tạo một nhóm danh sách cơ bản, hãy sử dụng phần tử <ul> với lớp list-nhóm và các phần tử <li> có lớp list-group-item

2.5 Web Layout

Giới thiệu tổng quan giao diện Web

Các loại hình web phổ biến:

Web thông tin điện tử

Web giải trí

Web doanh nghiệp – tổ chức

Web cá nhân

Web tìm kiếm (search engine)

Web diễn đàn – mạng xã hội

Web mail

Giao diện web:

Là tập hợp các thông tin đa truyền thông (Text, Image, Media, ) Được trình bày theo một

bố cục nhất định dựa trên các nguyên lý/luật thiết kế, nhằm đảm bảo yêu cầu về mặt thẩm mỹ

Nhiệm vụ chính của giao diện diện web, chính là cung cấp môi trường trực quan và đơn giản, hỗ trợ việc giao tiếp thuận lợi cùng hệ điều hành của máy tính hay các thiết bị di động.Tuy giao diện web không hẳn là nội dung, nhưng nó lại có khả năng truyền tải thông điệp khá tốt và ảnh hưởng trực tiếp đến cảm xúc của người dùng trong quá trình truy cập

Thành phần cần thiết trong giao diện web:

Hình ảnh: Chịu trách nhiệm truyền tải những nội dụng và thông điệp đến người dùng, ngay khi họ vừa truy cập vào website

Màu sắc: Xuất hiện xuyên trong tổng quan của website, từ trang chủ đến các trang con tạo được sự chuyên nghiệp và hài hòa cho trang

Kỹ xảo: Có thể là những hành động trượt, quăng nhằm mục đích tạo điểm nổi bật cho thông điệp cần truyền tải

Phần bố cục nội dung: Mang lại sự thuận tiện cho người dùng khi cần tìm kiếm một nội dung nào đó trong website

Thành phần chính trên giao diện web:

Header: logo, company name, slogan, banner

Navigation controller: main – top - bottom menu

Side bar: left – right components

Main content: text, image, media,

Footer: info, copyright

Background

Thiết kế giao diện Web

Thiết kế giao diện web là thực hiện việc trình bày các thành phần của giao diện một cách có

hệ thống và đạt yêu cầu thẩm mỹ dựa theo:

Đặc thù thể hiện của từng loại hình web

Chức năng của website

Cách thức hiển thị trang web (thiết bị, trình duyệt)

Công nghệ và chuẩn thiết kế web

Các bước triển khai giao diện Web

1) Phác thảo giao diện dưới dạng hệ thống hình lưới (grid layout)

2) Thiết kế và phân bổ các thành phần của giao diện lên hệ thống lưới tại các vị trí thích hợp

3) Chuẩn hóa việc trình bày bằng các nguyên lý/luật thiết kế

4) Tối ưu và kết xuất hình ảnh cho web

5) Thiết kế hoàn chỉnh giao diện tĩnh cho trang web

DIV LAYOUT

DIV Layout là gì?

Là kỹ thuật thiết kế giao diện tĩnh của trang web bằng thẻ div của HTML kết hợp với CSS

để trình bày các mảng nội dung của giao diện web theo một bố cục xác định

Một số ưu điểm của DIV Layout:

CSS tương thích với hầu hết các trình duyệt Sự kết hợp làm tăng sức mạnh cho HTML Linh hoạt trong việc định vị các thành phần trên giao diện web Hỗ trợ tối đa việc tùy biến giao diện Dễ dàng nâng cấp giao diện o Hỗ trợ các công cụ tìm kiếm

2.6 Javascript & Jquery

Giới Thiệu về Javascript

JavaScript là ngôn ngữ lập trình “kịch bản” (Script) có cú pháp để biểu diễn mã lệnh “tựa ngôn ngữ C” Trên thực tế, ban đầu JavaScript được phát triển từ ngôn ngữ C (derived from C) để thi hành các kịch bản định sẵn cho trang web, trong khi đó ngữ nghĩa và mục tiêu thiết kế của nó lại mang hơi hướng của lập trình hướng đối tượng (gần giống Java).Như vậy, khi lập trình với JavaScript, ngoài việc thao tác với các biến và các cấu trúc lệnh, thì “đối tượng” chính là thành phần mà chúng ta thường hay làm việc nhất

Làm được gì với JavaScript ?

Thêm, tạo mới các thành phần HTML cho trang web

Chỉnh sửa, thay đổi thuộc tính của HTML (Đổi màu, kích thước, )

Dưới đây là một số điểm nổi bật về jQuery:

1 Tương thích đa trình duyệt: jQuery được thiết kế để làm việc trên tất cả các trình duyệt web phổ biến, bao gồm cả Chrome, Firefox, Safari, và Internet Explorer

2 Sử dụng dễ dàng: jQuery giúp việc lập trình JavaScript trở nên dễ dàng hơn bằng cách cung cấp các phương thức và cú pháp ngắn gọn để thao tác với các phần tử HTML Điều này giúp giảm bớt việc viết mã lặp đi lặp lại và tăng tốc quá trình phát triển

3 Xử lý sự kiện: jQuery cung cấp các phương thức để xử lý sự kiện như nhấp chuột, nhấn phím, di chuyển chuột và nhiều hơn nữa Điều này giúp tạo ra các trang web tương tác và đáp ứng với người dùng

4 Hiệu ứng và hoạt ảnh: jQuery cung cấp các phương thức để tạo ra các hiệu ứng động và hoạt ảnh trên các phần tử HTML Điều này giúp tạo ra các trang web hấp dẫn và tăng cườngtrải nghiệm người dùng

2 Xử lý sự kiện: JQuery giúp bạn xử lý các sự kiện như nhấp chuột, gõ phím, di chuột qua hay rời khỏi một phần tử

3 Hiệu ứng và hoạt ảnh: JQuery cung cấp các phương thức để tạo hiệu ứng và hoạt ảnh trêntrang web Bạn có thể tạo hiệu ứng fade, slide, animate và nhiều hiệu ứng khác.

4 Giao tiếp AJAX: JQuery hỗ trợ giao tiếp với máy chủ thông qua AJAX, cho phép bạn tải

dữ liệu từ máy chủ và cập nhật trang web mà không cần tải lại trang

5 Xử lý đối tượng JSON: JQuery cung cấp các phương thức để làm việc với đối tượng JSON, cho phép bạn truy xuất, thêm, sửa đổi và xóa dữ liệu JSON

6 Tạo và kiểm tra hiệu năng: JQuery cung cấp các phương thức để tạo và kiểm tra hiệu năng của trang web, giúp tối ưu hóa và cải thiện tốc độ tải trang

Đây chỉ là một số chức năng cơ bản của JQuery, thư viện này còn rất nhiều tính năng khác

để giúp bạn xây dựng các ứng dụng web phức tạp và tương tác

Chương 3 :Thiết kế và cài đặt

3.1/Sơ đồ Liên kết của Website

Thiết kế và cài đặt

3.2.1/Tạo bố cục thư mục đề tài

3.2.2/Giao diện trang chủ

B1.Tạo menu

Kết quả nhận được:

B2.Tạo slider

B3.Produce