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

Реферальная программа Мегаплана


Как разместить содержимое сайта на макете

#1 Span415

Span415
  • Пользователь
  • 87 сообщений
  • Репутация: 6
0

Отправлено 28 Июнь 2012 - 23:59

у меня есть готовый шаблон для сайта ( изображение ). На нем изображены бар ( карта ), основное меню ( карта ) и поле для текстового содержимого. Все это одно изображение размером в 1028х900 пикселей.
Обьясните подробно пожалуйста как мне разместить содержимое сайта на этом макете ( с помощью таблиц хтмл, ксс позиционирования, каких то скриптов или еще черт знает чего ).
Или я вообще неправильно делаю т.к. оформление сайта должно состоять из кучи отдельных изображений ( а не из одной картинки ) ???
Приведите пример как вы делаете пожалуйста.
Заранее спасибо

 

 

  • 0

#2 Kukus

Kukus
  • Пользователь
  • 134 сообщений
  • Репутация: 8

Отправлено 29 Июнь 2012 - 02:04

Чтобы сделать нормальный сайт недостаточно изображения 1028х900 пикселей. Вы можете обратиться за помощью на другой форум вебмастеров или же к Путину лично, но без знаний HTML и CSS ничего вменяемого у вас не получится. Рекомендую купить самоучители и потратить немного времени на изучение HTML и CSS. Когда вы получите хоть какие-то знания, тогда вы сможете задавать здесь правильные вопросы, ответы на которые действительно смогут вам помочь.
  • 1

#3 winston3d

winston3d
  • Пользователь
  • 135 сообщений
  • Репутация: 2

Отправлено 30 Июнь 2012 - 12:48

В принципе, некоторые делают как вы (одно изображение и всё), другие же это изображение режут на элементы. Как правило таким образом делают сайты-визитки (сайт состоит из 1-10 однотипных страниц)
Если вам лень резать свою картинку, то при помощи CSS можно легко разместить контент на вашем сайте, но могут быть проблемы с его отображением (криво и т.д).
Советую использовать какую-нибудь хорошую и лёгкую CMS-ку.
Если интересует как разместить контент на картинке с помощью CSS, то всё же нужно немножко почитать самоучителей. Вот общий принцип:
1) В CSS задаёте определённую область (её размер, расположение по вертикали и горизонтали, а так же слить текста и т.д)
2) Нужный контент помещаете в определённый стиль.

Вот пример:
нужно чтобы текст был по середине картинки
тогда в CSS задаёте Background-ом ваще изображение
body {
    background: url(../images/fon.png) no-repeat;
}
задаёте область текста
content {
    width: 100px; //ширина блока100 пикселей
    height: 100px; //высота блока 100 пикселей
    font: 13px Tahoma, Arial, Helvetica, Geneva, sans-serif; //задаётся стиль текста
    margin-top: 400px; //отступ сверху
    margin-left: 464px; //отступ слева
}

А в HTML файле пишете:
<bodu>
		   <div id="content">Ваш текст<div>
</body>

  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 30 Июнь 2012 - 18:55

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

Span415,
посмотрите, например, в соседнем форуме прикрепленную тему Урок верстки.
Там, конечно, есть небольшие ошибки да и сама методика верстки таблицами на сегодняшний день уже устарела, но для общего понимания того, как макет превращается в работающую веб-страничку, этот урок вполне сгодится.
  • 1

#5 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 30 Июнь 2012 - 19:02

поддерживаю предыдущего постера, еще от себя добавлю, есть готовые css фреймворки, на пример 960 grid system, она проста в освоении и облегчает во многом работу верстальщика.
живет тут http://960.gs/
почитать о том как использовать можно тут
http://www.simplecod...frejmvorki.html
http://habrahabr.ru/post/80915/
http://habrahabr.ru/post/70203/

возможно будет интересно http://www.masterweb...-css-framework/
  • 1


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