Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Правила Карта Блоги Социальные группы Поиск Сообщения за день  
 
1 / 1 / 4
Регистрация: 12.02.2014
Сообщений: 117
1

Открытие нескольких веб-страниц, на одной главное веб-странице

20.01.2018, 02:07. Просмотров 469. Ответов 3
Метки нет (Все метки)
Всем доброго времени суток.

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

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

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

Фотографии памятников я сделал, историю почти ко всем памятникам нашел.


карту города я планирую создать, примерно вот так:
- создам цельную карту города, используя скриншоты схемы города из яндекс карт.
- затем использовать специальную программу "API Яндекс.Карт. Подготовка слоя тайлов", которая разобьет созданную мною карту гурода, на отдельные куски, состырующиеся друг с другом.
- затем при помощи программы на сайте "http://lab.abhinayrathore.com/img2canvas/", превратить все изображения в отдельные html коды
- на отдельной странице, создать блок (если я не ошибаюсь, блок canvas)
- в данном блоке я настрою инструментарий (приблизись, отдалить, перетащить), ну как на простых картах
- затем после инструментария. будет квадрат в котором будет склеина карта
- а по вехр карты, внутри данного квадрата, будут распологаться кнопки.

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

Открытие нескольких веб-страниц, на одной главное веб-странице
Открытие нескольких веб-страниц, на одной главное веб-странице
Открытие нескольких веб-страниц, на одной главное веб-странице


Вот пример кода:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

<html>
  <link rel="stylesheet" href="style.css">
    
<!------------------------------------------------------------------------------------------>
    <script type=text/javascript>
 
    function surprise() 
    {document.getElementById('main').src=" SomeFile.html ";
      //document.main.src="iframe-style.html";
    }
 
    </script>
 
<!------------------------------------------------------------------------------------------>
    <body>
 
        <div id="head">
            <th><h1>ТИТУЛЬНЫЙ ТЕКСт</h1></th>
            Какой нибуть простой текст
        </div>
    <br><!-- отступ -->
 
    <!-- ==================================================================================== -->
    <!-- СОЗДАНИЕ ТАБЛИЦЫ С КНОПКАМИ -->
    <table border=1 width="100%" cellpadding="5">
 
        
 
        <tr>
            <!-- растянуть данную ячейку, в ширену на 7 ячеек -->
            <th colspan="7">ОБЩЕЕ НАЗАНИЕ ДЛЯ ВСЕХ КНОПОК</th>
        </tr>
 
 
        <!-- Перечень насосных станций (всего 7 ячеек) -->
        <tr>
            <!-- Кнопка 1 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 1 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_1.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 1" style="vertical-align: middle"> <b>Кнопка 1</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 2 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 2 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_2.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 2" style="vertical-align: middle"> <b>Кнопка 2</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 3 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 3 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_3.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 3" style="vertical-align: middle"> <b>Кнопка 3</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 4 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 4 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_4.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 4" style="vertical-align: middle"> <b>Кнопка 4</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 5 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 5 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_5.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 5" style="vertical-align: middle"> <b>Кнопка 5</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 6 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 6 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_6.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 6" style="vertical-align: middle"> <b>Кнопка 6</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 7 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки на кнопку 7 -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_7.html">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 7" style="vertical-align: middle"> <b>Кнопка 7</b>
                    </a>
                </button>
            </th>
 
 
 
        </tr>
 
    </table>
    <br><!-- отспуп -->
 
    <!-- ==================================================================================== -->
    <!-- СОЗДАНИЕ ТАБЛИЦЫ С ПОЛЯНМИ, ДЛЯ ГИПЕР ССЫЛОК -->
    <table border=1 width="100%" cellpadding="5">
        
        <tr>
            <!-- Поле 1 -->
            <th>
                Название для поля 1
                <br>
                
                <!-- Сылка на страницу, которая должна открываться в даном поле и его размер -->
                <iframe id=main src=" Ссылка на страницу, открывающайся в данном окне, при нажатии кнопки, с главного меню" width=900 height=600 name=main>
                </iframe>
        
                <div id="foot">
            </th>
 
 
            <!-- Поле 2 -->
            <th>
                Название для поля 2
                <br>
                
                <!-- Сылка на страницу, которая должна открываться в даном поле и его размер -->
                <iframe id=main src=" Ссылка на страницу, открывающайся в данном окне, при нажатии кнопки, с поля 1" width=300 height=600 name=main>
                </iframe>
        
                <div id="foot">
            </th>
 
        </tr>
 
    </table>
 
 
    
 
 
</div>
</body>
</html>
Вот исхоник: Primer_proekta.zip

И если есть у кого-то идеи о том, как создать свою инетрактивную карту и если вам не трудно, может подскажите что да как?

Заранее всем большое спасибо за помощь.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 20.01.2018, 02:07
Ответы с готовыми решениями:

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

4 окна на одной веб-странице!
Нужно чтобы 1 окно было слева вверху, 1 слева внизу, 1 справа вверху, 1 справа внизу, все...

Очерёдность подгрузки элементов на веб странице
Как установить очерёдность подгрузки элементов на страницу, что бы они не сверху вниз по коду...

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

3
Эксперт HTML/CSS
2943 / 2517 / 1063
Регистрация: 15.12.2012
Сообщений: 9,432
Записей в блоге: 9
20.01.2018, 09:44 2

Не по теме:

Цитата Сообщение от Саир_Крон Посмотреть сообщение
нисмог
Цитата Сообщение от Саир_Крон Посмотреть сообщение
открывалибы
Цитата Сообщение от Саир_Крон Посмотреть сообщение
Тоесть
Видимо лекции по русскому языку тоже были пропущены... :)



Цитата Сообщение от Саир_Крон Посмотреть сообщение
И если есть у кого-то идеи о том, как создать свою инетрактивную карту и если вам не трудно, может подскажите что да как?
Судя по Вашим картинкам - это фреймы... Больше ничего говорить не буду - учите родной язык, потом уже задавайте вопросы...
0
1 / 1 / 4
Регистрация: 12.02.2014
Сообщений: 117
21.01.2018, 11:45  [ТС] 3
Цитата Сообщение от Fedor92 Посмотреть сообщение
Видимо лекции по русскому языку тоже были пропущены...
Цитата Сообщение от Fedor92 Посмотреть сообщение
Учите родной язык, потом уже задавайте вопросы...
Ну Русский язык для меня не сильно то и родной, да и в России я живу, относительно не так долго. Ну раз такое дело и моя безграмотность режет вам глаза, искрене прошу за это прощение...

И большое вам спасибо за подсказку
Цитата Сообщение от Fedor92 Посмотреть сообщение
это фреймы
, довольно сильно помогло в работе над заданием...
---------------------------------------------------------------------------
Вот переделанный код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

<html>
 
<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<head>
 
    <!-- Кодировка для чтония русских cимволов-->
    <meta charset="UTF-8">
 
    <!-- Название страницы -->
    <title>Название сайта в закладке браузера</title>
 
</head>
 
<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<!-- СОЗДАНИЕ ЗАДНЕГО ФОНА САЙТА -->
<body background="images/Osnovnoi_Fon.jpg" width="*" height="*">
    <br><!-- отступ -->  
 
    <!-- ==================================================================================== -->
    <!-- СОЗДАНИЯ ТИТУЛЬНОГО ТЕКСТА ПО ЦЕНТРУ -->
    <h1 align="center">ТИТУЛЬНЫЙ ТЕКСТ ИЛИ КАРТИНКА</h1>
    <br><!-- отступ -->  
 
    <!-- ==================================================================================== -->
    <!-- ПОЛЕ В КОТОРОЕ ПОДКРУЖАЕТСЯ СТРАНИЦА С ЛЕНТОЙ ОПИСАНИЯ САЙТА -->
    <!-- толщина линии рамки -->
    <frameset border="1">
        <!--подключаемая страница с текстом, можно ли её листать, можно ли изменять размера поля, размер поля-->
        <iframe src="Opisanie_dla_Saita\Opisanie_1.html" scrolling="yes" noresize width="100%" height="200"></iframe>
    </frameset>
    <br><!-- отступ --> 
    <br><!-- отступ -->
 
</body>
 
<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
<body>  
 
    <!-- ==================================================================================== -->
    <!-- СОЗДАНИЕ ТАБЛИЦЫ С КНОПКАМИ -->
    <table border=1 width="100%" height="*" cellpadding="5">
 
        
 
        <tr>
            <!-- растянуть данную ячейку, в ширену на 7 ячеек -->
            <th colspan="7">ОБЩЕЕ НАЗАНИЕ ДЛЯ ВСЕХ КНОПОК</th>
        </tr>
 
 
        <!-- Перечень насосных станций (всего 7 ячеек) -->
        <tr>
            <!-- Кнопка 1 -->
            <th>  
                <!-- Добавление текстуры для кнопки --> 
                <button background="images/Knopka.jpg" width="*" height="*">
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_1.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 1" style="vertical-align: middle"><b>Кнопка 1</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 2 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_2.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 2" style="vertical-align: middle"><b>Кнопка 2</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 3 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_3.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 3" style="vertical-align: middle"> <b>Кнопка 3</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 4 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_4.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 4" style="vertical-align: middle"> <b>Кнопка 4</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 5 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_5.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 5" style="vertical-align: middle"> <b>Кнопка 5</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 6 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_6.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 6" style="vertical-align: middle"> <b>Кнопка 6</b>
                    </a>
                </button>
            </th>
 
 
            <!-- Кнопка 7 -->
            <th>   
                <button>
                    <!-- Подвяхка гиперссылки для кнопки и в каком поле она её откроет -->
                    <a href="Stranici_dla_Pole_1\Stranica_1_7.html" target="windows_1">
                        <!-- подвязка картинки для кнопки -->
                        <img src="images/Kartinka_1.gif" width="160" height="90" alt="Картинка 7" style="vertical-align: middle"> <b>Кнопка 7</b>
                    </a>
                </button>
            </th>
 
 
 
        </tr>
 
    </table>
    <br><!-- отспуп -->
 
</body>
 
<!-- ==================================================================================== -->
<!-- СОЗДАНИЕ ТАБЛИЦЫ С ПОЛЯНМИ, ДЛЯ ГИПЕР ССЫЛОК -->
<table border=1 width="100%" height="*" >
    <tr>
        <!-- Размеры поля 1 -->
        <th width="65%" height="600">
            <h2>Пояснение для поля 1</h2>
            <!--подключение ссылки, название поля, можно листать поле, можно ли изменять размер поля, размер поля-->
            <iframe src=" Место для ссылки " name="windows_1" scrolling="yes" noresize width="100%" height="100%"></iframe>   
        </th>
 
        <!-- Размеры поля 2 -->
        <th width="65%" height="600">
            <h2>Пояснение для поля 2</h2>
                        <!--подключение ссылки, название поля, можно листать поле, можно ли изменять размер поля, размер поля-->
            <iframe src=" Место для ссылки " name="windows_2" scrolling="yes" noresize width="100%" height="100%" ></iframe>
        </th>
    </tr>
</table>
 
 
 
 
 
<br><!-- отступ --> 
<br><!-- отступ -->
 
 
 
    
 
 
 
 
</html>
А вот собственно и исходник, может кому то пригодится: Пример сайта на фреймах.zip
0
Эксперт HTML/CSS
2943 / 2517 / 1063
Регистрация: 15.12.2012
Сообщений: 9,432
Записей в блоге: 9
21.01.2018, 12:16 4

Не по теме:

Цитата Сообщение от Саир_Крон Посмотреть сообщение
Ну Русский язык для меня не сильно то и родной, да и в России я живу, относительно не так долго. Ну раз такое дело и моя безграмотность режет вам глаза, искрене прошу за это прощение...
Ну даже, если Вы в России недавно - русский язык надо подтягивать... :) Просить прощение ни за что не надо, просто принимать к сведению, что читать птичий язык неприятно...



По поводу кода... Вообще я подразумевал использование тега <frame>, поскольку такие задания, как у Вас выдают обычно в северных регионах страны, где пока ещё закладывают фундаментальные знания по основам вёрстки... Но у Вас получился своеобразный гибрид, что тоже в принципе неплохо...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 21.01.2018, 12:16

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как выровнять 4 окна на веб-странице?
Какие теги для выравнивания 4 окон на одной веб-странице? Буду благодарен за помощь.

Реклама только на одной веб-странице
Здравствуйте! При просмотре веб-страницы http://vsiodliakukol.ru выскочила страница с рекламой...

Отображение веб страниц
Доброго времени суток, Уважаемые! Появилась проблемка, даже не заметил как, состоит в том что при...

Парсинг веб страниц
Всем привет! Суть задачи нужен парсер сайта... Скачать страницу с глубиной рекурсии до 5...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Реклама - Обратная связь
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.