Что такое верстка сайта и как правильно сверстать сайт новичку
Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается. Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.
О том, что включает в себя верстка сайта и какие этапы проходит профессиональный верстальщик, поговорим в сегодняшней статье.
Что включает в себя верстка сайта
Основная задача верстальщика – переместить прототип в код, который будет в точности отображать проделанную работу дизайнера. Верстку можно сравнить с издательской деятельностью – книги, журналы и газеты содержат структурированную информацию, в них текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Выделяется два типа разработчиков сайтов:
- Backend– занимается разработкой внутренней части сайта, программирует основной функционал;
- Frontend – занимается внешней частью сайта, настраивает отображение всех элементов, добавляет к ним анимацию и так далее.
Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.
HTML позволяет показывать страницы и контент, размещенный на них, в заданном порядке. Работа с языком разметки заключается в описании тегов. Вот основные из них:
- <html> </html> – главный тег, в котором содержатся другие теги;
- <head> </head> – включает в себя различные SEO-элементы, код JavaScript и многое другое;
- <body> </body> – внутри этих тегов находится все содержимое страницы;
- <h2> </h2> – используется для обозначения заголовка первого уровня;
- <h3> </h3> – используется для обозначения заголовка второго уровня, после которого следуют заголовки h4, h5, h5, h6;
- <p> </p> – здесь прописывается текстовое описание, например заголовок статьи;
- <strong> </strong> – придает тексту жирность;
- <i> </i> – текст, написанный внутри этого тега, отрображается курсивом;
- <ul> </ul> – обозначает маркированный список;
- <ol> </ol> – обозначает нумерованный список;
- <li> </li> – указывает на пункты внутри списка;
- <a> </a> – позволяет добавить к тексту ссылку на другую страницу, номер телефона, почту или иной элемент с помощью атрибута href;
- <img> – используется, чтобы добавить картинку на сайт с компьютера либо из интернета;
- <table> </table> — тег для создания таблицы.
Теги работают следующим образом:
<h2>Привет – это мой первый сайт!</h2>
В таком случае на странице будет отображен заголовок h2 со стандартным шрифтом, размером и начертанием.
Аналогичным образом прописываются другие теги, в результате чего получается готовый сайт.
Виды верстки
Существует два вида верстки – блочная и табличная.
Табличная верстка
Первый вид верстки, с которого началась эпоха сайтов. Именно через таблицы создавались простые веб-ресурсы в далеком 2000-м году. При табличной верстке страница поделена на соседствующие ячейки, что напоминает стандартную работу с таблицами в Excel.
Минус такого подхода состоял в том, что приходилось создавать дополнительные таблицы, которые впоследствии могли остаться пустыми. Например, если требовалось разместить изображение и зафиксировать его положение, то необходимо было создать новую строку и разделить ее на несколько столбцов.
Только один из них бы содержал изображение, а другие служили бы для него фиксаторами.
Таким образом, страница могла содержать большое количество пустых таблиц, из-за которых сайт становился «тяжелым». Мало того, что такой сайт долго грузится, на него еще не любят заходить поисковые роботы для индексации страниц.
Как таковая табличная верстка сейчас не используется, но без нее не обходятся при верстке электронных писем – там она, можно сказать, обязательна. Сама верстка разрабатывается с помощью тега <table>, который задает основные параметры таблицы – длину, ширину и прочее. Внутри тега располагаются теги <tr> и <td>, где первый необходим для создания строки, а второй – для столбца.
Блочная верстка
Самый актуальный вид верстки сайтов – блочный. Он основан на теге <div>, с помощью которого создаются контейнеры, включающие в себя весь контент страницы или отдельного блока. Например, мы можем разделить сайт на несколько блоков: первый экран, о компании, контакты – для каждого блока будет отведен свой тег <div>.
Внутри тега <div> уже находятся другие теги, отвечающие за те или иные элементы. Вот пример небольшого блока:
<div>
<h2>Привет – это мой первый сайт!</h2>
<p>Сегодня 2021 год и я сделал свой первый сайт...</p>
<img src="C:\Users\ya\Desktop\8ftyrtes-960.jpg" alt="">
</div>Прописав его в HTML-документе, получим следующую страницу:
При таком подходе язык разметки HTML всегда взаимодействует с CSS-стилями, которые преобразуют обычную страницу в стильное дизайнерское решение: добавляются цвета, устанавливаются отступы для элементов, задается базовая анимация и многое другое.
Например, у нас есть тег h2, и мы хотим сделать его красным – для этого в стилях прописывается следующий код:
h2{
color: red;
}Заголовок нашей страницы примет следующий вид:
HTML и CSS обычно хранят в разных файлах – такой подход позволяет быстро вносить изменения и не путаться в больших проектах.
Также стоит сказать, что блочная верстка позволяет легко создать адаптивный сайт, что в наше время является обязательным требованием для каждого проекта. Такая разработка позволяет не только создавать сайты для телефонов и планшетов, но и обеспечивает попадание сайта в топ выдачи поисковых систем.
Вот так выглядит типичная схема блочной верстки:
Валидная верстка
Валидная верстка – это верстка, соответствующая стандарту W3C и означающая корректное отображение сайта на всех пользовательских устройствах. Такой подход обеспечивается строгим соблюдением правил построения кода, его оптимизации и минимизации. В результате это позволяет выводить сайт на более высокий уровень – его репутация в поисковиках сильно улучшается.
При валидной верстке элементы HTML-кода должны находиться строго на своих местах, в начале обязательно прописывается тег <!Doctype html>, а также <html>, <head>, <body>.
Когда верстка считается правильной
Существует множество правил, которых следует придерживаться во время верстки.
Нарушение некоторых из них может привести к плохой оптимизации сайта.
- Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
- Весь написанный код должен быть чистым и легко читаемым.
- Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
- Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
- Сайт должен работать одинаково во всех браузерах.
- Используйте заголовки h2-H6, а также знайте, что h2 – единственный заголовок на одной странице. Важно соблюдать это правило, иначе могут появиться проблемы с поисковыми системами.
- Также для поисковиков важно, чтобы были заполнены атрибуты <title>, <alt> и <description>.
- Не используйте «тяжелые» изображения, чтобы избежать длительной загрузки сайта.
- Сайт должен быть адаптирован для мобильных устройств.
Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.
Инструменты для верстки сайта
Верстальщик – это не простой разработчик, который работает с блокнотом и пишет в нем теги да атрибуты.
Если говорить об инструментах разработчика, то чаще всего используются:
- Notepad++ – простой редактор кода;
- SublimeText – наиболее используемый редактор;
- Webstorm – самый мощный редактор.
Последняя программа для верстки сайтов платная, однако для обучения можно получить ее студенческую версию даром и с полным функционалом.
Как проверить верстку
После того как сайт будет сверстан, потребуется проверить его работоспособность. Базовое тестирование включает в себя проверку адаптивности на всех устройствах.
Более обширную информацию можно получить на сервисах Jigsaw.W3 и Validator.
W3.
Если требуется узнать, соответствует ли верстка макету пиксель в пиксель, то для этого подойдет сервис WellDoneCode.
Сервис Page Ruler нужен как линейка, чтобы в пикселях измерить сверстанные блоки и прочие элементы страниц.
Window Resizer – расширение для Google Chrome, позволяющее узнать, насколько хорошо страница адаптирована под разные устройства.
введение в FlexBox и практика
Будь вкурсе свежих уроков!
В категории: Курсы Frontend — HTML, CSS и JavaScript
Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.
https://www.
youtube.com/embed/CDWMSF0nI2A
5 273 просмотра
Чтобы научиться делать сайты, нужно точно понимать, что сайт состоит не только из вёрстки. Разработка сайта состоит из несколько этапов: 1 – разработка дизайн-макета сайта, 2 – вёрстка дизайн макета (Frontend), 3 – серверная часть где происходит настройка самого сайта (Backend).
Вёрстка сайта по сути – это превращение изображения (будь то картинка в формате JPG или картинка в формате PSD Adobe Photoshop) в кликабельную страницу в браузере.
Существует несколько подходов, а именно разновидности вёрстки сайтов.
В данном миникурсе речь пойдёт о более современном виде вёрстки – FlexBox. Почему современном, ответ простой. Вся суть кроется в простоте адаптировать сайт под мобильное устройство.
Содержание видеокурса:
- Введение в FlexBox
- Первая сетка
- Адаптивная верстка сайта. Макет.
- Верстка сайта адаптивно с flexbox 2.
- Делаем header и навигацию сайта
- Продолжаем, верстка SideBar сайта
- Верстка адаптивного слайдера
- Верстка галереи адаптивно
- Верстка постов блога
- Верстаем форму регистрации
- Верстка адаптивного макета сайта
Что такое сетка и какие способы существуют помимо FlexBox
Любой сайт состоит из блоков, которую можно представить в виде сетки. Например, меню сайта слева, а текстовый блок справа, в общей сложности уже получилась сетка из двух ячеек. На сегодняшний день, существует несколько способов разбить сайт на блоки:
- При помощи готовых CSS-стилей, где вам нужно лишь сделать разметку в HTML документе. Другими словами, CSS-Framework или в переводе CSS-шаблон. Один из более известный на сегодняшний день Framework – Bootstrap.
- При помощи плавающих блоков (свойства FLOAT)
- При помощи inline-блоков
- Более сложные и старые методы, например, при помощи таблиц, но данный способ давно устарел.
Другими словами, CSS-Framework или в переводе CSS-шаблон. Один из более известный на сегодняшний день Framework – Bootstrap.Как сверстать сайт без сервера и хостинга
На самом деле многие входят в заблуждение что чтобы сделать сайт потребуется определённое ПО или покупка хостинга. Для многостраничных сайтов да, ПО потребуется, но чтобы сверстать одну страничку потребуется лишь создать текстовый файл и поменять расширение с .txt на .html и открыть файл при помощи браузера. Далее потребуется лишь найти видеоуроки по вёрстке сайта.
Как работает всё остальное вы можете узнать в разделе Программирование: в разделе web-разработка.
Почему стоит начинать с FlexBox
У большинства способов, которые были упомянуты выше есть свои недостатки с выравниванием по вертикальной плоскости и подстройкой под ширину экрана.
Многие годы разработчики мучились с подгонкой определённой длины, отступами чтобы сделать так как в макете. FlexBox разработан чтобы упростить вёрстку сложных страниц и неординарных решений в дизайне сайтов.
С чего начать вёрстку сайта:
Первый шаг: начать с выбора среды разработки.
Для вёрстки сайта необязательно скачивать Adobe Dreamviewer или подобные сложные и непонятные программы. Знающий специалист знает, что для того чтобы поменять номер телефона на сайте или названия кнопки достаточно простого Блокнота. Но чтобы ускорить процесс написания кода, всё-таки лучше скачать программу, в которую уже встроены все удобные функции. Например, можно скачать самый простой вариант NotePad++ или более современные программы как WebStorm или PHPStorm.
Второй шаг: найти видеоуроки
Наш ресурс предназначен для тех людей, которые хотят научится самостоятельно. Мы выбираем из интернета лучшие миникурсы и размещаем в специальную категорию. Дополнительно для тех кому требуется поэтапное обучение, на сайте существует специальный раздел, где мы более детально подбираем курсы для изучения с самого начала.
Третий шаг: смотреть видео и стараться производить те же действия что на экране
Практика – лучший инструмент для запоминания тех же CSS-свойств. Свойств очень много и поэтому рекомендуем смотреть видео и писать все вручную.
Четвёртый шаг: скачать все браузеры
Вы спросите зачем скачивать все браузеры. Вопрос хороший, но когда в будущем вы столкнётесь уже с реальным проектом, очень важно просматривать сайт во всех браузерах. Ведь у каждого человека разные предпочтения, кто-то сидит с Google Chrome, кто-то с Firefox Mozilla, а кто-то и вовсе зайдёт на ваш сайт с Internet Explorer 6.0 (очень старый браузер, где FlexBox возможно не поддерживается).
Вы можете поделиться или сохранить для себя этот урок в социальных сетях:
Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов
Что такое верстка сайта?
Верстка сайта — это один из важнейших этапов разработки онлайн-ресурса, в результате которого нарисованный дизайнером макет превращается в HTML и CSS-код.
Эта задача требует особых навыков. Чтобы качественно сверстать HTML-код, нужны глубокие знания особенностей работы браузеров, семантики веб-страниц, принципов позиционирования элементов.
Современные виды верстки сайта
Раньше, чтобы сверстать сайт, использовали HTML-таблицы: каждый элемент помещался в отдельную ячейку, что решало проблемы с позиционированием контента. Однако код получался сложным для поддержки. На смену таблицам пришла блочная верстка: элементы помещались в пустые, независимые контейнеры и размещались на странице при помощи различных CSS-свойств.
Другая проблема, которую нужно решить при верстке — отображение страниц при разных разрешениях экрана.
- Подход, при котором размеры блоков и других элементов указываются в процентах от ширины экрана или родительских элементов называют версткой. При всех преимуществах, такое решение нельзя назвать идеальным. Подобная будет плохо выглядеть на широких и узких экранах: в таких случаях контент будет либо слишком расползаться, либо слишком сжиматься. Изучать его будет неудобно.
- Верстка — более современное и правильное решение, которое подразумевает написание разных правил оформления для экранов с разным разрешением. Это более трудоемкий процесс. Однако это автоматически решает задачу по подготовке мобильной версии сайта: делать этого не нужно, так как страница будет подстраиваться под небольшой экран.
Изучать его будет неудобно.
К написанному коду предъявляется 2 требования. Во-первых, верстка должна быть валидной: грубые семантические ошибки не допускаются,так как это приводит к проблемам с продвижением сайта в поисковиках. Влияние ощутимое. Во-вторых, сайт должен быть кроссбраузерным, то есть одинаково выглядеть во всех популярных версиях браузеров, которые использует целевая аудитория заказчика.
Как сверстать веб-страницу?
Для качественной верстки сайта потребуются специальные знания, которые достаточно трудно получить по книгам и обучающим материалам — многое решает опыт. Понадобятся графический и текстовый редакторы.
На первом этапе верстальщик занимается дизайном сайта — необходимо изучить структуру макета, чтобы определить основные блоки и продумать стратегию работы. Далее начинается написание кода. Вёрстка веб-страниц требует от исполнителя усидчивости и разумной доли перфекционизма: результат должен быть неотличим от созданного дизайнером макета.
Когда весь код написан, работа ещё не завершена. Необходимо убедиться, что исполнитель сверстал сайт правильно — для этого проводится тестирование кода в разных браузерах, при разных разрешениях экрана. Обычно этим занимаются специально обученные люди или сам верстальщик.
Важно понять, правильной версткой сайтов можно назвать только такую работу, которая соответствует требованиям заказчика и выполняет поставленные задачи.
Как верстать сайт без макета
Вы здесь:
Главная — HTML — HTML 5 — Как верстать сайт без макета
Один наш ученик спрашивает: На фриланс-биржах, каждый десятый заказчик, кидает ссылку на какой-нибудь сайт, чаще всего лендинг и просит сделать, точно такой же.
Как можно выполнить такой заказ, когда нет дизайн-макета?
Понятное дело, что опытный дизайнер, просто возьмет и нарисует макет заново. Однако, наши, горе заказчики, не спешат расстаться с кругленькой суммой. Ведь услуги дизайнера, стоят дороже, услуг верстальщика. Поэтому и обращаются, они конкретно к верстальщикам.
С чего начать?
Нужно открыть исходный код сайта и вытащить оттуда изображения. Картинка, не будет отображаться в браузере, если её не пересохранить в каком-нибудь графическом редакторе.
Кнопка Сохранить как (целиком сайт), в этом случае не поможет – не сомневайтесь, что хитрые сервисы-конструкторы и об этом позаботились.
Установить все необходимые расширения для Google Chrome. Ловлю себя на мысли: «Что опять без гугла не обойтись?»
Список расширений для Google Chrome
- CSSViewer – покажет значения свойств у элементов
- Page Ruler – линейка для замера отступов и размеров
- Bootstrap Grid for any Website – наложить полупрозрачную сетку на сайт
Если собираетесь делать верстку не по Bootstrap сетке, то не ставьте это расширение.
Но, я рекомендую этот способ, поскольку большинство конструкторов, работают с модулями, сверстанными по Bootstrap сетке.
HTML разметка
Подключаем библиотеку Bootstrap, смотрим на сайт, считаем колонки, прописываем классы и теги – делаем так же, как по макету.
<header>
<div>
<div>
<div>
<h2>Кухни C2O interior</h2>
</div>
<div>
<p>+380636037502<br>
<span>Перезвоните мне</span>
</p>
</div>
</div>
<div>
<div>
<h3>Сделаем вам кухню с уникальным дизайном<br></h3>
<p>Своё производство, работаем от идеи до результата!</p>
</div>
</div>
</div>
</header>
CSS код
Включаем расширение CSSViewer, двигаем к элементу и считываем CSS стили.
Линейкой Page Ruler, замеряем расстояние между элементами.
.header {
background:
linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/bg_header.jpg") center no-repeat;
background-size: cover;
width: 100vv;
height: 100vh;
}
Заключение
Давайте посмотрим, что же вынуждает заказчика, копировать чужой сайт? А чужой ли? Явление это отнюдь не новое и название ему — конструкторы. Многие люди повелись на иллюзорную дешевизну и простоту, создали на конструкторе себе сайты. Но конструкторы так устроены, что оттуда нельзя забрать сайт. Они зарабатывают на размещении вашего сайта на хостинге, который на самом деле, вам не принадлежит. Вот и предлагают «владельцы своих сайтов», верстать не по макету, а по браузерной интерпретации.
-
Создано 24.07.2019 10:59:43 -
Михаил Русаков
Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.
ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]
ru»]Как создать свой сайт[/URL]
Что должен уметь верстальщик — Блог HTML Academy
В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.
Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.
И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.
В этом и заключается суть работы верстальщиков.
Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.
С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.
Мы в HTML Academy работаем над тем, что верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.
Идеальная вакансия
Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще.
Оказалось, что усреднённая вакансия выглядела бы как-то так:
Требуется верстальщик, который:
- Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
- Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
- Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
- Использует Git. Умеет работать в GitHub.
- Может натянуть вёрстку на CMS: Bitrix и Wordpress.
- JavaScript пишет с помощью jQuery, но не чурается ES6.
- Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
- Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
- Имеет своё портфолио, инициативный, готов пройти испытательный срок
Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.
Верстальщический вундерлист
Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.
Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).
- SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
- Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
- БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
- Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
- PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
- Git — система контроля версий, чтобы не делать
Макет_2_Финальный_СПравками_final_наревью.html. Мы в Академии любим Git и написали про него много статей. - Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
- Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
- jQuery — популярное
нечторешение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко. - Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.
Но по макету, чтобы дорого-богато.Что там с Фотошопом и Иллюстратором
Некоторые ребята говорят, что их всерьёз кто-то использует.
Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Иллюстратор, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.
Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.
А портфолио откуда брать?
- Найти бесплатных макетов и наверстать.
- Придумать самому, если есть Дизайнерская Жилка.
- Пройти полноценную подготовку к работе и получить пару проектов в портфолио.
Что об этом всём думают в индустрии?
Я спросил Катю, которая раньше верстала в Яндекс.Деньгах, о том, что должен уметь верстальщик, чтобы его все хотели. Катя отвечает:
По опыту: нужно точно, быстро и адаптивно.
Точно — значит по макету: надо уметь открыть
psdи померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.Чтобы собрать своё добро, нужно знать, где скачать Node.
В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.
Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.
Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.
Катя Иванова, перевела бабушку на React.
js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.Что ещё?
Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте.
Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.
Новая профессия не за горами
Мы перезвоним и расскажем всё о том, как стать верстальщиком.
Хочу консультацию
Нажатие на кнопку — согласие на обработку персональных данных
Верстка сайта из PSD макета
В предыдущей статье я наглядно показал, как создать макет сайта в программе Photoshop, и в итоге получился простой, но не режущий глаз шаблон.
В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).
Вообще подходов к подготовке шаблонов существует множество: кто-то сначала досконально прорисовывает шаблон и только потом занимается вёрсткой, кто-то отрисовывает дизайн приблизительно, добавляя штрихи во время вёрстки; одни сначала рисуют, затем занимаются нарезкой, другие (как мы в прошлой статье) сохраняют графические объекты непосредственно в процессе создания дизайна.
Даже инструменты вёрстки и рисования у каждого свои: одни ставят плагины и работают в визуальных редакторах, другие используют стандартный набор возможностей и верстают в простом редакторе… в общем, ниже будет приведён всего лишь один способ из многих.
Подготовительный этап
Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:
- back_all — подложка сайта.
- header_top — фон шапки.
- big_pic — логотип.
- title — фон заголовков левой панели.
- footer — заливка низа сайта.
- 1mini — первое фото для основной части страницы.
- 2mini — второе фото.
В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.
Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.
Делим документ на блоки
Откройте документ index.html и впишите в него следующий код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шаблон сайта</title> <meta name="keywords" content=""> <meta name="description" content=""> <link href="styles.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> </body> </html>
Сохраните файл. Все эти теги мы уже давно изучили и в пояснении они не нуждаются. Кодом выше мы создали основу HTML-страницы, теперь нужно разделить её на блоки — указать структуру документа, что за чем в нём будет идти.
Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):
1. content — блок, внутри которого будут храниться остальные блоки.
2. header — блок шапки, внутри которого будут:
2.1. menu — верхняя навигация.
2.2. logo — картинка с текстом.
3. right — основная часть страницы.
4. left — панель слева.
5. footer — низ сайта.
Так и запишем (в контейнер <body> вставьте следующий код):
<div> <!-- Шапка --> <div> <div> </div> <div> </div> </div> <!-- Конец шапки --> <!-- Основной блок --> <div> </div> <!-- Конец основного блока --> <!-- Левая панель --> <div> <div> <!-- Конец левой панели --> <!-- Ноги сайта --> <div> </div> <!-- Конец --> </div>
В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.
Устанавливаем базовое форматирование
Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.
Откройте style.css и добавьте туда строки кода, которые встретите ниже.
Убираем отступы и поля на странице по умолчанию:
*
{
margin: 0px;
padding: 0px;
}Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:
a:link {
color: #D72020;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #D72020;
}Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:
body {
background: #FFD723 url(images/back_all.jpg) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}Определение блока content:
#content {
margin: 0 auto;
background: #ffffff;
width: 786px;
text-align: left;
}Вот теперь можно обновить страницу.
Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.
Оформляем горизонтальное меню
Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.
Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.
Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:
#header {
background: #ffffff;
height: 306px;
text-align: left;
}Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы.
Логично было бы прямо сейчас заняться горизонтальным меню. Так мы и поступим, но только прежде, чем вставлять его в HTML, нужно подготовить правила CSS, иначе смотреться в браузере это будет ужасно.
Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:
#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top. gif) repeat-x;
}
gif) repeat-x;
}Страница в обозревателе тут же преобразится и будет выглядеть так.
Теперь можно добавить и само меню в файл index.html:
<table> <tr> <td><a href="#" title="">Главная</a></td> <td><a href="#" title="">Галерея</a></td> <td><a href="#" title="">Договор</a></td> <td><a href="#" title="">Прайс</a></td> <td><a href="#" title="">Образцы</a></td> <td><a href="#" title="">Контакты</a></td> </tr> </table>
Обновив страницу можно увидеть, что оно действительно появилось.
Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание:
#menu a {
float: left;
width: 99px;
height: 46px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 35px;
}
#menu a:hover {
color: #D72020;
text-decoration: underline;
}Теперь форматирование меню можно сопоставить с PSD-шаблоном.
Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).
Настраиваем логотип
Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.
#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}Логотип вставлен ровно по размеру.
Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:
<div> <h2><a href="#">Имя сайта</a></h2> <h3><a href="№">Слоган сайта</a></h3> </div>
Текст появился, но его тоже нужно оформлять.
Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам.
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 36px;
color: #FFFFFF;
}
#logo h3 a
{
font-size: 24px;
}Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.
Верстаем основную часть страницы
Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).
#right
{
float: right;
width: 500px;
padding-right: 10px;
}
#right h5
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #D72020;
}
#right a
{
color: #D72020;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h3 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #D72020;
}Так как мы зафиксировали только ширину блока, видимых изменений наблюдаться не будет до тех пор, пока мы не наполним его контентом — высота страницы будет меняться в зависимости от содержимого.
Заполним контейнер right. Изображения поместим в простую таблицу.
<h3>Галерея</h3><br /> <h3>Кухни</h3><br /> <table cellspacing = 40> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> </table>
Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.
Создание левой панели
Во время вёрстки, но уже после отрисовки макета, выяснилось, что боковое меню ещё будет иметь подпункты, причём они должны появляться при наведении на главный пункт и исчезать, когда указателя на нём нет.
Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.
В файл CSS впишите следующий код.
#left
{
padding: 10px;
width: 237px;
padding-right: 1em;
}
#left h4
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}
#left ul {
margin: 0;
padding: 10px;
list-style: none;
width: 100px;
font-size: 18px;
}
#left li ul {
position: absolute;
left: 90px;
top: 0;
display: none;
}
#left ul li {
position: relative;
margin-bottom:20px;
}
#left ul li a {
display: block;
text-decoration: none;
color: #ffffcc;
background: #ff9900;
padding: 5px;
border: 1px solid gold;
border-bottom: 0;
}
#left li:hover ul {
display: block;
}
#left li li {
margin-bottom:0px;
width: 150px;
}
#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.
В контейнер left HTML-документа добавим сначала информационный блок без меню.
<h4>Информация</h4> <p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br /> <h4>Меню</h4>
Белый фон распространился ещё ниже по странице.
Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.
<ul> <li><a href="#">Галерея</a> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Кровати</a></li> <li><a href="#">Стенки</a></li> <li><a href="#">Прихожие</a></li> <li><a href="#">Шкафы-купе</a></li> <li><a href="#">Компьютерные столы</a></li> </ul> </li> <li><a href="#">Договор</a></li> <li><a href="#">Прайс</a> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Кровати</a></li> <li><a href="#">Стенки</a></li> <li><a href="#">Прихожие</a></li> <li><a href="#">Шкафы-купе</a></li> <li><a href="#">Компьютерные столы</a></li> </ul> </li> <li><a href="#">Образцы</a> <ul> <li><a href="#">Стекло</a></li> <li><a href="#">ДСП</a></li> <li><a href="#">Фурнитура</a></li> <li><a href="#">И т.
д.</a></li>
</ul>
</li>
<li><a href="#">Контакты</a>
<li><a href="#">Важно</a>
</li>
</ul>Взгляните, как смотрится список. Многие могут подумать, что это таблица.
Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).
Делаем ноги
Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.
#footer {
height: 44px;
clear: both;
padding-top: 20px;
background: url(images/footer.gif) repeat-x;
border-top: 5px solid #A6640E;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #ffffff;
}
#footer a {
color: #ffffff;
}Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).
<p>Copyright © 2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a></p> <p>+7-(777)-777-77-77 | <a href="#">Москва</a></p>
На этом оформление сайта завершено.
В результате мы получаем законченный, готовый к использованию шаблон, части которого можно вынести в отдельные PHP-файлы, сделав из статической страницы динамическую.
Получившийся код здесь приводить не буду — вы можете просто скачать весь шаблон.
Полезные ссылки:
Как сверстать шаблона сайта из PSD в HTML и CSS
Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.
Так же по теме
Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и PSD макет сайта.
И конечно же Вы сможете посмотреть демо шаблона в действии.
Подготовка
Для начала нам необходимо создать простую папку, желательно на рабочем столе, чтобы не потерять её. Там будут лежать все наши файлы, которые входят в шаблон сайта.
Создаём папку, называем её как Вашей душе угодно. И создаём папку ещё одну, и называем её images, думаю, что тут всё понятно, в этой папке будут лежать все картинки. После нужно создать ещё обычный текстовый документ и назвать его index.
Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.
Добавляем разметку HTML
Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.
Открываем наш текстовый документ index и вставляем в него следующий код:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.
js"></script>
<meta charset="utf-8" />
<title>Макет</title>
</head>
<body>
<!-- Начало хидер -->
<header>
<div>
</div>
</header><!-- Конец хидер -->
<!-- начало врапер -->
<section>
<div>
<div>
<div>
</div><!-- Конец коллефт -->
<aside>
</aside><!-- Конец колрайт -->
</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->
<!-- Начало футер -->
<footer>
<div>
</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->
</body>
</html>Теперь давайте подробнее остановимся на коде.
Будущий шаблон у нас будет делиться на три части.
Это шапка сайта, середина, и низ сайта.
Шапка сайта
За верх сайта у нас отвечает вот этот код:
<!-- Начало хидер --> <header> <div> </div> </header><!-- Конец хидер -->
В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.
А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.
Середина сайта
За средний участок отвечает вот этот код:
<!— начало врапер —>
<section> <div> <div> <div> </div><!-- Конец коллефт --> <aside> </aside><!-- Конец колрайт --> </div><!-- Конец контент --> </div><!-- Конец мидл --> </section><!-- Конец врапер -->
- id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
- id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
- id=»colLeft» — левая сторона сайта (Посты)
- id=»colRight» — правая сторона (Сайдбар)
Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.Низ сайта
С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.
<!-- Начало футер --> <footer> <div> </div><!-- Конец футериннер --> </footer><!-- Конец футер -->
Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.
Вёрстка HTML и CSS
Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.
После того как Вы вставили код в наш текстовый документ index, его нужно сохранить.
Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.
Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».
CSS
Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом </head> ставим теги <style> … </style>, а между ними, соответственно будет располагаться код CSS.
Добавляем вот этот код CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
color:#333;
background: #fff;
font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:0.94em;
line-height:135%;
}
aside, nav, footer, header, section { display: block; }
ul {
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.
Для списков мы отключили точки, а для ссылок отменили подчеркивание.
Это так сказать стандартные стили, их можно изменять по собственному желанию.
Главные блоки (верх, середина и низ)
Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера.
/* -------------------------------
Главные блоки
----------------------------------*/
#wrapper {
margin-top:40px;
width: 1200px;
margin: 0 auto;
height: auto !important;
}
.header{
width:100%;
background: #0dbfe5;
height:57px;
z-index: 4;
}
#headerInner {
position:relative;
border:0px solid #333;
width:1200px;
height:250px;
margin:0 auto;
margin-top:0px;
}
#content {
margin-top:40px;
}
#content #colLeft {
background: #fff;
float:left;
width:800px;
margin-right:0px;
}
#content #colRight {
margin-left:45px;
float:left;
width:350px;
position:relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;
Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content будет выравнивать сверху левую и правую сторону сайта.
#colLeft отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.
Верхнее меню
В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:
<nav> <ul> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> <li><a href="#">Страница 4</a></li> </ul> </nav>
Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:
Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.
Переходим во вкладку «Файл» и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.
А вот теперь мы можем смело добавить стили для нашего меню, вот они:
/* Верхнее правое меню */
.topMenuRight {
height:57px;
position:absolute;
left:0px;
top:0px;
border: 0px solid #1FA2E1;
}
.topMenuRight ul li {
background: url(images/line.png) 0px 0px no-repeat;
float:left;
height: 57px;
}
.topMenuRight ul {
padding-left:0px;
}
.topMenuRight ul li a{
margin-top:0px;
font-weight:100;
border-right:0px solid #adadad;
display:block;
color:#fff;
text-decoration:none;
line-height:20px;
font-size:18px;
padding:16px 20px 21px 20px;
}
.topMenuRight ul li a:hover{
background: #fff;
color:#555;
}Вот, что должно получиться:
Иконки социальных закладок
Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.
Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.
Теперь под HTML кодом меню добавляем вот этот код:
<div> <a href="#" title="Следить в Twitter!" target="_blank"></a> <a href="#" title="Подписаться на rss" target="_blank"></a> <a href="#" title="Подписаться по e-mail" target="_blank"></a> </div>
А в стили CSS нужно добавить вот это:
.share-new {
z-index: 1;
position:absolute;
right:0px;
top:14px;
}
.share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }
.share-new .icon-twitter {
background: url(images/twitter-variation.png) 0 center no-repeat;
padding:4px 0px 0px 5px;
font-size:17px;
margin-right: 3px;
}
.share-new .icon-rss {
background: url(images/rss-variation.png) 0 center no-repeat;
padding:4px 0px 0px 5px;
font-size:17px;
margin-right: 0px;
}
.share-new .icon-mail {
background: url(images/email-variation.png) 0 center no-repeat;
padding:4px 0px 0px 5px;
font-size:17px;
margin-right: 0px;
}Вот результат:
Логотип
В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:
<div> <a href="#"><img src="images/logo.png" alt="Блог" /></a> </div>
А вот и стили:
/*----------------------------
Логотип
------------------------------*/
.logo {
position:absolute;
left:0px;
top:90px;
}Главное, выпадающее меню
Под кодом логотипа добавляем код главного меню:
<!-- Начало #bottomMenu --> <nav> <ul> <li><a href="#">Категория</a> <ul> <li><a href="#">Подменю #1</a></li> <li><a href="#">Подменю #2</a></li> <li><a href="#">Подменю #3</a></li> <li><a href="#">Подменю #4</a></li> </ul> <li><a href="#">Категория 1</a></li> <li><a href="#">Категория 2</a></li> <li><a href="#">Категория 3</a></li> <li><a href="#">Категория 4</a></li> </ul> </nav><!-- конец #bottomMenu -->
Но не будем спешить добавлять стили, сначала нужно вырезать фон из макета PSD.
Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):
Выбираем инструмент «Рамка»
Когда инструмент выбран нужно выделить тонкую полосу фона. Главное, чтобы рамки верха низа точно совпадали с выделением:
Теперь по выделенной области нажимаем левой кнопкой мыши два раза. После этого тот фон, что нам нужен для меню автоматически обрежется. Вам только нужно сохранить его для web в папку images под именем bgmenu.
Ну а сейчас можно смело добавлять CSS:
.bottomMenu {
width:1200px;
height: 70px;
position:absolute;
left:0px;
bottom:0px;
background: url(images/bgmenu.png) 0px 0px repeat-x;
}
#dropdown_nav {
font-weight:bold;
display:inline-block;
list-style:none;
border-bottom:0px solid #777;
margin-top:18px;
}
#dropdown_nav li {
float:left;
position:relative;
display:inline-block;
}
#dropdown_nav li a {
font-weight:100;
font-size:18px;
color:#fff;
padding:15px 22px 20px 22px;
background: url(images/linemenu.png) right no-repeat;
-moz-transition: background-color 0.3s 0.01s ease;
-o-transition: background-color 0.3s 0.01s ease;
-webkit-transition: background-color 0.3s 0.01s ease;
}
#dropdown_nav li a:hover {
background: #000;
text-decoration:none;
color:#0dbfe5;
}
#dropdown_nav li a.first {
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
}
/* Выпадающее меню */
#dropdown_nav .sub_nav {
z-index: 4;
width:180px;
padding:0px;
position:absolute;
top:42px;
left:0px;
border:0px solid #ddd;
border-top:none;
background: #000;
}
#dropdown_nav .sub_nav li {
width:180px;
padding:0px;
}
#dropdown_nav .sub_nav li a {
background: none;
font-weight: normal;
font-size:15px;
display:block;
border-bottom:0px solid #e5e0b3;
padding-left:10px;
color:#fff;
}
#dropdown_nav .sub_nav li a:hover {
background:#222;
color:#0dbfe5;
}Результат:
Блок «Последние записи»
Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:
<div> <h3>Последние записи</h3> </div>
Левый блок с последними записями
Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:
<!-- Начало .postBox --> <article> <div><a href="#"><img src="images/tumb.png"/></a></div> <h3><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h3> <div> Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a> </div> <div> <p>Приветствую Вас, уважаемые читатели блога. Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p> </div> <div><a href="#">Далее</a></div> </article> <!-- Конец .postBox --> <div></div>
Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.
Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.
И конечно же не забываем про CSS для постов:
.raz {
margin:0 auto;
border:0px solid #333;
background: #fff;
width:116px;
height:29px;
margin-bottom:50px;
background: url(images/raz.png) 0px 0px no-repeat;
}
.postBox {
border:0px solid #333;
background: #fff;
width:700px;
margin-top:0px;
margin-left:0px;
margin-bottom:50px;
}
.postBox h3 a {
font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
color:#000;
font-style:normal;
font-weight:100;
font-size:33px;
line-height:35px;
-moz-transition: all 0.3s 0.01s ease;
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
.postBox h3 a:hover {
color:#0dbfe5;
}
.postBox .textPreview {
border:0px solid #333;
width:800px;
margin-bottom:30px;
}
.postBox .textPreview p{
margin-top:0;
}
.postBox .postThumb{
margin:0px 0px 15px 0;
}
.postBox .postMeta {
padding-bottom:15px;
clear:left;
overflow:hidden;
}
.more-link a {
border-radius: 3px;
background: #0dbfe5;
margin-top:30px;
font-weight:600;
color:#fff;
font-size:17px;
padding:6px 25px 9px 25px;
-moz-transition: all 0.3s 0.01s ease;
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
.more-link a:hover {
background:#000;
color:#0dbfe5;
}Чтобы лучше было видно как будет смотреться макет, просто скопируйте HTML код блока постов и поставьте один под одним. В итоге вот что получится:
Правая часть (Сайдбар)
Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:
<form method="get" action="/search" target="_blank"> <input name="q" value="" placeholder="Поиск..."> <input type=submit value=""> </form>
И стили для поиска:
#form-query {
position:relative;
background:#eeeeee;
border:0px solid #e4e4e4;
width:335px;
height:31px;
padding:8px 10px 7px;
font-weight:100;
font-size:18px;
color:#000;
margin-bottom: 30px;
}
#form-querysub {
position:absolute;
right:15px;
top:15px;
width:17px;
height:17px;
background:url(images/search.png) 0px 0px no-repeat;
border:0px dashed #333;
}
#form-querysub:hover {
cursor: pointer;
}Виджет
После кода поиска вставляем:
<div> <h3>Виджет 2</h3> <ul> <li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li> <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб – проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб – проектов</a></li> <li><a href="#" title="Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery">Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li> <li><a href="#" title="500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов">500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li> <li><a href="#" title="Бесплатные PSD и CSS3 меню для Вашего веб проекта">Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li> <li><a href="#" title="Примеры идеального сочетания цветов в веб – дизайне">Примеры идеального сочетания цветов в веб – дизайне</a></li> <li><a href="#" title="Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS">Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li> <li><a href="#" title="Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей">Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li> <li><a href="#" title="Примеры игр которые сделанные с помощью html5 canvas">Примеры игр которые сделанные с помощью html5 canvas</a></li> <li><a href="#" title="Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов">Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li> </ul> </div>
Из макета не забываем вырезать голубую иконку. Вырезается она точно также как и иконки социальных закладок (смотреть выше), только имя для нею нужно задать h3img и сохранить в папке images нашего шаблона.
CSS код виджетов:
.rightBox {
margin-top:0px;
margin-left:0px;
width:330px;
margin-bottom:30px;
}
.rightBox h3 {
width:335px;
background:#f7f7f7 url(images/h3img.png) 320px 14px no-repeat;
font-size:18px;
font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif;
color:#333;
display:block;
padding:10px 0 15px 20px;
}
.rightBox ul li{
width:350px;
padding:10px 0px;
border-bottom:1px solid #f6f6f6;
font-size:14px;
line-height: 16px;
}
.rightBox a {
color:#333;
}
.rightBox a:hover {
color: #0dbfe5;
}Футер
После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:
<div> <a href="#"><img src="images/logo.png" alt="Блог" /></a> </div> <nav> <ul> <li><a href="#">Страница 1</a></li> <li><a href="#">Страница 2</a></li> <li><a href="#">Страница 3</a></li> <li><a href="#">Страница 4</a></li> </ul> </nav>
CSS
#footer {
margin-top:50px;
height:100px;
width:100%px;
background: #0dbfe5;
}
#footerInner {
position:relative;
border:0px solid #000;
width:1200px;
margin:0 auto;
height:100px;
}
#footerlogo {
position:absolute;
left:0px;
top:25px;
}
.footernav {
position:absolute;
right:0px;
top:35px;
}
.footernav ul li {
float:left;
}
.footernav ul li a{
margin-top:0px;
font-weight:100;
border-right:0px solid #adadad;
display:block;
color:#fff;
text-decoration:none;
line-height:20px;
font-size:18px;
padding:0px 0px 0px 25px;
}
.footernav ul li a:hover{
color:#333;
}В конечном итоге получаем вот такой шаблон:
Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂
В общем если у Вас будут вопросы спрашивайте в комментариях.
До скорых встреч.
Как создать веб-сайт для вашего бренда или малого бизнеса — советник Forbes
От редакции. Советник Forbes может получать комиссию за продажи по партнерским ссылкам на этой странице, но это не влияет на мнения или оценки наших редакторов.
Независимо от того, являетесь ли вы фрилансером или владельцем малого бизнеса или просто хотите место для размещения своих профессиональных достижений, разумно инвестировать в веб-сайт, который поможет вам расширить вашу аудиторию, привлечь потенциальных клиентов и обеспечить надежное присутствие в Интернете.
СОДЕРЖАНИЕ
Как создать веб-сайт: пошаговое руководство, которое поможет вам начать работу
Ваш сайт — самый эффективный инструмент продаж и маркетинга в вашем арсенале. Всего за пять простых шагов вы можете создать красивый личный или деловой веб-сайт, который будет привлекать посетителей и вдохновлять их работать с вами. Вот как начать.
1. Выберите доменное имя
Домен — это уникальное имя вашего сайта.
Вы можете выбрать любое имя, но лучше всего, чтобы оно соответствовало названию вашей компании или профессии.Это не только обеспечивает единообразие вашего бренда, но также может существенно повлиять на то, как вы выглядите в результатах поиска. Хорошее доменное имя может помочь вам занять более высокое место в рейтинге, что может увеличить количество людей, которые нажимают на ваш сайт.
Во время мозгового штурма доменных имен обратите внимание на следующие полезные советы:
- Включите ключевые слова, релевантные вашему бизнесу, чтобы повысить вашу видимость в поисковых системах.
- Убедитесь, что это легко писать.
- Если у вас возникли проблемы с мозговым штурмом, используйте генератор доменных имен как отправную точку.
- Сделайте свой домен коротким, чтобы его было легче запомнить посетителям.
- Избегайте сокращений, аббревиатур, дефисов и цифр.
- Стремитесь использовать традиционные домены верхнего уровня или TLD, такие как .com или .net, или те, которые лучше всего подходят вам или вашему бизнесу.
- Убедитесь, что никто больше не использует его. Хотя вы можете купить домен у кого-то еще, это может обойтись дорого. Возможно, вам лучше выбрать другое имя или использовать другой домен верхнего уровня, например.net, вместо этого.
2. Зарегистрируйте свой домен и выберите поставщика дизайна и хостинга
После того, как вы выбрали доменное имя, вам необходимо зарегистрировать его у регистратора доменов. Вы можете сделать это с помощью таких веб-сайтов, как Domain.com или Network Solutions. Имейте в виду, что эти поставщики просто регистрируют за вас право собственности на домен, что может стоить от 10 до 20 долларов в год, в зависимости от вашего TLD.
Вам все равно нужно будет найти другого провайдера для размещения URL-адреса, по которому вы будете создавать свой веб-сайт и, возможно, использовать другую программу для его разработки.Чтобы упростить задачу, вы можете зарегистрировать свой домен у поставщика, который предлагает возможности регистрации, хостинга и дизайна.
Если у вас мало опыта программирования, вам может понадобиться универсальный вариант, например WordPress, Squarespace или Wix.
Если вы решите использовать отдельные компании для управления своим веб-хостингом и проектированием, ищите услугу хостинга, которая предлагает такие преимущества, как техническая поддержка, бесплатное доменное имя или сертификат Secure Sockets Layer (SSL).
Вам следует серьезно подумать о сертификате SSL, поскольку это глобальная стандартная технология безопасности, которая обеспечивает безопасное соединение и защищает ваши данные и конфиденциальную информацию, а также данные ваших посетителей.Проще говоря, эта мера безопасности добавляет S в HTTPS перед URL-адресом веб-сайта. Поисковые системы и посетители смотрят на него положительно.
Эти функции более распространены у поставщиков комплексных услуг, но нет никакой гарантии, поэтому убедитесь, что тот, кого вы выберете, предлагает их, прежде чем приобретать план.
Популярные веб-хосты со встроенной интеграцией дизайна и без нее — это Bluehost, DreamHost, GoDaddy и InMotion.
Если ваш веб-хостинг не предоставляет какие-либо функции интеграции, вы можете рассмотреть некоторые сторонние программы для дизайна, это приложения Canva и Adobe Creative Cloud.Вы можете создавать дизайны на этих платформах и встраивать их на страницы своего веб-сайта.
3. Добавьте полезные страницы и интересный контент
У вас есть много вариантов организации контента о вашей компании и ее услугах.
Тем не менее, постарайтесь включить эти важные страницы на свой веб-сайт:
- Замечательная домашняя страница. Центральный узел вашего бизнес-сайта должен увлекать людей и рассказывать им, что именно вы делаете и кому служите.Включите привлекательную графику, читаемые шрифты, краткие и четкие описания и соблазнительные призывы к действию.
- Поучительная страница «О нас». Поделитесь историей происхождения вашего бизнеса. Подчеркните свои достижения, миссию и ценности. Вы также можете представить любых членов команды, чтобы наладить более тесные связи с клиентами.
- Страница бронирования или магазина. Увеличьте доход и интегрируйте стороннюю платформу онлайн-планирования или платформу электронной коммерции, такую как HoneyBook или WooCommerce.
- Доступная страница контактов. Включите учетные записи в социальных сетях, электронную почту, номера телефонов, адреса и контактную форму, чтобы людям было проще с вами связаться. Если это подходит вашему бизнесу, также добавьте часы работы.
- Памятный контент. Совместное использование привлекательного контента делает вас экспертом в своей отрасли и помогает вырастить лояльное сообщество для вашего бизнеса. Это могут быть блоги, видео, эпизоды подкастов, тематические исследования и многое другое. В качестве бонуса этот контент может помочь повысить ваш рейтинг в результатах поиска и увеличить количество посетителей сайта.
- Надежная страница часто задаваемых вопросов. Ответы на общие вопросы не только помогают укрепить доверие к вашему бренду, но также могут уменьшить количество получаемых вами звонков и обращений в службу поддержки.
- Отзывы и освещение в прессе. Повысьте авторитет, поделившись своими успехами. Создайте страницу, на которой будут делиться положительными отзывами о ваших услугах и включать любое упоминание вашего бизнеса в известных СМИ.
4. Оптимизируйте свой сайт для поисковых систем
Поисковая оптимизация, или SEO, — это практика улучшения вашего бизнес-сайта, чтобы ваши страницы занимали более высокое место на страницах результатов поисковых систем (SERP), в первую очередь в Google.Это то, что помогает людям найти вас.
При создании своего веб-сайта помните об этих основных методах SEO, чтобы повысить свою видимость и привлечь больше трафика:
- Используйте релевантные фразы, называемые ключевыми словами, в своих сообщениях и на страницах. Однако не используйте ключевые слова только ради них. Убедитесь, что ваш выбор сделан намеренно. Чрезмерное использование может негативно повлиять на ваш рейтинг.
- Постоянно публикуйте ценный контент для своих клиентов или читателей.
- Выполняйте регулярный аудит или очистку содержимого, чтобы увидеть, что можно консолидировать или обновить.
- Удерживайте скорость загрузки вашего сайта как можно ниже, оптимизируя изображения или включив кеширование браузера. Эти настройки могут помочь вашей веб-странице занять более высокое место в результатах поиска. Вы можете измерить скорость своей страницы на GTmetrix. (Узнайте больше о важности скорости загрузки веб-страницы.)
- Убедитесь, что ваш дизайн и контент правильно работают на компьютерах, мобильных телефонах и планшетах. Не стоит недооценивать эффективность своего сайта на мобильных устройствах. До половины веб-трафика сейчас идет со смартфонов.
Хорошо иметь красиво оформленный бизнес-сайт, но поисковые системы хотят видеть больше, чтобы укрепить ваш авторитет, когда они индексируют его в своих результатах поиска.
Оптимизируя свой сайт для поиска, не забывайте о посетителях. Вам нужно выбрать удобные системы навигации и создавать страницы, обеспечивающие быструю загрузку. Чтобы учесть различные возможности пользователей, следуйте рекомендациям Раздела 508, чтобы сделать ваш сайт максимально доступным.
5. Просмотрите свой сайт, прежде чем нажать кнопку «Опубликовать»
Перед тем как воплотить свой веб-сайт в реальность, вам необходимо протестировать его, чтобы убедиться, что он работает правильно.
Помимо прочего, убедитесь, что вы:
- Прочтите содержимое, чтобы убедиться, что все верно и без ошибок.
- Проверьте неработающие ссылки.
- Удалите содержимое-заполнитель из темы или шаблона вашего веб-сайта.
- Протестируйте свой сайт в браузерах, таких как Google Chrome, Mozilla Firefox, Safari и других.
- Подключите свой веб-сайт к Google Analytics, чтобы отслеживать его эффективность.
Когда будете готовы, нажмите «Опубликовать». Чтобы привлечь трафик на ваш недавно созданный веб-сайт, поделитесь им с друзьями, продвигайте его среди клиентов и разместите в своих профилях LinkedIn, Twitter, Instagram, Facebook и других социальных сетях.
Поддерживайте свой сайт в актуальном состоянии
Вы не закончили работу со своим сайтом в тот момент, когда нажали кнопку «Опубликовать». Чтобы оставаться на высоких позициях в поисковой выдаче и повышать качество обслуживания посетителей, вам необходимо постоянно поддерживать свой веб-сайт.Подумайте о том, чтобы добавить следующее в список дел вашего веб-мастера:
- Используйте инструменты веб-мастеров и аналитики, такие как Google Analytics, чтобы отслеживать, как люди используют ваш сайт. Некоторые показатели взаимодействия с веб-сайтом, которые необходимо отслеживать, включают показатели отказов, рейтинг кликов и среднюю продолжительность сеанса.
- Регулярно обновляйте свой сайт сообщениями в блогах, товарами и рекламными предложениями.
- Выполняйте ежемесячные проверки, чтобы убедиться, что все аспекты вашего веб-сайта, включая внутренние и внешние ссылки, страницы и плагины, работают должным образом.
- Обновите страницу «О нас», указав новых членов команды или достижения.
Со временем вы, возможно, захотите наладить отношения с другими бизнес-сайтами, чтобы завоевать доверие и улучшить свое SEO. Когда другие важные веб-сайты ссылаются на ваш сайт, поисковые системы рассматривают ваш сайт как более заслуживающий доверия и заслуживающий более высокого ранга в результатах.
Часто задаваемые вопросы (FAQ)
Нужен ли моей компании веб-сайт?
Да.Инвестирование в бизнес-сайт позволяет вам привлекать новых клиентов, демонстрировать свои продукты и услуги и занять свое место в своей отрасли.
Сколько стоит создание веб-сайта?
Веб-сайты для стандартного малого бизнеса, личного пользования или портфолио могут варьироваться от бесплатного до 20 000 долларов авансом, а в некоторых случаях и более. Окончательные и текущие расходы зависят от вашего пакета веб-хостинга, надстроек, дизайна, SEO и других настроек. Для среднего веб-сайта малого бизнеса вы можете рассчитывать заплатить от 4000 до 10000 долларов.
Должен ли я создать свой веб-сайт или заплатить за это кому-то другому?
Если у вас значительный бюджет и вы не хотите самостоятельно заниматься дизайном или техническими аспектами, возможно, имеет смысл нанять дизайнера. В противном случае вы можете создать свой собственный веб-сайт, используя удобные для начинающих платформы, такие как WordPress, Wix или Squarespace.
Могу ли я купить доменное имя на постоянной основе?
Нет. Для доменов требуется ежегодная регистрация, но вы можете внести предоплату на срок до 10 лет. Помимо регистрационного сбора, вы можете заплатить единовременный сбор за покупку, в зависимости от доступности или предыдущего владельца желаемого домена.Чем более привлекательным будет название вашего веб-сайта, тем дороже это будет стоить.
7 советов, как сделать ваш сайт более профессиональным
У вашей компании может быть лучшее доменное имя и огромный потенциал, но если ваш веб-сайт второсортный, потенциальные клиенты вряд ли будут заинтересованы и не останутся на вашем сайте надолго.
В конечном итоге, если ваш веб-сайт выглядит непрофессионально, ваша компания будет выглядеть непрофессионально, что может серьезно повредить вашей репутации и бизнес-планам.
Так как же убедиться, что вы проецируете правильное изображение?
Хотя фиксированных правил нет, есть несколько простых способов произвести хорошее впечатление и удержать посетителей на вашем сайте дольше. Вот семь простых стратегий веб-дизайна, которые помогут увидеть ваш бизнес в лучшем свете.
Выберите правильный шрифт и фон
Шрифт может задать тон всему вашему сайту. Дешево выглядящие шрифты создадут впечатление, что ваши продукты и услуги также дешевы, а трудночитаемые шрифты резко увеличивают показатель отказов.
Шрифты
без засечек (без фигурных битов) легче читать на экране компьютера, а черные или темно-серые шрифты на белом или не совсем белом фоне приятны для глаз.
Также черпайте вдохновение из сайтов крупных брендов, на которых много белого пространства вокруг текста, чтобы создать ощущение роскоши и ясности.
Загрузить значок Favicon
Фавиконы — это маленькие значки, которые отображаются рядом с названием вашего веб-сайта на вкладке браузера и слева от имени веб-сайта, отмеченного закладкой.
Они не только укрепляют имидж вашего бренда, но и выделяют ваш сайт, когда кто-то добавляет ваш сайт в закладки.
Это тоже довольно просто — ознакомьтесь с нашим простым руководством по добавлению значка на свой веб-сайт.
Использовать изображения большего размера
Помимо текста, изображения могут превратить обычную страницу в нечто особенное и запоминающееся.
Растущая тенденция к размещению больших изображений на бизнес-сайтах рассказывает историю; Сегодня потребители более заинтересованы, когда видят четкие изображения, соответствующие общему посланию бренда.Сайт Apple — отличный тому пример.
Если ваш бюджет позволяет, вместо использования стоковых изображений обратитесь к профессиональному фотографу.
Это выгодное вложение, если учесть, как это может повлиять на ваш авторитет в глазах потенциальных клиентов.
Сохраняйте простоту
Наличие профессионально выглядящего веб-сайта не означает, что вам нужно добавлять на него яркие элементы. Фактически, как и во многих высококлассных проектах, лучше меньше, да лучше.
Достаточно взглянуть на любой роскошный розничный магазин; По сравнению с бюджетным магазином, здесь обычно меньше выставок и достаточно места, чтобы привлечь внимание к ценным предлагаемым товарам.
Тот же принцип можно применить к веб-сайтам.
Держите его организованным и свободным от беспорядка, чтобы передать ощущение профессионализма. Это также поможет привлечь внимание посетителя к тому, что действительно важно на каждой странице.
Тщательно выбирайте цветовую схему
Как и шрифты и фон, цветовые схемы могут иметь огромное влияние на имидж бренда и немедленную привлекательность вашего веб-сайта.
Многие качественные бренды избегают ярких цветов и высококонтрастных цветовых сочетаний. Более тонкие оттенки обычно выглядят более профессионально и менее «дешево».
Если вы хотите просматривать различные цветовые схемы или создавать свои собственные, бесплатные онлайн-инструменты, такие как Adobe Kuler, идеально подходят как профессиональным дизайнерам, так и дизайнерам-любителям.
Не забудьте про маленькие экраны
Удовлетворение потребностей мобильного потребителя важнее, чем когда-либо прежде, тем более что удобство использования мобильных устройств теперь является фактором ранжирования Google.
Поскольку все больше людей получают доступ к Интернету через смартфоны, адаптивный дизайн для мобильных устройств имеет решающее значение в борьбе за внимание потребителей.
Если ваш сайт плохо смотрится на маленьких экранах, вы будете выглядеть старомодно и непрофессионально.
Работа с правильным дизайнерским агентством
Если вы не профессионал, внести изменения в дизайн веб-сайта может быть непросто. Одна небольшая ошибка в кодировании может испортить целую страницу.К счастью, существует множество инструментов, таких как WordPress, которые позволяют любителю создавать сайты.
Однако, если вы действительно хотите заинтересовать свою аудиторию, возможно, стоит инвестировать в сайт с профессиональным дизайном, на котором люди захотят остаться дольше и вернуться к нему в будущем.
При выборе агентства убедитесь, что оно прислушивается к вашим бизнес-целям и проверяет свое портфолио на предмет предыдущих работ.
Хотя изначально он может стоить дороже, профессиональный дизайн может принести пользу вашему бизнесу в долгосрочной перспективе, и у вас может быть веб-сайт, которым вы можете гордиться.
Заключение
Таким образом, тщательно выбирайте шрифты и цветовую схему, используйте изображения большего размера, оптимизируйте их для мобильных устройств, работайте с дизайнерским агентством, которое понимает ваш бизнес, и помните, что простой дизайн часто бывает лучшим.
Иногда именно небольшие изменения, которые вы вносите в свой веб-сайт, оказывают наибольшее влияние на ваш имидж и репутацию.
Сделайте свой веб-сайт более профессиональным, и вы сможете привлечь нужную аудиторию, создать лояльных подписчиков и, в конечном итоге, увеличить продажи.
Создаете сайт? Подарите ему лучший дом с хостингом для веб-сайтов LCN.
Ваше слово!
Как вы думаете, что делает веб-сайт или страницу непрофессиональными? Есть ли на странице продаж что-то, что заставило бы вас немедленно покинуть страницу и не выполнить заказ? Дайте нам знать!
Как создать веб-сайт в 2021 году: серьезное руководство
🚀 Обновление за сентябрь 2021 года:
Мы недавно открыли для себя Warpgate и мгновенно влюбились — это на порядок проще, чем традиционные способы, описанные в статье ниже.
(и нет, нет необходимости раскрывать партнерскую информацию — мы не получаем никаких комиссионных, потому что Warpgate не имеет партнерской программы; они утверждают, что все эти дополнительные деньги передаются пользователям в виде более низких цен, и сравнивая их цены с другими хостами, похоже, так)
Вы можете получить свой собственный веб-сайт WordPress за пару кликов и примерно за 30 секунд — намного быстрее и проще , чем у старых хостинг-провайдеров.
Из-за этого мы уже используем Warpgate для десятка сторонних проектов.
.. И самое лучшее — бесплатно в течение 30 дней , кредитная карта не требуется — вы можете сосредоточиться на создании своего веб-сайта и добавить доменное имя позже, за небольшую часть стоимости других хостинг-провайдеров.
Обратите внимание, если вы все же решите использовать Warpgate, мы рекомендуем сразу перейти к шагу 3 этого руководства — шаги 1 и 2 будут сжаты менее чем за минуту и пару кликов для вас.
***
Хорошо, вы решили, что вам нужно создать собственный веб-сайт. Прежде всего — поздравляем! Это означает, что вы на самом деле делаете то, о чем мир должен знать. И под миром я имею в виду половину мира, конечно, у остальных еще нет подключения к Интернету (так что будьте благодарны, что у вас уже есть!).
В любом случае, это руководство проведет вас через весь процесс создания веб-сайта в ясной, краткой и, что самое главное, без всякой ерунды манере — у вас будет ваша собственная свежая веб-страница, готовая менее чем за полчаса.И сэкономьте при этом более 200 долларов, сосредотачиваясь только на том, что действительно важно, и пользуясь некоторыми сочными промо-предложениями. Другими словами,
Да, мы все очень хотим начать, но я бы посоветовал сначала обсудить пару вещей (не беспокойтесь, это займет у вас не более 5 минут). Однако, если вы уже дрожите от тяги к созданию сайтов и хотите НАЧАТЬ СЕЙЧАС, просто прокрутите пару абзацев вниз, используя эту ссылку на странице.
Первые дела в первую очередь
Во-первых, давайте проясним с самого начала: хотя это руководство совершенно бесплатно (да!), Оно не о создании бесплатного веб-сайта .Верно, технически это возможно сделать, не тратя ни копейки, но тогда вам придется прибегнуть к использованию бесплатного хостинга (который в основном отстой) или бесплатного плана подписки для конструктора сайтов, такого как Weebly (который будет показывать рекламу и их брендинг на вашем сайте, уф). Самая большая причина, однако, заключается в том, что вы не можете получить бесплатно доменное имя. в этом случае, а использование чужого имени, например mysite.weebly.com, просто не мотивирует ваших посетителей воспринимать вас всерьез. .
Во-вторых, для тех из вас, кто спрашивает «кто вы такой, чтобы говорить мне, как делать вещи ?!», вот краткий обзор плохо скрываемого самовосхваления: меня зовут Андрей Шехирев, я основатель Satori Webmaster Academy (также известный как этот сайт). Помимо создания веб-сайтов для моих собственных проектов и для других людей с 2007 года, я являюсь элитным автором (клянусь, так они это называют) на ThemeForest, крупнейшем в мире рынке шаблонов веб-сайтов — мои продукты помогли более чем 2000 человек создают свои сайты (и нет, я не буду их здесь рекламировать).
За эти годы я испробовал десятки способов создания веб-сайтов, а также протестировал бесчисленное количество разработчиков сайтов, хостинг-провайдеров и систем управления контентом. Текущее руководство — это суть того, что я узнал, и я рад поделиться им с вами сегодня.
Уф! Рад, что все кончено. Теперь, наконец, . Я подумал, что было бы неплохо сообщить вам , что это руководство содержит некоторые партнерские ссылки, а это означает, что я получу фиксированную комиссию от соответствующего поставщика, если вы e.грамм. приобрести тарифный план по ссылке в этом тексте.
Но вот в чем прелесть: эта договоренность не влияет на сумму, которую вы платите , потому что продавец компенсирует нам свои деньги — для них это все равно, что перенаправить рекламные расходы. Так что да, если вам нравится это руководство, подумайте о покупке хостинга по нашим ссылкам. Заставим огромную транснациональную корпорацию заплатить, муахахах!
.. Эхм, хорошо. Вернемся к делу. В качестве заключительной предварительной вещи, прежде чем мы начнем (терпите меня!), Вот некоторые из наиболее распространенных мифов о создании собственного веб-сайта.Их заблаговременное рассеяние поможет вам лучше понять, что к чему.
Некоторые заблуждения — разорены!
Myth numero uno: вам нужно уметь программировать, чтобы сделать сайт . Конечно, вы делаете. ЕСЛИ ВЫ ЖИВЕТЕ В 1994 ГОДУ! А если серьезно — как и следовало ожидать, технология немного продвинулась вперед с первых дней Интернета, и большая часть процесса создания сайтов уже давно автоматизирована. Включая написание собственно кода. Вам просто нужно выбрать наиболее подходящие инструменты и знать несколько важных моментов (об этом и идет речь в этом руководстве).
Миф номер два: создание собственного веб-сайта обойдется вам в тысяч денег. Только если вы хотите полностью передать его на аутсорсинг агентству — оно, скорее всего, в любом случае проделает те же шаги, что и в этом руководстве (и пришлет вам хороший толстый счет за это).
Миф номер три: создание веб-сайта требует кучу времени . Ну, иногда бывает, особенно если вы новичок и учитесь с нуля. Но если вы хорошо разбираетесь в этом и сосредотачиваетесь на правильных вещах, вы можете запустить и запустить страницу МЕНЕЕ ПОЛОВИНЫ ЧАСА.И вся цель этого руководства — помочь вам в этом, так что приступим!
Шаг 1 из 4. Получите домен и хостинг
Первое, что вам нужно, это место для жизни вашего сайта. Технически это место называется веб-хостинг — по сути, это специализированный, постоянно включенный компьютер, на котором хранятся файлы вашего веб-сайта и который обслуживает их всех, кто вводит адрес вашего веб-сайта и нажимает Enter.
Кстати: вам также нужно зарезервировать сам адрес (например, .com ), которое называется доменным именем . К счастью, вы можете сделать и то, и другое за один раз, поскольку многие хостинг-провайдеры также предлагают домены в комплекте.
Существуют тысячи таких компаний, больших и малых, но обычно нет смысла выбирать маленькие: вместо этого выбирайте стабильный, надежный хостинг с большим опытом работы. Вы хотите, чтобы ваш веб-сайт был доступен 24/7/365, и я даже не стану говорить об утомительности перехода к новому провайдеру, если ваш текущий выйдет из бизнеса.Поверьте, это неприятно.
Из всех хостинг-провайдеров, которые я пробовал и тестировал на протяжении многих лет, самым надежным и простым в использовании остается GoDaddy: он существует уже более 20 лет, у него более 17 миллионов клиентов по всему миру, и его легко использовать для новички. И в настоящее время он предлагает интересные скидки как на хостинг, так и на домены, о которых мы поговорим чуть позже.
Чтобы сделать последующий процесс заказа хостинга максимально быстрым и гладким, я рекомендую сделать паузу и заранее придумать доменное имя: вы можете использовать поиск домена GoDaddy, чтобы найти имя, которого еще не существует.Если вы серьезно застряли, вот несколько быстрых советов по поиску невостребованного доменного имени, которое одновременно максимально близко к вашему желаемому ключевому слову или бренду:
- Рассмотрите возможность использования одного из новых доменных расширений, таких как
.co,.online,.shopили.siteвместо общего (и очень многолюдного).com. - Ищите синонимы к своему основному ключевому слову с помощью бесплатных онлайн-инструментов, таких как Thesaurus.com — каждое новое базовое слово открывает целый ряд возможностей для доменного имени, которые могут остаться невостребованными.
- Воспользуйтесь одним из специализированных инструментов для мозгового штурма доменного имени. Лучшее, что я знаю (и сам довольно часто использую), — это бесплатная Dot-o-Mator, которая позволяет комбинировать исходные слова с кучей префиксов и суффиксов, упорядоченных по темам.
- Попробуйте добавить простые универсальные компоненты, которые сделают ваше доменное имя более уникальным (и, следовательно, менее вероятным), например, «the» в начале имени или дефис для разделения двух слов.
- Дефисы и числа — последнее средство, но в некоторых случаях они могут помочь найти свободный номер
.comна случай, если все вышеперечисленное не сработает.
Готово? Хорошо, теперь мы готовы начать. Нажмите кнопку ниже, чтобы перейти на страницу предложений GoDaddy со специальными скидками на хостинг. Кстати, помните тот пакет хостинг + домен, о котором мы упоминали ранее? GoDaddy в настоящее время предлагает БЕСПЛАТНУЮ регистрацию домена с каждым планом хостинга, что экономит вам дополнительно 12 долларов (обычная стоимость домена .com):
Получите скидку 43% на хостинг GoDaddy + бесплатный домен ›
На этой странице вам будет предложен выбор из четырех планов хостинга: если вам не нужно сразу несколько веб-сайтов, выберите экономичный, так как он уже включает в себя все, что вам нужно для начала работы.
После добавления плана в корзину вам нужно будет сделать несколько вариантов для настройки вашего заказа: во-первых, выберите, за сколько месяцев вы хотите заплатить вперед. Хотя вы можете сразу перейти на трехлетний платежный цикл, 12 месяцев должно быть более чем достаточно , чтобы проверить свои действия в Интернете и получить скидку 43%. Если вы решите сохранить свой веб-сайт через год (что, надеюсь, вы и сделаете), вам не нужно будет ничего делать — есть механизм автоматического продления (просто имейте в виду, что следующие расчетные периоды уже будут оцениваться по обычным ценам. темп).
Затем вы увидите на том же экране, что GoDaddy по умолчанию добавляет резервные копии веб-сайтов в ваш заказ; снимите отметку с этой опции с светлым сердечком , это не важно в данный момент (к тому же вы сможете настроить ту же функцию без дополнительных затрат позже, что сэкономит вам 24 доллара в год).
Вам также не понадобится опция «Essential Security», которую также легко получить бесплатно, как только вы начнете работать (уговаривайте! Сэкономлено еще 83 доллара).
Наконец, есть опция SSL-сертификата: это дополнительный уровень шифрования, который обеспечивает безопасность трафика вашего веб-сайта и, что более заметно для посетителей, отображает обнадеживающий зеленый замок со значком «Безопасность» в адресной строке браузера.В дополнение к этому с июля 2018 года Google Chrome начал отображать четкий значок «Небезопасно» для веб-сайтов без SSL, недвусмысленно давая нам понять, что он просто не любит незащищенные веб-сайты:
Итак, хотя ваш веб-сайт сможет работать без SSL, я, , настоятельно рекомендую получить его прямо сейчас (также потому, что переход с веб-сайта без SSL на веб-сайт с SSL — это своего рода головная боль).
Напомним, вот как будет выглядеть страница дополнительных услуг хостинга GoDaddy со всеми настройками, рекомендованными выше:
Мы готовы перейти к домену (теперь бесплатному): после нажатия зеленой кнопки «Продолжить» вы увидите строку поиска для ввода имени, которое вы выбрали ранее.После выполнения поиска нажмите синюю кнопку «Выбрать и продолжить» рядом с доменным именем, добавив его в корзину.
Заключительный этап заказа хостинга! Я втайне взволнован, так как это один из тех моментов, в которых «но подождите, станет лучше»: используя наш промокод, вы можете сэкономить еще 30% от окончательной цены.
Просто нажмите «Есть промокод?» ссылку чуть ниже раздела «Итого» в правом нижнем углу страницы заказа (да, GoDaddy сделал это максимально незаметным 🙂 затем введите эту комбинацию во всплывающем окне и нажмите Применить:
GDD1hos
ТЕПЕРЬ вы готовы приступить к обычным действиям — нажмите «Создать учетную запись» слева, введите свою учетную запись и платежную информацию и завершите заказ.Что-то мне подсказывает, что вы уже совершали покупки в Интернете раньше, поэтому я пропущу эту часть, если вы не возражаете.
Готово? Давайте посчитаем: мы только что сэкономили 92 доллара на хостинге, и — 23 доллара + 83 доллара = 106 долларов на второстепенных функциях, которые вы можете добавить бесплатно позже. Как будто этого было недостаточно, еще около 12 долларов можно сэкономить, получив домен бесплатно. На данный момент это 210 долларов экономии . Хорошо хорошо. Знаете, что еще лучше? Выполнение остальной части этого руководства не будет стоить вам ни копейки!
Между прочим, мы закончили шаг 1, вероятно, самую сложную часть процесса — сейчас самое время, чтобы размяться и выпить кофе.Я подожду здесь (потому что у меня куча текста на странице).
..
..
Обновился? Теперь к шагу 2.
Шаг 2 из 4. Установите WordPress
У нас есть красивый и уютный хостинг для нашего будущего веб-сайта, поэтому ничто не мешает нам создать сам сайт. Давай сделаем это, ладно?
Если вам интересно, «что, черт возьми, такое WordPress», короткая интерлюдия: WordPress или сокращенно WP — это то, что они называют системой управления контентом: по сути, часть программного обеспечения, которая помогает вам запускать весь ваш веб-сайт, начиная с от его дизайна и содержания до настроек и структуры.
Почему стоит выбрать WordPress? Все очень просто, потому что это предпочтительный движок веб-сайтов в Интернете, на котором работает почти треть всех веб-сайтов в мире (а это очень много веб-сайтов). Его можно использовать или изменять бесплатно, легко расширяемый с помощью тысяч бесплатных плагинов, и он может похвастаться обширным сообществом пользователей, которые стремятся поддерживать друг друга. Руководства, руководства и советы по использованию WP можно найти в Интернете, и большинство из них также бесплатны.
Это действительно звучит как логичный выбор для начинающего владельца веб-сайта, поэтому мы будем придерживаться WordPress на протяжении всего руководства.Кроме того, после того, как мы закончим трехэтапную настройку, я получу несколько дополнительных советов по безопасности и производительности.
Хорошо, к делу. Войдите в свою недавно созданную учетную запись GoDaddy — вы увидите список своих продуктов. Щелкните строку «Веб-хостинг», чтобы развернуть ее, затем нажмите кнопку «Управление» справа. На новой странице вы увидите большую синюю кнопку с надписью «cPanel Admin» — это то, что мы ищем! (другими словами, нажмите на нее)
Вы будете перенаправлены на панель управления хостингом — это важное место, которое вы, несомненно, будете посещать много раз в будущем.Но пока давайте найдем «WordPress» в разделе «Веб-приложения» (он должен выглядеть как белая буква «W» в сером круге, как глаз Пакмана, пожирающего мир) и щелкните по нему. Вы попадете в мастер установки под названием ..
Нажмите кнопку « + Установить это приложение » в правом верхнем углу, чтобы перейти к важному моменту: на экране параметров установки мы продолжим и изменим несколько настроек.
В раскрывающемся списке Домен выберите приобретенное доменное имя, если оно не выбрано по умолчанию; использование адреса www вместо адреса без www — дело личных предпочтений, но, если вы спросите меня, версия без www выглядит более современной и короче (что всегда является плюсом для адресов веб-сайтов).
Убедитесь, что поле Directory оставлено пустым, чтобы WordPress был установлен в качестве основной системы управления контентом для вашего нового веб-сайта.
Поля , версия и , язык могут оставаться такими, какие они есть, поэтому после материалов лицензионного соглашения вы увидите множество вариантов обновлений: обязательно выберите полные автоматические обновления в каждом из них (последние параметры) и активируйте автоматическое обновление резервных копий в последней.
Это гарантирует, что ваш веб-сайт всегда будет работать на самой последней версии программного обеспечения, что хорошо для безопасности.Кроме того, это избавит вас от необходимости лично следить за появлением новых версий и выполнять обновления вручную.
Чтобы убедиться, что мы на правильном пути, ряд вариантов в этом разделе должен быть «3-2-2-1», или, для наглядности:
Наконец, есть раздел Settings , где вам нужно заполнить первые пять полей (оставьте последние два переключателя без изменений). Сначала введите имя пользователя и пароль администратора веб-сайта. И ради всего святого, не использует слова «администратор» и «пароль» — придумайте что-нибудь, что немного сложнее угадать! Поскольку WP настолько популярен, многие хакеры охотятся на сайты WordPress со слишком простыми учетными данными администратора.
Введите свой адрес электронной почты, а также заголовок и слоган веб-сайта (последние два сейчас не так важны, вы сможете легко изменить их в любое время через панель администратора WP).
Мы закончили! Нажмите кнопку + установить внизу и подождите, пока волшебные феи установят для вас WordPress. Когда они будут готовы, вы увидите три ссылки под названием своего веб-сайта: нажмите на вторую ссылку — ту, которая заканчивается на «wp-admin», это стандартное окончание панели администратора WordPress для данного веб-сайта.
Откроется новая вкладка с мастером WordPress, который задаст вам много глупых вопросов и установит ненужные плагины, поэтому просто нажмите «Нет, спасибо» и перейдите в панель администратора WP.
.. ты чувствуешь запах? Аромат свежего сайта утром! Просто полюбите это чувство, когда начинаете что-то новое.
Мы почти закончили, но есть несколько вещей, которые вы, возможно, захотите исправить прямо сейчас, потому что опыт показывает, что не все настройки WP по умолчанию являются наиболее оптимальным выбором.
Шаг 3 из 4. Настройка WordPress
Прежде чем вы начнете добавлять контент на свой новый веб-сайт, давайте кратко рассмотрим систему и добавим некоторые улучшения на будущее.
Слева от панели администратора WP вы увидите меню администратора на темно-сером фоне. Здесь не все элементы одинаково важны, и большую часть времени вы будете использовать только пару из них. Об остальном вы узнаете по ходу дела.
Наиболее часто используемые разделы — это сообщений и страниц , где вы можете создавать новый контент, а также комментариев , где вы можете модерировать обсуждения ваших сообщений, если вы решите включить эту функцию.
Разница между страницей и публикацией в том, что первая предназначена для статического контента, который, как ожидается, не будет сильно меняться со временем, например, ваша страница «О нас»; с другой стороны, сообщения предназначены для контента, который вы регулярно добавляете, например новостей или сообщений в блогах. Вот краткое описание, которое поможет вам понять разницу между ними:
| Сообщения | Страницы |
|---|---|
| Укажите дату публикации | Контент, не зависящий от времени |
| Могут иметь разных авторов | Автор не так важен |
| Собрано в виде блога | Ссылка в меню навигации |
| Типичная компоновка | Имеются различные макеты |
| Подходит для регулярного, своевременного контента, такого как сообщения в блогах или новости | Подходит для статического контента, такого как главная страница, страницы услуг / продуктов и т. Д. |
В WordPress также существует особая концепция «страницы блога», которая представляет собой автоматически сгенерированную страницу, на которой отображаются все ваши сообщения.Мы вернемся к этому чуть позже. А пока — вперед!
Еще один важный раздел в меню администратора WP — Внешний вид , где вы можете установить визуальную тему для своего веб-сайта (Внешний вид → Темы). Он окажется удобным для добавления меню навигации (Внешний вид → Меню), а также виджетов (Внешний вид → Виджеты) — небольших блоков, которые выполняют определенные функции, такие как отображение списка категорий или панели поиска, обычно на боковой панели. Раздел «Внешний вид» также содержит Customizer , который активно используется многими современными темами, чтобы вы могли настраивать вещи на своем веб-сайте, такие как цвета и шрифты.
Самые полезные админки WP
И есть также раздел Plugins , где вы сможете устанавливать и настраивать различные расширения, которые добавляют дополнительные функции, такие как безопасность, кнопки социальных сетей, контактные формы и т. Д. И т. Д.
Ну, наверное, это был самый быстрый тур по WP! Чтобы завершить настройку, давайте настроим несколько параметров в разделе Settings в самом низу меню администратора:
Настройки → Общие: помните, я сказал, что вы можете редактировать «Заголовок сайта» и «Слоган сайта» позже? Вот где это можно сделать.Также убедитесь, что параметры «Членство», «Часовой пояс», «Формат даты», «Формат времени» и «Начало недели» установлены в соответствии с вашими предпочтениями.
Настройки → Чтение: пока просто обратите внимание на этот раздел; здесь вы сможете настроить главную страницу своего веб-сайта для отображения сообщений блога или статической страницы (после того, как вы решите, какая из них вам нужна). Если вы не настроили страницу сообщений блога в качестве главной страницы, вы сможете выбрать для нее другое место — просто создайте новую пустую страницу в административном разделе Pages , упомянутом ранее.Затем вернитесь сюда и используйте его в качестве страницы для сообщений в блогах, не занимающих лицевую позицию; эта страница автоматически начнет отображать ваши сообщения, как только вы сохраните изменения.
Настройки → Обсуждение: , если вы хотите разрешить людям комментировать сообщения в блоге / новостной ленте вашего веб-сайта, обязательно отметьте флажком «Разрешить людям публиковать комментарии к новым статьям», а также «Разрешить цепочки комментариев. »(Чтобы люди могли отвечать на комментарии друг друга) и« Комментарий должен быть одобрен вручную »(иначе вы получите СТОЛЬКО СПАМА).Что бы вы ни делали, снимите флажок «Разрешить уведомления о ссылках из других блогов», это просто для того, чтобы разрешить много спама. Наконец, взгляните на раздел «Пишите мне всякий раз», чтобы убедиться, что параметры установлены в соответствии с вашими личными предпочтениями.
Настройки → Постоянные ссылки: настоятельно рекомендуется выбрать параметр «Имя сообщения», поскольку он генерирует наиболее удобные для человека URL-адреса для ваших страниц и сообщений (честно говоря, я не совсем уверен, почему существуют другие параметры в этом подразделе. ).
В принципе, все! Теперь вы можете поэкспериментировать со своим новым веб-сайтом и начать добавлять контент. Однако есть еще один шаг, который отчасти необязателен, но, опять же, более важен:
Шаг 4 из 4. Добавьте тему и плагины
В принципе, вы можете оставить внешний вид веб-сайта таким, какой он есть, и сосредоточиться исключительно на содержании. Однако это будет означать, что ваш сайт будет не только выглядеть очень общим, но и на самом деле будет выглядеть точно так же, как и миллионы других веб-сайтов , владельцы которых были слишком ленивы, чтобы изменить тему по умолчанию.
Кроме того, существует множество бесплатных тем WP, которые предлагают гораздо больше возможностей настройки и персонализации, позволяя каждому веб-сайту выглядеть уникально.
Но вот бесстыдный замысел: я продолжу и предлагаю попробовать нашу собственную многоцелевую тему WP под названием Bento (вы можете видеть, что мы в Японии здесь, в Satori 🙂
Тема позволяет настраивать цвет и внешний вид практически любого элемента на вашем веб-сайте, создавать удобные для мобильных устройств макеты сетки на любой странице, а также множество других полезных вещей, перечисленных здесь, на официальной странице:
Получите тему Bento бесплатно ›
Вдобавок к этому, Bento хорошо документирован (чего нет в мире WordPress) и имеет специальные форумы поддержки, на которых мы отвечаем на все вопросы по теме.
/ конец вопиющего саморекламы /
Что касается плагинов, то в любое время доступно буквально 50 000+ различных бесплатных, добавляющих на ваш сайт различные новые функции, от переводов и всплывающих окон до форумов и сообществ (и нет, мы не создаем плагины, поэтому не ожидайте, что см. ссылку на расширение «Суши» или «Камикадзе»).
Вместо этого я просто перечислю — пару наиболее надежных и универсально полезных подключаемых модулей , которые следует рассмотреть практически любому владельцу веб-сайта — на основе моего собственного опыта, отзывов других людей, а также объективной статистики.Разумеется, все они бесплатны:
- Akismet для автоматической фильтрации ваших комментариев от спама. Это спасатель! Или, по крайней мере, для экономии времени, так как он легко отбрасывает все входящие комментарии со спамерскими ссылками и спамерскими формулировками. Akismet использует какие-то фанковые алгоритмы вуду с машинным обучением, чтобы со временем стать лучше.
- Все в одном SEO для поисковой оптимизации. Это, вероятно, один из лучших плагинов WP для настройки правильных метаданных на вашем веб-сайте, чтобы ваш контент не выглядел как дерьмо в результатах Google.Google очень любит такое внимание к деталям.
- Панель инструментов Google Analytics для отслеживания входящих посетителей. Разумеется, вам также понадобится реальная учетная запись Google Analytics, которую вы можете бесплатно открыть на их официальном сайте.
- Контактная форма 7, чтобы посетители могли отправлять вам сообщения. Чтобы получать электронное письмо каждый раз, когда кто-то оставляет сообщение на вашем веб-сайте, вам также необходимо установить плагин почтовой программы, такой как WP Mail SMTP. Вот несколько ссылок, которые помогут вам настроить его работу с почтовой системой GoDaddy: 1, 2.
- WooCommerce для продажи товаров в Интернете! Позволяет легко превратить ваш WP-сайт в полноценный интернет-магазин с перечнем товаров, воронкой оформления заказа и платежным шлюзом. Для последнего вам может потребоваться установить дополнительные надстройки WooCommerce (плагины для плагинов, да), которых десятки (некоторые не бесплатны, заметьте).
Итак, мы официально закончили. Наслаждайтесь своим новым блестящим веб-сайтом! Если вам нужны еще несколько советов и передовых методов, перейдите к последней части этого руководства под соответствующим названием:
Полезные советы (необязательно)
Я не забыл о своих предыдущих обещаниях обсудить бесплатные методы улучшения безопасности веб-сайтов и создания резервных копий, так что вот они.
Совет №1: Сделайте свой сайт более безопасным. Пока ваш веб-сайт еще молод и невиновен, вы можете сосредоточиться на других вещах, потому что на самом деле никто еще не хочет его взламывать. Однако есть действительно простые вещи, которые практически не отнимают у вас времени, но уменьшают шансы стать целью успешной атаки в 10 раз.
Во-первых, очевидные рекомендации (которым не следуют 99%): не используйте «admin» в качестве имени пользователя панели администратора WP, просто используйте любое другое слово.Уже одно это сделает ваш сайт WordPress в тысячу раз труднее взломать. И используйте надежный пароль — с заглавными буквами, цифрами, символами и т. Д. Для дополнительной надежности используйте двухфакторную аутентификацию (дополнительный код, генерируемый вашим смартфоном при входе в систему).
Еще одна очевидная привычка, которую многие игнорируют: поддерживать свой WordPress, а также плагины и темы в актуальном состоянии. Мы уже рассмотрели это на шаге 2 («Установка WordPress»), но также имеет смысл обращать внимание на любые уведомления об обновлениях в вашем администраторе WP.
Для тех из вас, кто осторожен, я могу порекомендовать установить бесплатный плагин Wordfence — он имеет множество дополнительных опций защиты, которые помогут даже самому параноидальному веб-мастеру спать спокойно по ночам.
Совет № 2: Простое автоматическое резервное копирование. Потому что вы не хотите тратить время на то, чтобы делать это каждый раз вручную. У вас есть дела поважнее, например, создание контента для вашего нового веб-сайта! Одно слово: UpdraftPlus. Это бесплатно, его легко настроить, и вы можете хранить резервные копии в разных местах, от вашего собственного сервера (хотя и не рекомендуется) до облачного хранилища.
Я лично использую опцию Google Drive в Updraft, которую стало еще проще настроить после того, как они представили собственную интеграцию. P.S. в бесплатной версии есть все, что нужно для обычного веб-сайта, я никогда даже не пробовал версию Pro, несмотря на то, что запустил несколько онлайн-проектов разной сложности.
Совет № 3: Структурируйте свой веб-сайт. После того, как домен, хостинг и WordPress настроены, пора подумать о том, как будет организовано содержимое вашего веб-сайта.Как упоминалось выше, есть два основных типа контента, которые WP поддерживает из коробки: новостные сообщения (обычный контент), которые могут отображаться на странице сообщений блога, а также страницы (статический контент), которые используются для отображения информации. это не меняется слишком часто. Перед созданием страниц и сообщений имеет смысл нарисовать всю структуру на древовидной диаграмме на листе бумаги, не забывая отмечать, какие элементы будут отображаться в меню (ах) навигации сайта.
Более того, в зависимости от цели вашего веб-сайта, вы, вероятно, столкнетесь с необходимостью использовать дополнительные типы контента — в большинстве случаев это легко достижимо с помощью бесплатных плагинов WP.Например, если вы фотограф или дизайнер, Easy Photography Portfolio позволит вам создать отдельный раздел с фотографиями и демонстрировать их в модных галереях. Если вы планируете продавать товары на своем веб-сайте, WooCommerce автоматически создаст для вас тип контента «продукт». Просто просмотрите репозиторий плагинов, есть почти 100% вероятность, что то, что вам нужно, уже создано и доступно бесплатно.
Вам вообще нужен сайт?
Еще кое-что, прежде чем мы закончим — гм.. Я не знаю, как это выразить, поскольку мы уже зашли так далеко с настройкой нашего веб-сайта … но, что ж, этот вопрос также должен быть рассмотрен: вам вообще нужен веб-сайт?
Есть несколько других вариантов, которые могут служить достойным заменителем, по крайней мере, в краткосрочной перспективе — например, учетная запись в социальной сети. Вот лишь некоторые из альтернатив настройки, описанных в пошаговом руководстве выше:
- Страница Facebook может легко работать как полноценный веб-сайт и может рассматриваться как такая замена для многих местных предприятий.Встроенная система рейтингов и простая индексация Google — это лишь некоторые из преимуществ, которые вы получаете прямо из коробки.
- Аккаунт Instagram , вероятно, является самой простой альтернативой автономному веб-сайту, особенно если ваш проект очень наглядный. В настоящее время существует множество инструментов, которые даже позволяют продавать товары прямо из вашей ленты Instagram.
- Medium — это бесплатный сервис для ведения блогов с удобным минималистичным интерфейсом письма и возможностью монетизировать ваш контент, если ваши письменные навыки подходят для этой задачи.
- Блог Tumblr имеет большой смысл, если вы пришли сюда просто для удовольствия — настроить личную ленту, в которой вы собираете интересные материалы из интернета, никогда не было так просто.
- Настройка WordPress.com находится где-то посередине между самостоятельным размещением WordPress и универсальными конструкторами сайтов; возможно, он быстрее запускается и уже включает хостинг, но вводит некоторые ограничения (например, невозможность устанавливать плагины до тех пор, пока вы не перейдете на определенный платный план).
- Конструкторы сайтов созданы как комплексные решения, которые охватывают все, от доменов и хостинга до контента и продвижения под одной крышей. Меньше сложности? Действительно! Больше свободы? Возможно нет.
Мы хотели бы вывести это руководство на новый уровень, поэтому прямо сейчас, среди других дополнений, мы работаем над новой классной инфографикой по этому самому вопросу о необходимости. Скоро мы опубликуем это в этом разделе, следите за обновлениями!
Между тем, не стесняйтесь сообщить нам в комментариях, что вы, , думаете об этой дилемме: когда лучше сказать «да, мне действительно нужен собственный веб-сайт» и начать его создавать.Давайте обсудим!
Подведение итогов / Время контроля качества
Bazinga! Мы только что научились создавать веб-сайты, сэкономили более 200 долларов и, может быть, даже повеселились … может быть, немного? .. Хорошо, возможно, это было больше работой, чем удовольствием, но оно того стоило.
Если вам понравилось это руководство, как насчет того, чтобы поделиться им в социальных сетях (да, я знаю, никто больше так не делает, но все же я должен был это сказать) и, может быть, даже рассказать об этом своим друзьям-новичкам? Хорошо, хорошо, Twitter тоже подойдет: /
Ты все еще здесь? Честно говоря, я немного удивлен.Ну, я не знаю … если у вас остались какие-либо вопросы относительно того, о чем мы говорили в руководстве, дайте мне знать в разделе комментариев ниже, я время от времени проверяю это серьезно. И если вы хотите добавить что-то к руководству или критиковать меня, держите это при себе !! Шучу, конечно, тоже очень приветствуется и т. Д. И т. Д.
Оставайтесь любопытными, стремитесь к звездам и удачи во всем, для чего вы создавали свой веб-сайт! Ура
Как создать привлекательный дизайн веб-сайта
Обновлено 9 июля 2019 г.
Насколько важен дизайн вашего сайта? Когда пользователей попросили описать, почему они не доверяют веб-сайту, 94% комментариев были напрямую связаны с дизайном сайта.Качественно построенный веб-сайт увеличивает посещаемость клиентов, а улучшенный пользовательский интерфейс приводит к увеличению конверсии.
Креативность важна, но есть несколько основных правил дизайна и взаимодействия с пользователем, которые помогут вам развивать ваш сайт. Создавая или изменяя дизайн своего сайта, помните о следующих предложениях.
Завоюйте доверие с помощью чистого, привлекательного дизайна веб-сайта
Мир цифрового дизайна принял простоту, отказавшись от наворотов и сосредоточившись на основах.С точки зрения пользователя, это упростило навигацию по веб-сайтам для получения более приятных впечатлений. Включите эти 8 правил дизайна в свой веб-сайт, чтобы лучше заинтересовать свою аудиторию.
1 Сохраняйте простоту макета.
Чем проще макет вашего сайта, тем лучше. Это не значит, что это должно быть скучно, но это значит, что нужно сосредоточиться на самом главном. Чистые, функциональные макеты упрощают загрузку, навигацию и использование вашего сайта на разных платформах и устройствах.
На веб-сайте Гарри самая важная информация — их продукция — находится в центре внимания.Они включают визуальные элементы с минимальным количеством текста, чтобы облегчить взаимодействие с контентом.
2 Упростите навигацию.
Если вы хотите, чтобы посетители проводили время на вашем сайте, вы должны упростить им перемещение. Может возникнуть соблазн сделать что-то творческое с дизайном навигационных меню, но важнее простота и интуитивно понятная информационная архитектура. Сделайте свое меню стандартным по внешнему виду, чтобы ваши читатели чувствовали себя комфортно при перемещении по вашему сайту.
В
Vogue есть заметные описательные меню навигации, которые помогут вам найти нужный вам контент и взаимодействовать с ним.
3 Используйте четкие призывы к действию.
Что вы хотите, чтобы посетители сайта делали? Купить продукцию? Подпишитесь на рассылку новостей по электронной почте? Пожертвовать делу? Подумайте о своих призывах к действию. Создайте их таким образом, чтобы они выделялись среди посетителей, просматривающих ваш сайт. Если вы используете кнопки в своем дизайне, убедитесь, что текст короткий и прямой.
Всемирный фонд дикой природы использует яркие кнопки рядом с панелью навигации, побуждающие посетителей «пожертвовать» и «усыновить», а также убедительные призывы к действию во всем своем контенте.
4 В содержании лучше меньше, да лучше.
Используйте то, что вы знаете о своих посетителях, чтобы минимизировать их возможности и сосредоточить их внимание на ваших продуктах. Показывайте только те текстовые и визуальные элементы, над которыми вы хотите, чтобы они выполняли действия.
Веб-сайты для мобильных приложений, такие как Pocket, отлично справляются с этим.Они сосредоточены на объяснении приложения, включают убедительные призывы к действию по его установке. Менее важный контент, такой как их раздел «О себе» и их блог, менее заметны и связаны в нижнем колонтитуле.
5 Не бойтесь пробелов.
Пустое пространство — это просто пустое место на странице. На самом деле он не обязательно должен быть белым — он просто не должен содержать текста или изображений. Если все сделано правильно, это может улучшить читаемость и убрать беспорядок в дизайне вашего сайта. Белое пространство также может помочь направить фокус и внимание.Он позволяет разделить функции и идеи, чтобы посетители могли сразу различить то, что вы хотите, чтобы они увидели, вместо того, чтобы визуально разбирать шумный и многолюдный макет.
Google — лучший пример использования пробелов. Он не мог быть чище — просто пустая страница с логотипом и окном поиска.
6 Улучшите дизайн своего веб-сайта с помощью ярких цветов.
Выберите цвет, который станет основой всего дизайна вашего веб-сайта, а затем выберите контрастный цвет акцента для важных кнопок и других элементов интерфейса.Вы можете узнать больше о выборе подходящей цветовой палитры для вашего бренда.
Whole Foods Market использует зеленый в качестве основного цвета бренда, а небольшие пятна вторичного оранжевого привлекают внимание к избранным призывам к действию.
7 Используйте привлекательные, легко читаемые шрифты.
Используйте привлекательный шрифт, который визуально сбалансирован и уникален, чтобы сделать текст вашего веб-сайта четким и интригующим. Четыре самых популярных шрифта — это Brandon Grotesque, Museo Sans, Railway и Playfair Display.
Бельгийский веб-сайт детской одежды Studio Aimee использует Brandon Grotesque, чтобы сделать покупки чистыми и удобочитаемыми.
8 Привлекайте пользователей видео и богатыми изображениями.
Видео и изображения более интересны, чем просто текст — на самом деле, целевые страницы с видео могут повысить конверсию более чем на 80%. Используйте масштабируемые изображения (SVG), чтобы обеспечить высокое качество работы пользователей как на настольных, так и на мобильных устройствах.
Некоммерческая благотворительная организация: Water отображает видео на своей домашней странице, что делает его одним из первых, что вы видите, когда посещаете их веб-сайт, для максимального воздействия.
Поддерживайте интерес посетителей с помощью удобного веб-сайта
У вас может быть самый привлекательный веб-сайт в мире, но если им сложно пользоваться, ваши посетители не превратятся в клиентов. Эти семь правил обеспечат бесперебойную работу вашей аудитории.
1 Сделайте свой сайт удобным для мобильных устройств.
Знаете ли вы, что до 70% веб-трафика поступает с мобильных устройств? Это означает, что есть большая вероятность, что кто-то впервые заходит на ваш сайт с помощью смартфона.А если опыт работы с мобильными устройствами отрицательный, значит, вы только что потеряли клиента. Узнайте, почему и как сделать ваш сайт более удобным для мобильных устройств.
Мобильный магазин
Everlane отличается чистотой и простотой использования. Дизайн включает в себя модульный контент, поэтому он адаптивен и хорошо транслируется на мобильных устройствах. На веб-сайте также есть призывы загрузить приложение для покупок, при этом вам не будет казаться, что вы испытываете затруднения при посещении веб-сайта.
2 Оптимизируйте навигацию.
Чем больше страниц посетит ваш сайт, чтобы найти то, что он ищет, тем больше вероятность, что клиент покинет ваш сайт из-за разочарования.Фактически, на среднестатистическом веб-сайте 40% посетителей уходят, просмотрев только одну страницу!
Контент нельзя закапывать. Не заставляйте посетителей искать то, за чем они пришли. Ваша навигация должна быть хорошо организованной и логичной с точки зрения пользователя. Он также должен казаться вам знакомым, чтобы вашим пользователям не пришлось долго учиться.
Tilde Inc. имеет простую панель навигации в верхней части своего веб-сайта, с важными пунктами, связанными ниже, с кратким объяснением в разделе «Что мы делаем».Это позволяет легко найти то, что вы ищете.
3 Используйте призывы к действию, чтобы упростить поиск.
Подумайте, где вы можете разместить кнопки по всему сайту, чтобы посетителям было легче находить важные вещи. Если у вас сайт электронной торговли, то наличие кнопок с надписью «Купить сейчас» будет иметь гораздо большее влияние, чем простая ссылка для навигации; если вы некоммерческая организация, кнопка «Пожертвовать» рядом с панелью навигации сделает пожертвование для посетителей легким делом.
У
Square есть простой призыв к действию, который побуждает владельцев бизнеса начать продавать.Их кнопка с призывом к действию гласит: «Создать учетную запись Square». Нет ничего проще.
4 Предоставьте пользователям широкие возможности поиска.
Не менее важно продумать, как посетители будут искать ваш сайт и как будут отображаться результаты. Опыт поиска должен отражать ваш опыт навигации с точки зрения организации результатов. Включение таких функций, как автозаполнение, также упростит поиск с точки зрения пользователя.
Zappos имеет высокоточный интеллектуальный инструмент поиска, который также обновляет фильтры с левой стороны в зависимости от условий поиска.
5 Разбейте содержимое заголовками разделов.
При работе с областями вашего сайта с большим количеством контента, разделите их заголовками. Будь то статья или описание продукта, заголовки дают структуру вашего контента и упрощают сканирование.
WebMD эффективно разбивает свой контент на удобоваримые куски с большим количеством заголовков разделов, чтобы вы могли найти нужную информацию.
6 Говорите как настоящий человек.
Чем больше жаргона и маркетологов придётся расшифровать пользователям, когда они посещают ваш сайт, тем меньше вероятность, что они будут взаимодействовать с вашим брендом.Дружелюбный разговорный тон облегчит посетителям чтение и понимание вашего контента, а также навигацию по сайту.
Zipcar упрощает понимание своих услуг и упрощает навигацию по сайту благодаря своему безмятежному бренду.
7 Подтверждайте действия посетителей.
Если ваши посетители покупают у вас продукт, подписываются на информационный бюллетень или даже делятся вашим контентом, хорошей практикой является отображение экрана подтверждения, который показывает, что их действие прошло успешно.Не повредит использовать этот экран и для того, чтобы поблагодарить их.
TheSkimm поздравляет и приветствует вас после того, как вы подпишетесь на их информационный бюллетень, с предложением поделиться в социальных сетях.
Проверьте свой сайт перед запуском
Всегда есть изгибы, над которыми нужно работать при запуске или перезапуске веб-сайта. Важно потратить время на то, чтобы протестировать свой сайт и собрать отзывы, прежде чем он будет запущен.
1 Проведите тесты обеспечения качества (ОК).
Если у вас есть ресурсы, наймите команду по обеспечению качества, чтобы они могли протестировать все аспекты вашего сайта.Если вы не можете нанять людей специально для роли QA, попросите людей, как внутренних, так и внешних по отношению к вашей компании, протестировать ваш сайт перед запуском. Они могут щелкнуть все ссылки, заполнить все формы и попробовать все услуги. По сути, если на сайте есть чем заняться, они должны это сделать. Таким образом, вы сможете исправить любые ошибки перед запуском.
2 Соберите отзывы пользователей, прежде чем запускать свой сайт.
Пригласите избранную группу бета-тестеров высказать свое мнение по таким элементам, как навигация, дизайн и основные пользовательские потоки.Вы можете не вносить изменения на основе всех отзывов, полученных до запуска, но вы можете учитывать предложения по изменениям в будущем.
Создание веб-сайта с нуля, даже если вы обратились за помощью в агентство, — нелегкий подвиг. Мы создали удобный контрольный список «Три шага к созданию привлекательного дизайна веб-сайта» (PDF), чтобы вы могли убедиться, что проверяете все важные элементы из списка по мере продвижения.
Последнее изменение: 9 июля 2019 г.
Как создать код сайта для детей от 12 лет и начинающих | Начинающий веб-разработка
Создайте собственный веб-сайт
Вы когда-нибудь хотели научиться создавать веб-страницы или делать сайт в Интернете? Сегодня мы покажем вам, как создать свой личный веб-сайт! Посмотрите обучающее видео, чтобы посмотреть, как Juni Instructor Maya проведет вас через каждый шаг.
Прочтите, чтобы получить дополнительную информацию о важности обучения веб-разработке, пошаговое руководство к видео и узнать об инструментах, которые можно использовать для дальнейшего улучшения вашего опыта веб-разработки.
ПОМНИТЕ:
- Веб-сайт в этом учебном пособии — всего лишь пример учебного проекта. Прежде чем начать, имейте в виду, что несовершеннолетние не должны публиковать в Интернете личную информацию, такую как ваше полное имя, адрес или номер телефона! Также будьте осторожны при загрузке личных фотографий в Интернет.
- Если вы не уверены, что можно загружать, всегда уточняйте у взрослых.
Для кого это?
Эта информация о проекте и сводка результатов обучения помогут вам решить, подходит ли вам этот проект кодирования HTML / CSS.
Этот проект подпадает под наш класс кодирования JavaScript уровня 1 для детей. Этот учебник HTML / CSS для начинающих предназначен для студентов, которым нужен проект средней сложности, около 121 строки кода. Это поможет заранее получить общее представление о том, как работают HTML и CSS, но если вы совсем новичок, мы также объясним больше основ в этом видео!
Это руководство отлично подходит для новичков в программировании, особенно для тех, кто интересуется дизайном или искусством.Мы рекомендуем, чтобы учащиеся были в возрасте от 12 лет и старше, чтобы следить за этим.
Что касается результатов обучения, вы получите много практики с div, списками, ссылками, положением, отображением, текстом (h2 / h3 / p), шрифтами и общим CSS. Предполагается, что этот проект займет у вас около 40 минут или больше, в зависимости от того, насколько вы креативны, но вы должны двигаться быстрее или медленнее в своем собственном темпе!
Зачем изучать веб-разработку?
В наши дни вам не нужно знать веб-разработку или программирование, чтобы создать веб-сайт.Ближе к концу этой статьи мы покажем вам нескольких создателей веб-сайтов с перетаскиванием, которые сделают этот процесс невероятно простым. Так зачем вам изучать веб-разработку? Это отличный вопрос.
Неограниченная настройка
На самом деле все простые инструменты для создания веб-сайтов ограничены. Они предлагают вам набор тем и плагинов, которые очень легко использовать новичкам — при условии, что вам не нужно их изменять.
Однако, когда вам нужно изменить тему или сделать что-то более индивидуальное для вашего веб-сайта, вам потребуется хотя бы базовое понимание кода веб-разработки.Например, обладая небольшими знаниями Javascript, вы можете интегрировать практически любую ленту социальных сетей на свой веб-сайт!
Карьера и основа программирования
Если вы когда-либо задумывались о карьере программиста, знания веб-дизайна и веб-разработки также дадут вам огромное преимущество. Веб-разработка помогает детям и начинающим программистам, интересующимся искусством и дизайном, исследовать свои увлечения, а также изучать основы программирования. Помимо карьеры, обучение программированию для детей дает бесчисленные преимущества для жизненных навыков.
Применимо ко многим полям
Наконец, возможность создать собственный веб-сайт — ценный навык в сегодняшнюю цифровую эпоху. Блогеры хотят, чтобы разработчики создавали им собственные блоги. Интернет-компании ищут разработчиков для создания сайтов электронной коммерции вместо того, чтобы просто размещать товары на Amazon.
Это золотой век для дизайна и разработки веб-сайтов, и отличное время, чтобы научиться создавать свой собственный сайт!
Приступим!
Мы собираемся использовать базовый HTML и CSS, чтобы узнать, как создать простой персональный веб-сайт.
Демонстрация проекта
Перед тем, как начать писать код, посмотрите, как работает наш законченный проект, для справки. Посмотрите видео, чтобы ознакомиться со всеми функциями веб-сайта нашего проекта.
Вы также можете просмотреть код решения нашего проекта, если вы застряли.
О чем следует помнить перед началом работы:
- Заголовок изображения с текстом. Текст имеет разные размеры и использует два разных шрифта. Он также имеет белый контур.
- Белая часть под ним состоит из двух частей, расположенных рядом.
- У нас есть список гиперссылок, которые ведут на другую страницу. Когда вы наводите на них курсор, они становятся синими.
- Также есть раздел «Обо мне» с текстом.
- Ниже находится раздел опыта с другим цветным фоном.
Шаги по кодированию проекта
Чтобы создать наш веб-сайт, мы будем следовать этому порядку действий. Просмотрите руководство, чтобы узнать, как инструктор Maya кодирует каждую часть, и следуйте приведенным ниже объяснениям.
- Добавьте заголовок изображения и текст на нем.
- Создайте список ссылок, которыми вы хотите поделиться.
- Создайте раздел «Обо мне».
- Создайте раздел Опыт.
Пошаговое руководство
Шаг 1: Добавьте заголовок изображения и текст на нем.
- Создайте div с относительным позиционированием, чтобы содержать изображение и текст.
- Создайте div, содержащий текст, и используйте абсолютное позиционирование, чтобы разместить его на изображении.
- Используйте
, чтобы добавить текст. - Используйте CSS, чтобы изменить шрифт текста.
- Используйте CSS, чтобы удалить лишние поля и отступы вокруг изображения.
Шаг 2. Создайте список ссылок, которыми вы хотите поделиться.
- Создайте div с относительным позиционированием, чтобы он содержал ссылки и раздел «Обо мне».
- Добавить отступ к div.
- Создайте div со встроенным блочным отображением, чтобы содержать список ссылок.
- Используйте
- Используйте
- Используйте
- Измените CSS, чтобы он выглядел как оригинал.
ПРИМЕЧАНИЕ:
Не стесняйтесь добавлять в этот список, если хотите добавить больше ссылок!
Шаг 3. Создайте раздел «Обо мне».
- Создайте блок div со встроенным блочным отображением, чтобы он содержал раздел «Обо мне».
- Используйте
Шаг 4. Создайте раздел «Опыт».
- Создайте div с относительным позиционированием, чтобы он содержал раздел Experience.
- Создайте div для первого опыта и используйте
- Добавьте больше опытных див!
Следующие шаги
Отличная работа! Теперь не стесняйтесь добавлять на свой сайт больше разделов. Некоторые идеи могут включать раздел для проектов, над которыми вы работали, или клубов, в которых вы участвуете. Вы также можете загрузить свой новый веб-сайт в Интернет с помощью страниц Github и Github.
Инструменты для создания веб-страниц
Как мы упоминали ранее, существует несколько создателей веб-сайтов. Большинство лучших конструкторов веб-сайтов созданы для оптимизации процесса, предоставляя вам шаблоны, интерфейсы перетаскивания и любые другие функции, необходимые для создания бесплатного личного веб-сайта.
То, что у вас есть базовые представления о веб-разработке, не означает, что вы должны забыть об этих инструментах. Они могут помочь вам разместить ваш новый веб-сайт, найти собственный домен (имя и адрес вашего веб-сайта) и предложить вам шаблоны, темы и плагины, которые ускорят процесс веб-дизайна.
Позаботившись об основах, эти инструменты дают вам возможность сфокусировать свои новые навыки программирования на доведении вашего веб-сайта до совершенства! Или — даже если вы хотите построить все с нуля — эти инструменты могут дать вам отличные идеи о том, что и как создавать.
Вот некоторые из самых популярных инструментов для создания веб-страниц:
Wix — один из самых простых в использовании конструкторов сайтов. Их бесплатный план достаточно полный, чтобы сделать его отличным вариантом для конструктора детских сайтов, если вы согласны с тем, что ваш URL является поддоменом Wix (www.имя пользователя.wixsite.com). У них действительно есть платные планы с разумной ценой, если вы перерастете бесплатный уровень.
Хотя люди знают его как бесплатного конструктора веб-сайтов, на самом деле WordPress представляет собой систему управления контентом (CMS). Проще говоря, разница в том, что конструктор веб-сайтов проще в использовании, но CMS предлагает больше возможностей для настройки. Хотя сам WordPress бесплатный, вам, возможно, придется заплатить за некоторые темы и плагины или за хостинг, если вам нужно собственное доменное имя.
Weebly — это конструктор веб-сайтов, очень похожий на Wix.Основное отличие состоит в том, что Weebly предлагает гораздо меньше возможностей настройки, что делает его удобным для пользователя вариантом, который отлично подходит для программирования для детей, но с меньшей вероятностью будет расти вместе с вами по мере улучшения ваших навыков создания веб-сайтов.
Продолжайте учиться: классы веб-разработки для детей
Поздравляем, теперь у вас есть собственный сайт! Это захватывающий шаг, которым вы должны невероятно гордиться. Обучение не должно останавливаться на достигнутом.
Продолжайте учиться: курсы веб-разработки для детей
Juni Learning предлагает курсы веб-программирования для детей, которые дадут вам навыки, необходимые для расширения вашего нового сайта или даже перехода к созданию веб-приложений и портфолио.Помимо веб-разработки, мы также проводим курсы программирования для детей от 8 до 18 лет на различных языках, таких как Scratch, Python, Java, C ++ и других.
Ознакомьтесь с нашими онлайн-курсами для детей или свяжитесь с нашей приемной комиссией, чтобы узнать, какой курс лучше всего подходит для вашего ученика!
способов сделать сайт таким, чтобы его мог видеть каждый | Малый бизнес
Введите несколько строк кода в документ Блокнота, откройте его в браузере, и все, кто находится рядом с вашим компьютером, увидят вашу веб-страницу.Чтобы все в Интернете увидели ваш сайт, требуется немного больше усилий. Если вы знаете, как создавать HTML-документы, вы можете использовать свои навыки для создания бизнес-сайта, который сможет посетить любой, у кого есть подключение к Интернету.
Создание веб-страниц
Веб-сайты обычно состоят из нескольких веб-страниц, содержащих текст и изображения. Многие сайты воспроизводят аудио, отображают видео и включают в себя увлекательные слайд-шоу. Если вам нужно освежить свои навыки работы с HTML, посетите сайты онлайн-руководств, такие как w3schools, Tizag или HTML Dog, чтобы узнать, как добавлять элементы на веб-страницу.Эти сайты также покажут вам, как использовать теги HTML и
для добавления изображений, заголовков и абзацев на веб-страницу. Вы даже узнаете, как добавлять объекты других типов на свои веб-страницы и встраивать мультимедийный контент с помощью
Добавить ссылки
Поскольку кажется, что Интернет вращается вокруг ссылок, одна из самых важных вещей, которую нужно изучить, — это как открыть новую веб-страницу, когда кто-то щелкает ссылку на любой странице. Тег привязки HTML, как показано в следующем примере, делает это возможным:
Нажмите, чтобы посетить Белый дом
Этот код создает ссылку, указывающую на домашнюю страницу Белого дома.Вы можете заменить URL-адрес, который вы видите, на URL-адрес другой вашей веб-страницы. Замените «Щелкните, чтобы посетить Белый дом» на любой текст, который вы хотите, чтобы этот текст отображался в качестве текста ссылки. Посетители сайта могут затем щелкнуть вашу ссылку, чтобы перейти на новую веб-страницу.
Найдите хозяина
Многие веб-сайты, которые вы видите в Интернете, находятся на веб-серверах, принадлежащих хостинговым компаниям. Такие компании, как Go Daddy, iPage и HostGator, позволяют вам использовать свои веб-серверы для отображения вашего веб-сайта.Обычно вы будете платить ежемесячную плату за обслуживание, которая зависит от объема трафика, используемого вашим сайтом, и других факторов. Хостинговые компании также часто предоставляют бесплатные инструменты, которые помогут вам загружать файлы, из которых состоит ваш веб-сайт, и управлять ими.
Получите доменное имя
Каждый веб-сайт в Интернете имеет уникальный URL-адрес и доменное имя. Доменное имя — это текстовая строка, которую вы вводите в адресную строку браузера, когда хотите посетить веб-страницу. Чтобы ваш сайт заработал, вам необходимо приобрести доменное имя.Такие компании, как Register.com, Network Solutions и Web.com, зарегистрируют для вас доменное имя после того, как вы его подумаете. Эти компании также взимают комиссию, поэтому выбирайте компанию, которая регистрирует доменные имена по разумной цене, с умом. Вы также можете искать хостинговые компании, которые также предоставляют услуги регистрации. Некоторые из них могут предлагать недорогие пакетные предложения, когда вы покупаете доменное имя и подписываетесь на их план хостинга.
Создание бизнес-блога
Ваш бизнес также может укрепить свое присутствие в Интернете, используя бесплатную службу ведения блогов, такую как Tumblr, Blogger и LiveJournal.Эти сервисы бесплатны, но они не позволяют вам создавать собственный веб-сайт и загружать его на свои серверы. Однако вы можете использовать их пользовательские интерфейсы для создания страниц блога, которые могут видеть все. Некоторые службы ведения блогов также позволяют настраивать темы веб-страниц, добавлять изображения и отображать видео. Если вы создаете бизнес-блог и создаете свой собственный веб-сайт на хостинге, вы можете добавлять ссылки на страницы блога, которые указывают на ваш веб-сайт, и ссылки на ваш веб-сайт, указывающие на ваш блог. Это максимизирует доступ вашего бизнеса к Интернету.
Список литературы
Ресурсы
Биография писателя
Получив образование в области физики, Кевин Ли начал профессионально писать в 1989 году, когда в качестве разработчика программного обеспечения он также написал технические статьи для Космического центра Джонсона. Сегодня этот городской ковбой из Техаса продолжает выпускать высококачественное программное обеспечение, а также нетехнические статьи, охватывающие множество различных тем, от игр до текущих событий.
Как создать сайт для творчества — The Creative Independent
Если вы — творческий человек, живущий в современном мире, люди будут ожидать, что они смогут найти в Интернете несколько примеров вашей работы. Однако то, как вы решите поместить это там, полностью зависит от вас.
Я начал работать в Интернете в начале августа, когда создал галерею для своих творческих работ.Я называю это галереей, потому что это было просто пустое пространство с изображениями в ряду, которые связаны с некоторыми проектами, которыми я хотел поделиться с друзьями. С тех пор мой сайт развивался, исчез, вернулся и породил другие сайты, которые выражают мои идеи и идентичность в Интернете. Каждая эволюция была возможностью поделиться новой работой таким образом, чтобы это отражало то, как я хотел, чтобы люди ее испытали.
Я работаю в Интернете каждый день. Я помогаю дизайнерам, художникам и галереям открывать и создавать свое присутствие в Интернете. В течение семи лет я создавал и возглавлял команды в Etsy, платформе, которая помогает миллионам творческих людей по всему миру использовать Интернет для получения дохода от своего ремесла.На протяжении всей своей работы я узнал, что каждый человек привносит свои собственные знания и точку зрения, когда создает свое собственное пространство в Интернете. Уникальные подходы, которые каждый человек привносит к опыту, делают Интернет интересным местом для изучения.
Перед тем, как углубиться в это руководство, я рекомендую прочитать эссе Лорел Швульст, Мой веб-сайт — это меняющийся дом рядом с рекой знаний. Что может быть твоим? Это отличный аналог этого более практичного руководства и предлагает множество поэтических исследований формата веб-сайта.Как упоминает Лорел в своем эссе: «Художники преуспевают в создании миров». Надеюсь, это руководство поможет вам начать создавать свои.
— Джейсон Хафф
Определите свою конечную цель
Начните планировать свое присутствие в Интернете с учетом конечной цели, то есть того, чего вы надеетесь достичь, разместив свою работу в Интернете. Эта цель может быть столь же простой, как «поделиться своими лучшими сочинениями с друзьями и знакомыми» или «сделать Интернет немного страннее и прекраснее, ежедневно документируя свой творческий процесс.«Это также может быть более амбициозным и конкретным -« Я хотел бы продать достаточно керамики, чтобы иметь возможность нанять помощника в студии »или« Я хотел бы показать свою лучшую кураторскую работу, чтобы помочь мне выиграть больше грантов и резиденций, чем в прошлом году ».
Цели
могут показаться пугающими, особенно когда они применяются в творческой практике. Когда вы начинаете обдумывать конечную цель размещения своей работы в Интернете, вы можете спросить: «Разве цель не заставит меня чувствовать себя скованной или заставит мой сайт в конечном итоге почувствовать себя надуманным?» Ответ — нет.Так же, как при проектировании чего-либо или создании произведения искусства, использование ограничений может помочь вам быть более сосредоточенным и изобретательным. Это также гарантирует, что вы планируете свой сайт таким образом, чтобы это было достижимо, устойчиво и полезно для вашей практики.
Начало работы: это не так уж и сложно
Запуск может быть затруднен. Поверьте, я знаю это по многолетнему опыту. Итак, я собираюсь предложить вам мини-руководство, состоящее из шести шагов, для того, чтобы начать с того, что может показаться сложной задачей. Для завершения этого короткого процесса вам понадобится чистый лист бумаги, что-нибудь для письма, таймер (вы можете создать его, выполнив поиск в Google), ваша интуиция, способность временно избегать критики себя и около 30 минут.
Мини-руководство по созданию цели для вашего творческого присутствия в Интернете:
Сделайте глубокий вдох. Расслабляться.
Установите таймер на 15 минут. Затем бесплатно напишите несколько идеальных результатов (или потенциальных целей), которые у вас есть для того, чтобы поделиться своей работой в Интернете. Постарайтесь не судить об этих результатах — просто запишите, что приходит вам в голову. Попробуйте записать от пяти до десяти идей. Чем конкретнее вы можете быть, тем лучше. Если вы чувствуете, что застряли на одном, просто переходите к следующему.
После того, как вы заполнили свой список, используйте минутный таймер, чтобы просмотреть и обвести два результата / цели, которые наиболее глубоко находят отклик на интуитивном уровне. Это ваш момент, чтобы настроиться на своего внутреннего проводника.
Потратьте пять минут на развитие каждой идеи обведенной цели. Вы можете сделать это, написав длинное и конкретное описание, которое придаст цели больше цвета. В общей сложности это займет около 10 минут. Вы можете использовать структуру целей SMART, если вы похожи на меня и считаете ее полезными.Это гарантирует, что ваши две черновые цели: с, , , , достижимая, , , , , и , , с привязкой к сроку.
В последние пять минут проанализируйте обе цели и примите решение, какая из них больше всего резонирует с тем, почему вы хотите создать пространство для своей творческой работы в Интернете. Вы также можете взять части из одного и добавить их к цели, которая вам больше нравится, или объединить их вместе, если это имеет смысл.
Вуаля, вы сузили свои причины для создания веб-сайта с одной конкретной целью. Прочтите вслух свою конечную цель. Каково это? При необходимости внесите изменения.
Примечание. Если вы дошли до конца этого процесса и не были удовлетворены своей целью, не стесняйтесь сделать небольшой перерыв, а затем воспроизвести его.
Поздравляем! Вы официально начали процесс создания своего присутствия в Интернете. Записав цель, вы на 33% увеличите вероятность того, что ваш сайт заработает.Еще лучше положить его в такое место, где вы можете видеть его каждый день. Итак, найдите момент, чтобы отпраздновать.
Определите аудиторию своего сайта
Когда вы размещаете работу в Интернете, вы добавляете ее в публичное пространство. Это так, даже если вы разрабатываете свой веб-сайт как небольшую коллекцию изображений и ссылок, удерживаемых вместе несколькими строками кода. По этой причине очень важно учитывать потребности и желания посетителей вашего будущего веб-сайта. Как и в случае с целью вашего сайта, конкретизация вашей аудитории поможет вам сосредоточиться именно на том, как содержание и форма вашего сайта должны обретать форму.
Потратьте некоторое время на представление идеального посетителя вашего веб-сайта и составьте список вещей, которые могут быть важны для их восприятия. Спросите себя: Для кого вы создаете этот сайт? Какой опыт ищет этот человек? Откуда они берутся? Это друзья, художники, кураторы, потенциальные клиенты или кто-то еще?
Чтобы получить еще более конкретную информацию о своей аудитории, может быть полезно подумать о людях в вашем существующем сообществе, которые соответствуют профилю вашего идеального посетителя.Затем вы можете представить себе желания, потребности и мотивацию этого человека для посещения вашего сайта.
Создав этот идеальный профиль посетителя, не стесняйтесь давать ему имя. Затем помните о них вместе с вашей целью, продолжая работать над своим веб-сайтом.
Вдохновляйтесь, исследуя другие веб-сайты
Скорее всего, вы посещали веб-сайты других творческих людей и легко запомнили несколько своих любимых. Стоит потратить время еще раз на эти сайты, чтобы понять, что делает их успешными. Как выглядит и ощущается их присутствие в Интернете? Можете ли вы интерпретировать их конечную цель, исходя из дизайна их сайта?
Изучая различные веб-сайты в поисках вдохновения, помните о своей цели и аудитории и делайте заметки о том, что вам нравится, а что нет. Скорее всего, вы обнаружите огромное количество сходств и различий между всеми сайтами, которые вы посещаете. Сходства обычно направлены на удовлетворение общих ожиданий любого посетителя сайта, независимо от его профиля. Различия — это то, что делает посещение сайта художника незабываемым и обычно связано с его конкретной практикой, техническими способностями и творческими способностями.
В ходе мозгового штурма некоторых из ваших любимых креативных веб-сайтов я поделюсь несколькими своими:
Художник, куратор, писатель и преподаватель Морехшин Аллахьяри использует настроенный сайт WordPress, который хорошо работает как для настольных, так и для мобильных устройств, а также для экранов любого размера. Она хранит контент, организованный в логические разделы, соответствующие тому, как она работает: произведения искусства, кураторские работы, письмо, обучение, контакты.
Визуальный художник Петра Кортрайт создает выразительный опыт с атмосферой раннего Интернета.Стрелки указывают на преднамеренную 30-секундную прокрутку, чтобы наконец добраться до ссылок на ее работы.
Визуальный художник American Artist использует SquareSpace с минималистичной монохромной эстетикой. Совершенно черный фон создает фокус для больших изображений их работы, сохраняя при этом четкость навигации, ссылок и текста на сайте.
Художница и писательница Ингрид Беррингтон упрощает работу с сайтом, полагаясь в первую очередь на текст.Она делится своими планами, демонстрируя как самосознание, так и чувство юмора. Обратите внимание, что ее навигация создается предложением, описывающим ее работу.
Визуальный художник и программист Дэймон Цуккони сопротивляется обычным навигационным блокам, создав обширное и захватывающее портфолио, которое можно отфильтровать по параметрам «Не все» и «В основном все».
Художник и писательница Дженни Оделл использует настраиваемую страницу-заставку (страницу, которая загружается до появления основного содержания сайта).Как только вы перейдете на страницу-заставку, она использует макет сетки, чтобы упростить навигацию по своим проектам и написанию.
Креативный директор и дизайнер Сеохун Чой создает графический одностраничный сайт, который работает более или менее как визитная карточка. В нем есть вся ключевая информация, необходимая для связи, при этом он выражает его личную эстетику.
Первопроходец в области технологий и художник Том Дженнингс использует свой сайт, чтобы поделиться скромным архивом 25-летней давности, содержащим более 30 000 страниц контента, написанных на базовом HTML с простой настройкой CSS.Линия внизу главной страницы указывает на то, что на сайте «нет трекеров, рекламы и JavaScript».
Дизайнер Карли Эйрес использует для своего сайта общедоступный документ Google. Название «[Карли Эйерс] Веб-сайт ОКОНЧАТЕЛЬНЫЙ» — это подмигивание практике именования файлов, потому что немногие цифровые файлы когда-либо являются окончательными. Документ открыт для комментариев и редактирования кем угодно в сети, что делает ее сайт настоящим публичным пространством — граффити и все такое.
Теперь, когда вы познакомились с некоторыми людьми из моего списка, вы можете отправиться в поисках людей, которые вас вдохновляют.Почти каждый будет делиться ссылками на свои веб-сайты в своих профилях в социальных сетях, поэтому просмотр Twitter или Instagram может стать хорошим местом для начала вашего исследования. Просматривая страницы, делайте заметки и делайте наброски понравившихся макетов и идей. Как только вы накопите достаточно вдохновения, самое время найти ему хорошее применение.
Стратегически подумайте о том, что будет жить на вашем участке
Начните с составления списка именно того, чем вы хотите поделиться на своем сайте: словами, изображениями, проектами, музыкой, сообщениями в блогах, новостями, ссылками или чем-то еще.Делая это, вернитесь к тому, почему вы решили разместить информацию в Интернете — да, к вашей конечной цели. Если вы похожи на меня, возможно, вам придется потрудиться на годы (или даже десятилетия). Скорее всего, не имеет смысла делиться всем этим. Хотела бы ваша идеальная аудитория просмотреть весь ваш архив, пытаясь найти ваши лучшие проекты?
То, как вы решите сбалансировать и контекстуализировать свою прошлую, настоящую или даже будущую работу на своем веб-сайте, полностью зависит от вас. В конечном счете, это дает вам возможность сказать именно то, что вы хотите сказать о себе и своей практике, не чувствуя себя обязанным быть полностью исчерпывающим.Вам решать, чем вы хотите поделиться и как вы хотите этим поделиться.
Базовая организация
Изучая другие сайты, вы, вероятно, заметили следующие четыре основных типа страниц:
Работа / проекты: Презентация в стиле портфолио вещей, которые вы сделали или сделали вместе, создает хорошее представление о вас, о том, что вы делаете и что хотите делать. Это может быть более подробный архив или несколько основных моментов — решать вам.
About: Страница с кратким изложением того, кто вы и чем занимаетесь, плюс (если хотите) более длинный абзац с подробным описанием вашей недавней работы, особенностей вашей практики или чего-либо еще, чем вы хотели бы поделиться . Некоторые люди добавляют сюда ссылку на более подробное резюме, но вам это не нужно.
Контакт: Простая страница, на которой посетители вашего сайта могут связаться с вами, будь то по электронной почте, в социальных сетях или через контактную форму.Иногда это совмещают со страницей «О нас».
Новости: Если вы планируете публиковать частые обновления, было бы неплохо создать на своем сайте раздел только для объявлений. Вы также можете использовать этот раздел для создания страниц о новых проектах, прежде чем они будут готовы для вашего раздела портфолио «Работа / проекты».
Начните рисовать свой сайт на бумаге
Вашим первым побуждением к работе может быть покупка домена или регистрация на платформе.Однако полезно начинать с набросков на бумаге и карандаше, потому что гораздо проще поэкспериментировать и попробовать несколько подходов. Выполнение этой первоначальной работы поможет вам лучше понять, какие возможности потребуются вашему сайту, когда придет время выбирать платформу, фреймворк или даже доменное имя.
Помня о содержании, найдите время, чтобы сделать несколько каркасных чертежей того, как может выглядеть ваш сайт. Когда вы начнете рисовать, подумайте над этими вопросами:
- Какие ключевые страницы вам нужны?
- Как можно перемещаться?
- Как часто вы будете обновлять свой сайт новыми проектами?
- Где вы будете делиться новостями или другими обновлениями?
- Как кто-то подпишется на список рассылки (если он у вас есть) или найдет ваши профили в социальных сетях?
- Где посетители могут найти информацию о том, как с ними связаться?
- Что будет уникального во внешнем виде и / или впечатлениях от вашего сайта?
Во время наброска возвращайтесь к своей конечной цели.Сначала будьте игривы, а затем более критически посмотрите на то, что вы нарисовали. В какой-то момент рассмотрите свой сайт с точки зрения идеального посетителя, которого вы определили ранее. С их точки зрения, чего может не хватать? Какая информация не будет для них полезной или актуальной? Какие элементы заставят их почувствовать связь с вашей работой и с вами как с человеком?
Когда вы достигли точки, в которой вы чувствуете себя хорошо в своих набросках и знаете основные страницы и компоненты, которые хотите включить, это означает, что вы готовы приступить к работе в виртуальном пространстве.
Кодировать или не кодировать
Теперь вы можете спросить, должен ли я кодировать свой собственный сайт? Чтобы ответить на этот вопрос, просто подтвердите свои существующие навыки программирования (или их отсутствие), оцените, что вам нужно узнать, чтобы создать сайт, который вам нравится, а затем подумайте, имеет ли смысл тратить дополнительное время, необходимое для создания сайта с нуля. Знайте, что в наши дни нет необходимости кодировать собственный сайт, поскольку существует множество гибких и простых в использовании платформ.
Если есть навыки работы в Интернете, которые вы хотите развить, создание кода для собственного сайта может стать отличной возможностью для обучения. Кроме того, существует множество отличных курсов и руководств, например, на codecademy или BitDegree. Просто имейте в виду, что изучение кода во время создания сайта может значительно увеличить время проекта.
Платформы быстрого запуска
Платформы для создания сайтов, перечисленные ниже, позволят вам настраивать темы в соответствии с большинством ваших дизайнерских потребностей.Кроме того, для каждой платформы доступна обширная документация и поддержка. За исключением Squarespace, каждый из перечисленных ниже также предлагает бесплатную версию. Оплатив платформу, вы получите больше функций и опций, в том числе возможность зарегистрировать собственное доменное имя, что я настоятельно рекомендую. Имея это в виду, вот наиболее часто используемые платформы:
WordPress.com — это самая распространенная в Интернете платформа для создания и поддержки небольших сайтов.В нем есть множество шаблонов и плагинов для удовлетворения большинства ваших потребностей. WordPress.com также предлагает довольно низкие цены по сравнению с другими вариантами.
Squarespace — эта платформа предлагает широкий спектр красиво оформленных шаблонов, которые гибко работают на экранах всех размеров. Он также предоставляет множество вариантов настройки. У них есть круглосуточная служба поддержки клиентов, которая отзывчива и полезна.
Wix — Эта платформа проста в использовании и гибка, а также включает автоматическое резервное копирование сайтов.У них есть широкий спектр шаблонов с умным алгоритмическим помощником под названием ADI (Artificial Design Intelligence), который поможет вам в настройке. К сожалению, здесь нет поддержки в реальном времени (только по электронной почте), поэтому, когда вы сталкиваетесь с проблемой, ее решение может занять немного больше времени.
Weebly — эта платформа во многом похожа на Squarespace и Wix, включая настройку, функции и цены. У них более ограниченный выбор тем, но они работают на экранах всех размеров. Темы нельзя редактировать сколько угодно.
Каркасы своими руками
Если вы технически подкованы, изучение этих вариантов DIY может быть полезным и сделает ваш сайт более уникальным. Имейте в виду, что эти варианты потребуют больше шагов, навыков и времени, чем платформы, перечисленные выше, даже если вы уже умеете кодировать. Также обратите внимание, что если вы планируете продавать вещи со своего сайта, у вас будет еще больше работы.
Все эти фреймворки бесплатны, но требуют оплаты за хостинг собственного сайта и регистрацию домена.Я перечислил подходы «сделай сам» в порядке сложности, самые простые варианты вверху:
Basic HTML. Если вы хорошо разбираетесь в кодировании, но хотите заняться чем-то техническим, этот вариант — отличное место для начала. Сайт Сета Прайса — хороший пример известного художника, владеющего базовым HTML-сайтом.
WordPress.org — это бесплатная версия WordPress с открытым исходным кодом. Большинство компаний, предлагающих хостинг веб-сайтов и регистрацию доменов, имеют возможность установки этой версии WordPress одним щелчком мыши.Вы получаете множество льгот, аналогичных платной платформе WordPress.com, упомянутой в предыдущем списке, но играете большую роль в обслуживании, обновлениях и безопасности. Обратите внимание, что без определенных плагинов эти сайты могут быть уязвимы для угроз безопасности.
Indexhibit — Разработанный другими разработчиками, Indexhibit — это первая структура, которую я использовал для создания своего сайта в аспирантуре. Это бесплатно, гибко и просто, но для этого необходимо, чтобы вы знали, как создавать базы данных, использовать FTP и изменять права доступа к файлам.У них есть полезные руководства для быстрой настройки.
Github Pages — отличный вариант для тех, кто разбирается в технике. Вам все равно нужно будет зарегистрировать свой домен в другой службе. Это предлагает быстрые статические сайты, контроль версий и бесплатный хостинг. Шаблоны, которые поставляются с этой настройкой, очень простые, и вы, вероятно, захотите внести в них более серьезные изменения. Если вы выберете этот путь, я рекомендую использовать Siteleaf, чтобы упростить редактирование контента.
Ваше имя dot com
После того, как вы выбрали платформу или фреймворк, вы готовы к одному из самых захватывающих шагов: покупке доменного имени верхнего уровня. По сути, это покупка адреса в Интернете.
Итак, если у вас довольно распространенное имя, есть большая вероятность, что yourname.com уже занят. Если это так, не волнуйтесь: это дает вам еще одну возможность проявить творческий подход. Доменные имена стали более многочисленными за последние несколько лет с появлением множества альтернатив доменным именам «.com. » Если вы не можете получить yourname.com, попробуйте выбрать что-нибудь запоминающееся, что связано с вашим творчеством, личностью или аудиторией. Личным любимым доменным именем было ныне несуществующее имя Джона Майкла Болинга http://www.gooooooooooooooooooooooooooooooooooooooooooooooogle.com/. Также существует множество забавных альтернатив «.com», включая «.pizza», «.club» и «.info». Здесь вы можете просмотреть доступные доменные имена, связанные с вашим собственным именем.
Примечание. Iwantmyname.com — хороший инструмент для изучения доступных доменных имен, однако я настоятельно рекомендую покупать ваше доменное имя через платформу или службу веб-хостинга, которую вы будете использовать.Это значительно упростит управление вашим сайтом на протяжении многих лет. Подробнее об этом ниже…
Как только вы выбрали доменное имя, как его купить?
Если вы выбрали платформу для быстрого старта, у каждой из них будет свое руководство по покупке домена, и, скорее всего, она автоматически подключится к вашему сайту после того, как вы его купите.
Если вы выбрали маршрут DIY framework, есть десятки сайтов, которые зарегистрируют для вас домен. Чтобы упростить настройку, хорошо купить домен в компании, которая также может разместить ваш сайт.Сервис, который я лично использовал для этой цели, — Dreamhost. Они имеют надежное время безотказной работы, доступные цены и полностью углеродно-нейтральные. Если вы хотите глубже погрузиться в варианты регистрации и услуг хостинга, вы можете прочитать этот список обзоров.
Интернет постоянно развивается, и, надеюсь, ваш сайт тоже будет развиваться. Но прежде чем он сможет развиваться, он должен жить. Как и в любом другом творческом начинании, совершенство — враг прогресса. Легко увлечься всеми возможными способами создания своего сайта.Из-за этого лучше установить для себя крайний срок, получить обратную связь и запустить эту чертову штуку.
Некоторые основные шаги, которые необходимо выполнить при создании веб-сайта:
Соберите весь контент, который вы планируете опубликовать на своем сайте, и организуйте его в зависимости от того, где он будет размещаться. Если у вас есть изображения или статьи, объедините их в один файл. (Замечание о тех больших изображениях, которые вы, вероятно, используете: в конце концов, вы захотите прогнать их через TinyPNG, прежде чем загружать.Это бесплатный сервис, который сжимает большие изображения, чтобы помочь вашему сайту эффективно загружать посетителей.)
Используя свой предыдущий набросок в качестве руководства и используя платформу для быстрого старта или с нуля, погрузитесь в создание начальной версии своего веб-сайта. Думайте о том, что вы делаете, как о прототипе или «минимально жизнеспособном продукте», который будет меняться и улучшаться по мере того, как вы экспериментируете и получаете отзывы. На этом этапе не беспокойтесь о каждом изображении или статье — у вас будет время сделать это позже.
Поделитесь своим прототипом с несколькими людьми, которым вы доверяете, которые также хорошо знают вас и вашу практику. Вы можете сделать это, просто отправив ссылку по электронной почте, или, что еще лучше, посидеть с ними и попросить их изучить ваш сайт, пока вы смотрите. Расскажите им о своей цели, а затем спросите их мнение. Примечание: в этот момент вы получите что-то чрезвычайно ценное. В будущем, когда люди в Интернете будут просматривать ваш готовый сайт, вы не будете сидеть с ними рядом. Это означает, что вы не будете знать, как люди будут воспринимать ваш сайт и, следовательно, как они будут воспринимать вас.Используйте это время со своими близкими друзьями, чтобы узнать, каковы их первые впечатления, что, по их мнению, сайт говорит о вас, и будет ли, по их мнению, работать, чтобы помочь вам достичь вашей главной цели.
На основании полученных отзывов вы можете захотеть настроить некоторые вещи или даже полностью изменить свой сайт. (Помните: как оживить ваш сайт, зависит от вас, так что вы можете выбрать отзывы, с которыми вы согласны.) еще один — чтобы увидеть, насколько новая версия соответствует вашей цели.Надеюсь, после нескольких раундов вы будете уверены, что ваш новый сайт выполняет то, что вы от него хотите.
Наконец, добавьте остальной контент и сделайте последние штрихи. (Это момент для обработки ваших больших изображений с помощью TinyPNY, как я упоминал ранее в примечании для ботаников.)
Когда ваш сайт будет готов, отправьте его другому надежному другу (желательно тому, кто умеет обнаруживать опечатки и подробности), и попросите его сделать быстрый обзор.
День запуска
Поздравляем, вы завершили работу над своим сайтом, и теперь пора запустить его в мир! Так же, как вы создали сайт, соответствующий вашему стилю, вы также можете запустить его в своем собственном стиле. У меня есть друзья, которым нравится, чтобы их объявления были более интимными, отправляя электронное письмо людям, которым они хотят поделиться с BCC’d. Некоторые другие друзья будут искать более широкую аудиторию, используя Instagram и / или Twitter, чтобы делиться новостями, такими как запуск нового сайта.Любой способ, которым вы хотите поделиться своим новым домом в Интернете, — это здорово, если он вам подходит и учитывает вашу цель и аудиторию.
Дополнительные советы по продуманному подходу к продвижению своей работы см. В Руководство по продуманному продвижению творческого человека от Кэтрин Джаллер.
Если вы зашли так далеко и успешно запустили сайт, это большое дело. Пожалуйста, сделайте мне последнее одолжение и отпразднуйте всю вашу тяжелую работу. Побалуйте себя чем-то особенным и восхищайтесь тем, чего вы достигли.
Некоторые основные шаги, которые необходимо выполнить, когда вы начнете создавать свой веб-сайт: Как и ваше собственное человеческое тело, веб-сайт состоит из множества слегка меняющихся компонентов, и поэтому стоит делать хотя бы раз в год. проверка, чтобы убедиться, что все работает должным образом.
Вот контрольный список рекомендаций по поддержанию бесперебойной работы вашего сайта после его запуска:
Убедитесь, что ваш домен и учетная запись хостинга настроены на автоматическое продление.Если вы можете себе это позволить, с самого начала инвестируйте в многолетний контракт, чтобы сэкономить немного денег в долгосрочной перспективе и облегчить себе жизнь в будущем.
Используйте менеджер паролей и / или создайте личный и безопасный документ, содержащий всю информацию о вашей учетной записи и данные для входа. Чем сложнее ваша установка, тем важнее будет эта документация, когда что-то пойдет не так или когда вам, наконец, понадобится продлить контракт на хостинг через три года.
Ежегодно входите в свою учетную запись и создавайте резервную копию своего сайта на свой компьютер или флэш-накопитель.Этот архив будет приятно смотреть через годы, когда ваш сайт будет развиваться и изменяться. Это также полезно в редкие моменты, когда контент теряется или служба выходит из строя. (Примечание: если вы работаете на платформе, такой как SquareSpace, резервное копирование может быть немного сложнее)
Создание пространства для себя в Интернете со своим собственным доменом и стилем — одна из самых важных вещей, которые вы можете сделать, чтобы поделиться своей работой.
Добавить комментарий