Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к





Скачать 454.13 Kb.
НазваниеМеня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к
страница4/6
Дата публикации27.09.2014
Размер454.13 Kb.
ТипДокументы
100-bal.ru > Право > Документы
1   2   3   4   5   6
(см. рисунок)






На данной закладке мы производим настройки фона. Фона всей странички или только заданного абзаца текста - это уж как вы стиль решили создавать.

  1. Цвет фона (выбираете вариант из стандартных 256 цветов или создаете свой цвет)

  2. Файл с фоновым изображением

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

  4. Здесь указывается как ведет себя фоновое изображение при прокрутке страницы - прокручивается вместе с ней или стоит на месте

  5. Указание горизонтальной позиции начала фона

  6. Указание вертикальной позиции начала фона

Сразу замечу, что пунктами 3 и 4 надо пользоваться "с оглядкой" - т.е. проверять во всех необходимых версиях браузеров на совместимость - иначе, может получиться расхождение в отображении...









Пункт block служит для настроек параметров блока текста (т.е. здесь речь идет уже не об отдельных буквах как в пункте Type).

  1. Настройка расстояния между словами

  2. Настройка межбуквенного расстояния или трекинг

  3. Вертикальное выравнивание строки текста

  4. Горизонтальное выравнивание текста

  5. Отступ первой строки текста

  6. Настраивает систему расстановки дополнительных пробелов между словами и предложениями (несколько вариантов)

Здесь все достаточно просто, я обычно использую только Text Align и Text Indent. Остальные пункты только при необходимости создания элементов дизайна именно на основе стилей (при создании текстовой версии).









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

  1. Ширина прямоугольника

  2. Высота прямоугольника

  3. Настройка выключки влево или вправо

  4. Настройка того, как ведет себя текст при использовании элемента с выключкой влево или вправо (как текст обтекает подобный объект)

  5. Настройка отступа от края прямоугольника до расположенных рядом других элементов

  6. Настройка отступа от краев прямоугольника до текста.









Пошли различные декоративные настройки. Например, это позволит вам создать бордюр вокруг вашего элемента, со всеми необходиымыми вам настройками.

  1. Указываем ширину бордюра слева, справа, сверху и снизу

  2. То же самое но для цвета бордюра

  3. Стиль бордюра - различные варианты сочетания точек и черточек :)









Настройки списков (нумерованного и списка с буллетами)

  1. Тип оформления буллета (несколько вариантов)

  2. Использование в качестве буллета картинки

  3. Позиционирование буллета









Позиционирование - вещь важная и интересная. Оно помогает "поставить" наш объект в любое место на страничке. Итак:

  1. Тип позиционирования (относительное, абсолютное и т.д.)

  2. Расположение по Z-координате - в каком слое будет находится наш объект.

  3. Видимый или невидимый наш объект (может использоваться для создания пустых полей в документе)

  4. Чего будем делать с переполнением (т.е. если текст весь не влез)

  5. Расположение объекта - указание координат вершины + ширины и высоты

  6. Отступы со всех сторон в пикселях или других единицах.









Ну и последнее...

  1. Указание обрыва страницы (в основном для печати)

  2. Визуальный эффект - при наведении на объект курсора он может менять свою форму или при загрузке объекта срабатывает один из стандартных фильтров (последнее верно только для Internet Explorer).







Ну вот, теперь у вас есть базовые знания в области CSS. Примеров никаких не будет, только сухая и скучная теория. На следующем шаге мы будем полученные знания применять.




Сегодня мы будем заниматься чисто текстовым оформлением. Пора уже начать наполнять нашу страничку каким-то содержанием. Но если мы будем просто сваливать это содержание в одно кучу - ничего хорошего не получиться.









Начнем с того, что оформим заголовок текущего раздела (чтобы пользователи всегда знали, в какой части сайта они находятся в данный момент. Я сделал так:

  • написал во второй сверху левой ячейке название

  • задал форматирование Paragraph (как - мы уже разбирали)

  • создал отдельный стиль (вот про стиль поподробнее...)









Создаем свой стиль с названием .title (заголовок). Тут все просто - это действие вы должны были уже раз 5-6 делать.









Поизводим настройку стиля: в закладке Type задем параметры:

  • шрифт

  • размер шрифта

  • "вес" шрифта

  • цвет шрифта









Для того чтобы надпись четко выделялась добавим немного расстояния между буквами в закладке Block.

После этого, накладываем стиль на наш заголовок - результат проверьте в браузере, так как DreamWeaver не отображает этот эффект.









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

Делается это в свойствах ячейки.









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

После копирования выбирайте ячейку (вторую сверху, справа). И в пункте меню edit указывайте Paste As Text (вставить как текст).

После этого вы должны увидеть в окне DreamWeaver ваш текст с сохранением форматирования.









Смотрим в браузере. Края текста слишком "прилипают" к краю окна браузера, что затрудняет чтение. Подредактируйте нашу CSS, а вернее тег
. Делается это просто - выбираете реим редактирования и изменяете свойства тега
в закладке BOX (эти свойства padding и margin). Я поставил во всех ячейках по 1. То есть задал padding и margin со всех сторон равным 1. (если что-то не ясно - смотри предыдущий урок).









Кроме того текст имеет некрасивый левый край (рваный). Давайте изменим выравнивание текста. Для этого просто создайте новый стиль (я назвал его .justify) и задайте в пункте block один единственный параметр - Text Align = Justify.

После этого примените стиль ко всем параграфам нашего текста.

Все. С текстом почти разобрались...




Да. Именно почти разобрались. Я решил напоследок оставить для вас маленькую головоломку. Посмотрите на результат сегодняшнего урока. Видите как я оформил первые буквы в тексте. Попробуйте так же. Если не получится - не расстраивайтесь, на следующе уроке я открою эту маленькую тайну.




Ну вот и дошли мы до шага №9. Сегодня мы попроуем разобраться с некоторыми полезными свойствами такой вещи как behaviors.









Для начала обещанный рассказ о секрете в предыдущем описании (то как я сделал "буквицу" для каждый новый параграф).

Ответ очень простой. Сначала я задал характеристики шрифта:









Потом задал фон для данного элемента. Делается это в пункте background. В качестве фона выбрал несколько более светлый цвет, чем цвет самого текста.









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









Но вернемся к нашим баранам. Т.е. behaviors. Живут эти звери вот где (картинка слева):

Что они могут делать? Писать за вас JavaScripts. Подробнее об этом маленько позже.









После нажатия на нее вы получите еще одно плавающее окошко вот такого вида.

В нем можно:

  • добавить реакцию на различные события применительно к данному объекту

  • выбрать, для каких браузеров мы собираемся делать скрипты









Давайте попробуем сделать какое-нибудь несложное действие при помощи behaviors.

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

Для этого выбираем одну из ссылок меню (скажем "новости"). Заходим в пункт "добавить Behavior" и указываем Set Text - Set Text of Status Bar.









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

Все, можно глядеть на результат!









Ни на последок немного об остальных Behaviors:

  • Call Javascript - вызов внешнего ява-скрипта по событию

  • Change Property - изменение свойств объекта (цвета, например)

  • Check Browser - определяет тип браузера - очень полезно для перенаправления пользователя на страничку наиболее ему подходящую.

  • Check Plugin - проверяет наличие плагина (например для проигрывания Flash)

  • Control ShockWave or Flash - управление флеш или шоквейв муви

  • Drag Layer - перемещает слой

  • Go To Url - переход по ссылке

  • Jump Menu, Jump Menu Go - изменение меню

  • Open Browser Window - открывает окно браузера с заданными размерами и прочими параметрами

  • Play Sound - воспроизводит звук

  • Popup Message - выводит стандартное windows-сообщение с заданным текстом

  • Preload Images - загружает указанные картинки

  • Set Nav Bar Image -изменение картинок созданных при помощи Navigation Bar

  • Set Text - установка текста в различных местах (фрейм, текстовой поле, слой, строка состояния браузера)

  • Show-Hide Layers - показывает, прячет слои

  • Swap Image - смена одной картинки другой (эффект перекатывания)

  • Swap Image Restore - восстановление исходной картинки

  • TimeLine - об этом позже :)

  • Validate Form - проверка введенных в форму данных

Как видите выбор велик. Можно еще и Get More Behaviors сделать :) И тогда будет больше различных настроек.




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




Обещал я рассказать о том, как DW упраляется с таблицами? Ну вот и рассказываю:






То что вы узнаете может послужить замечательным издевательством над !oo! владельцами FP98(2000). Дело в том, что ни один пакет не управляется с таблями так как DreamWeaver.

Создайте пустую таблицу 3х3. Для тренировок.

Начнем с выдления нескольких ячеек таблицы. Делается это так:






Для того, чтобы выделить ряд ячеек достаточно кликнуть внутрь одной из них и в строке состояния нажать на тег






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






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






 

Ну научились мы ячейки выделять - и что?.

А вот что - теперь мы можем их объединять, закрашивать в нужный цвет, удалять. Короче работать как с обычными элементами странички, как с текстом.

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






Сначала выделяем нужные ячейки (с CTRL). Затем нажимаем на пипку указанную на картинке.






Теперь можно еще и закрасить ячейки. Для пущего удовольствия.

Выделяем, выбираем цвет. Получаем нужный результат.

Как видите все очень просто.






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

  • выделяем нужный ряд или колонку

  • копируем ее в буфер (CTRL+Insert)

  • вставляем ее (Shift + Insert)

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




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




Ну вот добрались мы и до двенадцатого шага. Сегодня вы узнаете немного о возможностях DreamWeaver в плане создания анимации на странице. Кроме шуток :)









Все анимаця в DreamWeaver прячется в меню Window под пунктом Timeline. Ленивые могут просто нажать Ctrl+F9, а не лазить по всяким менюшкам...









После того как вы выберете пункт в меню или нажмете комбинацию клавиш пред вами предстанет вот такая панель... Я специально выделил ее часть дабы указать на ее основные составляющие:

  • название текущей TimeLine

  • перемещение между кадрами

  • указание кол-ва FPS

и т.д...

Основной смысл - вообразите себе что перед вами шкала времени, на которой в определенные моменты вы можете... Так стоп. Лучше все объяснить на наглядном примере.









Для начала создайте слой. Делается это простым нажатием на кнопку . После этого задайте ему параметры как показано на рисунке слева.
1   2   3   4   5   6

Похожие:

Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconФилософская мысль Европы не смогла понять во всей глубине тот факт,...
Распространено было убеждение, что победа уже давно одержана и никаких сомнений в этом быть не может. Лишь позднее в Англии и Франции...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconМоя будущая профессия
А для меня такого вопроса уже не существует. Почему? Да потому, что уже давно знаю, чем буду заниматься. Я буду переводчиком
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconПривет всем! Меня зовут Максим, можно просто Макс. Мне всего 16 лет...
Оловянная принцесса", и " Граф Карлштайн ". Cоветую вам прочитать эти книги, я понял, что и сам могу создать шедевр. Я написал книгу...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconУрок 7
Что могут сделать родители для того, чтобы их сын или дочь выбрали здоровый образ жизни? И можно ли сделать еще что-то, чего Вы еще...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconВ израильском зоопарке срочно переименовывают крокодила Каддафи....

Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconРешение и мотивация поступают от взрослого. А от ребенка требуется...
Ответственность и послушание – это два различных типа поведения. Различие состоит прежде всего в том, кто решает, что нужно сделать...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconДомашнее задание на 11 марта 2014 года 5 "А" класс
Русский язык: написать сочинение объемом не более 1 листа на тему "Мой питомец" (собака или кошка). Придумать стихотворение о питомце,...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconПедагогическая практика оказалась для меня очень интересной и важной....
Маоу сош №1 села Акъяр муниципального района Хайбуллинский район Республики Башкортостан
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconПрограмма по формированию навыков безопасного поведения на дорогах...
Но если можно учить легко и успешно, то что мешает вам сделать это? Когда вы закончите чтение, возможно, у вас появятся свои собственные...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconПрограмма по формированию навыков безопасного поведения на дорогах...
Тема: Слова которые обозначают действия предметов и отвечают на вопросы что делать? что сделать? что делает? что сделает? что делал?...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconКонцепция анализа кризисных явлений 8 Стратегические риски 10
Процесс глобализации международных отношений набирает силу. Мир становится все более взаимозависим и все более уязвим для проявлений...
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconТема : «Как проверить орфограммы слабых позиций в падежных окончаниях»
Да. Об окончаниях мы немало знаем. Может это позволит сделать нам предположения по решению нашей задачи. Что мы можем сделать?
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconПосле потери целого дня на попытки придумать и сделать что-то самому...
Я не пытался сделать все скопипастить и использовать все тоже самое, но стремился добиться похожего результата
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconПосле потери целого дня на попытки придумать и сделать что-то самому...
Я не пытался сделать все скопипастить и использовать все тоже самое, но стремился добиться похожего результата
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconВывод: Труд имеет значимость для каждого из нас. С помощью трудовой,...
Учитель говорит о том, что дети приходят на занятия по химии, чтобы сделать открытия, чтобы узнать что то новое
Меня уже давно просили сделать доброе дело и написать не заумные типсы для людей, которые разбираются в различных пакетах, а сделать что-то более приближенное к iconАнкета для Радикального Прощения
Лорен, а меня совершенно игнорирует. Он винит во всем, меня и говорит, что я просто эмоционально неуравновешенная. Из-за него я чувствую...


Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
100-bal.ru
Поиск