какие файлы нужны для сайта

Какие файлы и папки находятся на сервере

Как уже было сказано ранее, если процедура регистрации нового сайта прошла успешно, то через сутки-двое новый сайт будет доступен в сети Интернет.

Для начала давайте установим связь с нашим удаленным сервером и посмотрим что на нем находится, в качестве файлового менеджера для установки связи с сервером можно использовать программы CuteFTP, TotalCommander (или другой файловый менеджер, который вам больше по душе):

Более подробно процесс соединения с удаленным сервером описан на странице Загрузка сайта на сервер. Файловый менеджер CuteFTP.

Ниже мы рассмотрим какие именно файлы должны находиться в корневой папке сайта.

Файл index.html (index.htm)

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

Чтобы возникало меньше непредвиденных ситуаций, возмите за правило в каждой вновь созданной папке (в которой планируется размещать html-страницы) первым делом определять файл главной страницы с именем index.html (index.htm).

Для главной страницы сайта подготовим и выгрузим на сервер файл с именем index.html следующего содержания:

Файл robots.txt

Более подробно о файле robots.txt читайте в хэлпе Яндекса или на специализированных ресурсах, например, robotstxt.org.ru/.

Посетив вышеуказанные ресурсы, вам будет понятна следующая запись в файле robots.txt, которую мы сделаем и потом выгрузим на сервер:

Для тех, кто поленился почитать о robots.txt, скажем, что данная запись относится к роботам всех поисковых систем, и запрещает им индексировать содержимое папок cgi-bin, webalizer. Это вполне логично, т.к. содержимое этих папок не представляет никакой ценности посетителям вашего сайта.

Мы создали четыре важных файла, которые надо выгрузить в корень сайта:

Теперь при помощи файлового менеджера выгружаем подготовленный материал на свой сервер, и смотрим результат.

Источник

Структура сайта и структура HTML

Давайте создадим простейшую структуру для нового сайта. Она будет выглядеть так:

Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится «магазин»). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.

Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда Вы откроете index.html в браузере, Ваш браузер начнет обрабатывать HTML-код и, когда браузер встретит ссылку на style.css, он возьмет из этого style.css все CSS-стили и применит их к сайту.

На данный момент можно сказать, что в index.html будет находиться содержимое: текст, картинки. А в style.css будет находиться всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.

Для разработки Вам необходим редактор SublimeText. Скачайте его за считанные секунды на официальном сайте sublimetext.com и установите. Это займет меньше 1 минуты.

Откройте Ваш index.html в редакторе SublimeText и вставьте следующий код:

Давайте разберем весь вышеприведенный HTML-код. Данный код — это основа основ HTML. То есть весь этот код в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть.

Первая строка просто сообщает браузеру, что это HTML-код.

Что такое тег в HTML

Теги html, head и body

В head находится только служебная информация, которая никак не отобразится на самом сайте. В head есть только 2 тега, которые отобразятся в браузере, но не на самом сайте, а на вкладке:

Также, в head есть тег link со ссылкой на style.css, про который Вы уже знаете.

Тег body служит для того, чтобы помещать в него всё, что нужно отобразить на сайте (тексты, картинки и т.д.).

Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.

На этом про структуру сайта и структуру HTML всё. Переходите к следующему уроку, где Вы уже начнете верстать и познакомитесь с CSS. Следующий урок —»Верстка шапки».

В данном уроке вы узнали

.html — расширение, по которому браузер «понимает», что в файле находится HTML-код.

head — тег для служебной информации сайта.

body — тег для всего содержимого сайта.

title — тег для заголовка страницы сайта.

href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка «гипер-ссылка». Атрибут href может быть не только у тега link.

Источник

Наводим порядок: как организовать работу в ходе создания сайта. (Часть 2)

Вторая часть о порядке в файлах и голове для «совсем джуниоров»

У вас должна быть папка для каждого клиента, не связанная с проектом, который вы сейчас для него делаете. Внутри этой папки должна быть папка для каждого проекта. Изначально у вас будет только папка под названием website/, но в скором времени у вас появятся еще такие папки, как logo/, reports/, competitive analysis/ и пр. Также имеет смысл сложить в эту папку файлы дизайна, вероятно, создав для них подпапку design/ или graphics/.

Не открывайте доступ к этой папке для Apache. В ней будет храниться чувствительная информация. В зависимости от используемого средства разработки, вы можете выбрать либо хранить код в этой папке, либо вынести его за рамки папки сайта. Можно назвать ее code/ или, если вы считаете, что для других проектов будет отдельный код — website-code/. Если большинство других ваших проектов связаны с дизайном или бизнесом, тогда, вероятно, в них вообще не будет кода, кроме случайного скрипта, для которого вообще не нужна отдельная папка.

Кроме рабочей папки клиента, можно также создать полностью отдельную папку для документов, которые не должен видеть ваш клиент. Наверняка вы будете регулярно показывать клиенту документы, связанные с работой, и вполне вероятно, что в какой-то момент вы захотите дать ему доступ ко всей папке (а некоторые клиенты обязательно об этом попросят: «А можешь заархивировать все мои файлы и скинуть их мне? Я просто хочу убедиться, что у меня есть копии всего»). Чтобы не подвергаться риску случайно отправить им файл «10 вещей, за которые я их ненавижу.doc», складывайте такие файлы в отдельную личную папку по клиенту.

В общем, вот пример структуры, которую мы только что построили:

А теперь поговорим о папках “code/” и “website/”, описанных выше

Существует два типа изображений (практически всегда): те, которые являются частью дизайна, и те, которые являются частью контента, представленного на сайте. Последние должны находиться в папке ресурсов (или загрузок, или мультимедиа), например, в подпапке pictures/. Картинки дизайна, которые вряд ли придется часто искать, можно положить в папку images/.

Если ваш дизайн немного более сложный, у вас должны быть изображения для кнопок, значков, навигации, фона страницы и пр. В таком случае, в этой папке у вас скоро появится от 10 до 20 изображений, поэтому стоит разбить ее на подпапки. Все равно неплохо бы иметь изображения общего назначения в папке верхнего уровня, но при этом подпапки помогут контролировать огромное количество ваших мелких файлов. Давайте файлам чувствительные и легко запоминаемые имена, например form-warning-icon.png.

Для большинства сайтов таблицы стилей не должны быть очень большими. Для небольшого сайта или даже для более крупного сайта без большого количества различных разделов (у каждого из которых свой дизайн), вам обычно достаточно одного файла для CSS. В таком случае его можно просто назвать main.css или styles.css.

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

Я считаю, что лучше разделить стили для «разметки» и «контента». «Разметка» будет включать такие элементы, как навигация, колонтитулы, боковые панели, поля, разделы. «Контент» будет включать такие элементы, как абзацы, заголовки, цитаты, списки, плавающие изображения, ссылки. Двигаясь дальше, имеет смысл создать файл стилей «формы». Однако, так как контент в сети становится все более интерактивным, черта между формами и контентом довольно быстро стирается.
Опять же, называйте вещи своими именами, а потому эти файлы лучше назвать layout.css, content.css и forms.css. Если вы решите дать им более неточные названия, вроде presentation.css, model.css,page.css, вам каждый раз придется думать, прежде чем решить, какой файл нужно открыть.

Иногда полезно иметь отдельные CSS-файлы для отдельных страниц, у которых есть собственные требования к дизайну. Но это может оказаться себе дороже, в зависимости от сложности такой страницы. Если вам приходится щелкать по вкладкам в редакторе в поиске нужного CSS-файла для определенного элемента, наверное, лучше все же упростить CSS. Также не помешает подумать об использовании Sass или LESS, чтобы сделать CSS более привлекательным и чистым. Возможно, у вас также будут отдельные таблицы стилей для различных мультимедиа-файлов, и они уж точно должны быть отдельным файлом. Ну и, как обычно, им следует дать чувствительное название, например, print.css.
Если у вас несколько файлов CSS – это прекрасно, но, прежде чем их преподнести, объедините их в один с помощью автоматизированного инструмента, иначе скорость загрузки вашего сайта будет очень печальной. Не объединяйте свои превосходно разложенные CSS вручную. Компьютер сам это легко сделает с помощью шахматного автомата. Для этого можно использовать Minify (PHP) или Juicer(Ruby).

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

Обычно вы приходите к тому, что у вас есть файл библиотеки JavaScript (jquery.js, mootools.js и пр.), несколько виджетов (скажем, datepicker.js и dropdown.js) и несколько файлов кода для каждого сайта (например, my-image-slider.js). Определенно имеет смысл хранить всю эту информацию в отдельных файлах, однако у вас зачастую есть немного JavaScriptа для сайтов, что имеет смысл создать для него всего один файл.

Положите все эти файлы в папку под названием javascript/. Если вы используете стороннюю библиотеку вроде jQuery, вы крайне редко будете создавать настолько сложные сайты, чтобы была необходимость разделять эту папку.

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

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

Источник

Структура файлов

С позиции разработчика, сайт условно можно подразделить на два уровня — логический и физический. На логическом уровне сайт представляет собой совокупность веб-страниц, объединенных между собой единым дизайном, стилем и ссылками. При этом на физическом уровне сайт является и набором файлов разного типа — в состав могут входить программы, документы, изображения и многое другое. Продумывание и создание удобной файловой структуры помогает не только разработчику оптимизировать свою работу, но и посетителю лучше понять строение сайта.

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

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

Каждый раздел представляет собой один HTML-документ, который следует создать и дать ему имя. Имена файлов лучше называть латинскими символами без пробелов в нижнем регистре. Такой подход гарантирует универсальность и работоспособность на разных платформах.

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

Какой файл загружать первым

Где через пробел указываются имена файлов, которые следует просматривать на предмет наличия и запускать автоматически. После этого, при указании пути к разным файлам и папками, в браузере будут открываться документы, как показано в таблице (указание протокола http:// для краткости опущено).

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

Запрет доступа к папкам

В нем надо написать следующую информацию.

Изображения

Все изображения, применяемые на веб-страницах, принято хранить в папке с именем images или img. Такая традиция систематизирует материал, разбивая его на блоки. Получается, что для картинок предназначено одно место хранения, для скриптов — другое, для стилей — третье.

Отслеживание ошибок

Файл называется err404.html и размещается в корне сайта, слэш (символ /) перед именем файла пишется обязательно.

Файловая структура сайта

Вернемся теперь к сайту, файловую структуру которого следует создать. Здесь существует два различных подхода. В первом случае, каждому разделу соответствует html-документ, находящийся в корне сайта. Путь к нему будет выглядеть как www.mysite.ru/optimize.html. Альтернативный вариант — создание папок, которые будут соответствовать определенным разделам. В каждой папке размещается файл index.html. Поскольку этот файл указывать в адресе не обязательно, то путь будет выглядеть как www.mysite.ru/optimize. На рис. 1 и рис. 2 показаны два набора организации файлов на сайте.

Рис. 1. Организация документов по файлам	Рис. 2. Организация файлов по каталогам

Какую структуру предпочесть зависит лишь от воли создателей сайта.

Дополнительные файлы

На любом сайте не обойтись и без дополнительных файлов, обычно размещаемых в корне сайта. Сюда входят файлы, предназначенные для выполнения определенных задач и имеющие обязательное имя, а также файлы, имя которых определяется разработчиками.

Обязательные имена

index.html — название главной страницы, а также веб-страниц, размещаемых в папках, которые должны открываться при их указании в адресе. Это имя, как уже упоминалось, может меняться в зависимости от типа веб-сервера и его настроек. Но обычно оно именно такое.

.htaccess — конфигурационный файл веб-сервера Apache. Указанный сервер является наиболее популярным и распространенным в мире, поэтому и данный файл можно встретить повсеместно. Бывают, конечно, исключения.

robots.txt — файл, предназначенный для поисковых систем. При индексировании сайта, в первую очередь ищется он. Пример запрета для всех поисковых систем посещать папки сайта cgi-bin и images.

favicon.ico — иконка сайта, она появляется возле адреса сайта при занесении его в раздел «Избранное» браузера. Это рисунок размером 16 на 16 пикселов формата ICO.

Необязательные имена

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

Источник

Как сделать сайт?

Что такое сайт?

Что такое хостинг?

Серверы хостинга имеют бесперебойное электропитание (с дизельными генераторами на улице на всякий случай) и несколько интернет провайдеров. Дублирующие меры необходимы для бесперебойного доступа к сайту даже в случае чрезвычайного происшествия. Для размещения своего сайта можно использовать и свой домашний компьютер, но он должен быть включен 24/7 и иметь постоянный доступ к высокоскоростному интернету, чтобы сайт работал без перебоев. А так же иметь квалифицированную техническую поддержку для настройки серверного программного обеспечения. Ещё желательно иметь не простой компьютер, а корпоративного уровня с высокой отказоустойчивостью, в котором все системы продублированы. Такой компьютер стоит дорого, поэтому выгоднее заказать услуги хостинга у хостинговой компании.

Что такое домен?

Какие сайты бывают?

Бывают «статичные» и «динамичные» сайты. Это не общепринятое обозначение, но оно поможет понять как работают сайты. Поэтому будем использовать это название далее в статье.

Теперь обратим внимание на титульную страницу сайта, файл которой называется «index.html». В интернете принято называть титульную страницу как index.html. Эта страница так часто используется, что принято по умолчанию проверять а не запрашивается ли она. К примеру, если вы перейдёте по ссылке «mousedc.ru», то скачаете и откроете именно файл index.html. Эта же страница будет ещё и по адресу «mousedc.ru/index.html». Поэтому прибавлять к адресу «/index.html» нет необходимости.

Как загрузить HTML файлы на сервер?

Вы можете прочитать подробнее про программу для загрузки файлов на сервер «FileZilla» в статье «Загрузка файлов на сайт с помощью FileZilla». Рекомендуем использовать эту программу для дальнейшей работы с сайтом при загрузке/выгрузки файлов с сервера.

И рекомендуем ознакомиться со статьями, описывающими редакторы файлов, у которых есть возможность изменять файлы на удалённом сервере: «Средство разработки: Notepad++» или «Средство разработки: Atom»

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

Существуют языки программирования, которые позволяют модифицировать страницу «на лету», во время запроса. Это сильно упрощает жизнь тем, кто создаёт сайты. Представьте, что на сервере вместо «index.html» лежит файл «index.php». Расширение «.php» означает, что этот файл может быть обработан языком программирования. И в зависимости от переданных параметров выдать страницы с разным содержанием.

Таким параметром для динамичных сайтов является строка запроса. К примеру, если зайдёте на новостной сайт через запрос:

То страница сайта выдаст новость под номером 1 или 2, потому что в запросе (в адресной строке) указан параметр «novost» со значением равным «1» и «2». Всё, что находится после знака вопроса «?» в строке запроса, является параметром (параметров может быть несколько).

Обратите внимание, что в двух примерах запрос идёт на один и тот же файл «mousedc.ru/index.php». Именно в этом состоит сила динамичных сайтов: один файл может выдавать совершенно разный результат в зависимости от передаваемых параметров и от того, как запрограммировать его. Если Вы заинтересовались темой программирования, то рекомендуем ознакомиться с разделом наших обучающий статей по программированию на PHP.

База данных

Система управления контентом

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

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

С чего начать создание сайта?

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

Источник