Похожие статьи

Правильный подход к разработке макета сайта (50,67%)
У вас уже есть идея для будущего сайта, настало время хорошенько обдумать дизайн. Для этого лучше всего нарисовать макет сайта. Некоторые дизайн-студии тратят много времени и денег на создание умопомрачительных макетов. С другой стороны, я знаю людей, зарисовывавших макеты на салфетках. Так или иначе, сначала стоит уделить внимание основам…

Обзор новогодних сайтов (47,27%)
Обзор сайтов, посвященный встрече и проведению Нового 2003 года. Различные интересные и не очень ссылки и цитаты. Полезные и бесполезные ресурсы — одним словом предпраздничная лихорадка……

Геометрия модульной сетки (45,61%)
Обычно веб-дизайнер вкладывает в оформление страницы определенные закономерности. Они могут проявляться в строгой пропорциональности размеров таблиц, форм, в расстояниях между объектами и т.п. Это дисциплинирует структуру сайта. Но HTML-кодер может этого не увидеть. Во избежание осложнений дизайнер должен наглядно описать свой художественный замысел с помощью геометрии модульной сетки…

Автор: Земсков Юрий
www.ComputerLibrary.info

Дата публикации 25-11-2002 21:00
Статья просмотрена 15506 раз

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

Пробел

Пробел, как вам известно, используется для разделения слов в тексте. Также пробелом отделяется слово со знаком препинания от следующего за ним слова, поэтому следует писать примерно так:

У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т._д.

Хм… надеюсь, не надо объяснять, что символ «_» поставлен для наглядности, а не потому что так надо :) К тому же представился случай рассказать о неразрывном пробеле ( ). Неразрывный пробел, как и понятно из его названия, не позволяет браузеру «разделить» на странице соединенную этим пробелом фразу, поэтому наш предыдущий пример в html-коде лучше всего записать так, чтобы «д.» случайно не оказалась на другой строке:

У нас можно приобрести много всякой всячины: конфеты, шоколад, пиво, мороженое и т. д.

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

Дефис и тире

Начну с того, что дефис и тире — это разные вещи. Дефис разделяет между собой части одного слова, а тире — слова в предложении. Дефис не отделяется пробелами от соседних символов, а длинное тире отделяется.

Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий…

Уф, пример получился глупый, но зато удалось воплотить в нем все виды дефисов и тире. В html это выглядит так:

Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят «Китикет», каждая порция которого дает дизайнеру 2–3 тысячи килокалорий…

Пожалуй, стоит немного разъяснить:

  • Для дефиса (-) нет html-кода, он ставится клавишей «-», которая еще служит как знак вычитания и находится рядом с клавишей «+» :) Еще раз напомню, что дефис разделяет части сложносоставного слова.
  • Длинное тире (—) разделяет слова в предложении и отделяется от этих слов пробелами. Да, кстати, маленькое домашнее задание: подумайте почему в примере используется код:
    «Веб-дизайн — очень…»
    а не:
    «Веб-дизайн — очень…»?
  • Короткое тире (–) разделяет числа и само не отделяется от них пробелами.

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

Кавычки

Существует 2 вида кавычек:

  • Кавычки-«лапки»:
    выглядят: “ и ”
    html-код: “ и ” для левой и правой соответственно.
  • Кавычки-«елочки»:
    левая и правая кавычки: « и »
    html-код: « и » для левой и правой соответственно.

По правилам русской типографии однозначно принято употреблять кавычки-«елочки». Но в интернете пока безоговорочно властвуют кавычки-«лапки». Почему бы это? Может потому что для «лапок» есть соответствующая клавиша, которая прекрасно работает в WYSWYG html-редакторах, а «елочки» надо перелопачивать вручную. Одним словом, лень победила общепризнанные правила, неважно, что от этого страдает престиж сайта.

Подождите! Не стоит выбрасывать кавычки-«лапки» на задворки истории! Если вначале или в конце цитаты встречаются внутренние и внешние кавычки, то они должны визуально различаться:

Один сетевой графоман недавно написал редчайший бред: «Веб-дизайн — очень тяжелая работа, она отнимает много сил и энергии. А желудочек у дизайнера размером с наперсток, вот почему все дизайнеры так любят “Китикет”».

Разное

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

  • В конце заголовков точка не ставится, но если там стоят другие знаки препинания, то они сохраняются.
  • Многоточие обозначается не тремя точками, а кодом … Мелочь, конечно, но все-таки…
  • Не стоит писать «Вы», «Ваш» и т. п. Такие обращения используются в переписке, вряд ли сайт может сойти за личную переписку. Так что подобные вещи выглядят довольно смешно. Лучше пишите «вы», «ваш»…
  • Знаки copyright и registered — это не буквы «с» и «r» в скобках, а коды © и ® соответственно.

Вот, пожалуй, и все. Тем, кто заинтересовался этой темой, советую просмотреть приведенные ниже ссылки. Думаю пригодится :)


Рекомендуемые ссылки:

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

Статья «Как это пишется в Интернете»
Статья посвящена проблемам орфографии и правильного написания новых для русского языка слов, пришедших к нам вместе с компьютерами и интернетом.

Программа «Автотипографика»
Программа автоматически форматирует текст для веб-публикации, расставляя неразрывные пробелы, кавычки, тире, теги переноса строк и абзацев и удаляя лишние пробелы. Дополнительные фильтры позволяют транслитерировать текст и конвертировать некоторые символы Windows в набор ASCII.

Похожие статьи

5 правил создания небольшого бизнес-сайта (43,84%)
Вы решили открыть свое небольшое дело в интернете и еще только начинаете создавать веб-сайт. У вас, вероятно, есть миллион разных вариантов того, как он должен выглядеть. Однако, ваши представления об идеальном веб-сайте могут сильно отличаться от того, каким действительно должен быть сайт, предназначенный для бизнеса и продаж…

Проблемы редизайна веб-сайтов (42,62%)
После принятия решения о редизайне существующего сайта план действий становится похож на создание нового сайта с нуля — с тем же обдумыванием используемых технологий, дизайна и планированием работ. Однако есть и специфические проблемы, которых можно избежать. Они-то и рассматриваются в данной статье…

«Смотрелки» графических файлов (40,54%)
Хороших смотрелок (программ для удобной работы с большими коллекциями изображений) немало. Некоторые из них могут похвастаться поддержкой большого количества форматов, другие — интересными и оригинальными возможностями. Эта статья — небольшой обзор интересных бесплатных просмотрщиков изображений…

Игровые сайты сети (40%)
Просто выбрать хорошую игру нелегко. Все они продаются теперь в одинаковых jewel-коробочках от «1C». И, что показательно, на каждой непременно написано, что это эпохальная и величественная игра. В результате можно наткнуться на жуткую самоделку. В общем, без описаний, тестов, обзоров, отзывов на форумах настоящему (да и ненастоящему тоже…) игроману никуда…

Стиль Вашего сайта (40%)
Самое важное для проекта — его уникальность, узнаваемость. Это касается, как содержания, так и дизайна, т. е. того, как Вы преподносите материал. В статье описываются те тонкости дизайна, которые позволят посетителям Ваших проектов сразу же узнавать их автора или, по крайней мере, видеть «руку профессионала»…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (12) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

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

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

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

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

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