Практика вёрстки

Еще кое-какая информация по вёрстке.

Начало тут и тут.

Чтобы при создании сайта отменить все стандартные настройки стилей, создаётся документ reset.css и сохраняются в папку css. В него вставляется стандартный код (есть в интернете). А в файле стиля style.css прописывается наверху следующая команда: @import url (reset.css) ;

PHOTOSHOP

  • Для создания элементов для сайта из макета необходим фотошоп. С помощью него мы можем измерять размеры элементов (инструмент «линейка», для ровной линии измерения удерживаем Shift), узнавать наименования цветов («палитра цветов»). Чтобы определить нужный цвет объекты, используем инструмент «пипетка». Для того, чтобы вырезать определённый элемент, используем «слои» (находятся в наборе инструментов с правой стороны). Там находим нужный нам элемент. (При необходимости объединяем группу). Для выделения элемента зажимаем клавишу ctrl, наводим на иконку слоя и кликаем по ней. Копируем его с помощью комбинации ctrl-c Создаём новый документ ctrl-n. Вставляем туда элемент ctrl-v. Отключаем фон в блоке справа, нажав на «глаз». Сохраняем картинку: файл-> сохранить для Web alt-shift-ctrl-s… формат сохранения png-24 (т.к.не используется фон). Также обязательно должна стоять галочка около  «Прозрачность». Чтобы выделить нужные слои из списка, используем ctrl. Кликаем правой кнопкой по ним и объединяем («объединить слои»)
  • Как выбрать формат изображения для сохранения:

• png-24 если используются прозрачные слои (нет фона)
• jpg если используется большое изображение. Качество: высокое (60).
• jpg или png-8 сохраняем маленькое изображение.

-При сохранении изображения используются только латинские буквы, цифры, «-«,»_».
-Для того чтобы узнать размер изображения заходим во вкладку в верху Изображение->размер изображения…
-Для того, чтобы узнать шрифт на макете необходимо выбрать инструмент «Горизонтальный текст», который находится слева, и кликнуть по нужному участку текста. Слева  наверху программы отобразится название шрифта.
-Для определения цвета элемента, кликаем на элемент, используя инструмент «Горизонтальный текст» и кликаем по иконке «задание цвета».
-Чтобы убрать выделение с логотипа в фотошопе используется ctrl-d.
-Чтобы найти нужный элемент в слоях, нужно зажать alt и кликнуть по элементу правой кнопкой мыши.

*Не сохранять макет в фотошопе после работы, иначе нарушим изначальный макет, задуманный дизайнером.

Направляющие. Чтобы скрыть: ctrl-h, чтобы отобразить: ctrl-h. С помощью инструмента перемещения (слева наверху) можно двигать их. Чтобы создать новую направляющую, кликаем по левой или верхней линейке и тянем её вправо(вниз). Чтобы убрать, нажимаем на неё и перетаскиваем до линейки.

-Чтобы включить линейки, зайти в меню «просмотр»(наверху) -> линейки. Или ctrl-r
Также чтобы выбрать значения линейки пикселы, кликнуть по ней правой кнопкой.

-Комбинация ctrl+alt+shift+e создаёт слой, который объединяет все слои. Данный способ подходит, когда мы вырезаем картинку без всякой прозрачности.

*Чтобы выровнять меню в одну линию (не по вертикали, а по горизонтали) прописываем: #menu(селектор) ul li(значение будет применено для всех тегов li, находящихся внутри тега ul) {float: left;}. Чтобы меню было выровнено по правому краю дополнительно задаем #menu {float: right;}

*При создании логотипа необходимо всегда его делать ссылкой на гравную страницу. Для этого тег img оборачиваем тегом ссылки <а href=index.html></а>

*После вёрстки каждого элемента необходимо проверять страницу на кроссбраузерность.

Если ссылка является блочным элементом — есть ширины, высота, фоновый цвет, то необходимо указывать атрибут display(показ) со значением block.
display: block;

Очищающий блок: <div class=»clear»></div> вставляется в коде междуобтекающими  элементами
.clear {
clear: both;
} применяется для того, чтобы избавиться от обтекания.

ПСЕВДОКЛАСС

#название индификатора ul li:first-child {
} означает, что свойство будет применено только для первого элемента списка.
last-child для последнего элемента (только с версии css 3) — не для всех старых браузеров кроссбраузерность.

УСЛОВНЫЕ КОММЕНТАРИИ

Если верстка не отображается в каком-то браузере, то для него создаётся отдельный стиль css.
Код прописывается в html-коде.
<!—[if IE 7]>
Код подключаемой таблицы стилей
<!—[endif]—>
Для каждого браузере, где отображается ошибка, пишем такой комментарий.
Также создается новый файл css с названием браузера.

ПРОВЕРКА НА РАЗРЕШЕНИЕ ЭКРАНА.

Использвем приложение web-developer в firefox. Выбираем наверху браузера значок с линейкой «resize» и 1024*768. Смотрим, не появилось ли окно прокрутки. Аналогично по окну firefox уменьшаем окна других браузеров и проверяем.

ПРОВЕРКА НА ВАЛИДНОСТЬ

На сайте: validator.w3.org
По адресу
Загрузив файл
Ввести код страницы
внизу будет список ошибок, если они есть.

РЕЗИНОВЫЕ САЙТЫ

min-width: 960px;
max-width: 1200px;

Область сайдбара задается фиксированной, а основной контент резиновым. Сначала в html указывается сайдбар, затем контент.

Подписывайтесь на обновления моего блога, чтобы не пропустить появление в нем новых статей!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *