Курс веб-дизайнера и верстальщика от MoneyMaster-2

Продолжаю главную тему блога - самообучение. В прошлый раз мы рассмотрели первую книгу Владимира Бывалова, теперь изучим вторую.

Книга 2: Курс веб-дизайнера и более глубокое освоение HTML

Книга рассказывает о веб-дизайне от составления макета в Adobe Photoshop, нарезки заготовки в Adobe ImageReady до вёрстки html в Adobe DreamWeaver. Также в качестве дополнения рассматриваются вопросы создания анимированных баннеров, работы с FTP и др. Что порадовало, так это то, что книге рассмотрена как табличная, так и блочная вёрстка.

Итак, приступим к изучению данного мануала. Я хотел опубликовать подробные примеры созданных по мотивам уроков картинок и страниц, однако автор запрещает даже частичную публикацию своей книги, поэтому за примерами можно стукнуть в ICQ 380540двести. В тексте я буду указывать, где должны быть примеры, однако доступ к ним получат не все.

Разновидности сайтов.

В начале автор рассматривает разновидности дизайна сайтов и наиболее распространённые схемы построения. Также попутно мы учимся делать "резиновый" дизайн. Имеется в виду, дизайн, который не зависит от разрешения монитора. То есть, при растяжении окна, растягивается и шаблон сайта. В конце урока каждый ученик будет иметь 2 подобных примера реализации эффекта "резины": примеры 1-2.

Основы дизайна.

Далее автор знакомит читателя с основами дизайна. Рассказывает о тёплых и холодных цетах, триколорах и наиболее подходящих цветовых схемах, контрасте...

Adobe Photoshop в примерах.

Вначале автор знакомит читателя с программой и её особенностями.

Далее шаг за шагом читатель вместе с автором создаёт свой дизайн. Каждое действие, каждая мелочь описана на пальцах. Автор знакомит читателя с программой Photoshop на практике. Показывает сначала инструмент или функцию, действие, а потом результат, попутно объясняя смысл происходящего. Так постепенно создавая дизайн своего сайта вы будете знакомиться с Фильтрами, Основными инструментами, Слоями.

Чему конкретно вы можете научиться? Иметь понятие, что такое Photoshop, как с ним работать, знать основные (точнее, нужные) функции, а также сможете создавать довольно неплохие дизайны сами. Автор публикует более менее универсальный алгоритм создания дизайна.

Я также нарисовал заготовок за время изучения урока по программе Photoshop (пример 3). И заверю вас, это вовсе не трудно, зная примерную последовательность действий.

Чему мы научимся (в общих чертах):

• работе со слоями (создание, комбинирование, редактирование)
• работе с форматированием (порезка, выделение, рисование)
• работе с текстом (форматирование)
• работе с цветом (форматирование контраста, цвета, заливка, градиент)
• работе с объектами (трансформирование, изменение свойств)

Последовательность создания заготовка я также не могу открыть. Для этого нужно ознакомиться с книжкой.

Порезка шаблона.

Далее вам предстоит научиться выполнять порезку макета на куски с помощью программы Adobe ImageReady. Кстати, программа выдаёт после порезки готовую html страницу, состоящую из кусков картинок.

Правка HTML.

После порезки можно приступить к правке html-кода страницы. Для этого в уроке используется программа DreamWeaver. Однако можно воспользоваться и обычным блокнотом.

На выходе из ImageReady и правки пары тэгов наш пример выглядит так, как html страница, состоящая и определённого количества картинок, оптимизированных для размещения в Internet (пример 4). Картинки лежат в отдельной папке images.

Далее оттачиваем html код. Режем верхнее меню и футер, добавляем текст, добавляем боковое меню и оснащаем наше творение цветами, бэкграундом и всяческой красотой (пример 5).

Однако наш сайт свёрстан одной таблицей, что грозит всяческими осложнениями в дальнейшей жизни. При не очень умелом подходе картинки будут разъезжаться, таблицы ломаться, а также при изменении одной части нашего сайта придётся обязательно редактировать и остальные. К примеру, изменив ширину бокового меню, получим вот такую некрасивость, как съехавшую влево шапку сайта (пример 6). Поэтому далее мы учимся делать сайт состоящий из нескольких таблиц, чтобы избежать подобных казусов (пример 7).

Конечно, мы получаем ещё не полноценный сайт, однако это уже готовый шаблон для добавления контента, ссылок в меню и прочего. Ну и конечно следовало бы немного приукрасить наше творение (добавить отступы и т.д.). Однако основное сделано.

CSS и блочная вёрстка.

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

После первого же урока можно приукрасить свою страничку (пример 8). Мы всего лишь добавили таблицу стилей CSS, а также некоторые теги (заголовки, ссылки и параграф).

Далее идёт более подробное описание, как вставить таблицу CSS в html страницу, и какие операторы можно использовать. Ничего секретного. Тоже можно прочитать на любом сайте, посвящённом каскадных таблиц в разделе "Основы". Однако этот курс ориентирован на новичков, поэтому всё уместно.

После более детального изучения CSS, можно получить понятие, и сразу же попрактиковаться в создании своего первого блочного дизайна (Пример 9).

Вот собственно и всё. Далее идут бонусные статьи о создании анимированных баннеров, использовании FTP, наиболее частых ошибках в дизайне, дополнения у разделу о Photoshop, а также программы, бонусы, шрифты, фильтры, шаблоны. В общем целая куча всего.

Подводим итоги: Что можно сказать о данном ебуке. Для начинающего она очень даже будет интересна. Глубоких знаний знаний вы не постигнете, однако пинок под зад получите. И если вам действительно интересно изучение веб-дизайна и создание веб ресурсов, то курс не пройдёт для вас зря. Вы получите основы и стремление постигать и совершенствоваться. Напоминаю: данный курс стоит 24.95 $. Стоит ли он своих денег? Решать не мне. Каждому он будет полезен по разному. Если у вас уже есть понятие о тех вещах, которые там изложены, пожалуй не стоит покупать. Если же вам лениво искать информацию самому, то курс поможет вам понять основы. Но учиться дальше предстоит вам самим.

Далее мы будем рассматривать курс видео уроков от Евгения Попова. Это будет более серьёзный опус и потребует на обучение не один день. Также я постараюсь выкладывать статьи по SEO и манимейкерской тематике.

--------------------

Хочу обратить внимание на дайджест полезняшек от Virtual Lab.

А также напоминаю, что Vitashok предлагает сносить нафиг блогролл.

Также хочу упомянуть сервис, который предлагает SEO продвижение статьями. Сервис предоставляет услуги по написанию, размножению и размещению статей в сетках.