Гипермедиа в общеобразовательном курсе химии

Знакомство с интерфейсом Macromedia Dreamweaver

Разбить на страницы
Показывать лекцию целиком

Рабочее пространство

Запустив редактор ):

(рис 1.1) Стартовое окно Macromedia Dreamweaver 8

В левой области окна расположен блок, позволяющий открыть один из недавно редактировавшихся документов ( Open a Recent Item ) или создать новый документ любого типа, в том числе и html-файл ( Create New ). Небольшой узкий блок в правой части окна позволяет работать с элементами оформления Web-страницы, добавлять новые теги, размещать файлы непосредственно в интернете и пр., однако при создании нашего первого Web-проекта вполне можно обойтись и без него: чтобы скрыть этот блок, нажмем на кнопку со стрелкой, находящуюся посередине границы между левым и правым блоками.

Создадим новый ):

(рис 1.2) Новый html-документ

В этом окне можно выделить пять основных блоков, обозначенных цифрами:

  • Главное меню.
  • Панель добавления объектов.
  • Панель отображения документа.
  • Область редактирования.
  • Панель свойств.
  • В нижней части панели свойств найдем кнопку ). Сделав необходимые изменения, нажимаем Ok, возвращаясь к области редактирования. Заголовок страницы впоследствии можно будет изменить и непосредственно на панели отображения документа.

    В области редактирования мы наблюдаем нашу Web-страницу фактически в том виде, в котором она будет отображаться в браузере; сейчас это просто пустое белое окно. Напишем чтo-нибудь, например: Химия — наука о веществах, их составе, строении, свойствах и взаимных превращениях. Для того, чтобы вставить тире, воспользуемся панелью добавления объектов. По умолчанию в ней выбран пункт Common, т. е. наиболее распространенные объекты (в переводе с английского common — общий, частый, распространенный). Это — кнопки, позволяющие вставить в документ гиперссылку, таблицу, изображение, анимацию и т. д. Поменяем пункт (рис 1.3) ), и в нем — позицию — ).

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

    (рис 1.5) Добавление символов(рис 1.4) Сохранение документа

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

    (рис 1.7) Отображение Web-страницы в браузере(рис 1.6) Режим Code

    Таким образом, весь тот ). Мы видим, что вставленное ранее тире представлено в коде фрагментом #8212;. Аналогично будут отображаться и другие символы, которые нельзя напрямую ввести нажатием клавиши на клавиатуре.

    Нажав на кнопку, мы перейдем в режим ).

    (рис 1.8) Режим Split

    Необходимо также отметить, что любое изменение, внесенное нами в документ после его сохранения, отражается в виде звездочки (*) после его названия — как на панели отображения документа, так и в заголовке окна ), и исчезнет, если затем снова сохранить документ ( File > Save или сочетание клавиш Ctrl +S).

    (рис 1.9) Индикация наличия изменений в документе

    Настройка некоторых установок

    Чтобы настроить необходимые нам для дальнейшей работы установки, зайдем в меню Edit s Preferences (равнозначно сочетанию клавиш Ctrl +U). В меню Category слева выберем категорию General и в блоке Editing Options снимем флажок с позиции Use CSS instead of HTML tags. Далее перейдем к категории Accessibility и в блоке Show attributes when inserting: снимем флажок с позиции Images. Наконец, перейдем к категории New Document и в списке Default Encoding выберем пункт Кириллица (Windows), чтобы впредь все создаваемые нами документы изначально поддерживали русские буквы.

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

    (рис 1.10) Закрытие документа
    Страницы:

    Рабочее пространство

    Запустив редактор ):

    (рис 1.1) Стартовое окно Macromedia Dreamweaver 8

    В левой области окна расположен блок, позволяющий открыть один из недавно редактировавшихся документов ( Open a Recent Item ) или создать новый документ любого типа, в том числе и html-файл ( Create New ). Небольшой узкий блок в правой части окна позволяет работать с элементами оформления Web-страницы, добавлять новые теги, размещать файлы непосредственно в интернете и пр., однако при создании нашего первого Web-проекта вполне можно обойтись и без него: чтобы скрыть этот блок, нажмем на кнопку со стрелкой, находящуюся посередине границы между левым и правым блоками.

    Создадим новый ):

    (рис 1.2) Новый html-документ

    В этом окне можно выделить пять основных блоков, обозначенных цифрами:

  • Главное меню.
  • Панель добавления объектов.
  • Панель отображения документа.
  • Область редактирования.
  • Панель свойств.
  • В нижней части панели свойств найдем кнопку ). Сделав необходимые изменения, нажимаем Ok, возвращаясь к области редактирования. Заголовок страницы впоследствии можно будет изменить и непосредственно на панели отображения документа.

    В области редактирования мы наблюдаем нашу Web-страницу фактически в том виде, в котором она будет отображаться в браузере; сейчас это просто пустое белое окно. Напишем чтo-нибудь, например: Химия — наука о веществах, их составе, строении, свойствах и взаимных превращениях. Для того, чтобы вставить тире, воспользуемся панелью добавления объектов. По умолчанию в ней выбран пункт Common, т. е. наиболее распространенные объекты (в переводе с английского common — общий, частый, распространенный). Это — кнопки, позволяющие вставить в документ гиперссылку, таблицу, изображение, анимацию и т. д. Поменяем пункт (рис 1.3) ), и в нем — позицию — ).

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

    (рис 1.5) Добавление символов(рис 1.4) Сохранение документа

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

    (рис 1.7) Отображение Web-страницы в браузере(рис 1.6) Режим Code

    Таким образом, весь тот ). Мы видим, что вставленное ранее тире представлено в коде фрагментом #8212;. Аналогично будут отображаться и другие символы, которые нельзя напрямую ввести нажатием клавиши на клавиатуре.

    Нажав на кнопку, мы перейдем в режим ).

    (рис 1.8) Режим Split

    Необходимо также отметить, что любое изменение, внесенное нами в документ после его сохранения, отражается в виде звездочки (*) после его названия — как на панели отображения документа, так и в заголовке окна ), и исчезнет, если затем снова сохранить документ ( File > Save или сочетание клавиш Ctrl +S).

    (рис 1.9) Индикация наличия изменений в документе

    Настройка некоторых установок

    Чтобы настроить необходимые нам для дальнейшей работы установки, зайдем в меню Edit s Preferences (равнозначно сочетанию клавиш Ctrl +U). В меню Category слева выберем категорию General и в блоке Editing Options снимем флажок с позиции Use CSS instead of HTML tags. Далее перейдем к категории Accessibility и в блоке Show attributes when inserting: снимем флажок с позиции Images. Наконец, перейдем к категории New Document и в списке Default Encoding выберем пункт Кириллица (Windows), чтобы впредь все создаваемые нами документы изначально поддерживали русские буквы.

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

    (рис 1.10) Закрытие документа
    Вернуться к учебному плану