Thực đơn
trang chủChương trình

Bố cục đa trình duyệt trong điều kiện hiện đại - hiểu biết chung về nguyên tắc cần thiết. Tại sao mọi người đều có vấn đề như vậy? Universal – chủ đề kinh doanh cho dịch vụ tư vấn

Đôi lời giới thiệu: Trong một năm qua tôi tích cực tạo trang web, tôi nhận thấy công nghệ không đứng yên. Một cái gì đó đang phát triển liên tục và nếu nó không phát triển thì bằng cách nào đó nó sẽ thay đổi và ảnh hưởng đến việc tạo ra các trang web. Và ngày hôm nọ, kết quả là tôi đã trưởng thành được hai điểm hữu ích.

1. Bố cục trang web và Windows 8

Hôm nọ, một đồng nghiệp đã đăng ảnh chụp màn hình lưu trữ video YouTube lên mạng xã hội với câu hỏi:
“Không ai biết YouTube có vấn đề gì? Tại sao anh ta lại trốn ở góc bên trái? Tại sao có quá nhiều không gian trống trên trang chính?

Sau khi không có ai động não, tôi chợt nhận ra rằng rất có thể điều này đã bị ảnh hưởng phần nào giao diện mới phiên bản mới hệ điều hành Các cửa sổ. Tôi nghĩ rằng tôi vẫn đúng, bởi vì... chức năng nhất Bảng điều khiển Windows 8 bật lên với bên phải và ngay lập tức chiếm tới 378 px từ khu vực xem của cửa sổ để có lượng thông tin hữu ích tối đa trên màn hình, công ty Google bắt đầu chuyển bố cục hữu ích sang bên trái. Điều này có thể thấy rõ với độ phân giải màn hình 1388px ở cạnh dài

Như bạn có thể thấy, khi bố cục được dịch sang trái, bảng chức năng nội dung chính (video ở chế độ xem tiêu chuẩn) không trùng lặp.

2. Thẻ HTML5

Tương đối gần đây, đặc tả HTML5 đã chính thức được áp dụng, điều đó có nghĩa là nên dịch các trang web sang HTML5, nhưng chúng tôi có các trình duyệt như IE8 trở về trước - chúng tôi gặp vấn đề với chúng, điều này được thể hiện ở thực tế là các bộ chọn có thẻ mới là không được xử lý bởi các trình duyệt này.

Ví dụ: chúng tôi có mã này:
kiểm tra HTML5

LoremIpsum










Bản quyền@12

Trong tất cả các trình duyệt hiện đại (IE9/10, Chrome, Firefox, Opera, Safari5), mã này được hiển thị chính xác:

Nhưng trong Internet Explorer “yêu thích” của chúng tôi, các vấn đề về mã đã phát sinh và các kiểu ngừng hoạt động.

Sau nhiều cách khác nhau để đặt kiểu, tôi chỉ thành công theo cách thông thường - đây là phần tử div, được cấp một lớp. Vì vậy, tôi đề xuất coi đó là một quy tắc (có lẽ ai đó đã lấy nó rồi, nhưng đối với bản thân tôi thì tôi mới phát hiện ra điểm này gần đây) rằng nếu bạn cần bố cục cho IE8 trở xuống, bạn nên lấy một div và gán cho nó một tên lớp, trong phù hợp với thẻ trong đặc tả HTML5:

kiểm tra HTML5

LoremIpsum
Bảng điều khiển bên.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis felis eu velit dignissim in fermentum justo cursus. Khả năng đình chỉ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis felis eu velit dignissim in fermentum justo cursus. Khả năng đình chỉ. Aenean odio quam, egestas rhoncus posuere at, imperdiet vel sem. Curabitur in nisl neque, ac porttitor arcu. Sed sed est lectus, in egestas nisi. Morbi turpis urna, feugiat fermentum condimentum quis, congue non quam. Vivamus auctor ultricies tincidunt. Pellentesque eget Nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante justo. Bạn có thể gặp khó khăn khi đối mặt với sự covallis mattis. Fusce a aguet sit amet felis vehicula iaculis. Nunc lectus lectus, pretium id pulvinar sit amet, pulvinar a metus. Nam ultrices lobortis erat, et mollis odio tristique vel. Tạm dừng nec massa dui, nec tempus sapien.

Donec congue lorem id orci congue vel interdum orci pellentesque. Vivamus nec orci vitae diam scelerisque faucibus id dictum felis. Vivamus dictum rhoncus ipsum, vel tempor sapien aliquet vel. Tiền đình lobortis sodales leo, ut lobortis ligula tristique nec. Mauris vitae dolor leo, xe cộ semper ligula. Nam sed orci leo. Sed auctor iaculis mauris non pretium. Vestibulum eros tortor, consectetur id varius et, porta in magna.

Fusce vel turpis turpis. Cras dapibus neque et quam cursus euismod. Donec justo felis, scelerisque quis ornare nec, aliquam ut mi. Trong est augue, vestibulum ac volutpat id, laoreet vitae diam. Proin non libero ac libero ultrices tristique ac in neque. Nam nec lacus id erat volutpat iaculis. Nam dapibus fringilla adipiscing.

Aliquam erat volutpat. Lớp thích hợp taciti xã hội ad litora Tornt per conubia nostra, per inceptos hisenaeos. Phasellus interdum lorem sem rutrum vulputate. Trong est felis, consequat ut malesuada sed, volutpat quis purus. Sed non urna eget metus ornare condimentum ac quis diam. Quisque eleifend dapibus ligula, at mollis justo tristique tempus. Morbi viverra vehicula nisi, vel aliquam lacus maleuada eu. Sed pulvinar eros et quam sodales ullamcorper. Donec volutpat magna vel massa lobortis scelerisque.

Nulla mattis pharetra elit, eu dapibus orci fringilla tempus. Donec vel sodales ưu tú. Nó không chỉ đơn giản là tạo điều kiện thuận lợi cho bạn. Fusce porttitor feugiat lacinia. Aliquam là một kẻ tra tấn. Lớp thích hợp taciti xã hội ad litora Tornt per conubia nostra, per inceptos hisenaeos. Nunc maleuada auctor nisl non xe cộ. Nulla nec eros eget leo vestibulum rhoncus. Praesent rhoncus sapien eget turpis mollis et scelerisque urna consectetur. Fusce ullamcorper tempus xe cộ. Số nguyên mauris mauris, eleifend quis ultrices nec, hendrerit vel urna. Đình chỉ namuada magna non lacus imperdiet egestas. Số nguyên gia vị tự do và diam tincidunt luctus. Bạn sẽ nhận được erat trong sem dictum tempus quis eget nisl. Donec nisl lacus, lobortis non facilisis a, ultricies in quam.

Bản quyền@12
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phần kết luận:

Mặc dù có số lượng lớn các bài viết và bài học trên Internet về chủ đề thiết kế web và bố cục web, tiến độ vẫn không đứng yên. Khi tạo thiết kế trang web, bạn không nên dựa vào các quy tắc và công nghệ cũ. Tôi nghĩ rằng ở một mức độ nào đó, bài viết này sẽ được sử dụng như hai lời khuyên ngắn. Có thể những lời khuyên này đã được viết ở đâu đó.

tái bút Xin đừng đánh tôi quá mạnh, đây là bài viết đầu tiên về Habré.

Tags: Bố cục, HTML, thiết kế web

Để thiết kế trang web một cách chuyên nghiệp, bạn không chỉ cần biết những điều cơ bản về CSS mà còn phải hiểu cách trình duyệt hoạt động và các quy tắc mà nó tuân theo. Họ xác định các phương pháp và kỹ thuật bố trí cơ bản.

Chỉ với sự hiểu biết như vậy, bạn mới có thể chọn được cách thích hợp nhất để giải quyết vấn đề trong số nhiều cách có thể, có tính đến những ưu điểm và hạn chế của chúng. Đây là cách duy nhất để tận dụng tối đa khả năng của trình duyệt và ngăn ngừa các lỗi tiềm ẩn.

Có rất nhiều mô tả về các kỹ thuật khác nhau. Bài viết này cố gắng tập hợp các kỹ thuật quan trọng nhất và hệ thống hóa chúng để đưa ra ý tưởng về cả những khả năng chính cũng như những hạn chế của CSS phù hợp ngày nay.

Bài viết này dành cho những người đã quen với kiến ​​thức cơ bản về HTML và CSS, đồng thời có hiểu biết về các thuộc tính cơ bản và nguyên tắc cơ bản về cách hoạt động của các biểu định kiểu xếp tầng.

Bàn

Trong lịch sử, cách đầu tiên và duy nhất để trình bày một trang là thông qua các bảng. Toàn bộ chương trong đặc tả CSS 2.1 được dành để mô tả hành vi của các bảng. Bất chấp khối lượng này, một số điểm được mô tả thưa thớt hoặc hoàn toàn không được mô tả và tùy theo quyết định của trình duyệt.

Ưu điểm và nhược điểm

Bảng được sử dụng để hiển thị dữ liệu được sắp xếp theo hàng và cột có kết nối ngữ nghĩa theo chiều ngang hoặc chiều dọc. Điều này dẫn đến ưu điểm chính: các ô trong bảng được căn chỉnh thành lưới, cho phép bạn tạo một cách đơn giản và rõ ràng lưới mô-đun.

Thuộc tính cố hữu này của các bảng cho phép bạn lấp đầy mặt phẳng của cửa sổ trình duyệt và tạo các “trang web linh hoạt”. Tuy nhiên, cả với kích thước cửa sổ trình duyệt nhỏ và lớn, cấu trúc của bảng không thay đổi; nó không thể thích ứng linh hoạt với không gian có sẵn.

Khi sử dụng bảng để bố trí, tức là đặt dữ liệu vào lưới không có kết nối ngữ nghĩa, ngữ nghĩa sẽ bị vi phạm. Việc sử dụng các bảng như vậy làm giảm khả năng truy cập đối với những người sử dụng các chương trình đặc biệt và giảm xếp hạng trong kết quả tìm kiếm, vì công cụ tìm kiếm có lẽ khó hiểu cấu trúc của trang hơn. Kết quả là trang web hoạt động kém hiệu quả hơn.

Đặc điểm

Các ô bảng lần lượt xuất hiện trong mã, từ trái sang phải hoặc từ phải sang trái, tùy thuộc vào hướng của ngôn ngữ, được chỉ định bởi thuộc tính CSS Direction hoặc tương tự của nó trong HTML, thuộc tính dir.

Ví dụ: nếu bạn muốn nội dung chính ở cột giữa xuất hiện trước nội dung của các cột khác trong nguồn HTML thì bảng không phải là giải pháp phù hợp.

Cấu trúc của bảng khá phức tạp, nó được mô tả bằng số lượng lớn các thẻ, dẫn đến độ phức tạp của mã nguồn. Hiệu ứng tiêu cực thậm chí còn lớn hơn khi một số bảng được lồng vào nhau.

Sự bắt chước

Nhóm thuộc tính display: table-* được giới thiệu trong CSS 2.1 cho phép bạn tạo bảng từ các phần tử tùy ý có cấu trúc phù hợp.

Theo đặc tả, chỉ cần một khai báo như display: table hoặc display: table-cell là đủ - các phần tử còn thiếu sẽ được trình duyệt tự động hoàn thành.

Tuy nhiên, sẽ an toàn hơn nếu tạo cấu trúc bảng > hàng > ô tối thiểu, tương tự như các thẻ bắt buộc

, , trong HTML, trình duyệt chắc chắn sẽ tạo phần tử này, trừ khi tài liệu được hiển thị ở chế độ XHTML, trong trường hợp không nhóm các phần tử , Và . Điều này có thể được sử dụng khi thiết kế và chắc chắn cần được ghi nhớ khi sử dụng bộ chọn gốc, có thể có mục nhập như table > tbody > tr > td . Bộ chọn bảng > tr > td sẽ không hoạt động.

Các phần tử ẩn danh có display: table-* , tạo lại cấu trúc bảng CSS 2.1, không ảnh hưởng đến cây phần tử. Chúng không thể được cung cấp các quy tắc CSS; chỉ các thuộc tính được kế thừa mới hợp lệ.

Ngữ nghĩa

Có ý kiến ​​cho rằng sử dụng màn hình:table có nhiều ngữ nghĩa hơn vì nó sử dụng các thẻ phù hợp hơn với nội dung và điều này sẽ giúp ích động cơ khác nhau trong quá trình xử lý trang. Các chương trình đọc màn hình thường được trích dẫn làm ví dụ.

Xin chào các độc giả thân mến của trang blog. Nhiệm vụ của chúng ta hôm nay là tạo ra cái gọi là bố cục trang web không phải với sự trợ giúp của (bố cục của ngày hôm qua) mà với sự trợ giúp phần tử phân chia. Những thứ kia. Chúng ta sẽ cần sử dụng div để xây dựng phần trên cùng (tiêu đề), phần dưới cùng (chân trang) và ba cột chẳng hạn.

Nhân tiện, chúng tôi đã giải quyết được vấn đề này khi tôi viết về nó.

Có vẻ như điều đó không đáng để nhắc lại, nhưng tôi sẽ không làm điều đó. Hôm nay chúng tôi sẽ mô tả một sự khác biệt cơ bản phương pháp bố trí trang web, đồng thời xem xét song song mục đích của chỉ thị @import và @media(có ở phía trước) bằng ngôn ngữ đánh dấu kiểu CSS mà chúng ta đã nghiên cứu (tất nhiên là ở cấp độ cơ bản).

Bố cục trang web theo khối - bạn có cần nó không?

Hơn nữa, chúng tôi đã cố gắng phân tách từng phần ngôn ngữ Html, dựa vào nguồn ban đầu dưới dạng tập đoàn. Tuy nhiên, tôi nghĩ không phải ai cũng được truyền cảm hứng từ những lời khuyên của tôi và lao vào học ngay.

Và tôi thậm chí còn hiểu bạn một phần. Suy cho cùng, bản thân kiến ​​​​thức về những điều này sẽ không mang lại cho bạn danh tiếng hay sự giàu có mà chỉ tiêu tốn rất nhiều thời gian mà lẽ ra có thể dành cho một hoạt động thú vị hơn nhiều. Cũng như việc biết cách sử dụng dao kéo không đảm bảo rằng bạn sẽ có những món ăn ngon trên bàn ăn. Tuy nhiên, vào đúng thời điểm, nó có thể có ích và đóng một vai trò quan trọng.

Khoảng mười hoặc mười hai năm trước, tôi quyết định học HTML bằng bất cứ giá nào, nhưng theo ý kiến ​​​​của tôi, tôi đã bị mắc kẹt ngay từ đầu và khá nhanh chóng mất hứng thú với ý tưởng này, thích một trò chơi thú vị của một game bắn súng khác hơn là chế nhạo bộ não ngu ngốc của tôi .

Vâng, vâng, trò chơi từng là sở thích của tôi, nhưng bây giờ trang web đã trở thành sở thích này và tôi có cơ hội thực hành một số điều tôi từng mô tả. Hơn nữa, tương tự như trò chơi, số tiền tôi kiếm được vẫn được coi là một loại điểm ảo nào đó, cho thấy tôi đang tiến về phía trước thành công như thế nào.

Rõ ràng điều này đã không thể xóa bỏ được, mặc dù trong vài năm qua, vợ tôi đã thay đổi hoàn toàn thái độ đối với sở thích tiếp theo của tôi (thật đáng tiếc khi cô ấy lại là người kiểm tra bài viết này để tìm ra sở thích tiếp theo của tôi). lỗi ngữ pháp, nếu không thì tôi đã mô tả tất cả những thay đổi diễn ra chi tiết hơn), bởi vì blog này, trái ngược với tất cả những mong đợi và nghi ngờ ban đầu của cô ấy, mang đến một sự xả thải thực sự dưới dạng những tờ tiền xào xạc (đọc về cách hiện thực hóa các con số một cách hợp pháp trên sàng lọc thành các con số trên tài khoản hiện tại của một doanh nhân cá nhân.

Nói chung, sự lạc đề trữ tình này không phải ngẫu nhiên, bởi vì tôi muốn nói rằng Html và CSS là những khối xây dựng nhỏ trong việc xây dựng hoạt động kinh doanh trên Internet của bạn, nhưng việc sở hữu và hiểu biết về các nguyên tắc bố cục trang web sẽ mang lại một số điểm nhất định trước những người bỏ qua kiến ​​​​thức này.

Thành công chung của một dự án web thường phụ thuộc vào những điều nhỏ nhặt như vậy, những điều này có thể dễ dàng (và thường rất thú vị) bị đẩy vào góc xa. Tôi chỉ không thể nhớ một điều - điều gì đã cho phép tôi bước qua rào cản vô hình được dệt nên từ sự lười biếng và thờ ơ trong suy nghĩ. Có thể các lá bài đã rơi theo cách đó. Vì vậy, tôi mong bạn cũng vượt qua được rào cản này, nhưng tôi không thể nói cho bạn biết chính xác cách thực hiện điều này.

Được rồi, hãy tiếp tục với những người chưa chuyển đổi. Làm cách nào để xây dựng bố cục trang web bằng cách sử dụng các phần tử Div và quy tắc kiểu? Chúng ta hãy xem xét. Đương nhiên chúng ta sẽ bắt chước cách hoạt động của bố cục này máy tính cục bộ, chỉ cần đổ tất cả các tệp chúng ta cần vào một trong các thư mục của nó. Không có lưu trữ hoặc . Để hiểu các nguyên tắc điều này sẽ không cần thiết.

Vì vậy, hãy bắt đầu bố trí. Đầu tiên, chúng tôi tạo và đặt tên cho một thư mục để lưu trữ các tệp của dự án web trong tương lai của chúng tôi, sau đó tạo một tệp văn bản bên trong nó với phần mở rộng .html và tên chỉ mục. Chúng tôi cũng tạo một thư mục khác trong thư mục này, chúng tôi gọi là CSS (các tệp kiểu bên ngoài của chúng tôi sẽ nằm trong đó).

Có thể thêm một thư mục khác nơi chúng tôi sẽ đặt các hình ảnh được sử dụng trong bố cục của trang web, đây sẽ là một phần của nó ( hinh nên). Trước tiên tôi khuyên bạn nên tối ưu hóa hay nói cách khác là ở mức tối đa.

Bây giờ hãy sao chép “con cá” bên dưới vào index.html của bạn. Nó khá thuận tiện khi sử dụng để làm việc với mã, tuy nhiên, nếu bạn có kỹ năng, Dreamviewer có thể là một giải pháp chức năng hơn:

trang chủ

Đầu tiên, như mọi khi, nên đi, mục đích của nó được mô tả chi tiết trong bài viết được liên kết tới. Bên trong thẻ meta, chúng tôi chỉ ra rằng nó sẽ được trình duyệt diễn giải chính xác khi dự án của chúng tôi được mở trong đó. Mỗi tài liệu phải có một (tiêu đề trang) hoàn chỉnh, vì vậy chúng tôi đã thêm nó vào phần “cá”.

Rõ ràng là trang web này theo định nghĩa là do tất cả các tài liệu cấu thành của nó thuộc về một tên miền, tuy nhiên, đối với khách truy cập, lập luận chính sẽ là thiết kế tương tự của các trang web của nó và đây là điều chúng tôi sẽ cần xem xét được tính đến trong quá trình bố trí.

Do đó, chúng ta phải có một tệp bên ngoài với các kiểu sẽ được áp dụng cho tất cả các trang. Nhưng bên cạnh đó, cũng có thể có các tệp CSS bổ sung, chẳng hạn như cho phép các phần khác nhau của dự án web trông hơi khác một chút.

Do đó, việc tràn cột bên trái hoặc bên phải sẽ không gây ra sự gia tăng tỷ lệ trong các khối có ID vnutr và vnesh (các phần tử nổi không ảnh hưởng đến chiều cao của phần tử cha mẹ hay nói cách khác là vùng chứa), nghĩa là nội dung sẽ bò ra ngoài chúng , chạy qua phần chân trang và thường vượt ra ngoài bố cục ranh giới. Rắc rối.

Nhưng chúng tôi có phần tử khối thứ tư có ID podporka, phần tử này không chứa bất kỳ nội dung nào (và do đó sẽ không hiển thị trên trang web) và được thiết kế đặc biệt để loại bỏ sự cố này. Trong mã obdhiy.css, chúng ta sẽ viết một quy tắc đơn giản cho bộ chọn này. Do đó, khối có ID podporka sẽ có được một thuộc tính hữu ích cho chúng ta - nó sẽ tính đến bất kỳ phần tử nào nổi phía trước nó (nghĩa là nằm ở vị trí cao hơn trong mã).

Cái đó. khi tăng nội dung ở cột bên phải hoặc bên trái, phần tử có ID podporka sẽ được dịch chuyển xuống theo tỷ lệ và do đó thẻ này không còn nổi nữa, khi đó các khối có ID vnutr và vnesh sẽ tính đến nó và tăng kích thước dọc của chúng theo tỷ lệ:

Bây giờ mọi thứ dường như đang hoạt động chính xác. Tuy nhiên, bố cục trang web của chúng tôi vẫn chưa hoàn thành. Giả sử chúng ta đã thực hiện bố cục trong index.html theo cách này trang chủ, nhưng đối với một số phần khác sự xuất hiện của bố cục sẽ phải khác(ví dụ: không nên có ba mà chỉ có hai cột). Làm thế nào để thoát khỏi tình trạng này?

Rõ ràng là với mục đích này, bạn sẽ phải sử dụng một tệp khác với index.html. Để làm điều này, nội dung của index.html có thể được sao chép sang một tệp mới, ví dụ: razdel.html, bởi vì Việc chỉnh sửa mã hiện có sẽ dễ dàng hơn là viết lại.

Chà, chúng ta sẽ phải sử dụng một tệp mới với các biểu định kiểu xếp tầng, ví dụ: razdel.css. Chính ở họ, chúng tôi sẽ thực hiện các thay đổi, đồng thời chúng tôi sẽ xem xét chi tiết hơn về cách thức chính xác sử dụng lệnh @import trong trường hợp này.

Hãy bắt đầu với razdel.html:

chương ...

Chúng tôi đã thay đổi tiêu đề của trang Tiêu đề và đổi tên của tệp kiểu đi kèm thành razdel.css. Trong trường hợp này, tất nhiên, bạn sẽ cần tạo tệp đánh dấu kiểu tương tự này trong thư mục CSS. Tôi xin nhắc bạn rằng đối với index.html, chúng tôi đã kết nối đánh dấu kiểu thông qua osnovnoy.css, chứa một lệnh @import duy nhất để tải các quy tắc từ tệp obdhiy.css:

@import url(obdhiy.css);

Chúng tôi sẽ không nguyên bản theo cách thông minh của mình và ngay từ đầu tệp kiểu mới (vẫn trống), chúng tôi sẽ viết chính xác cùng một chỉ thị. Do đó, chúng ta sẽ lại có được bố cục ba cột, tuy nhiên, chỉ cần thêm một vài quy tắc sau đó một chút, chúng ta có thể dễ dàng biến nó thành bố cục hai cột. Thậm chí không phải vậy. Chúng tôi sẽ tạo một tệp khác trong thư mục CSS có tên dvekolonki.css và nội dung sau:

#right ( display:none; ) #center ( lề-right:0; ) #vnesh ( hình nền: none; )

Chúng ta đã làm gì? Chúng tôi đã tắt tính năng hiển thị cột bên phải trên các trang web bằng cách sử dụng . Chúng tôi cũng đã xóa lềở bên phải cho cột trung tâm, vì nó không còn cần thiết nữa. Vâng, tóm lại, chúng tôi đã cấm chương trình Hình nền tất cả trong cùng một cột bên phải. Nói chung, chúng tôi đã loại bỏ hoàn toàn cột bên phải này trong bố cục phần của chúng tôi.

Chà, bây giờ để hoàn thành bố cục của bố cục hai cột, tất cả những gì còn lại là đưa dvekolonki.css tương tự này vào tệp razdel.css, nội dung cuối cùng của nó bây giờ sẽ trông như thế này:

@import url(obdhiy.css); @import url(dvekolonki.css);

Tất cả các quy tắc trong mã bên dưới (từ dvekolonki.css) sẽ có mức độ ưu tiên cao hơn, có nghĩa là chúng ta sẽ quan sát hành động của chúng trên trang web. Kết quả là khi mở razdel.html, bạn có thể thấy bố cục hai cột:

Trên thực tế, nhiệm vụ bổ sung của chúng tôi là xem xét các lựa chọn sử dụng lệnh @import trong bố cục hiện đại trang web, điều mà tôi nghĩ chúng tôi đã làm được.

Bây giờ vẫn còn để chứng minh hoạt động của lệnh @media mà tôi đã đề cập ở đầu bài viết. Nó có một mối quan hệ rất gián tiếp đến cách bố trí, nhưng có lẽ sẽ là thiển cận nếu không nói về nó.

Bố cục để in bằng lệnh @media

Lệnh @media có thể hữu ích không phải cho bạn mà dành cho những độc giả muốn in một trang web mà không có bất kỳ kiểu cách đồ họa và kiểu cách nào. thông tin không cần thiết. Người dùng sẽ chỉ cần nội dung nằm ở cột trung tâm. Nó không cần đầu trang, chân trang, cột bên trái hoặc bên phải—chỉ cần nội dung của bài viết.

Tại xem trước in bằng bất kỳ trình duyệt hiện đại Tất nhiên, bạn có thể tắt tính năng in nền, tức là. thiết kế màu sắc, nhưng trình duyệt không phải lúc nào cũng có thể tự tách lúa mì (nội dung) khỏi trấu (điều hướng), vì vậy chúng tôi sẽ phải giúp anh ta việc này để không hy vọng vào cơ hội.

Ngoài ra, khi in, thứ chính khiến Internet trở nên phổ biến sẽ biến mất - khả năng đi theo các siêu liên kết đến các trang khác. Trên giấy tờ tất cả là của bạn các siêu liên kết sẽ trở nên hoàn toàn không có thông tin, nếu điều này không được quan tâm trước. Hãy thêm siêu liên kết vào bố cục ba cột của chúng tôi và xem nó trông như thế nào khi chúng tôi cố gắng in một trang web.

Như vậy, người dùng in ra một trang web như vậy sẽ không bao giờ biết được blog nào là tốt nhất. Vậy nên hãy bận rộn thôi sắc thái của bố cục in ấn và chỉ thị @media đã được đề cập sẽ giúp chúng tôi thực hiện việc này.

Có hai tùy chọn để chỉ định với sử dụng phương tiện truyền thông thì những kiểu này sẽ được áp dụng cho thiết bị nào. Bạn có thể chỉ định thuộc tính media trong thẻ Link, được sử dụng để kết nối các tệp kiểu bên ngoài. Nhưng trong trường hợp này, trình duyệt sẽ đưa ra một yêu cầu bổ sung tới máy chủ, điều này không tốt. Tuy nhiên, phương pháp này có quyền sống và sự ô nhục này sẽ trông giống như thế này:

Tại thuộc tính media Các giá trị khác có thể được sử dụng:

  1. tất cả - được sử dụng theo mặc định và có nghĩa là tệp kiểu này sẽ cần được sử dụng cho mọi thiết bị đầu ra
  2. chữ nổi - thiết bị đọc ngón tay (dành cho người mù hoặc khiếm thị)
  3. thiết bị cầm tay - PDA, điện thoại thông minh và các vật dụng nhỏ khác
  4. in - máy in
  5. màn hình - màn hình giám sát người dùng mà họ sẽ xem trang web của bạn
  6. lời nói - trình duyệt lời nói
  7. chiếu - máy chiếu
  8. tty - máy đánh chữ và các thứ linh tinh khác không thể sử dụng kích thước pixel
  9. tv - tivi cũ tốt

Trong ví dụ được đưa ra ở trên, chúng tôi sử dụng thuộc tính Media để kết nối với tài liệu web tập tin riêng biệt kiểu để hiển thị trên màn hình và kiểu riêng để in (print.css). Đây chính xác là những gì chúng ta cần triển khai trong bài học bố cục này, nhưng sẽ tốt hơn nếu thực hiện theo một cách hơi khác, sử dụng lệnh @media được viết trong tệp kiểu.

Nếu bạn nhận thấy, với phương pháp bố cục mà chúng tôi đã chọn (sử dụng @import), chúng tôi có một tệp kiểu chung, luôn được kết nối thông qua chính lệnh này - obdhiy.css. Đây là nơi chúng ta sẽ bắt đầu gợi lên.

@media có cú pháp riêng:

@media screen, tv (một tập hợp các bộ chọn và quy tắc sẽ chỉ được thực thi nếu trang web được xuất ra các thiết bị được chỉ định ở trên, được phân tách bằng dấu phẩy)

Trong tệp obdhiy.css của chúng tôi, chúng tôi sẽ không bao gồm tất cả các quy tắc hiện có bên trong lệnh màn hình @media ở cuối, chỉ cần thêm các quy tắc CSS cần thiết để in tài liệu bằng cách sử dụng; @media in:

@media print( *( color:#000 !important; nền:transparent !important; ) html ( font:10pt serif; ) #footer, #header, #left, #right ( display:none; ) #center ( lề: 0; ) a:after(nội dung:" (" attr(href) ")"; ) )

Nếu bạn còn nhớ, bộ chọn * có nghĩa là áp dụng tất cả các quy tắc kiểu này cho tất cả các thành phần mã HTML. Đúng, bộ chọn như vậy có mức độ ưu tiên tối thiểu có thể, do đó, bằng cách đặt màu cho tất cả các phần tử thành màu đen và nền thành trong suốt, sử dụng các quy tắc màu và nền, chúng ta buộc phải tránh tính toán mức độ ưu tiên bằng cách sử dụng cài đặt.

Đối với bộ chọn Html, chúng tôi đã chỉ định phông chữ mặc định trong , vì nó rõ ràng hơn cho máy in. Chà, phông chữ được đặt thành bất kỳ serif (serif) nào. Sử dụng display:none, chúng tôi đã cấm hiển thị phần nội dung (đầu trang, chân trang và cột) và sử dụng lề: 0, chúng tôi cho phép nội dung từ cột giữa chiếm toàn bộ không gian có sẵn theo chiều rộng.

Bộ chọn cuối cùng một:sau rất phức tạp và để hiểu rõ hơn chính xác những gì anh ấy đang nói, tôi khuyên bạn nên xem qua các ấn phẩm sau đây về () và. Nhưng chúng ta cần nó vì một mục đích khá đơn giản - xem trên giấy chính xác nơi siêu liên kết dẫn đến.

Phần tử giả sau cho phép tạo nội dung trong khi trình duyệt đang xây dựng tài liệu. Sau sẽ cho phép chúng tôi thêm URL siêu liên kết ngay sau nơi đặt liên kết. Điều này được thực hiện bằng cách sử dụng quy tắc nội dung CSS đặc biệt, quy tắc này chỉ hoạt động với hai phần tử giả: sau và trước.

Số lượng các phần và tiêu đề, theo thuật ngữ chuyên môn - thành phần của vấn đề - là nền tảng làm nền tảng cho việc hình thành bản sắc công ty và đảm bảo sự công nhận của ấn phẩm trong quần chúng rộng rãi. Bố cục của báo, tạp chí là một phần không thể thiếu trong quá trình sản xuất. Cô ấy chịu trách nhiệm tối ưu hóa một trang cụ thể và thiết kế tổng thể của vấn đề, nghĩa là về sự kết hợp thành thạo giữa các yếu tố văn bản và đồ họa, để dễ nhận biết về phông chữ, dễ điều hướng...

Ưu điểm của thành phần ổn định

Việc lưu hành có hệ thống sớm hay muộn sẽ dẫn đến việc một tờ báo hoặc tạp chí phát triển thành phần độc đáo của riêng mình. Từ số này sang số khác, tất cả các trang quan trọng, các phần cơ bản và tiêu đề chuyên đề đều giữ nguyên hình thức và cấu trúc nhất định. Điều này không được thực hiện một cách ngẫu nhiên: một sản phẩm được làm theo mẫu sẽ dễ được người đọc cảm nhận hơn và sau đó phát triển một mô hình mong đợi nhất định ở đối tượng mục tiêu.

Tuy nhiên, việc bố trí các tờ báo theo tiêu chuẩn đã định sẵn hoàn toàn không hàm ý tính bất khả xâm phạm của các sơ đồ. Ngược lại, những bố cục có thể dễ dàng chuyển hóa là dấu hiệu của việc thực hiện các ý tưởng sáng tạo có chất lượng cao.

Nói cách khác, xu hướng và định dạng về phong cách của tờ báo/tạp chí không nên phụ thuộc vào việc sửa chữa và điều chỉnh từng chỗ. Nếu biên tập viên điều hành lần nào cũng rơi vào trạng thái sững sờ, vài giờ trước khi vấn đề được đăng, nảy sinh nhu cầu gõ lại từng trang riêng lẻ hoặc thậm chí các trang, thì bố cục cơ bản không tự biện minh được và cần phải thay đổi.

Sự khác biệt cơ bản giữa bố cục và bố cục là gì?

Chuẩn bị thành phần và bố cục của một tờ báo là hai quá trình có liên quan với nhau với các thuật toán hành động tương tự nhau. Tuy nhiên, các nhiệm vụ mà nhà thiết kế và nhà thiết kế bố cục phải đối mặt không thể được gọi là cùng một loại - sự khác biệt nằm ở mặt phẳng phát triển chủ đề (tối ưu hóa) của các tài liệu đã được chỉnh sửa. Hướng ưu tiên của bố cục là xây dựng chi tiết cấu trúc nội dung: thứ tự các sọc, cấu hình của ấn phẩm, “khả năng nhúng” của hình ảnh, v.v. Mục tiêu của việc bố cục hợp lý là đảm bảo rằng việc sắp xếp nội dung trên các trang không những không gây khó khăn cho người đọc mà còn tập trung sự chú ý của người đọc vào những thông điệp thông tin quan trọng nhất một cách tự nhiên nhất.

Vật liệu đã được lắp ráp có cốt lõi theo chủ đề chung. Tuy nhiên, điều này là chưa đủ để hình thành một số báo đầy đủ. Một loại bước hoàn thiện là bố cục, sắp xếp nội dung và sắp xếp các phần tử riêng lẻ (ấn phẩm) thành một tổng thể duy nhất.

Bố cục báo: chuẩn mực và khuôn mẫu

Nguyên tắc chính để chọn cấu trúc bố cục chuẩn là nội dung của vấn đề. Tất cả các kỹ thuật và tùy chọn thiết kế kỹ thuậtở mức độ này hay mức độ khác do nội dung quyết định. Thuật ngữ “tài liệu cho trang đầu” phản ánh hoàn hảo bản chất của những điều trên: nó được sử dụng khi họ muốn nhấn mạnh tầm quan trọng của bài viết (nghĩa là tải thông tin của một ghi chú như vậy đóng vai trò “ stencil” cho toàn bộ số báo).

Tuy nhiên, bạn cần hiểu rằng cái gọi là tiêu chuẩn bố cục chung khá có điều kiện. Mỗi ấn phẩm có một ấn phẩm cụ thể riêng. Vì vậy, nếu tất cả các tờ báo đều giống nhau, những độc giả khó tính sẽ không thể tìm được sản phẩm mình quan tâm, điều này chắc chắn sẽ dẫn đến doanh thu sụt giảm kéo theo những hệ lụy kéo theo.

Và quan trọng nhất: các chi tiết cụ thể của bố cục phần lớn được xác định bởi lịch sử của tạp chí định kỳ, các giai đoạn phát triển của nó, truyền thống của đội ngũ làm việc, sở thích quốc gia và các yếu tố khác không liên quan trực tiếp đến

Định dạng A3: tạo mẫu trên máy tính

Nhà thiết kế bố cục là một chuyên gia làm việc với văn bản tạo sẵn và đồ họa đã được chọn. Trách nhiệm nghề nghiệp của anh ấy bao gồm đăng tài liệu dựa trên các mẫu đã được phê duyệt. Vào buổi bình minh của “tiến hóa kiểu chữ”, công việc của một người thợ chuyên môn rất khó khăn và thời gian để hoàn thành nhiệm vụ được giao là rất lớn. Nguyên mẫu máy tính hiện đại là một vấn đề hoàn toàn khác...

Các định dạng typographic được sử dụng ngày nay đều bắt nguồn từ tiêu chuẩn DIN A0. Phổ biến nhất trong in ấn là A5, A4 và A3.

Bố cục tiêu chuẩn của một tờ báo định dạng A3 được thực hiện bằng trình hướng dẫn mẫu (vỏ phần mềm có thể khác nhau, nhưng bộ chức năng tiện ích có thể so sánh được). Một trong những ưu điểm không thể nghi ngờ của việc tạo nguyên mẫu máy tính là khả năng điều chỉnh nội dung của vấn đề ở bất kỳ giai đoạn chuẩn bị nào, cũng như giảm thiểu số lỗi.

Tóm tắt phần mềm: PageMaker và QuarkXPress

Việc chuẩn bị trước khi in ấn một vấn đề trên PC bao gồm việc cài đặt một sản phẩm phần mềm nhất định. Ban đầu, có rất ít đề xuất đáng được các nhà thiết kế bố cục chuyên nghiệp chú ý. Trên thực tế, chỉ có hai trong số đó - PageMaker từ công ty nổi tiếng thế giới Adobe (sự tái sinh của tập hợp cùng tên từ Aldus) và một công cụ tương tự chức năng có tên QuarkXPress từ tổ chức khiêm tốn Quark Ink.

Trong một thời gian dài, có thể nói, các nhà phát triển của cả hai chương trình đã đi cạnh nhau, vì vậy bố cục máy tính của các tờ báo - nghĩa là kết quả cuối cùng của nó - thực tế không phụ thuộc vào tập lệnh bó đang được triển khai. Việc phát hành các bản cập nhật đã phá vỡ sự cân bằng đã được thiết lập nhưng không xác định được người dẫn đầu. Do đó, QuarkXPress đã thể hiện kiến ​​trúc phi thường của các mô-đun phụ trợ (phần mở rộng), nhưng không thể loại bỏ sự lúng túng trong lĩnh vực chỉnh sửa bảng. Và PageMaker đã dựa vào sự phổ cập hóa, nhưng đã mất một số vị trí trong bảng xếp hạng chức năng (đặc biệt là kho vũ khí của các hiệu ứng đặc biệt).

Để giúp các nhà thiết kế bố cục: giới thiệu về Adobe InDesign

Adobe không có ý định thua cuộc trong lĩnh vực tạo ra các sản phẩm phát triển phần mềm. Sự xuất hiện của một gói mới về cơ bản chỉ là vấn đề thời gian...

Ứng dụng InDesign là đối thủ nặng ký hơn nhiều với QuarkXPress so với PageMaker đã lỗi thời. Chính xác hơn, câu hỏi về sự cạnh tranh không còn là vấn đề nữa - tất cả phụ thuộc vào việc tiện ích sẽ “đánh cắp” bao nhiêu người dùng từ Quark.

Vậy bố cục tờ báo trong InDesign khác với các tình huống được mô tả trước đó như thế nào?

Phiên bản được thiết kế lại hoàn toàn, được thiết kế riêng cho người dùng bình thường, rất hấp dẫn. Ở đây, để gây khó chịu cho các đối thủ cạnh tranh, thậm chí còn có tùy chọn kích hoạt các phím nóng được sử dụng theo mặc định trong các chương trình tương tự - các nhà thiết kế bố cục đã làm việc trên Quark sẽ không phải xây dựng lại! Chức năng cũng rất ấn tượng. Về mặt này, InDesign là một sự kết hợp khả thi, cho phép bạn giải quyết các tác vụ in trước phức tạp chỉ bằng cách nhấn tổ hợp phím 5 - 6. Và cuối cùng, bố cục trong InDesign được chứng minh theo quan điểm về sự phát triển tự nhiên của các ấn phẩm in: các bản cập nhật được phát hành cho gói đơn giản hóa quá trình sắp xếp tài liệu nhiều nhất có thể, giảm thời gian chuẩn bị ấn phẩm và cung cấp các tùy chọn các mẫu làm sẵn và bố cục tùy thuộc vào tham chiếu phong cách của số...

Bố cục hợp lý của các tờ báo: ba quy tắc tối quan trọng

Bố cục hiện đại có cơ sở máy tính. Nhưng điều này không có nghĩa là các chương trình sẽ tự động đáp ứng tất cả các yêu cầu về bố cục hợp lý. Phần lớn vẫn phụ thuộc vào bậc thầy chuyên môn.

Vậy bố cục một tờ báo cổ điển trông như thế nào?

Một ví dụ về thuật toán hành động đúng như sau:

  • Khi chuẩn bị số báo in phải đảm bảo tính thống nhất của các trang. Nếu như cấu trúc điển hình bị hỏng (tiêu đề và cách sắp xếp trang khác nhau hoặc không tuân thủ thiết kế phông chữ, mất cân bằng đồ họa, v.v.), do đó, thành phần của tài liệu được thu thập được chọn không chính xác.
  • Bố cục của trang đầu ra (tiêu đề) không bao gồm việc sử dụng đầu trang, chân trang và chữ ký; thông tin đầy đủ về ấn phẩm được cung cấp ở trang đầu.
  • Căn cứ vào kết quả bố cục, bắt buộc phải có sự trùng khớp giữa dòng văn bản chính ở trang đầu với dòng ở mặt sau (ngay cả khi thực hiện kịch bản cỡ chữ thay đổi và nội dung cơ bản). của ấn phẩm đã bị pha loãng với các tài liệu có tầm quan trọng thứ yếu: chú thích cuối trang, nhận xét, giải thích, v.v.).

Bố cục tạp chí: một số sắc thái

Các quy tắc về bố cục tờ báo hơi khác so với những yêu cầu áp đặt cho các chuyên gia chịu trách nhiệm gửi sản phẩm tạp chí để in.

Các ấn phẩm nhiều trang thường bao gồm các cột có định dạng khác nhau và số lượng hình ảnh minh họa trong đó được tính bằng hàng chục. Sẽ khó khăn hơn nhiều để đảm bảo tính nhất quán giữa các đường “mặt” và “mặt sau” trong điều kiện như vậy. Do đó, các nhà thiết kế tạp chí, theo quy luật, hoạt động với các phần bổ sung chức năng (ứng dụng) cho những phần chính. gói phần mềm, và các con số được tổng hợp sẽ được in trên thiết bị in cao cấp hơn.

Các kiểu bố trí: cơ bản về phân loại

Đã có nhiều nỗ lực nhằm tạo ra một sự phân loại thống nhất về các kiểu bố cục. Tuy nhiên, hầu hết tất cả đều không thành công vì họ đã bỏ qua hình học của việc đặt vật liệu đã hoàn thiện lên dải.

Vì lý do này, người ta quyết định chia các kiểu bố cục báo không theo phong cách mà dựa trên ba nhóm đặc điểm: nhóm thứ nhất bao gồm những nhóm được xác định bằng cấu hình văn bản và đồ họa, tiêu chí của nhóm thứ hai là hướng bố trí (dọc / ngang), dành cho mức độ đối xứng thứ ba trên dải.

Trên báo chí, bất kể chủ đề nào, bố cục khối đơn giản được sử dụng thường xuyên hơn các chủ đề khác (thông tin được trình bày dưới dạng hình chữ nhật ngang có cấu trúc - “khối”). Ít thường xuyên hơn, họ sử dụng cách bố trí "bị hỏng" - khi các cột có gờ được tạo thành bởi các hình chữ nhật có chiều cao thay đổi.

Loại bố cục và đối tượng mục tiêu. Có một kết nối?

Một thực tế nổi tiếng trong giới chuyên môn là bố cục tờ báo không chỉ là tìm kiếm hình thức tối ưu cho nội dung. Những sáng tác cuối cùng trước hết phải đáp ứng được nhu cầu của khán giả mục tiêu. Nếu bạn nhìn vào ấn phẩm in, nhắm đến giới trẻ, bạn có thể tìm thấy các ví dụ về thiết kế sống động và tươi sáng, được thực hiện thông qua việc sử dụng bố cục “bị hỏng”. Đề án quán bar chiếm ưu thế trên các tờ báo, độc giả chủ yếu là người trưởng thành. Nhưng các ấn phẩm thuần túy thông tin được phân biệt bằng một hình thức trình bày tài liệu nguyên bản (thường phức tạp): nhiều cột có hình dạng khác nhau, cộng với phông chữ “động”.

Tại sao không phải là một?

Một câu hỏi công bằng là tại sao không thể nghĩ ra một cách duy nhất và phát triển nó? Nhưng con người là những sinh vật khác nhau nên họ nghĩ ra những cách khác nhau. Trên thực tế, chúng không có nhiều và một số đã lỗi thời ngày nay. Hãy xem xét các phương pháp bố trí cơ bản.

Bàn

Tạo khung bằng cách sử dụng bảng. Trong quá khứ, phương pháp cơ bản và phổ biến nhất. Ngày nay nó trở nên lỗi thời hàng năm, mặc dù có những trang web được tạo theo cách này. Toàn bộ phương thức được gắn với thẻ bảng và các thẻ con của nó, chẳng hạn như hàng và ô. Toàn bộ cấu trúc trang web được trình bày dưới dạng một bảng lớn.

Thuận lợi. Cách tiếp cận này giúp việc tạo nhiều cột và cột khá dễ dàng. Bố cục có cấu trúc phức tạp có thể được trình bày dễ dàng bằng cách sử dụng bảng. Ngoài ra, thẻ bảng và tất cả các phần tử liên quan đều được hỗ trợ giống hệt nhau trong tất cả các trình duyệt.

Sai sót. Mã rất cồng kềnh là nhược điểm chính của cách bố trí bảng. Cần lưu ý rằng bạn có thể chèn một bảng khác vào một bảng, tức là một bảng lồng nhau. Điều này dẫn đến rất nhiều sự lồng ghép và một loạt các thẻ. Và không thể thoát khỏi điều này, bởi vì tất cả các thẻ này đều cần thiết cho chức năng của bảng của chúng ta. Hiểu mã như vậy không phải là rất dễ dàng.

Dữ liệu dạng bảng rất khó điều chỉnh để xem trên các thiết bị khác nhau. Việc này dễ dàng hơn nhiều để thực hiện với các khối (bố cục khối mà chúng tôi chắc chắn cũng sẽ xem xét).

Thay thế. Cách đây không lâu CSS đã giới thiệu ý nghĩa đặc biệt thuộc tính hiển thị, cho phép bạn mô phỏng một bảng bằng cách sử dụng các khối thực tế. Ví dụ: hiển thị: bảng, hiển thị: hàng bảng, hiển thị: ô bảng. Các phần tử được áp dụng các thuộc tính này sẽ bắt đầu hoạt động tương ứng giống như một bảng, hàng trong bảng và ô. Bạn cần nhớ rằng phương pháp này cũng không hoàn hảo vì nó không được hỗ trợ như nhau trên tất cả các trình duyệt. Nếu bạn sử dụng các thuộc tính này, bạn cần kiểm tra cẩn thận khả năng tương thích giữa nhiều trình duyệt.

Khung

Ngày xửa ngày xưa còn có một phương pháp sắp chữ khác nhưng ngày nay nó gần như bị lãng quên. Bản chất của bố cục sử dụng khung là cửa sổ trình duyệt được chia thành một số khối (khung) độc lập nhất định, được hình thành bởi thẻ frameset. Nó chỉ ra đường dẫn đến trang html sẽ được tải vào khung.

Mỗi khung là một phần tử độc lập. Tức là các thanh cuộn xuất hiện riêng biệt cho từng khối. Phải nói rằng khung chưa bao giờ được áp dụng chính thức nên ngày nay chúng thực tế không được sử dụng và thường bị coi là một cách bố cục tồi.

Cơm. 1. Tôi tìm thấy ví dụ này về một trang web trên các khung trên Internet. Như bạn hiểu, không có tính thẩm mỹ.

Khối

Ở đây chúng ta đến với công nghệ bố trí website phổ biến nhất hiện nay. Nó có một số lợi thế và thường được công nhận là thuận tiện nhất. Mỗi khối là một phần tử độc lập mà bạn có thể lồng vô số phần tử vào đó. Khối có thể được định vị, thay đổi kích thước và cách điệu. Tất cả điều này được thực hiện với sử dụng CSS.

Thuận lợi. Mã cực kỳ nhỏ gọn và hoàn toàn có thể đọc được, ngay cả khi bạn không thực hiện bố cục. Việc gắn các kiểu khác nhau vào khối sẽ dễ dàng hơn so với bảng. Trang web như vậy tải nhanh hơn và được lập chỉ mục tốt hơn.

Khối phần tử có thể được xếp chồng lên nhau, giống như các lớp trong Photoshop. Với sự hỗ trợ về tính minh bạch, bạn có thể đạt được nhiều hiệu ứng thú vị, làm nổi bật một khu vực nhất định hoặc sử dụng tập lệnh để tải các nội dung khác nhau ở cùng một nơi.

Sai sót. Thực tế là không có. Các khối dễ thích ứng, dễ ẩn và thay đổi. Vùng chứa div và span hiển thị chính xác ngay cả trong các trình duyệt cũ hơn. Nếu chúng ta nói về các khối ngữ nghĩa mới, chúng không được hỗ trợ đầy đủ. Tuy nhiên, vấn đề này có lẽ sẽ sớm được giải quyết. Ngày nay có những tệp mà việc đưa vào sẽ giải quyết được vấn đề hỗ trợ các phần tử mới trong các trình duyệt cũ hơn. Phương pháp bố trí khối sẽ tồn tại trong một thời gian dài do tính tiện lợi và đơn giản đặc biệt của nó.

Flexbox (flex)

Phương pháp bố trí mới nhất. Nó nhận được sự hỗ trợ bình thường trong các trình duyệt lần đầu tiên kể từ năm 2014. Bây giờ nhiều nhà phát triển tuân thủ phương pháp này. Bản chất của nó là display: flex được gán cho các phần tử cấu trúc. Đây cũng là một loại khối, chỉ linh hoạt và chức năng hơn.

Nhiều người vẫn coi flexbox không phải là một giải pháp tốt để xây dựng lưới trang web. Ví dụ: từ lâu người ta đã khuyên nên sử dụng flexbox cho các phần tử nhỏ trên một trang, nhưng nhiều người vẫn sử dụng float cho khung trang.

Rất có thể, trong tương lai, flexbox cuối cùng sẽ trở thành một kỹ thuật bố cục trang web mới, vì vậy bây giờ bạn nên nghiên cứu các thuộc tính của thành phần này.

Cơm. 2. Thuộc tính của phần tử flex làm cho chúng linh hoạt hơn các khối.

Ưu điểm của Flexbox bao gồm các thuộc tính CSS mới cho phép bạn xây dựng nhiều loại lưới và cột mà không cần tốn nhiều công sức. Nó cũng hỗ trợ căn chỉnh theo chiều dọc, điều mà thiết bị thông thường không hỗ trợ.

Phần kết luận

Phương pháp bố trí đơn giản và phổ biến nhất hiện nay tiếp tục là cách tiếp cận theo khối. Ở một số nơi, bảng cũng sẽ hữu ích cho bạn vì dữ liệu dạng bảng hoàn toàn bất tiện khi nhập theo khối.

Khung từ lâu đã bị loại bỏ như một cách không thành công để tạo cấu trúc, nhưng thẻ iframe có thể hữu ích nếu bạn đột nhiên cần chèn một trang web khác vào bài viết.

Cuối cùng, hôm nay chúng ta có một phương thức bố cục hoàn toàn mới - phần tử flex và các thuộc tính của nó giúp nó linh hoạt và hiện đại hơn so với khối thông thường. Đó là tất cả cho ngày hôm nay. Đừng quên đọc các bài viết mới trên blog để biết mọi thứ về xây dựng trang web.

, với các giá trị thuộc tính hiển thị tương ứng: table , table-row và table-cell .

Nếu không, bạn có thể gặp lỗi không liên tục trong các trình duyệt dựa trên Firefox và Webkit khi một hàng trong bảng không có phần tử có display: table-cell ngẫu nhiênđược chia thành nhiều ô. Một lời giải thích khả dĩ có thể là ranh giới gói mạng đã bị kẹt giữa các ô khi truyền mã HTML.

Do đó, đánh dấu khối bằng display: table-* hầu như không khác biệt với bảng HTML thông thường về bất kỳ thứ gì ngoài tên thẻ, nhưng bảng thông thường được các trình duyệt hỗ trợ tốt hơn (cụ thể là Internet Explorer 7 trở xuống) và có nhiều tính năng hơn, chẳng hạn như hợp nhất các ô.

Điều đáng chú ý là, mặc dù có thẻ tùy chọn