SWF.UCOZ.NET

Четверг, 28.03.2024, 18:02
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Меню


http://www.dealbulldog.com/

Deal Bulldog
Главная » Статьи » Веб-мастеру » Создание сайта

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

1. Простой сайт – пример простого одностраничного сайта. Здесь же упоминаются некоторые соглашения об именах и особенности HTML-страниц.
2. Разрабатываем сайт – описаны 2 шага по созданию собственного сайта с нуля.
2.1 Разработка шаблона сайта – пошаговое создание шаблона сайта с помощью Adobe Photoshop, выбор фрагментов и сохранение для использования в страницах.
2.2 Верстка сайта – основные теги HTML-документа и способы организации контента статических страниц.
2.3 Сайт на PHP – отличие статических и динамических страниц. Сайт преобразуем в 3-х страничный динамический. Даются начальные сведения о системах управления контентом (CMS).
3. Публикация сайта в Интернет – основные шаги, необходимые для публикации сайта в сети.
3.1 Домен и хостинг – доменные имена и критерии выбора хостинговой компании.
3.2 Размещение сайта на сервере – приводятся практические рекомендации по загрузке сайта на сервер.

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

Вы готовы? Итак приступим!

1. Простой сайт


Для начала создадим простейший сайт. Состоит он из одной HTML страницы. HTML (HyperText Markup Language - язык разметки гипертекстов) – универсальный язык, описывающий веб-страницы. Его задача – указать браузеру, что и как отображать при загрузке страницы на компьютере пользователя. Каждая из его команд, называемых тегами, описывает фрагмент страницы.

Перейдем к делу. Перед Вами текст простейшей HTML-страницы:

  1. <!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>&nbsp</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>&copy; 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. Ваш первый сайт готов. Можно открыть страничку в любом браузере и посмотреть результат. Выглядеть она должна приблизительно так.

пример собственного сайта

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

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

Поскольку наш сайт самый простой, то и решение этого самое простое. Все, что необходимо – в отдельных файлах. Качаем архив (6.8Mb), разворачиваем и запускаем mysite/index.html. Результат налицо.

Примите наши поздравления, Ваш первый сайт – готов! На этом простом примере разберем, как создать сайт.

2. Разрабатываем сайт


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

  • Разработка шаблона сайта. Именно здесь необходимо определить, как сайт будет выглядеть.
  • Верстка сайта. Наполняем сайт контентом и заставляем все это работать.

2.1 Разработка шаблона сайта


Как правило, этот этап работ выполняется в достаточно мощном графическом редакторе, например, Adobe Photoshop или CorelDraw. Фотошоп несколько проще в освоении и использовании, а возможности его очень велики. Именно поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной популярностью. Воспользуемся им и мы.

Создаем в Фотошопе новый документ. Задаем имя – MySite.
Выбираем разрешение 800 х 600, это гарантирует корректное отображение у любого пользователя, размер по вертикали потом сможем увеличить. Выбираем разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем обязательно, именно они отвечают за корректное отображение веб-страницы.

Создаем в Фотошопе новый документ

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

Включаем сетку и направляющие

Командой «Слой» - «Новый» создаем слой с именем banner.
Используя инструмент «Прямоугольная область» выделяем нужный нам фрагмент между направляющими.
Рисуем в этой области прямоугольник со скругленными углами.
Выбираем цвет заливки и заливаем его.

Рисуем прямоугольник со скругленными углами

Таким же образом размечаем еще несколько областей – для логотипа, текста приветствия, и описательного текста. Слой для текста приветствия не заливаем.

Размечаем еще несколько областей – для логотипа, текста приветствия, и описательного текста

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

Выбираем эффект «Внешний свет»

На области логотипа создаем слой с тем же цветом заливки.
С помощью инструмента «Горизонтальный текст» вводим текст.

Вводим текст

Создаем на области баннера новый слой. Открываем файл с изображением и просто перетаскиваем его на вновь созданный слой.

Создаем на области баннера новый слой

Аналогично заполняем изображениями и текстом остальные области

Аналогично заполняем изображениями и текстом остальные области

Наш макет готов!

Теперь из него нужно вырезать фрагменты, необходимые для нашей страницы. Это – область баннера, область логотипа, верхняя и нижняя рамки для поясняющего текста и часть области, для фона поясняющего текста.
С помощью инструмента «Фрагмент» выбираем необходимые части изображения.

Аналогично заполняем изображениями и текстом остальные области

В меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество изображений и сохраняем, в результате получаем множество графических фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон, появилась папка 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 (хостер обязательно сообщит адрес, логин и пароль входа), пространство сервера станет доступным в виде логического устройства (как и обычные диски Вашего компьютера) на одной из двух панелей. Запускаем процесс копирования, ждем его окончания.

Все, наш сайт опубликован в Интернете. Можете набрать в адресной строке браузера его имя и полюбоваться результатом.

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




Категория: Создание сайта | Добавил: r2111 (23.03.2011)
Просмотров: 2466 | Комментарии: 2 | Теги: бесплатно, создание сайта | Рейтинг: 5.0/1
Всего комментариев: 2
2 bingeUnwins  
0
SEO

1 Cakaftella  
0
http://ucoz-w.3dn.ru/ - http://ucoz-w.3dn.ru/

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Архив записей

Реклама

 

Copyright MyCorp © 2024

Бесплатный конструктор сайтов - uCoz
Счетчик тИЦ и PR