· Image (картинка) - вставляет на страничку графический элемент.

· rollover image - а здесь указывается файл картинки, которая будет появляться при наведении на объект мышки (подпункт Preload Rollover image рекомендуется оставлять включенным, так как возможно появление при наведение мышки на подобный объект пустой картинки) В основном, подобные объекты используются для различных навигационых элементов на сайте. При вставке его появляется окно диалога. Мы видим четыре основных поля. Сверху-вниз это:

ь image name - название картинки (используется java-скриптом, для разделения различных объектов данного типа на страничке). Никогда не делайте названия одинаковыми!

ь original image - здесь указывается расположение файла с картинкой "по-умолчанию", то есть той картинкой которая будет отображаться в начале.

ь rollover image - а здесь указывается файл картинки, которая будет появляться при наведении на наш объект мышки.

ь go to url - здесь нужно написать ссылку, по которой пойдет пользователь при нажатии на наш объект.

· Table (таблица) - вставляет на страничку таблицу. В каждой ячейке таблицы может находиться как текст, так и рисунок. Таблицы в построении сайтов используются не только как в Word-е или Excel-е, а и как модульные сетки (собственно некий каркас, на котором как на паутине держатся все объекты странички).

· Tabular data (табличные данные) - вставляет готовую таблицу с готовыми данными. Например прайсов из Excel.

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

· Navifgation Bar - вставляет навигационную панель состоящую из нескольких кнопок

· Draw Layer (нарисовать слой) - вставляет на страничку слой (как в PhotoShop)

· Line Break (мягкий перенос) - вставляет на страничку (в тексте) мягкий перенос

· E-mail Link (ссылка на электронную почту) - вставляет на страничку ссылку на электронный адрес. Для вставки подобной ссылки с помощью HTML достаточно написать:

<A HREF="mailto:dab512@mail.ru">e-mail</A>.

Но можно этого и не знать, а просто указать текст ссылки и адрес e-mail. Что гораздо проще.

· Date (дата) - вставка в документ текущей даты (можно с автообновлением). В диалоговом окне достаточно указать формат даты, времени и, если необходимо, указать пункт Update Automatically on Save (автоматически обновлять при сохранении).

· Flash - вставляет флеш-анимацию в страничку

· ShockWave - вставляет Shockwave-анимацию

· Generator - вставляет заготовку Generator

· FireWorks - вставляет объект FireWorks

· Applet - вставляет ява-апплет

· ActiveX - вставляет ActiveX

· Plugin - вставляет объект, проигрываемый плагином

· SSI - вставляет инклюд (подключаемый внешний HTML файл).

Палитра Invisibles возволяет добавлять в исходный код странички:

· закладки

· комментарии

· ява-скрипты

· неразрывные пробелы

Палитра head помогает нам добавлять различные описания и свойства странички, такие как:

· мета-теги

· ключевые слова

· описания странички

· устанавливать параметры обновления странички

· указывать базовую ссылку (ссылку по умолчанию)

· указывать ссылки

Палитра Frames (фреймы) поможет сделать одним нажатием на кнопку сложную фреймовую структуру.

Фрейм - это способ создания внутри web-страницы окна для отображения другой web-страницы, реализуется с помощью тэга <frame>. Если страница загружена во фрейм, то она может заменяться на другую без замены содержащей фрейм страницы. Эта возможность - единственное достоинство фреймов. Недостатков же - масса. Во-первых, страницу, загруженную во фрейм, нельзя так просто сохранить на локальном диске. Приходится прибегать к ухищрениям. Во-вторых, на web-страницу во фрейме нельзя так просто поставить закладку, - она будет ставиться на главную страницу сайта. Страницу во фрейме нельзя перезагрузить кнопкой "Обновить" - приходится использовать одноименный пункт из меню правой кнопки мыши. Обычно фреймы используются для создания меню навигации, но для этой цели существует множество других средств, лишенных вышеперечисленных недостатков.

Палитра forms (формы) служит для визуального создания форм.

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

Работа с текстом

В самых новых версиях DreamWeaver все больше совершенствуется текстовый редактор. Так например в DreamWeaver-4 особое внимание было уделено новому встроенному текстовому редактору. Он намного более функционален, чем в предыдущих версиях Dreamweaver, и позволяет работать с текстом на уровне неплохого текстового процессора. Автовыравнивание, быстрая вставка тегов и функций JavaScript из выпадающего меню - вот лишь некоторые из его возможностей. Теперь для работы с ним есть даже специальный режим Code View, в котором DreamWeaver превращается в обычный невизуальный HTML редактор. А также режим Split View, в котором основное окно разбивается на две панели: Code View и Design View. DreamWeaver имеет широкий спектр возможностей по форматированию текста

Это меню определяет формат абзаца (заголовок 1, заголовок 2, параграф и т.д.):

Это меню определяет вид шрифта текста. Следует обратить внимание, что используется определение группы шрифтов, а не какого-то одного наименования - если первый из указанных шрифтов отсутствует на компьютере конечного пользователя, браузер автоматически подставит второй, а если нет и второго - то похожий (вместо Arial - любой sans-serif, например), при этом общий дизайн страницы не утратится. Если же указывать конкретный шрифт, то при его отсутствии браузер применит шрифт, используемый по умолчанию (например, вместо Arial - Times New Roman), и шрифт с засечками испортит тщательно продуманный дизайн.

Это меню определяет размер шрифта. Размер шрифта определяется в относительных единицах - при данном способе форматирования размер шрифта в окне браузера конечного пользователя будет зависеть от настроек этого самого пользователя (выбираемые в меню браузера "Вид" размеры шрифта - крупный, средний и т.д.). Дальше идет кнопка выбора цвета шрифта (функционирует так же, как описанные выше кнопки выбора цвета элементов), кнопки "bold" (жирный) и "italic" (наклонный), кнопки выравнивания. Автоматическое выравнивание по ширине, к сожалению, не поддерживается, но если в исходном файле для текущего абзаца прописать align="justify", то DreamWeaver легко согласится и будет придавать всем последующим абзацам (после каждого нажатия Enter) аналогичное выравнивание.

В нижней строке этой панели доступны также кнопки выбора ссылки (можно выделить текст, который будет являться гиперссылкой, и нажать на папочку рядом с полем "Link" для обзора; или просто ввести адрес в это поле), выбора окна, в котором будет открываться ссылка (target, при отсутствии ссылки кнопка недоступна), маркированного и нумерованного списков, вертикального и горизонтального отступов. Кнопка с изображением карандаша вызывает Quick Tag Editor (если понадобилось обозначить данный абзац как цитату - нажимаете эту кнопку и из выпавшего списка выбираете blockquote, и т.п.) Вообще-то эта панель является панелью свойств любого объекта, и при использовании таблицы на ней появляются дополнительные кнопки свойств таблицы, при выделении рисунка - дополнительные кнопки свойств рисунка, и т.д.

Настройки DreamWeaver

Создание CSS

CSS или Cascading Style Sheets. Что в переводе означает "каскадные стилевые таблицы". Такой приближенный перевод указывает на главную особенность CSS - каскадное наследование свойств объекта.

Слева стандартный диалог, возникающий при создании нового стиля.

Можно выбрать один из трех вариантов - создать новый стиль, переназначить свойства стандартного HTML-тега и использовать специальные расширения CSS.

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

1. Указывается шрифт, которым будет писаться текст. Можно указать конкретный шрифт, например, FreeSet, но рекомендуется пользоваться конструкциями, предлагаемыми самим DreamWeaver - например, Verdana, Arial, Helvetica, sans-serif.

2. Указывается размер. Размер можно указать практически в чем угодно, начиная от % и заканчивая пикселями и пунктами.

3. Здесь настраивается степень "веса" буквы или, его толщина.

4. Стиль написания - наклонный (италлик), стандартный (normal)

5. Вариации написания - например, весь текст набран только строчными или только заглавными буквами.

6. Высота базовой линии шрифта в пунктах, поинтах или любых других величинах.

7. Какими буквами пользоваться - большими, маленькими или стандартно и теми и другими.

8. Различный декор - подчеркивание, мигание и прочее.

9. Цвет текста.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Остальные пункты следует использовать только при необходимости создания элементов дизайна именно на основе стилей (при создании текстовой версии).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Позиционирование помогает "поставить" наш объект в любое место на странице.

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

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

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

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

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

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

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

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

2.3 Проблемы и недостатки разработки

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

Второй недостаток -- дополнительный код HTML, добавляемый Dreamweaver для собственного удобства. Правда, этот код не слишком велик, но для некоторых, очищающих свой код до байта, может оказаться чрезмерно большим. Основной проблемой стала русификация программы в связи с ростом «пиратской» продукции. После установки иностранной версии программы, все работает нормально. Но не все знают английский язык. Но, установив русификатор, все проблемы с русским языком еще не решаются. Следующая неприятность - это кодировка. Иногда при открытии или создании нового документа вместо русских букв появляется непонятный набор символов. Сайт в разных браузерах может отображаться по-разному. Одна из главных задач верстальщика, сделать отображение сайта одинаковым во всех типах браузера и любом размере шрифта, выбранного пользователем в настройках браузера. Также в ходе выполнения практической части выяснилось, что использовать фрэймы крайне неудобно, и что самое главное, работу с DreamWeaver следует начинать с настроек DreamWeaver, а иначе возникнут проблемы различного характера.

 Таким образом, DreamWeaver - это программа для облегчения написания HTML. Как и многие подобные программы, он изобилует мощными, занимающими достаточно большое количество ресурсов на компьютере средствами облегчить создание HTML кода. DreamWeaver автоматизирует всё, что только можно автоматизировать, наиболее наглядно отобразит код и получившийся вследствие изменений этого кода дизайн, позволит строить таблицы "на глаз", в процессе работы видеть происходящие изменения, возвращаться на много ходов обратно. Несмотря на то, что многое в программе визуализировано и автоматизировано все равно HTML в чистом виде знать и понимать надо. Причем знать если не профессионально, то хоть примерно осознавать, на что вы смотрите, на какую таблицу или выпадающее меню.

Глава 3. Web-ресурс по теме "Информационное моделирование

3.1 Этап логико-структурного проектирования

При проектировании имелся курс лабораторных работ по «Информационному моделированию», требовалось представить их в виде электронного ресурса, для чего была выделена следующая структура.

Структура Web-ресурса

Для представления информации выбрана форма гипертекста в виде Web-ресурса. Выделены 5 разделов: Главная, Лабораторные работы, Работы студентов, Программа курса и Литература. Все лабораторные работы разделены на 6 модулей и имеют следующую структуру.

Существуют различные виды Web-дизайна: фреймовый, табличный и контейнерный. Для разработки Web-ресурса выбрана табличная структура.

Весь текст и вся графика помещаются в ячейки таблицы, что позволяет делать с ними все, что угодно. Такие таблицы имеют невидимые границы, а линейки создаются с помощью очень тонких ячеек с фоновым заполнением. Таблицы разметки очень сложны, используют различное форматирование и многократное объединение ячеек и практически всегда -- вложенные таблицы. Таблица разметки должна быть как можно более простой, по возможности не содержать ячеек и строк с относительными значениями ширины и высоты и минимальным количеством вложенных таблиц. Таблица разметки, как правило, занимает всю ширину Web-страницы, а значит, без относительного значения этой самой ширины не обойтись. Конечно, иногда таблицы разметки имеют фиксированную ширину, но в этом случае используется не вся полезная площадь окна Web-обозревателя, и могут возникнуть проблемы, если ширина окна меньше ширины таблицы. То же самое можно сказать об относительных значениях ширины и высоты ячеек таблиц: одна из них, как правило, с основным содержимым страницы, должна использовать оставшееся от ее "соседей" свободное пространство по максимуму. А значит, без относительных значений размеров опять же не обойтись.

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

Данная структура выбрана как самая оптимальная для большого объёма текста, так как во фреймовой структуре каждый раз, когда в экран браузера вставляется фрейм, урезается территорию, на которой можно было бы разместить данные. Чем больше вводится фреймов, тем меньше остается полезного пространства и тем скорее запутаются читатели, незнакомые с навигацией на Web-странице с фреймами.

Если страница загружена во фрейм, то она может заменяться на другую без замены содержащей фрейм страницы. Эта возможность - единственное достоинство фреймов.

Недостатков же - масса. Во-первых, страницу, загруженную во фрейм, нельзя так просто сохранить на локальном диске. Приходится прибегать к ухищрениям. Во-вторых, на web-страницу во фрейме нельзя так просто поставить закладку, она будет ставиться на главную страницу сайта. Страницу во фрейме нельзя перезагрузить кнопкой "Обновить" - приходится использовать одноименный пункт из меню правой кнопки мыши. Обычно фреймы используются для создания меню навигации, но для этой цели существует множество других средств, лишенных вышеперечисленных недостатков.

Главный баннер ресурса разработан с помощью Adobe Photoshop, Paint и даже текстового редактора Microsoft Word. Изначально имеются следующие рисунки:

В результате баннер выглядит так

Используя классификации разработанный Web-ресурс можно отнести

· по функциональному признаку является вспомогательным ресурсом;

· по структуре - однотомный;

· по организации текста - сборник;

· по характеру представляемой информации - практикум;

· по форме изложения - комбинированный;

· по целевому назначению - для бакалавров и специалистов;

· по наличию печатного эквивалента - самостоятельный;

· по природе основной информации - мультимедийный;

· по технологии распространения - сетевой;

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

В результате проведенного исследования изучены электронные образовательные ресурсы, классификации, основные этапы разработки и требования, предъявляемые к ним. А результатом практической деятельности является разработанный электронный образовательный Web-ресурс к курсу «Информационное моделирование» средствами Macromedia DreamWeaver. В ходе работы цель была достигнута и все поставленные задачи выполнены.

Изучены теория Web-дизайна и HTML-редактор DreamWeaver, рассмотрены все его функциональные возможности, позволяющие упрощать работу программиста и возникающие при разработке проблемы. При всей простоте использования редактора всё равно необходимо знать и понимать HTML в чистом виде, чтобы избежать ошибок при работе с Web-ресурсом.

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

Список литературы:

1. Беспалько, В. П. Образование и обучение с участием компьютеров (педагогика третьего тысячелетия) [Текст] / В. П.Беспалько. - М., 2002. - 186 с.: с.53-60.

2. Венда, В. Ф. Системы гибридного интеллекта: Эволюция, психология, информатика [Текст] / В. Ф. Венда. - М.: Машиностроение, 1990. -110с.: с. 20-25.

3. Вилотиевич, М. От традиционной к информационной дидактике [Текст] / Вестник Московского университета. Сер. 20. Педагогическое образование, 2003, - № 1: с. 20.

4. Денисов, А. "Интернет: Самоучитель" [Текст] / А. Денисов, И. Вихарев, А. Белов и др. - «Питер», 2005. - 78 с.: с. 15-24.

5. Карпов, Б. Dreamweaver 4. Краткий курс [Текст] / Б. Карпов, А. Жданов - Питер, 2001. - 250 с.: 52-78с.

6. Колин, К. Информатизация образования: новые приоритеты [Текст] / Alma Mater, 2002, - № 2.: с. 16.

7. Кравченя, Э.М. "Основы информатики, компьютерной графики и педагогические программные средства" [Текст] / Э.М. Кравченя - «Тетра-Систем», 2004. - 350 с.: 295-320.

8. Кудрявцев, Л.Д.. Математическое образование: тенденции и перспективы [Текст] / Л. Д. Кудрявцев, А.И. Кириллов, М.А. Бурковская, О.В. Зимина - Высшее образование сегодня. 2002. - № 4.: с. 20.

9. Макарова, Л.Н. Компьютерная культура будущих специалистов в контексте их личностного развития [Текст] / Л.Н. Макарова, И.А. Ширшов, Т.К. Гапонова - Педагогическая информатика. 2003. - № 3.: с. 17.

10. Уорнер, Д. Macromedia Dreamweaver 8 для "чайников" Dreamweaver 8 For Dummies. [Текст] / Д. Уорнер - М.: «Вильямс», 2006. -- С. 400.: с.25-100.

11. Веб-школа - ваши страницы в истории Интернет [Электронный ресурс] www.webschool.narod.ru 23.05.2009.

12. Общероссийский классификатор продукции ОК 005-93 (в ред. от 24.05.2000) [Электронный ресурс] - http://linux.nist.fss.ru/hr/doc/ok/okp1.htm 23.05.2009.

13. Macromedia® Dreamweaver 3 для каждого [Электронный ресурс] http: //dreamweaver3.narod.ru 14.04.2008.

14. Macromedia Dreamweaver - Lesson [Электронный ресурс] Начнем мы с самого простого - с интерфейса пакета http://rashid4ever.narod.ru/dw/book1.html 21.04.2008.

Размещено на Allbest.ru