Báo Cáo Bài Tập Lớn Thiết Kế, Lập Trình Front-End Tên Đề Tài Thiết Kế, Lập Trình Fron-End Website Giày.docx

TRƯỜNG ĐẠI HỌC ĐẠI NAM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front End TÊN ĐỀ TÀI Thiết kế, lập trình Fron End Website giày Giảng viên hướng dẫn ThS Ngu[.]

Tôi sinhviên

Tơi sinh

viên

(color thuộc tính dùng màu sắc văn bản.) II CSS CSS gì? – CSS viết tắt cụm từ “Cascading Style Sheet”, ngơn ngữ quy định cách trình bày thẻ html trang web Là ngôn ngữ sử dụng nhiều lập trình web, nói CSS đời tạo nên cách mạng Đôi bạn bối rối nhận thấy đoạn code viết hiển thị khơng giống trình duyệt khác nhau, CSS giúp bạn giải toán – CSS quy định cách hiển thị nội dung thẻ HTML trình duyệt gần giống nhau, cách quy định thuộc tính cho thẻ HTML Phương thức hoạt động CSS tìm dựa vào vùng chọn, vùng chọn tên thẻ HTML, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn Hình Giới thiệu CSS Tại phải học CSS? – Css tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc chỉnh màu nền,đường viền,đổ bóng cho thẻ html Nếu website mà làm html không sử dụng css website nhìn thơ xơ Bạn tưởng tượng xe máy mà bỏ hết lớp sơn áo bên lại khung máy – CSS cung cấp cho bạn hàng trăm thuộc tính trình bày đành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu – Ngoài ra, CSS hỗ trợ tất trình duyệt khác Cấu trúc CSS Một đoạn CSS bao gồm phần này: vùng chọn { thuộc tính: giá trị; thuộc tính:giá trị; } Nghĩa khai báo vùng chọn, sau thuộc tính giá trị nằm bên cặp dấu ngoặc nhọn {} Mỗi thuộc tính ln có giá trị riêng, giá trị dạng số, tên giá trị danh sách có sẵn CSS Phần giá trị thuộc tính phải cách dấu hai chấm, dòng khai báo thuộc tính ln có dấu chấm phẩy cuối Một vùng chọn sử dụng khơng giới hạn thuộc tính VD: product-related-title p { font-family: var( main-textfont); font-size: 14px; font-weight: bold; color: #333333; } Cách chèn CSS vào HTML Trên thực tế có tới cách hay sử dụng chèn css vào website: – Cách 1: Chèn nội dung CSS vào cặp thẻ phần trang web Cách chèn CSS vào html body{background: red;} h1{ color:blue;fontsize:12px;} Cách 1 – Cách :Chèn nội dung CSS vào trực tiếp thẻ mở thơng qua thuộc tính style: Cách chèn CSS vào html Cách 2 – Cách 3: Lưu nội dung CSS file riêng có phần mở rộng css chèn file vào website thông tin thẻ , thường file css chèn cặp thẻ Sau tao file có tên style.css vs nội dung sau: body { backgroud:red;} h1{font-size: 12px;color: blue;} Lúc chèn file vào website sau: Cách chèn CSS vào html < h1>Cách2 III JS JavaScript gì? – JS (viết tắt Javascript) tảng (cross-platform), ngôn ngữ kịch hướng đối tượng (object-oriented) Nó ngơn ngữ nhỏ nhẹ Chạy môi trường máy chủ lưu trữ (ví dụ: trình duyệt web), JavaScript kết nối với đối tượng môi trường để cung cấp kiểm sốt chương trình chúng – JavaScript ngơn ngữ lập trình dựa logic Nó sử dụng để sửa đổi nội dung trang web Và khiến hoạt động theo nhiều cách khác để đáp ứng với hành động người dùng Các cách sử dụng phổ biến cho JavaScript bao gồm hộp xác nhận, kêu gọi hành động thêm danh tính vào thơng tin có Hình JavaScript ngơn ngữ lập trình đa tảng Javascript dùng để làm gì: – JavaScript ứng dụng nhiều lĩnh vực:  Lập trình web  Xây dựng ứng dụng cho website máy chủ  Ứng dụng di động, app, trị chơi… Lợi ích dùng Javascript: Là ngơn ngữ lập trình phổ biến sử dụng 92% tảng website nay, JavaScript thể vai trò quan trọng với lĩnh vực Tầm quan trọng thể qua thao tác, cơng dụng như: – Triển khai tập lệnh phía máy khách – Viết mã phía máy chủ – Thiết kế web responsive – Google AMP – Nhiều chuyển đổi Hình JavaScript ứng dụng nhiều việc tạo dựng website Các thư viện Javascript phổ biến: Hiện có nhiều thư viện khung viết từ Javascript như:  jQuery: Chuyên hiệu ứng  js: Chuyên xây dựng ứng dụng thời gian thực  AngularJS: Chuyên xây dựng ứng dụng trang cá nhân   ReactJS: Chuyên viết ứng dụng mobile Một số thư viện khác ExtJS, Sencha Touch,… Hình Ngơn ngữ Javascript viết lập trình viên tập Làm để thêm JavaScript website bạn? Để thêm chuỗi code JavaScript vào trang web, bạn cần gắn tag Ví dụ sau: Your JavaScript code Với quy tắc bản, bạn nên gắn JavaScript tag cho website bạn trừ bạn muốn thực thi thời điểm định yếu tố định trang web Bạn lưu code JavaScript file riêng gọi lên cần website IV Bootstrap Giới thiệu Bootstrap Bootstrap framework HTML, CSS, JavaScript phổ biến để phát triển trang web có yếu tố tính phản hồi tích hợp thiết bị di động Nếu bạn có nhu cầu muốn sở hữu website chuẩn responsive, có khả tương thích trình duyệt thiết bị di động chắn công nghệ thành phần lý tưởng thiếu để dùng đến Bootstrap dùng để làm gì? Bootstrap giúp trình phát triển web nhanh dễ dàng Bootstrap bao gồm mẫu thiết kế dựa HTML CSS typography, forms, buttons, tables, navigation, modals, image carousels… plugin JavaScript tùy chọn Lợi ích dùng Bootstrap Phát triển giao diện nhanh chóng: Dễ dàng phát triển giao diện website cách nhanh, trang bình thường cắt xong ngày chưa tới ngày Chưa kể đến tính tương thích với trình duyệt thiết bị di động Dễ học, dễ sử dụng: Cộng đồng đông đúc tài liệu tham khảo rõ ràng sức mạnh Bootstrap Nền tảng tối ưu: Trong bootstrap tạo sẵn thư viện để lưu trữ mà nhà thiết kế sử dụng tuỳ ý chỉnh sửa theo mục đích cá nhân Điều giúp cho việc phát triển website trở nên nhanh chóng lựa chọn mẫu có sẵn phù hợp thêm màu sắc, hình ảnh, video có giao diện đẹp Hơn nữa, bootstrap tương thích với trình duyệt thiết bị kiểm tra nhiều lần nên hồn tồn n tâm với kết làm, chí cịn bỏ qua bước kiểm tra lại, tiết kiệm thời gian, tiền bạc cho website Giao diện đầy đủ, sang trọng: Giao diện bootstrap có màu xám bạc sang trọng hỗ trợ gần đầy đủ thành phần mà website đại cần có Cầu trúc HTML rõ ràng giúp nhanh chóng nắm bắt cách sử dụng phát triển Khơng vậy, bootstrap cịn giúp website hiển thị tốt co dãn hình windows Dễ dàng tuỳ biến: Để phù hợp cho nhiều loại website, bootstrap hỗ trợ thêm tính customizer, bạn thay đổi gần tất thuộc tính để phù hợp với chương trình Nếu tuỳ chình khơng đáp ứng u cầu mình, hồn tồn chỉnh sửa trực tiếp mã nguồn bootstrap Boostrap tương thích tốt với HTML5 Hỗ trợ SEO tốt: Đây lý quan trọng Google cập nhật thuật tốn tìm kiếm Responsive yếu tố quan trọng để đưa từ khóa lên top Những file Bootstrap nhiều người sử dụng Bootstrap.css Bootstrap.css framework CSS có chức xếp quản lý bố cục trang web Trong HTML có nhiệm vụ quản lý cấu trúc nội dung trang web, CSS xử lý bố cục trang web Vì mà, hai cấu trúc phải tồn song song để thực hành động cụ thể Với chức nó, CSS cho phép bạn tạo giao diện thống nhiều trang web khác Giờ bạn khơng phải tốn thời gian với việc phải ngồi hàng để chỉnh sửa thủ công với thay đổi độ rộng đường viền.Với Bootstrap.css, tất bạn cần làm dẫn trang web đến file CSS Bất kỳ thay đổi cần thiết thực file đó.Các hàm CSS khơng giới hạn kiểu văn chúng cịn sử dụng để định dạng bảng bố cục hình ảnh Vì CSS có nhiều khai báo chọn, nên bạn cần chút thời gian để CSS ghi nhớ Bootstrap.JS Bootstrap.JS phần cốt lõi Bootstrap bao gồm file JavaScript đảm nhiệm cho việc tương tác website Để giúp tiết kiệm thời gian viết cú pháp, nhà phát triển sử dụng đến jQuery Bootstrap.JS có thư viện JavaScript đa tảng với mã nguồn mở phổ biến cho phép người dùng thêm chức khác vào trang web.Dưới số chức mà jQuery đảm nhiệm: Thực yêu cầu Ajax như: loại bỏ liệu đến từ vị trí khác cách linh hoạt  Giúp tạo tiện ích đơn giản nhanh chóng sưu tập Plugin JavaScript  jQuery tạo hình động tùy chỉnh thuộc tính CSS  Thêm tính động cho nội dung trang Web bạn Tuy Bootstrap cần thuộc tính Element HTML CSS hoạt động tốt, cần đến jQuery để tạo thiết kế Responsive Nếu khơng, bạn sử dụng phần tĩnh CSS mà  Glyphicons Để tạo nên giao diện trang web hồn chỉnh khơng thể thiếu icons Chúng sử dụng để tạo liên kết với hành động liệu định giao diện người dùng Và Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu này.Bootstrap bao gồm Halflings Glyphicons mở khóa để sử dụng miễn phí V Jquery Ở phiên này, người dùng lựa chọn giao diện chuẩn phù hợp với chức thiết yếu.Nếu bạn muốn muốn sử dụng icon có phong cách hơn, bạn mua icon premium khác mà Glyphicons có bán, chắn giao diện trang web bạn trông đẹp Ngồi ra, bạn tải biểu tượng riêng biệt miễn phí trang web khác Flaticon, GlyphSearch Icons8 Hãy lựa chọn sử dụng icons phù hợp với trang web bạn cần Cách nhúng Bootstrap vào HTML Nhúng từ liên kết Bootstrap : !DOCTYPE html> Cảm ơn bạn quan tâm đế n Vietnix Cảm ơn bạn quan tâm đế n Vietnix Nhúng Bootstrap vào HTML cách tự Host : Welcome to website Welcome to Website V Jquery Jquery gì? Jquery thư viện JavaScript thiết kế đơn giản hóa thao tác HTML DOM, xử lý kiện, hoạt ảnh CSS, Ajax Nó phần mềm mã nguồn mở, miễn phí sử dụng giấy phép MIT License Jquery dùng để làm gì? Jquery thuật ngữ phổ biến lập trình web, dùng để thư viện javascript bật Nó giúp xây dựng cách chức cho website javascript, dễ dàng, nhanh chóng, đa dạng jQuery ứng dụng giúp website có tính tương tác, hấp dẫn, thêm animation để tạo cảm giác sinh động, thơng minh Lợi ích sử dụng Jquery Đơn giản, dễ sử dụng: Với cú pháp đơn giản, người dùng phải viết dịng lệnh để tạo chức tương tự, giúp tiết kiệm thời gian cho lập trình viên Là thư viện lớn javaScript: Có khả thực thi nhiều chức so với thư viện javaScript khác Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery có cộng đồng người dùng lớn giúp phát triển plugin Nhờ mà hàng trăm plugin viết sẵn để tải lập tức, giúp đẩy nhanh trình viết code lập trình viên Đồng thời, script đảm bảo an tồn hiệu cao Có sẵn nhiều tài liệu hướng dẫn cụ thể: Các trang web JQuery có sẵn tài liệu hướng dẫn chi tiết, kể người làm lập trình tham khảo áp dụng thực tế Hỗ trợ Ajax: JQuery giúp người dùng dễ dàng phát triển template Ajax Không vậy, Ajax giúp giao diện website trở nên thu hút hơn, thực chức trang mà khơng phải tải lại tồn trang Các module phổ biến Jquery Ajax (xử lý Ajax) Effect (xử lý hiệu ứng) DOM (xử lý Data Object Model) Event (xử lý kiện) Form (xử lý kiện liên quan đến form) Attributes (xử lý thuộc tính đối tượng HTML) Selector (xử lý luồng lách đối tượng HTML) Cách sử dụng Jquery Cài đặt Jquery nội : html> The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello Sử dụng CDN : The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello CHƯƠNG : ỨNG DỤNG XÂY DỰNG FRONT-END CHO WEBSITE GIÀY