Font size
WorksheetsTHIẾT KẾ WEB - BÀI 5
Total questions: 30
Worksheet time: 40mins
Giao diện bị rối, hiệu ứng động nhiều, màu sắc gắt, bố cục phức tạp khiến người dùng khó tập trung. Nhóm thiết kế đã vi phạm nguyên tắc nào?
Sự phức tạp
Sự cân đối
Sự đơn giản
Sự nhất quán
Khi thiết kế một phiên bản giao diện dành riêng cho điện thoại di động, bạn nên ưu tiên kiểm tra bố cục với độ phân giải nào để đảm bảo tương thích tốt?
1920×1080 px
1024×768 px
375×667 px
1440×900 px
Một website bán hàng đang bị phản ánh là tải rất chậm trên thiết bị di động. Nhóm phát triển cần thực hiện hành động nào sau đây để tối ưu thời gian tải?
Thêm các hiệu ứng động bắt mắt
Giảm số lượng hình ảnh và yếu tố không cần thiết
Tăng số lượng video nền để tăng tính tương tác
Tăng độ phân giải của tất cả ảnh sản phẩm
Kéo thả tên nguyên tắc thiết kế vào mô tả tương ứng
Giao diện tự động thích ứng với kích thước màn hình khác nhau
Responsive Design
Dùng không gian trống để giúp nội dung nổi bật, dễ đọc
Whitespace
Giữ cho trang web đơn giản, dễ hiểu, không gây rối mắt
KISS (Keep It Simple, Stupid)
Chia bố cục thành hàng và cột để sắp xếp phần tử hợp lý
Grid System
Hãy kéo và thả hành động phù hợp vào từng bước trong quy trình xây dựng bố cục trang web.
Giữ cho giao diện rõ ràng, không rối mắt
Thiết kế đơn giản và gọn gàng
Chia trang thành các khu vực chức năng: header, content, footer
Xác định khu vực chính
Hiểu rõ mục tiêu, người dùng và nội dung trang web
Thu thập thông tin
Phác thảo sơ đồ bố cục trước khi lập trình
Tạo wireframe
Hãy cho biết các phát biểu sau là Đúng hay Sai
Grid System giúp chia bố cục trang thành các cột và hàng để dễ sắp xếp nội dung.
ĐÚNG
SAI
Đặt càng nhiều menu và nút chức năng trên giao diện sẽ giúp tăng trải nghiệm người dùng.
ĐÚNG
SAI
Nguyên tắc KISS khuyến khích giữ bố cục trang web đơn giản và dễ hiểu.
ĐÚNG
SAI
Popup là một phần chính trong bố cục trang web giống như header và footer.
ĐÚNG
SAI
Hãy cho biết các phát biểu sau về các thành phần cơ bản trong bố cục web là Đúng hay Sai
Footer thường được đặt ở cuối trang và chứa thông tin liên hệ hoặc bản quyền.
ĐÚNG
SAI
Sidebar là nơi chứa nội dung chính và tiêu đề trang.
ĐÚNG
SAI
Main content thường được dùng để hiển thị quảng cáo và popup.
ĐÚNG
SAI
Header thường chứa logo và menu điều hướng chính của trang web.
ĐÚNG
SAI
Cho đoạn mã HTML sau
Mã CSS sau đây định nghĩa cho thẻ nào? (chọn 2 đáp án)
ul.sub-menu trong HTML là phần tử con trực tiếp của thẻ <a> nên selector sẽ hoạt động đúng.
Selector ul.hmenu a:hover > ul.sub-menu sẽ không có tác dụng với đoạn HTML vì ul.sub-menu không phải là con trực tiếp của <a>.
Để CSS hoạt động như mong muốn, ul.sub-menu cần được đặt trực tiếp bên trong thẻ <a>.
Câu lệnh CSS sẽ áp dụng màu nền vàng cho ul.sub-menu khi người dùng đưa chuột vào thẻ <a> trong menu.
Đoạn mã HTML sau:
Đoạn mã CSS dưới đây sẽ thực hiện điều gì?
Thay đổi màu sắc của mục khi hover
Thêm đường kẻ chia cách giữa các mục trong menu dọc
Thêm margin cho các mục trong menu dọc
Thêm border cho các mục trong menu dọc
Mã HTML sau sẽ tạo một footer chứa menu liên kết:
Đoạn mã CSS nào dưới đây sẽ thực hiện thay đổi màu chữ của các liên kết trong footer khi di chuột vào?
Mã HTML sau sẽ tạo một footer chứa icon mạng xã hội:
Đoạn mã CSS nào dưới đây sẽ thực hiện thay đổi màu của icon khi rê chuột vào?
Mã HTML sau sẽ tạo một ma trận sản phẩm trong web bán hàng sử dụng các thẻ <div>:
Đoạn mã CSS dưới đây sẽ thực hiện điều gì để căn chỉnh sản phẩm trong ma trận:
Thay đổi kích thước của sản phẩm
Canh chỉnh sản phẩm nằm giữa
Thêm border cho sản phẩm
Canh chỉnh sản phẩm nằm bên trái
Mã HTML sau sẽ tạo một ma trận sản phẩm trong web bán hàng sử dụng các thẻ <div>:
Đoạn mã CSS dưới đây sẽ thực hiện điều gì?
Thay đổi màu chữ của sản phẩm
Thêm border cho sản phẩm
Thay đổi font chữ của sản phẩm
Thay đổi kích thước của sản phẩm
Cho đoạn mã HTML và CSS như sau, hãy cho biết các phát biểu sau là Đúng hay Sai khi chỉ chuột vào liên kết trong thẻ:
Liên kết sẽ được gạch dưới.
ĐÚNG
SAI
Văn bản liên kết sẽ được in đậm.
ĐÚNG
SAI
Màu chữ của liên kết chuyển thành đỏ.
ĐÚNG
SAI
Màu nền của liên kết sẽ chuyển sang đỏ.
ĐÚNG
SAI
Cho đoạn mã HTML và CSS sau. Hãy điền từ khóa còn thiếu vào chỗ trống để khi rê chuột vào icon mạng xã hội, con trỏ chuột chuyển thành hình bàn tay.
Đáp án:
(a)
Một sinh viên đang thiết kế portfolio cá nhân muốn đảm bảo trang web hiển thị tốt trên máy tính bảng và điện thoại. Nguyên tắc thiết kế nào cần được áp dụng?
Responsive Design để giao diện thích ứng với mọi kích thước màn hình
Tạo footer nổi bật ở đầu trang
Dùng font-size lớn nhất ở mọi phần tử
Chuyển toàn bộ nội dung thành hình ảnh
Cho đoạn mã HTML và CSS như sau, hãy cho biết các phát biểu sau là Đúng hay Sai:
Hình ảnh sẽ được bo góc và hiển thị dưới dạng hình tròn.
ĐÚNG
SAI
Hình ảnh sẽ có chiều rộng cố định là 200px.
ĐÚNG
SAI
Một đường viền màu xám dày 2px sẽ bao quanh ảnh.
ĐÚNG
SAI
Chiều cao của ảnh sẽ bị cắt cố định theo số pixel.
ĐÚNG
SAI
Đoạn mã HTML sau:
Đoạn mã CSS dưới đây sẽ thực hiện điều gì?
Hiển thị menu ngang
Hiển thị menu dọc
Hiển thị menu đa cấp
Hiển thị danh sách
Hãy điền từ khóa còn thiếu vào chỗ trống trong đoạn mã HTML sau:
Đáp án:
(a)
Cho đoạn mã HTML và CSS như sau, đoạn mã CSS sẽ thực hiện điều gì? (Chọn 2 đáp án)
Làm tiêu đề có màu chữ trắng
Căn giữa nội dung trong phần header
Căn lề trái tiêu đề trong header
Tạo phần đầu trang có nền màu xám nhạt
Đoạn mã HTML sau đây sẽ tạo một menu dropdown:
Hoàn thành đoạn mã CSS điều khiển hiển thị submenu
Lệnh tại vị trí 1: (a)
Lệnh tại vị trí 2: (b)
Hãy điền từ khóa còn thiếu vào chỗ trống trong đoạn mã CSS sau:
Đáp án:
(a)
Cho đoạn mã HTML và CSS như sau, đoạn mã CSS sẽ thực hiện điều gì? (Chọn 2 đáp án)
Xóa gạch dưới của liên kết
Làm cho liên kết có màu đỏ
Thêm khoảng cách giữa các liên kết
Làm liên kết nằm dọc theo cột
Cho đoạn mã HTML
Đoạn mã CSS dưới đây có tác dụng gì?
Biến thẻ <li> thành thẻ mức khối
Biến thẻ <a> thành mức khối để chiếm toàn bộ thẻ <li> chứa nó
Bỏ kiểu danh sách của <li>
Bỏ gạch chân của liên kết
Kéo thả phương pháp điều hướng phù hợp vào từng mục sử dụng.
Trình chiếu ảnh quảng cáo ở đầu trang
Slider navigation
Chia vùng nội dung và chuyển đổi ngay trên cùng một trang
Tab navigation
Chia kết quả tìm kiếm thành nhiều trang có đánh số
Pagination
Hiển thị menu con khi di chuột vào mục chính trên header
Dropdown menu
Khi tư vấn thiết kế giao diện trang web, bạn cần cảnh báo khách hàng tránh chọn bảng màu gây rối mắt và thiếu tính đồng nhất. Trong các yếu tố sau, yếu tố nào không phù hợp khi chọn màu sắc cho bố cục web?
Màu sắc phức tạp và lộn xộn
Màu sắc đồng nhất với thương hiệu
Màu tương phản hợp lý
Màu tương đồng để tạo sự hài hòa
Cho đoạn mã HTML và CSS như sau, hãy cho biết các phát biểu sau là Đúng hay Sai:
Các liên kết sẽ hiển thị theo chiều dọc.
ĐÚNG
SAI
Các liên kết sẽ có khoảng cách bên phải 20px.
ĐÚNG
SAI
Các liên kết sẽ có gạch chân mặc định.
ĐÚNG
SAI
Các liên kết không có đường gạch chân nhờ thuộc tính text-decoration: none.
ĐÚNG
SAI
Mã HTML sau sẽ tạo một ma trận sản phẩm trong web bán hàng sử dụng các thẻ:
Đoạn mã CSS dưới đây sẽ thực hiện điều gì:
Thay đổi font chữ của sản phẩm
Thay đổi màu chữ của sản phẩm
Thay đổi màu nền của sản phẩm khi hover
Thêm border cho sản phẩm khi hover
Kéo thả thành phần vào vị trí đúng trong bố cục trang web
Phần dưới cùng của trang, chứa thông tin liên hệ, bản quyền
Footer
Phần trên cùng trang, thường chứa logo và menu
Header
Khu vực bên cạnh nội dung chính, thường chứa liên kết phụ
Sidebar
Phần nội dung chính hiển thị thông tin chính của trang
Main Content
Mã HTML sau đây sẽ tạo một footer đơn giản cho trang web:
Đoạn mã CSS nào dưới đây sẽ thực hiện thay đổi màu nền của footer?
