С развитием такого количества языков программирования, стилей и разметки изучение веб-дизайна становится более сложным, чем когда-либо. К счастью, есть множество инструментов, которые помогут вам начать работу. Поищите несколько базовых ресурсов, например онлайн-уроки или современную книгу по веб-дизайну. Когда вы будете готовы начать, начните с освоения основ HTML и CSS. Затем вы можете начать изучать более продвинутые языки веб-дизайна, такие как JavaScript!
Шаги
Метод 1 из 4: поиск ресурсов для веб-дизайна
Шаг 1. Найдите в Интернете курсы и учебные пособия по веб-дизайну
В Интернете полно подробной информации о веб-дизайне, и многие из них находятся в свободном доступе. Вы можете начать с посещения бесплатных онлайн-курсов по Udemy или CodeCademy или присоединиться к сообществу программистов, например freeCodeCamp. Вы также можете найти видеоуроки по веб-дизайну на YouTube.
- Если вы точно знаете, что ищете, попробуйте выполнить поиск, используя определенные термины (например, «селекторы классов в руководстве по CSS»).
- Если вы новичок и не имеете опыта веб-дизайна, начните с изучения основ кодирования в HTML и CSS.
Шаг 2. Подумайте о том, чтобы записаться на занятия в местном колледже или университете
Если вы учитесь в колледже или университете, узнайте, доступны ли какие-либо курсы по веб-дизайну, в отделе информатики вашего учебного заведения или в каталоге курсов. Если вы не учитесь в школе, проверьте, есть ли рядом с вами колледжи или университеты, предлагающие курсы повышения квалификации по веб-дизайну.
Некоторые университеты предлагают онлайн-классы веб-дизайна, открытые для всех желающих. Посетите такие веб-сайты, как Coursera.org, чтобы найти бесплатные или доступные курсы веб-дизайна, проводимые преподавателями университетов
Шаг 3. Купите книги по веб-дизайну в книжном магазине или библиотеке
Хорошая книга по веб-дизайну может стать бесценным справочником, пока вы учитесь и применяете свое ремесло. Ищите свежие книги по общему веб-дизайну или конкретным форматам кодирования и языкам, которые вы хотели бы изучить.
Чтение журналов и статей в блогах о веб-дизайне - также хороший способ изучить новые техники, получить вдохновение и быть в курсе последних тенденций
Шаг 4. Загрузите или купите программное обеспечение для веб-дизайна
Хорошее программное обеспечение для веб-дизайна может помочь вам создавать веб-сайты более эффективно и результативно, а также отлично подходит для изучения тонкостей применения кодирования, написания сценариев и других ключевых элементов дизайна. Вам могут пригодиться такие инструменты, как:
- Программы графического дизайна, такие как Adobe Photoshop, GIMP или Sketch.
- Инструменты для создания веб-сайтов, такие как WordPress, Chrome DevTools или Adobe Dreamweaver.
- Программное обеспечение FTP для передачи ваших готовых файлов на ваш сервер.
Шаг 5. Найдите несколько шаблонов веб-сайтов, с которыми можно поиграть, когда вы начнете
Нет ничего плохого в использовании шаблонов, когда вы изучаете основы веб-дизайна. Выполните поиск понравившихся шаблонов веб-страниц и внимательно изучите код, чтобы понять, как дизайнер собирает страницу. Вы также можете поэкспериментировать с изменением кода и добавлением собственных элементов в шаблон.
Поищите бесплатные шаблоны веб-сайтов, чтобы начать работу, или поэкспериментируйте с шаблонами, которые поставляются с вашим ПО для веб-дизайна
Метод 2 из 4: освоение HTML
Шаг 1. Ознакомьтесь с основными тегами HTML
HTML - это простой язык разметки, который используется для форматирования основных элементов веб-сайта. Вы можете форматировать различные элементы вашего сайта с помощью тегов. Теги отображаются в угловых скобках до и после каждого элемента и содержат инструкции о том, как этот элемент будет работать на странице. Чтобы закрыть тег, поместите / перед последним тегом внутри угловых скобок.
- Например, если вы хотите, чтобы часть вашего текста была жирный, вы бы окружили элемент тегом, например: Этот текст выделен жирным шрифтом.
- Несколько общих тегов включают (абзац), (привязку, определяющую связанный текст) и (шрифт, который может помочь определить различные атрибуты текста, такие как размер и цвет).
- Другие теги определяют различные части самого HTML-документа. Например, используется, чтобы содержать информацию о странице, которая не будет видна зрителю, например ключевые слова или описание страницы, которое будет отображаться в результатах поисковой системы.
Шаг 2. Научитесь использовать атрибуты тегов
Некоторым тегам требуется дополнительная информация, чтобы указать, как они должны работать. Эта дополнительная информация появляется внутри открывающего тега и называется «атрибутом». Имя атрибута отображается сразу после имени тега, разделенное пробелом. Значение атрибута присоединяется к имени атрибута знаком = и заключено в кавычки.
- Например, если вы хотите сделать часть текста красным, вы можете сделать это с помощью тега и соответствующего атрибута цвета шрифта, например: Этот текст красный.
- Многие эффекты, которые раньше обычно достигаются с помощью атрибутов HTML-тегов, такие как установка разных цветов шрифта, теперь обычно выполняются с помощью кодирования CSS.
Шаг 3. Поэкспериментируйте с вложенными элементами
HTML также позволяет размещать элементы внутри других элементов для создания более сложного форматирования. Например, если вы хотите определить абзац, а затем выделить часть текста внутри абзаца курсивом, вы можете сделать это следующим образом:
Я люблю кодить!
Шаг 4. Знакомство с пустыми элементами
Некоторым элементам HTML не нужны открывающие и закрывающие теги. Например, если вы вставляете изображение, вам нужен только один тег «img», содержащий имя тега и любые другие необходимые атрибуты (например, имя файла изображения и любой альтернативный текст, который вы хотите добавить в целях доступности). Например:
Шаг 5. Изучите базовый макет HTML-документа
Чтобы ваш HTML-сайт работал правильно, вам нужно знать, как отформатировать всю страницу. Это включает определение того, где начинается и заканчивается ваш html-код, а также использование тегов для определения того, какие части кода будут отображаться, а какие - предоставлять скрытую фоновую информацию. Например:
- Используйте тег, чтобы определить свою страницу как HTML-документ.
- Затем поместите всю страницу в теги, чтобы определить, где начинается и заканчивается код.
- Поместите любую информацию, которая не будет отображаться для зрителя, например заголовок страницы, ключевые слова и описание вашей страницы, в теги.
- Определите тело вашей страницы (то есть любой текст и изображения, которые вы хотите, чтобы зрители увидели) с помощью тегов.
Метод 3 из 4: знакомство с CSS
Шаг 1. Используйте CSS для применения стилей к вашим HTML-документам
CSS - это язык таблиц стилей, который позволяет применять к вашей веб-странице различные стили и элементы дизайна. Например, если вы хотите выборочно применить определенный шрифт или цвет текста к некоторым текстовым элементам на вашей странице, вы можете создать для этого файл CSS. Затем вы можете вставить файл CSS в свой HTML-документ, где захотите.
-
Например, если вы хотите, чтобы файл CSS превратил все элементы абзаца в HTML-документ в зеленый цвет, вы можете создать файл.css, содержащий строки:
- п {
- цвет: зеленый;
- }
- Затем вы должны сохранить файл с именем, например style.css.
- Чтобы применить таблицу стилей к вашему HTML-документу, вы должны вставить ее как пустой элемент ссылки в теги. Например:
Шаг 2. Ознакомьтесь с элементами набора правил CSS
Отдельный фрагмент кода CSS называется «набором правил». Набор правил содержит различные элементы, которые определяют, что вы хотите, чтобы ваш код делал. Это включает:
- Селектор, который определяет HTML-элемент, который вы хотите стилизовать. Например, если вы хотите, чтобы ваш набор правил влиял на элементы абзаца, вы должны начать свой набор правил с буквы «p».
- Объявление, которое определяет свойства, которые вы хотите стилизовать (например, цвет шрифта). Объявление заключено в фигурные скобки {}.
- Свойство, указывающее, какое свойство HTML-элемента вы хотите стилизовать. Например, внутри тега вы можете указать, что хотите изменить цвет текста.
- Значение свойства конкретно определяет, как вы хотите изменить свойство (например, если свойство имеет цвет шрифта, тогда значение свойства будет «зеленым»).
- Вы можете изменить несколько различных свойств в одном объявлении.
Шаг 3. Примените CSS к вашему тексту, чтобы ваш набор выглядел красиво
CSS полезен для применения различных эффектов к вашему тексту без необходимости индивидуального кодирования каждого свойства в HTML. Поэкспериментируйте с изменением различных свойств набора в CSS, в том числе:
- Цвет шрифта
- Размер шрифта
- Семейство шрифтов (например, диапазон шрифтов, которые вы хотите использовать в своем тексте)
- Выравнивание текста
- Высота линии
- Межбуквенное расстояние
Шаг 4. Поэкспериментируйте с блоками и другими инструментами верстки CSS
CSS также полезен для добавления на страницу привлекательных визуальных элементов, таких как текстовые поля и таблицы. Кроме того, вы можете использовать его для изменения общего макета вашей страницы и определения расположения различных элементов относительно друг друга.
Например, вы можете определить такие атрибуты, как ширина и цвет фона элемента, добавить границу или установить поля, которые будут создавать пространство между различными элементами на вашей странице
Метод 4 из 4: Работа с другими языками дизайна
Шаг 1. Изучите JavaScript, если вы хотите добавлять интерактивные элементы на свои страницы
JavaScript - отличный язык для изучения, если вы заинтересованы в добавлении на свои веб-сайты дополнительных функций, таких как анимация и всплывающие окна. Пройдите курс или найдите онлайн-руководства о том, как кодировать на JavaScript и включать эти закодированные элементы в свои веб-страницы с помощью HTML.
Прежде чем вы освоите JavaScript, вам необходимо познакомиться с основами создания страниц в HTML и CSS
Шаг 2. Ознакомьтесь с jQuery, чтобы упростить кодирование JavaScript
jQuery - это библиотека JavaScript, которая может упростить программирование на Java, позволяя получить доступ к множеству предварительно закодированных элементов JavaScript. jQuery - отличный инструмент, если вы уже знакомы с основами кодирования JavaScript.
Вы можете получить доступ к библиотеке jQuery и множеству других ценных ресурсов через jQuery.org, веб-сайт jQuery Foundation
Шаг 3. Изучите серверные языки, если вас интересует внутренняя разработка
В то время как HTML, CSS и JavaScript идеально подходят для веб-дизайнеров, которые сосредоточены на том, что пользователь видит и делает на веб-сайте, серверные языки полезны, если вас больше интересует закулисная работа. Если вы хотите узнать о внутренней разработке, сосредоточьтесь на изучении таких языков, как Python, PHP и Ruby on Rails.
Эти языки полезны для управления и обработки данных, которые пользователь не видит. Например, PHP можно использовать для создания безопасных инструментов создания паролей на веб-сайтах, требующих входа в систему
Файлы помощи
Шпаргалка по HTML
Шпаргалка по CSS
