LẬP TRÌNH KỊCH BẢN VỚI JAVASCRIPT NHÓM 3 XÂY DỰNG TRANG WEBSITE ĐƠN GIẢN

VIỆN CƠNG NGHỆ THƠNG
TIN VÀ TRUYỀN THƠNG

LẬP TRÌNH KỊCH BẢN VỚI
JAVASCRIPT
NHÓM 3

XÂY DỰNG TRANG WEBSITE ĐƠN GIẢN

GIÁO VIÊN HƯỚNG DẪN: TS. BAN HÀ BẰNG
SINH VIÊN:
TRẦN THANH TÚ
HOÀNG MẠNH HIỆP
TRẦN XUÂN LƯƠNG
LÊ VĂN ĐỈNH
Hà Nội, tháng 10/2019


NỘI DUNG
1. Trình bày về Web tiểu sử nhân vật
2. Trình bày về Web hồ sơ cơng ty


1. Web tiểu sử nhân vật
1. Cơng cụ sử dụng
• HTML
• CSS
• Bootstrap 4
• Sublime text
2. Trình bày về chi tiết các bước làm

BOOTSTRAP
1. Đặt vấn đề
• Một Website được gọi là "Reponsive" (Có tính đáp ứng), nếu
nó tương thích với các thiết bị có độ lớn màn hình khác nhau
như máy tính, máy tính bảng (Tablet), điện thoại di động
(Mobile).
• Trước năm 2013, một website muốn tương thích với máy tính
và điện thoại di động, các lập trình viên phải viết 2 project
khác nhau.
• Năm 2013 được coi là năm của các thiết kế "Responsive", bởi
vì người dùng ngày càng ưu chuộng các thiết bị cầm tay nhỏ
như máy tính bảng và điện thoại thơng minh. Hành vi của đa
số người dùng đã thay đổi, họ chuyển dần sang đọc các tin
tức của họ thông qua các thiết bị di động.


BOOTSTRAP
2. Bootstrap là gì
• Bootstrap là một nền tảng (framework) miễn phí, mã nguồn
mở, dựa trên HTML, CSS & Javascript, nó được tạo ra để xây
dựng các giao diện Website tương thích với tất cả các thiết bị
có kích thước màn hình khác nhau.
• Bootstrap bao gồm những cái cơ bản có sẵn như: typography,
forms, buttons, tables, navigation, modals, image
carousels và nhiều thứ khác. Nó cũng có nhiều Component,
Javascript hỗ trợ cho việc thiết kế Reponsive của bạn dễ
dàng, thuận tiện và nhanh chóng hơn.
• Phát triển responsive web mobile.
• Thiết kế website reponsive nhanh hơn và dễ dàng hơn.

• Phát triển bởi Mark Otto và Jacob Thornton tại Twitter.
• Mã nguồn mở vào tháng 8 năm 2011 trên GitHub.


CÁC PHIÊN BẢN BOOSTRAP
• Các phiên bản


CÀI ĐẶT BOOSTRAP
1. Tải xuống từ: 
2.
/
sau đó thêm thẻ link,
chỉ đường dẫn đến
file bootstrap.css hoặc
bootstrap.min.css​.
Thêm thẻ script vào
cuối thẻ body.
2. Thêm Bootstrap từ CDN
/>on/


ĐIỂM MẠNH CỦA BOOTSTRAP 4 (1)
• Gọn nhẹ chỉ với 88KB

• Bootstrap đã hồn thành xuất sắc q trình cải tiến cho phiên bản 4
của chính phiên bản tiền nhiệm trước đó của nó.
• So sánh với phiên bản ổn định gần đây nhất của Bootstrap là 3.3.7
thì ta sẽ thấy được dung lượng file Bootstrap.min.css giảm đi đáng
kể, từ 121KB trên phiên bản cũ, và giờ đây chỉ còn 88KB ở phiên

bản Beta mới này.

• Dễ sử dụng
• Tính năng Responsive
• Tương thích với trình duyệt


ĐIỂM MẠNH CỦA BOOTSTRAP 4 (2)
Sử dụng Sass thay thế LESS
• Nếu như ở phiên bản Bootstrap 3 là sử dụng LESS làm engine để
tiền xử lý cho CSS thì đến phiên bản 4 này, Bootstrap đã có bước
thay đổi đáng kể, đó là chuyển từ LESS sang SASS.
• SO với LESS thì SASS sẽ dễ sử dụng hơn đồng thời cung cấp nhiều
khả năng tùy biến hơn. Mặt khác Libsass Sass Compiler được viết
bằng ngơn ngữ C/C++ chính vì thế mà bootstrap 4 sẽ được biên
soạn (Compile) nhanh hơn trước nhiều.


ĐIỂM MẠNH CỦA BOOTSTRAP 4 (3)
Điểm mới về Bootstrap card
• Khi sử dụng Bootstrap 3, chúng ta có thể đã từng dùng tới
các Components như Wells, Thumbnails hay Panel rồi nhưng
sáng đến Bootstrap 4, những components này sẽ được loại
bỏ và thay thế bằng một Component hồn tồn mới đó là
cards.
• Bootstrap Cards được tạo ra với nhiều sự lựa chọn đa dạng
phục vụ cho nhiều mục đích sử dụng của người dùng là một
điểm hữu ích đến từ Bootstrap 4 .

ĐIỂM MẠNH CỦA BOOTSTRAP 4 (4)
Hỗ trợ Flexbox
• Bootstrap 4 đã support Flexbox và Flexbox thực sự rất tuyệt
vời cho các nhà phát triển web, bởi các thành phần nằm trong
container sẽ được sắp xếp, căn chỉnh gọn gàng đẹp đẽ ngay
cả khi kích thước của thành phần chưa được xác định trước.
• Với việc hỗ trợ đa dạng mục đích sử dụng người dùng,
Flexbox cho phép các nhà phát triển web, sắp xếp các phần
tử trên web một cách linh hoạt theo ý đồ của chính họ, chỉ với
vài dòng lệnh đơn giản, các phần tử của website đã được sắp
xếp theo đúng ý đồ của chúng ta và cũng đảm bảo việc
Responsive cho các phần tử đó trên web, giảm tải việc code
cho các nhà phát triển.


HỌC VÀ SỬ DỤNG BOOTSTRAP
• Học boostrap 4: />• Cách sử dụng: Viết thuộc tính class cho thẻ HTML


LƯỚI TRONG BOOTSTRAP
• Hệ thống lưới Grid System trong Bootstrap 4


CHIA CỘT TRONG BOOTSTRAP
• Cách chia cột trong Bootstrap
1. class="col-x-y"

X

y

xs

•
•

sm
md
lg
xl

2. class="col-y"
3. class=“col"

Số cột mà thành phần chiếm
Giá trị từ 1 đến 12


THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT
1. Tạo file index.html
import Bootstrap css, Js, Jquery, fontawesome (hiển thị các icon).
2. Tạo file style.css
Import file style.css


THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT
1. Tạo thanh điều hướng với class Navbar
• Navigation Bar (Thanh điều hướng) là một phần của giao diện của
giao diện người dùng, giúp cho người dùng có thể đi tới các trang
(page) khác nhau trong website.

• Bootstrap cung cấp cho bạn các lớp CSS liên quan, giúp bạn dễ dàng
tạo được một Navigation Bar và tương thích với tất cả các thiết bị có
độ lớn màn hình khác nhau.


THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT
• Để tương thích với các thiết bị có độ rộng màn hình khác nhau. Thanh
cơng cụ của Bootstrap có thể mở rộng (expand) hoặc thu nhỏ
(collapse) tùy thuộc vào kích thước màn hình. Hành vi đơn giản nhất là
nó biến đổi từ một thanh cơng cụ nằm ngang thành thẳng đứng khi độ
rộng màn hình nhỏ.
• Các thanh cơng cụ tiêu chuẩn được tạo ra với lớp .navbar, và
lớp .navbar-expand-xl|lg|md|sm để chỉ rõ với những độ rộng màn
hình nào thì thanh cơng cụ sẽ mở rộng (expand), ngược lại thì nó thu
gọn (collapse).


THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT
2. Tạo Carousel
• Carousel là một plugin của jQuery giúp chuyển đổi bất kỳ
phần tử HTML nào thành dạng lặp quay vịng. Trong
bootstrap thì plugin này được tích hợp sẵn trong file
bootstrap.js


THIẾT KẾ WEB TIỂU SỬ NHÂN VẬT
3. Tạo phần nội dung
• Sử dụng Bootstrap Container
• Trong HTML, một container là một phần tử có thể chứa các phần tử
khác, chẳng hạn như <div>, <span>,..

• Lớp .container hoặc .container-fluid có thể được sử dụng cho các
phần tử này.


2. WEB HỒ SƠ CƠNG TY
Cơng cụ sử dụng:
• HTML5
• CSS
• Framework Bootstrap 4 *
• Jquery
• Resume & jquery-easing *
• Font Awesome *
• Google fonts *
• Visual Studio Code *


Font Awesome
Cách sử dụng:
• Truy cập />• Đăng ký hoặc đăng nhập
• Chọn Start và tạo một Kit


Resume & jquery-easing
Resume
• Là một thư viện Javascript được tìm thấy trong teamplate Resume
• />
Jquery-easing
• jquery-easing />• Chi tiết: />• A jQuery plugin from GSGD to give advanced easing options.
Tạo hiệu ứng trên trang web

Google Fonts
• Cung cấp các phơng chữ đẹp hỗ trợ tốt Tiếng Việt
• Trực tuyến
• Miễn phí
• Website: />

Visual Studio Code
• Là một trình biên tập mã được phát triển bởi Microsoft dành cho
Windows, Linux và macOS.
• Miễn phí, mã nguồn mở
• Trang chủ: />• Phổ biến
• Chức năng:
• Syntax highlighting
• Tự động hồn thành mã thơng minh
• Debugging

• Thơng tin thêm:
/>

Demo và giải thích Website