Уроки сайтостроения для начинающих. Создание дизайна проекта по готовому макету
Начните с изучения языка html - это как бы азбука сайтостроения, не зная которую, в сети практически нереально. Очень хороший учебник html , с массой примеров, находится у меня на сайте.
Как второй шаг, изучите технологию CSS - каскадных таблиц стилей. Эта замечательная технология в совокупности с html творит просто чудеса в сайтостроении.
Когда вы уже разберетесь с html и css , Вам останется только автоматизировать процесс написания html и css кода. Для этого существуют так называемые визуальные редакторы, одним из лидеров среди которых является Adobe Dreamweaver . Дело в том, что работая с такой замечательной программой как Adobe Dreamweaver, сайтостроение проходит значительно легче, Вы экономите просто нереальное количество времени. То, что в блокноте пишется за час, в этой програмке можно сделать за минуту.
Чтобы максимально быстро разобраться с этой программой, скачайте обучающий видеокурс по Adobe Dreamweaver.
С этими знаниями, Вы уже можете сделать себе статический сайт. Если же Вы хотите, чтобы Ваш сайт был живой, т.е. с возможностью комментирования, с регистрацией и т.п. - то здесь Вам поможет готовый движок для сайта. Я специально сделал . Joomla - это один из самых популярных движков в мире. Поэтому можете смело изучать и делать полнофункциональные сайты. Движок очень просто в изучении! Если Вам нужно быстро сделать сайт, не особо разбираясь что там к чему, то Joomla Вам подойдет.
Ну вот в принципе и все на первых порах. Ну а дальше, все зависит от Вас. Как говорится "совершенству нет предела" .
Двигайтесь от первого пункта - до последнего, и будет вам счастье...
Практически все авторы книг в этой подборке в один голос утверждают, что нет ничего проще, чем создать сайт в интернете. Здесь можно найти множество советов о том, как создать эффективный, экономичный, технически правильный и просто красивый веб-сайт. Много внимания уделено основам HTML и CSS, а также рассматриваются всевозможные способы анализа веб-сайта.
1. Якоб Нильсен, Кара Перниче «Анализ веб-сайтов по движению глаз»
Авторы разработали и применили на практике строгую методологию исследования удобства использования веб-сайтов на основе технологии отслеживания движений глаз, чтобы проанализировать около 1,5 млн. фиксаций взгляда пользователей при просмотре веб-сайтов. Кроме того, авторы дают ценные рекомендации по компоновке веб-страниц, навигационных меню, отдельных элементов интерфейса сайта, выбору изображений и размещению рекламы. /2010 год. Купить на Озоне.
2. Дик Мак-Клелланд «Уроки мастерства Adobe. Приглашение к дизайну»
В книге делается попытка пролить свет на искусство дизайна на примерах работ семи ведущих практиков в этой области, выбранных компанией Adobe Systems. Вы познакомитесь с индивидуальными приемами творчества художников, увидите, как они применяют свои навыки на практике. Отличный дизайн зависит не от применения инструментов и средств. Мощные приложения могут облегчить работу, но без глубоких идей и таланта инструменты стоят немного. /2003 год. Купить на Озоне.
3. Скотт Митчелл «Секреты Web-дизайна»
В этой книге вы увидите, насколько просто создать собственный Web-сайт. Используя предлагаемые автором книги шаблоны профессиональных Web-сайтов и бесплатный редактор Web-страниц Mozilla Composer, вы сможете быстро и легко переделать шаблоны под индивидуальный Web-сайт. Просто укажите нужные элементы и щелкните по ним мышью! С помощью редактора вы сможете легко отредактировать, добавить или удалить страницы, изображения и текстовые заголовки. /2007 год.
Купить на Озоне.
4. Чарльз Уайк-Смит «Стильный сайт с помощью CSS»
Книга посвящена применению CSS для создания внешнего облика сайта. Ее структура чрезвычайно проста и логична: первые главы посвящены созданию отдельных компонентов сайта с применением CSS. В последней главе все эти компоненты сводятся в единое целое — читателю предлагается подробная инструкция по их объединению в готовый к работе сайт. В книге содержатся примеры кода компонентов сайта и вариантов разметки, которые можно использовать как заготовки для своих целей, внеся в них необходимые изменения. /2007 год. Купить на Озоне.
5. Пол Макфедрис «Создание Web-страниц»
Данная книга поможет начинающим веб-мастерам освоить не только азы мастерства, но научит ориентироваться в новых разработках в этой постоянно развивающейся области информационных технологий визуальных сред. В книге представлены полезные советы автора по созданию веб-страниц, очень доступно объяснены основы HTML, а приводимые примеры помогут вам правильно разместить рекламу и преодолеть проблемы, связанные с созданием своих домашних страниц. /2007 год.
Купить на Озоне.
6. Келли Гото, Эмили Котлер «Веб-редизайн»
Основной постулат этой книги — веб-дизайн находится в постоянном движении со временем. Веб-дизайнер экстра-класса Келли Гото и ее соавтор Эмили Котлер делятся своим опытом, предлагая эффективный подход к процессу веб-редизайна, учитывающий как приоритеты бизнеса, так и интересы хорошего дизайна. Авторы сосредотачивают внимание на пересечении этих сфер, попадая прямо в «яблочко». Каждая глава содержит наглядный пример, иллюстрирующий ключевые стадии процесса. /2006 год. Купить на Озоне.
7. Кэрри Бикнер «Экономичный Web-дизайн»
Эта книга о том, как создать профессионально выглядящий веб-сайт при ограниченных финансовых возможностях и как применить принципы малого бюджета к каждому аспекту веб-производства: управлению сайтом, созданию интерфейса, дизайну, написанию текста, хостингу и поддержке сайта после запуска. Книга предназначена для тех, кто экономит не только свои средства, но также и свое время, кто стремится разработать качественный сайт за короткие сроки. /2005 год. Купить на Озоне.
8. Кент Вертайм, Ян Фенвик «Цифровой маркетинг»
Книга посвящена тому, как увеличить продажи с помощью социальных сетей, блогов, вики-ресурсов, мобильных телефонов и других современных технологий. В книге дается полный перечень цифровых каналов коммуникации, которые стоит задействовать в рекламе вашего продукта, описываются нюансы использования каждого и даются методики планирования кампании. Не забывают и о том, как сочетать новые цифровые методы рекламы с традиционными. /2010 год. Купить на Озоне.
9. Этан Вотролл и Джефф Сьярто «Изучаем веб-дизайн»
Было бы просто замечательно, если бы было возможно научиться реальному веб-дизайну, просто прочитав умную книгу. Ведь тогда бы все сайты и страницы стали намного красивее, удобнее, доступнее, функциональнее. Тем не менее, толковая книга существенно облегчит этот процесс. Так из этой книги можно узнать секреты мирового дизайна, тонкости и хитрости юзабилити, познакомиться с процессом создания сайта — от эскиза до реализации в HTML и CSS. /2010 год. Купить на Озоне.
10. Дэн Седерхольм «Пуленепробиваемый Web-дизайн»
Настоящее издание посвящено применению XHTML и CSS для создания сайтов, отличающихся доступностью для различных браузеров, устройств и программ, гибкостью и готовностью к любым ситуациям. В каждой главе книги обсуждается один компонент веб-страницы. В последней главе все компоненты сводятся воедино, и описывается процесс создания готового шаблона непробиваемой страницы. На реальных примерах вы научитесь создавать гибкие, адаптируемые и доступные сайты./2006 год. Купить на Озоне.
Привет, друзья!
Хорошее дело — удаленная работа. Прибыльное, полезное и очень удобное. Особенно для тех, кто так же, как и я, любит путешествовать. Недавно только понял лишний раз, что не смотря на все возможные минусы, совершенно не хочется все это менять на стены офисов.
Особенно, когда в понедельник ранним утром едешь по пустой и прямой трассе на мотоцикле в стороне Бангалора и понимаешь, что именно сейчас твои знакомые и коллеги трутся спинами в пробках по дороге на службу.
С чего можно начать фрилансерствовать я уже писал. Сегодня же коснусь самой близкой для себя темы (и крайне полезной для читателей), а именно: как научиться создавать сайты с нуля и зарабатывать на этом деньги.
Ибо, так уж сложилось, что именно о сайтах и их создании мне очень часто задают вопросы как на вебинарах, так и в личку. Что ж, будем раскрывать карты.
Вообще, веб-строительство (или веб-мастеринг, как его называю я) — достаточно обширная ниша, куда входят специалисты самого разного уровня: от тех, кто педалит простые одностраничники в lpgenerator до могущественных фронт-энд разработчиков Ruby on Rails и Python. Я, как обычно, остановлюсь посередине и расскажу о том, какие делаю сайты я и что для этого необходимо знать.
В данное время я занимаюсь разработкой WordPress-сайтов под ключ.
Для их создания необходимо следующее:
- Основы профессии веб-дизайнера и базовые знания типографики . Сочетание цветов, умение находить комбинации форм и шрифтов. Наверное, это самая-самая нужная база для создания сайтов с нуля.
- Понимание работы веб-серверов, хостингов и вообще сети интернет . Тут вообще без маньячного красноглазия сисадминства обходится плохо. Но на начальном этапе с этим можно не заморачиваться.
- Умение работать с хостингами . Хотя бы чтоб залить-исправить Ваш шедевр через интернет.
- Знание хотя бы на уровне определений таких понятий, как FTP, HTTP, IP-адрес, CMS, Javascript, HTML, CSS. Не пугайтесь — все намного проще, чем вам кажется. На начальном этапе достаточно будет изучить, что такое FTP (чтобы заливать сайты на хостинг), CMS (чтобы управлять наполнением) и IP (чтобы знать как этот FTP настроить).
- Желательно уметь разбираться в HTML и CSS и хоть немного понимать, как сайты верстать.
- и, пожалуй, все!
Не заметили, какого одного не хватает пункта, о котором многие говорят? Правильно — «программирования»! Как так — спросите Вы? А вот...
Как Вам такая красота? Пугает?
Для того, чтобы на базовом самому научиться делать сайты, Вам совершенно не нужно знать таких страшных вещей, как PHP, MySQL, Javascript и.NET. Однако (чтобы меня не закидали помидорами супер-корифеи) подчеркну: со знанием программирования Ваши возможности увеличиваются в разы, следовательно сложность разрабатываемых сайтов повышается колоссально, а вместе с ней и возможная оплата труда.
Понятие «писать сайты» осталось актуальным только для систем, в которых крайне важна разработка с нуля и где предъявляются самые крутые требования к безопасности, скорости и чистоте кода. Хотя, есть такие фанаты, которые даже простые сайты-визитки предпочитают писать ручками.
Чуть позже в статье я расскажу, где можно научиться создавать хорошие сайты без глубокого знания программирования.
А пока о структуре работы.
Как происходит создание сайта?
Создание — это всегда процесс творческий, однако и он (в целях удобства) подвергается достаточно жесткой структуризации. Ранее, этот этап мне казался лишним. Мол, чего тратить время?
Сейчас же я понимаю, что более скрупулезное внимание к процессу разработки сайта на каждом из этапов круто сокращает время во время его завершения и исправления ошибок.
Поэтому, не важно: будете ли Вы создавать свой сайт с нуля самостоятельно или заказывать его у фрилансеров — всегда в этом процессе должен быть этап прототипирования.
Создание прототипа будущего сайта.
Тщательно продумайте последовательность блоков и размещение графически-текстовых элементов на странице. Старайтесь по-максимуму работать с задачей. Выявляйте на этом этапе все функциональные блоки, которые должны присутствовать на сайте: где расположить форму, где буллеты, где галерею товаров.
Если уж творить, то только так
Если Вы фрилансер, то приступайте к следующему этапу разработки только после принятия заказчиком прототипа! Если есть тексты и изображения — разместите их в макете. Если нет — вставляйте «текст-рыбу» и произвольные картинки.
Что можно использовать для создания прототипа:
- обычный листок А4 и цветные ручки (обожаю аналоговые инструменты и скрип пера по бумаге)
- Word, Excel или их аналоги
- Обычный Paint
- Photoshop
- Adobe Muse
Не важно, какой инструмент выберите Вы. Главное, чтобы он максимально эффективно решал задачу — создание прототипа. Я, к примеру, люблю рисовать все на бумаге. И даже в путешествиях вожу с собой блокнот А4. Не совсем удобно с точки зрения переноса тяжестей, но такой кайф — рисовать цветными ручками и по максимуму задействовать свой творческий потенциал.
Создание дизайна проекта по готовому макету
После того, как реализовали макет — приступайте к дизайну. Рисуйте, камлайте, придумывайте цветовую гамму и художественные приемы. Именно на этом этапе Вам крайне необходимо знание основ веб-дизайна. Если на воображение Вам, как на ухо, наступил медведь, отдавайте макет веб-дизайнеру с тем уговором, что готовый макет дизайна сайта верстать будете Вы.
Веб-дизайнерское камлание выглядит примерно так
У меня, к примеру, нет художественного образования или образования дизайнера. Я выезжаю на выработанном с детства хорошем художественном вкусе и куче изученной самостоятельно литературы. Однако, если моим заказчикам нужен совсем уж изощренный вариант, я прибегаю к услугам супер-профи в рисовании и photoshop.
Верстка дизайна
Верстка — это перенос дизайна из картинки в код HTML, чтобы браузер понял, как этот самый сайт отображать. Самый интересный этап, который отпугивает большинство новичков, ибо именно здесь, как нигде, знания html, css и jquery становятся актуальными.
И если исторически раньше верстальщик весь код писал ручками и ненавидел свою работу чуть больше, чем полностью, то сейчас его адский труд круто облегчили готовые фреймворки и целые системы для визуального проектирования сайтов.
В последних всю работу по верстку Вы производите путем расстановки блоков на экране, без написания кода.
Казалось бы, халява, но знать принципы использования блочной верстки — крайне желательно, чтобы процесс работы оставался осмысленным и ничего никуда не разъезжалось.
Настройка CMS и наполнение
После того, как Ваш первоначальный макет был сверстан, необходимо к нему подключить WordPress (или любую другую систему управления контентом, она же CMS). Для этого в готовый сверстанный шаблон вставляются команды уже самой CMS, чтобы показать ей, что вот это — шапка сайта, а вот это — логотип.
На самом деле, этот этап используется далеко не всегда. И часто бывает, что заказчик требует только html-версию. Однако же, если вы хотите на создании сайтов зарабатывать хорошие деньги, учитесь работать с CMS. Как раз дальше я расскажу, где этому научиться.
Где учиться делать сайты быстро?
И вот теперь самое интересное! Времена, когда для создания сайтов с нуля Вам требовались глубокие знания программирования, прошли. Однако, я сразу предупреждаю : все дальнейшие сервисы и курсы — платные. И если Вы ищете что-то совсем уж бесплатное, обратитесь лучше в гугл и на сайт htmlbook.ru.
Мы так устроены, что бесплатное нами не цениться, поэтому я продолжаю всячески призывать людей не бояться вкладывать деньги в себя. Потому что в противном случае Вам придется вкладывать время, которое в отличие от денег, никогда не восполняется.
Да и вообще, обучение у профессионалов — это самой прямой, самый быстрый и самый эффективный путь. Без долгих прогулок по полям с граблями и скрупулезных изобретений трехколесных велосипедов (с бибикалкой, ага).
Самому, безусловно, можно тоже обучаться. Но не проще ли отдать какую-то сумму, чтобы профессионал провел Вас мимо заблуждений и откровенных ям на пути? Рецепт — стар как мир: учимся и развиваемся.
Обучение заработку на сайтостроении
Есть хороший парень, который обучает тому, как на разработке сайтов можно зарабатывать. На мой взгляд, подобный подход сразу дает Вам два крыла: техническую базу специалиста и маркетинговую база продавца. Без последней во фрилансе очень грустно.
Вот несколько предложений от его центра:
- БЕСПЛАТНАЯ ИНСТРУКЦИЯ по заработку на веб-строительстве
- БЕСПЛАТНАЯ КНИГА «Создание сайта от начала до конца» В ней автор на наглядном примере показывает весь процесс разработки сайта, который Вы будете делать самостоятельно.
Вообще, я противник шоковой терапии. И всерьез считаю, что развитие должно идти не рывками, а поступательно, без нарушения законов гармонии.
Конечно, всеми описанными выше курсами обучение созданию сайтов не ограничивается. Сейчас вообще каждый третий в интернете начинает запускать свои псевдо-курсы, поэтому насыщенность рынка — просто жуткая. И разобраться в многообразии предложений бывает порой совершенно невозможно. Именно поэтому я и выступаю в роли некоего санитара, стараясь отделять котлет от мух и рекомендовать только то, что опробовал сам.
Как зарабатывать на создании сайтов?
Следующий шаг после обучения ремеслу — заработок на нем. Это хорошая мотивация, когда за интересное хобби ты начинаешь получать деньги. Именно так это вышло у меня.
Делается это в двух словах так:
- Ты даешь информацию своим друзьям-знакомым о том, чем ты теперь занимаешься
- Ставишь минимальный ценник для наработки опыта и портфолио
- После — идешь на биржи фриланса
- Получаешь заказы, обрастаешь нужными связями и опытом
- Развиваешься и становишься профессионалом экстра-класса
- Покупаешь себе Геленваген и дачу на Бали
6 очевидных шагов, которые иногда очень тяжело даются.
Сколько времени нужно для того, чтобы научиться делать сайты?
Иногда мне задают вопросы: сколько нужно времени чтобы освоить создание сайтов. Ответить на него тяжело, ибо не совсем понятен «пункт прибытия». Т.е. какой момент будет считаться точкой, где ты «уже умеешь». У меня этот процесс длится уже 8 лет и чем дальше, тем я кажусь себе все менее компетентным:)
Однако, за 2-3 месяца можно неплохо поднатаскаться, чтобы уверенно делать что-то несложное на заказ. Когда я начал осваивать более продвинутую верстку, взял заказ через 2 недели после начала обучения. Наделал кучу ошибок, но свои первые фрилансерские 900 рублей заработал. Радости предела не было)
Поэтому, скажу так: учитесь и как почувствуете под ногами опору сделать что-то простое — беритесь! И не бойтесь допустить ошибку.
Замечание для матерых веб-программистов
Предвижу вполне обоснованные возражения от акул кодинга и веб-девелопмента.
«Мол, зачем дискредитировать науку создания сайтов? Ибо дилетантов уже и так полно на рынке. Пользы от них мало, а вот убытков они приносят много. Заказчикам — ибо совершенно не умеют работать ни как специалисты, ни как продажники; коллегам по цеху, ибо откровенно демпингуют на рынке»
Постараюсь Вас успокоить: путь во фриланс — длинен. И пока зеленые новички доростут до Вашего уровня, может пройти не один год. А в своем сегменте, где заказчикам не требуются крутые навороченные кишки сайтов, именно начинающие — отличное подспорье для решения задач.
Профессионалы и адекватные специалисты всегда были и остаются в цене.
Не бойтесь конкуренции, ее на самом деле не существует. Будьте человечны по отношению к заказчикам, выстраивайте с ними дружеские и гармоничные отношения и никакой новичок Вас никогда не сдвинет.
Жаль, что мало кто придерживается одних и тех же принципов в повседневной жизни и в работе. Большинство пытается урвать кусок пожирней, и сделать это как можно быстрее, совершенно не заботясь о собственной совести и дальнейшем взаимодействии с заказчиками. И фриланс тут просто еще одна точка приложения. Об этом я уже писал в статье .
Все просто: «живи сам и дай жить другим», — как говорят на Шри Ланке!
На этом все, друзья! Думаю, ваш голод по теме «хочу научиться делать сайты» мне утолить удалось. Поделитесь в комментариях, пожалуйста: кем бы Вы хотели работать удаленно? А то мне часто пишут вопросы именно по профессиям в онлайн-заработке, поэтому эту нишу я решил потихоньку заполнять.
Добавляйтесь в друзья, подписывайтесь на обновления блога и будьте счастливы. А если статья Вам показалась интересной, поделитесь ею, пожалуйста, в соцсетях с друзьями.
Красивых Вам сайтов и платежеспособных заказчиков!