Перейти к содержимому



Сайт своими руками

#1

Поделиться сообщением #1



Вячеслав

Вячеслав
  • Пользователь
  • 374 сообщений
  • Репутация: 2
0

Отправлено 06 Декабрь 2008 - 21:10

Имеется шаблон (резиновый)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<title>Реклама</title>
<style type="text/css">

body
{
   background:#000000;
}

#main
{
   width:100%;
   background:#000000;
}

#hider
{
   border: 1px solid #000;
   height:250px;
   background:url(images/1.gif) center no-repeat;
}

#menu 
{
   width:auto;
   height:25px;
   background:#000000;
}

#content
{
   width:100%;
   height: 800px;
   background:url(images/main.jpg) center no-repeat;
}

#right
{
   width:60%;
   float:left;
   margin-left: 2%;
   margin-top:30px;
}

#lev
{
   height:auto;
   width: 30%;
   float:left;
   margin-left:25px;
   margin-top:30px;
}

#punkt1
{
   background:url(images/punkt1.gif);
}

#punkt2
{
   background: #999999 url(images/punkt2.gif);
}

#punkt3
{
   background: #999999 url(images/punkt3.gif);
}

#punkt4
{
   background: #999999 url(images/punkt4.gif);
}

#buttom
{
   width: 100%;
   height: 100px;
   border: medium;
   background: #999999;
}

div.punkts
{
   width: 250px;
   height: 180px;
   margin-top: 10px;
   margin-left: 15px;
}

.punks
{
   width: 100%;
   height: 180px;
   margin-top: 10px;
   background: #0000FF url(images/polosa.gif) bottom left no-repeat;
}

</style>
</head>
<body>
	<div id="main">
		<div id="hider">
		
		</div>
		<div id="menu"></div>
		<div id="content">
				<div id="lev">
				<div id="punkt1" class="punkts"></div>
				<div id="punkt2" class="punkts"></div>
				<div id="punkt3" class="punkts"></div>
				<div id="punkt4" class="punkts"></div>
		</div>
		<div id="right">
				<div class="punks"></div>
				<div class="punks"></div>
				<div class="punks"></div>
				<div class="punks"></div>
		</div>
		</div>
		<div id="buttom"></div>
	
</body>
</html>




Можно просмотреть здесь http://vladislav.dokunin.pochta.ru/

У меня вопрос вот такой >>> немогу разобратся что делать дальше > как сделать чтоб при нажатии на левые кнопки (4шт) открывались страницы которые выглядели бы подругому (т.е уже без этих кнопок, например галерея и т.п) это нужно делать средствами хтмл и CSS ? посовету чтонибуть плизз...
заранее СПАСИБО!!!

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Создать сайт бесплатно
  2. Как создать свой сайт бесплатно и быстро?
  3. Пошаговая инструкция создания сайта с помощью CMS Joomla!
  4. Создание сайта бесплатно или как создать сайт своими руками
  5. Конструкторы для создания сайтов

#2

Поделиться сообщением #2



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 06 Декабрь 2008 - 22:25

Для отображения вместо блоков ссылок вам надо заменить код
..............
<div id="punkt1" class="punkts"></div>
<div id="punkt2" class="punkts"></div>
<div id="punkt3" class="punkts"></div>
<div id="punkt4" class="punkts"></div>
................
На
..............
<a id="punkt1" class="punkts" href="/1.html"></a>
<a id="punkt2" class="punkts" href="/2.html"></a>
<a id="punkt3" class="punkts" href="/3.html"></a>
<a id="punkt4" class="punkts" href="/4.html"></a>
................

Страницы могут называться хоть pupkin.html, photogallery.html
Тока вы должны не забывать соотносить название файла к примеру pupkin.html с ссылкой
<a href="/pupkin.html">Пупкин</a>
Файлы должны лежать в том же каталоге, что и index.html!

Если вы хотите положить файл в какой-то подкаталог относительно index.html, то ссылка будет вида
<a href="/имя_подкаталога/pupkin.html">Пупкин</a>

  • 0

#3

Поделиться сообщением #3



admin

admin
  • Пользователь PRO
  • 5 275 сообщений
  • Репутация: 55

Отправлено 07 Декабрь 2008 - 17:22

Сомневаюсь, что кто-то будет заказывать ваши услуги по наружке с таким сайтом :) Может лучше обратиться к специалистам в создании и продвижении сайтов?
  • 0

#4

Поделиться сообщением #4



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 07 Декабрь 2008 - 17:54

Да уж дизайн расплывается... Да и кнопки слишком большие... очень много мигающих gif'ов, что очень раздражает глаза. Я уже говорил как лучше сделать кнопки меню.
Цвет фона я бы выбрал белый или бледно-серый, а дизайнерскую идею взял бы с пары шаблонов, для тебя это лучший вариант :)
  • 0

#5

Поделиться сообщением #5



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 374 сообщений
  • Репутация: 2

Отправлено 10 Декабрь 2008 - 06:16

Всем привет!
Принял во внимание ваши замечания и решил переделать дизайн... http://vladislav.dokunin.pochta.ru/




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /><title>Реклама</title><style type="text/css">body{ width:100%;   background:FFFFFF;} #main{ background: #eebc43;   width:100%;   border: ffd50f 5px inset;   }#hider{  width:auto;   float: inherit;   height:230px;   background: #FFFFFF;}#vhod { float:right; background:url(www/images/vhod.gif); width: 300px; height: 180px; margin-right: 25px; margin-top: 27px;}#menu1{   width:auto;   height:25px;   }.menu { float:left; width: 16.5%; height: 25px;}.blok {background: url(www/images/menu.gif) left no-repeat #FFCC00;}.blok2 {}.blok,blok2 { float: left;margin-right: 30px;width: 950px; } .knopka {	text-align: center;	display: block;	width: 155px;	height: 20x;	padding-top: 6px; padding: 3px;	color: #FFF;	font: 14px Arial;	font-weight: bold;	text-decoration: none;	border: 1px solid #ffd50f;	float: left; }#menu2 { width: 950px; height: 25px;  background:url(www/images/menu2.gif) left no-repeat #FFCC00;}#content{   width:100%;   height: 800px;     width: 95%;   margin-left: 3%;   margin-top: 15px;    }#right{ background:url(www/images/right.gif);   width:13%;   float:left;   margin-left: 2%;   height: 450px;   padding: px;  }.okno { height:90px; width: 90px; margin-left: 15px; margin-top: 40px; border:#FFFFFF solid 1px; }#lev{   height:auto;   width: 85%;   float:left;   }#punkt1 { width:100%; height: 350px; background:url(www/images/punkt1.gif)}#1 { float: left; width: 80.5%; height: 350px; }#2 { float:left; width: 150px; margin-left: 1%; height: 350px;}	#punkt2 { width:100%; height: 400px; margin-top: 15px; background: url(www/images/punkt2.gif) center no-repeat;}#3 { width: 40%; float:left; height: 400px;}#4 { width:55%; float:left; margin-left: 5%; height: 400px;}#buttom{    width: 100%;   height: 200px;   border: medium;   background: #eebc43;}A {text-decoration: none;}img {border: none;   //рамка вокруг изображений нам не нужна}</style></head><body>	<div id="main">		<div id="hider">					<div id="vhod"></div>				</div>		<div id="menu1">			<div class="blok">				<div class="menu">					<a class="knopka" href="o_nas.html">На главную</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">О нас</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Портфолио</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Галерея</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Контакты</a>				</div>				<div class="menu">						<a class="knopka" href="o_nas.html">Статьи</a>				</div>			</div>		</div>				<div id="content">			<div id="lev">				<div id="punkt1">					<div id="1"></div>					<div id="2">					</div>				</div>				<div id="punkt2">					<div id="3"></div>					<div id="4"></div>				</div>			    </div>		<div id="right">			<div class="okno"><img src="www/images/galery/Cherry_artema.jpg" width="90" height="90"/></div>			<div class="okno"><img src="www/images/galery/img131.jpg" width="90" height="90" /></div>			<div class="okno"><img src="www/images/galery/kabuki kolon.jpg" width="90" height="90"/></div>														</div>			</div>			<div id="menu2">				<div class="blok2">					<div class="menu"><a class="knopka" href="o_nas.html" >На главную</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">О нас</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">Портфолио</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">Галерея</a></div>					<div class="menu"><a class="knopka" href="o_nas.html">Контакты</a></div>					<div class="menu">	<a class="knopka" href="o_nas.html">Статьи</a></div>				</div>						<div id="buttom"></div>			</div>	</div></body></html>



И сова проблема :( немогу разобратся почему <div id="buttom"></div> не растягивается на весь экран?!
В CSS прописал:

#buttom{    width: 100%;   height: 200px;   border: medium;   background: #eebc43;}

А он не растягивается :) , подскажите...
И еще вопрос>> почему слева остается белый зазор? ;) ?
  • 0

#6

Поделиться сообщением #6



Bender

Bender
  • Неактивные
  • 712 сообщений
  • Репутация: 0

Отправлено 10 Декабрь 2008 - 15:17

Сайт открывается пустой страницей т.к нет закрывающего тега </style>
  • 0

#7

Поделиться сообщением #7



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 374 сообщений
  • Репутация: 2

Отправлено 10 Декабрь 2008 - 15:40

спасибо большое! эх эта невнимательность:-(


  • 0

#8

Поделиться сообщением #8



ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 10 Декабрь 2008 - 19:59

Ничего не вижу, сайт не открывается... Ты намудрил с кодом. Нет ни </style>, ни </head>, ни <body>...</body>, ни </html>.
Испралвяй!
  • 0

#9

Поделиться сообщением #9



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 374 сообщений
  • Репутация: 2

Отправлено 10 Декабрь 2008 - 21:06

Странно а у меня все открывается :( , и теги есть ... попробуйте пож еще раз глянуть
http://vladislav.dokunin.pochta.ru/

Прикрепленные файлы

  • Прикрепленный файл  index.html   4,15К   Количество загрузок: 112

  • 0

#10

Поделиться сообщением #10



Вячеслав

Вячеслав
    Topic Starter
  • Пользователь
  • 374 сообщений
  • Репутация: 2

Отправлено 13 Декабрь 2008 - 00:32

Подскажите... почему страница отображается с белым отступом слева гдето около 2px? не могу понять ведь общая таблица с параметром width: 100% :)

И еще хотел узнать у тех у кого монитор 19-22дюйма как у вас на мониторе окно отображается, есть горизонтальная прокрутка или нет? :( сайт здесь http://reklama.donbass.pochta.ru/
Спасибо!
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru