Sofin-credit.ru

Деньги и работа
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать вторую страницу сайта

Как создать страницу на сайте

Чтобы создать новую страницу на сайте, войдите в админку и выберите в меню управления (слева) раздел «Страницы».

Следующий шаг зависит от того, в какой части сайта Вы хотите разместить новую страницу. Допустим, меню Вашего сайта содержит пять разделов: «Новости», «Галерея», «Коллектив», «Контакты» и «Отзывы». Это разделы первого уровня. Но некоторые из них могут содержать в себе другие разделы, более мелкие: например, внутрь общего раздела «Контакты» можно поместить страницы «Директор», «Зам. директора», «Секретарь». Это — вложенные страницы, или подразделы. Для подразделов также можно создавать вложенные страницы еще более низкого порядка.

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

Создание страницы первого уровня

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

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

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

Нас часто спрашивают, что писать в поле «Имя для построения URL». Туда пишется адрес страницы для адресной строки браузера.

Заполнять поле «Имя для построения URL» можно только латинскими буквами, цифрами и символами. Желательно, чтобы имя, внесенное в это поле, отражало тематику страницы: например, для страницы-каталога подойдет «catalog», для новостной ленты — «news». Вы также можете оставить имя, присвоенное по умолчанию: в таком случае это будет цифровой код.

Обратите внимание: Вы можете не только изменять основные параметры страницы (заголовок, текст, блоки и т.д.), но и работать со вкладками «Навигация» и «SEO».

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

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

Создание вложенной страницы

Для создания подраздела найдите в структуре сайта тот раздел, внутрь которого хотите поместить будущую страницу. Зайдите внутрь раздела, кликнув по синей папке слева от его названия.

И уже внутри нужного раздела создайте новую страницу по алгоритму, приведенному выше.

Если синей папки рядом с названием раздела нет, значит, для этого раздела нельзя создать вложенную страницу.

Видео: как добавить страницу на сайт

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

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

Соединяем html-страницы между собой

Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги . Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах произойдет переход. Куда? На страницу, которая указана в атрибуте href.

Рассмотрим наш блок меню:

главная ||шаблоны || контакты

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

Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.

Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: (все папки указываются через / ).

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

Нам осталось на разных html-страницах разместить разный контент.

Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html — будут просто фотографии шаблонов, а на странице kontact.html — адрес нашей электронной почты.

Начнем со страницы index.html. Откройте ее в блокноте.

Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:

Здесь — контент
Здесь фотоЗдесь описание
Здесь фотоЗдесь описание
Перед вами уникальный трёх-колоночный шаблон на бизнес тематику выполненный в строгом и продуманном стиле в слиянии белого и серого цветов. В правой части страницы располагается удобное двух-колоночное главное меню. В данной теме имеется возможность размещения видео роликов и рекламы 120х600pix.
Для вас представлена трёх-колоночная тема, выполненная в слиянии чёрной и жёлтой гаммы цветов, дизайн шаблона, выполненный в спокойных и неярких цветах не раздражает глаз. В правой части блога вы увидите двух-колоночное главное меню, в теме также присутствует календарь.
Читать еще:  Как работать с конструктором сайтов

Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.

Откройте ее в блокноте и вместо слов «Здесь — контент» вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег добавьте атрибут align=»center»

Шаблоны

Здесь собраны все шаблоны сайтов.

обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).

Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:

Наши контакты

Пишите нам по адресу: admin@mysite.ru

Пишите нам по адресу: admin@mysite.ru

Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.

Наверно, у вас возникло два вопроса:

1. Откуда брать картинки для сайта (все эти шапки и меню)?

Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop

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

Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделе Уроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии — CSS, Java script, PHP и т.д.

На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.

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

Добавление страницы к проекту сайта

Сайты обычно состоят из десятков, а то и сотен взаимосвязанных страниц.

В руководстве на данной странице мы рассмотрим добавление страницы к проекту, наполняемому в Конструкторе сайтов E-Publish.

Для добавления страницы пройдите, пожалуйста, в меню Конструктора: Проект — Добавить страницу ,

Сайты обычно состоят из десятков, а то и сотен взаимосвязанных страниц.

В руководстве на данной странице мы рассмотрим добавление страницы к проекту, наполняемому в Конструкторе сайтов E-Publish.

Для добавления страницы пройдите, пожалуйста, в меню Конструктора: Проект — Добавить страницу ,

или кликните по кнопке » Добавить страницу «.

или кликните по кнопке » Добавить страницу «.

При этом поднимется окно свойств страницы,

в котором можно:

1. Выбор типа страницы.

В Конструкторе присутствуют различные типовые (специализированные) страницы.

в котором можно:

1. Выбор типа страницы.

В Конструкторе присутствуют различные типовые (специализированные) страницы.

Ознакомиться с типами страниц Вы можете в подразделе «Типы страниц сайта», пройдя по ссылкам на описания типовых страниц.

Важно:

Выбирать тип страницы следует при добавлении страницы к проекту,

так как в дальнейшем изменить тип уже добавленной к проекту страницы будет не возможно.

2. Титул страницы.

Титулом страницы является отображаемое в поисковых системах и во вкладке браузера название страницы.

По умолчанию титул страницы установлен в соответствии с названием выбранной типовой страницы.

Но Вы можете задать желаемый титул страницы.

Ознакомиться с типами страниц Вы можете в подразделе «Типы страниц сайта», пройдя по ссылкам на описания типовых страниц.

Важно:

Выбирать тип страницы следует при добавлении страницы к проекту,

так как в дальнейшем изменить тип уже добавленной к проекту страницы будет не возможно.

2. Титул страницы.

Титулом страницы является отображаемое в поисковых системах и во вкладке браузера название страницы.

По умолчанию титул страницы установлен в соответствии с названием выбранной типовой страницы.

Но Вы можете задать желаемый титул страницы.

Титул, заданный при добавлении страницы к проекту, будет отображен не только как титул, но и как:

  • Название страницы и
  • Название пункта меню.

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

С руководством по смене титула Вы можете ознакомиться на странице «Титул».

С руководством по смене названия пункта меню Вы можете ознакомиться в пункте 2 на странице «Редактор меню».

Название страницы Вы всегда можете изменить простой правкой в поле названия страницы (между шапкой сайта и основным полем страницы).

3. Не отображать меню сайта на странице

Установив отметку на данном пункте,

Титул, заданный при добавлении страницы к проекту, будет отображен не только как титул, но и как:

  • Название страницы и
  • Название пункта меню.

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

С руководством по смене титула Вы можете ознакомиться на странице «Титул».

С руководством по смене названия пункта меню Вы можете ознакомиться в пункте 2 на странице «Редактор меню».

Название страницы Вы всегда можете изменить простой правкой в поле названия страницы (между шапкой сайта и основным полем страницы).

Читать еще:  Проверка позиций сайта по ключевым словам бесплатно
3. Не отображать меню сайта на странице

Установив отметку на данном пункте,

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

То есть после публикации на странице не будет отображаться меню.

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

Чтоб задать странице более целостный вид.

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

В таком случае поможет только возврат на предыдущую страницу в браузере.

Потому желательно переход на страницы, на которых закрыто отображение меню, делать ссылками на других страницах.

С открытием ссылки в новой вкладке.

4. Добавить модуль «Комментарии» внизу страницы

Установив отметку на пункте «Добавить комментарии на странице»

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

То есть после публикации на странице не будет отображаться меню.

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

Чтоб задать странице более целостный вид.

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

В таком случае поможет только возврат на предыдущую страницу в браузере.

Потому желательно переход на страницы, на которых закрыто отображение меню, делать ссылками на других страницах.

С открытием ссылки в новой вкладке.

4. Добавить модуль «Комментарии» внизу страницы

Помимо активации модуля «Комментарии» в свойствах страницы, данный модуль необходимо активировать и в Вашем виртуальном кабинете.

С руководством по размещению модуля «Комментарии» на странице сайта Вы можете ознакомиться на странице «Комментарии к странице Вашего сайта»

5. Закрыть страницу паролем

Вы можете запаролировать страницу.

Помимо активации модуля «Комментарии» в свойствах страницы, данный модуль необходимо активировать и в Вашем виртуальном кабинете.

С руководством по размещению модуля «Комментарии» на странице сайта Вы можете ознакомиться на странице «Комментарии к странице Вашего сайта»

5. Закрыть страницу паролем

Вы можете запаролировать страницу.

В таком случае страница будет доступна только тем, кому Вы предоставите данные для посещения страницы.

С подробным руководством по защите страницы паролем Вы можете ознакомиться на странице «Защитить страницу паролем».

6. Отключить страницу от пролистывания на сайте

Если на Вашем сайте активированы кнопки перехода по карте проекта (кнопки «Вперед» и «Назад» ),

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

Для этого в свойствах страницу установите, пожалуйста, отметку на пункте «Не включать в пролистывание страниц»

В таком случае страница будет доступна только тем, кому Вы предоставите данные для посещения страницы.

С подробным руководством по защите страницы паролем Вы можете ознакомиться на странице «Защитить страницу паролем».

6. Отключить страницу от пролистывания на сайте

Если на Вашем сайте активированы кнопки перехода по карте проекта (кнопки «Вперед» и «Назад» ),

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

Для этого в свойствах страницу установите, пожалуйста, отметку на пункте «Не включать в пролистывание страниц»

Более детально о кнопках просмотра проекта «Вперед» и «Назад» Вы можете узнать на странице «Дополнительные средства навигации (кнопки)»

7. Закрыть возможность копирования наполнения страницы

Вы можете установить защиту от копирования на странице.

Как части наполнения, так и страницы целиком.

Для этого установите, пожалуйста, в свойствах страницы отметку на пункте «Закрыть возможность копирования страницы»

Более детально о кнопках просмотра проекта «Вперед» и «Назад» Вы можете узнать на странице «Дополнительные средства навигации (кнопки)»

7. Закрыть возможность копирования наполнения страницы

Вы можете установить защиту от копирования на странице.

Как части наполнения, так и страницы целиком.

Для этого установите, пожалуйста, в свойствах страницы отметку на пункте «Закрыть возможность копирования страницы»

Важно:

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

То есть страница станет недоступна не только для копирования, но и для работы некоторых модулей.

Таких, к примеру, как окно поиска по сайту .

8. Задать фоны

С руководством по добавлению фонов Вы можете ознакомиться на странице: «Фон (на странице, под страницей, в заголовке сайта) добавить/сменить»

9. Задать ключевые слова для страницы (для раскрутки страницы в поисковых системах).

Вкладка «Описания» позволяет вставить ключевые слова и фразы с которыми будет ассоциироваться данная страница в поисковых системах (Google, Яндекс и т.п.).

С руководством по ключевым словам Вы можете ознакомиться на странице: «Ключевые слова»

Важно:

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

То есть страница станет недоступна не только для копирования, но и для работы некоторых модулей.

Таких, к примеру, как окно поиска по сайту .

8. Задать фоны

С руководством по добавлению фонов Вы можете ознакомиться на странице: «Фон (на странице, под страницей, в заголовке сайта) добавить/сменить»

9. Задать ключевые слова для страницы (для раскрутки страницы в поисковых системах).

Вкладка «Описания» позволяет вставить ключевые слова и фразы с которыми будет ассоциироваться данная страница в поисковых системах (Google, Яндекс и т.п.).

С руководством по ключевым словам Вы можете ознакомиться на странице: «Ключевые слова»

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

Читать еще:  Зарегистрироваться на сайте ифнс в личном кабинете

Достаточно около 7-и ключевых слов, записанных через запятую и одной фразы описания.

Старайтесь подбирать специфические слова.

К примеру, если речь идет о странице фотоальбома 8-го А класса, в ключевые слова лучше написать:

«8А класс, гимназия N1 г. Новые Васюки, 2014 год».

В описании: «Фотоальбом 8А класса гимназии №1 г. Новые Васюки 5 марта 2014 г.»

С руководством по ключевым словам Вы можете ознакомиться на странице: «Ключевые слова»

Наши контакты: Почта: info@edusite.ru Бесплатный телефон поддержки: +7(800) 511 08 86

Поделиться в соц.сетях:

© Руководство по созданию и ведению сайта в Конструкторе E-Publish. АО «Е-Паблиш», 2002—2020

Вёрстка страницы сайта

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка)

  • Содержание:
  • 1. Как разбить макет страницы на секции
  • 2. Разметка шапки сайта и позиционирование её элементов
  • 3. Создание сетки для основной части страницы
  • 4. Разметка подвала страницы

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

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

Рис. 2. Основные секции страницы с тегом-контейнером

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

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:

Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.

Рис. 4. Эффект схлопывания блока-контейнера

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float ) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container :

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

Рис. 5. Очистка потока

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

Рис. 6. Логотип-картинка

В нашем примере высота логотипа равна 38px , поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

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

Рис. 7. Сетка основной части страницы

Для элемента с классом .row также применим очистку потока:

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:

Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

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

Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

4. Разметка подвала страницы

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

Ссылка на основную публикацию
Adblock
detector