Tôi đang tìm kiếm tài nguyên về thành phần của các trang web.
Tôi muốn tìm hiểu về ưu và nhược điểm của các bố cục trang và kỹ thuật khác nhau để di chuyển mắt xung quanh một trang.
Tôi đang tìm kiếm tài nguyên về thành phần của các trang web.
Tôi muốn tìm hiểu về ưu và nhược điểm của các bố cục trang và kỹ thuật khác nhau để di chuyển mắt xung quanh một trang.
Câu trả lời:
Câu hỏi có thể có một câu trả lời khá rộng, cần nhiều ngày và ngày học, nhưng tôi sẽ thử một thứ gì đó ngắn gọn.
Bạn phải thiết kế bố cục của mình theo một lưới vô hình, như trên giấy để trên web sẽ giúp bạn giữ mọi thứ theo đúng hướng và gọn gàng. Khó khăn là trên web, kích thước và tỷ lệ có thể thay đổi và nội dung động ở nhiều khía cạnh (cài đặt tùy chọn, hiệu chỉnh màn hình, chiếu sáng, kích thước màn hình, trình duyệt, hệ thống hoạt động, v.v.).
Vì lý do này, chúng ta không xem xét tỷ lệ giữa các thứ, nhưng hãy tập trung vào một thiết lập cổ điển. Bố cục cổ điển là tiêu đề ở trên cùng, chân trang ở dưới cùng và 3 cột ở giữa (với bên trái và bên phải nhỏ hơn một trung tâm). Đó có thể là trang web trên hai cột hoặc nhiều cột, tất cả phụ thuộc vào lượng thông tin bạn có và số lượng bạn muốn hiển thị hoặc bao nhiêu "không khí" (còn gọi là khoảng trắng) bạn muốn đặt giữa các thông tin mà bạn có .
Lưu ý: Lưu ý rằng có một số hạn chế CSS kỹ thuật như căn chỉnh các cột (nằm trên cùng một hàng ngang) trên cùng một chiều cao khi chúng có nội dung khác nhau lấp đầy cột. Mọi người đang cố gắng khắc phục bằng giải pháp sáng tạo cho đến khi trình duyệt sẽ cập nhật kết xuất CSS của họ theo tiêu chuẩn mới nhất
Có 4 bố cục có thể:
1) Bố cục cố định: Bạn xác định mọi div trong px phù hợp với kích thước cụ thể sẽ hiển thị bên trong trình duyệt (ví dụ: bên trong: 800x600)
pro: thiết kế ổn định con: bạn có thể phải có nhiều khoảng trắng tùy thuộc vào màn hình người dùng
Trong giải pháp này, bạn có thể quyết định sang trái (biết rằng một khoảng trống lớn sẽ ở bên phải của bạn và bạn có thể chơi với nền đồ họa) hoặc căn giữa (chia khoảng trắng ở bên trái và bên phải, giảm số lượng của nó so với căn lề trái).
2) Bố cục chất lỏng: Trang sẽ thích ứng với kích thước của màn hình, di chuyển và điều chỉnh nội dung xung quanh
pro: nó sẽ luôn lấp đầy trang không để lại khoảng trắng không kiểm soát được: bạn sẽ mất kiểm soát về tỷ lệ và lưới nơi bạn định vị nội dung của mình (ví dụ: một đoạn trên nhiều dòng trở thành một câu đơn dài trên độ phân giải màn hình cao hơn)
Ví dụ về kỹ thuật hoặc một số khác phức tạp hơn
3) Bố cục ban đầu: Chúng dựa trên việc phá vỡ các quy tắc bố trí và lưới. Họ không sử dụng bố cục cột cổ điển và chủ yếu dựa trên các hiệu ứng thiết kế đồ họa, như hiển thị thông tin trên toàn bộ trang web và họ đang sử dụng định vị tuyệt đối hơn bất kỳ giải pháp nào khác. Tốt cho niềm vui nghệ thuật trên web hoặc danh mục đầu tư điên rồ và không có gì hơn (tôi không chống lại nó, nhưng họ yêu cầu kiến thức về các quy tắc giao tiếp thiết kế web, kỹ thuật và nỗ lực sáng tạo tốt).
Tôi không tìm thấy một ví dụ tại thời điểm này, xin lỗi.
pro: thẩm mỹ tuyệt vời và con lừa ban đầu: bạn không thể sử dụng điều này cho các trang web thương mại, hoặc cho blog hoặc cho bất cứ điều gì với một lượng lớn thông tin.
4) Bố cục cố định động: Đó là những gì tôi sử dụng ngày nay cho các trang web cá nhân của mình và cho các trang web khách hàng có thời gian để làm cho một trang web linh hoạt nhưng trong tầm kiểm soát. Không có gì khác hơn là một bố cục cố định, nhưng với một javascript liên tục kiểm tra kích thước màn hình của bạn (trong trường hợp thay đổi kích thước hoặc để xác định kích thước của nó) và vượt qua css thích hợp cho kích thước đó. Vì vậy, cho dù kích thước màn hình của bạn là bao nhiêu, bạn sẽ luôn kiểm soát tốt. Ví dụ: nếu tôi có bố cục 3 cột, nếu tôi thay đổi kích thước trình duyệt, tôi có thể quyết định rằng cột thứ ba sẽ biến mất và đi ở dưới cùng của nội dung, trước phần chân trang.
pro: Hoàn thành kiểm soát + linh hoạt con: Rất nhiều nỗ lực trong việc thiết kế và gỡ lỗi thời gian để kiểm tra xem mọi thứ có ổn không, hãy suy nghĩ trước vì bạn sẽ thêm nội dung mới sau này trong tương lai và mọi thứ phải hoạt động tốt.
Bài viết mà tôi đã lấy cảm hứng (Ngày nay jquery thực hiện một công việc tuyệt vời với thay đổi kích thước (), 3 năm trước tôi đã có một kịch bản dài dài cho điều đó :))
Một lưu ý cuối cùng Hiện nay có một xu hướng mới đối với các nhà thiết kế web đồ họa (những người thiết kế đồ họa nhiều hơn lập trình viên), đó là sử dụng bố cục cố định mà họ đang thiết kế mỗi trang duy nhất trên blog của họ như tạp chí làm với các bài báo của họ. Sáng tạo, và thiết kế mỗi bài viết với phong cách riêng của mình.
Một số mũ là Jason Santa Maria
Các bài viết khác:
Có nhiều bài viết ngoài kia. Tìm "bố trí css". Hoặc theo dõi những nơi nói về khả năng sử dụng và thiết kế như Signal Vs Noise
Tất cả những gì cần biết về thành phần là kinh nghiệm và nghiên cứu, hoặc kiểm tra khả năng sử dụng (thử nghiệm và lỗi). Đặt ai đó ở phía trước trang web của bạn và xem cách họ phản ứng trên thiết kế của bạn. Hoặc một thiết bị theo dõi mắt :)
Tôi tự học nên tôi không thể đề xuất về sách về bố cục, nhưng một cuốn sách hay về bố cục lưới có thể giúp bạn rất nhiều.
Nếu bạn muốn có một hệ thống tốt để bố trí các thiết kế web thì hãy xem hệ thống lưới 960 . Đó là những gì tôi sử dụng cho hầu hết các bố trí của tôi. Tôi nghĩ rằng cũng có một lựa chọn tốt các mẫu để sử dụng trong các gói khác nhau, chẳng hạn như Photoshop và InDesign cũng như một số mẫu có thể in được cho tất cả các nhu cầu vẽ nguệch ngoạc trên trang web của bạn.
Ngoài ra một ví dụ tốt về bố cục khác nhau có thể được nhìn thấy ở đây: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples