CSS Основы Adobe Dreamweaver

html и CSS Основы учебника в Adobe Dreamweaver

данное учебное пособие предназначено для представления концепций использования CSS в Adobe Dreamweaver и html для веб-дизайнеров, которые не знакомы с CSS в веб-дизайн. CSS означает каскадные таблицы стилей и системы для укладки добавить на свой веб-страниц и веб-страницы.

После прочтения этой CSS Tutorial вы должны иметь базовые ощущения, как использовать в CSS Dreamweaver. В этом учебнике мы создадим пустой документ, создать CSS укладка, А. А. Div вставить на страницу, вставить картинку, , а затем создать быструю навигацию меню и назначить CSS свойства элементов на странице. программы, используемые в данном руководстве, и это скриншоты Adobe Dreamweaver CS3.

Авраам chaffin CreativeCOW.net, Камбрия, Калифорния США © 2007 CreativeCOW.net. Все права защищены.

html Документы:
создать новый пустой документ, а затем сохранить ее для начала Вашей работы. Я, как правило, всегда сохранять документы, прежде чем делать что-либо я могу так быстро сэкономить время от времени, используя ярлык (cntrl + S). Когда вы создаете пустой документ Dreamweaver Ваш веб-страницы уже содержанием в нем, Вы просто не можете увидеть ее в режиме дизайна. Для просмотра содержимого можно использовать ссылку (cntrl + ~) для переключения между режимами дизайн и код режим или перейдите в меню Вид код или в меню Вид дизайн.

Что вы должны увидеть должна выглядеть примерно так:

Это начало рамках вашего html Документ, она застроена многих теги. в начале каждого тега выглядит этот и в конце каждого тега выглядит / настоящего. весь документ состоит из html Тег выше она выглядит html xmlns = " http://www.W3.org / 1999/xhtml " , поскольку он имеет xmlns модификатором в нем. в конце тега в самом конце этого документа / html. В период с начала и окончания html Тег Есть два основных тегов в head и тело теги. в head метки не видел, но материалы многих важных частей и модификаторов на то, что тело тегом элементы будут выглядеть. содержание в тело тега содержание, которое является на самом деле видна через ваш браузер.

CSS элементы:
прежде чем включить какие-либо элементы, давайте создавать стили CSS. прессования (SHIFT + F11) переключает стилей CSS кадр или пойти на изменение меню стилей CSS. В правом нижнем углу есть маленький значок, который выглядит . Таким образом, деятельность в â € œnew CSS ruleâ € диалогового окна. для начала давайте назначить CSS правила для тело метку и цвет фона белый внедорожник, а не резко белый. выберите пункт "метки" для "селектора типа" радио. от "метки" выпадающем меню выбрать "тело" селектор. выберите пункт "этого документа, только" за "определить" радио и нажмите кнопку "OK".

После того как вы нажали "OK" Dreamweaver добавляет код в вашу html Файл готовится изменить тело тега используя CSS.

Это также будет воспитывать "CSS правила определения органа" окно позволяет определить ваш выбор из "фона" в категории колонки и выбрать очень светло-желтого с фоновыми цветами или типа # ffffcc и нажмите "OK".

нажатия на кнопку "ОК", выполненный Dreamweaver изменить CSS тела селектор , включив фоне цветов собственность и Значение о # ffffcc.

Существуют и многие другие свойства можно возложить на орган селектор или вы можете изменить его, используя CSS стили кадр:

Div теги:
Возврат к разработке просмотра (cntrl + ~), и давайте вставить Div метки, перейдя в меню Вставка расположение объектов Div тег, это будет воспитывать â € œinsert Div Тага € диалогового окна. (DIV метки являются наиболее часто используемых тегов для проведения различных элементов веб-страницы разработаны с CSS, такие как изображения, Текст, и видео.)

первое поле в "вставить Div тегом" диалог окно вставки: поле. это поле, которое определяет, где Div тег будет вставлен в html страница. По умолчанию в нем его "в момент включения", которая означает Div тега будет установлена, когда курсор в последний раз на веб-странице. Вы можете также выбрать "после начала тегом" или "до конца метки" на месте вашего Div тегом в другом месте.

Далее вы найдете в "класс:"Поле, которое представляет собой поле, которое непосредственно связано с вашего CSS правил. в CSS класс селектор с периодом перед ним, например ".класс". Занятия для присвоить имущество или свойства многих элементов в веб-страницу. У нас нет классов, определенных еще в этом документе, так мы ничего не можем присвоить еще. Организация "ID:"Кроме того, поле пустым, поскольку Есть не идентификаторы определены в нашей CSS. Идентификаторы используются для присвоить имущество или свойства к одному пункту, в веб-странице и в CSS код фунта, прежде чем подписать его, такие как "ID #". Поскольку у нас ни один из этих кнопку "новых CSS стиль", и мы будем определять новое правило.

на этот раз выберите "класс" в качестве селектора типа, типа в "Coolкласс" в качестве, выберите пункт "этого документа, только" и нажмите кнопку "OK". Давайте установить цвет фона этого класса с прохладной голубой цвет, выбрав "фон" в соответствии с категориями и установление "Цвет фона" в нечто вроде # 00ccff. Теперь установите границы цвета с тонкой черной линией, нажав на кнопку "граница" в категорию, а затем выбирать твердые, как стиль в раскрывающемся и 1 пиксель, как ширина и черный (# 000000), как цвет. или вы можете быть более творческим, если вы выбираете. Теперь давайте немного установить прокладки в нашей правило, нажав на кнопку "окно" в колонке категории и типа "5" за "сверху: набивка "это будет присвоить обивка не только сверху, но и для всех сторон, если вы оставите" одинаковы для всех "флажок. Нажмите "OK", и Dreamweaver будет создан новый класс правилом в вашем CSS стиль метки с тремя свойствами.

Ваш "вставить Div тег" диалогового окна теперь тоже имеет свой класс населенных местах с "cooltag" - нажмите кнопку "OK", и Dreamweaver будет писать код в веб-страницу с места владелец текста внутри нового div тега.

Div этом будет наш класс, который мы создали, возложенных на Div метку, и все элементы внутри тега.

изображения:
Теперь давайте вставить картинку и назначить нашего класса на нее.
поставить курсор вне Div, щелкнув в любом месте за пределами его территории на веб-странице. из меню Вставка перейти на изображение (cntrl + Alt + I). выбрать любое изображение, которое Вы, возможно, имеющихся на вашем компьютере и нажмите кнопку "OK". Вы можете обойти следующем диалоговом окне нажать "OK"; Dreamweaver будет поместить изображения в веб-страницу. Щелкните правой кнопкой мыши на изображении и выберите из меню стилей CSS Coolкласс. это будет назначить заранее определить класс изображения; придавая ему цвет фона, набивка, и мы границы установленного на ".Coolкласс". Adobe Dreamweaver должны иметь вставки кода вроде этого:

мощность CSS:
Что делает CSS мощным является возможность вернуться и внести изменения в ваш стиль, и после его воздействия всех элементов, которые вы назначили в стиле. В CSS стили кадра вы должны увидеть "все правила", и ваш стиль ".Coolкласс". Нажмите на .Coolкласс селектор, а затем значение для фонового цвета (# 00ccff). использование цвета выбрать другой цвет, такие как (# 66ffff). Вы сейчас успешно используют CSS в Dreamweaver. Единственный код, который был изменен в CSS, и он был применен и к div и img.

Создание быстрого NAV меню
Теперь с содержанием в div тега мы будем разрывать его отдельно и превратить его в список навигации.

положить каждое слово на отдельной строке, нажимая вступить с вашим курсором inbetween каждое слово. выделить все слова, щелкните правой кнопкой мыши и выберите список Ненумерованный список. теперь у вас есть маркированный список, но мы должны применить некоторые укладка к ней, с тем мы должны создать правила.

нажмите кнопку Добавить CSS из стилей CSS кадр. Есть много способов присвоить стилю к списку, мы можем создать новый класс призыв что-то вроде ".Listкласс "и применить его к каждому LI тег сделать LI класс="LIstкласс" , но в этом примере мы создадим правило для всех LI метки. выберите "Дополнительно" и радио типа "LI" в поле селектора. "LI" стоит в списке. выберите пункт "этого документа, только" и нажмите кнопку "OK".

Давайте удалить пуля, сделать шрифт белого цвета и шрифт полужирный вес. с типом выбранной категории выбирать смелых от "веса" раскрывающееся и выбрать белый (# FFFFFF) для цветов. из перечня категорию выбрать ни один из "типа" Выпадающий и нажмите кнопку "OK". Adobe Dreamweaver создали код в CSS, что сказывается наLIМаркер.

иметь надлежащую NAV меню пунктов следует изменить, как вы мыши над ними. Для этого нам необходимо добавить поведение. перейдите в меню окна поведения (SHIFT + F4). Показать все события, нажав на "Показать все события" кнопки . Убедитесь, что курсор находится в одном из пунктов списка чтобы поведение применительно к пункту списка, а не нечто другое. В поле типа onmouseover этот.класс = 'Coolкласс'. "это" относится к тегу "LI" класса рассказывает браузера вы хотите изменить класс для Coolкласс. В onmouseout поле типа этот.класс ='' (что в два 'знаки не цитата). Это делает браузер возвращает имя класса из LI метки обратно на нет, когда мышь движется из элементов. Вы уже применяла поведение одного пункта в списке.

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

Before we end этот tutorial we should set the cursor to a hиs it goes over the LIst LIke normal navigation would.
В CSS стили рамка выбора Л.И.. в нижней части "свойства" LI "есть" добавить свойство "нажмите ссылку на него, и выбрали" Курсор "из выпадающего. типа в "указка", как ценность, если оно не в пресетов.

заключение
Нажмите F12, и проверить, что вы сделали. он, вероятно, не будет слишком красивая, но она должна дать вам почувствовать, как в CSS Dreamweaver Работа с html и что она делает в вашем браузере.

играть вокруг и вспомнить иметь удовольствие!