Старый 17.03.2011, 15:48 #1 (Ссылка)
Новичок
 
Регистрация: 17.03.2011
Сообщений: 1
Сказал(а) спасибо: 0
Поблагодарили 1 раз в 1 сообщении
Репутация: 12
8090 8090 вне форума
Новичок
Дополнительная информация
По умолчанию

Советы по верстке


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

Ширина страницы зависит от размера и разрешения монитора


Данная особенность породила метод верстки веб-страниц, основанный на использовании таблиц с невидимой границей. Идеология HTML рекомендует использовать таблицы только по их прямому назначению, т.е. для создания именно таблиц. Но что делать, располагая столь слабыми средствами верстки, приходится использовать разные ухищрения.

Все многообразие дизайна можно свести к двум типам: «фиксированный» и «резиновый» дизайн.

При «фиксированном» дизайне макет страницы создается на основе таблиц или слоев определенной ширины. Выбор ширины зависит от ориентации на определенное разрешение монитора пользователей. Так, для разрешения 640х480 пикселей размер таблицы следует брать не более 619 пикселей. Для всех пользователей сайт, построенный на таком макете, будет отображаться корректно, но при больших разрешениях оказывается слишком много пустого места. Поскольку наиболее популярным среди пользователей Интернета является разрешение 800х600, разработчики сайтов ориентируются именно на него и делают таблицы шириной 700-770 пикселей.

Для «резинового дизайна» характерно использование таблиц с шириной, заданной в процентном отношении от ширины браузера. Достоинства — используется все доступное пространство веб-страницы, недостаток — при большом разрешении монитора текст сложно читать. Попробуйте почитать страницу со строчками длиной символов 200, глаза устанут по ней «бегать». Особенностью данного дизайна также является более сложная система верстки веб-страниц.

Хотя и «резиновый», и «фиксированный» дизайн можно увидеть на различных сайтах повсеместно, в последнее время предпочтение все больше отдается гибкой структуре.

Размер шрифта зависит от настроек операционной системы и браузера


Не любят разработчики сайтов, когда их пользователи изменяют размер шрифта. Потому что в этот момент могут проявляться всякие разные недочеты верстки. И чтобы пользователь не мог менять размер шрифта, эта величина жестко прописывается в стилях. Даже если текст мелкий-мелкий, изменить его простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах, например: font-size: 150%. Тогда в опциях браузера размер шрифта можно делать больше или меньше, что невозможно при абсолютном задании размера шрифта в пунктах. Это позволит установить размер шрифта подходящим для комфортного чтения. Только надо проверить вначале, что все на сайте корректно работает при любом размере шрифта.

Несколько идущих подряд пробелов показываются как один


Сколько бы пробелов не стояло между словами, все равно на веб-странице мы увидим лишь один. В общем, правильное решение, чего лишний раз пробелы плодить. Но как же тогда быть с красными строками и другими отступами, которые так иногда необходимо использовать. Вот тут и полюбился многим символ неразрывного пробела (&nbsp за то, что позволяет делать столько подряд идущих пробелов, сколько хочется.

Нет переносов слов в тексте


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

Количество используемых для текста шрифтов ограничено


Разумеется, можно указать любой шрифт, установленный у вас в операционной системе и он корректно будет показываться на данном компьютере. Но никто при этом не гарантирует, что точно такой же шрифт будет находиться на удаленном компьютере пользователя. Поэтому для совместимости используется всего несколько шрифтов, которые встречаются повсеместно на компьютерах с операционной системой Windows и MacOS: Arial, Times, Verdana, Courier. В случае, если хочется воспользоваться понравившимся шрифтом, следует создать картинку в графическом редакторе, содержащую надпись.

Использование изображений вместо текста


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

Высота содержимого страницы не ограничена рамками окна браузера


Несмотря на очевидность данного воззрения, из него следуют некоторые выводы:
# поскольку высота текста на страницы не ограничена определенными рамками, как на листе бумаги и напрямую зависит от разрешения монитора, размера и типа шрифта и еще от кучи других параметров, вычислить ее не представляется возможным;
# вертикальные линии привязанные к высоте текста можно строить только с использованием блочных элементов, например, таблиц.

Использование распорок


Распоркой называется прозрачный рисунок, как правило, размером 1 на 1 пиксел, предназначенный для контроля пустого пространства. Распорки вставляются в ячейки таблиц, чтобы они не меняли свой размер при изменении окна браузера или разрешения монитора.

Написание программных скриптов вместо кода HTML


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

Советы по верстке


# Отделяйте один материал от другого, чтобы показать их относительную значимость.
# Несколько коротких материалов почти всегда доступней и привлекательней, чем один длинный.
# Разбивайте длинный текст на фрагменты, удобные для чтения.
# Выделяйте различными способами более важный материал, «для быстрого чтения» или материал, требующий повышенного внимания.
# Используйте изображения, чтобы привлечь внимание читателя к ключевым или интересным фрагментам информации.
8090 вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:
Apelsin fresh blog (18.02.2014)

Старый 18.03.2011, 19:04 #2 (Ссылка)
Аватар для Boss
Чёрный кардинал
 
Регистрация: 19.06.2010
Адрес: Pirate Bay
Моя смс: Pirate vBulletin
Сообщений: 1,702
Записей в дневнике: 1
Сказал(а) спасибо: 205
Поблагодарили 390 раз(а) в 237 сообщениях
Репутация: 410
Boss Boss вне форума
Чёрный кардинал
Дополнительная информация
По умолчанию

Хорошая статья. :!good:
Чуть подкорректирую и тему закреплю.
Boss вне форума   Ответить с цитированиемОтветить с цитированием
Старый 26.03.2011, 14:55 #3 (Ссылка)
Аватар для STRIJ
Профи
 
Регистрация: 30.06.2010
Адрес: Россия г. Липецк
Возраст: 31
Сообщений: 1,114
Сказал(а) спасибо: 0
Поблагодарили 3 раз(а) в 3 сообщениях
Репутация: 14
STRIJ STRIJ вне форума
Профи
Дополнительная информация
По умолчанию

Спасибо, сохраню в файл.
STRIJ вне форума   Ответить с цитированиемОтветить с цитированием
Старый 02.04.2011, 00:13 #4 (Ссылка)
Местный
 
Регистрация: 28.03.2011
Адрес: Владимир
Сообщений: 193
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 11
Антилопа Антилопа вне форума
Местный
Дополнительная информация
По умолчанию

беда. Я уже жаловался где то тут, что по прежнему многие смотрят на ХТМЛ, хотя, по моему скромному мнению, пора уже давно глядеть на XML, а точнее, на XHTML. Нет ли у вас похожей шпаргалочки по XHTML? :rolleyes:
Антилопа вне форума   Ответить с цитированиемОтветить с цитированием
Старый 17.06.2011, 08:28 #5 (Ссылка)
Новичок
 
Регистрация: 17.06.2011
Сообщений: 1
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
tati-drozd tati-drozd вне форума
Новичок
Дополнительная информация
По умолчанию Как быть с авторами?

Как известно, тексты на сайт пишут авторы со своей авторской редакцией текста в виде различных стилей, шрифтов, форматов. Может предложить им писать без ухищрений, т.к. все равно при размещении на сайт все "причешется" в соответствии с возможностями веб-дизайна?
tati-drozd вне форума   Ответить с цитированиемОтветить с цитированием
Старый 21.06.2011, 20:01 #6 (Ссылка)
Местный
 
Регистрация: 29.10.2010
Адрес: Tatarstan
Сообщений: 373
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
werctor werctor вне форума
Местный
Дополнительная информация
По умолчанию

изучил основы html и css так что могу написать шаблон для сайта, правда проверку на правила гипертекстового синтаксиса мои работы не пройдут, но скажу отличное занятие программирование сайтов
werctor вне форума   Ответить с цитированиемОтветить с цитированием
Старый 29.12.2011, 14:52 #7 (Ссылка)
Аватар для Янина Процкая
Новичок
 
Регистрация: 29.12.2011
Сообщений: 3
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 10
Янина Процкая Янина Процкая вне форума
Новичок
Дополнительная информация
Радость

Интересная статья, спасибо) Не задумывалась как-то насчет таблиц в качестве вертикальных линий, привязанных к тексту, а теперь вот понимаю: это же действительно выход) А где можно более подробно прочитать, как сделать так, чтобы шрифт какой-то красивенький автоматически посетителю сайта устанавливался?
Янина Процкая вне форума   Ответить с цитированиемОтветить с цитированием
Старый 31.01.2012, 18:29 #8 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
По умолчанию

Статья, на самом деле, сильно устарела. От HTML никто, конечно, не отказывается, но:
1) всё оформление давно делается с помощью CSS
2) таблицы стараются использовать только как таблицы, а не рамки для текста
3) актуальна блочная вёрстка, она сложнее в освоении, но лучше во всем остальном (и по весу и для поисковиков)

Критиковать не буду, человек старался, писал... лучше, как будет время, напишу что-нибудь поактуальнее.)
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:
Boss (31.01.2012)
Старый 31.01.2012, 19:07 #9 (Ссылка)
Аватар для Boss
Чёрный кардинал
 
Регистрация: 19.06.2010
Адрес: Pirate Bay
Моя смс: Pirate vBulletin
Сообщений: 1,702
Записей в дневнике: 1
Сказал(а) спасибо: 205
Поблагодарили 390 раз(а) в 237 сообщениях
Репутация: 410
Boss Boss вне форума
Чёрный кардинал
Дополнительная информация
По умолчанию

Ну да, стараются все убирать в css

Цитата:
Сообщение от Fiesta Посмотреть сообщение
лучше, как будет время, напишу что-нибудь поактуальнее.)
Boss вне форума   Ответить с цитированиемОтветить с цитированием
Старый 20.02.2013, 13:37 #10 (Ссылка)
Аватар для джинася
Вебмастер
 
Регистрация: 13.03.2012
Сообщений: 552
Сказал(а) спасибо: 439
Поблагодарили 228 раз(а) в 117 сообщениях
Репутация: 247
джинася джинася вне форума
Вебмастер
Дополнительная информация
По умолчанию

Как сделать шрифт сообщения крупнее?
джинася вне форума   Ответить с цитированиемОтветить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Вкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Советы начинающему копирайтеру Helenka Копирайтинг 7 13.04.2016 18:22
Специалисты - кто может оценить сайт и дать реальные советы? Филипп Беседин Оценка и критика сайтов 8 28.10.2012 18:21
Требуется специалист по верстке сайтов maria.gamma12 Поиск исполнителя 0 12.10.2012 12:36
Вопросы, советы, мнения по новому сайту pahakashkin Сайтостроение 1 26.09.2012 20:28
Подскажите курсы по верстке и графике в Санкт-Петербурге eviesad Web дизайн 13 07.06.2010 06:44


Текущее время: 16:24. Часовой пояс GMT +3.

Powered by vBulletin®
Copyright ©2000 - 2017, WMboard.
Перевод: zCarot
 

Форум вебмастеров

Здесь делают сайты, учатся на них зарабатывать. Ты новичёк, и ничего не понимаешь в создании сайтов и в интернет заработке? Не знаешь ответа на вопрос по сайтостроению? Мучают вопросы сео оптимизации?

Не беда, присоединяйся к сообществу вебмастеров, и зарабатывай вместе с нами!