Скачать 454.13 Kb.
|
| На данной закладке мы производим настройки фона. Фона всей странички или только заданного абзаца текста - это уж как вы стиль решили создавать.
Сразу замечу, что пунктами 3 и 4 надо пользоваться "с оглядкой" - т.е. проверять во всех необходимых версиях браузеров на совместимость - иначе, может получиться расхождение в отображении... | | ||||||||||||||
| Пункт block служит для настроек параметров блока текста (т.е. здесь речь идет уже не об отдельных буквах как в пункте Type).
Здесь все достаточно просто, я обычно использую только Text Align и Text Indent. Остальные пункты только при необходимости создания элементов дизайна именно на основе стилей (при создании текстовой версии). | | ||||||||||||||
| Данный пункт управляет ограничениями данного куска текста на странице (ограничивает его расположение в определенном прямоугольнике)
| | ||||||||||||||
| Пошли различные декоративные настройки. Например, это позволит вам создать бордюр вокруг вашего элемента, со всеми необходиымыми вам настройками.
| | ||||||||||||||
| Настройки списков (нумерованного и списка с буллетами)
| | ||||||||||||||
| Позиционирование - вещь важная и интересная. Оно помогает "поставить" наш объект в любое место на страничке. Итак:
| | ||||||||||||||
| Ну и последнее...
| | ||||||||||||||
| Ну вот, теперь у вас есть базовые знания в области CSS. Примеров никаких не будет, только сухая и скучная теория. На следующем шаге мы будем полученные знания применять. | | ||||||||||||||
Сегодня мы будем заниматься чисто текстовым оформлением. Пора уже начать наполнять нашу страничку каким-то содержанием. Но если мы будем просто сваливать это содержание в одно кучу - ничего хорошего не получиться. | | |||||||||||||||
| | |||||||||||||||
Начнем с того, что оформим заголовок текущего раздела (чтобы пользователи всегда знали, в какой части сайта они находятся в данный момент. Я сделал так:
| | |||||||||||||||
| | |||||||||||||||
Создаем свой стиль с названием .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:
Как видите выбор велик. Можно еще и Get More Behaviors сделать :) И тогда будет больше различных настроек. | | |||||||||||||||
Пока на этом закончим. Что будет в следующий раз - пока и сам не знаю :) Темп, который я себе задал (в день по описанию) уже выдерживаю с трудом, так что до следующего шага придется немного потерпеть :) | | |||||||||||||||
Обещал я рассказать о том, как DW упраляется с таблицами? Ну вот и рассказываю: | | |||||||||||||||
| То что вы узнаете может послужить замечательным издевательством над !oo! владельцами FP98(2000). Дело в том, что ни один пакет не управляется с таблями так как DreamWeaver. Создайте пустую таблицу 3х3. Для тренировок. Начнем с выдления нескольких ячеек таблицы. Делается это так: | | ||||||||||||||
| Для того, чтобы выделить ряд ячеек достаточно кликнуть внутрь одной из них и в строке состояния нажать на тег | |||||||||||||||
| ||||||||||||||||
| Для того, чтобы выделить столбец нужно подвести мышь к верхней границе верхней ячейки столбца. Должен появиться соответствующего вида курсор. Как появился - жмите, столбец выделится. | | ||||||||||||||
| Ну а что делать, если вам нужно выделить несколько ячеек не являющимися ячейками одной строки или столбца. Все просто - давим кнопку CTRL и начинаем кликать по нужным нам ячейкам. | | ||||||||||||||
| Ну научились мы ячейки выделять - и что?. А вот что - теперь мы можем их объединять, закрашивать в нужный цвет, удалять. Короче работать как с обычными элементами странички, как с текстом. Для примера сделаем следующее - выделим две ячейки левого столбца, объединим их, покрасим в какой-нибудь цвет и, затем, сделаем симметрично с другой стороны то же самое. (см рисунок) | | ||||||||||||||
| Сначала выделяем нужные ячейки (с CTRL). Затем нажимаем на пипку указанную на картинке. | | ||||||||||||||
| Теперь можно еще и закрасить ячейки. Для пущего удовольствия. Выделяем, выбираем цвет. Получаем нужный результат. Как видите все очень просто. | | ||||||||||||||
| Ну и на последок - готовые ячейки можно копировать и вставлять куда вам хочется. Например вот так:
То что вы скопировали будет вставлено выше (если это строка) или левее (если это столбец) текущей ячейки. | | ||||||||||||||
Ну, на сегодня все. Теперь вы знаете как можно работать с таблицами в DW. На следующем уроке я постараюсь закончить с общей теорией и продолжить работу над нашим сайтом. | | |||||||||||||||
Ну вот добрались мы и до двенадцатого шага. Сегодня вы узнаете немного о возможностях DreamWeaver в плане создания анимации на странице. Кроме шуток :) | | |||||||||||||||
| | |||||||||||||||
Все анимаця в DreamWeaver прячется в меню Window под пунктом Timeline. Ленивые могут просто нажать Ctrl+F9, а не лазить по всяким менюшкам... | | |||||||||||||||
| | |||||||||||||||
После того как вы выберете пункт в меню или нажмете комбинацию клавиш пред вами предстанет вот такая панель... Я специально выделил ее часть дабы указать на ее основные составляющие:
и т.д... Основной смысл - вообразите себе что перед вами шкала времени, на которой в определенные моменты вы можете... Так стоп. Лучше все объяснить на наглядном примере. | | |||||||||||||||
| | |||||||||||||||
Для начала создайте слой. Делается это простым нажатием на кнопку . После этого задайте ему параметры как показано на рисунке слева. |
Философская мысль Европы не смогла понять во всей глубине тот факт,... Распространено было убеждение, что победа уже давно одержана и никаких сомнений в этом быть не может. Лишь позднее в Англии и Франции... | Моя будущая профессия А для меня такого вопроса уже не существует. Почему? Да потому, что уже давно знаю, чем буду заниматься. Я буду переводчиком | ||
Привет всем! Меня зовут Максим, можно просто Макс. Мне всего 16 лет... Оловянная принцесса", и " Граф Карлштайн ". Cоветую вам прочитать эти книги, я понял, что и сам могу создать шедевр. Я написал книгу... | Урок 7 Что могут сделать родители для того, чтобы их сын или дочь выбрали здоровый образ жизни? И можно ли сделать еще что-то, чего Вы еще... | ||
В израильском зоопарке срочно переименовывают крокодила Каддафи.... | Решение и мотивация поступают от взрослого. А от ребенка требуется... Ответственность и послушание – это два различных типа поведения. Различие состоит прежде всего в том, кто решает, что нужно сделать... | ||
Домашнее задание на 11 марта 2014 года 5 "А" класс Русский язык: написать сочинение объемом не более 1 листа на тему "Мой питомец" (собака или кошка). Придумать стихотворение о питомце,... | Педагогическая практика оказалась для меня очень интересной и важной.... Маоу сош №1 села Акъяр муниципального района Хайбуллинский район Республики Башкортостан | ||
Программа по формированию навыков безопасного поведения на дорогах... Но если можно учить легко и успешно, то что мешает вам сделать это? Когда вы закончите чтение, возможно, у вас появятся свои собственные... | Программа по формированию навыков безопасного поведения на дорогах... Тема: Слова которые обозначают действия предметов и отвечают на вопросы что делать? что сделать? что делает? что сделает? что делал?... | ||
Концепция анализа кризисных явлений 8 Стратегические риски 10 Процесс глобализации международных отношений набирает силу. Мир становится все более взаимозависим и все более уязвим для проявлений... | Тема : «Как проверить орфограммы слабых позиций в падежных окончаниях» Да. Об окончаниях мы немало знаем. Может это позволит сделать нам предположения по решению нашей задачи. Что мы можем сделать? | ||
После потери целого дня на попытки придумать и сделать что-то самому... Я не пытался сделать все скопипастить и использовать все тоже самое, но стремился добиться похожего результата | После потери целого дня на попытки придумать и сделать что-то самому... Я не пытался сделать все скопипастить и использовать все тоже самое, но стремился добиться похожего результата | ||
Вывод: Труд имеет значимость для каждого из нас. С помощью трудовой,... Учитель говорит о том, что дети приходят на занятия по химии, чтобы сделать открытия, чтобы узнать что то новое | Анкета для Радикального Прощения Лорен, а меня совершенно игнорирует. Он винит во всем, меня и говорит, что я просто эмоционально неуравновешенная. Из-за него я чувствую... |