Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Реферат на тему: «Создание Web – сайта с помощью программ Macromedia Dream weaver-8 и Конструктора сайта»
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 24 мая.

Подать заявку на курс
  • Информатика

Реферат на тему: «Создание Web – сайта с помощью программ Macromedia Dream weaver-8 и Конструктора сайта»

библиотека
материалов


Муниципальное образовательное учреждение

«Средняя общеобразовательная школа №3»

города Каргополя Архангельской области








Реферат


Тема: Создание Web – сайта с помощью программ Macromedia Dream weaver-8 и Конструктора сайта.















Выполнила:

Ученица 11а класса

Богданова Люба

Преподаватель:

Карпунина Т. В.



План


I. Введение

II. Основная часть


2.1. Macromedia Dream weaver-8

2.1.1. Панели программы

2.1.2. Работа с Web-страницами

2.1.3. Использование HTML-стилей

2.1.4. Создание обычных гиперссылок

2.1.5. Использование "якорей"

2.1.6. Вставка даты

2.1.8. Изображения-гиперссылки

2.1.7. Работа с графическими изображениями

2.1.8. Изображения-гиперссылки

2.1.9. Активные изображения

2.1.10. Карты-изображения

2.1.11. Графика Macromedia Flash

2.1.12. Фоновые изображения

2.1.13. Табличный дизайн


2.2. Конструктор школьных сайтов

2.2.17. Оглавление с чекбоксами

2.2.1. Создание нового сайта

2.2.2. Ввод заголовка сайта

2.2.3. Ввод колонтитула

2.2.4. Ввод заголовка страницы

2.2.5. Добавление, форматирование текста

2.2.6. Добавление иллюстраций

2.2.7. Вставка Flash-анимации

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

2.2.9. Вставка сносок

2.2.10. Конвертация сайта в HTML и просмотр результата

2.2.11. Добавление страниц типа «фотоальбом»

2.2.12. Создание и ведение страницы Словарь

2.2.13. Создание тестов

2.2.14. Создание архива документов

2.2.15. Вставка ссылок

2.2.16. Создание карты сайта

2.2.18. Управление навигацией: редактор меню сайта

2.2.19. Почтовый ящик


III. Заключение




I. Введение


Тема данного реферата для нас очень актуальна. Перед нами стояла задача – создать сайт своей школы. Мы долго обдумывали, что да как будем делать. Затем решили участвовать в конкурсе, проходившем в городе Северодвинске, под названием «Исторические и культурные памятники Архангельской области», и создали сайт «Каргополь – жемчужина Русского Севера» в программе Macromedia Dream weaver-8. Нам очень понравилось, и мы решили на этом не останавливаться. И приступили к созданию сайта школы, но уже в другой программе - Конструктор школьных сайтов. И в процессе создания сайта мы поняли, что просто необходимо как-то оформить нашу работу, подвести некий итог. Мы приняли участие в Конференции с данной темой, а теперь лишь оформим её в этом реферате. Итак, начнём!

Любой сайтэто своего рода визитная карточка. Как правило, на страницах сайта посетителей знакомят с различными сторонами жизни.

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

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


А теперь посмотрим основные моменты, на которые нужно обращать внимание при создании сайта:

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

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

В-третьих, на содержательную сторону. Избыток текста на странице считается большим минусом. Также плохо смотрятся страницы, перегруженные графикой. Но и полное отсутствие её также не допускается. Лучше всего воспринимаются небольшие страницы с гиперссылками (выделенными в тексте словами, позволяющими перейти на другие страницы) и с небольшими картинками (при желании даётся гиперссылка на увеличенное изображение). Обязательно должны быть отступы от картинок и фотографий до текста и альтернативные подписи для каждого графического изображения.

И, наконец, обязательное условие – присутствие на сайте выходных данных: полные почтовый и электронный адреса, телефон с кодом города, факс.

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


Любой сайт – это живой организм. Он не должен представлять собой отсканированную печатную брошюру. Все проводимые мероприятия, праздники, разрабатываемые проекты следует отражать на «страницах» в Интернете. Многие разделы сайта должны постоянно обновляться.


При подготовке к созданию своего первого сайта мы выделили следующие этапы работы, которыми пользовались и при создании второго сайта – сайта нашей школы:

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

II этап – написание контента. Контент – информационное наполнение сайта – играет важную роль, так как именно информация – главное для посетителей сайта. Это информационное наполнение должно привлекать внимание и побуждать посетителей вновь и вновь обращаться к сайту.

III этап – разработка визуальной составляющей сайта. В неё входит разработка дизайна графических элементов, обработка графики. Важно помнить, что дизайн помогает лучше ориентироваться на сайте, улучшает эстетическое восприятие информации.

IV этап – написание кода. Работа включает в себя создание Web-страниц, программирование, написание функциональной части.

V этап – тестирование. Здесь проверяется удобство навигации, целостность данных, корректность ссылок и орфография.

VI этап – публикация и продвижение сайта. Размещение сайта на сервере организации, предоставляющей такие услуги.


Создавать сайты можно по-разному и с помощью огромного количества программ. Мы за последнее время создали, как уже говорилось, два сайта в разных программах: Macromedia Dream weaver-8 и Конструктор школьных сайтов. И в данном реферате хотим показать в сравнении создание сайтов в этих программах, сложности, возникшие при работе в этих программах, выявить все плюсы и минусы данных программ.



II. Основная часть


2.1. Macromedia Dream weaver-8

Macromedia Dreamweaver MX — последняя версия популярного Web-редактора компании Macromedia. Это исключительно мощная программа, поддерживающая все современные стандарты Интернета и невероятно облегчающая выполнение даже самых сложных задач. Кроме того, она содержит в своем составе развитую систему подсказки и интерактивных уроков, позволяющих начинающему пользователю быстро приступить к работе. По иронии судьбы, Dreamweaver "задвинут" в тень своего более "раскрученного" собрата Microsoft FrontPage. Но — будьте уверены! - он не заслужил такой участи.

Macromedia Dreamweaver — достаточно "старый" пакет. Первая его версия была разработана еще в 1998 году и получила популярность в России благодаря своей "благосклонности" к русскому языку и снисходительному отношению к множеству русскоязычных кодировок.

Dreamweaver — программа с многодокументным интерфейсом или просто многодокументная программа. Это значит, что вы можете открыть в одном и том же окне программы сразу несколько документов. В этом случае окна, содержащие открытые документы, открываются внутри большого окна самой программы. К многодокументным приложениям также относятся Microsoft Word и Adobe Photoshop. В отличие от них, программы с однодокументным интерфейсом (однодокументные программы) могут открыть только один документ; чтобы открыть второй, нужно запустить вторую копию программы. Примерами однодокументных приложений являются, в частности, текстовый редактор Microsoft WordPad и графический редактор Microsoft Paint, поставляемые в составе Windows.


2.1.1. Панели программы


Главное окно Dreamweaver служит "вместилищем" для превеликого множества других окон, содержащих как открытые Web-страницы, так и различные инструменты, предназначенные для работы с ними. Также в главном окне находится строка главного меню, с помощью которого вы сможете получить доступ ко всем возможностям Dreamweaver.

Окно документа Dreamweaver служит для отображения открытой Web-страницы. Как и любая другая многодокументная программа, Dreamweaver может открыть в главном окне сколько угодно окон документов. Вы можете перемещать, свертывать и развертывать эти окна и изменять их размеры, в общем, проделывать с ним те же манипуляции, что и с любым другим окном Windows. Единственное исключение: вы не можете "вытащить" ни одно из этих окон за пределы главного окна программы (его еще называют родительским окном).

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

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

Как правило, все панели Dreamweaver имеют примерно одинаковые возможности (но, конечно, разное назначение). Но две из них стоят особняком. И мы сейчас их рассмотрим.

Первая из них — это панель объектов, показанная в "плавающем" виде на рис. 2.3 (она носит название Insert). Эта панель служит для быстрой вставки в документ различных элементов: рисунков, таблиц, специальных символов, расширений Web-обозревателя и пр. (Также она служит для переключения режимов работы окна документа, но об этом поговорим позже.) Панель объектов содержит множество вкладок, между которыми вы можете переключаться, — это способ сделать ее чуть более вместительной.

Вторая панель, имеющая заголовок Properties, — это редактор свойств (рис. 2.8), один из важнейших и незаменимейших инструментов Dreamweaver. Редактор свойств служит для задания параметров того или иного элемента Web-страницы (фактически — значений атрибутов соответствующего HTML-тега). Если панель объектов вы можете со спокойной душой закрыть, чтобы освободить место на экране, и использовать для вставки элементов страницы пункты меню главного окна, то редактор свойств вам будет нужен всегда. Поэтому держите его под рукой. Если же вы его все же случайно закрыли, выберите в меню Windows пункт Properties или нажмите комбинацию клавиш +.

hello_html_3586facb.png

Рис. 2.8. Редактор свойств

2.1.2. Работа с Web-страницами

А теперь рассмотрим основные принципы работы с Web-страницами в Dreamweaver. И заодно поговорим об окне документа.

Итак, как же в Dreamweaver создаются Web-страницы?

Очень просто. Точно так же, как создаются обычные текстовые документы в вашем текстовом редакторе, например, Microsoft Word. Вы просто набираете нужный текст, форматируете его и, наконец, сохраняете готовый документ в виде файла. Только в случае Dreamweaver этот документ будет иметь расширение htm или html и может быть сразу же помещен на Web-сервер.

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

Выберем в списке Category пункт Basic Page, а в списке Basic Page — пункт HTML, после чего нажмем кнопку ОК. На экране появится пустое окно документа. Новая Web-страница создана.

2.1.3. Использование HTML-стилей

Очень и очень многие мощные текстовые редакторы предлагают пользователю так называемые стили, т. е. описания формата фрагментов текста, имеющие имя и сохраненные отдельно от редактируемого документа. Выделив фрагмент текста и выбрав стиль, пользователь может мгновенно применить к этому фрагменту все стилевые настройки: шрифт, выравнивание, цвет текста и т. п. Если же пользователю потребуется быстро изменить форматирование текста, он может просто отредактировать стиль — и все его настройки будут мгновенно применены к тем фрагментам, к которым ранее был присвоен этот стиль. К сожалению, HTML не поддерживает стили. Dreamweaver выходит из этого положения, задавая свои стили, называемые HTML-стилями. Со стилями, скажем, Microsoft Word они имеют мало общего, в частности, фрагмент текста не может хранить имя стиля, который был к нему применен. Вдобавок, с помощью HTML-стилей можно задать только шрифтовые настройки, цвет текста и выравнивание абзаца. Однако HTML-стили во многих случаях помогут быстро отформатировать

2.1.4. Создание обычных гиперссылок

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

hello_html_a3759d5.png

Рис. 3.39. Поле ввода интернет-адреса в редакторе свойств

Все, что нам нужно сделать, — это ввести в него адрес и нажать клавишу er>. Результат появится сразу. Теперь при просмотре в Web-обозревателе пользователь может просто щелкнуть мышью по слову, чтобы перейти на желаемую станицу. Согласно стандарту HTML, текст-содержимое гиперссылок форматируется особым образом, чтобы его всегда можно было отличить от остального текста. И по умолчанию все ссылки, еще не посещенные пользователем, выделяются синим цветом.

Для создания гиперссылки из выделенного текста вы также можете воспользоваться пунктом Make Link меню Modify или контекстного меню или нажать комбинацию клавиш +. После этого на экране появится диалоговое окно Select File. Нужный адрес вводится в поле ввода URL этого окна.

2.1.5. Использование "якорей"

Теперь самое время узнать еще об одном виде гиперссылок, весьма специфичном. Это так называемые "якоря" (по-английски — anchors). В отличие от других гиперссылок, они не указывают на другую страницу (файл, адрес электронной почты), а помечают некоторый участок текста текущей страницы, чтобы другая гиперссылка могла на него сослаться.

Зачем это нужно? Ну, например, если ваша Web-страница содержит большой текст, разбитый на главы (кто знает, может, вы написали роман и выложили его в Сети), вы можете поместить в начале нее оглавление. При щелчке на пункте оглавления пользователь тотчас перескакивает на соответствующую главу вашего труда. Очень удобно!

"Якорь" не отображается Web-обозревателем. Однако Dreamweaver, чтобы помочь Web-дизайнеру, показывает на странице специальный значок. Вставим на страницу первый "якорь", для чего поместим текстовый курсор в начало первого абзаца, после заголовка, и переключимся на страницу Common панели объектов. Вы также можете воспользоваться пунктом Named Anchor меню Insert или просто нажать комбинацию клавиш ++. В результате этих действий на экране появится диалоговое окно Named Anchor. В поле ввода Anchor Name введите имя вставляемого "якоря". Имена "якорей" должны состоять из латинских букв и цифр, причем первым символом должна быть буква. После этого нажмите кнопку ОК, чтобы вставить "якорь", или Cancel — для отказа от этого. Dreamweaver отобразит значок "якоря" в позиции, где тот был вставлен. Это делается только для удобства Web-дизайнера, Web-обозреватель, как вы помните, "якоря" на страницах вообще не отображает. Если вы выделите значок "якоря", редактор свойств изменит свой вид. На нем появится единственное поле ввода Name, в котором вы сможете изменить имя "якоря".

hello_html_m410efd1b.pngРис. 3.47. Кнопка Named Anchor панели объектов

Теперь создадим гиперссылку, ссылающуюся на "якорь". Выделим нужную нам строку. Адрес, на который она ссылается, будет, например, выглядеть так: #par1. Значок "решетки" (#) означает, что перед нами имя "якоря". Введите его в поле адреса редактора свойств и нажмите клавишу . Полученная нами гиперссылка ничем не будет отличаться от обычной, указывающей на другую страницу.



2.1.6. Вставка даты

Хорошим тоном в Web-дизайне считается указание даты последнего обновления Web-страницы. В самом деле, дату вставить очень легко — достаточно просто написать число, месяц и год в соответствующем формате. Но что делать, если вы не в состоянии вспомнить, какое сегодня число (как, например, автор этой книги)? Dreamweaver может вставить дату за вас. Вы просто задаете формат даты и времени и указываете, нужно ли обновлять вставленную дату всякий раз при сохранении страницы. Видите, Dreamweaver может даже вместо вас следить за календарем! Поскольку создаваемая нами Web-страница очень проста, мы не будем ставить на ней дату обновления. Вместо этого создадим пустую Web-страницу и вставим дату в нее, для чего переключимся на страницу Common панели объектов и нажмем кнопку Date (рис. 3.56). Вы также можете выбрать пункт Date меню Insert. После этого на экране появится диалоговое окно Insert Date.

hello_html_38cbed65.png

Рис. 3.56. Кнопка Date панели объектов

В списке Date Format выбирается формат даты. Выберите один из двух форматов "число.месяц.год", которые там есть. Раскрывающийся список Time Format задает формат времени. Выберите пункт 22:18, если вы хотите отображать время в 24-часовом формате, пункт 10:18 РМ, если хотите видеть время в 12-часовом формате, или пункт [No Time], если время вам вообще не нужно. Флажок Update Automatically on Save включает или отключает режим обновления даты при сохранении страницы. Как обычно, кнопка ОК выполняет вставку даты, а кнопка Cancel — отменяет. Для примера выберите один из вышеуказанных форматов даты в списке Date Format, пункт 22:18 — в раскрывающемся списке Time Format и включите флажок Update Automatically on Save. He забудьте нажать кнопку OK! После этого на страницу будет помещена сегодняшняя дата.

2.1.7. Работа с графическими изображениями

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

Какие форматы растровых изображений используются в Web-дизайне? В основном, GIF и JPEG. Угадайте, почему? Конечно, потому, что они поддерживают сжатие. Причем, изображения GIF применяют для элементов оформления страниц (линии, маркеры списков и т. п.) и штриховых рисунков, a JPEG — для полутоновых рисунков с большим количеством цветов. Это вызвано тем, что для сжатия изображений этих форматов применяются разные алгоритмы, имеющие свои сильные стороны и свои недостатки. Достоинство формата GIF — возможность задать "прозрачный" цвет. Впоследствии Web-обозреватель вместо точек, имеющих этот цвет, будет подставлять точки "фона" родительского элемента. Говоря просто, можно сделать рисунок с "дырками", сквозь которые "просвечивает" то, что находится под рисунком. К векторным относится формат изображений, созданных в популярнейшей программе Macromedia Flash, а также второй стандартный формат хранения изображений в Windows — WMF (Windows MetaFile — метафайл Windows). Вообще, существует много форматов векторных изображений, здесь перечисляться они не будут.

Вставка графического изображения

Поместим текстовый курсор в конце этого слова и посмотрим на вкладку Common панели объектов — там находится кнопка Image (рис. 4.2). Вы также можете воспользоваться пунктом Image меню Insert или нажать комбинацию клавиш ++.

hello_html_4479fa06.pngРис. 4.2. Кнопка Image панели объектов

Нажмем эту кнопку. На экране появится диалоговое окно Select Image Source. Раскрывающийся список папок и список файлов позволят вам выбрать нужную папку и файл. В поле ввода Имя файла появится имя выбранного файла (или вы можете вручную ввести его туда). А раскрывающийся список Тип файлов позволит вам выбрать, какой тип файлов вы хотите найти. Все это знакомо вам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предварительного просмотра. Итак, вы выбрали файл, где находится изображение.Осталось нажать кнопку ОК. Обратите внимание, что на правой и нижней границе портрета имеются небольшие черные квадратики. Это так называемые маркеры изменения размера. Вы можете "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения. А если вы хотите, чтобы оба размера изменялись пропорционально, перетащите мышью маркер, находящийся в правом нижнем углу изображения при нажатой клавише . Поля ввода W и Н позволяют вам ввести вручную соответственно ширину и высоту изображения. Это может быть полезно, если выделенное изображение — часть оформления сайта и должно плотно "прилегать" к другим таким же элементам оформления. В остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры размера. При вставке графического изображения Dreamweaver сам заполняет эти поля. Мы рекомендуем вам не удалять эти значения. Дело в том, что Web-обозреватель после загрузки страницы отобразит еще не загруженные изображения в виде пустых рамок. Если размеры изображений были явно заданы, они будут сразу же применены к рамкам, и оформление страницы не нарушится. В противном случае Web-обозреватель отобразит рамки некоего размера по умолчанию, и при последующей загрузке изображений их размеры будут меняться, что вызовет изменение самой страницы. А это очень неприятно. Поля ввода V Space и Н Space задают соответственно вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

hello_html_m54cffc74.png

Рис. 4.6. Вид редактора свойств при выделенном изображении

Вы также можете изменить имя файла изображения, выбрав пункт Source File в контекстном меню или просто дважды щелкнув по изображению мышью. После этого на экране появится диалоговое окно Select Image Source.

Поле ввода Border позволяет задать толщину рамки, отображаемой вокруг изображения. По умолчанию она равна нулю, т. е. рамки нет. Поле ввода Alt задает так называемый "альтернативный текст". Это придумано опять же для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображений, помещенных на ней, отобразит пустые рамки соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель отобразит небольшую подсказку, содержащую этот самый "альтернативный текст". Поэтому мы рекомендуем вам всегда заполнять это поле ввода. А теперь обратимся к раскрывающемуся списку Align. Оно позволяет вам задать выравнивание, а фактически — относительное местоположение изображения и обтекающего его текста. Но сначала поговорим о том, как графические изображения размещаются на Web-странице. Дело в том, что изображение, вставленное в текст Web-страницы, ведет себя как обычный символ. Он находится в так называемом "потоке" текста, "льющемся" от начала до конца страницы и заполняющем ее целиком, и всецело подчиняется ему. В этом случае Web-дизайнер жестко ограничен "потоком" текста и не сможет переместить графический элемент туда, куда он хочет. И специально для такого случая был предусмотрен параметр относительного расположения графического изображения и обтекающего его текста.

Раскрывающийся список Align предоставляет Web-дизайнеру следующие пункты:

  • Browser Default — расположение по умолчанию, обычно аналогично пункту Baseline;

  • Baseline — низ изображения совпадает с базовой линией текста (воображаемой линией, по которой пишется строка текста);

  • Тор — верх изображения совпадает с верхом текста;

  • Middle — середина изображения совпадает с базовой линией текста;

  • Bottom — низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);

  • TextTop — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);

  • Absolute Middle — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);

  • Absolute Bottom — низ изображения совпадает с низом самого низко сидящего символа текста;

  • Left — изображение "прижимается" к левому краю страницы;

  • Right — изображение "прижимается" к правому краю страницы;

  • Default - расположение по умолчанию, обычно аналогично пункту Baseline.

Задать выравнивание изображения вы также можете в подменю Align контекстного меню.

Кнопка Reset Size редактора свойств и одноименный пункт контекстного меню позволят вам сбросить размеры изображения в их значения по умолчанию. Это полезно, если вы сильно исказили размеры изображения и хотите начать все сначала. Кнопка Edit редактора свойств и пункт Edit With <имя программы> контекстного меню позволят вам открыть выделенное изображение в программе, установленной в системе как программа для открытия этих файлов по умолчанию. Это та программа, в которой графические файлы будут открыты при двойном щелчке на них в окне Проводника. Вполне возможно, вам от этой функции не будет особой пользы (у автора, например, некоторые изображения открываются в Internet Explorer, в котором много не наредактируешь). В этом случае воспользуйтесь подменю Edit With контекстного меню; выберите в нем пункт Browse, затем выберите в появившемся на экране диалоговом окне открытия файла Windows исполняемый файл нужной программы и нажмите кнопку открытия. Изображение откроется в этой программе, и вы сможете сделать с ним все, что хотите.

2.1.8. Изображения-гиперссылки

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

2.1.9. Активные изображения

Изображение-гиперссылка при наведении на нее курсора мыши никак не проявляет себя. Конечно, можно выставить параметр Border равным пяти или десяти, но это во многих случаях будет не совсем эстетично. Вот сделать бы так, чтобы изображение менялось при наведении на него курсора мыши, чтобы пользователь сразу видел, что это гиперссылка... Оказывается, это можно сделать. Такие изображения, реагирующие на действия пользователя, называются активными. И Dreamweaver позволяет делать их несколькими щелчками мыши. Единственное, о чем вам нужно позаботиться, так это о втором изображении, которое будет появляться на месте исходного, когда пользователь наведет на него курсор мыши (так называемое перекрывающее изображение). Давайте рассмотрим, как поместить на страницу активное изображение. Создадим в графическом редакторе два изображения. Активное изображение вставляется с помощью кнопки Rollover Image вкладки Common панели объектов или пункта Rollover Image подменю Interactive Images меню Insert. При этом на экране появляется диалоговое окно Insert Rollover Image. В поле ввода Image Name вводится уникальное имя вставляемого активного изображения. Имя должно содержать только латинские буквы, цифры и знаки подчеркивания, причем начинаться должно с буквы. Проверьте только, действительно ли это имя уникально. В поле ввода Original Image вводится имя файла оригинального изображение. Если вы не хотите вводить его вручную, нажмите кнопку Browse справа от этого поля ввода. После этого на экране появится диалоговое окно Select Image Source, где вы сможете выбрать нужный файл. В поле ввода Rollover Image вводится имя файла перекрывающего изображения. Также, если вам неохота водить его вручную, на помощь всегда придет кнопка Browse. Флажок Preload Rollover Image заставляет Dreamweaver сгенерировать и вставить в HTML-код вашей страницы небольшую программу-сценарий, которая заранее загрузит перекрывающее изображение. Этот флажок включен по умолчанию, и отключать его не стоит. Если же его отключить, то перекрывающее изображение будет загружено тогда, когда в нем возникнет нужда, т. е. когда пользователь поместит над изображением курсор мыши. В поле ввода Alternate Text вводится "альтернативный текст". Последнее поле ввода When Clicked, Go To URL задает интернет-адрес, по которому произойдет переход, если пользователь щелкнет на изображении.



2.1.10. Карты-изображения

Изображение-гиперссылка — это простейший случай графических гиперссылок, применяемых сейчас в Web-дизайне. Более сложным случаем являются активное изображение и карта-изображение, сложная графическая гиперссылка, представляющая собой изображение, разбитое на части, причем каждая часть является гиперссылкой и указывает на свой интернет-адрес. Например, можно сделать красивую заставку и разместить на ней надписи, соответствующие разделам сайта. Такие части, представляющие собой отдельные гиперссылки, называются "горячими областями". Для создания карты-изображения используются обычные графические изображения, созданные в любом графическом редакторе. Информация о местонахождении, форме, размерах "горячих областей" и интернет-адресах, на которые они указывают, хранится в HTML-коде страницы. Dreamweaver позволяет очень просто создать карты-изображения. Нужные "горячие области" рисуются поверх изображения, после чего остается только ввести интернет-адреса, на которые они будут указывать. Разместить на изображении "горячие области" нам помогут несколько элементов управления, находящиеся в левом нижнем углу редактора свойств.

hello_html_3a0dc204.pngРис. 4.12. Элементы управления редактора свойств, использующиеся для создания "горячих областей"

Прежде всего, рассмотрим четыре кнопки, расположенные вдоль нижней границы окна редактора свойств. Они поделены на две неравные группы. Группа, находящаяся правее и состоящая из трех кнопок, позволяет разместить на изображении соответственно прямоугольную, круглую и многоугольную "горячую область". Единственная кнопка, расположенная левее, позволяет манипулировать уже созданными "горячими областями". Щелкните на кнопке с изображением прямоугольника, затем щелкните по графическому изображению и, не отпуская левой кнопки мыши, протащите ее, пока не захватите всю область изображения, которую хотите сделать "горячей". Вы заметите, что за курсором мыши "тянется" светло-синяя линия. "Охватив" нужную область (в нашем случае, надпись "Сведения об авторе"), отпустите кнопку мыши, и выбранная вами область тотчас закрасится светло-синим. После ввода параметров "горячей области", снова обратим внимание на изображение и саму "горячую область". Вы уже, наверно, заметили, что по углам прямоугольника, представляющего собой эту самую "горячую область", расположены небольшие синие квадратики — маркеры изменения размера. "Захватив" любой такой маркер мышью, вы можете изменить размеры "горячей области". А чтобы переместить ее на другое место, просто перетащите ее мышью. Теперь добавим на наше изображение круглую "горячую область". Вы можете изменять размеры и местоположение круглой "горячей области" так же, как и прямоугольной. Многоугольная "горячая область" создается несколько сложнее. Нажав кнопку с изображением многоугольника, прежде всего, щелкните мышью в месте, где должна располагаться первая из угловых точек многоугольной области. После этого там появится синяя точка — начало нашего многоугольника. Затем щелкните мышью там, где должна быть вторая угловая точка, и Dreamweaver проведет между этими двумя точками линию. Далее вам останется щелкнуть в местах расположения остальных угловых точек многоугольника, a Dreamweaver сам проведет между ними линии, которые и образуют нужную нам многоугольную "горячую" область. Впоследствии вы можете перетащить мышью любую точку этой области. Вот только вставить новую или удалить старую угловую точку вы уже не сможете — вам придется удалить созданную "горячую" область и создать новую. Пункт Link контекстного меню выводит на экран диалоговое окно Select File, где вы можете выбрать файл, на который будет ссылаться "горячая область".

Пункт Alt контекстного меню позволит вам с помощью диалогового окна Change Attribute задать "альтернативный" текст.

2.1.11. Графика Macromedia Flash

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

Поговорим о кнопках Flash. Создайте новую Web-страницу и сохраните ее. Кнопка Flash создается с помощью кнопки Flash Button страницы Media панели объектов. Вы также можете воспользоваться пунктом Flash Button подменю Interactive Images меню Insert. Параметры создаваемой кнопки Flash задаются в диалоговом окне Insert Flash Button.

hello_html_m5836f3c8.pngРис. 4.20. Кнопка Flash Button панели объектов

В диалоговом окне Insert Flash Button вы видите, прежде всего, большой список Style, где представлены все доступные в Dreamweaver стили кнопок Flash. Мы не будем их все рассматривать, т. к. описание получится большое и маловразумительное. Лучше всего вам будет просто посмотреть на них воочию, ведь правду говорят, что лучше один раз увидеть, чем сто раз услышать. Поможет вам в этом панель предварительного просмотра, расположенная выше этого списка. Текст кнопки вводится в поле ввода Button Text.

При создании кнопок необходимо учитывать следующее:

  1. Название кнопок обязательно на английском языке

  2. Все кнопки должны храниться в одной папке, именованной также на английском языке

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

В противном случае – кнопки работать не будут. Но помимо этого всплывает одна из проблем Dreamweaver: это отображение русского языка в тексте кнопки. Её решения пока нет. В нашем случае мы пошли на хитрость: скопировали изображение кнопки на экране, обработали её в Adobe Photoshop, вставили нужный нам текст, сделали активное изображение и получили открывающуюся, работающую кнопку.

2.1.12. Фоновые изображения

Задать фоновое изображение для Web-страницы очень просто. Для этого вызовите на экран диалоговое окно Page Properties, для чего выберите пункт Page Properties меню Modify или контекстного меню или нажмите клавиши +. В поле ввода Background Image введите имя файла фонового изображения или нажмите кнопку Browse и выберите нужный файл в диалоговом окне. Удачно подобранное фоновое изображение может заметно оживить Web-страницу. Но не следует выбирать в качестве фона слишком яркое или пестрое изображение. Лучше всего сразу после задания фона попробуйте сами почитать текст, выведенный на странице, и оцените, легко ли он читается. Если нет, замените фоновое изображение другим или совсем откажитесь от него. Можно также попытаться подобрать соответствующий цвет текста, чтобы он нормально читался, но не резал глаза. Фоновое изображение ведет себя точно так же, как обычные изображения, помещенные на странице: Web-обозреватель сначала загружает HTML-файл страницы, а потом — все сопутствующие файлы, в том числе изображения. Это значит, что какое-то время фон на вашей странице будет отсутствовать. И вам нужно позаботиться о том, чтобы пользователь хотя бы смог прочитать текст вашей страницы. Для этого подберите цвет ее фона, аналогичный общему тону фонового изображения. Так, если фоновое изображение имеет темный тон, задайте для страницы темно-серый, темно-синий или черный цвет фона. И не следует в этом случае оставлять фон страницы белым, т. к. ваш текст тоже, скорее всего, будет белого цвета.

2.1.13. Табличный дизайн

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

Схемы табличного дизайна

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

Сейчас мы рассмотрим самый очевидный способ построения таблиц разметки. (Самый очевидный, но не самый простой.) Это создание "скелета" нашей страницы вручную, т. е. помещение на Web-странице обычной таблицы HTML и форматирование ее специальным образом. Такой способ идеален для небольших таблиц разметки и, следовательно, для простых сайтов. Поместите на странице таблицу. Таблица эта должна содержать три строки и два столбца и не должна иметь границы. Ширина этой таблицы должна быть равна 100%, т. е. таблица должна занимать все окно Web-обозревателя по ширине; высоту же не задавайте. Вообще, задание ширины ячейки — тема отдельного разговора. Интерактивная справка Dreamweaver рекомендует задавать ширину ячеек только после заполнения их содержимым. По крайней мере, выставлять окончательные значения ширины лучше именно тогда: вы сможете сами увидеть, как страница будет выглядеть. Но предварительно ширину можно выставить и до заполнения ячеек, что мы сейчас и сделаем. Итак, ячейки могут иметь фиксированную или неограниченную ширину ("саморастягивающиеся" по горизонтали ячейки). (К сожалению, не предоставляются такие же средства для управления высотой ячеек.) Только одна ячейка в таблице может быть "саморастягивающейся"; значения ширины остальных ячеек должны быть фиксированы. И это логично. Задайте горизонтальное и вертикальное выравнивание содержимого ячейки по центру. Также можете изменить цвет фона. Вставьте кнопки. Основной косяк сайта готов.

Далее можно приступать к созданию остальных страниц сайта, взяв за основу главную страницу. Как это сделать?

  1. Сохраните готовую главную страницу.

  2. Откройте главную страницу, если уже ее закрыли.

  3. Сохраните ее под другим именем, например Projects.htm. Для этого выберите пункт Save As в меню File или нажмите комбинацию клавиш ++.

  4. Удалите все то, что не должно присутствовать на данной странице. Создайте содержимое страницы проектов.

  5. Закройте готовую страницу. Не забудьте сохранить ее при этом.

  6. Повторите пункты 2—5 этого списка для всех страниц вашего сайта.

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

Недостатки табличного дизайна

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

Какие же пути решения этой проблемы существуют?

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

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

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

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

Во-вторых, некоторые части страницы вы можете вынести вообще за пределы таблицы разметки. Чаще всего так поступают со сведениями об авторских правах, реже — с заголовком.

Второй недостаток таблиц — громоздкий HTML-код — к сожалению, непреодолим. Можно только посоветовать, опять же, не создавать слишком уж заковыристых таблиц, а если и создавать, то с помощью Dreamweaver. Он, в отличие от дизайнера-человека, не делает ошибок. Ну, почти не делает...

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

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

Недостатков, пожалуй, всего два. Но каких!!!

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

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

И здесь мы подходим ко второму недостатку табличного дизайна: большой трудоемкости внесения изменений в повторяющиеся элементы. В самом деле, если вы вдруг захотите добавить в полосу навигации новую гиперссылку, вам придется делать это во всех страницах вашего сайта. Хорошо, если их всего пять. А если пятьдесят?

Первый недостаток табличного дизайна непреодолим. Можно только посоветовать не создавать слишком больших и сложных повторяющихся элементов и тщательно оптимизировать HTML-код. И — смириться с неизбежным...

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




























2.2. Конструктор школьных сайтов


«Конструктор школьных сайтов» прост в применении, имеет удобный интерфейс и рассчитан на пользователей, не обладающих специальными техническими  навыками. Им могут пользоваться как преподаватели, так и ученики. Быстро, без особых усилий, несколькими щелчками мыши можно полностью изменить и настроить по своему вкусу внешний вид сайта и его структуру, менять местами, создавать и удалять страницы, разделы и пункты меню, открывать и менять почтовые ящики. В Конструкторе предусмотрено создание различных готовых шаблонов страниц, например, «Новости», «Тесты» или «Фотоальбом» и др. Несомненным достоинством системы является и то, что она рассчитана на работу с любыми, в том числе, со слабыми каналами связи.



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


2.2.1. Создание нового сайта

Создавать сайт в этой программе очень легко, нужно лишь:

- Щелкнуть по кнопке «Новый проект» в левом верхнем углу экрана.

- В окне «Шаг 1: Выбор шаблона» выберите подходящий вам дизайн. Дизайн сайта можно изменить в любой момент.

- Щелкнуть по кнопке «Вперед». Появится окно «Шаг 2: Выбор расположения объекта». Где вы можете выбрать или создать папку для сохранения проекта вашего сайта

- Создать отдельную папку для вашего проекта (вы можете вести несколько сайтов, и каждый из них должен располагаться в отдельной)

папке). Для этого щелкните кнопку «Создать папку». И введите ее имя.

- Щелкнуть по кнопке «ОК»,  папка создана.

- Еще раз щелкнуть по «ОК». Окно с вашим проектом загружено.

Ну, вот и создан основной «косяк» вашего будущего сайта. Осталось только наполнить его содержимым, дать название, вставить нужные страницы. Этим мы сейчас и займёмся.


2.2.2. Ввод заголовка сайта

Верхняя часть рабочего окна, выделенная пунктиром – это заголовок сайта. Заголовок сайта  отображается на каждой странице сайта. В него помещается имя сайта (например, название или номер учебного заведение), можно вставить логотип, небольшое изображение ОУ или Flash-анимацию. Вставим название ОУ, например «Школа № 3». Для этого поставим курсор в поле заголовка сайта и введем название с помощью клавиатуры.

2.2.3. Ввод колонтитула

Нижняя часть рабочего окна, выделенная пунктиром – это колонтитул сайта. Колонтитул сайта, также как и заголовок отображается на каждой странице сайта. Сюда помещается контактная информация, адрес, телефоны или авторы сайта. Заполним колонтитул так же, как и область для заголовка страницы.

2.2.4. Ввод заголовка страницы

Каждая страница имеет заголовок, отображаемый только на этой странице. Это выделенное пунктиром поле, расположенное под заголовком сайта. Заголовок – это название страницы, отображающее ее содержание. Кроме текста в заголовок могут быть помещены небольшие изображения и Flash-анимации. Мы находимся на первой странице сайта. В заголовке такой странице можно написать «Главная», «Добро пожаловать!», «О школе» и. т.п.

2.2.5. Добавление, форматирование текста

По умолчанию, первая страница сайта имеет тип «Универсальная», такая страница напоминает текстовый редактор. В нее можно вносить и редактировать тексты, вставлять тексты из других источников, вставлять таблицы, вставлять изображения, Flash-анимации и т.д.

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

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

2.2.6. Добавление иллюстраций

Для увеличения красочности и информативности сайта, на страницы сайта можно вставлять изображения.

Добавим изображение на нашу страницу (для примера добавим изображения здания школы). Для этого поставим курсор в место, куда мы хотим поместить изображение, и щелкнем кнопку «Изображение» на панели инструментов. Появится окно проводника, в котором необходимо выбрать размещение необходимого нам изображения. Для удобства, при выборе изображения, рекомендуется в меню «Вид» окна проводника выбрать «Эскизы страниц». В этом режиме вы можете просмотреть привью изображений. Выберем изображение и щелкнем кнопку «Открыть». Появится окно «Свойства изображения». Это окно стоит рассмотреть подробнее. Кнопка «Вставка изображения» позволяет выбрать другое изображение. Кнопка «Перейти в графический редактор», позволяет перейти в графический редактор, где вы можете отредактировать изображение, изменить его размеры, воспользоваться фильтрами и т.д. Щелкнем по кнопке и перейдем в графический редактор. Воспользуемся пунктами из меню «Преобразовать» и «Фильтры», для редактирования изображения. Если нам не нравится результат преобразований, то необходимо выйти из редактора и отказаться от сохранения. Для этого нажмем на кнопку «Закрыть» в правом верхнем углу экрана. Или выберем пункту меню «Файл» -  «Выход». И на вопрос «Сохранить» щелкнем мышкой по кнопке «Нет». Закроем графический редактор и вернемся в окно свойства изображения. Если изображение слишком велико, и не помещается в окно просмотра его можно передвигать. Щелкнем по изображению и, не отпуская левую кнопку мыши, передвинем изображение в нужном направлении. При нажатии мышки, курсор будет видоизменен. В полях ширина и высота изображения выставим изображения (размеры указаны в пикселях). Максимально допустимые размеры для изображения, размещаемого на сайте 150 – 200 пикселей. Если установлена галочка «Пропорциональное изменение размеров» (она выставлена по умолчанию), достаточно изменить только один из параметров, второй будет рассчитан автоматически. Выставим размеры изображения. Выпадающее меню «Местоположение» дает выбрать, как текст будет обтекать изображение. Если «Местоположение» будет выбрано «Влево», то текст будет расположен справа от изображения. Выберем местоположение изображения. Отступы по горизонтали и вертикали устанавливаются для того, чтобы текст не находился вплотную к изображению. Выставим их равными 5 пикселям. Если вы укажите толщину рамки, то вы можете задать ее цвет. Но следите, чтобы цвет рамки совпадал с общей цветовой гаммой дизайна. Установим толщину рамки равную 2 пикселям. Выберем цвет рамки, для этого щелкнем по кнопке «Сменить цвет». Выберем подходящий нам цвет и щелкнем «ОК». Описание, это всплывающая текстовая подсказка, которая будет появляться при наведении курсора на изображение, в ней поясняется, что изображено на картинке. Щелкнем по кнопке «ОК». Изображение вставилось на страницу. Если вам не нравится положение картинки на странице, вы можете переместить ее, выделив щелчком мыши и, не отпуская левую кнопку мыши, перетащить в нужное место

2.2.7. Вставка Flash-анимации

Добавим Flash-анимацию на страницу (для этого необходимо знать его размер в пикселях). Для этого поставим курсор, в место, куда хотим вставить анимацию и щелкнем кнопку «Flash». Откроется окно проводника, в котором необходимо указать путь к вашему Flash-файлу. Выберем Flash-файл (расширение *.swf) и нажмем на кнопку «Открыть». Откроется окно «Свойства Flash», в котором мы можем просмотреть наш Flash-файл. В полях «Ширина» и «Высота» установим размеры анимации. И щелкнем на кнопку «ОК». Анимация вставилась на страницу. В режиме редактирования Flash можно просмотреть только в таком виде, но после конвертации в HTML мы его увидим.

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

Покажем, как еще можно располагать объекты на странице. Самый распространенный метод позиционирования объектов на странице – позиционирование с помощью таблиц. Добавим таблицу, поставим курсор в начало рабочего поля и щелкнем по кнопке «Таблица». Появится окно «Свойства таблицы». Выставим количество столбцов равным 2 и количество строк 1. Выставим высоту и ширину таблицы. Ширина и высота могут быть фиксированными и не фиксированными. Фиксированная таблица – это таблица с жестко заданными размерами. Не фиксированная таблица – это таблица, размеры которой определяет помещенный в нее объект (картинка, Flash – анимация, текст, другая таблица). Сделаем нашу таблицу не фиксированной высоты и ширины. Так же как и в свойствах изображения если указана толщина бордюра, можно выбрать ее цвет, но сделаем толщину бордюра равной 0. Под таблицу можно подложить фоновое изображение. Для этого необходимо щелкнуть кнопку «Вставка изображения». Но не увлекайтесь, на фоновых изображениях чаще всего плохо читаются тексты. Если снять галочку напротив надписи «Прозрачный», станет активной кнопка «Сменить цвет» и можно будет выбрать цвет фона под таблицей. Но, оставим фоны как есть. И щелкнем на «ОК». Табличка такая маленькая, потому что она не фиксированных размеров и в нее еще не помещено никаких объектов. Перетащим наше изображение в первый столбец таблицы. Для этого щелкнем по нему и, не отпуская левую клавишу мышки, переместим, так, чтобы курсор замигал в первом столбце. Отпустим левую клавишу мышки. Картинка переместилась. Теперь поместим во второй столбец наш текст. Для этого выделим его и, не отпуская левую клавишу мышки, перетащим так, чтобы курсор замигал во втором столбце. Отпустим левую клавишу мыши. Текст вставился во второй столбец. Снимем выделение, щелкнув мышкой в любом месте рабочего поля. Для удобства работы в режиме редактирования таблица отображается на странице пунктиром, после конвертации в HTML рамка таблицы исчезнет (т. к. бордюр таблицы равен 0).

2.2.9. Вставка сносок

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

2.2.10. Конвертация сайта в HTML и просмотр результата

Чтобы посмотреть, как будет выглядеть наша страничка в Интернете, проведем конвертацию. Для этого щелкнем кнопку «Конвертировать в HTML  и просмотреть». Появится окно «Выбор варианта конвертации». Это наша первая конвертация, конвертироваться будет весь проект, нажимаем на «ОК». Появится окно «Экспорт в HTML». Когда конвертация окончится, появится окно браузера с первой страницей вашего сайта. Отобразится флеш-анимация и исчезнут границы таблицы те, что были равны 0).

2.2.11. Добавление страниц типа «фотоальбом»

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


Параметры фотоальбома

Введем название для нашего фотоальбома. Например «Наши учителя». Выставим количество фотографий, отображаемых в одной строке. Например, 3. Откуда чаще всего берутся изображения для сайта? С цифрового фотоаппарата или сканера. Размер таких фотографий для отображения на веб-странице очень велик, а вес для закачки на компьютер пользователя 2 – 2, 5 Мб. Если у пользователя слабый канал связи или есть ограничения по трафику, просмотр вашей страницы составит для него определенный затруднения. Поэтому для страницы «Фотоальбом» существуют такие параметры, как максимальные размеры привью и основного изображения. Привью – это небольшое изображение, которое будет отображено на странице фотоальбома, по щелчку мышки на привью будет подниматься большое изображение. Размеры, указанные по умолчанию, оптимальны, поэтому оставим как есть. Выставим выравнивание фотографии. Выберем положение подписи к фотографии. Щелкнем по кнопке «Добавить». Страница «Наши учителя» добавилась в проект. Обратите внимание, что она так же добавилась в меню сайта.

Наполнение фотоальбома

Добавим первую фотографию, для этого щелкнем левой клавишей мышки по полю, где она будет размещена. Появится окно «Изменение блока изображения». Выберем «Добавить/Изменить изображение» (выбрано по умолчанию) и щелкнем по кнопке «ОК». Появится окно проводника, где вам необходимо указать путь к необходимому вам изображению. Не забывайте пользоваться функцией «Эскизы страниц». Выберем изображение и щелкнем по кнопке «Открыть». Откроется окно «Свойства изображения». Щелкнем по кнопке «ОК». Первая фотография вставилась в фотоальбом. Добавим подпись под изображением. Подпись под изображением можно редактировать как обычный текст (изменять шрифт, цвет, размер, выравнивание и т. д.). Отредактируем подпись. Аналогичным образом заполним ряд до конца.

«Фотоальбом», как и большинство типов страниц в конструкторе, является блочным типом страницы. Блоком для «Фотоальбома» является сумма из привью, подписи под привью, ссылки на большое изображение и самого большого изображения. Для увеличения количества блоков на странице служит кнопка «Добавить блок». Щелкнем по кнопке. Новый блок добавился на следующей строке страницы.

Что делать, если нам не нравится выбранное количество изображений в строке, положение подписей и т.п.? Щелкнем по кнопке «Свойства страницы», находящейся на панели управления. Появится уже знакомое нам окно «Свойства изображения». Здесь мы можем изменить не устраивающие нас параметры. И щелкнем по кнопке «ОК». Внешний вид страницы изменился.

Работа с блоками

Если нам не нравится положение того или иного блока на странице, его можно переместить. Для этого, поставим курсор в текстовое поле любого из блоков. Рамка блока выделится отличным, от других рамок, цветом. Такой блок называется активным. Щелкнем по небольшой черной стрелочке, рядом с кнопкой «Переместить блок» на панели управления. Откроется выпадающее меню с выбором, куда можно переместить блок. Выберем подходящий нам пункт. Например «Переместить в начало». Если вы хотите удалить ненужный вам блок, поставьте курсор в текстовое поле этого блока. И щелкните по кнопке «Удалить блок». Появится окно «Удаление блока». Щелкнем по кнопке «ОК».

Пакетная вставка изображений

В Конструкторе есть возможность добавлять несколько изображений за один раз. Поставим курсор в текстовое поле одного из блоков. Выберем пункт меню «Страница» - «Добавить группу изображений» и выберем, куда мы хотим добавить новые изображения. Например «После активного блока». Появится окно проводника, в котором необходимо указать размещение ваших изображений. Не забывайте пользоваться отображением в виде «Эскизы страниц». Для выбора нескольких изображений, если они идут,  подряд удерживайте кнопку «Shift» и щелчками левой кнопки мыши выделите первое и последнее изображение в последовательности,  изображения между первым и последним выделятся автоматически. Если необходимо выбрать не следующие подряд  изображения, удерживайте кнопку «Ctrl» и щелчками левой кнопки мыши выделяйте нужные изображения. Выбрав изображения, щелкните мышкой по кнопке «Открыть». Изображения добавились на страницу.



Тематическая разбивка фотоальбома

Заполним текстовое поле над первой строчкой (Учителя старших классов). И поставим курсор в текстовое поле последнего блока первой строки. Щелкнем по маленькой черной стрелке, рядом с кнопкой «Добавить блок». Раскроется выпадающее меню. Выберем в нем «Добавить текстовый блок после активного блока»

2.2.12. Создание и ведение страницы Словарь

Щелкнем кнопку «Добавить страницу». Из списка типов страниц выберем «Словарь». Дадим название: «Словарь по информатике». Отметим галочку «Автоматическая сортировка по алфавиту». Щелкнем по кнопке «Добавить». Добавилась страница и соответствующий пункт меню. На странице выделен блок, состоящий из термина и определения этого термина. Введем термин: «Байт». Введем определение «Единица информации, равен 8 битам». Добавим следующий термин, для чего щелкнем кнопку «Добавить блок». Введем следующий термин: «Ноутбук». Введем определение и добавим фотографию ноутбука. Конвертируем и просмотрим наш словарь.

2.2.13. Создание тестов

Из выпадающего меню «Тип новости» выберем «Тесты». Выберем тип теста: «Тест для самоконтроля» или «Отправлять ответы на почту».

«Тест для самоконтроля» используется в случае, если результаты работы должны быть отображены проходящему тесту, но не будут далее обрабатываться преподавателем.

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

-поле для ввода электронной почты преподавателя;

-выбор «Отправлять через сервер» (работает только в случае размещения сайта на сервере edusite.ru) или  «Отправлять через почтовый клиент» (у проходящего тест должен быт настроен почтовый клиент);

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

Для обоих типов тестов доступен выбор отображения результатов обработки ответов на тест:

- «Результат в виде правильно-неправильно»;

- «Результат в виде кол-ва правильных ответов в вопросе».

Оставим параметры, установленные по умолчанию («Тесты для самоконтроля», «Результат в виде «правильно - неправильно»). Щелкнем кнопку добавить. Появится окно «Выбор типа вопроса», в нем отображены 4-ре поля для выбора: 3 типа вопроса и возможность вставлять комментарии в тест. Тип «несколько из...» - выбор нескольких правильных ответов из списка предложенных(количество правильных ответов произвольно). Если будут выбраны не все правильные ответы, результат будет «не правильно». Тип «один из...» - выбор одного правильного ответа из списка предложенных(правильный ответ может быть только один). Для этих типов вопросов также активен пункт «Параметры», где можно изменить максимальное количество ответов на вопрос (незаполненные ответы отображаться не будут). Тип «вставка пропущенных букв» - пользователю предоставляется окно для ввода ответа, после щелчка по кнопке ответить ответ пользователя сравнивается, с ответом заданным преподавателем. Учитывается регистр, язык ввода, пробелы и знаки препинания. 

Выберем тип вопроса «один из...», поле «Максимальное количество ответов на вопрос» оставим установленным по умолчанию и щелкнем «ОК».  Заполним вопрос и варианты ответов (напротив правильного необходимо поставить пометку). Вопрос и варианты ответов кроме текста могут содержать Flash-анимацию, изображения и т.п., а текст теста можно редактировать как обычно(изменять размеры и цвет шрифта, ставить отступы и т.п.).  Добавим следующий тип вопроса, для этого щелкнем кнопку «Добавить блок» на панели инструментов.  Появится окно «Выбор типа вопроса», выберем «вставка пропущенных букв» и щелкнем по кнопке «ОК».  В этом типе вопроса необходимо заполнить, например, слова, а буквы, которые должен ввести ученик, поставить в квадратные скобки(для этого необходимо перейти на английскую раскладку клавиатуры). Так же вместо букв в скобки могут быть вставлены слова, цифры, знаки препинания, а также целые предложения.

2.2.14. Создание архива документов

Добавим новую страницу, щелкнув по кнопке «Добавить страницу» на панели инструментов. В окне «Свойства страницы» оставим тип страницы «Универсальная» и назовем страницу «Архив документов». Для чего необходимо иметь на сайте страничку «Архив документов»? Любое образовательное учреждение имеет большое количество официальных документов, таких как устав школы, правила распорядка, правила приема школьников, расписание и т.д. Эта информация должна быть доступна пользователям сайта, т. к.  довольно большая часть посетителей ищет именно ее. Не помещайте текст этих документов прямо на страницы сайта, поскольку чаще всего они довольно объемны, и попытка загрузки страницы, их содержащей, может привести к длительному ожиданию или зависанию браузера. На такие документы необходимо ставить ссылки, чтобы дать возможность их закачки и сохранения на жестком диске пользователя. Покажем, как это делать.

2.2.15. Вставка ссылок

Введем текст на страницу. Щелкнем по кнопке «Ссылка» на панели управления. Появится окно «Создание ссылок». Выберем пункт «Ссылка на локальный файл». И щелкнем по кнопке «Выбрать файл». Появится окно проводника, в котором необходимо указать путь помещаемому на сайт документу(например тексту приказа). Выберем нужный нам документ и щелкнем кнопку «Открыть». Мы вернулись в окно «Создание ссылок», в котором теперь указана ссылка на размещение файла. Щелкнем по кнопке «ОК». После щелчка на кнопку «ОК» произошло копирование документа в папку проекта. Чтобы убедится в этом поставьте курсор внутрь текста «Приказ 1». В нижнем поле Конструктора будет показано реальное размещение файла.  После конвертации при щелчке по ссылку будет подниматься окно текстового редактора, содержащее ваш документ. Поскольку Конструктор копирует документ в собственную папку, при изменении этого документа необходимо обновить ссылку. Для этого щелкните правой кнопкой мышки по тексту, содержащему ссылку, и выберите пункт меню «Свойства ссылки». Снова откроется окно «Создание ссылок», содержащее ссылку на файл, скопированный в папку с вашим проектом. Щелкнув по кнопке «Выбрать файл» необходимо указать в проводнике место, где расположен измененный вами документ, и Конструктор обновит его версию, заменив старый документ, на указанный. Закроем окно «Выбрать файл», щелкнув по кнопке «Отмена». Мы вернулись на страницу «Архив документов». Теперь выделим текст «Приказ 2». И снова щелкнем по кнопке «Ссылка». В появившемся окне «Создание ссылок» выберем пункт «Ссылка на страницу сайта» (выбран по умолчанию). При необходимости можно ставить ссылки на страницы внутри проекта, для этого выберите из выпадающего меню нужную вам страницу. Далее выберем, в каком окне браузера будет открыта ссылка. При выборе «В этом окне» - страница загрузится в том окне браузера, в котором был загружен сам сайт. «В новом окне»  - будет образовано еще одно окно браузера и в нем будет загружена ссылка. Оставим «В этом окне». Если страниц в сайте много, то выпадающее меню со списком страниц сайта использовать неудобно. Для этого в пункте «Ссылка на страницу сайта» организован поиск. В пустом текстовом поле напротив кнопки «Найти» наберем слово, которое содержится в названии страницы. Например «Архив». Станет активной кнопка «Найти», щелкнем по ней. В выпадающем меню останутся только те страницы, названия которых содержат введенное слово (если такие страницы существуют). Для нас это страницы, содержащие слово «архив». Чтобы вернуть все страницы в список щелкнем по кнопке «Показать все». Меню со списком страниц восстановится. Выберем в нем страницу, на которую мы хотим сделать ссылку. Например «Наши учителя». И щелкнем по кнопке «ОК».

 



2.2.16. Создание карты сайта

Добавим еще одну страницу (Кнопка «Добавить страницу»). Оставим тип страницы «Универсальная». Назовем страницу «Карта сайта» и щелкнем «Добавить». Добавилась новая страница, поставим курсор в рабочее поле. Выберем пункт меню «Вставка» - «Оглавление».  Список ссылок на страницы проекта вставился на страницу.

2.2.17. Оглавление с чекбоксами

Рассмотрим еще одну интересную функцию Конструктора – оглавление с чекбоксами. Эта функция более интересна при создании электронных курсов.

Поставим курсор через одну строчку под картой сайта (с помощью кнопки Enter). Выберем пункт меню «Вставка» - «Оглавление с чекбоксами». Оглавление с чекбоксами вставилось на страницу. Проведем конвертацию в HTML(кнопка конвертировать в HTML и просмотреть). В появившемся окне браузера перейдем на страницу «Карта сайта Теперь перейдем к оглавлению с чекбоксами. Щелкнем левой кнопкой мышки по рамке рядом с пунктом оглавления. Рядом с пунктом оглавления появятся значки. Щелкнем мышкой по одному из них. Например, по зеленой галочке. Значок установился напротив пункта оглавления. Таким образом, человек, работающий с электронным пособием, может помечать его темы для дальнейшего обучения

Например (значения значков могут быть и другими):

 

hello_html_m13117980.png

не проходил тему

hello_html_m5aace397.png

прошел тему

hello_html_m1e0dbcc6.png

остались вопросы

Выставим еще несколько значков напротив пунктов оглавления. Теперь перейдем на другую страницу сайта. Например «Новости школы». И вернемся с нее обратно на страницу «Карта сайта». Значки сохранились. Установки сохраняются в «Cookie» (файлах–ключиках). Пользователь может закрыть браузер и даже выключить компьютер, но все, что он выбрал во время работы, сохранится, и он сможет пользоваться пометками во время следующего сеанса.





2.2.18. Управление навигацией: редактор меню сайта

В нашем проекте уже 6 страниц. Пока допустимо размещение всех страниц в левом меню сайта, но что делать, если их значительно больше? Размещать их все в левом меню крайне неудобно и для работы с сайтом и для его просмотра пользователями. В конструкторе есть возможность размещать на странице еще три вида меню (кроме левого). Давайте подробнее рассмотрим работу с меню. Щелкнем мышкой по кнопке «Редактор меню» на панели инструментов. Появится окно «Редактор меню». В левой части расположен список всех страниц сайта.

А справа располагаются все меню с их содержимым. Пока у нас есть только левое вертикальное меню. Чтобы увидеть список входящих в него страниц щелкнем по плюсику рядом с ним. Раскроется список. В этом списке можно изменить названия пунктов меню, изменить порядок их расположения и создать подменю. Рассмотрим, как это сделать. Изменим название пункта меню(название страницы при этом не изменится, поэтому у вас может быт два пункта меню с разными названиями, но ссылающимися на одну и ту же страницу). Выделим пункт меню, который мы хотим изменить. Например «Главная». Щелкнем по нему еще раз(стоит быть внимательным, потому что необходимо сделать именно выделение и щелчок левой клавишей мышки, а не просто двойной щелчок). Теперь мы можем редактировать название с помощью клавиатуры. Назовем это пункт меню «Добро пожаловать!». Теперь покажем, как можно переместить пункт меню выше или ниже по списку. Допустим, мы хотим чтобы «Новости школы» стал вторым пунктом меню. Выделим его щелчком мышки. Станут активными кнопки «Переместить по меню вверх» и «Переместить по меню вниз», этими кнопками вы можете свободно перемещать пункты меню. Щелкнем по кнопке «Переместить по меню вверх». «Новости школы» стал вторым пунктом меню.

Теперь рассмотрим, как делать подпункты в меню. Допустим, мы хотим чтобы «Новости школы» стал подпунктом раздела «Добро пожаловать!». Для этого выделим его (если он еще не выделен) и щелкнем по кнопке «Переместить на более низкий уровень». Пункт «Новости школы» перешел в подменю. Подпункты можно создавать до 2-го уровня вложения. И стала активной кнопка «Переместить на более высокий уровень». Воспользовавшись этой кнопкой, вы можете вернуть подпункты в основное меню. Добавим еще несколько подпунктов.  По умолчанию для отображения подпунктов выбран каскадный тип меню (подменю выпадает при наведении мышкой на раздел). Выпадающий тип меню не отображается в режиме редактирования из-за неудобства работы с ним.

2.2.19. Почтовый ящик

Создадим почтовый ящик, для этого щелкнем по пункту меню «Добавить почтовый ящик». Появится поле, в которое необходимо ввести имя вашего почтового ящика. Имя почтового ящика может содержать латинские буквы, арабские цифры и дефис. Введем имя почтового ящика и щелкнем «Зарегистрировать». Вы получите данные, необходимые для настройки почтового клиента. Скопируйте их и сохраните в текстовом документ(эти данные всегда можно изменить с главной страницы виртуального кабинета). Вернемся на «Главную». Почтовый ящик добавился в список «Ваша почта».

Вот такие основные возможности данной программы, которые представляют наибольший интерес пользователей.
















































III. Заключение


В своей работе мы не ставили цели продемонстрировать все возможности данных программ, а хотели лишь показать их в сравнении. Мы выявили основные плюсы и минусы этих программ.

У Конструктора сайтов очень много плюсов. Это и простота в использовании, и полное отсутствие мелких нюансов, которые нужно знать, чтобы создать свой сайт. У Macromedia Dream weaver-8 же можно долго перечислять мельчайшие детали, которые просто необходимо знать, иначе сайт работать не будет. А это, сами понимаете, не относиться к положительной стороне программы. На создание сайта в первой программе уходит около двух дней, а во второй – больше месяца. Но этим мы не хотим сказать, что изучать и использовать при создании сайтов программу Macromedia Dream weaver-8 не нужно. При всех своих недостатках и недоработках «строптивый» Dream weaver-8 имеет один огромный плюс. Сайт, созданный в этой программе, уникален по дизайну и нигде ранее не встречался (если вы, конечно, не взяли чужую идею при работе). Для нас, несомненно, ближе сайт, созданный в программе Macromedia Dream weaver-8, потому что, создавая его, мы потратили столько сил, энергии и времени, что можно сказать, вложили всю душу в него. Конструктор сайтов просто незаменим, если нужно быстро создать сайт и если пользователь – неопытный человек, никогда не обращавшийся к сложным программам.hello_html_1a4389b4.gifhello_html_1a4389b4.gif


Краткое описание документа:

Тема данного реферата для нас очень актуальна. Перед нами стояла задача – создать сайт своей школы. Мы долго обдумывали, что да как будем делать. Затем решили участвовать в конкурсе, проходившем в городе Северодвинске, под названием «Исторические и культурные памятники Архангельской области», и создали сайт «Каргополь – жемчужина Русского Севера» в программеMacromediaDreamweaver-8. Нам очень понравилось, и мы решили на этом не останавливаться. И приступили к созданию сайта школы, но уже в другой программе - Конструктор школьных сайтов. И в процессе создания сайта мы поняли, что просто необходимо как-то оформить нашу работу, подвести некий итог. Мы приняли участие в Конференции с данной темой, а теперь лишь оформим её в этом реферате. Итак, начнём!

Автор
Дата добавления 17.12.2014
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров1372
Номер материала 192751
Получить свидетельство о публикации

Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Похожие материалы

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