1. Trang chủ
  2. » Giáo Dục - Đào Tạo

BÀI tập THIẾT kế WEB xây DỰNG WEBSITE TRƯỜNG mầm NON

67 5 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 67
Dung lượng 1,1 MB

Nội dung

lOMoARcPSD|20482156 ĐẠI HỌC SƯ PHẠM KỸ THUẬT KHOA CÔNG NGHỆ SỐ BỘ MÔN CÔNG NGHỆ THÔNG TIN BÀI TẬP THIẾT KẾ WEB XÂY DỰNG WEBSITE TRƯỜNG MẦM NON Giáo viên hướng dẫn: Th.S Trần Bữu Dung Sinh viên thực hiện: Nguyễn Đức Phước Lớp học phần: 221TKW02 Mã sinh viên: 21115053120235 Đà Nẵng, tháng năm 2022 lOMoARcPSD|20482156 PHẦN I Mã nguồn 1 HTML .1 Index.html Program.html 13 Teacher.html 20 CSS 28 Grid.css 28 Program.css 40 Slice-style.css 42 Style.css 44 Style2.css 52 Teacher.css 56 JS 59 Slice.js .59 PHẦN II KẾT QUẢ 60 Giao diện trang chủ 60 Giao diện trang tầm nhìn nhiệm vụ 63 Giao diện trang đội ngũ giáo viên 64 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) BÁO CÁO CUỐI KỲ THIẾT KẾ WEB PHẦN I Mã nguồn HTML Index.html TRANG CHỦ 0905624543 dpschool@gmail.com Đặt lịch tham quan Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) TRANG CHỦ VỀ CHÚNG TÔI CHƯƠNG TRÌNH HỌC
  • LỚP HỌC THEO TUỔI
  • EDUCATION
  • HỌC TIẾNG ANH
Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) TUYỂN SINH THƯ VIỆN Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) ❮ ❯ TIN TỨC Tạo tảng tốt cho trẻ Tại đây, tin trách nhiệm dành cho trẻ mơi trường học tập tốt trải nghiệm để hỗ trợ lộ trình phát triển cho trẻ Xem thêm Chương trình học chúng tơi Hình thức tiếp cận học tập lấy trẻ làm trung tâm Đảm bảo tính khoa học, hợp lí, phù hợp với nhịp điệu sinh học trẻ theo lứa tuổi cá nhân trẻ Xem thêm Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Mục đích xây dựng lớp học Trường mầm non ln lưu tâm để có thiết kế thận trọng, đẹp mắt dành cho trẻ môi trường học thực hỗ trợ hành trình học tập Xem thêm THƠNG TIN CHÍNH VỀ TRƯỜNG MẦM NON DPN Cơ sở vật chất Khu học tập rộng 1400m2 Khu học tập rộng 1400m2 Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Chương trình học Đảm bào tính khoa học, hợp lí, phù hợp với nhịp điệu sinh học Độ tuổi Việt Nam: Độ tuổi học mẫu giáo trung bình từ - 2,5 tuổi Ngôn ngữ giảng dạy Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) 100% tiếng anh Khu học tập rộng 1400m2 ngôn ngữ khác THOÁNG QUA TRƯỜNG MẦM NON DPN CHIA SẺ CỦA MỌI NGƯỜI VỀ TRƯỜNG MẦM NON Phụ huynh Học sinh Giáo viên Chị Thu Minh Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Mẹ HS Đức Toàn

Cảm nhận mẹ Bean thấy tuyệt vời, Cảm ơn thầy cô giáo đồng hành Papakidz ngơi nhà thứ 2, vui vẻ đến trường, nhớ bạn, đòi đến , mẹ tự hào yên tâm gửi trường tốt

Anh Tiến Minh Bố HS Huy Đức

Cảm nhận mẹ Bean thấy tuyệt vời, Cảm ơn thầy cô giáo đồng hành Papakidz ngơi nhà thứ 2, vui vẻ đến trường, nhớ bạn, nhớ giáo địi đến trường, mẹ tự hào yên tâm gửi trường tốt

Bà Hoàng Châu Bà HS Gia Minh

Cảm nhận mẹ Bean thấy tuyệt vời, Cảm ơn thầy cô giáo đồng hành Papakidz Lớp học phần: 221TKW02 Trang lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) module container-text > video h3::before, module container-text > feedback h3::before, trust h3::before { content: ""; position: absolute; background: #1976d2; width: 75px; height: 2px; bottom: -145.8px; left: 50%; transform: translateX(-50%); } module container-text > module h3::before { bottom: -753.8px; } module container-text > video h3::before { bottom: -1294.5px; } module container-text > feedback h3::before { bottom: -2124.8px; } trust h3::before { bottom: -2792px; left: 35%; } module info { background-color: white; } category, trust panel { display: flex; margin-top: 50px; } category item, panel item { border: 1px solid silver; width: 90px; height: 90px; padding-top: 7px; border-radius: 50px; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 51 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) category info, panel info { padding: 25px; text-align: left; } fix { height: 160px; } nav left nav left tab > a { color: #000; } red hover:hover > a { color: #e73446; z-index: 100; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 52 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Style2.css video, feedback, trust, footer { width: 100%; height: 100%; padding: 60px 0; } video { background-color: #f5f5f5; } video main, feedback person { width: 100%; margin-top: 20px; display: flex; justify-content: center; align-items: center; } feedback person { margin-bottom: 20px; margin-top: 0; } feedback person > span { margin: 20px; margin-bottom: 20px; font-size: 20px; } feedback { padding-bottom: 120px; } feedback std { color: #55acee; font-size: 20px; margin-bottom: 20px; } feedback box-main { height: 120%; background-color: #f5f5f5; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 53 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) trust { display: flex; } trust left { width: 70%; } trust right { flex: 1; } trust panel { font-size: 20px; margin-top: 20px; } panel text { text-align: left; margin-left: 20px; margin-top: 20px; color: #636363; } panel item { border: none; } trust img > img { width: 400px; height: 400px; } content > footer { background-color: #e73446; } footer img > p { margin-left: 18%; margin-bottom: 40px; } footer text, footer icon { color: white; font-size: 24px; font-weight: bold; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 54 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) } footer icon { color: white; font-size: 16px; text-align: left; padding: 20px 20px 80px; } footer text-input > input, button, textarea { display: block; margin: 20px 20px 80px; border-color: #e73446; outline: none; font-size: 20px; border-radius: 10px; padding: 10px; } text input-contact { height: 34px !important; } footer text-input > button { padding: 10px 118.8px; background-color: white; color: #e73446; } footer text-input > button:hover { background-color: #55acee; cursor: pointer; } footer text-input > textarea { height: 120px; width: 275px; font-size: 18px; } content footer-fix { width: 100%; background-color: rgba(31, 12, 12, 0.844); position: fixed; z-index: 9999; bottom: 0px; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 55 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) content footer-fix > ul { display: flex; justify-content: center; align-items: center; } content footer-fb, content footer-twitter, content footer-gg, content footer-ig { border-radius: 30px; color: white; } content footer-fb { background-color: #4867aa; padding: 2px 2px 2px 9px; } icon-fix { width: 2%; list-style: none; margin: 5px 15px 5px 10px; font-size: 20px; } icon-fix:hover { background-color: #e73446; cursor: pointer; } content footer-twitter { background-color: #55acef; padding: 2px 2px 2px 7px; } content footer-gg { background-color: #34a853; padding: 2px 2px 2px 6px; } content footer-ig { background-color: #cb2694; padding: 2px 2px 2px 6.5px; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 56 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Teacher.css @import url("https://fonts.googleapis.com/css2? family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,4 00;1,500;1,600&display=swap"); footer { background-color: #e73446; position: relative; top: -650px; } teacher outStanding { height: 600px; position: relative; top: -750px; } teacher card { display: flex; align-items: center; justify-content: center; font-family: "Poppins"; color: white; } teacher card > card { background: rgba(19, 40, 52, 0.888); width: 300px; height: 400px; border-radius: 10px; text-align: center; overflow: hidden; } teacher card > card > card img > img { object-fit: cover; width: 100%; height: 100%; object-position: center; } teacher outStanding-title > p { margin: 50px auto; text-align: center; font-size: 48px; font-family: "Poppins"; color: #e73446; padding-top: 50px; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 57 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) teacher card > card > card img { width: 120px; height: 120px; border: 4px solid #f2726a; border-radius: 50%; overflow: hidden; margin: 0px auto; transform: translateY(25px); transition: 0.5s; } teacher card > card h2 { margin-top: 35px; } teacher card > card p { color: #f2726a; } teacher card > card > card social a { color: white; margin: 0px 20px; font-size: 20px; } teacher card > card > card social { margin: 25px 0; } teacher card > card button { width: 150px; height: 40px; background: transparent; color: white; border-radius: 5px; transition: 0.5s; font-family: "Poppins"; line-height: 20px; border: 1px solid #f2726a; } teacher card > card button:hover { background: #f2726a; cursor: pointer; } teacher card > card > card img:hover { width: 100%; Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 58 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) height: 100%; border-radius: unset; transform: unset; border: none; cursor: pointer; } teacher card > card > card social a:hover { color: #e73446; } teacher card > card { margin-right: 25px; } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 59 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) JS Slice.js var slideIndex = 0; showSlides(); function plusSlides(n) { showSlides2(slideIndex += n); } function showSlides2(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; } function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 5000); } Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 60 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) PHẦN II KẾT QUẢ Giao diện trang chủ Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 61 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 62 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 63 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Giao diện trang tầm nhìn nhiệm vụ Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 64 lOMoARcPSD|20482156 SVTH: Nguyễn Đức Phước (36) Giao diện trang đội ngũ giáo viên Lớp học phần: 221TKW02 Downloaded by Ninh Lê (ninhvaytiennhanh@gmail.com) Trang 65 ... class="info">Mục đích xây dựng lớp học Trường mầm non ln lưu tâm để có thiết kế thận trọng, đẹp mắt dành cho trẻ môi trường học thực hỗ trợ hành trình học tập ... vui vẻ đến trường, đơi nhớ bạn, nhớ giáo địi đến trường, mẹ tự hào yên tâm gửi trường tốt

Ngày đăng: 24/12/2022, 22:00

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

TÀI LIỆU LIÊN QUAN

w