Приветствую Вас Гость | RSS
Мой сайт
[CALENDAR_TITLE]
[CALENDAR]

Главная » » Регистрация » ВходПятница
29.03.2024
18:53
Главная » 2010 » Июнь » 14 » Курс молодого кодера.
14:36
Курс молодого кодера.
Теперь открываем Дримвейвер, но фотошоп не закрываем.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 декабря (некоторые люди посещают сообщества в будни). Кто не успеет, не страшно, любой посетитель блогнота сможет наблюдать за курсами и читать (смотреть) материалы. Единственное отличие, домашние задания для курсантов, которые я буду задавать и проверять.

Для ребят, которые уже записались: советую подписаться на обновления в блоге, что бы не пропустить начало занятий.

Прошу прощения у некоторых сообществ, в которых запрещены подобные объявления о курсах и прочем! Но почему пишу это тут? Потому, что за короткий период «жизни» сообщений о начале курса в данных сообществах, прямо в них люди записывались, а потом их вместе с сообщением удалили. Ребята, обращаюсь к вам. удаленным =) Запишитесь в комментариях сново, спасибо.

Пока все, удачи.
Категория: Новости | Просмотров: 579 | Добавил: fatint | Рейтинг: 0.0/0
Всего комментариев: 0
Меню сайта
Категории раздела
Інші рецепти [45]
Випічка [81]
Випечка [2]
Выпечка [6]
Гарніри [9]
Гарячі закуски [27]
Горячие закуски [3]
Десерти [27]
Десерты [5]
Другие рецепты [5]
Напої і коктейлі [14]
Основні блюда [92]
Основные блюда [9]
Салати [73]
Салаты [9]
Соуси-діпи-марінади [5]
Супи [17]
Супы [4]
Холодні закуски [23]
Холодные закуски [3]
консервуючи самі [3]
Новости [87]
Мини-чат
Наш опрос
Оцените мой сайт
Всего ответов: 10
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Поиск
Календарь
«  Июнь 2010  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
282930
Архив записей
Друзья сайта
  • Севастополь церковные трассы магазины.
  • Copyright MyCorp © 2024 Сделать бесплатный сайт с uCoz