Июн
16
Автор:
dra1ve, размещено в:
Как создать свой сайт, комментарии:
0 Для начала создадим простейший сайт. Состоит он из одной HTML страницы. HTML (HyperText Markup Language – язык разметки гипертекстов) – универсальный язык, описывающий веб-страницы. Его задача – указать браузеру, что и как отображать при загрузке страницы на компьютере пользователя. Каждая из его команд, называемых тегами, описывает фрагмент страницы.
Перейдем к делу. Перед Вами текст простейшей HTML-страницы:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»ru»>
<head>
<title>Моя первая страничка</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />
<link rel=»stylesheet» href=»style.css» type=»text/css» />
</head>
<body>
<div id=»wrapper»>
<div id=»nav»>
<ul>
<li><a href=»#»>Контакты</a></li>
<li><a href=»#»>Загрузки</a></li>
<li><a href=»#»>Главная</a></li>
</ul>
</div>
<div id=»header»>
<h1> </h1>
</div>
<div id=»showcase»>
<p>Здравствуйте! Я – Перец.<BR>
Добро пожаловать!</p>
</div>
<div id=»top»> </div>
<div id=»text»>
<h1>Ах, перец, перец!</h1>
<p>Сорта перца подразделяют на сладкие и острые, или горькие. Ведущее место принадлежит овощному (сладкому) перцу с нежной, сочной и мясистой мякотью, который употребляется в различных видах: в свежем в качестве салата, консервированном, засоленном, тушеном, фаршированном и других.</p>
<p>Родина сладкого перца – Мексика. В Европе он стал известен только после открытия Америки. Горький перец издавна выращивали в Иране, Ираке, Турции, Афганистане и на восточном побережье Африки.</p>
<p>Перец – многолетнее растение из семейства пасленовых. В наших климатических условиях его выращивают как однолетнюю культуру. Имеет длительный вегетационный период. Цвет плодов разнообразный, зависит от их зрелости и сорта, бывает белым, желто-белым, зеленым, темно-зеленым, оранжевым, красным, темно-красным. Различают крупноплодный, широкоплодный (томатовидный), длинноплодный и мелко-плодный перец.</p></TD>
</div>
<div id=»footer»>
<p>© Name | Разработка <a rel=»nofollow» target=»_blank» href=»http://www.internet-technologies.ru/»>http://www.internet-technologies.ru/</a> </p>
</div>
</div>
</body>
</html>
Скопируйте его и сохраните у себя на компьютере в файле с именем index.html. Ваш первый сайт готов. Можно открыть страничку в любом браузере и посмотреть результат. Выглядеть она должна приблизительно так. (1)
Кстати, index.html – не случайно выбранное нами имя. Конечно, не обязательно, но считается хорошим тоном главную (или ту, которая должна отображаться первой) страницу назвать именно так. По умолчанию, любой веб-сервер страницу index.html пытается выдать браузеру при обращении к нему (необязательно, потому, что на любом веб-сервере это настраивается).
Сохранили? Запускаем. Не получилось? Не расстраивайтесь, Вы все сделали правильно. Просто мы вплотную столкнулись с основным свойством HTML-документа – он может содержать только текст. Контент любого другого типа должен либо храниться в отдельных файлах, либо генерироваться при загрузке страницы.
Примите наши поздравления, Ваш первый сайт – готов! На этом простом примере разберем, как создать сайт.
2. Разрабатываем сайт
Для того, чтобы создать сайт самостоятельно, необходимо выполнить 2 этапа работ:
Разработка шаблона сайта. Именно здесь необходимо определить, как сайт будет выглядеть.
Верстка сайта. Наполняем сайт контентом и заставляем все это работать.
2.1 Разработка шаблона сайта
Как правило, этот этап работ выполняется в достаточно мощном графическом редакторе, например, Adobe Photoshop или CorelDraw. Фотошоп несколько проще в освоении и использовании, а возможности его очень велики. Именно поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной популярностью. Воспользуемся им и мы.
Создаем в Фотошопе новый документ. Задаем имя – MySite.
Выбираем разрешение 800 х 600, это гарантирует корректное отображение у любого пользователя, размер по вертикали потом сможем увеличить. Выбираем разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем обязательно, именно они отвечают за корректное отображение веб-страницы. (2)
Устанавливаем цвет фона D3B497 в шестнадцатеричном виде или выбираем с помощью палитры цветов.
Выбрав пункт меню «Вид» – «Направляющие» активируем отображение линеек и направляющих.
В пункте меню «Вид» – «Показать» включаем сетку
Выбираем инструмент «Перемещение» и, щелкнув на левой или верхней линейке, вытаскиваем вертикальные и горизонтальные направляющие
Получаем размеченную область.
В пункте меню «Вид» – «Привязка к» не забываем убедиться, что включена привязка к направляющим и границам документа. (3)
Командой «Слой» – «Новый» создаем слой с именем banner.
Используя инструмент «Прямоугольная область» выделяем нужный нам фрагмент между направляющими.
Рисуем в этой области прямоугольник со скругленными углами.
Выбираем цвет заливки и заливаем его. (4)
Таким же образом размечаем еще несколько областей – для логотипа, текста приветствия, и описательного текста. Слой для текста приветствия не заливаем. (5)
Для каждого из залитых слоев выбираем эффект «Внешний свет», задаем направление, получаем отбрасываемую тень (6)
На области логотипа создаем слой с тем же цветом заливки.
С помощью инструмента «Горизонтальный текст» вводим текст (7)
Создаем на области баннера новый слой. Открываем файл с изображением и просто перетаскиваем его на вновь созданный слой. (8)
Аналогично заполняем изображениями и текстом остальные области (9)
Наш макет готов!
Теперь из него нужно вырезать фрагменты, необходимые для нашей страницы. Это – область баннера, область логотипа, верхняя и нижняя рамки для поясняющего текста и часть области, для фона поясняющего текста.
С помощью инструмента «Фрагмент» выбираем необходимые части изображения. (10)
В меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество изображений и сохраняем, в результате получаем множество графических фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон, появилась папка images с изображениями. Отбираем нужные и переименовываем.
Макет создан, необходимые фрагменты получены, можно переходить к верстке. Конечно, пока мы воспользовались лишь самыми примитивными возможностями Adobe Photoshop. Книги по веб-дизайну помогут более полно изучить его возможности и познакомиться с другими редакторами.
2.2 Верстка сайта
Создаем в текстовом редакторе файл index.html.
ВАЖНО! Первой строкой файла должна быть строка вида
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»>
Именно она сообщает браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:
<html>
<head> «Голова» документа</head>
<body> «Тело» документа<body>
</html>
Обратите внимание, теги формируют пары – открывающий и закрывающий. Последний всегда начинается с </
Пара <html>…</html> говорит о том, что внутри содержится HTML-код.
Внутри <html>…</html> располагаются теги, которые не отображаются в основном окне. Как правило, они начинаются словом meta, и называются мета-тегами, а вот тег <title>…</title> отображается в заголовке окна браузера и используется поисковыми системами.
Следом располагается пара <body>…</body> в них заключено содержимое страницы. Именно эта часть, тело страницы, отображается в окне браузера.
Существует несколько способов организации контента. Наиболее популярные из них – организация в виде таблиц (<table>…</table>) и с помощью блоков (<div>…</div>).
Формат отображения элементов может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью таблиц стилей. Второй метод более универсален, так как позволяет использовать стили компонентов повторно во всем документе. Таблица стилей задается либо в внутри тега <head>, либо в отдельном файле стили.css, ссылка на который также располагается внутри <head>.
Основными документами, в которых описываются все компоненты языка, являются спецификации – их желательно просмотреть.
Более подробно о всех HTML-тегах, их назначение, использование таблиц стилей (CSS) можно изучить, воспользовавшись книгами в разделе Языки разметки, так же полезные советы по организации контента, верстке, CSS приводятся в статьях.
Оказывается, проблема под названием «как сделать свой сайт» не существует вовсе! Простой одностраничный сайт готов.
На нашей странице все определено заранее и не будет изменяться при обращениях пользователя. Такие страницы называются статическими, и для их описания вполне хватает средств HTML. Если же предоставляемая пользователю информация изменяется в зависимости от каких либо факторов или запросов, говорят, что страница содержит динамический контент (является динамической).
Для создания таких страниц применяют языки веб-программирования. Среди таких языков наиболее широко распространены PHP, Perl и Python и Ruby on Rails под Unix-системами, а для Windows характерна разработка динамического контента с использованием средств .NET.
Это все качается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript.
2.3 Сайт на PHP
В архиве, который вы скачали есть файл index.php. Он реализует три странички нашего сайта с использованием языка PHP. PHP – Cи-образный язык для создания динамических веб-страниц. Главное отличие динамической страницы от статической заключается в том, что она формируется на сервере, а уже готовый результат передается пользователю.
Попробуйте запустить в браузере index.php. Не получилось? Конечно, нет. Ведь браузер не знает, что ему делать с командами, из которых состоит файл.
Для того, чтобы файл (скрипт PHP) выполнился, он должен быть обработан интерпретатором языка. Такой интерпретатор обязательно есть на веб-серверах, который и обеспечивает PHP кода. Как же посмотреть, что изменилось?
Для отладки веб-приложений и реализации полноценного веб-сервера на машинах под управлением Windows в сети бесплатно распространяется пакет Denver (для вашего удобства он уже есть в архиве). Он включает в себя веб-сервер Apache, интерпретаторы языков PHP и Perl, базу данных MySQL и средства работы с электронной почтой.
Установка не требует никаких усилий. Запускаем установочный файл, выполняем все его требования. Выбираем букву виртуального диска для быстрого доступа, создаем ярлыки. Вот и все! Denver к работе готов!
Запускается он по ярлыку Start Denwer (возможно у вас будет называть иначе). После старта, в появившийся в системе виртуальном диске (обычно Z), в папку home/test1.ru/www/ скопируйте содержимое папки mysite из архива, с которым мы работаем, кроме файла index.html. Наберите в адресной строке браузера test1.ru. Знакомая картина? А теперь пройдитесь по ссылкам сверху страницы. Работает? Отлично!
Подробнее о PHP и его использовании – в статьях и книгах.
Итак мы получили динамический трехстраничный сайт и проверили его!
Но до сих пор мы создавали сайт своими руками от начала и до конца. В настоящее время существуют средства облегчающие этот процесс – системы управления контентом (CMS – content management system). К наиболее популярным относятся Joomla!, WordPress, Drupal. Для них разработаны сотни шаблонов (в случае необходимости всегда можно адаптировать один из понравившихся шаблонов сайтов) и дополнений, позволяющих получить профессионально выглядящий сайт с любой функциональностью.
Скорость разработки сайтов, удобство, неограниченные возможности – всего лишь малая часть преимуществ, которые CMS предоставляют вебмастеру. Особенно приятно, что сами системы и многие дополнения к ним относятся к свободному программному обеспечению, что снимает вопрос о том, как создать свой сайт бесплатно.
3. Публикация сайта в Интернет
Мы готовы опубликовать свой сайт в Интернет. Что для этого нужно?
3.1 Домен и хостинг
Во-первых, доменное имя. Доменное имя или домен – символическое имя, под которым Ваш сайт будет известен в сети. Получить его можно либо, купив у регистратора, либо бесплатно, но в виде поддомена от одного из бесплатных хостингов.
Во-вторых, хостинг. Хостинг – услуга размещения сайта на серверах, имеющих выход в Интернет. В настоящее время компаний, предоставляющих эту услугу огромное количество. Остается только выбрать подходящую. К критериям выбора относятся:
Цена – есть как платные, так и бесплатные хостинги.
Объем предоставляемого трафика и дискового пространства
Поддержка тех или иных средств (PHP, MySQL, возможность развертывания CMS, наличие дополнительных скриптов и т.д.)
Чаще всего, компании, предоставляющие хостинг, являются и регистраторами доменов, и наоборот. Так что приобрести эти 2 услуги труда не составляет. Оплата для большинства компаний возможна через электронные платежные системы типа Webmoney, Яндекс.Деньги и другие.
3.2 Размещение сайта на сервере
Предположим, домен и хостинг мы приобрели. Что дальше? Нам необходимо разместить все файлы нашего сайта на сервере у хостера. Как правило, нам предоставляется несколько вариантов для этого.
Обычно это загрузка содержимого по HTTP-протоколу, с использованием панели управления хостера или по FTP с помощью ftp-клиента.
Второй вариант намного быстрее и проще. Одним из лучших ftp-клиентов является встроенный в Total Commander.
Как только устанавливается связь с сервером ftp (хостер обязательно сообщит адрес, логин и пароль входа), пространство сервера станет доступным в виде логического устройства (как и обычные диски Вашего компьютера) на одной из двух панелей. Запускаем процесс копирования, ждем его окончания.
Все, наш сайт опубликован в Интернете. Можете набрать в адресной строке браузера его имя и полюбоваться результатом.
Хотим выразить Вам благодарность, что прочитали (а еще лучше, если попробовали выполнить наши рекомендации) нашу инструкцию до конца и надеемся, что она была для вас полезной. Мы не преследовали цель одной статьей научить Вас делать крутые и навороченные сайты – это просто невозможно, но хотели осветить данный процесс, чтобы в случае каких-то неясностей вы понимали к какому из разделов это относится и могли самостоятельно найти нужную информацию. В этом вам так же должны помочь указанные нами ссылки.
Удачи!
Здравствуйте посетители сайта rideumba.com! Думаю вы пришли по адресу. О чем этот сайт?
