Разработка сайта html: пошаговая инструкция от А до Я

STAFF-ONLINE ДИЗАЙН
2 010

Разработка сайта html: пошаговая инструкция от А до Я

Расскажите об этой статье своим друзьям:

X
Осуществите Ваш 100 % переход на удаленную работу, используя нашу проверенную технологию и многолетний опыт работы

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

Создание сайта включает в себя три этапа:

  • Создание шаблона сайта
  • Верстка
  • Сайт на PHP
разработка сайта html

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

Создание шаблона сайта

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

Итак, что мы делаем:

  1. Создаем новый документ в программе Photoshop и называем его MySite.
  2. Выбираем разрешение так, чтобы изображение у пользователя не подвергалось искажениям. Предпочтительно выбирать 1000*1000. Выбираем разрешение в 72 пикселя на один дюйм и RGB-цвет. Эти настройки сделают отображение страницы более корректным.
  3. Выбираем цвет фона с помощью палитры.
  4. Выбрав функцию «Просмотр» – «Направляющие» корректируем линейки и направляющие.
  5. В меню «Просмотр» - «Привязка к» делаем привязку к направляющим и границам документа.
  6. Выбираем пункт «Текст» и пишем текст для будущего веб-сайта.
  7. Чтобы вставить изображение под заголовком сайта, выбираем функцию «Формы» и вставляем прямоугольник с закругленными краями под изображение.
  8. Загружаем изображение, подходящее под Вашу тематику.
  9. Создаем навигационное меню и заголовок главной страницы с помощью пункта «Текст».
  10. Для заголовков и шрифтов выбираем черный цвет, а для навигационного меню – белый.
  11. С помощью пункта «Раскройка» нарезаем изображения необходимые для верстки сайта.

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

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

разработка сайта html

Верстка сайта

Для разработки сайта html веб-дизайнеру необходимо освоить язык html. В текстовом редакторе создаем документ index.html.

Главное, чтобы первой строкой в файле была эта:

<!DOCTYPE html>

Именно эта строка сообщает браузеру информацию о правильной обработке сайта.

<html>

<head> «Голова» документа</head>

<body> «Тело» документа</body>

</html>

Обращайте внимание на открывающие и закрывающие теги. Теги <html> - </html> показывают, что внутри них содержится html- код.

В основном окне сайта отображается текст, введенный в поле <head> «Голова» документа</head>, а содержимое страницы пишется здесь: <body> «Тело» документа</body>.

С помощью таблицы стилей CSS Вы можете задать формат отображения элементов на веб-странице.

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

Сайт на PHP

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

Чтобы сделать динамический контент, мы выносим шапку и подвал сайта в отдельные файлы: header.php и footer.php, затем в страницах с текстовым содержанием, с помощью PHP, вставляем в макет сайта. Делается это с помощью следующего кода:

<?php include('templates/header.php'); // Вставка шапки сайта ?>

<?php include('templates/footer.php'); // Вставка подвала сайта ?>

Теперь запустите в браузере php/index.php. У Вас ничего не получится, потому что браузер не знает, что ему делать с командами, из которых состоит файл.

Для того, чтобы файл (скрипт PHP) выполнился, он должен быть обработан интерпретатором языка. Такой интерпретатор обязательно есть на веб-серверах, который и обеспечивает PHP кода.

Система Windows предоставляет бесплатный пакет Denwer. Его необходимо скачать и установить.

Запустить его просто: жмите на Start Denwer. После старта, в появившийся в системе виртуальном диске (обычно Z), в папку home/test1.ru/www/ скопируйте содержимое папки php из архива, с которым мы работаем, кроме файла index.html. Наберите в адресной строке браузера test1.ru и получите готовый результат!

Специальные сервисы

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

  • Wix
  • A5
  • Nethouse
  • WordPress
  • Joomla
  • Любой онлайн конструктор

Заключение

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

   
 
Давайте мы подарим Вам
уроки по удаленной работе бесплатно
Просмотр уроков Вас ник чему не обязывает. Мы просто даем Вам возможность познакомиться с удаленной работой и понять, как Вы можете работать удаленно на постоянной основе
* Ваши данные не будут переданы третьим лицам

Здорово

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

Внесите Ваши данные в форму прямо сейчас - и мы свяжемся с Вами по телефону

Ваши данные никогда не будут переданы 3-м лицам.