Các nhà thiết kế web gặp khó khăn với các vấn đề hiển thị của trình duyệt thường quên một cách phổ biến khác mà mọi người xem các trang Web; . Sử dụng Cascading Style Sheets để đặt tham số in cho các trang của bạn và tăng khả năng sử dụng cũng như khả năng truy cập cho tất cả khách truy cập của bạn
Đổi kiểu trang để in
Tạo các trang để in là một quy trình gồm hai bước. trước tiên, bạn cần tạo một biểu định kiểu in để sửa đổi cách hiển thị trang của bạn để xóa các phần tử không cần thiết, sau đó sử dụng phần tử LINK để có thể truy cập biểu định kiểu in
Xem xét những phần nào trong bố cục trang của bạn không cần thiết khi trang được in. Ví dụ
- hệ thống định vị. Người đọc không thể đi bất cứ đâu từ trang đã in, vì vậy menu điều hướng chỉ chiếm dung lượng
- Hinh nên. Những điều này có thể làm cho văn bản trang in khó đọc. Họ cũng sử dụng lượng mực không cần thiết để in
- Màu nền. Nếu trang của bạn có văn bản sáng trên nền tối, hãy ưu tiên khách truy cập của bạn và tạo một biểu định kiểu in có văn bản tối trên nền trắng. Này, nó thậm chí có thể trông đẹp đến mức bạn muốn sử dụng nó mọi lúc
- hình ảnh không cần thiết. Thông thường, bạn có thể loại bỏ phần lớn hình ảnh vì hầu hết mọi người in trang cho nội dung văn bản, không phải hình ảnh
Có những ngoại lệ cho hình ảnh. Một số nên ở lại với phiên bản in của trang hoặc bạn có nguy cơ gây nhầm lẫn hoặc khó chịu cho khách truy cập của mình
- Logo trang web của bạn- nó củng cố thương hiệu của bạn
- Ảnh sản phẩm- khách truy cập có thể sử dụng chúng để mua sắm so sánh
- Các ảnh quan trọng khác- ví dụ: nếu trang web của bạn hiển thị các kiểu tóc khác nhau hoặc bản đồ doanh nghiệp của bạn, hầu hết khách truy cập sẽ mong đợi rằng những hình ảnh quan trọng đó sẽ có trong phiên bản in
Vì vậy, những gì còn lại trên trang in?
- Nội dung văn bản không điều hướng
- tiêu đề phần
- hình ảnh quan trọng
- URL trang [để khách truy cập có thể tìm lại bạn trực tuyến]
CSS giúp dễ dàng loại bỏ các phần tử bạn không cần
Tạo một biểu định kiểu in
Biểu định kiểu in của bạn cần được lưu trong một tệp riêng biệt với biểu định kiểu thông thường của bạn. Đó là bởi vì bạn sử dụng hai yếu tố LIÊN KẾT khác nhau để liên kết hai biểu định kiểu với trang Web
Hãy sử dụng trang ví dụ này [bấm vào đây để xem ví dụ] với lịch sự kiện cho doanh nghiệp hư cấu "Zorra's Garden Retreat" để quyết định cách tạo biểu mẫu in mẫu
Lịch sự kiện là một nơi tuyệt vời để bắt đầu nếu bạn đang cân nhắc tạo các phiên bản in chỉ vài trang. Bất kỳ doanh nghiệp, nhóm tôn giáo hoặc tổ chức cộng đồng nào tổ chức các sự kiện hoặc cuộc họp đặc biệt sẽ thấy rằng cuối cùng sẽ có người muốn có một bản cứng của lịch đó
Đây là một ảnh chụp màn hình nhỏ về lịch của Zorra's Garden Retreat
Chỉ cần nhìn lướt qua, chúng tôi thấy một số yếu tố có thể được loại bỏ hoặc cần phải thay đổi cho phiên bản in
- Thay đổi màu nền và màu chữ thành chữ đen trên nền trắng
- Loại bỏ hệ thống điều hướng bên
- Sửa đổi chân trang
- Thêm liên kết giới thiệu trang để khách truy cập có thể tìm lại trang trực tuyến
Xem biểu định kiểu bên ngoài của trang web tại đây. Lưu ý rằng nó sử dụng các lớp kiểu để điều khiển hiển thị điều hướng, màu phông chữ, nền, v.v. Chúng tôi sẽ sửa đổi những điều này cho biểu định kiểu in. May mắn thay, điều đó khá dễ thực hiện. Vì chúng tôi không muốn điều hướng hiển thị, chúng tôi thay đổi tất cả các thuộc tính kiểu được liên kết với điều hướng để hiển thị. không ai. Sau đó, chúng ta chỉ cần sửa đổi thêm một vài yếu tố để có được hiệu ứng in như ý muốn
Dưới đây là so sánh giữa hai biểu định kiểu với một ký hiệu ngắn về các thay đổi
Thành phần trang/lớp phong cáchBasic Style SheetPrint Style Sheetthân thể
//thay đổi màu nền và màu chữ//
{lề. 0px;
phần đệm. 0px;
đường viền. 0px;
họ phông chữ. arial;
màu nền. #FFFFE1;
}{
lề. 0px;
phần đệm. 0px;
đường viền. 0px;
họ phông chữ. arial;
màu nền. trắng;
màu. đen;
}
logoBảng
//xóa màu nền//
{phần đệm. 0px;
lề. 0px;
màu nền. #006600;
chiều rộng. 100%;
đường viền. 0px;
}{
phần đệm. 0px;
lề. 0px;
chiều rộng. 100%;
đường viền. 0px;
}
td. thực đơn
//không hiển thị menu trên bản in //
chiều rộng. 165px;
màu viền phải. #336841;
căn chỉnh văn bản. tâm;
lề. 0px;
đệm. 0px;
kiểu đường viền bên phải. đặc;
chiều cao. 100%;
màu nền. #FFFFE1;
đường viền-phải-rộng. 5px;
}{hiển thị. không;}
người giới thiệu
//không hiển thị liên kết giới thiệu trên trang không in //
{hiển thị. không;}{hiển thị. khối;
trọng lượng phông chữ. in đậm;
}
Lưu biểu định kiểu đã sửa đổi này với tên "PrintStyles. css" và chúng tôi sẵn sàng liên kết nó với tài liệu
Liên kết Biểu định kiểu in
Nếu trước đây bạn đã sử dụng biểu định kiểu bên ngoài hoặc tệp JavaScript bên ngoài, thì bạn đã quen thuộc với phần tử LINK
Liên kết một biểu định kiểu bên ngoài như thế này
Khi bạn thêm biểu định kiểu in, bạn phải thêm thuộc tính "media". Điều này cho trình duyệt biết rằng các kiểu có trong đó. tệp css chỉ nên được sử dụng khi tài liệu được in
Quyết định cách liên kết
Cách dễ nhất để tạo các trang có thể in được chỉ là thêm hai thẻ LIÊN KẾT vào mỗi trang; . Một liên kết biểu định kiểu bên ngoài của bố cục cơ bản và biểu định kiểu còn lại chứa biểu định kiểu có thể in được. Đó là một quá trình liền mạch. lượt nhấp của khách truy cập của bạn sử dụng tùy chọn IN trong trình duyệt của cô ấy và máy in tạo ra phiên bản có thể in được
Để xem nó hoạt động như thế nào, hãy xem lại tệp gốc trong trình duyệt của bạn. Sau đó chọn tùy chọn Print Preview trong trình duyệt của bạn. Bạn sẽ thấy trang sử dụng bố cục biểu định kiểu in
Đây là giao diện của nó trong Firefox
Thật dễ dàng và mọi người đều vui vẻ, phải không?
Có lẽ khách truy cập của bạn thực sự muốn có một bản sao chính xác của trang- vì bất kỳ lý do gì. Cô ấy có thể bối rối và thất vọng khi không thể in một. Luôn có thể chụp ảnh màn hình rồi in, nhưng nhiều người dùng thiếu kinh nghiệm không biết cách
Vì vậy, hãy cân nhắc thêm liên kết "Phiên bản có thể in" ở vị trí nổi bật. Đó là một siêu kết nối tiêu chuẩn liên kết đến một trang chỉ sử dụng "in. css" biểu định kiểu. Ghi chú. không sử dụng thuộc tính "phương tiện" trong thẻ LINK vì bạn muốn khách truy cập xem bản xem trước của những gì họ sắp in
Điều đó có nghĩa là liên kết trên trang bố cục tiêu chuẩn của bạn sẽ giống như thế này
Phiên bản có thể in
Sau đó, lịchPrint. trang htm sẽ chỉ có một thẻ LINK
Điều này mang lại cho khách truy cập của bạn nhiều quyền kiểm soát hơn, nhưng cũng sẽ gặp nhiều rắc rối hơn nếu bạn mã hóa mọi thứ bằng tay. Đó là lý do tại sao bạn có thể cân nhắc thêm phiên bản có thể in được của chỉ một số trang quan trọng nhất hoặc có nhiều nội dung nhất của mình
Ưu điểm của các trang thân thiện với bản in
Nếu trang web của bạn có nhiều nội dung mà khách truy cập có thể muốn in để tham khảo sau này, thì các trang có thể in được có thể xứng đáng với nỗ lực tạo ra chúng. Có rất nhiều lý do chính đáng cho các trang thân thiện với bản in
- Tăng khả năng sử dụng. Du khách có thể mang theo để cho đồng nghiệp xem hoặc để tham khảo sau này
- Tăng khả năng tiếp cận. Trình đọc màn hình có thời gian truy cập trang chủ yếu là văn bản có thể in được dễ dàng hơn nhiều. Các trang văn bản thay thế đặc biệt hữu ích nếu bạn có nhiều JavaScript hoặc các chức năng đa phương tiện khác
- Giảm thời gian tải xuống. Hàng triệu người dùng vẫn dựa vào kết nối quay số chậm - đặc biệt là người dùng gia đình. Họ thường nhấp ngay vào phiên bản "có thể in được" của tin tức và bài báo vì họ có thể nhận được thông tin liên quan nhanh hơn. Họ cũng có nhiều khả năng in thông tin hơn vì mất nhiều thời gian hơn để quay số kết nối và xem lại trang trực tuyến
Tuy nhiên, một bất lợi đối với bạn với tư cách là quản trị viên web là chúng phức tạp hơn một chút, do đó, việc tạo lỗi HTML gây ra sự cố hiển thị trình duyệt sẽ dễ dàng hơn. Luôn kiểm tra mã HTML của bạn bằng Hộp công cụ HTML của NetMechanic sau mỗi lần thay đổi. Bạn sẽ tránh được những lỗi đơn giản có thể ẩn nội dung hoặc làm hỏng hoàn toàn trang của bạn