Веб сайт как создать – Как создать сайт бесплатно самому с нуля? Есть 3 способа!

Содержание

Как сделать простой веб-сайт за один час / Habr

От переводчика: инструкция максимально простая, зато на неё можно ссылаться, если новички задают вопрос, как запустить свой сайт в интернете.

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

В реальности, достаточно всего одного часа, чтобы сделать веб-сайт. Я это знаю, потому что засёк время, когда сам выполнял нижеследующие действия, и весь процесс занял чуть меньше часа (я даже зарегистрировал новый домен и создал новый аккаунт на Github для чистоты эксперимента). Код этого сайта тоже можно посмотреть на Github.

1. Идёте на namecheap.com и регистрируете домен. Этот шаг только в том случае, если нужно собственное доменное имя.

2. Создаёте аккаунт Github и скачиваете Git, если это ещё не сделано.

3. Создаёте директорию для размещения веб-сайта и перемещатесь туда командой

cd: это команды mkdir my-site && cd my-site. Все будущие команды предполагают, что вы внутри рабочей директории.

4. Делаем новый репозиторий Github для сайта под названием yourusername.github.io. Например, я зарегистрирован под именем smilli, так что мой репозиторий называется smilli.github.io.

5. В рабочей директории запускаем git init и git remote add origin github.com/username/username.github.io.git, где вместо ‘username’ указываем свой имя пользователя.

6. Создаём файл ‘index.html’ в папке с сайтом с HTML-кодом главной страницы. Здесь необязательно тратить много времени, он может быть весьма лаконичным.

<html>
<head>
  <title>YOUR SITE TITLE</title>
  <-- Add some style to your site, see http://getbootstrap.com for details -->
  <link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <h2>YOUR SITE TITLE</h2>
  <p>Your text blahblahbhalbha</p>
  <p>Another paragraph!  Maybe more text!</p>
</body>
</html>

7. Пишем в коде главной страницы любой текст. Изменения отображаются локально командой python -m SimpleHTTPServer 8000 и набором адреса localhost:8000 в браузере.

8. Теперь запускаем следующие команды:

git add .
git commit -m "Initial commit"
git push -u origin master

9. Идём на yourusername.github.io. Здесь вы должны увидеть свой сайт! Поздравляю, вы что-то опубликовали в онлайне.

10. Если хотите собственное доменное имя, создаёте файл ‘CNAME’ (всё прописными буквами). Туда добавляете одну строчку ‘’yourdomainname.com’ (без http или www). См. подробности конфигурации CNAME здесь.

11. Как и раньше, отправляем все изменения на Github.

git add .
git commit -m "Add CNAME"
git push

12. Теперь авторизуетесь на namecheap.com и щёлкаете по доменному имени, которое нужно, в списке своих доменов. Список будет примерно таким:

После выбора домена, появится ссылка «All Host Records» в левой панели во вкладке «Host Management». Нажмите на неё. Теперь вы увидите настройки по умолчанию, которые Namecheap указал для вашего сайта.

Измените настройки следующим образом (заменив ‘username’ на своё имя пользователя, конечно).

13. После вступления в действие изменений в DNS вы сможете увидеть свой сайт на своём домене! Поздравляю. 🙂

habr.com

Как создать веб-страницу и разместить ее на локальном веб-сервере

Здравствуйте уважаемый посетитель!

Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.

А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.

Содержание

  • Создание виртуального хоста на локальном веб-сервере
  • Создание файла веб-страницы с проверкой работы локального веб-сервера
  • Составление каркаса HTML-страницы
  • Исходные файлы сайта

Создание виртуального хоста на локальном веб-сервере

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

Здесь, будет рассматриваться работа с локальным веб-сервером на примере сборки программ Denwer (Денвер). Но, это не принципиально, так как все это можно делать и на других аналогичных программных продуктах.

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

После установки Денвера в директории «WebServers/home/» уже имеются сконфигурированные виртуальные хосты, такие как, «localhost», «test1.ru», «custom». Создадим для нашего сайта новый хост и назовем его, к примеру, «newsite.local», подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как «ru», «com» и т.п.

Рис.1

В этой папке «newsite.local» создадим новую папку «www», в которой и будем размещать файлы сайта, а также, скопируем сюда же из существующих хостов, вспомогательные папки «subdomain» и «cgi».

Рис.2

После проделанных операций, необходимо перезапустить сервер для того, чтобы он внес в свою работу соответствующие изменения. Это можно сделать через ярлык «Restart Denwer», который может быть создан при установке Денвера, либо (если его не оказалось) через специальный файл Restart.exe в папке «denwer».

Рис.3

Создание файла веб-страницы с проверкой работы локального веб-сервера

Ну, а теперь перейдем к созданию веб-страницы. Для этого, в первую очередь, с помощью текстового редактора Notepad++ создадим файл «index.html», в котором будет находиться код нашей главной страницы. Как установить текстовый редактор можно посмотреть здесь.

Следует отметить, что при открытии сайта с адресом, в котором указано доменное имя, без каких-либо других директорий, браузеры всегда открывают файл, находящийся в корневом каталоге под именем «index». Поэтому, мы и начнем создавать страницы нашего сайта с этого файла. В данном случае он будет иметь расширение «html», так как его код будет основан на HTML.

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

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

Рис.4

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

Теперь сохраним этот файл в папке «www» вновь созданного хоста «newsite.local». Для этого, через меню «Файл» выберем «Сохранить как», введем имя файла «index.html», укажем нужную папку и нажмем «Сохранить».

Рис.5

Далее, проверим, как отображается наша страница. Для этого, обновим браузер, введя в его адресное поле имя нашего хоста «newsite.local». Если все сделано правильно, на экране должна появиться надпись с какими-то иероглифами, как показано на скриншоте (еще раз отмечу, что такие подробности здесь рассматриваются только для тех, кто это делает в первый раз, чтобы наглядно показать, что обычно получается при неправильном соответствии кодировок. А вообще, эту проверку можно пропустить и сразу перейти к следующему шагу).

Рис.6

Такие непонятные знаки появились из-за несоответствия кодировок браузера и отображаемой страницы. Для того, чтобы впредь такого не происходило, необходимо в дополнительном конфигурационном файле «.htaccess» веб-сервера указать нужную кодировку.

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

Для того, чтобы это сделать, надо аналогичным образом, как и с «index.html», в редакторе Notepad++ создать новый файл и сохранить его в той же папке под именем «.htaccess». При этом в самом файле необходимо написать следующую строку «AddDefaultCharset UTF-8», как показано на скриншоте.

Рис.7

Ну, а теперь, если снова обновить браузер с адресом нашего хоста «newsite.local», то можно убедиться в появлении на странице того текста, который изначально был написан нами в файле «index.html».

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

В случае, если этого не получилось, то прежде, чем переходить к следующим шагам, нужно вернуться назад и устранить возникшую проблему.

Рис.8

Составление каркаса HTML-страницы

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

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

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

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

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

Поэтому, при создании веб-страниц удобно пользоваться справочниками. Какими? Очень сложно однозначно ответить на этот вопрос. Наверное, у каждого имеются свои предпочтения, тем более, что в сети интернет их имеется большое множество.

От себя, могу посоветовать такой информационный ресурс, как онлайн справочник PuzzleWeb.ru. Особенность его в том, что он дает не только достаточно подробную справочную информацию по основным языкам, используемых в сайтостроении, таким, как HTML, CSS, JavaScript, PHP, но в нем также имеются разделы самоучителя, в которых очень сжато, но в то же время довольно познавательно объясняются основы этих языков с приведением наглядных примеров.

скриншот 58

Также, можно отметить справочный интернет-ресурс WebReference, в котором имеется довольно полная информация по современным версиям HTML5 и CSS3, куда также включены учебные курсы по веб-технологиям.

скриншот 59

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

скриншот 60

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

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

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset=«utf-8» />

  5. <title>Заголовок страницы</title>

  6. <meta name=«Description» content=«Краткое описание содержания страницы»>

  7. </head>

  8. <body>

  9. <div class=«wrapper»>

  10. <header>Шапка</header>

  11. <section>

rabota-vinete.ru

Разработка красивого веб-сайта с нуля. Как создать веб-сайт

Доброго времени суток, уважаемые читатели блога http://www.webformyself.com

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта http://net.tutsplus.com/ . Данная статья Вам покажет как можно нарисовать красивый сайт, имея практически нулевые знания в программе Photoshop.

Автором данной статьи является Marko Prljic.

Поехали…

Вам захотелось создать красивый сайт, но Вы даже не представляете, как это делается? Хотите узнать, как создать веб-сайт? Честно говоря, несколько лет назад это и со мной произошло. Путешествуя по сети, я встречал множество красивых сайтов, и мне самому всегда хотелось уметь разрабатывать такой дизайн для сайтов. Сейчас я уже это умею и готов научить и Вас, как это сделать! В сущности, для этого требуются некоторые навыки работы в Photoshop и внимание к деталям. В этом руководстве я буду обращать внимание на те незначительные на первый взгляд детали, из которых складывается красивый дизайн сайта. Запускайте Photoshop и приступим к делу!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Автор: Marko Prljic

Редакция: Рог Виктор

Привет, меня зовут Марко, я веб-дизайнер из чудесной страны Хорватии. Я разрабатываю амбициозные, классно выглядящие, современные сайты. Также я пишу статьи для Themeforest и Graphicriver, и люблю писать разные руководства. В свободное от создания сайтов время я просто общаюсь со своими детьми или обдумываю очередной Большой Проект. О, как и все остальные, я веду блог на Twitter.

Шаг 1 – Скачайте 960 Grid System Template

Почти все дизайны я разрабатываю на основе блочной системы 960 Grid System. Поэтому нам сначала нужно скачать эти блочные шаблоны для Photoshop, которые можно найти на официальном сайте 960.gs. Просто распакуйте zip-архив и найдите в нем PSD-шаблоны. Вы увидите шаблоны двух типов: один – 12_col, второй – 16_col. Как видно по названию, отличаются они тем, что один состоит из 12 колонок, а другой из 16. Чтобы пояснить чуть точнее, допустим, что Ваш дизайн будет состоять из трех вертикальных блоков, тогда Вам нужно взять шаблон 12_col, так как 12 кратно 3. А если Ваш дизайн будет состоять из четырех вертикальных блоков, тогда Вы может брать в качестве шаблона как 12_col, так и 16_col, потому что и 12, и 16 кратно 4. Далее в руководстве мы рассмотрим это на примере.

Шаг 2 – Определяем структуру

Перед тем, как мы откроем наш PSD-шаблон и начнем рисовать, нам сначала нужно определиться со структурой нашего сайта. Это будет довольно усложненная структура, поскольку мы будем использовать слои, вложенные друг в друга. Это проиллюстрировано на рисунке выше.

Шаг 3

После того, как мы определились со структурой сайта, можно двигаться дальше. Откройте Ваш шаблон 16_col.psd. Перейдите в меню «Изображение» > «Размер холста» (Image > Canvas size). Установите размер 1200px по ширине и 1700px по высоте. Установите цвет фона #ffffff.

Шаг 4

Далее выберите инструмент «Прямоугольник» (Rectangle) и нарисуйте прямоугольник по всей ширине холста и высотой примерно 80px. Залейте его цветом #dddddd.

Шаг 5

Создайте новый слой над прямоугольной областью и установите для этого слоя режим «Перекрытие» (Overlay). При нажатой клавише Ctrl щелкните мышью по слою с прямоугольником. Он будет выделен. Выберите мягкую кисть (soft brush) толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке. Таким образом, Вы создадите красивый и легкий световой эффект. Кроме того, можно связать эти два слоя.

Шаг 6

Новый слой. Выберите снова инструмент «Прямоугольник» (Rectangle) и нарисуйте тонкий темно-серый прямоугольник, как показано на рисунке.

Шаг 7

Выбрав инструмент «Прямоугольник» (Rectangle), нарисуйте большой блок примерно на 500px ниже верхнего прямоугольника. Сделайте его высотой 575px и наложите на него линейный градиент в границах оттенков от #d2d2d0 до #ffffff, с углом -90° и масштабом 100%.

Шаг 8

Сейчас мы создадим такой же световой эффект, который описан в Шаге 5. Мы еще не раз будем использовать этот прием, поэтому в следующий раз я просто буду отсылать Вас к Шагу 5, где описан этот эффект.

Создайте новый слой над всеми текущими слоями. При нажатой клавише Ctrl щелкните мышью по большому прямоугольнику. Выберите мягкую кисть толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке.

Шаг 9

Создайте новый слой и нарисуйте большой прямоугольник высотой 400px. Он будет использоваться для шапки нашего сайта. Наложите на него красивый голубой градиент от оттенка #2787b7 до #258fcd.

»Видите, какой нежный переход оттенков?



Шаг 10

Добавьте темно-синюю линию толщиной 1px вдоль нижней границы шапки, наложите эффект тени (Drop shadow). Для наложения тени используйте режим Умножение (Multiply), непрозрачность (Opacity) 65%, угол (Angle) -90°, смещение (Distance) 1px, размер (Size) 6px. Далее создайте поверх новый слой и нарисуйте под синей линей еще одну линию толщиной 1px белого цвета. Таким образом, мы создадим отчетливую границу для нашего блока с основным контентом. В принципе, этот прием оформления границ Вы можете применять для каждого блока Вашего проекта, только с другими оттенками.

Шаг 11

Создайте новый слой и с помощью инструмента «Прямоугольник» (Rectangle) нарисуйте в верхней части холста прямоугольную область высотой 50px, как показано на рисунке. Она будет служить для панели навигации.

Наложите тень, используя параметры, представленные на рисунке.

Шаг 12

Настало время заняться навигацией. Используйте инструмент «Прямоугольник с округленными углами» (Rounded Rectangle), установите радиус 5px. Нарисуйте прямоугольник, сделайте заливку цветом #f6a836 и наложите следующие эффекты:

— Внутренняя тень (Inner Shadow) – цвет: #ffffff, Режим: Перекрытие, Прозрачность: 60%, Угол: 120 °, Смещение: 7px, Размер: 6px.

— Внутреннее свечение (Inner glow) – Режим: Нормальный, цвет: #ffffff, Размер: 4px, остальные параметры оставьте по умолчанию.

— Обводка (Stroke) – Размер: 1px, Положение: Внутри, цвет: #ce7e01.

Теперь выделите этот прямоугольник с помощью Ctrl и щелчка мыши. Перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract), и введите в появившемся окне 1px.

Создайте сверху новый слой, установите режим «Перекрытие» (Overlay) и наложите эффект, описанный в Шаге 5, только в этот раз используя кисть меньшего размера. Далее добавьте текст для навигации. Я использовал для ссылок навигации шрифт Arial, все буквы заглавные и без сглаживания.

Шаг 13

Теперь давайте создадим поле поиска. С помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) с радиусом 5px создайте поле для поиска по правой стороне размеченной сетки шаблона, в середине верхней серой полосы, созданной на Шаге 4. Добавьте к слою следующие стили:

— Внутренняя тень (Inner Shadow) – цвет: #000000, Режим: Умножение (Multiply), Непрозрачность (Opacity): 9%, Угол (Angle): 90°, Смещение (Distance): 0px, Размер (Size): 6px.

— Обводка (Stroke) – Размер (Size): 1px, Положение: Внутри (Position: inside), цвет: #dfdfdf.

Я добавил текст «Search» и светло-серую кнопку «Go». Выглядеть это должно так.

К этому моменту у нас уже много слоев и необходимо их немного упорядочить. Для этого мы создадим новую Папку слоев и назовем ее «Search». Выделите все слои, из которых состоит поле для поиска, и просто перетащите их новую папку. В дальнейшем мы распределим по папкам и другие элементы, чтобы у нас была лаконичная, упорядоченная палитра слоев.

Шаг 14

Создайте новый слой и нарисуйте кнопку «Sign Up» точно так же, как мы нарисовали поле для поиска, только по ширине на половину меньше. Поместите ее под поисковым полем, по центру навигационного блока.

Снова создаем эффект, описанный в Шаге 5.

Используйте мягкую кисть меньшего размера. Я в данном случае выставил размер 45px.

Шаг 15

После добавления логотипа и подзаголовка наш сайт должен выглядеть вот так.

Шаг 16

Сейчас вернемся к упорядочению слоев, о котором мы упоминали выше. Создайте новую пустую папку слоев и назовите ее «top_bar». Переместите в нее все слои графики из верхней части шаблона (логотип, подзаголовок, поле поиска, кнопку регистрации, панель навигации и элементы фона).

Создайте еще одну пустую папку слоев и назовите ее «header». В нее мы переместим графику из шапки нашего шаблона. Вот так это должно выглядеть.

Шаг 17

Наша шапка пока выглядит несколько простовато, поэтому добавим к ней тот же световой эффект, который мы применяли к другим элементам сайта. Выделите блок шапки (тот, что голубого цвета). Создайте сверху новый пустой слой и установите для него режим «Перекрытие» (Overlay).

Выберите большую мягкую кисть размером 600px, цвет #ffffff, и нажмите несколько раз в области под навигационной панелью. Кроме того, для получения более глубокого эффекта мы можем переключить на черный цвет и сделать то же самое в нижней части шапки. Попробуйте!

Шаг 18

На этом шаге я объясню Вам, как я сделал отражение для изображений в шапке. Найдите пару изображений на свой выбор, я использовал скриншоты браузера Safari с изображениями двух других моих шаблонов. Уменьшите один из них и поместите под вторым, который больше. Создайте дубликат обоих слоев и с помощью инструмента «Свободное трансформирование» (Free Transform) переверните сначала одно изображение, затем второе. Сдвиньте оба изображения на несколько пикселей вниз. Теперь сделайте выделение снизу с внешней стороны до середины первого перевернутого изображения с помощью инструмента «Прямоугольная область» (Rectangular Marquee). Перейдите в меню «Выделение» > «Модификация» > «Растушевка» (Select > Modify > Feather) и в появившемся окне введите 30px или больше. У Вас должно получиться такое же выделение, как показано на рисунке. Нажмите несколько раз кнопку Delete, чтобы получилось красивое затененное отражение оригинального изображения. Повторите этот же шаг для второго изображения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (Overlay). Наложите эффект, описанный в Шаге 5.

Вот так наша шапка должна выглядеть после добавления красивого заголовка и нескольких кнопок. Не забудьте сгруппировать все слои с графикой шапки в папку «header», чтобы сохранить порядок на палитре слоев

Шаг 19

Посмотрев на итоговое превью нашего дизайна, Вы заметите красивые вкладки в блоке с основным контентом. Для создания подобных вкладок нам необходимо будет выполнить еще несколько дополнительных шагов, но это определенно того стоит. Сперва с помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) нарисуйте большую прямоугольную фигуру высотой 70px и радиусом углов 10px или больше, если посчитаете нужным. Сейчас нам надо избавиться от нижних округленных углов и сделать их идеально прямыми. Выберите инструмент «Область (горизонтальная строка)» (Direct Selection) и установите его на границе фигуры. Щелкните по точке вертикальной оси и, удерживая клавишу Shift, оттяните ее вниз, пока она не достигнет уровня горизонтальной оси. Уже неплохо, но угол все еще деформированный. Заметен небольшой хвостик. Нажмите на него и сдвиньте вверх до уровня горизонтальной оси.

Мы сделали идеально прямой угол. Вот так это должно выглядеть. Теперь повторите этот шаг для правого нижнего угла.

Шаг 20

Выберите инструмент «Линия» (Line) толщиной 1px.

Шаг 21

Начертите разделители серого цвета, удерживая клавишу Shift.

Шаг 22

Разместите какие-нибудь иконки, заголовки и описание для каждой вкладки. Я использовал иконки Рэя Ченга, которые можно скачать с сайта WebAppers.com. Как правило, одна вкладка всегда активна, в то время как другие остаются неактивными. Чтобы это четко было видно в нашем дизайне, нам нужно найти способ это показать. Я обесцветил остальные иконки и уменьшил непрозрачность для заголовков и текста, оставив первую активную вкладку цветной и яркой.

Шаг 23

Чтобы сделать активную вкладку более отчетливой, мы установим для нее затененный белый фон. Для этого выделите сперва всю фигуру, а затем вычтите из выделенного лишнее, чтобы выделенной осталась только первая вкладка.

Вот так должно выглядеть выделение.

С помощью маленькой мягкой кисти создайте белый фон.

Шаг 24

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

Добавьте векторную маску (vector mask), нажав на маленькую иконку внизу палитры слоев.

Установите черный цвет, выберите большую мягкую кисть и начните удалять прямоугольник небольшими частями, пока не получится красивый эффект имитации тени под нашими вкладками.

Наконец, уделим внимание деталям. Начертите серую линию толщиной 1px вдоль нижней границы панели вкладок. Добавьте снова маску на слой, как описано выше, и большой мягкой кистью удалите края линии слева и справа. Теперь у нас есть красиво затененная линия, которая подчеркивает тень под нашими вкладками.

Вот так должны выглядеть наши вкладки.

Шаг 25

Пришло время заняться дизайном основного содержания нашей первой вкладки. Нам потребуются красиво оформленное изображение, симпатичный заголовок и какой-нибудь текст. Сначала займемся оформлением изображения. Мне показалось, что неплохо бы нарушить прямолинейность нашего дизайна созданием красивого эффекта сложенных в стопку фотографий. Чтобы этого добиться, нарисуйте белый прямоугольник с рамкой серого цвета и толщиной 1px, и наложите на него легкий эффект отбрасывания тени.

Далее сделайте дубликат слоя и поверните его на несколько градусов с помощью инструмента «Свободное трансформирование» (Free Transform). Повторите этот шаг еще раз.

Импортируйте подготовленное изображение и поместите его над белыми прямоугольниками. Не волнуйтесь, если изображение выходит за границы блока – мы это исправим. Выделите верхний прямоугольник, перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract) и в появившемся окне введите 5px. Выделив слой с изображением, нажмите иконку «Быстрая маска» (Quick Mask) внизу палитры слоев. У Вас получится эффект красивой картинки с рамкой, как показано на рисунке выше.

Вот так у Вас должен выглядеть порядок слоев.

Шаг 26

Не забывайте следить за порядком. Создайте папки слоев и распределите по ним слои на своей палитре. У меня это сделано вот таким образом.

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

И еще немного организации слоев.

Шаг 27

Я решил, что этот блок должен быть большим, поэтому я разместил его в большом поле сразу после главного блока. Сначала рисуем большой светло-серый прямоугольник высотой примерно 220px с рамкой серого цвета толщиной 1px.

Далее рисуем еще один прямоугольник, светлее и меньше предыдущего на 10px с каждой стороны. У него также должна быть светло-серая рамка толщиной 1px.

Добавляем какой-нибудь текст, и все готово!

Шаг 28

Теперь займемся нижним колонтитулом. Нарисуйте большой темно-серый прямоугольник высотой 400px.

Шаг 29

Наложите световой эффект точно так же, как мы описывали в Шаге 5.

Шаг 30

Далее начертим над колонтитулом прямоугольник высотой 10px и применим к нему легкий эффект, добавив две линии сверху и снизу, как показано на рисунке.

Шаг 31

Создайте самый нижний блок, в котором будет продублирована навигация. Можно скопировать верхний прямоугольный блок с навигацией, поместить его внизу и установить для него высоту около 40px. Поместите его в самом низу Вашего холста. Пожалуйста, имейте в виду, что Вам возможно потребуется расширить холст для этой цели, чтобы на нем уместилась вся графика. В этом случае откройте в меню «Изображение» > «Размер холста» (Image > Canvas size) и установите высоту, при которой весь проект умещается на холсте.

Шаг 32

Снова уделим внимание мелким деталям. Добавим белую линию толщиной 1px вдоль верхней границы нижнего блока навигации, придав тем самым красивый эффект для его рамки.

Шаг 33

Наполним колонтитул содержанием и красиво упорядочим его по нашей сетке.

Шаг 34

Напоследок распределите все Ваши слои по папкам. У меня это сделано так.

Дизайн






Вот такой дизайн у нас получился в итоге, с парой изменений для разных страниц. Готовые PSD-дизайны, конечно же, можно приобрести на сайте ThemeForest.net.

Пара слов в заключение

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

Автор: Marko Prljic

Источник:http://net.tutsplus.com/

Редакция: Рог Виктор.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

webformyself.com

Как сделать веб страницу html с картинкой для чайников

 

для чайников 

 

 

 

 

Вас заинтересовал вопрос: “Как сделать html страницу?”, то просмотрев данную статью, вы сможете сделать html страницу самостоятельно, не прилагая больших усилий.

  

HTML (HyperText Markup Language — «язык разметки гипертекста») не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы указываем браузеру где будет размещен текст, картинка, таблица и т.п. ).

 

То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (тэги).

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

Теперь мы перейдем к практическому осуществлению нашей задачи “Как сделать html страницу?”.  Для этого нам понадобится любой текстовый редактор.  Я вам посоветую «Notepad++».  Либо можете воспользоваться стандартным блокнотом, только будьте внимательны, когда будете сохранять файл, обязательно сохраняйте его с расширением «html». Название обязательно пропишите латинскими буквами.
Это будет выглядеть так:
 «page.html»

И так, открываем наш редактор, и пишем следующий код:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета
</body>
</html>

Сохраняем созданный текст.
Для просмотра созданной страницы html в любом браузере, нужно просто кликнуть на пиктограмме «page.html».

Вставить картинку в html страницу

Чтоб вставить картинку в html страницу, её необходимо предварительно подготовить.
Выбираем нужное изображение, редактируем его  либо в документе Word (простой вариант), либо в Photoshop.
Сохраняем картинку в формате  JPEG, в нашей папке для создания страниц html.
Пример:
название папки:  user_page
в этой папке:
страница: page.html
картинка: kartinka.jpg

Для вставки картинки в страницу применяется тег <img>. 
Для указания пути к картинке в теге используется параметр src=
Вот так будет выглядеть код  html, при помощи которого можно вставить картинку в страницу  html:
<img src=»/kartinka.jpg»> (при условии: страница и картинка находятся в одной папке).

А это код страницы html с картинкой

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Я Вас приветствую!!! <br/> Это Начало большого пути в просторы Интернета

<img src=»/kartinka.jpg»>
</body>
</html>

 

Если вы выполнили все так, то в браузере будет отражен результат вашей работы.
Оказывается,  сделать html страницу совсем  не сложно!

Ниже приведены атрибуты для тега <img>, и их предназначение:

<img src=»/kartinka.jpg»>

Без атрибутов — текст по умолчанию находится снизу картинки

<img src=»/kartinka.jpg» align=»right»>

align=»right» — картинка справа, текст слева

<img src=»/kartinka.jpg» align=»left»>

align=»left» — картинка слева, текст обтекает справа

<img src=»/kartinka.jpg» align=»bottom»>

align=»bottom» — как и по умолчанию, текст внизу картинки

<img src=»/kartinka.jpg» align=»middle»>

align=»middle» — текст посередине картинки

<img src=»/kartinka.jpg» align=»top»>

align=»top» — текст вверху картинки

<img src=»/kartinka.jpg» vspace=»10″>

vspace — задаёт расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — самая маленькая единица изображения (точка). Например, если экран Вашего монитора 800х600, это значит, что он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10 пикселям (точкам).


<img src=»/kartinka.jpg» hspace=»20″>

hspace — задаёт горизонтальное расстояние между текстом и рисунком. Расстояние задаётся в пикселях. В примере отступ текста от картинки равен 20 пикселям (точкам)

<img src=»/kartinka.jpg» alt=»Сайт для сайтостроителей»>

alt — задаёт название (описание) картинки (действует не во всех браузерах. В Internet Explorer – работает!). Работает, если ваш посетитель наведёт мышку на картинку и подержит несколько секунд. В этом конкретном примере появится надпись «Сайт для сайтостроителей». Я рекомендую Вам задавать атрибут alt, особенно тогда, если Ваша картинка является ссылкой (кнопкой).


<img src=»/uzeron_pc.jpg»>

width — задаёт ширину картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую всегда задавать размеры!!!)

<img src=»/uzeron_pc.jpg»>

height — задаёт высоту картинки в пикселях. Если же Вы не поставите этот атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую всегда задавать размеры!!!)

<img src=»/uzeron_pc.jpg» border=»0″>

border — задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.

<p align=»center»><img src=»/uzeron_pc.jpg»> </p>

<p></p> — размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например:
align=»left» — слева
align=»center» — в центре
align=»right» — справа

<body bgcolor=»#000000″ background= «uzeron_pc.jpg»></body>

background=»Ваш_фон.jpg»- Ваша картинка будет фоном HTML странички. В атрибуте background=»Ваш_фон.jpg» нужно прописывать путь к Вашей картинке так же, как и в размещении обычной картинки. Я рекомендую оставлять bgcolor для того случая, если не загрузится Ваша картинка.
Добавить комментарий

www.sitedelkino.ru

Как сделать web сайт. Этапы создания веб сайтов.

Практически каждый web сайт – и уж точно все коммерческие сайты – начинают свою жизнь в виде эскизов, сделанных в Фотошопе или Иллюстраторе. И поскольку большинство из нас следует Правилу Троицы (покажите клиенту три дизайна, продайте один из них), каждый дизайн имеет двух нерожденных братьев.

Иногда победу одерживает лучший из предложенных дизайнов; а часто, – наиболее консервативный. Отвергнутые эскизы помещаются на кладбище, а победитель, который до этого был отпрыском только дизайнера, начинает подвергаться массированной атаке клиента (Это у клиента называется “внесением изменений”). В зависимости от отношений между дизайнером и клиентом и здравым смыслом, заключенным в идеях клиента, выбранный дизайн может либо измениться частично, либо может пройти через столько стадий пересмотра изменений, что в конце концов его не узнает даже собственная мать.

Чтобы сделать web или wap сайт нужно не многое: желание, инструменты и информация по сайтостроению. Если у Вас уже есть первое и второе, то различную информацию на тему как сделать веб сайт Вы найдете ниже.

Этапы создания веб сайтов1. Придумайте для своего сайта тему и название. Название должно совпадать с тематикой, идеей вашего сайта и быть доступным для запоминания. Если это будет домашняя страница, то ее, например, можно назвать «Домашняя страница», если же это какой-то тематический портал, то можно так и назвать – «Моддинг-портал», или, например, «Вышивка крестиком». Вариантов тут уйма. Возможно, ваше название станет и «адресом вашего сайта», к примеру, www.modding-portal.ru или www.home-page.ru
2. Создайте папку на вашем жестком диске, и назовите её согласно придуманному адресу. Эта папка и будет хранилищем для всех страничек и фалов нашего сайта.
3. Решите, какие разделы (ссылки) будут на вашем web сайте. Если это будет домашняя страница, то она может содержать главу «О себе», «Мои фотографии», «Мои увлечения» и т.д. Желательно где-то эти сведения записать.
4. Теперь придумайте к названиям разделов (ссылок) названия файлов. Названия могут быть любыми. Например «О себе» – about.htm, «Мои фотографии» – foto.htm, «Мои увлечения» – uvlecheniya.htm и т.

seoklub.ru

План как создать сайт по шагам

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

Все эти «http.что-то там…», плагины, и как туда можно вставить картинку или текст?.. Что ж, здесь нечего бояться, наши статья поможет вам быстро вникнуть во все тонкости!

Первая часть этой статьи посвящена тому, с чего же начать разработку веб-сайта.

Часть 1 из 4: разработка веб-сайта

  1. Вдохновитесь

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

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

  1. Выберите тему и цель

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

 

 

Когда вы говорите «интернет», какая первая вещь приходит вам на ум? Электронная коммерция? Музыка? Новости? Соцсети? Блоги? Это все отличные сферы для старта.

  • Вы можете создать веб-сайт о вашей любимой музыкальной группе, где будет чат, в котором люди будут о ней общаться.
  • Если новости — ваше все, или вы хотите получать больше информации нежели позволяют это сделать привычные издания, тогда сделайте свой новостной портал и получите полный доступ к новостям от известным информагентств, таких как РИА, BBC и др. Создайте собственный «ньюс-фильтр/агрегатор», который поможет отсортировать новости, интересные Вам и Вашей целевой аудитории.

  1. Составьте план

Создание сайта потребует от вас затрат времени, а возможно и денег, поэтому поставьте ограничение по обоим пунктам и начинайте.

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

 

 

  1. Соберите контент

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

  • Магазин. Если вам хочется продавать что-либо, вам нужно понять, каким образом вы хотите обеспечить доступ к товару. Если у вас есть сравнительно немного товаров для продажи, вы, возможно, захотите рассмотреть вопрос создания магазина на готовой торговой площадки. Tiu, Пульс цен — отличные примеры торговых площадок, которые позволяют продавать различный товар и устанавливать свои цены.
  • Медиа. Вам хочется, чтобы на сайте было видео? Музыка? Хотите размещать собственные файлы или, чтобы они могли размещаться где-то еще? Youtube — отличный пример возможностей видеохостинг, но вам нужно удостовериться, что дизайн вашего веб-сайта позволит отображать эти медиа-файлы правильно.
  • Изображения. Вы фотограф? Или художник? Если вы планируете размещать собственные изображения на вашей странице, вы, возможно, захотите использовать формат, позволяющий защитить их от копирования (кражи). Убедитесь, что изображения имеют относительно небольшой размер, или что они защищены специальным флэш-кодом, чтобы их нельзя было просто сохранить себе.
  • Виджеты. Это мини-программы, которые запускаются на вашем веб-сайте, как правило, они помогают вам отслеживать, кто посещает страницу, что эти люди ищут, и откуда они. Есть множество виджетов: для заказов, бронирования и так далее. Найдите то, что посчитаете полезным (но убедитесь, что виджет предоставлен авторитетным источником).
  • Контактная информация. Вы хотите, чтобы на странице была контактная информация? Для вашей личной безопасности вам следует быть осторожным с информацией, которую вы хотите разместить. Никогда не указывайте такие данные, как ваш домашний адрес или номер телефона, потому что такая информация может применяться в недобрых целях. Вы можете использовать специальный email адрес для связи с вами, если у вас нет юридического адреса.

  1. Нарисуйте блок-схему

Для практически всех посетителей сайт начинается с домашней страницы. Домашняя – это страница, которую видит каждый, когда переходит по адресу www.ВашСайт.ru. Но куда им переходить дальше? Если вы немного подумаете о том, как посетители будут взаимодействовать с вашим сайтом, то вам будет значительно проще во всех отношениях при создании навигационных кнопок и ссылок.

 

 

  1. Адаптивность сайта

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

 

 

mtsite.ru

Как создать свой сайт в интернете бесплатно

На сегодняшний день, для того чтобы создать собственный сайт не обязательно обладать специальными знаниями и проходить обучение. В интернете достаточно много сервисов, предлагающих бесплатное создание сайта. Из статьи вы узнаете, как создать свой сайт в интернете бесплатно на популярном конструкторе сайтов SETUP, и получить бесплатное доменное имя .RU …

Конструктор сайтов SetUP имеет множество положительных отзывов о своей работе. Он удобен, функционален, может предложить множество шаблонов, дизайнов и решений для создания своего сайта «с нуля». Эти неоспоримые достоинства делают сервис Setup.ru прекрасным инструментом для конструирования своего сайта.

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

Можно использовать более надежный хостинг Beget — на данный момент он самый лучший.

Зарегистрироваться на ресурсе можно одним из трех вариантов:

  1. Через электронную почту;
  2. Через профиль VKontakte;
  3. Через профиль Facebook.

После подтверждения созданного аккаунта, нужно войти в свою учетную запись и можно приступать к созданию сайта. При заранее подготовленном контенте, работа над сайтом займет не более получаса. Для начала работы нужно кликнуть на кнопку «Создать сайт» на главной странице SetUP.ru.

Как создать свой сайт в интернете бесплатно в 3 шага

  1. Вид и дизайн сайта;

Перед началом основной работы над сайтом, определяется цель его создания. Будет ли это обычный сайт или Landing Page ­­– целевая страница, для рекламирования и продажи определенного товара или услуги.

После нажатия на кнопку «Создать сайт» появляется страница, на которой выбирается тип сайта (обычный или Landing Page), затем рубрика и подрубрика, и дизайн. В меню слева дизайны распределены по наиболее популярным тематикам. Подобрав тип и дизайн, нужно кликнуть на кнопку «Создать».

Система SetUP поздравит с успешным созданием сайта и предложит перейти к наполнению. Необходимо нажать на кнопку «Да».

После этого система откроет вкладку с сайтом:

  1. Наполнение и редактирование сайта;

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

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

В режиме редактирования каждый элемент сайта можно подвергнуть изменению. Например, требуется отредактировать раздел «Новости». Для этого надлежит нажать на кнопку «Изменить» и откроется окно редактирования.

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

Завершив заполнение основных страниц сайта, следует обратить внимание на страницу «Контакты». Здесь указывается электронная почта для связи, номера телефонов, если потребуется.

Также на сайте можно включить функцию обратной связи, через раздел «Параметры» в личном кабинете пользователя.

В редакторе сайта существует возможность добавления, удаления или изменения страницы. За эту функцию отвечает кнопка «Все страницы», находящаяся в шапке сайта. Во всплывающем меню отобразятся все страницы сайта. Если навести на них курсор мыши, можно увидеть меню редактирования страницы.

После наполнения сайта контентом, в шапке нужно нажать на кнопку «Опубликовать сайт». После этого сайт отправится на модерацию к администраторам SETUP, для проверки на качество созданного сайта, на законность и легальность контента. После проверки сайт можно будет привязать к домену.

  1. Работа с доменами.

После окончания процедуры модерации в личном кабинете появляется сообщение о возможности выбора домена.

Сайт можно привязать к трем видам доменов:

  • Бесплатный, подарочный домен;
  • Платный домен;
  • Привязка к существующему домену.

Бесплатный домен

После нажатия на кнопку «Выберите домен» появляется поле для ввода доменного имени. Перед тем как имя присваивается сайту, оно проверяется на уникальность. Если имя свободно, то открывается форма регистрации владельца.

Рекомендуется вводить подлинные регистрационные данные в эту форму, чтобы в случае непредвиденных обстоятельств пользователь мог доказать право на владение доменом.

После окончания работы с формами появится сообщение об успешном создании сайта. Созданный сайт будет доступен через 6 – 8 часов.

Платный домен

Для выбора этого варианта необходимо предварительно пополнить свой счет на ресурсе. Это можно сделать через следующие системы оплаты: VISA; Яндекс.Деньги; QIWI; Webmoney.

После нажатия кнопки «Опубликовать сайт», во всплывающем меню выбирается вариант «Купить домен».

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

Привязка к существующему домену

Бывают случаи, когда доменное имя уже существует и к нему требуется привязать созданный сайт. На SetUP.ru предусмотрена такая возможность.

В меню управления сайтом необходимо совершить переход в раздел «Домены».

Здесь нужно кликнуть на кнопку «Подключить свой домен к сайту». Откроется окно, в котором пользователю будут представлены настройки. Их необходимо ввести на сайте регистратора доменного имени. Затем в форме вводится выбранное имя и нажимается кнопка «Подключить». Стоит учесть, что для привязки сайту нужно пройти модерацию.

После этих действий сайт будет подключен к доменному имени и будет доступен для пользователей интернета через 6 – 8 часов.

Полезные советы для улучшения качества сайта:

  1. Уникальный и качественный контент;
    Не стоит рисковать и копировать статьи с других источников. Копирование статей понижает сайт в результатах выдачи поисковиков.
  2. Актуальная информация;
    Публикуемые данные обязательно проверяются на достоверность. Недостоверные данные могут подорвать авторитет владельца сайта.
  3. Частота обновления;
    Частая выкладка новостей и заметок, обновление информации, повышают статус ресурса в выдаче поисковиков.
  4. Умеренность в рекламе;
    Сайты, кишащие рекламой, вызывают у пользователей раздражение.
  5. Удобство использования;
    Простая структура, навигация, удобный интерфейс привлекают посетителей.
  6. Безопасность;
    На сайте не должно быть ссылок – ловушек, ведущих на вирусные сайты.
  7. Приятный дизайн.
    Сайт не должен изобиловать яркими цветами. Приятные глазу, неброские тона хорошо подойдут. Текст должен быть контрастным.

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

Похожие статьи:

yakonkurent.com

Опубликовано в категории: Разное

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *