30 уроков по созданию веб-сайта: от дизайна до верстки

• 
  Уроки
• 2 мин на чтение
• 
  9721

Подробный курс, который расскажет обо всех этапах создания сайта: начиная с дизайна в Photoshop, заканчивая его версткой и внедрением CMS.

Эти уроки будут полезны для начинающих дизайнеров: поможет понять не только принципы «чистого» дизайна, но и нюансы подготовки макета для верстки.

Урок #1: Скетч

Урок #2: Скетч (Продолжение)

Урок #3: Заканчиваем создание скетча

Урок #4: Дизайн шапки

Урок #5: Дизайн первой секции

Урок #6: Дизайн второй секции

Урок #7: Дизайн третьей секции

Урок #8: Дизайн четвертой секции

Урок #9: Дизайн шестой и седьмой секций

Урок #10: Дизайн секций «Отзывы», «Контакты» и подвала

Урок #11: Подготовка Front-End окружения. Начинаем верстать макет

Урок #12: Начинаем верстать шапку

Урок #13: Верстка шапки

Урок #14: Верстка. Адаптивная шапка + адаптивное меню

Урок #15: Верстка. Полоса преимуществ

Урок #16: Верстка. Секция «Наш профиль»

Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup)

Урок #18: Верстка.

animateNumber + верстка секции «Направления»

Урок #19: Верстка. Секция «Наши работы» + Pop-up

Урок #20: Верстка. Секция «Поставляемое оборудование». Карусель

Урок #21: Верстка. Секции «Скидки» и «Менеджеры»

Урок #22: Верстка. Карусель брендов

Урок #23: Верстка. Отзывы

Урок #24: Верстка. Контакты

Урок #25: Обновление Front-End окружения Gulp

Урок #26: Верстка. Футер, всплывающие формы, кнопка «Наверх»

Урок #27.

MODx + Gulp: Интеграция и настройка окружения Gulp

Урок #28. Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки

Урок #29. Посадка HTML верстки шапки на MODx

Урок #30. Посадка секции тизеров на MODx

Фото на обложке: ShutterStock

• #веб
• #веб разработка
• #веб-дизайн
• #верстка
• #дизайн
• #дизайн сайта
• #сайт
• #создание сайта
• #урок

• 
  
• 
  2
• 
  

Статьи по теме

Создание сайта на HTML и CSS — уроки для новичков

Можно бесплатно и в режиме онлайн открыть ООО через Тинькофф и вести бухгалтерию через Мое дело

х

Наверх

1. Главная
2. Создание сайта на HTML

Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и CMS, а с помощью исключительно HTML 5 и CSS 3. В дальнейшем, когда уже будете делать проекты с использованием популярных CMS, применяя полученные знания, вы сможете вмешаться в исходный код сайта, переделав оформление и структуру под свои нужды.

Курс состоит из 25 уроков. Первая его часть научит понимать и писать код HTML, вторая познакомит с каскадными таблицами стилей (CSS). Именно с этих материалов и рекомендую начать изучать сайтостроение.

• 1Как создать сайт в Блокноте

  Сделайте свою первую HTML-страницу, не прибегая ни к чему, кроме известного всем простейшего текстового редактора, встроенного в любую Windows — Блокнота. Но не просто сделайте, а поймите, как это работает.

• 2Adobe Dreamweaver — программа для создания сайта

  Вы познакомитесь с одним из самых популярных и многофункциональных средств, призванных упростить рабочие будни верстальщикам и веб-дизайнерам — программой Adobe Dreamweaver.

• 3Что такое HTML

  Основные вопросы, мучающие новичков. Что такое HTML? Зачем он нужен? Что позволяет делать? Что лучше — HTML4 или HTML5? Все ответы — в статье.

• 4Теги

  Теги — основная единица языка HTML. Без них не обходится ни одна веб-страница. Статья познакомит вас с основными контейнерами HTML. Из неё вы узнаете, как правильно записываются теги, научитесь частично понимать HTML-код.

• 5Атрибуты

  У тегов есть не только содержимое, но также атрибуты, которые, в свою очередь, наделены значениями. Обо всём этом и пойдёт речь в статье. Где искать атрибуты? Как правильно записывать? Какие атрибуты можно присвоить любому без исключения тегу? А ещё вы узнаете, как разрешить пользователю редактировать любой элемент страницы, как задать для каждого объекта уникальное контекстное меню и как скрыть содержимое элемента, чтобы оно не отображалось в браузере.

• 6Форматирование текста в HTML

  Всё, что связано с оформлением текста: как сделать заголовки, назначить полужирный шрифт или курсив, уменьшить/увеличить размер текста или что-нибудь процитировать. В статье вас ждёт ещё много интересных секретов форматирования текста средствами HTML. А главное — всё это показано на наглядных примерах.

• 7Создание списков

  Маркированные, нумерованные, вложенные — какие хотите. Также вы узнаете, как нумеровать список большими латинскими буквами или римскими цифрами, да ещё и в обратную сторону, как начинать нумерацию не с единицы и тому подобные вещи. А ещё вас ждёт знакомство с мало кому известным списком определений.

• 8Создание ссылок

  Ссылки — чуть ли не основной элемент Интернета, без которого никакой связности страниц бы и не было. Научитесь создавать ссылки на примерах, узнайте, чем относительные пути отличаются от абсолютных, познакомьтесь с внутренними и графическими ссылками, научитесь ставить их на e-mail и Skype.

• 9Вставка изображений

  Картинки украшают страницу, поэтому уметь добавлять их — навык очень полезный. А если превратить изображение в навигационную карту, то оно становится не только симпатичным, но и очень полезным элементом. Научитесь создавать такие объекты на наглядных примерах, которые есть в статье.

• 10Вставка таблиц

  Внимательно изучив этот раздел, вы научитесь самостоятельно работать с таблиц. На основе таблиц когда-то создавались целые структуры сайтов, но об этом будет идти речь в следующем уроке.

• 11Табличная вёрстка сайта

  Как вообще можно сверстать целый сайт? Способов есть много, один из них — делать его с помощью таблиц. О том, что представляет собой такой метод, вы и узнаете. Наглядные примеры, как всегда, присутствуют, и помогут без труда освоить табличный подход.

• 12Фреймы

  Статья для тех, кто хочет научиться отображать в одном HTML документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.

• 13Что такое CSS

  Какие основные операторы и элементы присутствуют в документе каскадных таблиц стилей, что вообще такое этот CSS, зачем он нужен и чем отличается от HTML, а главное — как связать каскадную таблицу стилей с HTML-элементом.

• 14CSS текст

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

• 15CSS шрифты

  Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.

• 16CSS ссылки

  Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель — зелёной с подчёркнутым текстом, щёлкнули — жёлтой и полужирной, а перешли — курсивной и фиолетовой.

• 17CSS таблицы

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

• 18CSS списки

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

• 19CSS фон

  Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.

• 20CSS рамки

  Ширина границ, их стиль, цвет. Вы узнаете, как сделать вместо внутренней границы внешнюю, как её раскрасить, как добавить рамки только с двух или трёх сторон и как сделать так, чтобы слева она была пунктирной, а справа — сплошной.

• 21Блочная вёрстка сайта

  Статья объяснит, в чём смысл блочной вёрстки, чем она отличается от табличной и лучше ли она. По каким принципам создаётся и в чём её суть. Но самое главное — большой пример блочной вёрстки, благодаря которому вы сможете окончательно в ней разобраться и запомните метод навсегда.

• 22Создание блочной структуры сайта с помощью инструкции php include

  Почему нельзя обойтись только HTML/CSS? Что даёт язык PHP современным сайтам? Какие страницы называют статическими, а какие — динамическими, и что это означает? А самое основное — описание функции include() и пример её использования.

• 23Как создать шаблон сайта

  Делаем PSD-макет настоящего сайта в программе Photoshop.

• 24Вёрстка шаблона из PSD

  В предыдущей статье мы создали макет сайта, в этой будем делать из картинки работающий шаблон с помощью изученных ранее HTML и CSS.

• 25Создание сайта на CMS

  Хотя сайт «голыми руками» сделать можно, всё чаще для этой цели сейчас используются системы управления содержимым — CMS. О том, что это такое, как классифицируются и какие дают преимущества, какими бывают и какую CMS лучше выбрать расскажет статья.

  Если вы прошли все уроки, то можете легко создать с нуля даже достаточно сложный сайт, а также разобраться в чужом коде, отрисовать и сверстать шаблон, вмешаться в тему оформления любой CMS и отредактировать её под свои нужды. С полученными знаниями вы всегда будете на шаг впереди любого веб-мастера, сразу начавшего работать с CMS и не освоившего основных инструментов веб-разработки.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Создание веб-сайта. Часть 1. Как создавать веб-сайты

Теперь, когда вы создали свою первую веб-страницу и освоили некоторые основы, мы можем перейти к созданию веб-сайта.

Введение: Что такое веб-сайт?

Веб-сайт — это просто набор веб-страниц, соединенных друг с другом с помощью так называемых ссылок. В HTML есть специальный тег, который называется (как вы уже догадались!) тегом «ссылка», и в самом простом виде он выглядит следующим образом:

А вот пример тега ссылки с заполненным пунктом назначения:

 Перейти на killersites.com 

Можно с уверенностью сказать, что все мы использовали ссылки при просмотре веб-страниц. Всякий раз, когда вы нажимаете на ссылку, которая ведет на другую страницу, вы используете тег ссылки. Тег ссылки — самый важный тег в HTML; это делает Интернет взаимосвязанным!

В приведенном выше примере мы видим, что тег ссылки указывает на веб-сайт www.killersites.com, а на веб-странице отображается текст: «Перейти на killersites.com». Поэтому, если вы хотите создать ссылку, которая приведет кого-то, например, на www.yahoo.com, вы должны заменить www.killersites.com на www.yahoo.com, адрес Yahoo.

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

Некоторые из вас, возможно, заметили, что в теге ссылки перед адресом веб-сайта есть текст; текст, о котором я говорю, таков:

 http:// 

Этот текст сообщает браузеру, что ссылка указывает на веб-страницу. Иногда ссылки могут указывать не только на веб-страницы, но и на другие объекты; такие вещи, как фильмы, PDF-файлы и т. д.

Абсолютный и относительный URL-адрес

Чтобы связать страницы вашего веб-сайта с одной страницы на другую, вы можете использовать один из двух типов адресов: абсолютные адреса (полные) и относительные адреса (частичные).

Прежде чем я продолжу, URL — это способ ботаников сказать «адрес».

Абсолютный URL-адрес — это полный адрес страницы, которую можно найти из любого другого места в Интернете. Допустим, у вас есть страница с именем contact.html в корневом каталоге вашего веб-сайта, доменное имя которого — www.myStore.com. В этом случае абсолютный URL-адрес страницы contact.html будет следующим:

 'http://www.myStore.com/contact.html' 

Хорошо, теперь я знаю, что потерял несколько человек, потому что использовал слово, которое не объяснил: «корень».

Когда гики говорят о корне веб-сайта, они имеют в виду основу веб-сайта, начальный уровень.

Файлы (страницы, изображения и т. д.), из которых состоит ваш веб-сайт, организованы в папки так же, как и любые другие файлы, хранящиеся на вашем домашнем компьютере. Ваш хост предоставит вам место / каталог на своем сервере, чтобы вы могли разместить все файлы своего сайта.

Это назначенное вам пространство/папка будет «корнем» вашего веб-сайта. Это означает, что с точки зрения Интернета все (html-файлы, изображения, другие папки и т. д.) в этой папке напрямую доступны по вашему доменному имени и имени элемента. Хм! Я даже немного запутался! Возможно, небольшой пример пояснит это лучше:

Предположим, что на корневом уровне вашего веб-сайта у вас есть эти HTML-файлы:

index.html и contact.html

И в папке с названием «продукты» вы поместили целая куча других страниц с одной под названием «bookcases.html». Вы решили поместить все ваши HTML-страницы «продуктов» в папку «продукты», чтобы веб-сайт был более организованным — разумный поступок!

HTML-ссылки »

Урок: Планирование и разработка веб-сайта

Портал деактивирован. Обратитесь к администратору портала.

• оценки

• Порталы

• Руководство пользователя

На этом уроке мы узнаем, как планировать и проектировать веб-сайт, а также как использовать различные диаграммы для обоих этапов.

План урока

Учащиеся смогут

• определить цель и аудиторию веб-сайта, учитывая идею веб-сайта,
• определить требования к веб-сайту и необходимые веб-страницы,
• нарисовать схемы навигационной структуры для планирования навигации по веб-сайту,
• определить пользовательский интерфейс и дизайн пользовательского интерфейса,
• определить важность шаблона веб-сайта и упомянуть его общие компоненты,
• определить каркасы ,
• нарисовать каркасы для разработки графического интерфейса отдельных веб-страниц.

Рабочий лист урока

Q1:

Заполните пустое место: чтобы спроектировать, как будут связаны разные веб-страницы веб-сайта.