Hướng dẫn html page print layout - bố cục in trang html
|
Bạn đã bao giờ thử in từ trình duyệt web của mình chưa? Tại sao phiên bản in trông không giống những gì trong trình duyệt của bạn? Show
Các vấn đề phổ biến khi in từ web bao gồm các yếu tố thay đổi, hình ảnh bị thiếu, nội dung không phù hợp với trang, v.v. Tôi sẽ đến & nbsp; chỉ cho bạn cách làm cho trang web của bạn in giống như cách nó trông trên màn hình. Cứu giúp! Trang web in của tôi trông thật khủng khiếp!Bạn đã có một trang web trông tuyệt vời trên màn hình và bạn cần người dùng có thể in những gì họ thấy. Để kiểm tra những gì người dùng sẽ thấy khi họ in, chọn & nbsp; File> Print & nbsp; từ Google Chrome (nó có một bản xem trước in đẹp). Thật không may, bản xem trước in trông không giống với trang web đẹp của bạn. Bố cục hoàn toàn bị mất trong phiên bản in hay là nó? Sửa chữa nhanh chóngNếu bạn có một trang đơn giản, & nbsp; bạn có thể sửa đổi một thuộc tính HTML duy nhất để cải thiện đáng kể kết quả in. Để áp dụng bản sửa lỗi, hãy mở tệp HTML của bạn trong trình soạn thảo văn bản và tìm kiếm bất kỳ & nbsp; Tải lại trang trong trình duyệt của bạn và chọn & nbsp; Tệp> In. Chọn hộp kiểm & NBSP; NB có nền & NBSP; để bao gồm hình ảnh nền. Nếu mọi thứ có vẻ tốt ở giai đoạn này, thì bạn đã thiết lập tất cả. Bạn có thể muốn cung cấp hướng dẫn cho người dùng về cách in với nền, nhưng ngoài ra trang web của bạn đã sẵn sàng để in. Thay đổi đơn giản này đã giành được sửa chữa mọi kịch bản in ấn. Điều gì sẽ xảy ra nếu mọi thứ vẫn không có vẻ tốt ở giai đoạn này? Có lẽ trang của bạn phức tạp hơn hoặc bạn cần phải ẩn các yếu tố nhất định khi in. Đừng lo lắng, chúng tôi đã có câu trả lời. Điều gì sẽ xảy ra nếu sửa chữa nhanh không hoạt động?Có một cách để kiểm soát nhiều khía cạnh của in ấn. Trên thực tế, bạn thậm chí có thể nhắm mục tiêu kiểu dáng đặc trưng cho các yếu tố riêng lẻ, điều mà tôi sẽ chỉ cho bạn trong giây lát. Điều này sẽ yêu cầu một số thử nghiệm. Cụ thể, hãy để Lừa nhìn vào & nbsp; in một chứng chỉ & nbsp; từ một khóa học Adobe quyến rũ. Tôi sẽ chỉ ra cách in một chứng chỉ sạch mà không có bất kỳ giao diện người dùng trên màn hình nào. Tạo tệp sẽ giữ các quy tắc inĐầu tiên, hãy thêm một liên kết trong HTML & NBSP; & NBSP; vào tệp CSS bổ sung: Tải lại trang trong trình duyệt của bạn và chọn & nbsp; Tệp> In. Chọn hộp kiểm & NBSP; NB có nền & NBSP; để bao gồm hình ảnh nền. Nếu mọi thứ có vẻ tốt ở giai đoạn này, thì bạn đã thiết lập tất cả. Bạn có thể muốn cung cấp hướng dẫn cho người dùng về cách in với nền, nhưng ngoài ra trang web của bạn đã sẵn sàng để in. Thay đổi đơn giản này đã giành được sửa chữa mọi kịch bản in ấn. Điều gì sẽ xảy ra nếu mọi thứ vẫn không có vẻ tốt ở giai đoạn này? Có lẽ trang của bạn phức tạp hơn hoặc bạn cần phải ẩn các yếu tố nhất định khi in. Đừng lo lắng, chúng tôi đã có câu trả lời. Điều gì sẽ xảy ra nếu sửa chữa nhanh không hoạt động? Có một cách để kiểm soát nhiều khía cạnh của in ấn. Trên thực tế, bạn thậm chí có thể nhắm mục tiêu kiểu dáng đặc trưng cho các yếu tố riêng lẻ, điều mà tôi sẽ chỉ cho bạn trong giây lát. Điều này sẽ yêu cầu một số thử nghiệm. Cụ thể, hãy để Lừa nhìn vào & nbsp; in một chứng chỉ & nbsp; từ một khóa học Adobe quyến rũ. Tôi sẽ chỉ ra cách in một chứng chỉ sạch mà không có bất kỳ giao diện người dùng trên màn hình nào.Tạo tệp sẽ giữ các quy tắc in Đầu tiên, hãy thêm một liên kết trong HTML & NBSP; & NBSP; vào tệp CSS bổ sung:
Vấn đề về người ngủ: tốc độ thử nghiệm Bạn có thể không nhận ra điều đó, nhưng nếu quá trình giải quyết vấn đề của bạn có các bước không cần thiết, nó sẽ làm bạn chậm lại và cản trở khả năng của bạn để đạt được giải pháp. Trước khi chúng tôi bắt đầu thực hiện các thay đổi, hãy để chúng tôi xem xét cách tiếp cận của chúng tôi đối với vấn đề tạo kiểu in này. Trong trường hợp này, giải pháp mong muốn là chứng chỉ được in đẹp mắt của chúng tôi.Vòng phản hồi mặc định của chúng tôi để kiểm tra CSS mới là một cái gì đó như: Cập nhật CSS của chúng tôi Lưu các tập tin Chuyển sang trình duyệt Làm mới trangChọn Tệp> In và xem kết quả Đóng hộp thoại in Rửa sạch và lặp lại Đó chỉ là khoảng sáu bước, nhưng nếu bạn & nbsp; lặp lại quy trình 30 lần, thì đó là 180 bước. Yike! Nếu bạn giống như tôi, bạn có thể đủ khả năng thời gian hoặc sự tỉnh táo để chạy qua các bước này 180 lần. Cách tiếp cận giải pháp nhanh hơn Hãy để khắc phục vấn đề in ấn này theo cách thông minh và tiết kiệm hàng tấn thời gian trong quá trình này. Trong giải quyết vấn đề của tôi cho các chuyên gia web & nbsp; khóa học, tôi chỉ cho bạn cách & nbsp; thu hẹp vòng lặp phản hồi. @Media in {#playbar {Display: none! Quan trọng; }} Thực hiện các điều chỉnh pixel riêng lẻ bằng các phím mũi tên lên và xuống. Thêm ca để nhảy theo gia số 10 pixel. Tôi đã sử dụng kỹ thuật thử nghiệm nhanh này để thấy rằng việc di chuyển container chính 278 pixel sang bên trái ẩn bảng nội dung mà tôi đã thêm vào CSS chỉ in: #main_container {trái: -278px! Quan trọng; } Tôi cũng muốn ẩn & nbsp; in chứng chỉ & nbsp; nút. Sử dụng thanh tra viên, tôi thấy rằng Captivate tạo ra & nbsp; id & nbsp; rằng & nbsp; bắt đầu với & nbsp; naph_. CSS này ẩn nút đó: [id^= "nút _"] {Hiển thị: Không! Quan trọng; } Trong khi đó, Chrome là những thay đổi theo dõi trực tiếp. Chúng tôi không phải chuyển đổi giữa các ứng dụng! Một vài điều chỉnh cuối cùng yêu cầu bạn kiểm tra bản xem trước in. Tại đây, các tập tin đã hoàn thành & nbsp; print.css & nbsp; với các cài đặt hoạt động cho tôi về lề trang: @Page {lề: .25in; Đệm: 0; } @Media in {html, body {width: 110%; Chiều cao: Tự động; Biên độ: Tự động; Đệm: 0; } #main_container {trái: -278px! Quan trọng; } #playbar {Display: none! Quan trọng; } [id^= "nút _"] {display: none! quan trọng;}} Các cài đặt này được tối ưu hóa để in phong cảnh, vì chứng chỉ là cảnh quan. Lưu ý rằng & nbsp; bạn có thể sử dụng các đơn vị in (ví dụ: inch và mm) & nbsp; bên trong & nbsp;@page & nbsp; quy tắc. Mẹo thưởng: Tạo nút inTrong trường hợp bạn không có chức năng in, ở đây, JavaScript: window.print(); Toàn bộ nút (chức năng) có thể đơn giản như: In tôi Kiểm tra nó trên & nbsp; jsfiddle. Sau đó, bạn có thể sử dụng những gì bạn đã học ở trên để ẩn nút khi được in. Muốn tìm hiểu thêm? Các khóa học học LinkedIn này có thể giúp:
 |
