Создание Web-сайта в DW. Особенность работы в режиме сайта.

Dreamweaver визуальный редактор, то есть он позволяет редактировать HTML код сайта в визуальном режиме. Вы будете вводить какой-нибудь HTML код в одной половине окна, а на другой половине сразу получите готовый результат, т.е. Вы будете видеть результат выполнения команды, даже без отладки на браузере.

Вы можете радактировать его в окне Design, либо, если вы хорошо владеете языками HTML или PHP - в окне Code. Можно также разделить окно на две части по горизонтали или вертикали и в одной иметь внешний вид, в другой - код и переключаться между ними. Справа в окне программы вы видите вспомогательные окна вставки элементов страницы, CSS стилей, содержимое папки сайта, истории изменений и ряд других, появлением/скрытием которых можно управлять из меню Window. Внизу имеется окно свойств редактируемого в данный момент элемента.

Так же особенностью программы Dreaweaver является возможность создания сайта в окне Design или Режим сайта, достаточно всего лишь добавлять необходимые блоки(или таблицы), задавать им необходимые параметры, писать или копировать туда текст, и добавлять на страницу всё что хотите при помощи панели инструментов. Возможно использование шаблонов.

Визуальный интерфейс в DW, работа в режиме кода. Взаимодействие.

Dreamweaver визуальный редактор, то есть он позволяет редактировать HTML код сайта в визуальном режиме. Вы будете вводить какой-нибудь HTML код в одной половине окна, а на другой половине сразу получите готовый результат, т.е. Вы будете видеть результат выполнения команды, даже без отладки на браузере.

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

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

удобно расположена панель с элементами форм, не надо набирать код, можно просто перенести элементы на рабочую область программы; (и работать с их свойствами в панели свойств).

с открытием одной страницы одновременно открываются все вспомогательные страницы;

удобная работа со стилями: не понравится один стиль – тут же можно подгрузить другой и сразу визуально оценить, что и насколько лучше выглядит.

Работа в режиме кода:

Открывая скобки и вбивая первую букву автоматически выпадает список тегов, начинающихся с этой буквы. В окне мини-редактора можно поправлять теги, не трогая их содержимое.

Вы также можете " завернуть" любой выделенный фрагмент текста в тег HTML. Для этого выделите нужный текст и выберите в контекстном меню пункт Wrap Tag. Введите в появившемся окне нужный тег со всеми нужными атрибутами и нажмите клавишу < Enter>.

21.Каскадные таблицы стилей CSS (назначение, примеры использования).

 

Cascading Style Sheets. Каскадные таблицы стилей.

НАЗНАЧЕНИЕ

n Каскадные таблицы стилей позволяют задавать различные визуальные свойства HTML-элементам

n Таблицы стилей позволяют разделить смысловое содержимое и его визуальное представление.

n Появление CSS - 1997 год (css 1)
Сегодня – CSS 2
Разработка CSS 3

СИНТАКСИС

n свойство1: значение1;

n свойство1: значение1; свойство2: значение1;

n свойство1: значение1 значение2;

Примеры

n color: red; text-align: center;

n border: solid 0.2cm blue;

 

СВОЙСТВА CSS

n Шрифт (цвет, размер, тип, …)

n Текст (выравнивание, …)

n Фон (цвет, положение, рисунок, …)

n Блоки (тип, поля, …)

n Рамки (тип, толщина, цвет, …)

n Списки (тип, рисунок, …)

n Позиционирование

n Дополнительные (вид курсора, фильтры …)

 

Свойства форматирования шрифтов и абзацев с помощью CSS.

font-family

n serif

n sans-serif

n monospace

n cursive

n fantasy

font-family: “Arial Cyr”, Helvetica, sans-serif;

или

font-family: times, “Times new roman”, serif;

ПАРАМЕТРЫ

Font-style

n normal

n italic

n oblique (наклонный)

(Пример) p {font-style: italic; }

f ont-variant

n normal

n small-caps
(капители, т.е. прописными буквами пишут и маленькие и большие)

Font-weight

n 100, …, 900

n lighter(100), normal (400), bold (700), bolder (900)

 

ПРИМЕР p {font-variant: small-caps; font-weight: bold}

 

Сокращенная запись

q p {font: oblique 12pt " Helvetica Nue", serif; }
*** если в краткой записи задается шрифт, то обязательно должен быть задан и размер шрифта.

 

23.Cпособы задания цвета на основе CSS.

Задание цвета

q названием (red, green …)

q номером (#FA56AC, …)

q сокращенный номер (#F0F, …) аналог #FF00FF
(т.е. для безопасной палитры цветов)

q RGB-номером rgb(255, 0, 255)

q RGB-в процентах rgb(100%, 0, 100%)

q Пример

color: rgb(50%, 0, 100%)

 

24.Селекторы CSS.

 

Селекторы

Тег, к которому относятся свойства
P {color: red}
H1, H2, H3 {align: center}

 

Контекстные селекторы

n UL LI {color: blue}
свойство применяется к LI, если LI вложен в тег UL

q UL LI {color: red}

q OL LI {color: green}

n OL > LI {color: blue} дочерние
свойство применяется к LI, если LI непосредственно вложено в тег OL

Блоковая модель в CSS.

Знание блоковой модели CSS позволяет нам верстать сайты без использования HTML-таблиц. В языке HTML можно создавать различные блоки: заголовки, абзацы, таблицы и пр. Мы уже знаем, что каждый элемент HTML отображается в виде структурного или строчного блока. Однако в HTML нет возможности позиционировать ( точно размещать ) созданные блоки на странице. Все они располагаются друг за другом в той последовательности, в которой указаны в коде страницы. Пожалуй, единственным исключением являются рисунки, для которых в элементе IMG можно указать выравнивание по правому или левому краю, например: < IMG src=" picture.gif" align=" right" <

В этом случае изображение как бы " вырывается" из обычного потока элементов и выравнивается по правому краю страницы, а текст и другие элементы обтекают его слева.

В CSS имеется обширный инструментарий, позволяющий не только создавать блоки на основе любых элементов HTML, но и точно позиционировать их на экране. При этом таблицами пользоваться не нужно, код страницы становится более логичным, понятным и легко читаемым. Естественно, что и размер кода при использовании CSS в большинстве случаев становится меньше.

Таким образом, формирование страницы при помощи средств CSS сводится к следующему:

• создается блок и задаются его параметры;
• вновь созданный блок размещается (позиционируется) на странице.

каждый блок имеет контентную часть, в которой располагается содержимое блока: текст, рисунки, таблицы, т.е. любые требуемые элементы. Естественно, внутри блока могут располагаться и другие блоки, тогда они называются вложенными в первый, а сам этот первый блок будет являться контейнером для вложенных в него блоков.

 

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

 

Контентная часть блока может быть окружена отступами, рамками и полями. Для них могут быть установлены некоторые значения или они могут быть нулевыми. Блок имеет некоторую фиксированную ширину ( width ) и высоту ( height ). Общая ширина контейнера блока складывается из собственно ширины блока, ширины левых и правых полей, толщины левой и правой границ, а также левого и правого отступов.

Все параметры полей, границ и отступов можно задать при помощи соответствующих свойств. Подробно мы их уже рассматривали ранее. Ширина контентной части блока задается при помощи свойства width, высота - при помощи свойства height. Как вы помните, поля, границы и отступы по умолчанию имеют нулевое значение, поэтому изначально ширина блока совпадает с шириной контейнера.

Если для некоторого блока не заданы явным образом ширина и высота, то они будут равны ширине контейнера этого блока. Так, если внутрь элемента BODY поместить любые другие элементы, например абзац, то ширина этого блока будет равна ширине контейнера BODY, т.е. ширине самого окна браузера.

DW. Работа с AP элементами.

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

В Dreamweaver можно использовать элементы AP при создании макета страницы. Можно размещать элементы AP впереди или позади друг друга, скрывать некоторые элементы AP, в тоже время отображая другие элементы, а также перемещать элементы AP по экрану. Можно разместить фоновое изображения в одном элементе AP, а потом поместить впереди его другой элемент AP, содержащий текст с прозрачным фоном.

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

Dreamweaver создает элементы AP с помощью тега Div. При рисовании элементов AP с помощью инструмента «Рисовать слой AP», Dreamweaver добавляет в документ тег Div и назначает значения Div и id. Позже можно переименовать элемент AP Div с помощью панели элементов AP или инспектора свойств. Dreamweaver также использует встроенный CSS в заголовке документа, чтобы позиционировать элементы AP Div и назначать им точные измерения.

Можно изменять свойства элементов Div AP (или любого элемента AP) на странице, в т.ч. числе координаты x, y, z-index (называемым также порядком наложения) и видимость.

Позиционирование в CSS.

 

Свойства позиционирования CSS позволяют позиционировать элемент. Они также могут разместить элемент за другим, и указать, что должно произойти, когда содержание элемента является слишком большим.

Элементы могут быть расположены с использованием свойств top, bottom, left, и right. Однако, эти свойства не будут работать, до тех пор пока свойство position не указано в первую очередь.

Существуют пять различных метода позиционирования:

1) Статическое позиционирование

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

Статически расположенные элементы не зависят от свойств top, bottom, left, и right.

2)Фиксированное позиционирование

Элемент с фиксированной позицией позиционируется относительно окна браузера.

Он не будет двигаться, даже если окно прокручивается. Фиксированно расположенные элементы могут перекрываться другими элементами.

3) Относительное позиционирование

Относительно расположенный элемент распологается относительно его нормального положения.

Относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Это похоже на то, как если бы вы добавили элементу внешние отступы с помощью свойства margin.

4) Абсолютное позиционирование

Абсолютно-расположенный элемент расположен относительно к первому элементу родителя, который имеет положение, отличное от статического. Если такой элемент не найден, содержащим блоком будет < html>

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

5) Z-index:

Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение - ноль. Отрицательные значения также допустимы.

⇐ Предыдущая12345

Поделиться: