использовать часть html-тела через все страницы

Question

использовать часть html-тела через все страницы

0

возможно, название не так понятно, поскольку я не уверен, как это объяснить. Я создаю свой html (однократная работа, поэтому не использую java. Просто html с css).

Рассмотрим эту принципиальную схему (Pic 1). Левая панель и нижний колонтитул почти одинаковы на веб-сайте на всех страницах, он содержит ссылку на другие страницы веб-сайта.

|================================|
||-------||------------||------| |
||LEFT   ||CENTER      ||RIGHT | |
||PANEL  ||PANEL       ||PANEL | |
||_______||____________||______| |
||_______________________________|
||  FOOTER                       |
||_______________________________|
|================================|

Рисунок 1: расположение веб-страницы

|------------------------|
|                        |
|link to pA              |
|link to pB              |
|                        |
|current link highlited  |
|------------------------|

Pic2. расположение левой панели

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

Кроме того, возможно отдельный вопрос, но связанный, предполагающий запись левой панели в отдельный файл. можно ли выделить текущий визит pagelink? (см. Pic 2)

BaRud 06 окт. 2013, в 11:21

Источник

Теги:

html

html5

css3

webpage

highlight

1 ответ

Ещё вопросы

Colandus · Answer 1 · 2013-10-06T06-49-00.000Z

EDIT Прошу прощения, я не уделял достаточного внимания. Вы не используете PHP? В этом случае взгляните на файл HTML5 include

Однако я не мог найти способ обмена данными между главной страницей и включенным файлом. Возможно, если возможно, в вашем включенном файле вы можете использовать # тег, например mypage.html#hello и проанализировать его с помощью JavaScript, чтобы узнать, какую страницу вы посещаете.

Вы практически отвечаете на свой вопрос. Просто выньте HTML-код и поместите его в отдельный файл и включите его там, где он был первоначально.

Скажите, что ваш код

<div id="main">
    <div id="left-panel">
        <div id="links etc"></div>
    </div>
    <div id="another"></div>
</div>

Вы возьмете left-panel часть left-panel и поместите в отдельный файл и включите ее там, где она была.

left-panel.php

<div id="left-panel">
    <div id="links etc"></div>
</div>

Исходный файл

<div id="main">
    <?php include 'left-panel.php'; ?>
    <div id="another"></div>
</div>

Чтобы узнать, на какой странице вы сейчас находитесь, вы можете использовать переменную. Скажите на каждой странице, что вы положили <?php $page = 'shop';?> <?php $page = 'shop';?> и внутри left-panel.php использовать if-statements вроде:

<ul>
    <li><a href="page1.php" <?php if($page == 'page1') echo 'class="active"'; ?>>Page1</li>
    <li><a href="page2.php" <?php if($page == 'page2') echo 'class="active"'; ?>>Page2</li>
</ul>

Чтобы избежать кучи if-утверждений, вы можете разместить свои страницы в массиве и зацикливать их:

<ul>
<?php
$pages = array('page1' => 'Page1', 'page2' => 'Page2', 'page3' => 'Page3');
foreach($pages as $file => $name) {
    echo '<li><a href="'.$file.'" '.($page == $file ? 'class="active"' : '').'>'.$name.'</a></li>';
}
?>