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


Как создать многостраничный сайт самому

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

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

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

Создание многостраничного сайта

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

 

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

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

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

 

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

 

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

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

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

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

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

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


Шаг 4.  Делаем SЕО оптимизацию нашего сайта. Переходим на страницу Проекты. Кликаем на три точки и выбираем первый редактор. Значок с карандашом.

В открывшемся окне сначала активируем галочку у строки "Использовать индивидуальные SEO настройки для этой страницы". И ниже прописываем Title, Description, Keywords на каждую страницу по аналогии с инструкцией - SEO для лендинг пейдж. И так проделываем с каждой страницей. Не забывая сохранять все действия.

 

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

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

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

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

Рассказать друзьям:

javascript - Как создать веб-сайт с несколькими страницами, к которым пользователь может получить доступ, не перезагружая веб-страницу?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
.

Как создавать и управлять несколькими страницами на вашем веб-сайте с помощью Expression Web (thesitewizard.com)

Глава 7. Как использовать динамические веб-шаблоны (DWT) для многостраничного сайта


Кристофер Хенг, thesitewizard.com

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

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

Цель этой главы

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

Введение в динамические веб-шаблоны Expression Web

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

Именно здесь на помощь приходит динамический веб-шаблон Expression Web (или сокращенно DWT). Это «шаблон» в обычном английском значении этого слова, с некоторыми дополнительными функциями.Когда вы создаете новый страница, основанная на этом шаблоне, она примет вид последней, так что все, что вам нужно сделать, это добавить контент, относящийся к этой странице. Еще лучше, когда у тебя есть Если вы измените свое мнение и хотите изменить дизайн, все, что вам нужно сделать, это изменить шаблон. Expression Web автоматически заметит, что дизайн вашего сайта изменился, и обновит все соответствующие страницы с новым дизайном.

Как создать динамический веб-шаблон (DWT)

  1. Откройте свою домашнюю страницу в Expression Web, если она еще не открыта.

  2. Щелкните "Файл | Сохранить как ..." в меню.

  3. В знакомом диалоговом окне «Сохранить как» щелкните раскрывающийся список для поля «Сохранить как тип». и выберите «Динамический веб-шаблон (* .dwt)» из предложенного списка.

  4. В поле «Имя файла» теперь будет указано «index.dwt». Этот файл DWT будет шаблон для всего вашего сайта. Вы можете оставить его имя в "index.dwt" или изменить его на какое-то другое имя, но с расширением ".dwt".Например, если вы хотите изменить его на «mydesign» введите «mydesign.dwt» без кавычек. Имя не имеет значения, поскольку вы не собираетесь размещать этот файл на своем сайте. Это просто внутренний файл, используемый Expression Web.

    Для целей этого руководства, чтобы я мог кратко сослаться на файл, Я предполагаю, что вы оставили имя в «index.dwt».

  5. Нажмите кнопку «Сохранить».

  6. Посмотрите на вкладки прямо над вашей страницей.Вместо обычных вкладок "Просмотр сайта" и "index.html", теперь вы должны увидеть «Просмотр сайта» и «index.dwt», причем последняя будет текущей вкладкой (см. рисунок ниже). Ваш "index.html" - это , а не ; он все еще на жестком диске, но сейчас вы работаете над ваш файл шаблона.

    Имейте это в виду, работая с этого момента. То есть помните, какой файл вы на самом деле работа над. Если вы хотите изменить дизайн всего сайта, вам нужно изменить файл DWT. Если вы хотите добавить контент на отдельную страницу, это нужно сделать на самой HTML-странице.

  7. По умолчанию Expression Web предполагает, что каждая часть страницы в шаблоне является частью дизайна. Это, конечно, неверно. Вам нужен только базовый макет из двух столбцов, меню навигации и верхняя горизонтальная полоса, содержащая ваш логотип, чтобы быть стандартной на всех ваших страницах. Основная часть правый столбец (где находится ваш контент), вероятно, будет отличаться от страницы к странице (если вы действительно не хотите каждая страница должна быть идентичной копией вашей домашней страницы).

    Чтобы Expression Web знал, какая часть вашей страницы является частью дизайна сайта, а какая часть содержит уникальный контент, вам нужно специально указать это в вашем шаблоне.В противном случае, редактор, не в состоянии читать ваши мысли, по умолчанию будет рассматривать все как инвариантную часть дизайна.

    По сути, сейчас вы будете настраивать то, что Expression Web называет «редактируемыми областями». Это разделы вашей страницы, которые будут иметь разное содержание на разных страницах вашего сайта. На каждой странице может быть несколько редактируемых областей, и их можно разделить на части, часть фиксированного дизайна, или они могут быть смежными с другими редактируемыми областями.

  8. Чтобы пометить область вашей веб-страницы как редактируемую, сначала перетащите указатель мыши на этот раздел, чтобы выбрать его.

    Обратите внимание: если вы хотите, чтобы весь столбец содержимого был редактируемым, то есть если он чтобы быть полностью разным на каждой странице (что весьма вероятно), может быть проще выбрать весь столбец вместо выделения каждого абзаца по отдельности. Сделать это, щелкните, чтобы поместить текстовый курсор в правый столбец. Тогда посмотрите на ряд вкладок просто под полями "Просмотр сайта" и "index.dwt ". Перейдите на вкладку" div # tswcontproper " (см. рисунок ниже). Теперь должен быть выбран весь правый столбец.

    Некоторым из вас может быть интересно, в чем разница между div # tswcontproper (использованным выше) и div # tswcontent (используется в главе 3 для изменения цвета фона). Хотя оба относятся к правому столбцу, div # tswcontproper содержит только содержимое правого столбца, в то время как div # tswcontent содержит как div # tswcontproper , так и узкую границу вокруг последнего.Он обеспечивает своего рода поле, область пустого пространства, чтобы ваши слова не доходили до края экрана, затрудняет чтение.

  9. В меню выберите «Формат | Динамические веб-шаблоны | Управление редактируемыми областями ...».

  10. Появится диалоговое окно с заголовком «Редактируемые области». Вам потребуется предоставить это регион имя. Предположительно, это имя должно пробудить вашу память в будущем, чтобы вы знали что должен содержать регион.Имя может быть любым. Например, если вы выбрали весь правый столбец, введите в поле «Название региона» слова «Контент страницы», или «Контент», или «Материал, специфичный для страницы», или что угодно. (Да, ты можешь используйте пробелы в имени.) Это имя будет отображаться при редактировании страницы, но не будет отображается для посетителя, когда он видит ваш сайт в браузере.

    При этом имена вашего файла шаблона (например, "index.dwt") и всех редактируемых областей также будут встроены в вашу веб-страницу.Он будет просто невидим для ваших посетителей при просмотре вашего сайта. как обычно. Однако, если они потрудятся использовать функцию просмотра исходного кода в своем браузере, они могут видеть выбранные вами имена. Другими словами, не кладите секреты (например, ваш банковский пароль) как названия ваших редактируемых регионов. Такие вещи, как "Содержание", "Описание продукта". или "Цена" в порядке. Из вашей страницы должно быть очевидно, что они все равно читают «содержание», «описание продукта» или «цену», иначе у вас будут большие проблемы, чем придумывать эти названия.

    Подводя итог, введите в это поле слово или слова, описывающие раздел. Или если именование вещей вызывает у вас сильную головную боль, просто введите «регион 1», «регион 2», «регион 3» и т. д.

  11. После того, как вы введете имя, кнопка «Добавить» станет активной. Щелкните по нему. Имя будет быть добавленным в список имен в поле ниже. Если вы добавляете имя впервые, в результате в списке появятся два имени: то, что вы только что добавили, и «doctitle».

  12. Нажмите кнопку «Закрыть», чтобы закрыть диалоговое окно.

  13. Обратите внимание, что ранее выбранный раздел будет отмечен введенным вами именем.

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

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

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

    2. Если вы хотите изменить эти разделы, вам нужно будет изменить это в самом файле DWT.

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

  16. Когда вы закончите добавлять редактируемые области на свою страницу, нажмите «Файл | Сохранить».

Как связать вашу домашнюю страницу с шаблоном

Теперь у вас есть шаблон, из которого вы можете создавать новые страницы. Однако, прежде чем мы это сделаем, мы должны иметь дело с вашей домашней страницей. Помните, что последний был создан вами вручную, независимо от какого-либо шаблона. Таким образом, Expression Web не рассматривает эту страницу как производную из вашего нового файла DWT. Если мы ничего не предпримем с этим, в будущем, когда вы измените свой сайт дизайн, редактор не будет автоматически обновлять домашнюю страницу, поскольку, насколько это возможно, никак не связано с шаблоном.

Самый простой способ связать домашнюю страницу с шаблоном - заменить ваш старый "index.html" файл на новый, созданный по шаблону. Это не требует особой работы, так как шаблон основан на вашей домашней странице, и когда вы ее создали, вы не внесли никаких изменений в ее внешний вид или содержание. Все, что вы сделали, это пометили определенные разделы как редактируемые области. Любая страница сделанная из него поэтому по умолчанию будет выглядеть точно так же, как ваша домашняя страница. Однако это сходство лишь кожа глубоко.Под капотом есть невидимые маркеры, которые сообщают Expression Web, что это было сделано из вашего шаблона, что мы и хотим.

  1. Закройте шаблон, нажав «Файл | Закрыть». Это позволит избежать путаницы позже, когда вы можете случайно в конечном итоге вы меняете не тот файл, поскольку ваш шаблон и домашняя страница выглядят одинаково.

  2. Щелкните «Файл | Создать | Создать из динамического веб-шаблона ...».

  3. Щелкните файл шаблона (например, «index.dwt») в поле «Прикрепить динамический веб-шаблон» диалоговое окно, которое появляется.

  4. Нажмите кнопку «Открыть», чтобы принять ваш выбор.

  5. Появится новая страница, которая выглядит точно так же, как ваш шаблон и старая домашняя страница, а также диалоговое окно. поле с надписью «(1 из 1) файлов обновлено». Нажмите кнопку «Закрыть» в этом диалоговом окне.

  6. Не внося никаких изменений на страницу, сразу же щелкните в меню «Файл | Сохранить как ...».

  7. В появившемся диалоговом окне «Сохранить как» щелкните свою домашнюю страницу (например, «index.html "), чтобы выбрать его. Да, как упоминалось выше, вы перезаписываете существующую домашнюю страницу.

  8. Нажмите кнопку «Сохранить».

  9. Нажмите «Да» в диалоговом окне «Подтвердить сохранение как», чтобы разрешить Expression Web заменить ваш старый index.html. с новым.

  10. Поскольку это та же страница, которую вы уже заполняли в главе 6, делать здесь больше нечего. Просто нажмите «Файл | Закрыть».

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

Как создавать дополнительные веб-страницы из шаблона

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

Начнем с карты сайта.

Как создать карту сайта

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

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

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

  1. Щелкните «Файл | Создать | Создать из динамического веб-шаблона ...».

  2. Выберите файл шаблона и нажмите «Открыть».

  3. Нажмите кнопку «Закрыть», чтобы избавиться от бессмысленного диалогового окна с сообщением «(1 из 1) файлов обновлено».

  4. В меню выберите «Файл | Свойства». Диалоговое окно «Свойства страницы», с которым вы познакомились впервые в главе 1 появится.

  5. Измените поле «Заголовок», указав «Карта сайта», «Карта сайта (пример компании)» или «Карта сайта компании из примера». (конечно, заменив "Example Co" названием вашего сайта).Хотя никто тебе не помешает говоря все, что вы хотите, лучше всего иметь здесь слова "Карта сайта" где-нибудь в поле заголовка, поскольку по соглашению это термин, используемый для обозначения типа страницы, которую вы собираетесь создать.

  6. Щелкните кнопку «ОК».

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

    Начните с размещения заголовка «Карта сайта» где-нибудь в верхней части страницы, заменив все заголовок, который у вас был ранее.

    Затем создайте ссылку на каждую страницу вашего сайта в отдельной строке. Поскольку в настоящее время у вас не так много страниц, просто создайте 2 или 3 ссылки. Начать с размещение ссылки на Домашнюю страницу в одну строку. Затем поместите один в контактную форму (или форму поддержки или обратной связи) на другом. Ссылка на форма обратной связи должна указывать на " feedback.html " (если вы используете относительные URL-адреса) или «

.

Как настроить несколько страниц блога в WordPress?

Вы когда-нибудь испытывали потребность в нескольких страницах блога на вашем сайте WordPress?

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

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

Однако как это сделать? Кроме того, как вы можете сделать это, не имея чего-то сложного, например, настройки нескольких сайтов? Требуется ли регистрация нескольких доменных имен?

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

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

Хорошо, сначала мы рассмотрим способ без какой-либо настройки, а затем попробуем вариант с вариантами дизайна.

Первый способ: Связывание категорий в меню WordPress

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

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

Давайте посмотрим, как вы можете это сделать.


Шаг 1: Вам нужно добавить категории в свои блоги. Итак, для этого войдите в свою панель управления WordPress.


Шаг 2: Теперь перейдите в Сообщения> Категории и добавьте категории, в которых вы хотите разделить свой блог, используя раздел « Добавить новую категорию ».

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

Добавить новую категорию

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


Шаг 3: Теперь перейдите в Внешний вид> Меню . Теперь мы добавим наши категории в меню.

Внешний вид> Меню


Шаг 4: Теперь на левой стороне вы увидите список источников, которые вы можете добавить в свое меню. Щелкните раскрывающееся меню « Категории » и выберите категории или «Блоги», которые вы создали, а затем добавьте список в свое меню , нажав кнопку « Добавить в меню ».

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


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

Добавить категорию соответственно

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

Это был способ без настройки . Теперь мы посмотрим, как можно создать несколько страниц блога на своем веб-сайте WordPress вторым методом.

Второй способ : Как создать несколько страниц блога с дополнительной настройкой

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

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

Создание нескольких макетов блогов - это не единственное, что может делать Blog Designer Pro, но он предлагает гораздо больше возможностей настройки, и вы можете сделать гораздо больше с возможностями дизайна, которые он предлагает.

Давайте посмотрим, как установить этот плагин.


Шаг 1: Прежде всего, установите и активируйте плагин на сайте. Просто перейдите на страницу плагинов и нажмите кнопку «Добавить новый» .

Теперь нажмите кнопку «Загрузить подключаемый модуль» и найдите файл Blog Designer Pro.Zip , а затем нажмите кнопку «Установить сейчас» .

После завершения установки нажмите кнопку «Активировать» .

Вы можете обратиться к этому видео, чтобы увидеть полный процесс установки плагина Blog Designer Pro.


Шаг 2: Как и в предыдущем процессе, нам также потребуется добавить категории для сообщений в блоге здесь.Для этого перейдите в панель администратора WordPress > Сообщения> Категории .


Шаг 3: Используйте раздел «Добавить категорию» для добавления новых категорий в свои блоги. Помните, что категорий будут «Блогов», которые вы хотите создать на своем веб-сайте.

Добавить категорию сообщений

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

Добавить данные категории сообщений


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


Шаг 5: Теперь, поскольку нам нужны страницы для отображения в наших «блогах» или категориях, нам необходимо создать страницы для тех же категорий . Для этого перейдите в Pages> Add New и добавьте столько же страниц, сколько в ваших категориях. Вы можете установить имя своей страницы, такое же, как у ваших категорий, для удобства поиска.


Шаг 6: Теперь щелкните вкладку Blog Designer Pro и нажмите кнопку Create new layout .

Blog Designer PRO: Создайте новый макет блога


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


Шаг 8: Дайте вашему макету имя (это может быть название категории). Затем перейдите в настройки фильтра.


Шаг 9: В настройках фильтра найдите «Выбрать категории сообщений» и выберите категорию из списка.


Шаг 10: (необязательно): Вы можете вносить другие изменения в дизайн блога, используя другие настройки Blog Designer Pro. Вы можете изменить весь дизайн своей страницы блога, и вы можете выбрать свой любимый дизайн из более чем 40 шаблонов дизайна блога. Когда вы закончите вносить изменения, просто нажмите кнопку сохранения изменений.


Шаг 11: Перейдите в Blog Designer Pro> Макеты блога . Найдите созданный вами макет и нажмите кнопку «Дублировать» .Это откроет дублированный дизайн блога.


Шаг 12: Теперь вам нужно изменить страницу, на которой будет применяться макет, и изменить «Категория» в настройках фильтра. Щелкните по кнопке сохранения.

Blog Designer PRO: выберите категорию сообщений


Шаг 13: Повторите шаги для количества «Блогов», которое вы хотите на своем веб-сайте.


Шаг 14: Теперь нам нужно добавить эти страницы в наше меню .Перейдите в Внешний вид> Меню . Создайте новое меню, если у вас его нет, или вы можете редактировать существующее меню.

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

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

Преимущества добавления настроек в ваш блог:
  • Сэкономьте время на создании блога
  • Произвести глубокое впечатление на пользователя
  • Увеличит размер вашей аудитории / подписчиков
  • Для создания блога не требуются навыки программирования

Как лучше?

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

Если вы хотите создать несколько страниц блога на веб-сайте WordPress, но вы также хотите поднять дизайн своего веб-сайта на другой уровень, тогда вы можете выбрать Blog Designer Pro.Это даст вам полный контроль над внешним видом и функциями вашей страницы блога.

Расскажите, какой процесс вам больше всего понравился?

Если у вас есть какие-либо вопросы, оставьте комментарий ниже, и мы свяжемся с вами в ближайшее время!

.

Как создавать и управлять несколькими страницами на вашем веб-сайте с помощью Dreamweaver CS6 (thesitewizard.com)

Глава 7. Как использовать менеджер сайта и систему шаблонов для многостраничного сайта


Кристофер Хенг, thesitewizard.com

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

Как следует из предыдущего абзаца, эта статья, которую вы сейчас читаете, является главой 7. Dreamweaver CS6 руководство. Если вы прибыли сюда извне thesitewizard.com, я предлагаю вам начать с глава 1, в противном случае вы можете находя то, что я говорю, сбивает с толку, когда я говорю о вещах, которые уже были рассмотрены. Тем не менее, тем, кто совершенно не знаком с созданием веб-сайтов, следует начать в самом начале: Как создать Веб-сайт: Полное руководство.

Цель этой главы

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

Что такого особенного в создании дополнительных веб-страниц?

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

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

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

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

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

Как создать собственный шаблон с Dreamweaver CS6

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

  2. В меню выберите «Файл | Сохранить как шаблон ...».

  3. Появится диалоговое окно с заголовком «Сохранить как шаблон». По умолчанию, как видно из поля «Сохранить как» в В окне ваш шаблон называется "index" (поскольку ваше исходное имя файла было "index.html"). Если это имя приемлемо вам, нажмите кнопку «Сохранить».

    Имя, которое вы здесь вводите, просто служит вам способом идентифицировать шаблон. Он также будет использоваться в качестве шаблона имя файла с расширением ".dwt "автоматически добавляется к нему. На самом деле это не важно, как вы это называете. Например, вы даже можете назвать это «Лучший дизайн в мире». хотя, вероятно, вам будет немного неловко, если кто-то узнает это имя. Имя встроено на всех веб-страницах, созданных на его основе, и хотя он не виден среднему посетителю, тот, кто знает HTML могут увидеть это, просто используя функцию «Просмотр исходного кода» своего браузера.

    Для простоты я предполагаю, что вы использовали имя по умолчанию «index» в оставшейся части этой серии руководств.

  4. Нажмите кнопку «Да» в ответ на новое диалоговое окно с вопросом «Обновить ссылки?». Необходимо обновить относительные ссылки на вашей странице (если есть), потому что файл шаблона, созданный Dreamweaver, будет помещен в другой каталог (т. е. папку) из исходного файла. Если вы не разрешите программе обновлять ссылки, они будут не работает на всех страницах, созданных на основе этого шаблона. Другими словами, ваш ответ всегда должен быть «Да» (что делает вопрос несколько избыточен).

  5. В папке локального веб-сайта будет создан новый каталог под названием «Шаблоны». Вы можете увидеть это на панели «Файлы». Обратите внимание, что вы больше не просматриваете свою домашнюю страницу в редакторе. Хотя страница выглядит точно так же, как ваша домашняя страница, вкладка в верхней части окна должна теперь читать " index.dwt " вместо " index.html ". Расширение файла ".dwt" означает, что вы работаете над шаблоном Dreamweaver, а не ваша веб-страница (с расширением ".html ").

  6. К сожалению, шаблон нельзя использовать в его нынешнем виде. Несмотря на то, что он имеет правильный внешний вид, каждый бит страницы будет рассматриваться Dreamweaver как часть дизайна. Это, конечно, неверно. Вам нужен только базовый макет из двух столбцов, меню навигации и верхней горизонтальной полосы содержащий ваш логотип, чтобы быть стандартным на всех ваших страницах. Основная часть правого столбца (где находится ваш контент) вероятно, будет меняться от страницы к странице (если вы не хотите, чтобы все страницы были идентичными).

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

    По сути, сейчас вы будете настраивать то, что Dreamweaver называет «редактируемыми областями». Эти части, которые будут отличаться на каждой странице вашего сайта.У вас может быть несколько редактируемых регионов на каждой странице, и они могут быть разделены контентом, который является частью фиксированного дизайна, или они могут быть смежными с другими редактируемыми регионами.

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

  7. Не снимая выделения с раздела, щелкните в меню «Вставить | Объекты шаблона | Редактируемая область».

  8. Появится диалоговое окно с названием «Новая редактируемая область». Поле «Имя», вероятно, имеет значение по умолчанию «EditableRegion3» или что-то подобное (например, «EditableRegion», но с другим номером, помеченным на нем). Dreamweaver позволяет дать имя всем редактируемым регионам. Предположительно, это должно пробудить вашу память в будущее, чтобы вы знали, что должен содержать этот регион.Например, если вы выделили основную часть правого столбца, вы всегда можете назвать эту область «Контент» или «Пользовательский контент» или что-нибудь еще, что вам нравится. (Да, в этом поле можно использовать пробелы.) Фактически, вы даже можете принять имя по умолчанию если вы не хотите придумать новый. Выбранное имя будет отображаться в Dreamweaver при редактировании. страницу, но она не будет показана посетителю, когда он прочитает ее в своем браузере.

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

    Подводя итог, замените имя по умолчанию на какое-нибудь описательное слово или слова, если хотите. Или оставьте все как есть, если вы чувствую себя ленивым. Затем нажмите кнопку «ОК».

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

  10. Сделайте то же самое с другими частями вашей веб-страницы, которые также должны быть изменены. Например, если вы разместили уведомление об авторских правах в нижнем колонтитуле, вы можете сделать часть года редактируемой областью, так как возможно, что вы создадите новый страницу в каком-то другом году в будущем.Да, вы можете выбрать одно слово или число и сделать его редактируемой областью если хочешь. Обозначьте регион «Год авторского права» (без кавычек) или оставьте имя по умолчанию, если вы не можете беспокоиться.

  11. Когда вы закончите обозначать все редактируемые области в вашем шаблоне, нажмите «Файл | Сохранить».

    Это может (или не может) привести к появлению сообщения "Вы поместили редактируемую область" EditableRegion4 "внутрь тег блока. Пользователи этого шаблона не смогут создавать новые блоки в этом регионе.Переместить регион вне тега блока, если вы хотите, чтобы пользователи могли это делать », где« EditableRegion4 »(или как там написано в вашем случае) - это название одного из отмеченных вами регионов.

    Это сообщение звучит тревожно, но на самом деле не имеет даже отдаленного значения или полезности. Это просто означает, что где-то на своей странице вы выбрали слово, число или фразу (например, год действия авторских прав) вместо огромного блок текста (например, целый абзац). Он пытается сказать, что когда вы работаете над своими отдельными веб-страницами, вы можете только замените эту короткую фразу другой короткой фразой.Вы не сможете заменить его несколькими новыми абзацами вставлен прямо в середине существующего предложения. Для этого вам нужно будет вернуться к этому шаблону и скорректируйте свой дизайн. Не волнуйтесь, если вы не поняли ни сообщение, ни мое объяснение. Это просто заявляя очевидное, вроде как сказать «Внимание: вода мокрая».

    В любом случае, если это сообщение появится для вас, просто нажмите кнопку «ОК», чтобы закрыть его.

Как связать вашу домашнюю страницу с шаблоном

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

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

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

  1. Щелкните «Файл | Закрыть все», чтобы закрыть все файлы. Это снизит вероятность того, что вы закончите работу над неправильный файл по ошибке.

  2. Щелкните «Файл | Создать». Вас встретит диалоговое окно «Новый документ», которое вы видели в глава 1.

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

    Щелкните строку с надписью «Страница из шаблона» в левом столбце диалогового окна.

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

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

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

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

  7. Нажмите кнопку «Создать» внизу диалогового окна.

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

    Щелкните «Файл | Сохранить как ...».

  9. В открывшемся диалоговом окне «Сохранить как» выберите « index.html » и нажмите кнопку «Сохранить».

  10. Нажмите «Да» в ответ на «Выбранный файл уже существует.Хотите перезаписать этот файл? ».

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

.

Смотрите также

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

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий