 |
Microsoft Internet Explorer (IE)
|
|
|
|
Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. Версия IE7 по удобству приблизилась к своим давним конкурентам, в частности, появились вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения в IE приходится порой отдельно отлаживать код специально под него.
Где скачать: http://www.microsoft.com/rus/windows/ie/default.mspx
Opera
Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей, повышающих комфортность работы с сайтами.
Где скачать: http://ru.opera.com/download/
Safari
Браузер разработан компанией Apple. Этот браузер встроен в iPhone и операционную систему MacOS на компьютерах Apple. Также имеется версия под Windows. 26 июля 2012 г. неофициально было объявлено о прекращении поддержки и выпуска программы для ОС семейства Windows.
Где скачать: http://www.apple.com/ru/safari/
Google Chrome
Браузер, появившийся на рынке в конце 2008 г. Разработан компанией Google.
Где скачать: http://www.google.com/chrome?hl=ru
Справочник HTML и CSS.
Все вопросы, связанные с HTML и CSS, обычно адресуются любимому поисковику. Но начинать поиски мы советуем с известного и полезного сайта: http://htmlbook.ru/
На этой странице - http://htmlbook.ru/html — находится справочник тегов HTML.
На этой странице - http://htmlbook.ru/css — находится справочник свойств CSS.
Кроме того, на этом сайте есть масса рекомендаций и «рецептов», позволяющих решать ту или иную задачу. К статьям часто оставляют комментарии, где тоже можно почерпнуть полезную информацию, так что не стоит их игнорировать.
Валидатор.
Валидатор — это средство проверки документов на соответствие веб-стандартам и выявления ошибок в коде*. Код веб-страницы должен подчиняться определённым правилам, которые называются спецификацией, её разрабатывает W3 Консорциум (www.w3c.org) при поддержке разработчиков браузеров.
|
|
|
Сделать проверку документа можно по адресу: http://validator.w3.org/
Валидатор осуществляет проверку документа либо находящегося непосредственно в сети, либо загруженного с компьютера файла, либо нашего кода, вставленного в специальное поле. На выше указанном сайте этим трём способам соответствуют три вкладки.
Графический редактор.
Для работы мы используем Adobe Photoshop. Если в проекте используются несистемные шрифты, их помещают в одну папку с проектом. Чтобы файл .psd открылся корректно, рекомендуем для начала установить эти шрифты.
Примечание. Иногда в папке с проектом содержится файл с комментариями; если таковой имеется, необходимо прочитать его перед началом работы.
Если при открытии файла .psd, программа задаёт вопрос о цветовом профиле, который следует использовать, выбирайте цветовой профиль sRGB. В этом случае при использовании одних и тех же числовых значений цвет на макете совпадёт с цветом на странице.
Перед началом работы необходимо поместить в рабочую область нужные для работы панели: Абзац, История, Комментарии, Параметры, Символ, Инструменты.
Помимо этого в работе понадобится включать и отключать направляющие (на макете они образуют что-то наподобие модульной сетки); горячие клавиши: Ctrl+;.
Кроме того, нужно включить линейки; горячие клавиши: Ctrl+R, а для выбора единиц измерения нужно щёлкнуть по линейке правой кнопкой мыши и выбрать пикселы.
Каждый элемент на макете расположен на отдельном слое, каждый слой назван соответственно своему назначению, а слои, относящиеся к одному логическому блоку, сгруппированы в папки. Порядок слоёв соответствует порядку расположения соответствующих блоков на странице.
|
|
|
Обратите внимание: некоторые слои скрыты.
Это может быть сделано случайно (дизайнер не удалил лишние слои, а просто скрыл их и забыл; в этом случае ориентируйтесь на файлы .jpg с изображениями страницы, которые находятся в папке с проектом: то, что на них изображено, должно быть свёрстано).
А может быть и специально. В каких случаях?
1. Практически всегда на сайте присутствует логотип. Для того, чтобы логотип не выглядел размытым, на сайт помещают изображение с логотипом в 1,5-2 раза больше, чем оно должно быть, а затем в свойствах задают размер, до которого данное изображение должно сжиматься.
Чтобы изображение с увеличенным логотипом не потерялось, его внедряют в файл с макетом. Слой logo_large как раз содержит увеличенный логотип. Слой logo_real_size содержит логотип такого размера, какого он в итоге должен получиться.
2. Макет по сути — статичная картинка. На самом же деле мы знаем, что веб-страница — это динамичный объект, т.е. что-то при каких-то условиях на нём меняется (цвет ссылок, кнопки при наведении и т.п.). Иногда такие изменения требуют дополнительных изображений (например, сложный фон кнопок, который вставляется на страницу как картинка), а иногда — просто некоторой информации.
Если требуются дополнительные изображения, они помещаются на макет отдельными слоями (или папками) с указанием состояния, для которого используется данный внешний вид (hover — при наведении, active — при нажатии).
Иногда информация о том, как ведёт себя тот или иной элемент на сайте, содержится в самом названии слоя:
Либо она содержится в комментариях. Комментарии располагаются непосредственно на макете в виде иконок, текст комментария отображается на панели Комментарии.
Комментариев на макете может быть несколько. Чтобы переключиться к другому комментарию, нужно просто щёлкнуть по нему левой кнопкой мыши. Иконка активного комментария — с карандашом.
Какие инструменты помогут в работе?
Пипетка.
Всем известный инструмент, который позволяет «захватить» цвет пикселя с активного слоя.
|
|
|
Полученный цвет отобразится на цветовой панели. Чтобы узнать информацию о цвете, нужно дважды щёлкнуть левой кнопкой мыши по нему. Отобразится окно Палитра цветов.
Цвета могут задаваться несколькими способами*. Наиболее распространённые:
· с помощью шестнадцатиричного hex-кода, который начинается с символа решётки: #abdd67;
· с помощью указания числовых компонент RGB: rgb(171, 221, 103);
· с помощью указания числовых компонент RGB и прозрачности альфа-канала: rgba(171, 221, 103, 1); значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
· по названию: green;
Линейка.
Линейка на панели инструментов находится в одной категории с инструментом Пипетка, который отображается по умолчанию. Чтобы переключиться на Линейку, нужно нажать на инструмент Пипетка левой кнопкой мыши и удерживать до появления списка инструментов, из которого выбираем Линейку.
Чтобы измерить какой-либо объект линейкой, нужно просто поставить в нужную точку один конец линейки, и, не отпуская кнопки мыши, провести в другую точку. Информация об измерениях отображается на панели Параметры под главным меню: координаты начальной точки, ширина, высота, угол.
Прямоугольная область.
Более удобен для измерений инструмент Прямоугольная область. В версии CS6 при выделении появляется подсказка с шириной и высотой выделения.
Чтобы снять выделение, используйте горячие клавиши Ctrl+D.
4. Панели инструментов Символ и Абзац.
На макетах сайтов мы стараемся использовать стандартные шрифты, т.к. это значительно облегчает процесс разработки. Причина ещё и в том, что зачастую браузеры не используют сглаживание шрифтов, а нестандартные шрифты без сглаживания могут выглядеть убого.
Тем не менее, помимо шрифтового написания, в параметрах шрифта указывается цвет, кегль (размер) и начертание. А для абзацев мы можем указать межстрочный интервал и выравнивание.
Информацию о тексте мы можем узнать как раз из панелей Символ и Абзац.
|
|
|
Примечание. В Photoshop за единицы измерения кегля шрифта приняты пункты (1 пункт равен 1/72 дюйма). Однако пункты в Photoshop и CSS имеют разные размеры. Поэтому размер текста зачастую приходится подбирать «на глаз». Хотя всё дело зависит от выбранных единиц измерения*.
Примечание. Практически равны по размеру пункты Photoshop и пиксели CSS. Если мы указываем размер шрифта в пикселях, числовые значения кегля можно брать прямо с макета.
5. Преобразование слоя (группы слоёв) в смарт-объект.
Условно смарт-объект — это контейнер с содержимым. Редактирование смарт-объекта происходит как редактирование отдельного файла. Для того, чтобы преобразовать слой (группу слоёв) в смарт-объект, нужно щёлкнуть по слою правой клавишей мыши и в контекстном меню выбрать Преобразовать в смарт-объект.
В результате у слоя появится специальный значок.
Чем удобно использование смарт-объектов? Чтобы ответить на этот вопрос, щёлкнем дважды левой клавишей мыши по смарт-объекту в списке слоёв. Смарт-объект откроется отдельным файлом, который можно редактировать. Причём появится он уже обрезанным.
Примечание. Иногда смарт-объект обрезается не чётко по своим границам. Чтобы убедиться в том, что изображение обрезано чётко, нужно его сильно увеличить.
Обратите внимание: случается так, что на плашках с краю имеются полупрозрачные пиксели. Если эти пиксели не относятся к тени объекта, то их нужно закрасить, дабы на сайте всё выглядело качественно.
Для этого удобнее всего использовать
Карандаш.
Карандаш находится в одной группе с инструментом Кисть. Отличается карандаш от кисти тем, что первый рисует строго по пикселям. На панели Параметры можно настроить размер кисти. Жёсткость и непрозрачность установите на 100%.
Рамка.
Инструмент Рамка позволяет производить обрезку. По периметру рабочей области появляется специальная рамка. Передвигая стороны, подгоняем под область обрезки (аналогично инструменту Прямоугольная область, здесь появляется подсказка о ширине и высоте). Нажимаем Enter.
Примечание. Обрезать (кадрировать) можно и с помощью инструмента Прямоугольное выделение. Для этого нужно выделить нужную область, а затем выбрать меню Изображение > Кадрировать.
Ещё темы для изучения:
Виды селекторов CSS (селекторы элементов, селекторы по id, селекторы классов, контекстные селекторы, дочерние селекторы).
Свойство Float.
Примечание.
[1] Мы не рекомендуем использовать визуальные редакторы, т.к. они, во-первых, создают неоптимизированный код с массой «мусора», а во-вторых, не способствуют глубокому изучению HTML и CSS. Когда вы пишете код самостоятельно, ручками, он получается чистым, понятным, а вы укрепляете свои знания;)
|
|
|
[2] Более подробно о HTML — в самоучителе: http://htmlbook.ru/samhtml
[3] Более подробно о CSS — в самоучителе: http://htmlbook.ru/samcss
[4] Некоторые источники отождествляют понятия блоков и слоёв, например, как здесь: http://htmlbook.ru/content/verstka-s-pomoshchyu-sloev, - однако во избежание возникновения путаницы условимся называть блоками то, что заключено внутрь тега <div>, а понятие слоя оставим для тега <layer> браузера Netscape.
[5] Различают ещё такие структурные элементы, как фреймы. Однако на сегодняшний день они устарели и не используются.
[6] О плюсах и минусах табличной вёрстки написано немало, более подробно можно узнать здесь: http://htmlbook.ru/content/preimushchestva-i-nedostatki-tablits
[7] Существует выражение: «Пустое пространство продаёт» («White space sells»). Имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к веб-сайтам.
[8] Подробнее о единицах измерения, которые используются при вёрстке: http://htmlbook.ru/content/edinitsy-izmereniya
[9] Более подробно об этой теме: http://ru.wikipedia.org/wiki/Адаптивный_веб-дизайн
* Более подробно об этой теме: http://htmlbook.ru/samhtml/validatsiya-dokumentov
* Более подробно об этой теме: http://htmlbook.ru/css/value/color
* Более подробно об этой теме: http://htmlbook.ru/content/edinitsy-izmereniya
|
|
|
