Автономная веб-страница

losdimas · December 23, 2014

Здравствуйте, уважаемые!

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

Вопрос вот в чем: когда работаю с атласом на компьютере где есть интернет, то все работает быстро. Когда открываю атлас на компьютере без интернета- вкладки и карты открываются по 5-10 секунд и все работает очень медленно.

В чем может быть проблема?

boond · December 23, 2014

делаю атлас карт

делаешь и не знаешь, что там у тебя написано.

Понятно же, что где-то на странице есть элементы со ссылками в интернет.

Veseloff · December 23, 2014

Покажите код

losdimas · December 23, 2014

Да атлас делал на основе шаблона и параллельно изучал НTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Atlas</title><meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /><link rel="stylesheet" type="text/css" href="atlas_files/css/main.css" media="screen" /><!--[if IE 6]>    <link rel="stylesheet" type="text/css" href="atlas_files/css/ie.css" /><![endif]--><!-- увеличение изображения -->    <link href="atlas_files/css/jquery-lightbox.css" type="text/css" rel="stylesheet" />    <script type="text/javascript" src="atlas_files/scripts/jquery-1.4.2.min.js"></script>    <script type="text/javascript" src="atlas_files/scripts/jquery.lightbox.js"></script><!-- end увеличение изображения --></head><body><!-- увеличение изображения --><script>if ( !(navigator.userAgent.indexOf('MSIE 6') >= 0) ){		$(document).ready(function(){        $(".gallery a").lightbox();        $.Lightbox.construct({            "speed": 400,            "show_linkback": true,            "keys": {                close:	"q",                prev:	"z",                next:	"x"            },            "opacity": 0.9,            text: {                image:		"Картинка",                of:			"из",                close:		"Закрыть",                closeInfo:	"Завершить просмотр можно, кликнув мышью вне картинки.",                help: {                    close:		"",                    interact:	"Интерактивная подсказка"                },                about: {                    text: 	"",                    title:	"",                    link:	"/index.html"                }            }        });    });}</script><!-- end увеличение изображения --><body><div id="sidebar">  <div id="header"> <a href="atlas.html">Атлас загрязняющих веществ</a></div>  <div class="block">    <p>ПИНРО 2014<br />      ЛПЭиТ</p>  </div>  <!-- end block 1 -->  <div class="block">    <ul>      <li><a href="#">Об атласе</a></li>      <li><a href="atlas_files/surface/surface.html">Загрязняющие вещества в поверхностном слое воды</a></li>      <li><a href="atlas_files/botton/botton.html">Загрязняющие вещества в придонном слое воды</a></li>      <li><a href="atlas_files/station/station.html">Расположение станций отбора проб (годы)</a></li>      <li><a href="../sprav/sprav.html">Справочные карты</a></li>	  <li><a href="atlas_files/special/special.html">Специальные карты</a></li>	  <li><a href="atlas_files/respect/respect.html">Благодарности</a></li>    </ul>  </div>  <!-- end block2 -->  <div id="info">    <p><a rel="nofollow" target="_blank" href="http://www.pinro.ru">ФГУП "ПИНРО"</a> | <a rel="nofollow" target="_blank" href="http://www.pinro.ru/n22/index.php/ru/structure/labs/labeco/199-labecohistory">ЛПЭиТ</a></p>  </div>  <!-- end footer--></div><!-- end sidebar --><div id="main">  <div id="content">    <h2>Об атласе</h2>		<p>		Всего.....		<div class="gallery">		<p align="justify">		2012 гг., в ходе которых были отобраны пробы воды с	поверхностного и придонного слоев воды на <a href="atlas_files/images/index1.png" alt="Карта станций">351-ой станции </a>. 		</p>		</div>		  </div>  <!-- End #content --></div><!-- End #main --></body></html>

Для просмотра картинок (карт) использовал jquery-lightbox.

Стили в СSS

/* zero out everything   */* {	margin: 0;	padding: 0;}body {	background:#000 url(../i/bg.jpg) repeat center center;	font-family:  Arial, sans-serif;	font-size: 95%;	background-color: #FFFFFF;	color: #676767;}body > #sidebar {	position: fixed;}img, a img {	border: none;}a {	color: #7E9A00/*был такой цвет #93B300*/;	background-color: transparent;	text-decoration: underline;}a:hover {	color: #4D4D4D;	text-decoration: none;	background-color: transparent;}/*         main****************************************/#main {	width: 750px;	margin-left: 220px;	padding-bottom: 1em;}/*         main3****************************************/#main3 {		position: absolute;	width: 100px;	margin-left: 180px;	margin-top: 0px;	}/*           content**************************************/#content {	margin: 0 10px;}#content p {	margin: .7em 0;	text-align: justify;}#content ul li {	list-style-type: circle;	margin-top: 0.5em;/*ОТСТУП МЕЖДУ ЭЛЕМЕНТАМИ СПИСКА*/		}#content ul, #content ol {	margin-left: 40px;	}#content h2 {	border-bottom: 1px solid #4D4D4D;	text-align: right;	margin-top: 1.2em;	margin-left: 0px;    color: #FC7E03;}#content h3 {	border-bottom: 1px solid #4D4D4D;	text-align: left;	margin-top: 1.2em;	margin-left: 0px;    }#content h2 a {	text-decoration: none;	color: #FC7E03;	background-color: transparent;}#content select {	color: maroon;	font-weight: bold;}/*         fom : find out more block*************************************************************/.fom {	width: 90%;	margin: 8px;	border: dashed 1px #DADADA;	background-color: #FFFFD0;	padding: 7px;	color: #000000;	}.fom ol {	margin-left: 30px;}/*          into sidebar*************************************/#sidebar {	position: absolute;	background-color: #F3F5E7;	color: #676767;	top: 0;	left: 0;	width: 220px;	height: 100%;	overflow: auto;	border-right: 1px solid #D2DBC8;}#header {	border-bottom: 1px solid #D2DBC8;	background: url(../i/header-001.jpg) #FFFFFF no-repeat left bottom;	height: 205px;	text-align: center;}#header a {	text-decoration: none;	font-size: 140%;	margin-right: 8px;}.block {	margin-top: .6em;}.block p {	margin: .6em;	}.block ul {	list-style-type: none;}.block a {	display: block;	padding: 3px 15px;	border-bottom: 1px dashed #999999;	color: #676767;	background-color: transparent;	text-decoration: none;}.block a:hover {	color: #363636;	background-color: #FEDD9E;}#info {	font-size: 75%;	margin-top: 2em;}#info p {	margin: .6em;	}#info a {	text-decoration: none;}/*  CC licence : respect it ! */div#CC-licence {	border: 4px solid #E0AD4B;	background: transparent url(../i/CC-licence-bg.png) no-repeat 195px 30px;	width: 230px;	padding: 2px;	margin: 8px;}div#CC-licence p {	margin: 0px;	text-indent: 0px;	font-family: Arial, Helvetica, sans-serif;	font-size: .7em;}div#CC-licence a {	color: #D20000;	text-decoration: none;	background-color: transparent;}div#CC-licence a:hover {	text-decoration: underline;	color: #7D0000;	background-color: transparent;}img.CC-floatleft {	float: left;	margin: 4px 2px 0 0;}/* END  CC licence *//* список горизонтально*/ul.hor_nav {margin: 0;padding: 0;}ul.hor_nav li{display: inline;margin-right: 4px;padding: 2px;}/*конец список горизонтально*//****увеличение изображения***/.vkl3 > br,.vkl3 > a:nth-of-type(2),.vkl3 > br:target ~ a:nth-of-type(1) {display:none;}.vkl3 > br {position:fixed;}.vkl3 > br:target ~ a:nth-of-type(2) {display: block;}/*** конец увеличения изображения***//*ol выравнивание по ширине*/.ol1 {text-align: justify; font-weight: lighter}/*конец ol выравнивание по ширине*/

Sign In

Автономная веб-страница

Question

losdimas

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

boond

Link to comment

Share on other sites

Veseloff

Link to comment

Share on other sites

losdimas

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information