Содержание
30 уроков по созданию веб-сайта: от дизайна до верстки
-
Уроки - 2 мин на чтение
-
9721
Подробный курс, который расскажет обо всех этапах создания сайта: начиная с дизайна в Photoshop, заканчивая его версткой и внедрением CMS.
Эти уроки будут полезны для начинающих дизайнеров: поможет понять не только принципы «чистого» дизайна, но и нюансы подготовки макета для верстки.
Урок #1: Скетч
Урок #2: Скетч (Продолжение)
Урок #3: Заканчиваем создание скетча
youtube.com/embed/mf70chii9cY?list=PLyf8LgkO_8q-Izp0fY29APgYAUaoQTT8_» frameborder=»0″ allowfullscreen=»allowfullscreen»>
Урок #4: Дизайн шапки
Урок #5: Дизайн первой секции
Урок #6: Дизайн второй секции
Урок #7: Дизайн третьей секции
Урок #8: Дизайн четвертой секции
youtube.com/embed/ETAVu8sb7F8?list=PLyf8LgkO_8q-Izp0fY29APgYAUaoQTT8_» frameborder=»0″ allowfullscreen=»allowfullscreen»>
Урок #9: Дизайн шестой и седьмой секций
Урок #10: Дизайн секций «Отзывы», «Контакты» и подвала
Урок #11: Подготовка Front-End окружения. Начинаем верстать макет
Урок #12: Начинаем верстать шапку
Урок #13: Верстка шапки
youtube.com/embed/oTsWZkKE08g?list=PLyf8LgkO_8q-Izp0fY29APgYAUaoQTT8_» frameborder=»0″ allowfullscreen=»allowfullscreen»>
Урок #14: Верстка. Адаптивная шапка + адаптивное меню
Урок #15: Верстка. Полоса преимуществ
Урок #16: Верстка. Секция «Наш профиль»
Урок #17: Верстка. Плавная pop-up галерея (Magnific-Popup)
Урок #18: Верстка.
animateNumber + верстка секции «Направления»
Урок #19: Верстка. Секция «Наши работы» + Pop-up
Урок #20: Верстка. Секция «Поставляемое оборудование». Карусель
Урок #21: Верстка. Секции «Скидки» и «Менеджеры»
Урок #22: Верстка. Карусель брендов
youtube.com/embed/R9V3PnRnu20?list=PLyf8LgkO_8q-Izp0fY29APgYAUaoQTT8_» frameborder=»0″ allowfullscreen=»allowfullscreen»>
Урок #23: Верстка. Отзывы
Урок #24: Верстка. Контакты
Урок #25: Обновление Front-End окружения Gulp
Урок #26: Верстка. Футер, всплывающие формы, кнопка «Наверх»
Урок #27.
MODx + Gulp: Интеграция и настройка окружения Gulp
Урок #28. Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки
Урок #29. Посадка HTML верстки шапки на MODx
Урок #30. Посадка секции тизеров на MODx
Фото на обложке: ShutterStock
- #веб
- #веб разработка
- #веб-дизайн
- #верстка
- #дизайн
- #дизайн сайта
- #сайт
- #создание сайта
- #урок
-
-
2 -
Статьи по теме
Создание сайта на HTML и CSS — уроки для новичков
Можно бесплатно и в режиме онлайн открыть ООО через Тинькофф и вести бухгалтерию через Мое дело
х
Наверх
- Главная
- Создание сайта на 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:
Заполните пустое место: чтобы спроектировать, как будут связаны разные веб-страницы веб-сайта.