Trước tiên, chúng ta hãy xem cách xem trước và gỡ lỗi trang in. Chúng tôi không muốn liên tục nhấp chuột phải vào một trang và chọn In để xem trang của chúng tôi
Google Chrome
Khởi chạy chế độ kiểm tra bằng cách nhấp chuột phải vào trang và chọn 'Kiểm tra'. Ngoài ra, sử dụng CTRL + SHIFT + I cũng hoạt động tốt
Nhấp vào 3 dấu chấm ở trên cùng bên phải của bảng điều khiển Kiểm tra và làm theo các mục được đánh dấu và chọn 'Kết xuất'
Bạn sẽ thấy cửa sổ 'Kết xuất' xuất hiện trong cửa sổ kiểm tra. Cuộn xuống hết cỡ cho đến khi bạn thấy Emulate CSS media type. Thay đổi danh sách thả xuống thành print như hình bên dưới
Mozilla Firefox
Nó thậm chí còn dễ dàng hơn trong Firefox. Chuyển sang chế độ kiểm tra giống như Chrome
Khi ở chế độ kiểm tra, hãy làm theo hình ảnh bên dưới và nhấp vào biểu tượng giống trang tai chó để chuyển sang chế độ xem trước bản in
Giờ đây, chúng tôi có thể gỡ lỗi kiểu giống như cách chúng tôi gỡ lỗi bất kỳ trang web nào
Thiết lập một biểu định kiểu in
Giống như bất kỳ trang web nào, trước tiên hãy đính kèm biểu định kiểu in bằng cách tham chiếu nó trong tiêu đề. link rel="stylesheet" href="print.css"
trong bản in. css, gõ như sau
@media print {
…
}
Mọi kiểu dáng trong thẻ sẽ chỉ áp dụng cho trang được in
Chúng tôi cũng có thể thêm kiểu dáng cụ thể của màn hình bằng cách sử dụng như sau
@media screen {
…
}
Mẹo tạo kiểu in
Khi in một trang, hầu hết người dùng chỉ muốn nội dung của trang. Xóa đầu trang, điều hướng và chân trang. như một ví dụ
Bạn đã bao giờ thử in từ trình duyệt web của mình chưa?
Các sự cố phổ biến khi in từ web bao gồm các yếu tố bị dịch chuyển, thiếu hình ảnh, nội dung không vừa với trang, v.v.
Tôi sẽ chỉ cho bạn cách làm cho trang web của bạn được in giống như trên màn hình
Giúp đỡ. Trang in của tôi trông rất tệ
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ọ nhìn thấy
Để kiểm tra những gì người dùng sẽ thấy khi họ in, hãy chọn Tệp > In từ Google Chrome [có bản xem trước bản in đẹp mắt]. Thật không may, bản xem trước bản in trông không giống trang web đẹp đẽ của bạn
Bố cục bị mất hoàn toàn trong bản in… hay là vậy?
cách khắc phục nhanh
Nếu có một trang đơn giản, bạn có thể sửa đổi một thuộc tính HTML để cải thiện đáng kể kết quả in ra
To apply the fix, open your HTML file in a text editor and search for any or media attribute with a value of all:
Tải lại trang trong trình duyệt của bạn và chọn Tệp > In
Chọn hộp kiểm Hình nền để bao gồm hình nền
Nếu mọi thứ có vẻ tốt ở giai đoạn này, thì bạn đã sẵn sàng. 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 điều đó, trang web của bạn đã sẵn sàng để in
Thay đổi đơn giản này sẽ không khắc phục được mọi trường hợp in. Điều gì sẽ xảy ra nếu mọi thứ vẫn không ổn ở giai đoạn này? . Đừng lo lắng, chúng tôi đã có câu trả lời
Điều gì xảy ra nếu bản sửa lỗi nhanh không hoạt động?
Có một cách để kiểm soát nhiều khía cạnh hơn của việc in ấn. Trên thực tế, bạn thậm chí có thể nhắm mục tiêu kiểu dáng dành riêng cho bản in trên các yếu tố riêng lẻ mà tôi sẽ chỉ cho bạn ngay sau đây. Điều này sẽ yêu cầu một số thử nghiệm
Cụ thể, hãy xem việc in chứng chỉ từ khóa học Adobe Captivate
Tôi sẽ hướng dẫn cách in chứng chỉ sạch mà không cần bất kỳ giao diện người dùng trên màn hình nào
Tạo tệp sẽ chứa các quy tắc in
First, add a link in the HTML to an additional CSS file:
Trên dòng đầu tiên của bản in mới được tạo. css, hãy nhập lại CSS hiện có [được tạo bởi Captivate] nhưng với loại phương tiện in
@import url["nội dung/css/CPLibraryAll. css"] in;
Thêm định nghĩa cho @page để kiểm soát các khía cạnh của trang in
@trang { }
Thêm một truy vấn phương tiện để nhắm mục tiêu các yếu tố để in
@media in { }
Chúng tôi sẽ điền vào các quy tắc CSS này khi chúng tôi kiểm tra
vấn đề về giấc ngủ. tốc độ thử nghiệm
Có thể bạn không nhận ra, nhưng nếu quá trình giải quyết vấn đề của bạn có những 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 đạt được giải pháp của bạn. Trước khi chúng tôi bắt đầu thực hiện các thay đổi, hãy xem 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à giấy chứng nhận đượ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 để thử nghiệm CSS mới giống 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 trang
- Chọn File > Print 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 lặp lại quá trình này 30 lần thì đó là 180 bước. Rất tiếc. Nếu bạn giống tôi, bạn không thể dành thời gian hoặc sự tỉnh táo để chạy qua các bước này 180 lần
Làm thế nào để đạt được giải pháp nhanh hơn
Hãy khắc phục sự cố in này một cách thông minh và tiết kiệm cho chúng tôi rất nhiều thời gian trong quá trình này. Trong khóa học Giải quyết vấn đề dành cho Chuyên gia web, tôi chỉ cho bạn cách thu nhỏ vòng phản hồi
Giống như trong khóa học, chúng ta sẽ sử dụng các công cụ Kiểm tra trang web để giảm sáu bước xuống còn một
Cập nhật giá trị CSS và xem thay đổi trực tiếp trong trình duyệt
bam. Quy trình 180 bước giảm xuống còn 30 bước. Bây giờ bạn có thể tiếp tục một ngày của mình với tư cách là một người giải quyết vấn đề lành mạnh và đáng tự hào
Tôi muốn giải câu đố, Pat
Trong Google Chrome [có các công cụ kiểm tra web tốt nhất], hãy mở Trình kiểm tra. Xem > Nhà phát triển > Công cụ dành cho nhà phát triển hoặc nhấp chuột phải và chọn Kiểm tra phần tử
Chọn biểu tượng thiết bị ở góc trên bên trái của bảng điều khiển để chuyển sang Mô phỏng thiết bị
Tìm và chọn tab Thi đua [thường ở gần cuối]
Điều hướng đến phần Phương tiện . Chọn hộp kiểm phương tiện CSS và đảm bảo rằng in được chọn trong menu thả xuống
Bây giờ bạn có thể xem tài liệu sẽ được in như thế nào [trừ ranh giới trang]
Bên trong các công cụ kiểm tra, giờ đây chúng ta có thể tìm kiếm các phần tử và kiểm tra CSS mới. Ví dụ: tôi nhận thấy rằng các điều khiển phát lại có id của playbar, sau đó tôi nhắm mục tiêu trong CSS chỉ in để ẩn các điều khiển
@media in {
#playbar { hiển thị. không có. 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 SHIFT để nhảy theo gia số 10 pixel
Tôi đã sử dụng kỹ thuật kiểm tra nhanh này để thấy rằng việc di chuyển vùng chứa chính 278 pixel sang bên trái sẽ ẩn Mục lục mà tôi đã thêm vào CSS chỉ in
#main_container { còn lại. -278px. quan trọng;
Tôi cũng muốn ẩn nút In chứng chỉ . Khi sử dụng Trình kiểm tra, tôi thấy rằng Captivate tạo id bắt đầu bằng Button_. CSS này ẩn nút đó
[id^="Button_"]{ hiển thị. không có. quan trọng;
Trong khi đó, Chrome đang xem trước trực tiếp các thay đổi. 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 Print Preview. Đây là bản in đã hoàn thành. css có cài đặt phù hợp với tôi về lề trang
@trang {
lề. 25in;
đệm. 0;
}
@media in {
html, nội dung {
chiều rộng. 110%;
chiều cao. tự động;
lề. tự động;
đệm. 0;
}
#main_container { còn lại. -278px. quan trọng;
#playbar { hiển thị. không có. quan trọng;
[id^="Button_"]{ hiển thị. không có. quan trọng;}
}
Các cài đặt này được tối ưu hóa để in ngang vì chứng chỉ nằm ngang. Lưu ý rằng bạn có thể sử dụng đơn vị in [e. g. , inch và mm] bên trong quy tắc @page