Создание начального макета

Livandey · June 21, 2011

Нужно создать вот такой вот макет

что бы было без разделения (линий) между частями.

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

Работаю в Adobe Dreamweaver CS5

заранее благодарна всем.

Livandey · July 14, 2011

Softlink, спасибо. почитать почитала... вроде разобралась, а вроде и нет. теперь у меня изображения не видно, они почему-то пропадают....((

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cайт</title>
<style type="text/css">
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* цвет фона */
	z-index: 3; /* позиция */
	background-color: #036;
   }
#logotip {
	min-width: 950px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(comnex/images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 925px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 3; /* цвет фона */
	background-color: #CF3;
}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	clear: both;
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
    background-color: #FFCC00;
    color: #000000;
    height: 300px;
    margin: 30px 460px 30px 30px;
}
.fon1{
	background-image: url(comnex/images/%D0%B8%D0%B7/5.jpg);
	background-repeat: repeat-y;
	z-index: 1;
}
.fon2{
	background-image: url(comnex/images/%D0%B8%D0%B7/4.jpg);
	background-repeat: repeat-y;
	z-index: 1;
}
.fon3{
	background-image: url(comnex/images/%D0%B8%D0%B7/7.jpg);
	background-repeat: repeat-y;
	z-index: 1;
}
.fon4{
	background-image: url(comnex/images/%D0%B8%D0%B7/6.jpg);
	background-repeat: repeat-y;
	z-index: 1;
}
.fon5{
	background-image: url(comnex/images/%D0%B8%D0%B7/8.jpg);
	background-repeat: repeat-y;
	z-index: 1;
}
</style>
</head>

<body>

<div id="container">
  <div id="logotip"></div>
  <div id="kontent">
    <div align="center">
      <table cellspacing="0">
        <tr>
          <td class="fon2"></td>
          <td> </td>
          <td class="fon3"></td>
        </tr>
        <tr>
          <td class="fon1"></td>
          <td><div id="menu"></div>
          <div id="foto"></div>
     <div id="info"> 
       <p>Главная страница</p>
       этот блок растянется до нужных размеров под вставленную в него информацию и станет нормальный ширины даже при большом формате монитора.
     </div></td>
     <td class="fon1"></td>
        </tr>
        <tr>
          <td class="fon4"></td>
          <td> </td>
          <td class="fon5"></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="niz">
  <div align="center">© 2011</div>
</div>
</div>
</body>
</html>

Edited July 14, 2011 by Livandey

Livandey · July 14, 2011

Задачу с невидимостью изображения решила сама...

просто добавив ширину.

теперь еще одна проблемка, между вставленными в таблицу изображениями видны небольшие белые промежутки, как их можно убрать?

уже сама все сделала. просто добавила такие параметры:

border="0" cellspacing="0" cellpadding="0"

Edited July 14, 2011 by Livandey

Softlink · July 15, 2011

Ну вот и замечательно, когда вы это делали, я уже крепко спал

Livandey · July 16, 2011

Softlink,))

у меня новая проблема, не получается fon7 растянуть, что бы заполняло нижнюю линию....

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>сайт.ru</title>
<style type="text/css">
body {
	color: #FFF; /* цвет текста */
	background-color: #FFF; /* цвет фона */
	margin: 0 auto; /* выравниваем макет по центру */
}
#container {
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1310px; /* максимальная ширина макета */
	margin: 0 auto; /* выравниваем макет по центру */
	height: 800px; /* цвет фона */
	z-index: 4; /* позиция */
	background-color: #036;
   }
#logotip {
	min-width: 950px; /* минимальная Ширина макета */
	max-width: 1307px; /* максимальная Ширина макета */
	height: 260px; /* высота */
	background-color: #FFF; /* цвет фона */
	z-index: 1; /* позиция */
	margin: 0 auto; /* выравниваем макет по центру */
	background-image: url(comnex/images/1.jpg); /* изображение */
	background-position: center top; /* положение изображения */
}
#menu {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 925px; /* ширина макета */
	height: 89px; /* высота */
	background-color: #69F; /* цвет фона */
	z-index: 1; /* позиция */
}
#kontent {
	margin: 0 auto; /* выравниваем макет по центру */
	min-width: 950px; /* минимальная ширина макета */
	max-width: 1200px; /* максимальная ширина макета */
	height: 500px; /* высота */
	z-index: 3;
}
#niz {
	margin: 0 auto; /* выравниваем макет по центру */
	width: 300px; /* ширина макета */
	height: 30px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FFF; /* цвет фона */
	color: #000; /* цвет текста */
}
#foto {
	width: 400px; /* ширина макета */
	height: 300px; /* высота */
	z-index: 1; /* позиция */
	background-color: #FF3; /* цвет фона */
	float: right; /* выравнивание справа */
	clear: both;
	margin-top: 30px; /* отступ сверху */
	margin-right: 30px; /* отступ справа */
	margin-bottom: 30px; /* отступ снизу */
	margin-left: 15px; /* отступ слева */
}
#info {
    background-color: #FFCC00;
    color: #000000;
    height: 300px;
    margin: 30px 460px 30px 30px;
}
.fon1{
	background-image: url(comnex/images/%D0%B8%D0%B7/5.jpg);
	background-repeat: repeat-y;
	z-index: 1;
	width: 11px;
}
.fon2{
	background-image: url(comnex/images/%D0%B8%D0%B7/4.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon3{
	background-image: url(comnex/images/%D0%B8%D0%B7/7.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon4{
	background-image: url(comnex/images/%D0%B8%D0%B7/6.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon5{
	background-image: url(comnex/images/%D0%B8%D0%B7/8.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	width: 11px;
}
.fon6{
	background-image: url(comnex/images/%D0%B8%D0%B7/9.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	height: 11px;
	width: 18px;
}
.fon7{
	background-image: url(comnex/images/%D0%B8%D0%B7/10.jpg);
	background-repeat: repeat-x;
	z-index: 1;
	height: 11px;
	width: auto;
}
.fon8{
	background-image: url(comnex/images/%D0%B8%D0%B7/11.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	height: 11px;
	width: 18px;
}
</style>
</head>

<body>
<div id="container">
  <div id="kontent">
    <div align="center">
      <table border="0" cellspacing="0" cellpadding="0">
      </table>
      <div id="container2">
        <div id="logotip"></div>
        <div id="kontent2">
          <div align="center">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="fon2"></td>
                <td> </td>
                <td class="fon3"></td>
              </tr>
              <tr>
                <td class="fon1"></td>
                <td align="right"><div id="menu"></div>
                  <div id="foto"></div>
                  <div id="info">
                    <p>Главная страница</p>
                    этот блок растянется до нужных размеров под вставленную в него информацию и станет нормальный ширины даже при большом формате монитора. </div>
                <td class="fon1"></td>
              </tr>
              <tr>
                <td class="fon4"></td>
                <td> </td>
                <td class="fon5"></td>
              </tr>
            </table>
          </div>
        </div>
        <div id="niz">
          <div align="center">© 2011</div>
        </div>
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="18px" class="fon6"></td>
            <td width="100%" class="fon7"></td>
            <td width="18px" class="fon8"></td>
          </tr>
        </table>
      </div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr></tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

Edited July 16, 2011 by Livandey

Softlink · July 17, 2011

.fon7{
        background-image: url(comnex/images/%D0%B8%D0%B7/10.jpg);
        background-repeat: repeat-x;
        z-index: 1;
        height: 11px;
}

так заработает

Livandey · July 17, 2011

Softlink, благодарю =))) и вправду заработало)

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

я их хочу в #foto положить.

Edited July 17, 2011 by Livandey

Softlink · July 17, 2011

На здоровье!

Ничего не понял по поводу фото. Но подозреваю, что это надо делать на js, коим я не владею. Поэтому здесь помочь вам не смогу.

Livandey · July 17, 2011

благодарю за подсказку, тогда обращусь в раздел JavaScript)))

Sign In

Создание начального макета

Question

Livandey

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Livandey

Link to comment

Share on other sites

Livandey

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Livandey

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Livandey

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Livandey

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information