HTML / CSS проекты для обыденного текстового контента - PullRequest
6 голосов
/ 23 октября 2008

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

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

Итак, я хотел бы изменить этот материал на более CSS-счастливое состояние. Есть много сайтов, которые предлагают советы для конкретных целей дизайна CSS, но я разработчик, у которого нет большого количества художественных возможностей веб-сайта, и я не имею в виду структуру. Есть ли хорошие сайты, которые обучают CSS в контексте некоторого относительно мирского - но эффективно представленного - бизнес-контента? Такие вещи, как CSS Zen Garden - это круто, но я больше ищу кое-что, что даст мне несколько простых текстовых идей позиционирования бизнес-данных и , которые представят эти идеи как возможность изучения CSS. *

Есть ли такой сайт?

Ответы [ 6 ]

4 голосов
/ 24 октября 2008

К сожалению, если у вас нет большого контроля над HTML, трудно получить надежную, последовательную презентацию из CSS. Это особенно верно, если вы не можете добавлять специальные классы / идентификаторы к своим элементам. И теги <br/>, используемые по неосторожности, приведут к хаосу при любой попытке стандартизировать макет.

Если вы ограничены только предоставленным вами HTML-кодом, ваша основная цель должна состоять в том, чтобы сделать его максимально читабельным. Убедитесь, что размер шрифта достаточно велик, чтобы люди могли с удобством читать его, откинувшись на спинку стула. Или стоит через чье-то плечо. Он не должен быть слишком большим, но если его текст тяжелый, как вы утверждаете, традиционный 12pt может показаться слишком маленьким для большого количества чтения.

Какой шрифт использовать - другое соображение. Verdana шире, чем Arial, поэтому занимает больше горизонтального пространства, но имеет тенденцию быть легче для глаз. Другие, как правило, предпочитают шрифт с засечками, например, Georgia, который хорошо выдерживает большие размеры.

Вертикальный интервал важен. Убедитесь, что вы включили много визуального разрыва между областями страницы. Вы можете достичь этого с очевидным и последовательным стилем подзаголовка. Также убедитесь, что line-height между каждой строкой достаточно широк - люди не любят читать «кубики» текста.

И не забывайте, горизонтальное пространство. Общее практическое правило заключается в том, что столбец текста, вероятно, не должен занимать более 60-70 символов в строке, иначе его будет сложнее читать.

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

Что касается вдохновения, я довольно большой поклонник текстового дизайна в Information Architects . Вы также можете посмотреть на Subtraction.com . Блоги, вероятно, будут хорошим источником вдохновения, поскольку они, как правило, очень тяжелые текстовые.

Удачи.

3 голосов
/ 23 октября 2008

Я бы сказал, A List Apart - хорошее место для начала.

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

2 голосов
/ 28 октября 2008

обо всем по порядку. Используйте простой и семантический XHTML. Если применимо, отбросьте эти <br> s для <p></p> s. Используйте <h1>,<h2>,<h3> и т. Д. Последовательно. Вы знаете, что находитесь на правильном пути, если ваша страница выглядит чистой и читаемой без ссылки на файл CSS. У Дэвида Ши есть замечательный гид по разметке.

Руководство по разметке Дэвида Ши

Что касается руководств по стилю ... Мне нравится веб-дизайн Бена Ханта с нуля, хотя он постоянно показывает свои электронные книги. Содержание хорошее.

Веб-дизайн с нуля: Руководство по стилю

Веб-дизайн с нуля: текущие стили

Если вы ищете примеры сайтов ASP.net, ориентированных на правильный CSS, посмотрите бесплатные шаблоны Microsoft.

ASP.net Design Starter Kits

Наконец, и это настоящая жемчужина, если вам нужно стилизовать табличные данные, у Smashing Magazine есть товары. Эти дизайны таблиц не по графику. Пример кода включен. На самом деле, вы можете провести часы на сайте Smashing Mag. Так много отличных примеров и бесплатных вещей.

Smashing Magazine: 10 лучших дизайнов CSS таблиц

Smashing Magazine: Все статьи CSS

мир | dewde

2 голосов
/ 23 октября 2008

Эрик Мейер всегда хороший CSS-ресурс.

2 голосов
/ 23 октября 2008

У меня была похожая ситуация, и я многому научился, скачав и изучив некоторые проекты на http://www.openwebdesign.org/. Существует множество дизайнов, и на форумах полно людей, готовых помочь.

0 голосов
/ 28 октября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...