Rambler's Top100
, : |

! : http://dreamweaver.net.ru/new-forum/

| FAQ | | |

фон макета поменять
1, 2  .
 
  ,         .     ,        .     Форум Macromedia Dreamweaver -> Работа с Dreamweaver
 
zedart
Новичок

Новичок


: 26

: 09.04.2013
: 9

: 09, 2013 5:43 pm     : фон макета поменять

создаю новую html, выбираю макет какой нибудь, и как поменять фон макета ? и как ширину столбцов в макете менять ? наверное это нельзя сделать, другой вопрос , создал страницу написал на ней что нужно как её изменить а именно добавить фрейм ? или надо новую создавать с фреймом и перекидывать все инфу туда ?
admin
Администратор

Администратор


: 40

: 10.08.2004
: 1717
: Ukraine

: 10, 2013 5:55 pm     :

Макет - это что?
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 12, 2013 3:04 am     :

Давайте уточним Ваш вопрос...
Вы спрашивали об этом:

http://www.alexander519151.ru/Admin/pic7.png

Красным выделил уточнение вопроса.
А зеленым то, что лучше всего делать. (CSS отдельно.)

Напишите подробнее.

С Уважением Александр.
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 12, 2013 3:59 am     :

Если нажать "Создать" и речь идет именно об этом, см скрин (pic8).
На скрине видно, мы находимся в режиме кода и к нашей странице подключена CSS (см. скрин с (pic7), выделил зеленым). Активна (выбрана). название генерируется автоматически (можно переименовать), но тогда и изменить строку подключения в тэге хэд.

http://www.alexander519151.ru/Admin/pic8.png

Здесь все и меняем. Читаем, что к чему относится, меняем, смотрим, меняем и т.д.

А вот способ лучше:
Ведь у нас есть такой замечательный инструмент для работы по созданию сайтов, как Dreamweaver.

- Переходим в режим ДИЗАЙН (при выключенном Live-просмотре)
- Вабираем тег ДИВ (см скрин pic11) я подчеркнул

http://www.alexander519151.ru/Admin/pic11.png

у нас появилось выделение нашего блока синим.
- подводим мышку к краю и видим параметры (см. скрин pic9) стрелочка указывает на край синего блока.

http://www.alexander519151.ru/Admin/pic9.png

нужно несколько параметров, хотя одного было бы достаточно.
1 - название самого класса (.sidebar1)
2 - сам тэг ДИВ
3 - ширина блока 30%

Переходим в таблицу стилей и находим наш класс (.sidebar1)
проверяем ширину, и рядом видим названия соседних классов (.content) (.sidebar2), запоминаем строку (пригодится.) в нашем случае (62)
см. скрин (pic10)

http://www.alexander519151.ru/Admin/pic10.png

меняем под наши параметры.
______________________________________________________
а именно добавить фрейм ?
с фреймами не работаю, не подскажу.
________________________________________
В данном примере нет фреймов. - Это блочная бодель.

Будут вопросы - задавайте, постораемся помой.

С Уважением Александр.
zedart
Новичок

Новичок


: 26

: 09.04.2013
: 9

: 13, 2013 11:51 am     :

Спасибо за помощь Александр, по настоящему узнал много нового
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 13, 2013 12:56 pm     :

Всегда рад помочь. Будут вопросы - задавайте.

С Уважением Александр.
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 14, 2013 10:15 pm     :

Здравствуйте, еще два дополнения, первое очень важное, второе просто совет.
Как я говорил в начале, имя таблицы стилей генерируется по умолчанию и Вы можете переименовать в любое другое имя. (соответственно без пробелов, слитно или через нижнее подчеркивание).
На скрине я выделил имя присоединенной таблицы стилей и строку подключения.

http://www.alexander519151.ru/Admin/pic12.png

Если переименовали таблицу стилей, то проверьте имя в строке подключения.

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

Второй момент - это совет:
Сохраняйте таблицы стилей отдельно в папке CSS и называйте их понятным для Вас именем.
Можно и в одну css все впихнуть, но это очень не удобно и приходится искать нужное место достаточно долго (если у Вас огромное количество строк).
У меня так, см. скрин.

http://www.alexander519151.ru/Admin/pic13.png

Очень удобно и быстро. На скорость работы сайта (на скорость загрузки и открытия страниц) никак не влияет.
А так же отдельно и скрипты (но не все, т.к. некоторые отказываются работать в отдельном файле.)

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

Да, вот еще один момент, строки подключения должны иметь правильный путь. Т.е. именно туда, где находится файл.
Это
либо
(путь относительно файла),
либо
(путь относительно корня сайта).
У меня все пути (относительно корня сайта).

Вот, пока все.

С Уважением Александр.
zedart
Новичок

Новичок


: 26

: 09.04.2013
: 9

: 16, 2013 9:00 pm     :

как текст на новую строку перенести, при помощи энтер или <p> он переносится но межджустрочный интервал становится большой не как в тексте, а мне нужно что бы интервал остался как в тексте просто строку перенести так как в браузере не так отображается
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 16, 2013 10:36 pm     :

Здравствуйте.
Чтобы просто перенести строку нужен тег переноса <br>
он одиночный и не требует закрывающего. просто <br>
и следующая строка будет с новой строки.
Все это делается в режиме кода.
вот скрин: (кода) красным выделил теги, зеленым слова, которые начинаются с новой строки (что бы увидеть в браузере)

http://www.alexander519151.ru/Admin/pic14.png

вот скрин (из браузера) зеленым подчеркнул слова, которые начинаются с новой строки в том же абзаце.

http://www.alexander519151.ru/Admin/pic15.png

Тег <p> является блочным элементом. Всегда начинается с новой строки и после него тоже все элементы начинаются с новой строки. (если не используется свойство Float). А в данном примере используется, поэтому текст обтекает картинку. Точнее видео.

вот пример:
без float:
http://www.alexander519151.ru/Admin/pic16.png

вот пример с float-right: (еще рамка и другие свойства)
http://www.alexander519151.ru/Admin/pic15.png
про это свойство отдельно, если кому интересно будет. (спрашивайте)

С Удовольствием Александр.
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 16, 2013 10:56 pm     :

дополнение:
По умолчанию у тега <p> есть отступы до абзаца и после.

Еще было бы очень красиво и правильно начинать абзац с красной строки. (с отступом отметил красным) или (с выступом отметил зеленым):

http://www.alexander519151.ru/Admin/pic17.png

Для этого в таблице стилей (а она у нас отдельно)(как я и говорил в первом ответе) нужно прописать нужные свойства:

отступ (определение класса не нужно)
p {
text-indent:20px;
margin-left:10px;
margin-right:10px;
}

первое свойство - отступ красной строки
второе и третье - отступы справа и слева.


выступ (создается отдельный класс)
.note {
text-indent:-40px;
margin-left:60px;
text-align:justify;
}
первое свойство с отрицательным значением. Будет выходить за край блока или даже экрана, поэтому используем:
margin-left:60px;
в результате, весь абзац будет на 60 px; отступать от левого края (блока), а красная строка (с выступом) будет на 40px; выступать от абзаца, тем самым, начинаться будет с отступом от края блока (в котором она находится.) в 20px;

вот скрин:

http://www.alexander519151.ru/Admin/pic17.png



! Нужно прописывать некоторые свойства конкретно.
т.е. у браузера по умолчанию есть некоторый отступ справа и слева. Но для правильного отображения в браузере мы прописываем:

body {
margin:0;
padding:0;
background-image:url(/img/bg_white_leather.png);
background-attachment:fixed;

font-family:Verdana, sans-serif;
font-size:10px;
color: #000;
text-align:justify;
}

(margin:0; padding:0Wink - отступы внешний и внутренний
(background-image:url(/img/bg_white_leather.png); - фоновая картинка
(background-attachment:fixed;) - очень интересное свойство к фоновой картинке. Не прокручивать.
(text-align:justify;) - выравнивание текса по ширине.

Это своего рода, некоторое обнуление (можно использовать специальный сброс стилей), я пробовал, некоторые теги перестают работать. После удаления того, что мне не нужно - осталось только это.

margin:0;
padding:0;

И еще нужно прописать вид ссылок (хоть и по умолчанию у браузера есть эти свойства, но нужно их прописать)
Каждый браузер пользуется своими правилами. В большинстве случаев они похожи
Ладно, это я уже начал углубляться.
Надеюсь помог.

Форум хороший и никого не интересует уровень знаний.
Ведь Мы все когда-то многого не знали.
Поэтому, спрашивайте, поможем.

С Уважением Александр
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 16, 2013 11:17 pm     :

немного о свойстве float

указывается в таблице стилей (css)
применяется к любому объекту.
.border_right {
float:right;
border:ridge 7px #009900;
border-radius: 5px;
margin: 10px;
}
класс назвал так, чтобы было понятно. применить рамку, выровнять объект по правому краю.

- float:right; - выравнивает объект по правому краю и соответственно разрешает обтекать себя по левому краю (как бы наоборот), (запомнить легко)
- border:ridge 7px #009900; - вид рамки, толщина, цвет.
- border-radius: 5px; - радиус скругления краев у рамки. Желательно прописывать с учетом, для каждого браузера, Но в последнее время этого достаточно. Проверяю в 7-ми браузерах.
- margin: 10px; - отступ от этого элемента в 10px;

вот скрины (повторюсь)
без float:
http://www.alexander519151.ru/Admin/pic16.png

вот пример с float-right: (еще рамка и другие свойства)
http://www.alexander519151.ru/Admin/pic15.png

а вот скрин кода с float left:

http://www.alexander519151.ru/Admin/pic18.png

а вот в браузере:

http://www.alexander519151.ru/Admin/pic19.png

все!

С Уважением Александр.
zedart
Новичок

Новичок


: 26

: 09.04.2013
: 9

: 20, 2013 9:27 am     :

что я делаю не так ?http://hostingkartinok.com/show-image.php?id=896bd2b2de7b796fc8c1cfa61ccd5ad6
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 20, 2013 3:39 pm     :

пишу сообщение в треттий раз, первый раз случайно закрыл браузер (открытие с пустой страницы), второй раз очищал кэш (браузер закрывается автоматически).

Давайте по порядку.
На скрине нет начала документа. первая строка идет с подключения css
Далее идут стили floal. их здесь быть не должно. Они должны быть в css.
даже если скрипт или какой-то стиль на странице, то должен быть в заголовке страницы в теге <head>
и там же подключение css? кроме того стили заключаются в тег <style>(здесь перечислены стили)</style>
Но все стили указываем в css.
подробно на скрине
http://www.alexander519151.ru/Admin/pic27.png
создаем новый документ html5 и подключаем css
У Вас может быть другой набор.
http://www.alexander519151.ru/Admin/pic28.png

что касается Вашего примера вот код html
http://www.alexander519151.ru/Admin/pic29.png
код css
http://www.alexander519151.ru/Admin/pic30.png
вот в режиме дизайн
http://www.alexander519151.ru/Admin/pic31.png

и Вот исходники если нужно. полностью готовая страница, изменяйте для своего сайта. Исходники моего сайта.
здесь index.html, и все подключенные css и js соответственно в папках. Ссылки работать не будут, т.к. нет тех страниц на которые они ссылаются. Здесь только один файл index.html, css и скрипты.
Кстати скрипты могут пригодится.
Несколько часов назад вышла новая библиотека jQuery 2.0 Но уже не поддерживает старые браузеры и ограничена поддержка IE 8,9
В архиве jQuery 1.9.1.
- скачайте архив,
- распакуйте в любую папку,
- переместите в папку локального сервера.
в результате будет папка (moysite), которая содержит папку (www), в ней файл index.html и папки css? js и т.д.
Но лучше переместить ее в папку локального сервера в (home) тогда можно открывать в браузере без Dreamweaver'a
http://www.alexander519151.ru/Admin/moysite.rar

По поводу мета тегов:
<meta name="keywords" content="в кавычках указываем ключевые слова не более 1000 символов">
<meta http-equiv="keywords" content="в кавычках указываем ключевые слова не более 1000 символов">
<meta name="description" content="в кавычках указываем описание сайта не более 200 символов">
<meta http-equiv="description" content="в кавычках указываем описание сайта не более 200 символов">
<meta name="robots" content="all"> (- индексировать сраницу)
<meta name="Author" content="Александр Муромцев"> (- автор)
<meta name="copyright" content="Александр Муромцев"> (- авторское право)
<meta name="Reply-to" content="Alexander519151@mail.ru"> (E-mail)
<meta name="revisit-after" content="10 days"> (- рекомендация роботу), (это только рекомендация, роботы сами решают)

Данные взяты из справки поисковой системы google и yandex

Ходят много мнений о том, что они уже не нужны. Верно, но google и yandex еще сами не определились что с ними делать. сами поисковики пока не обращают на них внимания (из опыта), Но не помешают.
Смотрите исходники, спрашивайте.

С Уважением Александр.
zedart
Новичок

Новичок


: 26

: 09.04.2013
: 9

: 26, 2013 3:00 pm     :

хочу сделать стиль, в котором отступи прописываются, если делаю так
@charset "utf-8";
.pp {text-indent:20px;
margin-left:10px;
margin-right:10px;
}
то не работает
а так работает но float немного мешает
@charset "utf-8";
.float_left {
float:left;
}
p {
text-indent:20px;
margin-left:10px;
margin-right:10px;
}
как сделать стиль с отступами не используя флоат, уверен что наиглупейший вопрос, но не могу понять как делать, или можно не используя стили, пробелы понаставить там где надо, что бы отступы не прописывать ?
Александер
Знакомый

Знакомый


: 40

: 07.03.2012
: 88
: Греция, о. Крит

: 26, 2013 5:56 pm     :

Вопрос не глупый, чем больше спрашиваете, тем больше знаете.
Давайте разберем все по порядку.
:
@charset "utf-8"; -(в css это не нужно. Не влияет ни на что, просто лишнее)
.pp {text-indent:20px;
margin-left:10px;
margin-right:10px;
}

-(здесь указано имя класса .pp, что бы оно работало его нужно присвоить к элементу)


Имя класса всегда начинается с точки.
вот скрин исходного кода с присвоенным классом:
http://www.alexander519151.ru/Admin/pic32.png
вот скрин исходного кода css определяющего свойства данного класса:
http://www.alexander519151.ru/Admin/pic33.png
вот как выгдядит в браузере:
http://www.alexander519151.ru/Admin/pic34.png

Далее:
:
.float_left {
float:left;
}
p {
text-indent:20px;
margin-left:10px;
margin-right:10px;
}

здесь у Вас указанно имя класса (.float) и свойства параграфа (p)

Если мы указываем имя класса - мы должны его присвоить какому-то элементу (как я уже говорил выше)
Если указывать просто p или h1 или table - это мы указываем свойства для тегов.
Соответственно указав свойства для (p) - мы указываем свойства тега параграфа
Соответственно указав свойства для (h1) - мы указываем свойства для тега заголовка

Имя класса может быть любым, например
.moy_klass1 {здесь свойства}
и что бы его использовать нужно его присвоить к нашему элементу.

Так же можно указать любые имена и если они совпадут со стандартными тегами - то эти теги будут использовать свойства этих классов.
Если не совпадут, то это будет новый тег.
Соответственно указав:
teg1 {здесь перечислить свойства}
И заключив объект в указанный тег <teg1>здесь наш текст</teg1>
То данный объект будет использовать свойства указанного тега.

:
как сделать стиль с отступами


Если нужно использовать один стиль для всего сайта (что касается параграфа):
-красная строка
-отступы
Переопределяем тег параграфа (как вы и указали):
:
p {
text-indent:20px;
margin-left:10px;
margin-right:10px;
}


Если нам будет нужно определить стиль для какого-то конкретного объекта, к примеру тоже текст (и не важно где он находится, в другом теге или в параграфе) и у него будут свои свойства.
- отступы
- размер шрифта
- цвет
- и т.д.
То создаем новое имя класса, начиная с точки.
.pp {здесь свойства}
и присваиваем этот класс к нашему элементу.

Вот повтор скрина исходного кода, где в параграфе присвоенно другое имя класса и этот текст использует свойства указанные в имени присвоенного класса

http://www.alexander519151.ru/Admin/pic32.png

Какое свойство ближе к объекту, то и будет использоваться, если они пересекаются.
к примеру:
в теге параграфа у нас цвет текста красный, размер 20px;
в имени класса мы указали цвет зеленый, а размер не указали
соответственно сам параграф будет красным цветом с размером на 20px;
а элемент с именем класса будет зеленым цветом и тоже размером на 20px;
Т.к. свойства унаследуются. как я написал на скрине исходного кода css

http://www.alexander519151.ru/Admin/pic33.png

в теге body указан отступ в ноль
в теге параграфа указан отступ в 10px;
а в классе .note указан отступ слева в 60px;

В данном случае класс .note ближе к объекту (в нашем случае к параграфу к которому он присвоен)

Что касается float
Я указываю некоторые имена классов по их свойствам. Так легче ориентироваться.
Если объект только выровнен вправо или влево и нужно, что бы текст его обтекал - Я указываю имя класса .float
Может быть любым .viravnivanie_vpravo_s_obtekaniem
или .right
или .po
Это не важно, главное как Вам легче запомнить.
Вот еще пример
.border_shadow соответственно рамка с тенью.

Я указал в примере имя класса .float_left с одним свойством float:left - я знаю, что указанный объект будет выровнен влево с обтеканием.
Т.к. есть еще .float_right с одним свойством float:right, соответственно на оборот.

Все.
____________________________

Как Вы с исходниками разобрались?
Помогли они Вам?

_______________________
С Уважением Александр.
:   
  ,         .     ,        .     Форум Macromedia Dreamweaver -> Работа с Dreamweaver : GMT + 2
1, 2  .
1 2

 


Powered by phpBB © 2001, 2005 phpBB Group
phpBB


/ : 134918 / 0

Rambler's Top100 @Mail.ru