Рейтинг: 4.8/5.0 (1848 проголосовавших)Категория: Инструкции
Если Вы зашли на эту страничку, значит, перед Вами встал вопрос - как создать свой сайт. Мы рады помочь Вам в этом. Среди тех, кто недавно решил заняться веб-дизайном, часто складывается впечатление, что самостоятельно создать сайт бесплатно. даже самый простой – дело очень сложное и долгое. Ниже мы покажем Вам, что это не так и поможет нам в этом простая пошаговая инструкция по созданию сайта:
Собственно, каждый шаг из этого перечня прост и понятен. Обзор и освоение материала вряд ли займет больше пары часов. А в результате получите бесценный опыт создания своего первого сайта.
Вы готовы? Итак приступим!
Создаем простой сайт на HTMLДля начала создадим простейший сайт на HTML. Состоит он всего из одной страницы.
HTML (HyperText Markup Language - язык разметки гипертекстов) – универсальный язык, описывающий веб-страницы. Его задача – указать браузеру, что и как отображать при загрузке страницы на компьютере пользователя. Каждая из его команд, называемых тегами, описывает фрагмент страницы.
Перейдем к делу. Перед Вами текст простейшей HTML-страницы:
Cкопируйте его и сохраните у себя на компьютере в файле с именем index.html. Можно открыть страничку в любом браузере и посмотреть результат. Выглядеть она должна так:
Кстати, index.html – не случайно выбранное нами имя. Конечно, не обязательно, но считается хорошим тоном главную (или ту, которая должна отображаться первой) страницу назвать именно так. По умолчанию, любой веб-сервер страницу пытается выдать браузеру страницу index.html при обращении к нему (необязательно, потому, что на любом веб-сервере это настраивается).
Примите наши поздравления, Ваш первый сайт – готов! На этом простом примере разберем, как создать свой сайт.
Полный вариант сайта вы можете скачать в архиве (10,8Mb ). После распаковки архива запускаем html/index.html .
Для того, чтобы создать сайт самому, необходимо выполнить 3 этапа работ:
Как правило, этот этап работ выполняется в достаточно мощном графическом редакторе, например, Adobe Photoshop или CorelDRAW. Photoshop несколько проще в освоении и использовании, а его возможности очень велики. Именно поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной популярностью. Воспользуемся им и мы.
Создаем в Adobe Photoshop новый документ. Задаем имя – MySite .
Выбираем разрешение 1000 х 1000. это гарантирует корректное отображение у любого пользователя, размер по вертикали потом сможем увеличить. Выбираем разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем обязательно, именно они отвечают за корректное отображение веб-страницы.
Устанавливаем цвет фона F7F7C5 в шестнадцатеричном виде или выбираем с помощью палитры цветов.
Выбрав пункт меню «Просмотр» – «Направляющие» активируем отображение линеек и направляющих.
В пункте меню «Просмотр» - «Привязка к» не забываем убедиться, что включена привязка к направляющим и границам документа.
Используя инструмент «Текст», пишем текстовое название будущего сайта, слоган под ним, а также контактный телефон справа в верху макета.
Слева от логотипа, как и справа от контактного телефона, проводим направляющие, которые позволят обозначить рамки по ширине сайта.
Затем с помощью инструмента «Формы» выбираем прямоугольник с закруглёнными краями (радиус – 8 точек), и с его помощью обозначаем место под изображение в шапке сайта:
Далее вставляем изображение в шапку сайта. Подходящее изображение вы можете найти на любом из сервисов, предлагающих загрузку изображений.
В помощью инструмента «Текст», и шрифта Georgia, входящего в стандартный набор MS Windows, создаем навигационное меню и заголовок главной страницы сайта.
Также, используя инструмент «Текст» и шрифт «Arial», добавляем текст главной страницы, здесь рекомендуем использовать блочный текст для последующей работы с ним.
Для заголовка и шрифтов в тексте используем черный шрифт. Для навигационного меню – белый.
Перемещая правую границу основного текстового блока, вставляем изображение в тексте страницы (справа от текста).
Используя инструмент «Формы» - «Прямая», проводим заключительную линию под текстом страницы.
Под линией с помощью инструмента «Текст» (шрифт Arial) размещаем копирайт в подвале страницы.
Нарезаем нужные нам фрагменты изображений для вёрстки сайта с помощью инструмента «Раскройка» (мы выделили основную картинку в шапке и картинку в тексте страницы).
В результате проделанных работ получаем эскиз сайта, который представлен в начале страницы. Однако, если вы решите внести собственные изменения в макет страницы, то PSD-файл вы также найдёте в архиве к странице.
Для сохранения результатов работы в виде изображений для вёрстки сайта переходим в меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество изображений и сохраняем, в результате получаем множество графических фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон, появилась папка images с изображениями. Отбираем нужные и переименовываем.
Макет создан, необходимые фрагменты получены, можно переходить к верстке. Конечно, пока мы воспользовались лишь самыми примитивными возможностями Adobe Photoshop.
Для быстрого старта зачастую выгоднее воспользоваться готовыми шаблонами, чем рисовать их самим. В разделе шаблоны сайтов можно найти много прекрасных шаблонов и создать сайт на их основе.
Верстка сайтаСоздаем в текстовом редакторе файл index.html .
ВАЖНО! Первой строкой файла должна быть строка вида
Именно она сообщает браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:
Обратите внимание, теги формируют пары – открывающий и закрывающий. Последний всегда заканчивается на </ .
Пара <html>. </html> говорит о том, что внутри содержится HTML-код.
Внутри <head>. </head> располагаются теги, которые не отображаются в основном окне. Как правило, они начинаются словом meta, и называются мета-тегами, а вот тег <title>. </title> отображается в заголовке окна браузера и используется поисковыми системами.
Следом располагается пара <body>. </body> в них заключено содержимое страницы. Именно эта часть, тело страницы, отображается в окне браузера.
Существует несколько способов организации контента. Наиболее популярные из них – организация с помощью блоков (<div>. </div> ) и в виде таблиц (<table>. </table> ).
Формат отображения элементов может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью таблиц стилей CSS. Второй метод более универсален, так как позволяет использовать стили компонентов повторно во всем документе. Таблица стилей задается либо в внутри тега <head>. либо в отдельном файле style.css. ссылка на который также располагается внутри <head> .
На примере нашего сайта, структура его элементов выглядит следующим образом:
Основными документами, в которых описываются все компоненты языка, являются спецификации - их желательно просмотреть.
Более подробно о всех HTML-тегах, их назначение, использование таблиц стилей (CSS) можно изучить, воспользовавшись книгами в разделе Языки разметки. так же полезные советы по организации контента, верстке, CSS приводятся в статьях .
Оказывается, проблема под названием «как создать свой сайт» не существует вовсе! Простой одностраничный сайт готов.
Простейший пример вёрстки сайта из головы
Сайт на PHPНа нашей странице все определено заранее и не будет изменяться при обращениях пользователя. Такие страницы называются статическими, и для их описания вполне хватает средств HTML. Если же предоставляемая пользователю информация изменяется в зависимости от каких либо факторов или запросов, говорят, что страница содержит динамический контент (является динамической).
Для создания таких страниц применяют языки веб-программирования. Среди таких языков наиболее широко распространены PHP. Perl и Python и Ruby on Rails под Unix-системами, а для Windows характерна разработка динамического контента с использованием средств .NET.
Это все касается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript .
В архиве, который вы скачали есть папка php с основным файлом index.php. Он реализует три странички нашего сайта с использованием языка PHP. PHP – Cи-образный язык для создания динамических веб-страниц. Главное отличие динамической страницы от статической заключается в том, что она формируется на сервере, а уже готовый результат передается пользователю.
Мы не стали углубляться в дебри программирования на PHP и для наглядности ограничились простыми вставками фрагментов страницы. Суть следующая - мы выносим шапку и подвал сайта в отдельные файлы: header.php и footer.php. затем в страницах с текстовым содержанием, с помощью PHP, вставляем в макет сайта. Делается это с помощью следующего кода:
Попробуйте запустить в браузере php/index.php. Не получилось? Конечно, нет. Ведь браузер не знает, что ему делать с командами, из которых состоит файл.
Для того, чтобы файл (скрипт PHP) выполнился, он должен быть обработан интерпретатором языка. Такой интерпретатор обязательно есть на веб-серверах, который и обеспечивает PHP кода. Как же посмотреть, что изменилось?
Для отладки веб-приложений и реализации полноценного веб-сервера на машинах под управлением Windows в сети бесплатно распространяется пакет Denwer (для вашего удобства он уже есть в архиве ). Он включает в себя веб-сервер Apache, интерпретаторы языков PHP и Perl, базу данных MySQL и средства работы с электронной почтой.
Установка не требует никаких усилий. Запускаем установочный файл, выполняем все его требования. Выбираем букву виртуального диска для быстрого доступа, создаем ярлыки. Вот и все! Denwer к работе готов!
Запускается он по ярлыку Start Denwer (возможно у вас будет называть иначе). После старта, в появившийся в системе виртуальном диске (обычно Z), в папку home/test1.ru/www/ скопируйте содержимое папки php из архива, с которым мы работаем, кроме файла index.html. Наберите в адресной строке браузера test1.ru. Знакомая картина? А теперь пройдитесь по ссылкам сверху страницы. Работает? Отлично!
Подробнее о PHP и его использовании - в статьях и книгах .
Итак мы получили динамический трехстраничный сайт и проверили его!
Но до сих пор мы создавали сайт своими руками от начала и до конца. В настоящее время существуют средства облегчающие этот процесс – системы управления контентом (CMS – content management system). К наиболее популярным относятся Joomla!. Wordpress. Drupal. Для них разработаны сотни шаблонов и дополнений, позволяющих получить профессионально выглядящий сайт с любой функциональностью.
Скорость разработки сайтов, удобство, широкие возможности – всего лишь малая часть преимуществ, которые CMS предоставляют вебмастеру. Особенно приятно, что сами системы и многие дополнения к ним относятся к свободному программному обеспечению, что снимает вопрос о том, как создать свой сайт бесплатно .
Как вариант вы можете использовать онлайн-конструкторы сайтов вроде Wix. A5 и других.
Публикация сайта в ИнтернетМы готовы опубликовать свой сайт в Интернет. Что для этого нужно?
Домен и хостингВо-первых, доменное имя. Доменное имя или домен – символическое имя, под которым Ваш сайт будет известен в сети. Получить его можно либо, купив у регистратора, либо бесплатно, но в виде поддомена от одного из бесплатных хостингов. Более подробно читайте в статье как подобрать домен .
Во-вторых, хостинг. Хостинг – услуга размещения сайта на серверах, имеющих выход в Интернет. В настоящее время компаний, предоставляющих эту услугу огромное количество. Остается только выбрать подходящую. К критериям выбора относятся:
Чаще всего, компании, предоставляющие хостинг, являются и регистраторами доменов, и наоборот. Так что приобрести эти 2 услуги труда не составляет. Оплата для большинства компаний возможна через электронные платежные системы типа Webmoney. Яндекс.Деньги и другие.
Размещение сайта на сервереПредположим, домен и хостинг мы приобрели. Что дальше? Нам необходимо разместить все файлы нашего сайта на сервере у хостера. Как правило, нам предоставляется несколько вариантов для этого.
Обычно это загрузка содержимого по HTTP-протоколу. с использованием панели управления хостера или по FTP с помощью FTP-клиента .
Второй вариант намного быстрее и проще. Одним из лучших FTP-клиентов является встроенный в Total Commander и бесплатный FileZilla .
Как только устанавливается связь с сервером FTP (хостер обязательно сообщит адрес, логин и пароль входа), пространство сервера станет доступным в виде логического устройства (как и обычные диски Вашего компьютера) на одной из двух панелей. Запускаем процесс копирования, ждем его окончания.
Все, наш сайт опубликован в Интернете. Можете набрать в адресной строке браузера его имя и полюбоваться результатом.
Самый простой способ создания сайтаНесмотря на то что, все приведенные в предыдущих разделах данной статьи инструкции, о том, как создать сайт бесплатно самому, написаны предельно подробно и принесут реальную пользу многим пользователям, всегда были и будут люди, у которых просто нет времени или желания осваивать даже базовые технологии сайтостроения.
Именно для данной категории пользователей и были созданы специальные сервисы, которые позволяют создать полноценный сайт буквально несколькими кликами мышью. Причем, несмотря на свои достаточно обширные возможности подобные сервисы позволяют любому желающему создать свой сайт совершенно бесплатно.
На сегодня наиболее популярными сервисами подобного рода являются конструкторы Wix и А5.
Стоит отметить, что данные сервисы обладает целым рядом явных преимуществ по сравнению со многими другими подобными решениями.
По большому счету весь процесс создания сайта с помощью конструктора сводится всего к нескольким простым действиям:
После выполнения последнего шага, владельцу только что созданного сайта, остается только наполнить его всеми необходимыми материалами (текстами, картинками, контактами и т.д.).
Как видите, выполнив несколько простейших действий, вы создадите свой сайт быстро и бесплатно. Если, несмотря на всю простоту и интуитивную понятность интерфейса, у вас возникнут сложности с использованием конструктора – не беда, воспользуйтесь нашей пошаговой инструкцией по Wix или A5. Попробуйте проделать описанные выше шаги и убедитесь в этом сами.
В том случае если бесплатные возможности окажутся для вас недостаточными, то попробуйте поработать с платным вариантом пользовательского аккаунта, который обладает максимальными функциональными возможностями, и это при том, что его стоимость сопоставима с услугами недорогого хостинга.
ЗаключениеХотим выразить Вам благодарность, что прочитали (а еще лучше, если попробовали выполнить наши рекомендации) инструкцию до конца и надеемся, что она была для вас полезной. Мы не преследовали цель одной статьей научить Вас делать крутые и навороченные сайты - это просто невозможно, но хотели осветить данный процесс, чтобы в случае каких-то неясностей вы понимали к какому из разделов это относится и могли самостоятельно найти нужную информацию. В этом вам так же должны помочь указанные нами ссылки.
Мы уверены, что у вас возникнут вопросы при создании своего первого сайта, а может и не первого, поэтому милости просим на наш замечательный форум вебмастеров .
После того как Вы создали свой первый сайт и немного его раскрутили. Вам стоит определиться с тем, каким образом будет проводится монетизация сайта. Предлагаем вам ознакомиться с наиболее эффективными способами заработка на сайте .
Для тех, кто еще не сталкивался с темой о создании сайтов, могут быть непонятны многие термины, слова и действия. Эта инструкция для чайников введет в курс дела, после которой все новички получат хоть какое-то представление о создании сайтов.
Первое, о чем следует знать, это — что такое сайт? Сайт — это площадка, находящаяся в глобальной сети Интернет, на которую имеют доступ все потенциальные клиенты. Сайты могут быть информационными, тогда на них располагаются всесторонние новости, или они могут быть в виде дневника, где люди выкладывают свою информацию, которую полезно и интересно будет почитать. Есть сайты-визитки, они созданы для рекламы какой-либо продукции или компании, занимающейся продажей или покупкой того или иного товара.
Сайты в наше время — это уже необходимость, поскольку собственный ресурс в Интернете — это качественная, и, в то же время, дешевая реклама. Многие пытаются обучиться созданию сайта, и потом начинают самостоятельно трудиться над «изготовлением» своей собственной площадки, а многим процветающим бизнесменам легче заказать создание сайта, тем более что эта услуга стоит уже не так много.
Порялок материализации сайта таков:
1. Сначала необходимо выпускать какую-либо продукцию, чтобы потом описать ее и ваши услуги, чтобы потом выложить в интернет, чтобы потом у вас появилось много клиентов. Если таковая продукция уже есть — вы можете предложить товар или услуги, которые будут интересны народу, то вам — на следующий пункт.
2. Придумайте дизайн вашего сайта — логотип компании, фон, картинки, подберите цветовую гамму, а затем приступайте к написанию сайта. Такая услуга, как разработка веб сайтов порталов предлагается многими компаниями, и стоит первое время воспользоваться ими, поскольку написание сайта займет у вас, как у новичка достаточно много времени, за которое вы могли бы уже найти своих первых клиентов.
3. Придумайте название своему сайту — доменное имя, подберите хостинг. Здесь двигающей силой будет ваша фантазия и ваш бюджет. И на то, и на другое в Интернете полно предложений, так что без сайта вы не останетесь.
4. Далее регистрируйте свой сайт в каталогах и поисковиках, эти простейшие шаги помогут вам найти первую публику в качестве заказчиков.
5. Используйте другие методы раскрутки своего сайта, а после того, как немного заработаете, можете потратиться на обучение созданию сайтов, и потом самостоятельно сделать для себя еще один ресурс и самоутвердиться в своих глазах.
Copyright © 2004-2016 ООО "КА Гудвил".
123242. Москва,
ул. Дружинниковская, 15, офис 201
График работы: Пн - Пт, 9:00 - 18:00
+ 7 (495) 783 70 24
Задача каждого работодателя – это принять на работу хорошего специалиста и отсеять тех из них, которые покажутся ему неподходящими работниками. Но иногда, даже самый большой профессионал получает отказ, хотя вроде бы полностью подходит по заданным параметрам. Почему так происходит? Зачастую руководители при приеме на работу руководствуются стереотипами. Но действительно ли это так? (далее…)
Все больше и больше интереснейшей информации приходит к нам на иностранных языках. А это значит, что возрастает необходимость в профессиональных лингвистах. Причем, квалифицированных и опытных. Никому не хочется получить неудобоваримый текст, который не понятно о чем повествует! (далее…)
Новые работники нужны если не всегда, то очень часто. И причины могут быть различными: сезонная работа, аврал при сдаче отчета, организация мероприятий и многое другое. Однако хорошие работники (а вам, естественно, нужны именно специалисты) не стоят на каждом углу и не бросаются толпами с просьбами о работе. Хорошего работника надо искать, и при этом, порой, долго и утомительно. Чтобы по возможности максимально сократить время (а соответственно и расходы) вашему вниманию предлагается нижеследующая инструкция.
Такой вопрос задают пользователи, которые решили самостоятельно сделать сайт.
Начинающие веб-мастера, решившие научиться делать сайты начинают искать информацию на просторах сети интернет или в учебных пособиях.
В результате, веб-мастер начинает понимать, что без знаний языка html создать полноценный сайт невозможно.
А все дело в том, что язык разметки гипертекста html специально разработан для того, чтобы было удобно создавать web – страницы. И не имея элементарных знаний html достаточно нелегко создать интернет страницу.
Но бывают ситуации, когда совсем нет времени на изучение основ html, а сайт создать, ну просто, необходимо. Возможно ли сделать сайт html самому с помощью какого – либо сервиса или программы?
Чтобы ответить на поставленный вопрос, прежде всего, необходимо определить, какие минимальные действия надо произвести, чтобы в Интернете появился сайт.
А на самом деле, потребуется всего лишь:
Если говорить о сервисе, то для начала такую страницу можно разместить на бесплатном хостинге, регистрация на котором занимает не более пяти минут. В интернете таких сервисов более, чем достаточно. Можно просто набрать в поисковике запрос: «бесплатный хостинг» и из предложенного списка выбрать наиболее подходящий. После чего надо будет пройти регистрацию. Одним из таких хорошо известных хостингов является сайт «uCoz».
Ну что ж, с размещением сайта, надеюсь, проблем не возникло.
Как сделать страницы сайта без знаний htmlМожно сделать такую страницу, даже с помощью текстового редактора Word, которым владеет практически каждый пользователь компьютера. Для этого пишем статью, добавляя рисунки, графику.
Короче, все те элементы, которые сделают статью интересной. В итоге, после того, как статья готова, оформляем ее дизайн таким образом, в каком виде нам бы хотелось ее видеть в интернете.
Затем статью надо сохранить. Для этого, в меню редактора Word надо выбрать «Сохранить как». Откроется диалоговое окно, надо дать имя документу (index.html) и выбрать расширение веб страница.
Далее: нажимаем «Сохранить».
В результате, мы получили веб страницу. Теперь, когда мы закачаем созданный файл на хостинг, все желающие смогут увидеть сайт в интернете.
Данный способ создания интернет страниц имеет большой недостаток:
Word генерирует много лишнего кода html. Поэтому этот способ создания сайтов распространения не получил.
Сделать сайт html в БлокнотеГораздо удобнее и правильнее будет сделать сайт в программе Блокнот. Это стандартная программа для Windows.
Для начала потребуется прописать структуру HTML документа, которая имеет следующий вид:
<html></html> — теги, определяющие начало и конец документа;
<head></head> — теги, ответственные за заголовок данной страницы;
<title></title> — теги, прописывающие название сайта;
<body></body> — в этом теге прописывается код сайта.
Пример структуры документа сайта на html
В первой строчке документа прописана версия языка html.
Пропишем данный код в Блокноте и сохраним в формате .html.
Затем откроем в любом браузере и если все верно — откроется пустая страница. Затем надо будет определить дизайн сайта: место для шапки, положение меню, где будет располагаться текст.
Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.
Чтобы сделать такой сайт необходимо сделать разметку с помощью таблиц.
На языке html таблица определяется тегами <table></table>, а строка в таблице — <tr></tr>, столбцы — <td></td>.
Таблица будет иметь следующий вид:
8 и 33 — сроки открывают и закрывают таблицу;
14 и 21 — строки открывают и закрывают строку в данной таблице;
15, 16, 17, 18 строки – открывают и закрывают столбец;
22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;
27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.
Таким способом и происходит создание страницы с помощью таблиц.
Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.
Создание шаблона сайтаЧтобы создать шаблон сайта потребуется программа Adobe Photoshop.
Открываем программу и создаем новый документ «Файл» — «Новый».
Указываем ширину, высоту, разрешение, цветовой режим, фон.
Прописываем все так, как показано здесь:
Откроется пустой документ. Теперь надо сделать подобно тому, как в документе html. Разбиваем его на ячейки таблицы, используя направляющие.
Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:
Для большей наглядности выбираем фон нашего сайта и закрасим его, например зеленоватым цветом. Для этого необходимо в Photoshop создать новый слой, кликнув на панели инструментов «Палитра цветов» и прописываем тот цвет, который мы выбрали. Зажмем горячие клавиши Alt + Backspace и документ окраситься в тот цвет, который мы указали. Таким способом можно выбирать любой цвет.
Продолжим делать сайт в html. Теперь надо разметить меню сайта, шапку, кнопочки и т.д.
Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.
Должно получиться что-то на подобие:
Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.
Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.
Подобным образом создаем другие элементы на сайте.
На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопочки. Выбираем инструмент «Текст» и на кнопках делаем надписи. Например: Главная, Услуги, Контакты и т.п.
Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер картинки можно с помощью Ctrl + T.
В итоге получим готовый шаблон сайта:
Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.
Берем инструмент «раскройка» и выделим каждую область сайта.
Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате .jpeg или .png.
В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.
Верстка сайта на htmlПереходим к самому главному – созданию html страницы. На этом этапе надо разместить все части шаблона в документе, добавить текст для главной страницы, прописать меню и т.д.
Ниже приводится окончательный результат:
Я думаю, что здесь не сложно разобраться, что к чему.
10 строка – прописываем шапку сайта атрибутом background;
15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;
22 строка – прописываем фон меню атрибутом background;
23 – 28 строчки – прописываем пункты меню сайта;
33 строка – текст сайта.
Оказывается, что ничего сложного в создании сайта на html нет.
В итоге мы узнали, как сделать сайт в html.
Вот и все, наш сайт готов!
Да, это, конечно, простая страница, созданная на html.
Но вы уже знаете, как делается шаблон и верстка, а значит можете приступить к изучению более сложных способов усовершенствования сайта.
Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.
Подняться наверх
В одном из уроков я уже рассказывал, что такое динамическая страница. В данной статье мы рассмотрим пример создания динамической веб-страницы. Для того, чтобы это реализовать необходимо сверстать каркас страницы, затем разбить ее на части (шаблоны). Эти шаблоны будут находиться в отдельной папке и с помощью инструкции Include подключаться к сайту. Для того, чтобы изменить, например, шапку на всех страницах сайта достаточно будет зайти в файл шаблона шапки и изменить его, не прибегая к редактированию остальных страниц сайта.
Итак, как же создать динамическую страницу на PHP?Процесс создания динамической страницы состоит из нескольких этапов:
1. Сверстаем каркас страницы. Назовем страницу index.php - она у нас будет состоять из частей: шапка (header), подвал (footer), левое меню (leftmenu). В данном примере страница верстается на основе таблиц. Однако, также можно применять блочную версту страниц.
В браузере страница будет иметь вид:
Листинг страницы представлен ниже:
2. Разобьем страницу на отдельные блоки. Эти блоки: шапка (header.php), подвал (footer.php), левое меню (leftmenu.php).
2.1. Формируем файл header.php .
2.2. Формируем файл leftmenu.php .
2.3. Формируем файл footer.php .
3. Создадим папку под названием blocks. в которую скопируем полученные ранее файлы. При необходимости редактирования шапки, левого меню или подвала сайта, мы будем знать, что шаблоны этих частей сайта находятся в данной папке.
4. Подключим полученные файлы (шаблоны) к сайту с помощью инструкции include на примере страницы index.php .
Таким образом, наша веб-страница index.php — это уже динамическая страница. она будет «склеиваться» из нескольких частей (шаблонов). Таких шаблонов и страниц мы можем сделать любое количество. При необходимости изменения какой-либо части сайта достаточно найти нужный файл шаблона и отредактировать его.
Работать можно в обыкновенном блокноте или, например, в редакторе Notepad++. Для создания веб-страницы открываем блокнот, выбираем пункт меню Файл, Сохранить как. Даем имя файлу — index.php, нажимаем кнопку Сохранить. Для редактирования HTML-кода страницы открываем ее с помощью блокнота (или Notepad++), вставляем код HTML из примера и сохраняем. По аналогии создаются и страницы: header.php, leftmenu.php, footer.php. Однако, для работы с PHP понадобится локальный веб-сервер. Если есть вопросы, обращайтесь. Как говорится, чем могу. ))
Можно было бы вам задать ряд вопросов по php? Просто начала делать свой сайт, перерыла весь интернет, все в голове смешалось в кашу. Очень бы хотелось как-то связаться с вами и помучить вас конкретными вопросами, отправленными например вам на почту, чтобы не задавать их здесь.
Информационный век развивается семи мильными шагами, сегодня уже никого не удивишь наличием собственного сайта, страницы в Интернет и заработкам с помощью информационных систем. Как сделать сайт с нуля. Как создать собственный сайт самостоятельно? На эти вопросы мы предоставим ответы.
Прежде чем приступить к освоению знаний по созданию собственного сайта с нуля, необходимо четко ответить на следующие вопросы:
Зачем вам это нужно? С какой целью вы будете его создавать? Если вы планируете создать сайт для личного пользования или для раскрутки товара (услуги), заработка. В первом случае можно вполне обойтись бесплатными сервисами по созданию сайта самостоятельно и бесплатно.
Сейчас интернет переполнен предложениями бесплатных шаблонов, конструкторов, позволяющих создать макет за минуты. Если вы хотите создать самостоятельно сайт для заработка нужно приложить значительные усилия и некоторые денежные средства.
Какой будет тема вашего сайта?Какую информацию вы хотите разместить на своем сайте? Желательно, чтобы ваша тематика была оригинальна. Чем популярней тематика, тем больше сайтов создано, тем меньше шансов, что ваш сайт окажется одним и первых в списке поисковиков и более посещаемым соответственно.
Вы можете сделать сайт с нуля о своем хобби, любимой футбольной команде, музыке или книгах, главное, чтобы вы могли заинтересовать посетителей. Информация, размещенная на сайте, должна быть интересна и знакома, прежде всего, вам. Трудно хорошо рассказывать людям о том, в чем сам не уверен или что не вызывает интереса и желания поделиться.
Итак, ответив на данные вопросы, приступим к созданию собственного сайта. На первом этапе вам понадобятся учебники о HTML и CSS. Многие из них дают хорошие практические советы и рекомендации. Получив базовые знания по вопросу как сделать сайт с нуля и самостоятельно, вы можете начать создания своего детища.
Создание сайта самостоятельно по собственному дизайну – это несравненное удовольствие. Уяснив для себя как сделать сайт с нуля с помощью специальной литературы, выделите пару часов в день и через неделю сможете сделать свою первую страничку в сети интернет.
При помощи чего можно создать свой сайт?В процессе работы вам понадобятся различные редакторы текстовые, графические и HTML. Достаточно неплохой вариант “HTML-Reader Rus”. Он имеет описание на русском языке, также при создании страницы вы сразу сможете ее просмотреть и отредактировать. В окне программы есть все необходимые функции, что позволит Вам не возвращаться к книге по тому, как сделать сайт с нуля. Далее рассмотрим, как сделать сайт с нуля на HTML.
Ранее вы уже определились с темой сайта. Далее зарегистрируйте доменное имя. Доменное имя – имя вашего сайта (www.доменное имя.ru). Желательно, чтобы оно было оригинальным, ярким и запоминающимся.
Второй шаг. ознакомление с каскадными таблицами стилей (CSS) и основами HTML. При использовании простых методов гипертекстовой разметки вы можете дать волю своему воображению и создать уникальный сайт. У вас появится возможность побыть в шкуре копирайтеров .
Очень важно запомнить! Никогда не наполняйте свои сайты чужим контентом (копипаст). Это, по меньшей мере, не этично. К тому же вы можете попасть в фильтр поисковых систем, и уже никто кроме вас не сможет посмотреть ваш сайт. Еще один вариант обратиться за статьями к профессиональным копирайтерам или в специальные сервисы, которые за вознаграждение подберут для сайта контент.
Ниже представлен список обязательных программ, с которыми нужно ознакомиться при создании сайта с нуля самостоятельно.
1) HTML – язык-основа любого сайта.
2) CSS – язык, необходимый при дизайне сайта.
3) JavaScript – язык для написания скриптов.
4) PHP – самый востребованный язык по программированию Web-серверов. Он позволяет скрипты авторизации и регистрации, и многое другое.
5) MySQL – программное обеспечение позволяющее работать с базами данных, использует язык запросов SQL.
6) XML – самая сложная часть, которая имеет вторичное отношение к работе над сайтом. Предназначен этот язык для создания довольно сложных корпоративных сетей. Область его использования очень широка.
Шаг номер 3. Выбор хостинга для новоиспеченного сайта.
К выбору хостинга нужно подойти ответственно. Один из хороших вариантов REG.ru. О бесплатных хостингах лучше сразу забыть, особенно если речь идет о сайте, созданном для заработка. У поисковых систем требования к ним повышенные, уровень безопасности ниже.
Завершающий шаг: размещение сайта.
После того, как вы разместите свой сайт, а поисковые системы его проиндексируют, нужно заняться его оптимизацией и продвижением. Для этого регистрируйте его в каталогах, социальных закладках, обновляйте и добавляйте статьи.
Дополнительно несколько полезных советов как сделать сайт с нуля:
– не делайте слишком большие по размеру страницы;
– наиболее оптимальный размер страниц 30кб. Слишком большие по объему страницы долго загружаются;
– также избегайте использования горизонтальной прокрутки на сайте;
– не используйте слишком большие изображения и апплеты, они долго загружаются;
– умеренно пользуйтесь скриптами. Их изобилие может раздражать пользователей;
– как можно меньше используйте Flash, это позволит поисковым системам лучше ранжировать ваш сайт;
– минимизируйте использование фреймов. Страницы с фреймами плохо индексируются поисковиками. ( фрейма – это окно или несколько окон внутри самой страницы)
Помните, что, прежде всего, посетителям должно быть удобно на вашем сайте. Ведь его создавали именно для них.
Не заполняйте статусную строку. Сохраните интригу. Вызовите в пользователя желание зайти на ваш сайт.
Научившись поэтапно как сделать сайт с нуля, вы станете владельцем ресурса, созданного вашими руками, умом и фантазией, который будут посещать люди, находить полезную информацию и приносить вам доход. Надеюсь, наши советы принесли вам пользу и облегчили путь создания сайта с нуля собственными руками. Желаем Ввам удачи и большого количества посетителей сайта.
