Урок №9
Создаём свой сайт из трёх страниц

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

Закиньте в папку Мой сайт , все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,

и две фотографии:
irbis.jpg
polyarnyi-volk.jpg

Сделаем третью страницу, она будет посвящена полярной сове .

Данные третьей страницы

Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html

Название страницы , сделайте:
Страница о полярной сове

Внедрите CSS-код:

Заголовок статьи

:
Полярная сова

Фотография :

Статья состоящая из двух абзацев :

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.

В итоге, вы должны получить следующую страницу .

Соединяем ссылками страницы сайта

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

Index.html — Статья о снежном барсе ,
polyarnyi-volk.html — Статья о полярном волке ,
polyarnaya-sova.html — Статья о полярной сове .

Снежный барс Полярный волк Полярная сова

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

Как вы уже знаете, каждый HTML-документ начинается с тега , данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки , а уже под ним ставится тег . Строка даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.

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

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.

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

Снежный барс Полярный волк Полярная сова

Всегда добавляйте строку , в начале каждого HTML-документа.

Регистрация домена и хостинг

Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.html
polarnayi-volk.html
polarnaya-sova.html

и три фотографии:
irbis.jpg
polyarnyi-volk.jpg
polyarnaya-sova.jpg

Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен) , наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс :
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU , нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год) .

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

В этом разделе я постараюсь рассказать о том, как с использованием PHP создать шаблон многостраничного веб-сайта. Думаю, что многие в процессе интернет-серфинга замечают, что большинство сайтов состоят из “однотипных” страниц. Заголовок, левая, правая и нижняя части каждой такой страницы практически идентичны, а отличаются они друг от друга содержимым только основной части, размещенной по центру. В верхней части страницы обычно располагается главное меню сайта. Левая и правая колонки могут содержать различного рода ссылки, баннеры и рекламные блоки. В нижней части предпочитают размещать информацию о проекте, авторских правах и прочие, общие для всех страниц данные. Вручную создавать такие страницы, безусловно, можно, но не целесообразно, поскольку исходная HTML разметка каждой страницы будет содержать изрядную часть дублирующегося кода, а в случае ошибок или попыток изменить их структуру придется вносить изменения во все страницы. С помощью PHP проблема создания шаблона такой страницы решается довольно просто.

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

begin_center(); echo "

"; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; get_page()->end_center(); include "footer.php"; close_page(); ?>

Исходный код page.php.

До начала формирования разметки страницы необходимо подключить файл global.php , что указано в самой первой инструкции require_once . Далее мы инициализируем страницу вызовом глобальной функции open_page() , передавая значение заголовка, описания и ключевых слов страницы. После, с помощью инструкции include подключаем заголовок и боковые панели страницы и открываем разметку основной области вызовом метода begin_center() класса Page . Теперь можно сформировать основную разметку страницы, которая будет отображена в границах основной области. В заключении необходимо закрыть основную область вызовом end_center() , добавить разметку подвала и закрыть страницу с помощью глобальной функции close_page() .

Все достаточно просто. Исходный код файлов header.php , left_side.php , right_side.php и footer.php приведен далее. Если для какой-то группы страниц вам понадобится изменить содержимое этих областей, то создайте специальные версии этих файлов и измените аргументы соответствующих им инструкций include в шаблоне страницы.

begin_header(); echo "

Название сайта

"; get_page()->end_header(); ?>

Исходный код header.php.

begin_left_side(); echo "

"; echo ""; echo ""; get_page()->end_left_side(); ?>

Исходный код left.php.

begin_right_side(); echo "

"; echo ""; echo ""; get_page()->end_right_side(); ?>

Исходный код right.php.

begin_footer(); echo ""; get_page()->end_footer(); ?>

Исходный код footer.php.

Результат обработки рассмотренного шаблона можно посмотреть .

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

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

Этот пост поможет вам взвесить все плюсы и минусы каждого вариант.

Одностраничный сайт

Веб-сайт с одной страницей — это просто веб-сайт, содержащий только одну страницу HTML. Нет дополнительных страниц, таких как страница «О программе», «Особенности» или «Контакты».

Как объясняет Awwwards, контент на сайтах с одной страницей полностью загружается на начальную страницу, что делает процесс более постоянным и естественным для пользователя. Чтобы перейти к различным разделом на одностраничном веб-сайте, пользователи нажимают на ссылки навигации, которые позволяют им переходить к местам назначения на странице, или прокручивать страницу, чтобы охватить разные разделы контента.

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

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

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

Еще одно преимущество наличия простой навигационной системы состоит в том, что пользователь направлен только на одно действие. Исследования показывают, что наличие одной страницы может привести к увеличению количества конверсий до 37,5%, по сравнению с многостраничными сайтами.

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

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

Недостатки одностраничного сайта

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

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

Многостраничный веб-сайт содержит несколько страниц. В отличие от веб-сайта с одной страницей, единственный способ навигации и просмотра страниц в многостраничном дизайне — это переход по ссылкам в меню.

Многостраничный дизайн хорошо подходит почти для всех типов проектов. Примеры многостраничного веб-дизайна можно найти на сайтах электронной коммерции (таких как Amazon) и сайтах электронного обучения (например, Lynda).

Преимущества многостраничного дизайна

Существует три основных преимущества многостраничной страницы на одном веб-сайте.

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

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

Наконец, сайты с несколькими страницами имеют мощные возможности SEO. Иногостраничные сайты с большей вероятностью будут иметь больший объем контента, чем у одностраничных.

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

Еще одна вещь, которую нужно учитывать, — это показатель отказов вашего сайта. Сайты с большим количеством контента часто медленно загружаются, отвлекают и могут привести к отказу пользователей.

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

Сравнение одностраничных и многостраничных веб-сайтов — резюме

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

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

Дата публикации: 02-02-2016 9155

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

Шаг 1. Определите, какие страницы будут на сайте. Например: Главная страница, О нас, Каталог, Контакты. Заьтем создаем главную страницу сайта. На ней делает меню - добавляем для этого соответствующий блок.

Не забудьте сохранять все свои действия, чтобы ничего не потерялось.

Шаг 2. Создаем вторую страницу. Для этого нужно зайти на страницу и нажать на три точки рядом с кнопкой РЕДАКТИРОВАТЬ. Там вы увидите знаки в ряд, в них нужно выбрать значок "копировать".

При этом важно "закрыть" значок глаза, который вы увидите слева от страницы. Просто нажмите на значок глаза, и он перечеркнется. Это нам и нужно.
И так - со всеми страницами, кроме главной.

Шаг 3. Важный шаг - создание меню сайта. Переходим в редактор главной страницы и кликаем на меню. Выйдет окно. В этом окне вам нужно кликнуть на каждую строчку меню (например, "О нас", "Контакты" и так далее) и в появившейся строке прописать якорь или ссылку на нужную страницу. Но важно прописать якоря или ссылки правильно.

Для того, чтобы, нажав на строку меню, перейти в какой-либо блок на этой же странице, вам нужно:

• нажать на настройки блока,
• прокрутить вниз и в строке "Якорь блока" вы увидите сам якорь. Он может выглядеть, например, так a_1116942 или так anchor3,
• скорпируйте данный якорь и вставьте его в нужную строку меню. Но важно, чтобы перед самим якорем стоял знак решетки: #

Для перехода из меню на другую страницу, нужно проделать все то же самое, что и выше, но только вместо якоря прописать ссылку на страницу. Для этого нужно:

• сначала перейти в "Настройки проекта" и там в самом низу выбрать строку "Использовать страницы вместо A-B тестирования", активируйте ее. Страница с проектами будет выглядеть примерно так:

• далее нам нужно прописать URL для страниц. Для этого заходим на сайт Транслит и в окно для русского текста вставляем название страницы (например, "О нас"), нажимаем - Перевести. И копируем то, что сайт выдал. В данном случае: o-nas;
• переходим снова в Проекты, нажимаем на три точки рядом с кнопкой РЕДАКТИРОВАТЬ и из ряда значков выбираем знак редактирования (Карандаш). Появится окно. В нем в строку "URL страницы" (см. скриншот ниже) вставляем то, что скопировали на сайте Транслит.

Повторяем это с каждой страницей сайта. И затем переходим в режиме редактирования на Главную страницу - в меню. Далее здесь нужно проделать следующее:

• Кликаем на меню. Выйдет окно слева.
• В этом окне нажимаем на нужную строку в меню и увидите справа от строки зеленый квадрат со знаком цепочки.
• Нажмите на нее и из появившегося списка выберите то, что вам необходимо. Например, "О НАС" (см. скриншот ниже). И так проделываем со всеми страницами.

Не забывайте нажимать кнопки сохранения между выходом из сайтов!

Шаг 4. Делаем SЕО оптимизацию нашего сайта. Переходим на страницу Проекты . Кликаем на три точки и выбираем первый редактор. Значок с карандашом. В открывшемся окне сначала активируем галочку у строки "Использовать индивидуальные SEO настройки для этой страницы". И ниже прописываем Title, Description, Keywords на каждую страницу по аналогии с инструкцией - СЕО для лендинг пейдж .

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

Шаг 5. Чтобы упростить работу на многостраничном сайта, нужно создать единое меню. В данном видео все подробно рассказано: как сделать единое меню для сайта.

Чтобы созданное вами меню появлялось на каждой странице, не нужно ставить меню на каждую страничку сайта. Можно поступить гораздо проще. И это будет намного быстрее и удобнее. Что нужно сделать?

• Открываем редактирование каждой страницы.
• В настройках меню в главном разделе появилось ID. Копируем его.
• В редактировании остальных страниц добавляем "Блок-ссылку" и поднимаем её наверх. Туда, где находится шапка сайта. В настройках вставляем ID секции.
• И эту процедуру проделываем на каждой странице.
• Сохраняем и проверяем.

Поздравляем! Вы сделали многостраничный сайт своими руками!

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

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

01
02
03
04
05
06

07
10

08 "Пушистик" 09

11
12
13
18
21
25
25

14 О магазине 15 Зверушки 16 Связь 17

19 Наш магазин занимается продажей пушистых зверушек. 20

22 Новости: 23 Сегодня в продажу поступили крокодилы всех расцветок. 24

26
27
30

28 <(c) Все права защищены, зоомагазин "Пушистик" 29

31
32

Как видно из примера, сайт состоит из трех страниц: index.html, animals.html, contacts.html. Все страницы имеют ту же структуру, за исключением контентной части (строка 19). Как добавить новую страницу? Для этого нужно исправить меню в трех существующих файлах, и добавить четвертый файл с новым меню и контентной частью. Для изменения логотипа или новостей также нужно исправить все файлы. Для трехстраничного сайта это можно сделать руками, но только фирма выросла, ассортимент товаров увеличился и сайт разросся до 1000 страниц. Как быть в этом случае?

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

Заголовок и логотип в файле head (строки 01-10),
Начало основной таблицы и меню в файле menu (строки 11-17)
Смысловую часть главной табицы в файле main1, а смысловую часть остальных разделов в файлах main2, main3, и т.д. (строки 18-20)
Новости и конец основной таблицы в файле news (строки 21-25)
Оставшийся код запишем в файл bottom (строки 25-32)
Создадим файл make.bat (расширение обязательно) с следующим содержанием:

copy /b head+menu+main1+news+bottom index.html
copy /b head+menu+main2+news+bottom animals.html
copy /b head+menu+main3+news+bottom contacts.html

Теперь запускаем файл make.bat двойным щелчком мыши и получаем... три файла index.html, animals.html, contacts.html. Файл с расширением.bat в MS Windows - пакетный командный файл, или просто скрипт. Команда copy собирает из различных файлов один файл. Теперь, для того, чтобы изменить, например, новости, достаточно исправить файл news и запустить скрипт make.bat - все изменения автоматически произойдут во всех файлах. Чтобы добавить новый рездел, достаточно добавить строчку в menu, написать контентную часть в новый файл main4 и добавить строчку в скрипт make.bat (copy /b head+menu+main4 +news+bottom novyi_fail.html ). После запуска скрипта у вас будут уже четыре файла со всеми изменениями.

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