Hình minh họa. Bố cục các trang sử dụng khung CSS. Các kiểu bố trí: cơ bản về phân loại
Số phần và tiêu đề, phần nói bằng ngôn ngữ chuyên nghiệp- cấu trúc của số báo 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 đại chúng. 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 trang cụ thể và đối với thiết kế tổng thể của vấn đề, nghĩa là đối với sự kết hợp hiệu quả giữa văn bản và yếu tố đồ 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, phần cơ bản và tiêu đề chuyên đề đều được giữ lại loại nhất định và cấu trúc. Đ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ễ dàng đượ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 đưa ra, 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 bố cục là nghiên cứu chi tiết về cấu trúc nội dung: thứ tự 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 cách 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 đều có một ấn phẩm riêng, cụ thể. 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 typographic”, 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 cách sử dụng trình hướng dẫn mẫu ( vỏ bọc 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 một vấn đề trên PC bao gồm việc cài đặt một phần mềm nhất định sản phẩm phần mềm. 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ế độc lập với 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ự bất tiện trong khu 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ủ cạnh tranh nghiêm trọng 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, thật hấp dẫn. Ở đây, để gây khó chịu cho các đối thủ, 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 chương trình tương tự- những 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ề vấn đề này, InDesign là một sự kết hợp khả thi cho phép bạn giải quyết nhiệm vụ phức tạp nhấn trước 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 trong chế độ tự độngđáp ứng mọi 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?
Ví dụ thuật toán đúng hành độ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 cấu trúc tiêu chuẩn bị vi phạm (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.), thì do đó, thành phần của tài liệu được thu thập sẽ đượ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 định dạng khác nhau, trong khi số lượng hì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ố cục: cơ bản về phân loại
Những nỗ lực tạo ra phân loại thống nhất Nhiều kiểu bố trí đã được thực hiện. 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 tách các kiểu bố cục báo không theo phong cách mà trên cơ sở ba nhómđặc điểm: cái đầu tiên bao gồm những cái được xác định bởi cấu hình của văn bản và đồ họa, tiêu chí thứ hai là hướng bố cục (dọc / ngang), thứ ba - mức độ đối xứng 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. Các tác phẩm cuối cùng trước hết phải đáp ứng được yêu cầu 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 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”.
Bố cục trang web là quá trình kết hợp mã HTML và bảng CSS dựa trên lựa chọn trước đó giải pháp thiết kế. Dấu hiệu chính về chất lượng của kết quả cuối cùng là việc hiển thị chính xác tài nguyên ở tất cả các dạng. trình duyệt phổ biến, và hơn thế nữa .
Không có ích gì khi nhắc nhở rằng một dự án web thành công được đặc trưng bởi hoạt động ổn định và cung cấp quyền truy cập liên tục vào nội dung của nó. Điều này chỉ có thể đạt được nếu bố cục HTML là:
Qua trình duyệt;
- thích nghi;
- chứa số lượng mã tối thiểu;
- đóng góp tốc độ cao tải trang web;
- chỉ dựa trên việc sử dụng các thẻ HTML theo mục đích của chúng (tính nhất quán và phân cấp của hệ thống để giới thiệu các phần tử cũng được coi là một yêu cầu không thể thiếu);
- hợp lệ (tuân thủ mã trang web với quy định chung được chấp nhận tiêu chuẩn kỹ thuật W3C).
Các loại
Bây giờ chúng ta hãy bắt đầu xem xét các kiểu bố cục HTML.
1. Bố cục tĩnh (cố định). Các chi tiết cụ thể của ứng dụng khác nhau ở chỗ chiều rộng của các trang web sẽ giống hệt nhau khi vận hành trang web như trên tiện ích di động và trên máy tính để bàn. Trong trường hợp độ phân giải màn hình cao và cửa sổ trình duyệt Internet được phóng to tối đa để lấp đầy toàn bộ màn hình, thì bạn có thể thấy không gian trống (không hoạt động) ở cả hai bên. Đối với thiết bị cầm tay, khi đó với bố cục tĩnh, người dùng sẽ thấy thanh cuộn ở cuối trang.
2. Kiểu bố cục HTML linh hoạt bao gồm việc lấp đầy toàn bộ màn hình của thiết bị bằng trang. Và ở đây, việc bạn xem nội dung chính xác ở đâu không thực sự quan trọng. Các tham số trang ban đầu (ví dụ như kích thước) cũng không ảnh hưởng gì. Vì các thành phần web chiếm hết không gian có sẵn nên quá trình phát triển thiết kế thân thiện với người dùng trở nên phức tạp hơn nhiều.
3. Bố cục dạng bảng liên quan đến việc tạo mã HTML bằng cách tạo một tập hợp các bảng. Nó trông giống như thế này: đầu tiên, một bảng chính được tạo ra, trong đó có nhiều ô. Chúng chứa gói bảng sau (nếu cần). Và cứ thế đến vô cùng. Kết quả là, mã trở nên khá đồ sộ, khiến quản trị viên web sau đó khó sửa hoặc thay đổi mã.
Ngày nay, bố cục dạng bảng HTML hiếm khi được sử dụng. Nhược điểm chính– Việc lập chỉ mục trang web chậm bởi các công cụ tìm kiếm. Về nguyên tắc, có thể đặt một số bảng trên một trang, nhưng chúng tôi khuyên bạn không nên sử dụng chúng như một phần của việc xây dựng cấu trúc các thành phần của một dự án web.
4. Bố cục với các khối web (hoặc bố cục div). Người ta tin rằng đây là cách xây dựng trang web phổ biến nhất hiện nay. Lưới được hình thành bằng cách sử dụng thẻ
5. Kiểu bố cục thích ứng. Ưu điểm chính là khả năng điều chỉnh tài nguyên về mặt kỹ thuật cho tất cả các thiết bị người dùng phổ biến (PC, máy tính xách tay, máy tính bảng, điện thoại thông minh, v.v.). Việc sử dụng thoải mái đạt được bằng cách nhóm một số tờ định kiểu.
6. Bố cục linh hoạt(uốn cong). Trong giới thiết kế web, họ nói rằng đằng sau kiểu bố cục này là những khả năng và triển vọng không giới hạn trong lĩnh vực lập trình. Để không phải là vô căn cứ, chúng tôi trình bày cho bạn danh sách những ưu điểm chính của bố cục linh hoạt:
Tất cả các khối đều có thể nén và mở rộng cần thiết để lấp đầy không gian sẵn có một cách hiệu quả;
- có các tài nguyên để căn chỉnh tài liệu văn bản theo chiều ngang và chiều dọc;
- không cần có vị trí rõ ràng của các thành phần trong HTML;
- có thể viết ngôn ngữ cả từ phải sang trái và từ trái sang phải (mặc dù ở trong trường hợp này khái niệm “bắt đầu” và “kết thúc” sẽ phù hợp hơn);
- thành thạo CSS đòi hỏi đầu tư thời gian tối thiểu.
7. Bố cục HTML ngữ nghĩa được định vị là phần mở rộng của bố cục khối. Bạn có thể phân tích chức năng trên nền tảng HTML5. Lưu ý rằng bộ thẻ được cập nhật cho phép chúng tôi cải thiện cấu trúc của trang web ( công cụ tìm kiếm thích các cổng có mã ngữ nghĩa).
Tóm lại, hãy để chúng tôi nhắc bạn rằng trang web chất lượng cao là một nền tảng có các trang (trước hết) được thiết kế có tính đến các tiêu chí về khả năng tương thích và khả năng thích ứng giữa nhiều trình duyệt. Chọn kiểu bố cục, tập trung vào loại tài nguyên, cũng như phạm vi nhiệm vụ và mục tiêu sẽ được giải quyết với sự trợ giúp của nó trong tương lai. Chúc bạn may mắn.
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. 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à phần tử con, 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 nhiều 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
Sau đâ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ợ cho sự minh bạch, có thể đạt được nhiều điều hiệu ứng thú vị, chọn 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)
Hầu hết phương pháp mới bố cục. Nó nhận được sự hỗ trợ bình thường trên 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 nỗ lực đặc biệt. 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 hoàn toàn có cách mới bố cục - phần tử flex và các thuộc tính của nó làm cho nó linh hoạt và hiện đại hơn 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.
Câu hỏi thường được đặt ra, bố cục là gì? Nói một cách đơn giản, bố cục là sự sắp xếp các thành phần cấu thành (văn bản, tiêu đề, hình ảnh, bảng biểu) trên một trang tài liệu. Bố cục có các loại sau:
- Sách
- Báo và tạp chí
- Bố cục của tài liệu web
Chúng tôi sẽ bỏ qua mô tả của hai phần đầu tiên và đi thẳng vào bố cục của các trang web. Để hiểu rõ hơn nó là gì, chúng ta hãy xem xét quá trình tạo một trang web. Đầu tiên, họ tạo bố cục thiết kế: họ vẽ từng trang và tất cả các thành phần của nó. Kết quả là họ có được hình ảnh của trang web nhưng đó chỉ là một “hình ảnh”.
Tiếp theo, bố cục kết quả phải được hiển thị trong trình duyệt để tất cả các phần tử “trở nên sống động” và phản hồi hành động của người dùng. Ở giai đoạn này, nhà thiết kế bố cục bắt đầu làm việc. Sử dụng lưỡi đánh dấu html, nó tạo ra các tài liệu mà trình duyệt hiểu và hiển thị chúng cùng với các trang web quen thuộc.
Phương pháp bố trí
Khi thiết kế trang web, có hai phương pháp chính:
- Bố trí bảng
- Bố cục khối
Bố trí bảng từng là chính. Ưu điểm của cách bố trí sử dụng bảng là việc thực hiện đơn giản và hiển thị gần như giống hệt nhau trong các trình duyệt khác nhau. Nhược điểm - cấu trúc phức tạp và đồ sộ, làm tăng đáng kể số lượng mã (so với cấu trúc khối). Để thay đổi cách bố trí bảng bạn cần bỏ ra một số lượng lớn thời gian và công sức, phải mất nhiều thời gian để đi sâu vào một cấu trúc hiện có.
Ngày nay, các trang web tiếp tục được bố trí bằng cách sử dụng bố cục dạng bảng, nhưng các chuyên gia từ lâu đã chuyển sang bố cục một khối linh hoạt hơn. Bố cục dạng bảng Khuyến cáo chỉ sử dụng nó để hiển thị bảng.
Bố cục khối là một yếu tố chủ yếu trong số các nhà phát triển web. TRONG bố trí khối khung tài liệu bao gồm các thẻ
Một ví dụ mã nhỏ:
Bố trí bảng
một chiếc mũ lưỡi trai
Nội dung Thực đơn tầng hầm
Chặn mã bố cục
một chiếc mũ lưỡi trai
Nội dung
Kết quả là như nhau:
Ngay cả đối với bố cục đơn giản nhất, sự khác biệt trong mã đã được thể hiện rõ và khi các phần tử tăng lên, sự khác biệt sẽ tăng theo cấp số nhân.
Chương trình bố trí
Để tạo một trang web đơn giản, bạn có thể sử dụng notepad thông thường. Đối với các dự án phức tạp hơn, bạn không thể thực hiện nếu không có trình soạn thảo html đặc biệt. Chúng làm nổi bật mã, giúp đơn giản hóa đáng kể quá trình bố cục. Các chương trình sau đây được sử dụng trong môi trường chuyên nghiệp:
- Sổ tay++
- Macromedia Dreamweaver
- Trang trước của Microsoft
- Trình soạn thảo HTML CoffeeCup
- NetBean
Trình chỉnh sửa trang HTML được chia thành thông thường và trực quan. sử dụng biên tập trực quan, thậm chí có thể tạo nên một trang người dùng thiếu kinh nghiệm. Nhưng bạn nên hiểu rằng trình soạn thảo trực quan thêm rất nhiều mã bổ sung (rác) và tước đi cơ hội sử dụng tính linh hoạt của người thiết kế bố cục ngôn ngữ html 100%
Những vấn đề phát sinh trong quá trình bố trí?
Vấn đề chính khi thiết kế trang web là cùng một tài liệu không hiển thị giống nhau trên các trình duyệt khác nhau. Sau khi tạo một trang chất lượng cao cho Firefox, nó có thể được hiển thị hơi khác một chút trong Opera và hoàn toàn phân tán trong trình duyệt web IE.
Lý do là mỗi trình duyệt được phát triển các công ty khác nhau Và sử dụng công nghệ khác nhau và các quy tắc. Những nỗ lực để đến tiêu chuẩn thống nhấtđã được thực hiện nhưng kết quả cuối cùng vẫn còn rất xa.
Bố cục thường không được quan tâm đúng mức. Với cách tiếp cận này, bạn có thể phá hỏng ngay cả thiết kế sáng tạo nhất và chức năng phức tạp nhất của trang web. Nếu khách truy cập của bạn blog cá nhân Bạn sẽ được tha thứ cho điều này, nhưng bố cục của trang web hoặc cửa hàng công ty bị sập sẽ ảnh hưởng nghiêm trọng đến hình ảnh của công ty. Quyết định tốt nhất là giao phó công việc cho các chuyên gia.
Vì thiết kế chuyên nghiệp các trang web bạn cần biết không chỉ Khái niệm cơ bản về CSS, mà còn hiểu cách trình duyệt hoạt động, biết 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 này bạn mới có thể lựa chọn được nhiều nhất cách thích hợp giải quyết một vấn đề từ một số vấn đề có thể xảy ra, 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ả khả năng chính và Hạn chế CSS, hiện có liên quan.
Bài viết dành cho những người đã quen thuộc với Khái niệm 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 các tờ kiểu xếp tầng hoạt động.
Bàn
Về mặt 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ả đối với nhỏ và kích thước lớn cửa sổ trình duyệt, 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 một 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 sẽ làm giảm khả năng tiếp cận của những người sử dụng chương trình đặc biệt, và làm giảm vị trí trong kết quả tìm kiếm, bởi vì máy tìm kiếm, có lẽ sẽ khó hiểu cấu trúc trang hơn. Kết quả là trang web hoạt động kém hiệu quả hơn.
Đặc thù
Các ô bảng xuất hiện lần lượt 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 được đặt trước nội dung của các cột khác trong mã HTML nguồn, bảng không phải là một giải pháp phù hợp.
Cấu trúc của bảng khá phức tạp, nó được mô tả một lượng lớn thẻ, dẫn đến sự phức tạp của mã nguồn. Ảnh hưởng xấu Nó càng trở nên rõ ràng 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ẽ đáng tin cậy hơn nếu tạo cấu trúc tối thiểu bảng > hàng > ô, tương tự thẻ bắt buộc
| , 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 phải 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ó hiển thị: 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 đã bị tấn công gói mạng 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 ở bất kỳ thứ gì khác ngoài tên thẻ, nhưng bảng thông thường đượ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 |
