Наверх
Отображение
Настройки отображения:

Изменить размер шрифта х2
Изменить размер шрифта х4
Изменить цвет шрифта на красный
Изменить цвет шрифта на синий
Изменить цвет шрифта на серый
Изменить шрифт
Как взломать страницу в социальной сети в контакте?
Как правильно записать операционную систему на диск. Точные инструкции.
Как сделать Microsft Internet explorer браузером по умолчанию? Подробные инструкции.
Как запустить компьютер в безопасном режиме (Safe Mode)
Как убрать баннер с рабочего стола и из браузера. Самые действенные методы борьбы.
Подключение к удаленному рабочему столу - Вход в систему невозможен из-за ограничений учетной записи
Записываем диск. Разными методами.
История развития и эволюция клавиатуры.
Зомби ферма - весёлая игра в контакте.
Как удалить страницу в одноклассниках? как же "хорошо" в одноклассниках
Система Orphus

Как создать свой сайт с нуля своими руками

Содержание:

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

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

Вы готовы? Тогда приступим!

Идея

Прежде, чем приступить к работе над сайтом, вы должны четко представлять, что вы в итоге хотите получить, подумать о перспективах развития вашего сайта (тут я не учитываю домашние страницы, которые вы делаете лично для себя, речь о перспективах идет, если вы решили создать какой-то серьезный коммерческий проект).
Итак, вы должны решить:
- Зачем вам создавать сайт (нужно ли вам это вообще)
- О чем будет ваш сайт (тематика)
- Что это будет (домашняя страница, портал, или что-то еще)
- Отличие от сайтов с такой же тематикой (если это не домашняя страница)
- Какова будет аудитория вашего сайта (пол, возраст, интересы и т.д.)
- Какого рода сервисы вы будете предоставлять на своем сайте (форум, каталог, почта и т.д.)
- Планы на ближайшее будущее
- Планы дальнейшего развития (перспективы)
... и много других подобных вопросов надо обязательно решить перед тем как браться за реализацию. Продумывание: что, как зачем и почему - самый важный этап в создании сайта. Главное хорошая идея, а остальное приложится.
Только после того, как в вашей голове, а лучше и на бумаге, оформится четкий эскиз(образ) того, каким должен быть будующий сайт, можно приступать к другим этапам. Некоторые этапы разработки сайта могут производиться параллельно друг другу (особенно, если вы работаете над созданием своего сайта не в одиночку, а командой).

Дизайн

Если у вас есть выбор, какой товар из предлагаемого множества вы купите? В приятной упаковке с приятной этикеткой. Товар отталкивающего внешнего вида вы не приобретете, кто знает, что там внутри кроется, ну такой товар от греха подальше. Справедлив такой подход и относительно всех сайтов. Первое впечатление от вашего сайта очень важно, от него зависит останется ли посетитель с вами, будет ли знакомиться с информацией, которую вы ему предлагаете, или закроет окно с вашим сайтом и навсегда забудет об этом сайте.
Оформление сайта подсказывает посетителю, куда он попал: корпоративный ли это сайт какой-либо компании, или информационный портал, или литературный web-ресурс, или что-то еще... Оформление помогает посетителю ориентироваться по вашему сайту, а может, и наоборот, сбить посетителя с толку так, что даже при хорошо разработанной структуре посетителю будет трудно ориентироваться. От оформления зависит многое - визуальная информация не менее важна, чем текстовая, которой вы свой сайт в вскоре наполните.
Не верьте зложелателям, которые вас уверили, что дизайн – это дело вкуса: что хочу. Это не правда. Дизайн – это целая наука. Чтобы овладеть ей, вам придется ознакомиться с такими понятиями, как колористка (теория цвета), композиция, шрифт, и многими другими. Многое в жизни подчинено давно выработанным законам и правилам, дизайн - также не исключение.
Помимо теории надо будет также овладеть и инструментами, для воплощения ваших задумок в реальность. Эти инструменты у веб-дизайнера – графические редакторы. Сразу скажу, графические редакторы инструмент не слишком простой для освоения, и за несколько дней научится пользоваться ими не получится.
Вот такая сложная эта наука - оформление сайтов на поверку оказывается: много чего уметь надо и много чего знать, чтобы создать хороший дизайн для будующего сайта. Однако, я надеюсь, что не слишком напугала впечатлительного моего читателя. Не стоит забывать, что в случае разработки сайтов для себя любимых все несколько проще, не обязательно быть профессиональным архитектором, чтобы строить миниатюрные модели домов для собственного удовольствия у себя дома. Не обязательно быть профессиональным веб-дизайнером, чтобы создать домашнюю страничку для себя.

Вот вы придумали зачем вам сайт. Вы решили, что и где будет располагаться на нем. Вы нарисовали на листе бумаги, как ваш сайт будет выглядеть. Это хорошо, но впереди вас ждет еще много работы. Мы имеем на руках оболочку (макет внешнего вида сайта) и план действий (структуру). Но вы задумывались, что стоит за оболочкой? А за оболочкой стоит каркас, на котором эта оболочка держится.

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

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

Этот HTML код отвечает за то, что вы видите в определенной последовательности на web-странице текст и картинки. Как правило, код этот пишется на языке разметки текстовых документов HTML. HTML достаточно прост, и практически каждый пользователь может освоить его, чтобы создавать свои не слишком сложные проекты и сайты. Также не слишком сложны для изучения таблицы каскадных стилей – CSS – дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц, CSS, по сути, дополняет HTML, расширяя его возможности.
Но HTML и CSS отвечают только за разметку внешнего вида документа, а для того, чтобы реализовать более сложные вещи, например, вроде гостевой книги, или поиска, или форума, нужны уже другие средства. Нужно знать языки программирования для веб – PERL, PHP, ASP или другие.
При помощи языков программирования пишутся программы – скрипты. Скрипты представляют собой некий последовательный набор команд, для выполнения определенных действий или операций (например, чтобы запись, введенная вашим посетителем, добавилась в вашу гостевую книгу).
Итак, если HTML и CSS - это каркас на котором все держится, то программы-скрипты (на PERL, PHP, ASP) - это механизм, расположенный внутри этого самого каркаса. Веб-программирование уже более сложный для освоения предмет, чем HTML или CSS, однако, тут опять же нет ничего страшного, ведь есть готовые решения, я говорю о готовых программах-скриптах, которые распространяются в интернете, как бесплатно, так и платно.

Перейдем к делу. Перед Вами текст простой HTML-страницы:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd">


Моя первая страничка







Контакты
Загрузки
Главная



 


Здравствуйте! Я - Перец.
Добро пожаловать!



Ах, перец, перец!
Сорта перца подразделяют на сладкие и острые, или горькие. Ведущее место принадлежит овощному (сладкому) перцу с нежной, сочной и мясистой мякотью, который употребляется в различных видах: в свежем в качестве салата, консервированном, засоленном, тушеном, фаршированном и других.
Родина сладкого перца - Мексика. В Европе он стал известен только после открытия Америки. Горький перец издавна выращивали в Иране, Ираке, Турции, Афганистане и на восточном побережье Африки.
Перец - многолетнее растение из семейства пасленовых. В наших климатических условиях его выращивают как однолетнюю культуру. Имеет длительный вегетационный период. Цвет плодов разнообразный, зависит от их зрелости и сорта, бывает белым, желто-белым, зеленым, темно-зеленым, оранжевым, красным, темно-красным. Различают крупноплодный, широкоплодный (томатовидный), длинноплодный и мелко-плодный перец.


© Name | Разработка http://www.wikispace.ru/





Именно она сообщает браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:


«Голова» документа
«Тело» документа

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

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

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



Формат отображения элементов может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью каскадных таблиц стилей(CSS). Второй метод более универсален, так как позволяет использовать стили компонентов повторно во всем документе и в будущем на всём сайте. Таблица стилей задается либо в внутри тега , либо в отдельном файле стили.css, ссылка на который также располагается внутри .

Основными документами, в которых описываются все компоненты языка, являются спецификации - их желательно просмотреть.

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

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

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

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

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

4. Продвижение, реклама

Этот этап вам придется выполнять с определённой периодичностью, если вы хотите, чтобы на ваш сайт приходили новые посетители. Хочу заметить, что количество и постоянный приток посетителей на ваш сайт не зависит целиком от рекламы, основную роль все же играет наличие интересной определенной группе людей информации(контента), ради которой они и будут посещать ваш сайт.
Прежде, чем заняться рекламой(раскруткой) своего сайта, подумайте – а нужно ли вам это? Если нужно, то зачем. Что изменится от того, что на вашем сайте станет десятком другим посетителей больше?
После того, как вы решили, что это вам все-таки нужно, следует продумать, какая аудитория заинтересована в вашем интернет ресурсе (возраст, пол, профессиональная занятость этой аудитории). После того, как вы определились какова ваша аудитория, надо понять, где ваша аудитория обитает: на какие сайты ходит, какие журналы читает, и т.д. Когда вы выяснили, где ваш посетитель потенциальный обитает, то там следует расставить на него ссылки: разместить рекламу в журнале или газете, на нужных вам тематических сайтах. Лучше всего исследование аудитории и рекламу сайта доверить профессионалам, которые продумают тщательно вашу рекламную кампанию, и у которых лучше получится выполнить поставленную вами задачу в рамках имеющегося у вас бюджета. Ведь реклама тоже требует определенных знаний и денежных вложений, это не такой уж простой этап, как может показаться вначале.
Из бесплатных путей рекламирования вашего ресурса: каталоги, поисковые системы, баннерно обменные сети, а также хорошие отклики о вашем сайте на сторонних ресурсах и страницах людей. Увы, бесплатно раскрутить свой ресурс весьма трудно, но все-таки можно, главное запастись терпением, ведь на бесплатное продвижение ресурса понадобится очень много времени и сил.
Естественно, есть и другие бесплатные(чёрные) технологии продвижения сайта, как спам или накрутка – но хотелось бы предупредить вас от использования данных методов. Кроме того, что эффект от них временный, данные способы являются черными, т.е. такие способы не приветствуются рейтинговыми и поисковыми системами и могут повлечь иключение сайта из рейтингов и бан в поисковых системах(!).
Подробнее о методах продвижения и рекламы сайта вы можете прочитать на нашем сайте(Wikispace.ru).

5. Дальнейшая поддержка и обновление

Каким бы хорошим не был ваш ресурс, его следует периодически пополнять новой(свежей) информацией, чтобы не потерять вашего посетителя. Поддержкой и обновлением коммерческих сайтов, как правило, занимается тоже специалист: веб-мастер. С одной стороны это универсал, от которого требуются знания как работать с графикой, хорошие знания в области кодинга (html, css) и знание языков программирования (поверхностное); с другой стороны веб-мастер не имеет глубоких знаний ни в области программирования, ни в области дизайна, т.е. не может заменить ни дизайнера, ни программиста при разработке серьезного коммерческого ресурса. Поддержкой же ваших личных проектов вам придется заниматься самостоятельно, правда, со временем, если ресурс хороший, у вас могут появится помощники-добровольцы.
Но не только новая информация интересует посетителя. Важно также поддерживать связь с посетителями(интерактив): поддерживать общение на форуме или в гостевой книге, которые располагаются на вашем ресурсе, по возможности, отвечать на все письма ваших посетителей.
При развитии собственного сайта иногда необходимо ориентироваться на мнение посетителя: спросите у ваших посетителей, в каких материалах они заинтересованы, что им хотелось бы увидеть на вашем сайте в ближайшее время. Опросы могут помочь вам в развитии вашего сайта, чтобы было понятнее куда стоит "двигаться".
Следите за сайтами с подобной вашему тематикой, ваша задача не отстать от них по уровню (но это не значит, что следует красть с них материалы, это лишь подорвет репутацию вашего сайта и вашу). Следите за тенденциями в web-дизайне и новыми технологиями: то, что было хорошо несколько месяцев назад, сегодня может оказаться устаревшим и нелепым, возможно придет такой момент, когда оформление вашего сайта придется сменить, и его "начинку" тоже.
Вот, наверное, и все, на этом я закончу введение в область создания сайтов. Если вы решили окунуться в эту область, то вам предстоит долгий и нелегкий путь, в котором я желаю вам упорства, усидчивости, и интересных открытий.
Материалы, которые помогут сделать вам свои Первые Шаги, вы найдете на нашем сайте(Wikispace.ru). Учебники и статьи помогут вам изучить азы, а дальше, если ваш интерес не пропадет, вам придется развиваться и шагать самостоятельно. Все зависит лишь от вашего желания изучать и постигать.

Опубликовано: 2011-02-24

В рубрике: «Компьютер и интернет»

Просмотров: 2060

Автор: Wikispace

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




Рейтинг: 3 из 5 (голосов: 10)

Общий (округлённый) рейтинг статьи: 3    (фактический: 3.7 )
Всего баллов: 37     Голосов: 10
  • Disqus
  • Facebook
  • Native
  • Cackle

Свежие статьи в рубрике «Компьютер и интернет»

Как пользоваться фотошопом?

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

Как создать сайт?

Для создания своего сайта вовсе не нужно вникать во все тонкости web программирования учить такие вещи как HTML, XHTML, CSS, PHP, JavaScript, perl и множество других языков…

Как скачать видео с YouTube?

На самом деле скачать видео с YouTube проще чем кажется по началу. Собственно это не составит труда даже для самого не подготовленного пользователя персонального…

Как увеличить скорость и эффективность работы за ПК

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

Что такое спам?

Что же такое спам? Наверное это слово знакомо уже каждому пользователю ПК и обывателю интернета. Ведь правда, спам повсюду, от него уже некуда деться, он везде.…

Как узнать свой IP адрес? Все способы!

Как узнать свой IP адрес, этим вопросом задаются многие люди, которые не сильно разбираются в сетевых протоколах и вообще устройствах современных сетей.…

Недостаточно памяти на флешке! Решение проблемы

Наверное каждому знакома ситуация когда пытаешься копировать на флэш накопитель какие либо данные (объемом более 4 гигабайт) и операционная система выдает…

Как создать сервер в Left 4 Dead 2 ?

В этой статье я опишу Как создать сервер L4D2 через клиент Garena.Итак, начнем... 1. Закрываем все программы, которые активно используют интернет-соединение вашего ПК…