Теперь открываем Дримвейвер, но фотошоп не закрываем.3-е и заключительное занятие: «Хайа, майа, нехуйня».
На этом занятии я продемонстрирую вам как следует нарезать
страничку на примере: «Punctum_project» (работа одного из вас). Это единственная работа,
которая достойна внимания, из тех, что вы прислали. К сожалению. Думал, что
общий уровень выше будет, но это не важно, не собираюсь учить вас веб-дизайну
=) И так, продолжим.
Обычно кодер работает сразу в нескольких программах: фотошоп,
дримвейвер, браузер и прочие. Начнем с фотошопа. Открываем макет:
Я обозначил три зоны на которые можно разделить макет:
верхушка – лого с меню, середина – основной контент и низ – там, где копирайт.
Далее, прикидываю какие картинки буду «вырезать» из макета:
Это логотип, серый градиент возле меню, картинка из
портфолио, логотип внизу и главную картинку.
Начну с логотипа:
Коричневая обводка, это зона «выреза», ее
устанавливаем с помощью инструмента Слайс (клавиша -- К).
Потом два раза щелкаю по выделенной зоне и в открывшемся
меню вписываю название картинки: logo.
Далее, градиент:
Пипеткой (клавиша -- i) смотрю где заканчивается серый цвет и начинается ровный
черный, что позволит мне правильно выбрать высоту картинки градиента. Эта
картинка должна быть шириной в 1 пиксель, не больше! Снова двойной щелчок мышью
и там, где мы пишем название изображения, чуть ниже есть графа размер:
проверьте ширину, что бы она была 1 пиксель.
Едем дальше:
Выделяем одну из картинок портфолио (кодер не занимается
заполнением сайта и по этому не обязан вырезать все картинки как в данном
портфолио, по сути, ему нужен только размер этих картинок) и называем ее.
Дальше большая картинка.
По моим слайсам видно, как сразу хотел вырезать только
голову и отдельно шрифт, но так как дизер их поставил слишком близко, пришлось
вырезать картинку полностью.
Итог, таков:
Теперь сохраняем: «Сохранить для Веб», дальше выбираем jpg, качество «80» (об этом
читайте у Лебедева) и жмем ок, выбераемпуть куда сохранить и ниже:
Все, картинки мы вырезали и сохранили, они в папке images.
Теперь открываем Дримвейвер, но фотошоп не закрываем.
Создаем новый html-документ (сохраните в папке, где и картинки, например: папка
«сайт», а в ней должны быть хтмл-файл (index.html)
и папка «images»), и
сразу еще один – css-документ
(создайте папку «css» и
сохраните в ней этот файл под названием style).
В css-файл вставьте эти теги:
Это общие теги:
Мы хадали общий шрифт, удалили отступы по всем углам, и
задали фон сайту, а последний тег – img, говорит о том, что все картинки будут без рамок, то что
надо. Эту заготовку я скачиваю от сайта к сайту, вы можете скачивать их из
любых сайтов, а потом изменять под себя:
html {
font: normal 9px Arial, Helvetica,
sans-serif;
}
body {
margin:0;
padding:0;
background:#000;
}
img {
border:0
}
Вот что в итоге у меня вышло.
Едем дальше. В хтмл-документе вставляем тег «стиль» (то же «выдрав из
чужого сайта» и в перспективе изменив его):
@import url("css/style.css"); путь к файлу со
стилями уже выставлен.
Дальше добавляем тег «див» (на прошлом уроке писал про
кнопки на панели Дривейвера, там была кнопка для вставки дива):
Вставили див и прописали ему класс «all». Теперь переключаемся на цсс-файл и
создаем там класс Ол:
Ол – это ячейка в которой будет находиться весь сайт. Начнем
с точки, это признак «класса». В фигурных скабках пишем параметры:
.all {
width:800px;
margin:50px
auto;
}
Я задал ширину и отступы сверху и снизу по 50 пикселей. Про
эти и другие теги вы должны были прочитать на сайте хтмлбукру, так что их
расшифровывать не буду.
Дальше класс «топ»:
.top {
height:163px;
background:#000
url(../images/grad.jpg) repeat-x bottom;
width:800px;
display:block;
}
.top img {
float:left;
display:block;
}
Это для верхнего меню. Я задал верхушке высоту 163 пиксела
как и высота логотипа, фон черный и по низу картинка серого градиента (grad.jpg), которая тиражируется по оси Х,
ширина 800 пикселей, а картинкам (.top img) я приказал ровняться по левому краю.
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Untitled
Document
<!--
@import
url("css/style.css");
-->
Что за картинки? Это логотип, больше ничего в верхней части
сайта нет:
Попью чайку с ромашкой, вот что…
Дальше:
- autor
- newee
- process
- foundry
- oldworks
Див-ячейкав которой ячейки ли – это и есть верхнее меню.
Ниже этого пишем:
ED
Это что-то вверху страницы. Я решил что это ссылка.
По итогу все должно быть так:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Untitled
Document
<!--
@import
url("css/style.css");
-->
![]()
- autor
- newee
- process
- foundry
- oldworks
ED
Жмем Ф12 и смотрим результат в браузере. Если включился ИЕ,
то поменяйте браузер по умолчанию на ФФ. Это клавиша с изображением Земли и
стрелкой рядом.
Да же в Файер Фоксе смотреться будет галимо, ссылки
некрасивые синие и не на своем месте. Исправляем, в хтмле пишем:
![]()
- AUTOR
- NEWEE
- PROCESS
- FOUNDRY
- OLDWORKS
ED
Ну, называем Дим с тегами ли, тегом «меню», а див с ед
классом «ед», теперь переключаемся на цсс (клавиши контрал плюс таб). Там
прописываем классы для меню:
.menu {
}
.menu ul {
float:left
}
.menu ul li
{
float:left
}
.menu ul li
a {
margin:129px 25px 0 0;
border-bottom:#7f7f7f 13px solid;
color:#7f7f7f;
text-decoration:none;
display:block;
}
.menu ul li
a:hover {
margin:129px 25px 0 0;
border-bottom:#F00 13px solid;
color:#FFF;
text-decoration:none;
display:block;
}
.ed a, .ed
a:hover {
float:right;
margin:7px 9px;
color:#F00;
text-decoration:none;
}
.menu ul
--- тегу ул, который находится в теге див класса меню я приказал ровняться по
левому краю дива, дальше тег внутренний тег ли – он то же ровняется по левому
краю. Дальше тег А – это ссылка и тег А:ховер – это ссылка при наведении
курсором мыши. Маргин – это отступы, бордер-боттом – это рамка нижней части
тега А. При наведении на ссылку под ней появляется красный маркер: для этого я
прописал border-bottom:#F00 13px solid; а когда мышь не наведена серый фон: border-bottom:#7f7f7f 13px solid;
text-decoration:none; --- обязательно, что бы текст
ссылки не подчеркивался. Еще color:#FFF; --- это цвет текста в
ссылке, в данном случае белый. Пробуйте его прописать и заметите, что
Дримвейвер все подсказывает, научитесь пользоваться этими подсказками и будете
кодить за считанные часы.
Дальше класс «ЕД». Есть вопросы? Промеряем, нажимаем Ф12 и
смотрим только в ФФ!
Делаем середину:
Тег «Центр». В нем еще два тега «левт» и «биг». Лефт – это
левое меню, а Биг – это большая фотка справа. Сразу делаю Биг:
.big {
float:right;
width:500px;
height:274px;
}
.big img {
width:500px;
height:266px;
display:block;
margin:-1px 13px 3px 0;
}
Равнение на право, ширина высота и отступы.
Див Левт посложнее. В нем див Грей (серый) и Копи (от слова
копирайт). Грей это серая часть меню, а Копи это белая с логотипом и линкой: PREPAREYOURSELF.
Прописываю теги для них:
.left {
float:left;
width:281px;
height:274px;
}
.grey {
background:#dedede;
width:281px;
height:239px;
position:relative;
top:-9px;
}
.links {
float:left
}
.links ul {
float:left;
padding:0;
margin-right:4px;
}
.links ul {
float:left
}
.links ul
li a {
background:#c4c4c4;
width:38px;
height:13px;
text-align:right;
color:#FFF;
text-decoration:none;
display:block;
margin-bottom:2px;
}
.links ul
li a:hover {
background:#f00;
width:38px;
height:13px;
text-align:right;
color:#FFF;
text-decoration:underline;
display:block;
margin-bottom:2px;
}
.imger {
float:left;
margin-top:5px;
}
.imger img
{
border:#646464 1px solid;
display:block;
height:47px;
width:47px;
float:left;
margin:4px;
}
.imger
a:hover {
background:#F00;
border:1px #F00 solid;
height:37px;
width:37px;
display:block;
}
.copy {
clear:both;
}
.copy p {
float:right;
text-align:right;
padding:0;
margin:0;
}
.copy p a {
color:#F00;
text-decoration:underline;
}
.copy p
a:hover {
color:#F00;
text-decoration:none;
}
.copy img {
float:left;
margin:0 0 6px 5px;
}
Вначале класс Лефт, потом Грей, потом Копи. Копи: равнение
по левому краю, для тега Р в диве Копи задаю то же равнение по левому краю и
обнуляю все возможные отступы (у тега Р по умолчанию есть отступы). Потом
прописываю для ссылок цвет шрифта, подчеркивание до новедения. Так же отступ
для логотипа: margin:0 0 6px
5px;
Дальше класс Грей. В него в хтмеле вставляю див с классом линкс
(меню 01. 02 .03) и див с классом imger, в нем фотки-линки. Занимаюсь линкс:
.links {
float:left
}
.links ul {
float:left;
padding:0;
margin-right:4px;
}
.links ul {
float:left
}
.links ul
li a {
background:#c4c4c4;
width:38px;
height:13px;
text-align:right;
color:#FFF;
text-decoration:none;
display:block;
margin-bottom:2px;
}
.links ul
li a:hover {
background:#f00;
width:38px;
height:13px;
text-align:right;
color:#FFF;
text-decoration:underline;
display:block;
margin-bottom:2px;
}
Отступ по левому краю, убираю маркеры:
li {
list-style:none;
}
Прописываю это в самом верху.
И стилизую линки.
Дальше тег Имджер. Там немного посложнее. Заимствую цсс и
яваскрипт из сайта drive.ru, там в статьях про
определенные машины, внизу есть галлреи воллпейперов, при наведении на которые
затемняется фотка – это мне и нужно, в макете, который нарезаю похожий принцип,
при наведении появляется красный полупрозрачный фон с рамкой.
Заебался я писать этот урок, уже несколько раз начинал и по
чут чуть. Буду публиковать, если что, пишите, я уже на месте, т. е. в Минске,
так что буду мобильно отвечать, постараюсь по крайней мере. Что еще. А,
планирую периодически всякие фичи выкладывать, например обманки для ИЕ и
прочее.
А, по ФФ забыл рассказать, зачем вы его себе ставили и плагин
веб-девелопер в придачу? Для удобства верстки конечно. При работе в ФФ нажмите
контрл + шивт + F и откроется девелопер, а теперь тыкайте курсором Миши на ту чать
экрана, где табличка «поехала» и увидите ее класс и уровень ветви. ИЕтаб
ставили что бы из ФФ сразу переключаться на ИЕ, кнопка внижу справа в браузере,
иконка ФФ, на нее нажмите и откроется страница уже в ИЕ, но оболочка ФФ
останется. Кароче удобно очень.
А домашнее задание такое, в макете есть картинки-линки, при наведении на них появлется полупрозрачный красный фон, в ФФ он работет, а в ИЕ нет, почему? Жду сделанные работы.
Сверстанный пример на: http://www.weblancer.net/users/artby/portfolio/234441.html
Сделайте все сами, а потом сравните, и исправьте в моей работе ошибки для ИЕ.
2-е занятие: «дрым, дрым».
Прошла неделя, кто не успел сделать и сдать макеты думают как быстро летит время и я с ними согласен =)
Скажу, что видел только две работы домашние, а две не смог скачать, завтра на работе точно скачаю, все же скорость повыше будет. Adobe Dreamweaver CS3, про начало работы в этой программе будет идти речь на этом уроке. Немного познакомитесь, а на третьем уроке уже будем «резать» каждый свой макет (комменты по домашним работам в 3-й статье).
Итак, открываем прогу:
Такая картина должна перед вами быть. Мы будем пользоваться только двумя ссылками: «html» и «css». Жмем на первую и получаем:
Обратите внимание на эти две строки*, ваши должны быть идентичными моим. Если не сходятся, жмите: Edit/Preferences:
Появится данное окно, в котором и выставите необходимые параметры**. Дальше. Меню, какие кнопки будем использовать. Знаете, эта прога отличается тем, что в ней используется мало клавиш клавы:
Так, hyperlink — это не ссылка на молодежный конкурс, это кнопка позволяет делать ссылку (вставляет тег А). table — вставляет таблицу (table, tr, td). insert div tag — вставляет div. images — вставляет картинку. соmment — создает комментарий. Едем дальше:
text filed — вставляет input, textarea — вставляет textaera, checkbox — вставляет чекбокс (checkbox), buttom — вставляет кнопку.
Для наиболее удобной работы на первое время, лучше используйте режим split, он позволяет видеть часть кода и часть результата одновременно. Подробнее буду писать в третьем уроке.
«Земля» — эта клавиша позволяет переключиться на браузер, в котором будет виден результат работы.
А так выглядит страничка с css-документом на начальном этапе:
* и ** две строки и необходимые параметры (речь об одном и том же): верхняя — доктип, про него почитаете перейдя по ссылке. А вторая строка кодировка. У вас бывало когда-нибуть, что вы видели на сайте вместо текста абра кадабру:
Все, доделывайте свои макеты, присылайте кто не прислал к этой субботе. Знакомьтесь с программой и читайте про html and css, а на следующем уроке мы будем наризать и верстать каждый свой макет и учиться правильно пользоваться тегами (htmlbook.ru). Good week.
________________________________
1-е занятие: «фотожаба».
Adobe Photoshop, именно в нем мы делаем дизайн-макеты для кодеров. Хочу затронуть тему «чистоты» макета: какой psd будет наиболее идеальным для верстальщика. Для примера беру свой файл (для edem.by):
Начнем со слоев. Во-первых они должны быть названы (я рекомендую на английском*), во-вторых находиться в папках, которые то же названы логически:
Поясню. Данный макет представляет собой классический вариант компановки информации на сайте (в три столбца). Макет имеет «шапку» (header**), «центр» состоящий из левого меню, правого меню (колонки) и основного текста в середине («контент»***), а еще зону копирайтев (footer****).
На изображении выше во вкладке Layers видна структура папок логически названных (сверху в низ): header, right, left, content, footer and bg (*bg, в данном случае — background, т. е. фон).
Такой же логике следует исходить при названии layer-ов:
Априори, логические названия лэиров и папок, заметно увеличивает скорость работы кодера, да и вашу, когда спустя некоторое время необходимо будет что-то подправить.
Поехали дальше. Шрифт.
Старайтесь использовать в своих макетах стандартные шрифты, которые стоят по умолчанию в винде. Во-первых, у кодера может не оказаться такого шрифта на ПК. Во-вторых, необычные шрифты будут дико смотреться в браузерах пользователя. В-третьих, у посетителя сайта может вообще не быть такогих шрифтов. Чаще всего используют: Вердану, Тахому, Ариал, Таймс Роман и т. д. (*еще буду писать про шрифты).
Старайтесь выключать сглаживание шрифтов, замечали же, что в браузерах они не сглаживаются (имею ввиду обычный тескт) (*про сглаживание шрифтов еще буду писать).
Не растягивайте шрифты по ширине и высоте, а если ситуация безвыходна, делайте этот шрифт картинкой.
В последнее время часто заказчик «со старта» заказывает раскрутку сайта. Это значит, что практически 100% текста в макете будет и текстом на сайте, т. е. красиво написанный текст в заголовке, не обязательно такой будет в реалиях (*про макеты для sео***** еще поговорим).
Дальше цвет. Советую использовать палитру для web-разработчиков:
Почему, потом то же писать буду. Сейчас лишь возьмите на вооружение.
Ну и на последок, оставляйте за собой пометки:
Есть такой инструмент Noute. Да же если вы с кодером работаете не удаленно, а в одном офисе, лучше написать и дальше заниматься другими макетами. Что там писать? Все что угодно. От: «я отрисовал и иду в столовку, если что звони: 6-044-033», до «я отрисовал вкладки „вход", „забыли" и т. п., смотри в папках».
Дальше. Какими инструментами пользуются кодеры.
а.) Линейка (клавиша i или shift+i несколько раз):
Ей меряют расстояние между объектами, отступы, толщину рамок и прочее.
Важно, что бы единица измерения была: пиксель.
Если забыли как узнать, напоминаю, правой кнопкой мыши жмете по линейке (ctrl+r).
б.) Слайс (буква k на латинской раскладке):
Этим инструментом «вырезают» нужные картинки из макета.
Перед этим обязательно каждую называют:
Делается это двойным щелчком левой кнопки мыши по нужной выделенной слайсом картинке.
Потом картинки сохраняют для web, нажимая: cntrl+shift+alt+s:
Можно сохранять каждую «вырезаемую» картинку по отдельности, а можно все сразу. Все сразу сохраняют редко, так как часто нарезанные имаджи не только jpg, но и gif, png.
Под каким именно форматом сохранять лучше, почитайте в инете на форумах. В поисковике можно набрать: оптимизация изображения для веб. Советую Лебедева.
Вот и все, на сегодня. А теперь домашнее задание. Сделайте самый лучший дизайн-макет исходя из того, что я писал выше (слои, папки, шрифты, цвета). Файлы должны быть в формате psd. В комментарии к статье пишите ссылки на размещенные фалы в инете. У кого возникнут трудности с размещение файлов, размещайте их на спецсайте и скидывайте линку. Главное не прикрепляйте к комментам прин скрины макетов, это бессмысленно.
Жду работы одиннадцати человек:
1.) V.K.
2.) Ольга Рузавина
3.) -=NickMan=-
4.) Тата
5.) Angelika
6.) Евгений
7.) Константин Геннадьевич
8.) Любовь Петрова
9.) scamp
10.) Shogo
11.) matvej
Макеты могут быть любой сложности, не обязательно такой как у меня, например, макет будущего своего портфолио можете нарисовать.
Если возникнут вопросы, пишите то же в «комментарии», что бы все видели.
________________________________
английский* — что бы избежать некорректного отображения названий, при сбое стандартных шрифтов, при вирусной атаке, вырабатываете универсальность, на случай работы с иностранными заказчиками.header** — в шапке сайта, как правило располагаются: логотип, слоган, иконки и необходимые ссылки.«контент»*** — основной текст сайта, им занимаются контент-менеджеры, копирайтеры и seo.footer**** — как правило там находятся: копирайты владельца, разработчиков, партнерев, баннеры и счетчики.
sео***** — ребята/технологии по раскрутке сайтов в нете.
________________________________
Ну, что. Вот список тех, кто записался на курс:
1.) V.K.
2.) Ольга Рузавина
3.) -=NickMan=-
4.) Тата
5.) Angelika
6.) Евгений
7.) Константин Геннадьевич
8.) Любовь Петрова
9.) scamp
10.) Shogo
11.) matvej
Людей больше чем я ожидал, но тем и лучше. Те, кто не попал в список до 10 декабря еще могут в него попасть, а для выше указанных курсантов я немного расскажу про дисциплину «Курс молодого кодера».
Занятия будут проходить так: я рассказываю то, что знаю, советую литературу, показываю примеры работ плохих и нормальных, задаю хоумворки, проверяю и комментирую. Все происходит в рамках этой статьи.
Рассказывать буду из личного опыта, может потом приглашу (возьму интервью) у лучших кодеров и дизайнеров. По литературе, ее вообще-то тьма в нете, так что, лиж бы у вас время было на чтение. Примеры работ: будут не только мои работы. Домашние задания: обязательны к исполнению, в этом и суть курса, что человек с неким опытом будет проверять ваши работы и показывать что хорошо, а что плохо. «Выкладывать» свои работы будете в «комментарии» к этой статье, что бы их видели другие люди и то же учились, видели мои комментарии и прочее. Про комментарии понятно, я их то же в статью для всех буду публиковать. К чему это я, не будет такого, что вы прислали работу мне на мыло, я откомментил и дальше. Все будет наглядно и общественно =)
Так, что еще.
Что бы не скучали до 10 числа, скачайте для Mozilla Firefox плагины: веб девелопер, файербаг, ИЕтаб.
Пока ждем 10 число, до встречи!
________________________________
Есть предложение устроить «Курс молодого кодера». Суть курса заключается в изучении мастерства веб-верстки. Он предназначен для дизайнеров, которые хотят научиться «нарезать» за собой макеты и верстать в html- и css-языках. Для наилучшего ускорения усвоения материала, советую оставить «свое желание об участии» в комментариях к этой статье (например: «хочу пройти эти курсы»). Буду ждать 3—5 человек, можно конечно больше =)
Пока собирается группа, мои пожелания:
Установите себе программы:
— Mozilla Firefox;
— Adobe Photoshop CS3 Professional (можно любую версию, но последняя самая удобная);
— Adobe Dreamweaver CS3;
— ABBYY Lingvo 11 (не обязательно, если английский знаете).
Почитать в интернете или сохранить на ПК литературу по:
— HTML/CSS;
— Adobe Photoshop;
— Adobe Dreamweaver.
Для ребят, которые оставили «желания» и для гостей, набор будет проходить до 10 декабря (некоторые люди посещают сообщества в будни). Кто не успеет, не страшно, любой посетитель блогнота сможет наблюдать за курсами и читать (смотреть) материалы. Единственное отличие, домашние задания для курсантов, которые я буду задавать и проверять.
Для ребят, которые уже записались: советую подписаться на обновления в блоге, что бы не пропустить начало занятий.
Прошу прощения у некоторых сообществ, в которых запрещены подобные объявления о курсах и прочем! Но почему пишу это тут? Потому, что за короткий период «жизни» сообщений о начале курса в данных сообществах, прямо в них люди записывались, а потом их вместе с сообщением удалили. Ребята, обращаюсь к вам. удаленным =) Запишитесь в комментариях сново, спасибо.
Пока все, удачи.
|
