Как одну web страницу сделать элементом другой?

AsBurst · 29.04.2012, 16:29

Суть проблемы: Есть две разные web страницы на жестком диске. Нужно одну из страниц вставить в div тег другой. Если подскажите как это сделать в DreamWeavere буду вдвойне благодарен! Заранее спасибо!
P.S. Пытаюсь сделать электронный учебник

maxefect · 29.04.2012, 20:11

Хм ... если я правильно полагаю, то

1) Когда то все было на Iframe /

http://htmlbook.ru/html/iframe

2) Использовать JavaScript / модальное подключение страницы на основе AJAX

а) Подключаете себе Jquery на страницу
б) Между тегами <head> </head> или перед закрывающим тегом </body>
вставляете:
<script> $("#area").load("something.html"); </script>
в) И в определенный div будет загружен контент

<div id="area">



</div>

AsBurst · 29.04.2012, 21:08

Не совсем так. Есть html-страница, в которой содержится материал. Хочется ее вставить в оболочку, которую я сделал из Div-тегов в Dreamweavere. Пробовал вариант №2, предложенный Вами.

1.Между тегами head прикрепил библиотеку:
<script type="text/javascript" src="jquery-1.7.2.min.js"\>;
</script>

2 .Далее
<div id="content">
<script type="text/javascript">$('#content').load('ogl1.html');</script>
</div>

Результата нет.
Скриншот оболочки прилагаю.

maxefect · 29.04.2012, 21:20

Ну не знаю ...
Это классический был способ как выводить html с помощью AJAX

Везде опираются на метод .load()

Вот вам пример даже с похожим советом: http://zarabotat-na-sajte.ru/uroki-h...owyu-ajax.html

AsBurst · 29.04.2012, 21:30

Спасибо! Буду разбираться. Возможно, что где-то что-то сделал не так.

AsBurst · 30.04.2012, 21:39

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

maxefect · 30.04.2012, 22:00

Ну это на CSS нужно прорабатывать!

Вам нужно тот блок (в который выводили) - зафиксировать!
#area {width: 500px; height: 500px; overflow: auto;}

ну и тд .. свои размеры там поставите и прочее

maxefect · 30.04.2012, 22:00

Если, что код в студию предоставьте (сюда то есть)

AsBurst · 30.04.2012, 22:54

Я тут пример гипотетический взял, чтобы разобраться. Вот в apDiv4 пытаюсь всунуться.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>as</title>
<style type="text/css">
#apDiv1 {
position:fixed;
width:100%;
height:115px;
z-index:2;
left: 1px;
top: 1px;
background-color: #00FFCC;
}
#apDiv3 {
position:absolute;
left:11px;
top:115px;
width:179px;
height:300%;
z-index:1;
background-color: #9966CC;
}
#apDiv4 {
position:absolute;
left:191px;
top:132px;
width:732px;
height:411px;
z-index:1;
background-color: #FFFFCC;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"\>;
</script>

</head>

<body>
<div id="apDiv3"></div>
<div id="apDiv4">
<script type="text/javascript">$('#apDiv4').load('as.html');</script></div>
<div id="apDiv1"></div>
</body>
</html>

maxefect · 01.05.2012, 00:37

Ну если я правильно вас понял! То результат должен быть таким (опираясь на предложенный вами макет) :
demo.zip

Я набросал макет и оформил в должном образе ... если что не так спрашивайте!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как передать класс другой картинке при переходе на другую страницу?	kpripper	HTML, CSS, JavaScript	10	09.10.2011 12:28
Как сделать, чтобы сайт не перескакивал при открытии на другой адрес?	sprinter	HTML, CSS, JavaScript	20	10.01.2010 00:11
Как вставить в страницу содержимое другой страицы при помощи HTML?	Lander	HTML, CSS, JavaScript	7	27.08.2009 18:53
Как сделать переход на другой фрейм?	Samosa	Технологии Flash	0	30.01.2005 12:04
Как сделать загрузку одного swf, играя другой swf ???	kadafi	Технологии Flash	6	24.07.2003 01:27

29.04.2012, 16:29	#1
AsBurst	Суть проблемы: Есть две разные web страницы на жестком диске. Нужно одну из страниц вставить в div тег другой. Если подскажите как это сделать в DreamWeavere буду вдвойне благодарен! Заранее спасибо! P.S. Пытаюсь сделать электронный учебник

29.04.2012, 20:11	#2
maxefect	Хм ... если я правильно полагаю, то 1) Когда то все было на Iframe / http://htmlbook.ru/html/iframe 2) Использовать JavaScript / модальное подключение страницы на основе AJAX а) Подключаете себе Jquery на страницу б) Между тегами <head> </head> или перед закрывающим тегом </body> вставляете: <script> $("#area").load("something.html"); </script> в) И в определенный div будет загружен контент <div id="area"> <!-- СОДЕРЖИМОЕ --> </div>

29.04.2012, 21:20	#4
maxefect	Ну не знаю ... Это классический был способ как выводить html с помощью AJAX Везде опираются на метод .load() Вот вам пример даже с похожим советом: http://zarabotat-na-sajte.ru/uroki-h...owyu-ajax.html

29.04.2012, 21:30	#5
AsBurst	Спасибо! Буду разбираться. Возможно, что где-то что-то сделал не так.

30.04.2012, 21:39	#6
AsBurst	Выводить одну страницу на другой получилось. Только почему-то элементы на ней смещаются один относительно другого и она вылазит за границы требуемого div тега

30.04.2012, 22:00	#7
maxefect	Ну это на CSS нужно прорабатывать! Вам нужно тот блок (в который выводили) - зафиксировать! #area {width: 500px; height: 500px; overflow: auto;} ну и тд .. свои размеры там поставите и прочее

30.04.2012, 22:54	#9
AsBurst	Я тут пример гипотетический взял, чтобы разобраться. Вот в apDiv4 пытаюсь всунуться. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>as</title> <style type="text/css"> #apDiv1 { position:fixed; width:100%; height:115px; z-index:2; left: 1px; top: 1px; background-color: #00FFCC; } #apDiv3 { position:absolute; left:11px; top:115px; width:179px; height:300%; z-index:1; background-color: #9966CC; } #apDiv4 { position:absolute; left:191px; top:132px; width:732px; height:411px; z-index:1; background-color: #FFFFCC; } </style> <script type="text/javascript" src="jquery-1.7.2.js"\>; </script> </head> <body> <div id="apDiv3"></div> <div id="apDiv4"> <script type="text/javascript">$('#apDiv4').load('as.html');</script></div> <div id="apDiv1"></div> </body> </html>

01.05.2012, 00:37	#10
maxefect	Ну если я правильно вас понял! То результат должен быть таким (опираясь на предложенный вами макет) : demo.zip Я набросал макет и оформил в должном образе ... если что не так спрашивайте!

Опции темы
Версия для печати Отправить по электронной почте