Каковы современные рекомендации по форматированию веб-страницы?

Question

Я не занимался веб-дизайном в течение нескольких лет, и теперь мне поручено создать набор веб-страниц, которые будут нуждаться в относительно сложных (и точных) макетах. Я начал изучать CSS, и хотя я начинаю понимать, как его использовать, он на самом деле не кажется подходящим инструментом для нужного мне макета.

Макет, который мне нужен, имеет верхнюю, среднюю и нижнюю секции, и каждая из этих секций разбита на разные области. Мне нужно что-то вроде:

35%, 35% (правое обоснование), 15%, 15%

70%, 15%, 15%

70%, 15%, 15%

Проценты имеют ширину браузера, а там, где процент конца столбца совпадает со строкой выше / ниже, края столбцов должны соответствовать. Кроме того, строки должны быть ниже друг друга, независимо от того, какое содержимое я в них помещаю.

Казалось, что CSS будет делать то, что я хочу, но потом, когда я начал пытаться из-за сложности, в которой я нуждался, я не смог сопоставить столбцы или строки влились в другие строки и т. Д.

Что я действительно хочу, так это что-то вроде фреймов, где я могу расположить элементы именно там, где я хочу их. Это существует или я просто борюсь с CSS?

Спасибо

Шон.

Answer 1

Вам нужно изучить CSS, а не бороться это.CSS был использован для создания более сложных макетов, чем вы описали.И это единственный способ, которым вы должны стилизовать свои веб-страницы и реализовать дизайн макета.

CSS дает гораздо больший контроль над представлением веб-страницы и позиционированием элементов, чем фреймы (фреймы дают только фреймычтобы загрузить несколько страниц, вам все еще нужно стилизовать эти страницы отдельно.

Это довольно широкий вопрос, поэтому я просто скажу так:

• Использовать HTML длясемантически организовать / структурировать ваш контент.
• Использовать CSS для вашей презентации.

Другими словами, не используйте следующие теги или похожие теги:

• <b> (используйте <strong> вместо)
• <i> (используйте <em> вместо)
• <font>
• <u>

Не забудьте использовать теги структурирования, где это уместно, например:

• <h1> до <h6>
• <p>
• <blockquote>
• <pre>

И используйте семантически правильные теги.Поэтому, если у вас есть список определений, используйте <dl>, <dt> и <dd>.Если у вас есть форма, используйте <label for="{input id}">, например:

<label for="first-name">First Name:</label>
<input name="first_name" id="first-name" />
<!-- when the user clicks on the label, the input will receive focus -->

Не не используйте таблицы для макетов. Используйте их только для табличных данных.И когда вы это сделаете, убедитесь, что вы используете правильную семантическую разметку <thead>, <th>, <tbody> и т. Д.

Поместите title атрибуты в ваши ссылки и alt атрибуты в ваши изображения для доступностии удобство использования.

И использование таблиц стилей (предпочтительно внешних для DRY) вместо встроенных стилей.

Наконец, как упоминалось в Jan_V, w3schools.com - отличный ресурс дляCSS, JavaScript, HTML и большинство веб-стандартов.Вам есть чему поучиться, но, к счастью, в Интернете есть множество учебных пособий, ссылок и других ресурсов, которые помогут вам в этом.Узнайте, как правильно использовать CSS / HTML, и вы получите высококачественные веб-страницы, а также сэкономите время на обслуживании.

Если вы боретесь с макетом, который вы имеете в виду, начнитес чем-то более простым и работать вверх.Например, попробуйте равномерно нарисовать 2 столбца, сначала 2 ряда строк.Как только вы это заработаете, начните изменять пропорции и добавляйте больше столбцов / строк.

Answer 2

CSS может делать практически все, что вы захотите, это инструмент defacto для позиционирования и стилизации элементов на ваших веб-страницах.Я думаю, что вы должны смотреть на позицию: абсолютные и плавающие возможности, основанные на вашем описании.Сложность заключается в получении согласованного поведения / интерпретаций в разных браузерах.Настоятельно рекомендуется использовать css-reset как YUI's .YUI также имеет утилит javascript , которые помогают нормализовать некоторые CSS-свойства (например, float и opacity) в разных браузерахYUI ни в коем случае не является единственным способом достижения этих целей.

Answer 3

Помните, что использование таблиц в сочетании с CSS вызовет проблемы с доступностью.Это означает, что люди, использующие специальные возможности для просмотра вашего сайта, будут иметь проблемы с использованием программ чтения с экрана.

Я согласен с некоторыми из предыдущих ответов.Потратьте время на знакомство с CSS.Когда он написан правильно, это означает, что ваши стили будут многократно использоваться и их легко реализовать и изменить после того, как вы их сделаете.Попытка изменить стили, индивидуально закодированные на нескольких страницах, вызовет у вас головную боль.

Если ваш сайт будет сложным, постарайтесь сделать его максимально простым в обслуживании и CSSопределенно поможет вам там.

Answer 4

Вы можете попробовать использовать таблицы для макета, но я бы предложил использовать элементы CSS и DIV.Если вы собираетесь использовать фреймы или таблицы, у вас возникнут проблемы позже (вероятно).Кроме того, CSS не так уж и сложен, просто потратьте немного времени на его изучение и, возможно, на W3Schools, в которых есть хорошие учебники.