5.3: Xây dựng bài học dạng cuộn
Bài thuyết trình dạng cuộn (fluid) hoạt động giống một bài học trên web hơn là một vùng vẽ cố định. Chiều cao trang có thể tăng theo nội dung, trong khi chiều rộng tối đa giúp các dòng chữ dài và phương tiện lớn không bị kéo giãn vô hạn trên màn hình rộng.
Bố cục dạng cuộn hữu ích cho các bài học tập trung vào việc đọc, nội dung đáp ứng (responsive) và những trang có độ dài thay đổi. Nó không tự động sửa các đối tượng có vị trí cố định từ một bài thuyết trình dạng trang chiếu có sẵn.
1. Chuyển sang bố cục dạng cuộn
- Mở bài thuyết trình trong trình soạn thảo.
- Chọn Thiết kế trên thanh trên cùng.
- Mở rộng Bố cục nếu mục này đang đóng.
- Trong Loại, chọn Linh hoạt (giống web).
- Chọn Tự do hoặc Bố cục tự động trong Định vị, tùy theo cách bạn muốn sắp xếp nội dung.
Việc thay đổi loại áp dụng cho toàn bộ bài thuyết trình. Hãy nhân bản những bài quan trọng trước một lần chuyển đổi lớn khi bạn cần giữ lại bố cục cố định ban đầu.
2. Đặt chiều rộng nội dung tối đa
Mở Chiều rộng tối đa và chọn chiều rộng lớn nhất mà nội dung bài học được phép chiếm.

| Tùy chọn | Điểm khởi đầu tốt cho... |
|---|---|
| 600px (Narrow) | Cột đọc tập trung |
| 800px | Bài học gọn với văn bản và phương tiện nhỏ |
| 1024px (Medium) | Nội dung bài học đáp ứng nói chung |
| 1280px (Wide) | Kết hợp văn bản, phương tiện và nội dung nhiều cột |
| 1440px | Bố cục rộng trên máy tính để bàn |
| 1920px (Full HD) | Nội dung thiết kế cho màn hình lớn |
| Toàn chiều rộng (100%) | Bố cục muốn dùng toàn bộ chiều rộng sẵn có |
| Tùy chỉnh... | Một chiều rộng cụ thể từ 320 đến 3840 pixel |
Chiều rộng tối đa là giới hạn trên, không phải chiều rộng thiết bị bắt buộc. Trên màn hình hẹp hơn, trình phát có ít không gian ngang hơn và nội dung vẫn phải có khả năng co lại hoặc xuống dòng.
3. Xây dựng để đọc tốt trên mọi màn hình
- Ưu tiên Bố cục tự động và các nhóm vùng chứa cho nội dung cần tự sắp xếp lại.
- Giữ các khối văn bản dễ đọc thay vì kéo một dòng dài ra hết chiều rộng màn hình.
- Dùng có chủ đích các bố cục nhóm Hàng, Cột, nhiều cột và dạng ô; hãy thử xem điều gì xảy ra khi không gian ngang bị thu hẹp.
- Tránh phụ thuộc vào nhiều đối tượng tự do chồng lên nhau. Chúng có thể va chạm khi chiều rộng sẵn có thay đổi.
- Kiểm tra kích thước phương tiện và việc xuống dòng của văn bản sau khi thêm hoặc thay thế nội dung.
- Dùng Nền trang cho bề mặt trang, sau đó kiểm tra độ tương phản ở cả chiều rộng hẹp và rộng.
Chiều cao trang dạng cuộn sẽ tăng để vừa với nội dung, nhưng một đối tượng vẫn có thể chồng lên đối tượng khác nếu cả hai dùng vị trí không cùng tham gia một bố cục tự động.
4. Xem trước trải nghiệm của người học
Chọn Trình chiếu sau mỗi thay đổi đáng kể về bố cục đáp ứng.

Ví dụ Employee Handbook bắt đầu bằng một hình ảnh rộng và tiếp tục với các trang tập trung vào việc đọc bên trong một bài thuyết trình dạng cuộn. Hãy đi qua các trang của nó và kiểm tra rằng mỗi phần vẫn dễ đọc khi nội dung tăng lên. Nếu nội dung được chuyển từ trang chiếu cố định bị chồng lên nhau, hãy quay lại trình soạn thảo, chuyển các đối tượng bị ảnh hưởng vào những vùng chứa phù hợp, chọn bố cục nhóm tự động khi thích hợp, rồi xem trước lại.
Hãy kiểm tra ít nhất các điều kiện sau:
- Trang đầu tiên tải lên mà không có nội dung nào bị cắt.
- Văn bản xuống dòng mà không che phương tiện hoặc nút điều khiển.
- Trang có thể dài thêm theo chiều dọc và vẫn dễ cuộn.
- Nội dung đã nhóm giữ đúng thứ tự dự kiến.
- Câu hỏi, tương tác và các nút điều khiển của trình phát vẫn dùng được.
- Nội dung cuối cùng trên mỗi trang hiển thị đầy đủ trước khu vực điều hướng của trình phát.
Nếu quy trình kiểm thử trên trình duyệt của bạn hỗ trợ nhiều kích thước cửa sổ, hãy lặp lại việc xem trước ở chiều rộng hẹp và rộng. Một khung nhìn đúng trong trình soạn thảo trên máy tính không chứng minh rằng khung nhìn của người học là đáp ứng.
Kiểm tra nhanh
Trước khi tiếp tục, hãy chắc rằng bạn có thể:
- chọn Linh hoạt (giống web);
- chọn một chiều rộng tối đa hữu ích;
- giải thích vì sao chiều rộng tối đa không phải là chiều rộng khung nhìn cố định;
- sắp xếp nội dung để nó có thể xuống dòng hoặc xếp chồng; và
- dùng Trình chiếu để tìm và sửa tình trạng chồng lấn hoặc bị cắt.
Trước: Dùng bố cục trang chiếu cố định · Tiếp: Sắp xếp nội dung bằng bố cục nhóm · Quay lại Phần V · Quay lại toàn bộ hướng dẫn