Предыдущее посещение: менее минуты назад Текущее время: 19 лист 2017, 19:51

Часовой пояс: UTC + 2 часа




 [ Повідомлень: 7 ] 
Теги:
Нет тегов
Автор Сообщение
 Заголовок сообщения: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах





















1. Вид сверстанной страницы должен максимально соответствовать дизайну.В идеале работник должен сделать правильную верстку, которая будет соотвествовать дизайну. На практике получается совсем не так: HTML не всемогущ :) , однако к этому можно стремиться.
Готовая страница должна корректно отображаться в IE6+, Google Chrome 1+, Mozilla Firefox 2+, Opera 9.XX +, Safari 3+.Многие верстальщики видали в гробу все семейство браузеров IE и старые Safari . Однако со статистикой не поспорить. Доля Internet Explorer до сих пор велика, а значит, что верстать (и делать это правильно) под IE6 и IE7 все же придется.
Страница должна проходить валидацию без ошибок.Валидация кода имеет очень большое значение в продвижении сайта. Поисковые системы отдают предпочтение правильным кодам, блокируя другие ресурсы. Для корректного и эффективного индексирования и нужна валидация кода.
Кодировка всех файлов верстки должна совпадать (UTF-8 или Windows-1251).Конечно же, кодировку для каждого файла можно указать и в параметрах при подключении скрипта или CSS, но не стоит обнадеживаться: далеко не каждый программист обратит внимание на различия в кодировках и кракозябры на сайте вам обеспечены.
Все стили должны быть “убраны” в CSS.Чистый HTML-код радует глаз и греет душу. Отсуствие вставок вида style=”…” сильно упростит работу вам и сильно уменьшит HTML-файл.
У страницы должен быть указан title и мета-теги description и keywords.Это, наверное, тоже относится к культуре программирования: не факт, что программист найдет им применение (а если и найдет, то может заменить их на свою функцию по выводу нужных параметров). Я обычно оставляю их пустыми: а вдруг пригодятся? :)
Использование каждого тега в верстке должно быть уместно.
    h1..h6 – заголовки;
    ul, dl,.. – списки;
    p – параграфы; //абзацы
    address – поле для отображения адреса;
    table – для отображения табличных данных;
    th – заголовок таблицы;
    td – данные в таблице;
    div – блоки страницы.
Названия классов классов и идентификаторов тега в правильной верстке должны соответствовать содержимому тега.они должны быть примерно такими:
Типовые идентификаторы:
    header – заголовок страницы;
    footer – подвал страницы;
    content – контент (текст);
    main – контейнер для контента;
    aside/lside/rside – колонка на странице / левая колонка / правая колонка;
    menu / submenu – меню различной вложенности;
    logo – логотип;
    copyrights – копирайты


Типовые классы:
    .menu – меню;
    .menu .active – активный элемент в меню;
    .first – первый элемент списка;
    .last – последний элемент списка;
    .odd – нечетный элемент списка;
    .even – четный элемент списка;
    .news – список новостей;
    ul.tiles – список плиткой (слева направо);
    .paginator – счетчик страниц;
    .breadСrumbs – «хлебные крошки»
    input.text – стандартное форматирование для поля ввода текста;
    input.submit – кнопка отправки;
    table.reset – таблица без границ и без отступов внутри ячеек;
    ul.reset – список без отступов;
    div.hr – горизонтальная линия;
    .error – класс сообщения об ошибке;

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 Заголовок сообщения: Re: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах
Кроссбраузерность, валидность, семантика

1. По умолчанию сайт должен нормально работать в IE6+, FF3+, Opera9+, Safari4+, Chrome4+
2. Если поддержка IE6 не требуется об этом будет специально сказано
3. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»
4. Вид сверстанной страницы должен максимально соответствовать дизайну
5. Валидность CSS приветствуется, но наличие CSS хаков допускается.
6. При желании можно воспользоваться сервисом http://cleancss.com/
7. Ну и конечно соблюдать семантику.
8. Желательно использование
Код:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 Заголовок сообщения: Re: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах
РАЗМЕТКА БЛОКОВ

1. Просьба разделять основные html блоки комментариями.
Примерно так:
Цитата:
<!– BEGIN FOOTER –>
<!– END FOOTER –>

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 Заголовок сообщения: Re: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах
CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например:

Цитата:
/* ___________Сброс CSS____________________*/
/* ___________Типовые элементы____________*/
/* _______________Залоговки______________*/
/* _______________Ссылки________________*/
/* _______________Элементы форм_________*/
/*___________HEADER (Шапка сайта) __________*/
/*___________SIDEBAR (Справа)_______________*/
/*___________FOOTER (Подвал)_______________*/


Как именно структурировть стили — вопрос немного холиварный, но главное — как-то это делать.

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 Заголовок сообщения: Re: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах
СТРУКТУРА

1. В корне находятся все html файлы, Папка css с файлами стилей, папка js с файлами JavaScript, папка images с изображениями.

НАЗВАНИЯ

1. Названия css файлов должны быть вида ie6.css ie7.css ie.css style.css итд что бы было сразу все интуитивно понятно.
2. Названия всех файлов, классов, id итд необходимо писать в нижнем регистре.
3. Названия классов и id должны по смыслу соответствовать применению. например, header, menu, footer, news
КОДИРОВКА

1. Кодировка html-макета, CSS и JS файлов должна быть UTF-8 без BOM.

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 Заголовок сообщения: Re: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах
ПРИМЕЧАНИЯ ПО ВЕРСТКЕ

1. Всегда описывайте цвет фона для body (даже если он белый) и размер и цвет для текста, если даже он дефолтный.
2. Если можно обойтись без использования id, то лучше обойтись без них. Оставим id программистам.
3. Если используете CSS хаки, комментируйте, что это и для какого браузера, а лучше используйте css_browser_selector.js
4. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
5. Все стили должны быть “убраны” в CSS.
6. Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px.
7. В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки.
8. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
9. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a>.
10. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href=’javascript:void(0)’ вместо популярного href=’#', чтобы страница не скроллилась вверх.
11. Верстайте формы правильно: метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for.
12. Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)
13. Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту.
14. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.
15. Для пунктов меню необходимо показать, как выглядят пункты меню обычные, при наведении и в активном разделе.
16. Все меню и списки стоит делать с помощью тегов <ul> и <li> причем внутри <li> недопустимо использование классов и id, за исключением редких случаев когда без этого обойтись невозможно и в случае с активной страницей.
Код:
<ul class = “” id = “”>
<li><a href=”">Текст</a></li>
<li>Текст</li> (либо <li><span>Текст</span></li> либо еще как-то)
</ul>

17. При вставке изображений использовать относительные пути, указывать собственные размеры.
18. Код должен иметь удобное форматирование.
19. По умолчанию границы для изображений, являющихся ссылками отсутствуют.
20. Заголовок страницы в области контента должен быть оформлен с помощью тега <h1>
21. Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 Заголовок сообщения: Re: правила хорошего тона при верстке сайтов
Сообщение
Відсутній
Администратор
Аватара пользователя

Зарегистрирован: 13 жовт 2010, 00:09
Сообщения: 1649
Изображения: 1
Откуда: Україна
Благодарил (а): 7 раз.
Поблагодарили: 47 раз.
Запах
ГРАФИКА

1. Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
2. Графика должна быть качественной и выглядеть красиво, то есть сохранять ее надо например jpg в 80-100% качестве… При сжатии не должно возникать видимых дефектов характерных данному формату.
JAVASCRIPT

1. Все что можно сделать без Javascript, делать без него.
2. Javascript код обязательно нужно выносить в отдельный(е) файл(ы).
3. Если не оговорено отдельно какие Javascript библиотеки требуется использовать при верстке макета, то используем jQuery последней версии.
4. Если в макете присутствует JS, изменяющий DOM — внимательно следить, чтобы все корректно работало в Опере, т. к. этот замечательный браузер при нажатии на кнопочку назад страницу не перезагружает, а отдает закешированный документ, причем очень важный момент: документ не просто закешированный, а еще и с учетом всех модификаций DOM, которые были выполнены с помощью JS
РАЗНОЕ

1. Если в верстку вносятся правки во время интеграции верстки в CMS, исполнитель должен в обязательном порядке прикрепить файл с описанием изменений в макете примерно такого содержания:
Добавил новые картинки в папку img,
Картинки btnHome.jpg и btnFeedback.jpg уже не нужны, можно удалять
Изменил html-код в секции файла anketa.html
Добавил в конец файла main.css новые стили (начиная с .form_row и ниже).
2. Если в макете имеется контент, то его надо перенести в верстку без использования каких-либо заглушек в виде Lorem ipsum

_________________

програміст- характерникпошта: razorback456@gmail.com https://www.facebook.com/AndroidMobileGame/
Роблю андроїд ігри на замовлення(рекламні ігри, ігри-приколи в подарунок)ціна від 20$


Вернуться к началу
  
 
 [ Повідомлень: 7 ] 
   Похожие темы   Автор   Ответы   Просмотры   Последнее сообщение 
В цій темі нема непрочитаних коментарів. урок фотошоп: Дизайним коробку с хлопьям при помощи 3D Tool

в форуме не сортированные уроки фотошоп часть:2

Anonymous

0

49

19 вер 2012, 19:44

romioliz Перейти к последнему сообщению

В цій темі нема непрочитаних коментарів. урок фотошоп: Создание радужного логотипа при помощи сеток

в форуме не сортированные уроки фотошоп часть:2

Anonymous

0

105

20 вер 2012, 10:07

finished Перейти к последнему сообщению

В цій темі нема непрочитаних коментарів. урок фотошоп: Использование референсов при рисовании с фото

в форуме не сортированные уроки фотошоп часть:2

Anonymous

0

150

20 вер 2012, 19:00

Breaking Перейти к последнему сообщению

В цій темі нема непрочитаних коментарів. окно в полноэкранном режиме как при нажатии F11

в форуме Javascript

simart

0

121

04 січ 2011, 13:34

simart Перейти к последнему сообщению

В цій темі нема непрочитаних коментарів. урок фотошоп: Сохранение полупрозрачности при вырезании 871

в форуме не сортированные уроки фотошоп часть:2

Anonymous

0

47

19 вер 2012, 21:05

decorative Перейти к последнему сообщению


Часовой пояс: UTC + 2 часа


Кто сейчас на конференции

Сейчас этот форум просматривают: aretmigo, crawl, demon, Elin, megatester, Photoshop Garden, Ray12, stanislas88, Web Designer Wall, Ульяна, Ванильная и гости: 7


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

Перейти: