Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Adobe Dreamweaver cs3, как выровнять все страницу по центру 
:(
    Опции темы
AllYouNeedIsLove
Дата 10.10.2008, 09:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



Доброе время суток, господа мастера! Прошу помочь новичку, если у кого то найдется несколько минут выслушать. Заранее спасибо.

Я в вэб мэйкинге совсем не соображаю, просто понадобился для работы простенький сайт из нескольких страничек. Решил сам придумать дизайн и сделать его. Скачал наиболее удобный по отзывам Adobe Dreamweaver CS3, немного поковырялся в нем, инструкцию почитал. Вобщем сделал я первую страничку, решил сделать ее с помощью слоев АР. То есть структура такая - фон страницы, на нем большой слой АР примерно 1000 на 700 рх с фоновым рисунком и сверху несколько маленьких слоев АР - для кнопок меню и блоки с текстом. Друг относительно друга эти слои, как я понимаю неподвижны. Но вот в чем вопрос, все эти слои отображаются неподвижно не только друг относительно друга, но и по умолчанию прикреплены к левому верхнему углу. Так вот я думаю, как сделать так чтобы все эти слои выравнивались не по левому краю, а по центру? причем позиции друг относительно друга и сам размер их не менялся.  просто чтобы ВСЯ страница была по центру, а по бокам заполнялась фоном, если разрешение экрана пользователя больше чем ширина моей страницы. не смог найти такого где то в свойствах слоя, ни в свойствах страницы, наверно что то упустил. 

Буду благодарен, если кто то поможет, напишет так сказать "на пальцах" - куда зайти, чего нажать или какой куда тэг вставить.

Большое спасибо! 

PM MAIL   Вверх
urbanman
Дата 10.10.2008, 13:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 14
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



Фон чтоб растягивался надо его умно отверстать и указать 

body { background: url(images/bg.jpg) repeat center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;  position: relative;}
типа так. В данном случаии мой фон будет растягиваться от центра по краям в зависимости от разришения монитора...

А чтоб твой основной диз был по центру просто укажи главной таблице положение по центру допустим:
<table align="center" widht="1024px" height="100%"> - ширина должна быть фиксированой и равнять ширине твоего дизайна.

если помог нажимай + репутации smile


PM MAIL   Вверх
AllYouNeedIsLove
Дата 10.10.2008, 13:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



urbanman, дак у меня же не таблица и не изображение, а слой АР (не знаю, может "слой АР" только в dreamweaver такое есть понятие? хотя вряд ли). как я нашел в руководстве пользователя - это слой с абсолютным позиционированием. но это позиционирование по умолчанию - относительно верхнего левого угла. а как сделать чтобы было относительно центра?

да и команды если что подскажи куда эти вставить? я ж в коде не понимаю. у меня есть возможность его редактировать - только надо знать в какую строчку между чем и чем

Это сообщение отредактировал(а) AllYouNeedIsLove - 10.10.2008, 13:46
PM MAIL   Вверх
bars80080
Дата 10.10.2008, 14:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(urbanman @  10.10.2008,  13:29 Найти цитируемый пост)
если помог нажимай + репутации 


urbanman, он как и ты никому не сможет поднять репутацию

это во-первых, а во-вторых, у него хитрый вопрос по приложению, а не по обычной вёрстке.



в принципе, несколько прояснил. коли слои абсолютно позиционированны, значит они реально стартуют от левого верхнего угла первого не статического слоя. то есть тебе надо положить под весь свой сайт ещё один слой, шириной в максимальную тебе нужную ширину, имеющего относительное позиционирование position: relative; (догадываюсь слой PP), его нужно отцентровать внутри тэгов body (скорее всего у тебя там есть такая кнопка, как в ворде), в вёрстке это задаётся text-align: center;
плюс ещё надо задать автоматические поля по бокам для этого слоя PP (margin: 0 auto;).
в этом случае слой PP отцентрируется, а все твои слои AP будут опираться на его левый верхний угол

Цитата(AllYouNeedIsLove @  10.10.2008,  13:44 Найти цитируемый пост)
"слой АР" только в dreamweaver такое есть понятие? 

ага, да и мало кто верстает с помощью хитроумных программ

Это сообщение отредактировал(а) bars80080 - 10.10.2008, 14:42
PM MAIL WWW   Вверх
urbanman
Дата 10.10.2008, 14:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 14
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



Че это вообще за понятие АР ?
PM MAIL   Вверх
bars80080
Дата 10.10.2008, 14:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(urbanman @  10.10.2008,  14:43 Найти цитируемый пост)
Че это вообще за понятие АР ? 

absolute position
PM MAIL WWW   Вверх
AllYouNeedIsLove
Дата 10.10.2008, 15:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



bars80080, большое спасибо, я попробую

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

что то типа:

...
<body
(тут видимо должен начаться слой РР и все его свойства)
(затем мой первый слой АР)
...
...
...
</body> 

спасибо! 
PM MAIL   Вверх
bars80080
Дата 10.10.2008, 16:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Код

<body align="center">
(тут видимо должен начаться слой РР и все его свойства)
<div style="position: relative; width: 800px; margin-left: auto; margin-right: auto;">
(затем мой первый слой АР)
...
...
...
</div> - обязательно закрыть слой PP
</body> 
как-то так
PM MAIL WWW   Вверх
AllYouNeedIsLove
Дата 10.10.2008, 16:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



bars80080, большое спасибо, я попробую сегодня попозже

 smile 
PM MAIL   Вверх
AllYouNeedIsLove
Дата 10.10.2008, 22:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 10.10.2008

Репутация: нет
Всего: нет



уважаемый bars80080!

совет действительно помог, правда детали немного отличались, но это неважно.

но в dreamweaver в режиме просмотра и редактирования html кода свойства слоев АР выносятся отдельно за body и выглядят след образом:

......
<style type="text/css">
<!--
#apDiv1 {
    position:relative;
    width:700px;
    height:500px;
    z-index:1;
    padding: 10px;
    background-image: url(image/000.jpg);
    margin-right: auto;
    margin-left: auto;
}
-->
</style>


</head>
<body align="center">
 <div id="apDiv1">
  <div id="apDiv2"></div>
</div>
</body>
</html




напишу для тех, у кого такая же проблема. расскажу пошагово:

1 - создаем слой АР, по умолчанию создается абсолютно позиционированный, привязанный к верхнему левому углу, рисуем нужный по размеру, чтобы границы закрывали все последущие элементы на странице

2 - затем нажимаем формат просмотра "разделение" при котором виден html код создаваемой страницы, находим нужный фрагмент:

</head>
<body 
<div id="apDiv1">
</div>
</body>
</html


3 - в теге body вставляем align="center"> и получаем:

</head>
<body align="center">
<div id="apDiv1">
</div>
</body>

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

5 - дальше на ОК не нажимаем, а в этом же окне заходим на вкладку рамка и в разделе "Поле" (не "полЯ", а "полЕ"!) ставим слева auto и справа auto

и все! нажимаем ОК, сохраняем странцу и смотрим в браузере результат!
(чтобы его увидеть надо хотя бы фон в созданном слое сделать другого цвета чем основной фон, чтобы не сливался)


а затем, создавая новые слои (создаваемые по умолачнию абсолютно позиционированными), необходимо их закрепить за нашим созданным 
относительным слоем. для этого ставим курсор в поле относительного слоя (как будто мы собрались писать что то в нем) и затем нажимаем кнопку "новый слой АР" и рисуем слой внутри нашего относительного слоя. при этом новый абсолютный слой закрепится за верхним левым углом относительного. в коде это можно увидеть следующим образом:


<div id="apDiv1">
  <div id="apDiv2"></div>
</div>

то есть второй слой АР привязан к относительному слою РР
дальше также создаем новые слои внутри относительного.


спасибо всем кто хотел помочь и тем кто помог, особенно bars80080  

надеюсь тем кто с этим тоже столкнулся работая в adobe dreamweaver это пошаговое описание поможет)



P.S. мое мнение насчет слоев АР - с ними гораздо удобнее работать чем с таблицами или просто рисунками, если нужна просто статическая страница. взял, нарисовал любую требуемую область, хоть фон, хоть блок для текста, хоть просто для рисунка. поставил нужный фон, либо оставил прозрачным и все. при необходимости перетаскиваешь куда надо и никаких проблем. с вопросом выравнивания теперь тоже все ясно. эти слои, как я нашел в руководстве пользователя, даже можно в анимации использовать, задавать пути перемещения и временные интервалы.  так что мне это показались оч удобным.

Всем спасибо!  smile 
 
 
     
 
 


Это сообщение отредактировал(а) AllYouNeedIsLove - 10.10.2008, 22:47
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0638 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.