Растровая и векторная графика

 

ВВЕДЕНИЕ

 

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

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

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

Целью моей курсовой работы - это рассмотреть основные возможности визуального редактора Dreamweaver CS 4 при создании макета для сайта.

Для достижения этой цели были поставлены следующие задачи:

    • Познакомиться с теоретической частью web-дизайна.
    • Познакомиться непосредственно с основными функциями и интерфейсом программы Adobe Dreamweaver CS 4.
    • Рассмотреть основные требования, предъявляемые к Web-странице.

 

 

 

 

 

    1. Создание Web-страниц

 

    1. Требования к Web-странице

 

 

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

Выделим основные моменты.

Это использование графики, цветовое решение, скорость загрузки страницы, использование технологий, содержание, навигация по сайту. Размер страницы должен быть 60-80 Кбайт. При вставке графического изображения, формат изображения должен быть JPEG или GIF формата. Чтобы информация, размещенная на странице, не была избыточной, ее следует делить на части. При выборе цветовой гаммы сайта, т.е. какие основные цвета будут присутствовать на странице, нужно использовать не более четырех различных цветов. [6, стр. 43]

 

    1. Язык HTML

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.

При помощи языка HTML можно создавать web - страницы в обычном блокноте или Word-е. Также можно создавать web - страницы и без знания языка HTML, поскольку теги HTML могут создаваться разными специальными редакторами и конвертерами. В курсовой работе я рассмотрю программу-редактор Adobe Dreamweaver CS 4.

Все в HTML языке осуществляется при помощи тегов, т.е. команд, которые заключены в скобки такого вида: “< “ и “>”. Например, <title>БГПУ Физико-Математический факультет</title>. [6, стр. 25]

 

    1.  Возможности программы Dreamweaver

 

 

2.1 Знакомство с программой Dreamweaver

 

 

При самом первом запуске программы, будет предложено выбрать рабочую среду. В Dreamweaver можно создать не только сайт на HTML языке, но и также создавать CSS стили для сайта (цветовые стили), создавать JavaScript. С помощью JavaScript можно создавать календарь, часы, поиск по сайту, а также различные визуальные эффекты. Также в Dreamweaver CS 4 версии есть возможность выбора шаблона сайта, что упрощает работу создателю сайта. На примере рассмотрим создание страницы в формате HTML и изменение ее кодировки.

Создадим новый документ  "File->New" (см. рисунок 2.1.1).

Рисунок 2.1.1

На этой вкладке создадим новый документ, выбрав Basic Page (Базовая страница) -> HTML.

  Откроется рабочее окно программы (см. рисунок 2.1.2)

Рисунок 2.1.2

На созданной странице напишем какой-нибудь текст, состоящий из русско-английских слов. Для примера: "полезная информация по работе с программой Dreamweaver".

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

 Это произошло, потому что не соответствует кодировка «Кириллица». Чтобы изменить кодировку, нажимаем в главном меню Edit (Редактировать) - Preferences (Настройки), в открывшемся диалоге выбираем категорию New Document (Новый документ) и на этой вкладке в списке "Default Encoding", выбрать "Cyrillic (Windows-1251)". Далее в левой части этого диалога выберем пункт "Fonts (Шрифты)" и в списке "Font Setting (Настройки Шрифта)" выберем пункт "Cyrillic (Кириллица)", (см. рисунок 2.1.3).[1, стр. 120]

Рисунок 2.1.3

Также в этом меню можно  изменить фон сайта, цвет гиперссылок, цвет текста, гарнитуру основного  шрифта.

 

 

2.2 Интерфейс программы Dreamweaver

 

 

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

 Большинство панелей  имеют дополнительное меню.

Группы панелей всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы  всегда получить к ним доступ, вне  зависимости от того, какое окно сейчас активно (см. рисунок 2.2.1).

Рисунок 2.2.1

Если же мы захотим убрать какую-либо из этих групп, можно "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group.

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

  • инструментарий объектов

  • инструментарий документа

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

Чтобы вывести эти панели на экран нужно выйти в главное меню программы, потом нажать “Вид (View) - Панели инструментов (Toolbars )” (соответствующие панели (Insert, Document, Standard).[7, стр. 32]

 

 

 

 

 

2.3 Определение сайта в Dreamweaver

 

 

Прежде  чем начать создавать сайт, его необходимо зарегистрировать в Dreamweaver. Эта функция очень полезна, если после создания сайта, будет необходимость использования сайта не только локально, но и глобально (регистрация сайта в интернете). С помощью определения сайта можно выделить файловый каталог, куда будут сохраняться все данные сайта. Также можно указать в какой папке будут хранится все изображения сайта, что обеспечивает более упорядоченную организацию сайта.

Ниже рассмотрено на примере  определение сайта.

  Для того чтобы создать новый сайт, воспользуемся пунктом New site (Новый сайт) меню Site (Сайт). После выбора на экране появится диалоговое окно Site Definition (Определение сайта), состоящее из двух вкладок (см. рисунок 2.3.1).

Рисунок 2.3.1

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

В поле ввода Site Name (Имя сайта) вводится имя сайта. Оно служит только для того, чтобы удобно работать с этим сайтом.

В поле ввода Local Root Folder (Локальный корневой каталог) указывается путь к корневой папке локальной копии сайта.

Флажок Refresh Local File List Automatically  (Обновить локальный список файлов автоматически) включает или отключает автоматическое обновление списка файлов локальной копии сайта.

  В поле ввода Default Images Folder (Папка с картинками по умолчанию) вводится имя папки, в которой по умолчанию будут располагаться все графические изображения, помещаемые вами на Web-страницы сайта.

В поле ввода HTTP Address вводится интернет-адрес сайта.(см. рисунок 2.3.2).

Рисунок 2.3.2

После нажатия кнопки “Готово” в панели Файлы отобразится список файлов сайта, изначально там нет  файлов, но они появляются по мере создания сайта (см. рисунок 3.3.3).

Рисунок 2.3.3

 

 

2.4 Элементы форматирования текста в Dreamweaver

 

 

Данная программа позволяет  не только размещения текста на web-странице, но и его редактирование, форматирование, а также применение к тексту различных эффектов.

Dreamweaver есть много функций форматирования текста:

  • выравнивание текста
  • изменение гарнитуры, стиля, стиля написания шрифта
  • формат шрифта
  • маркировка текста
  • изменение цвета текста

Рассмотрим  эти функции подробнее в интерфейсе программы.

Создадим новую страницу (File - New) и наберем в ней любой текст.

Текст набирается с помощью  клавиатуры, при этом Dreamweaver самостоятельно разобьет текст на строки.

Далее необходимо будет заполнить  поле " Title (Заголовок)". Информация, записанная в этом поле, будет отображаться в заголовке браузера. Для примера, в поле "Title" я впишу " Работа с текстом" (см. рисунок 2.4.1).

Рисунок 2.4.1

И тогда в любом браузере, в его заголовке можно будет  прочесть (см. рисунок 2.4.2)

Рисунок 2.4.1

Сохраним эту страницу, дав ей какое-либо имя. Главным страницам сайтов или директорий дают название: index.htm , index.html , index.php  и так далее.

Для форматирования абзацев  удобнее пользоваться раскрывающемся списком "Format (Формат)" на панели "Properties (Параметры)", (см. рисунок 2.4.3).

Рисунок 2.4.3

Также в Dreamweaver можно выбирать различный шрифт (см. рисунок 2.4.4).

                                                Рисунок 2.4.4

Для выравнивания текста можно  воспользоваться стандартными кнопками (см. рисунок 2.4.5).

 

Рисунок 2.4.5

Для задания (увеличения/уменьшения) отступа абзацев можно воспользоваться пунктами "Indent", "Outdent".

При каждом нажатии пункта "Indent" отступ будет увеличиваться, а при нажатии на "Outdent" наоборот уменьшаться (см. рисунок 2.4.6).

Рисунок 2.4.6

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

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

Рисунок 2.4.7

Поставим текстовый курсор на любом пункте списка, в контекстном меню выберим  пункт “Список - Свойства” и появится диалоговое окно List Properties, с помощью которого  можно задать некоторые параметры списка. Изменить стили маркеров или нумерацию (например: использовать буквы вместо цифр - a b c d;), а так же, для нумерованных списков, задать число, с которого следует начинать нумерацию. Поля ввода "List Type" (три верхних) - позволяют задать тип всего списка, а поля ввода "List Item" (два нижних поля) - относятся только к той строке списка, на которой в настоящее время установлен курсор мыши (см. рисунок 2.4.8).

Рисунок 2.4.8

В Dreamweaver можно изменять цвет текста. Для этого нужно выделить какую-либо часть текста и нажать на кнопку (см. рисунок 2.4.9).

Рисунок 2.4.9

В открывшемся диалоге  представлена палитра цветов (см. рисунок 2.4.10).

Рисунок 2.4.10

Можно выбрать любой цвет из этой палитры с помощью пипетки,  в верхнем окошке этой палитры отображается цвет той области, на которой сейчас находится пипетка. [3]

Причем, выбирать цвет можно не только при помощи палитры, но и перемещая пипетку по всему документу в видимом окне редактора. 

 

 

 

 

 

2.5 Связи и навигация

 

 

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

Для того чтобы сделать  из любого слова или нескольких слов гиперссылку - достаточно задать тег гиперссылки к данному тексту или фразе слов. Для наглядности - в тексте  "Macromedia DreamWeaver. Практикум" выделим словосочетание " Macromedia DreamWeaver." и в поле "Link" вкладки "Properties" введем начальный адрес этого руководства (http://Dreamweaver/) и нажмем "Enter", (см. рисунок 2.5.1).

Рисунок 2.5.1

После этого, слова "Macromedia DreamWeaver. Практикум" изменили цвет и стали гиперссылкой. Для удаления гиперссылки - нужно удалить интернет адрес  в поле "Link" вкладки "Properties" и так же нажать клавишу "Enter".  Рассмотрим корнезависимый каталог.

Выделив  " Macromedia DreamWeaver" нажмем кнопку  с изображением папки (см. рисунок 2.5.2).

Рисунок 2.5.2

И в открывшемся диалоге можно указать страницу, на которую следует перейти при нажатии по этой ссылке. Так как и эта  и та страница, куда эта гиперссылка направит, расположены  в одной папке, то достаточно просто выделить мышкой нужную страницу и нажать кнопку "ОК".

Раскроим список "Target" вкладки "Properties".

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

 

 

2.6 Якоря в Dreamweaver

 

 

Для вставки якора на страницу необходимо нажать кнопку на вкладке "Common". В открывшемся диалоге указать имя якоря имя "new_page_11_top".

Теперь осталось только установить здесь ссылку на этот якорь. Для этого  нужно выделить текст,  и в поле "Link" вкладки "Properties" ввести адрес гиперссылки ссылающейся на этот якорь:  #new_page_11_top (см. рисунок 2.6.1).

 

Рисунок 2.6.1

Решетка (#) перед именем якоря - это и есть команда браузеру "направиться" к отметке под именем new_page_11_top. [2, стр 138]

2.7 Работа с графикой

 

 

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

Помимо всего прочего, можно задать фон страницы. Если в качестве фона задать какой-либо цвет, то нужно воспользоваться для этого пунктом "Background (Фон)". И в раскрывшейся палитре выбрать нужный  цвет. Фоновую картинку можно задать выбрав файл в соответствующем поле этого же диалогового окна (см. рисунок 2.7.1).

Рисунок 2.7.1

 

 

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

 

 

Dreamweaver также позволяет вставлять графическое изображение на страницу. В качестве изображения можно использовать различные графические форматы: PNG, GIF, BMP, GIF. Также стандартные средства Dreamweaver позволяют редактировать изображение: изменять размер изображения, делать обрезку изображения, использовать изображение в качестве гиперссылки, а также изменять контрастность и яркость изображения.

Для вставки изображения  необходимо нажать “Common” инструментария объектов - там находится кнопка “Image (Изображение)”. Нажать  на данную кнопку и в появившемся на экране меню выбрать пункт Image. [5, стр. 327]

Также можно воспользоваться  пунктом Image меню Insert или нажать <Ctrl>+<Shift>+<I>. После этого на экране появится диалоговое окно Select Image Source (см. рисунок 2.8.1).

Рисунок 2.8.1

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

 

 

 

 

2.9 Таблицы

 

 

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

Для того чтобы создать  новую таблицу, нужно перейти на вкладку "Commons" панели "Insert" и нажать кнопку (см. рисунок 2.10.1)

Рисунок 2.10.1

В появившемся диалоге можно заполнить необходимые поля.

Rows - количество строк в таблице

Columns - количество столбцов в таблице

Table width - ширина таблицы, причем в выпадающем меню вам нужно указать единицы измерения - проценты или пиксели.

Border thickness - толщина рамки таблицы в пикселях, причем если вы поставите значение равным нулю, то сама таблица будет не видна на странице.

Cell Padding - расстояние отступа внутри ячеек таблицы

Cell Spacing - расстояние между границами ячеек таблицы

Ячейки, составляющие "шапку" и выделенный столбец, будут оформлены  как ячейки заголовка, а текст, который  вводится в них, будет автоматически выровнен по центру и выделен полужирным шрифтом. [4, стр 523]

В поле ввода Caption (Заголовок) вводится название таблицы. Это название будет находиться над создаваемой таблицей.

Раскрывающийся список Align caption (Выравнивание) позволит нам задать местоположение и выравнивание названия (если, конечно, мы его ввели). Здесь доступны следующие пункты:

 • default (по умолчанию) - выравнивание выполняет сам Web-обозреватель, обычно в этом случае название находится над таблицей и выравнивается по центру;

 • top - название находится над таблицей и выравнивается по центру;

 • bottom - название находится под таблицей и выравнивается по центру;

 • left - название находится над таблицей и выравнивается по левому краю;

 • right название находится над таблицей и выравнивается по правому краю.

В области редактирования Summary (Итого) вводится примечание таблицы. Это примечание не выводится Web-обозревателями на экран, но может быть использовано для каких-то других целей (например, его могут обрабатывать программы, читающие экранный текст). Задавать его не обязательно (см. рисунок 2.10.2).

Рисунок 2.10.2

После того как таблица создана,  можно изменять ее размеры.

 

 

ЗАКЛЮЧЕНИЕ

 

 

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

  1. рассмотрев основные понятия в web разработке мы пришли к выводу, что при написании сайта используется язык программирования HTML. С помощью этого языка можно отформатировать текст, вставить гиперссылки, вставлять графические изображения, таблицы.
  2. изучив интерфейс и основные возможности программы Dreamweaver, можно сделать вывод, что с помощью этого программного продукта легко создавать сайт, благодаря интуитивному и графическому интерфейсу программы.

 

 

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Леонов, В.Н.  Dreamweaver CS5.5: самоучитель / В.Н. Леонов. - 1-е изд. – М. : - Эксмо-Пресс, 2011. – 380 с.

2. Токарев, С.А. Самоучитель  Macromedia Dreamweaver MX: самоучитель / С.А. Токарев. – 2-е изд. - М. : – Эксмо, 2003. - 423 с.

3. Лепешкин, А.Г. Визуальный HTML-редактор DreamWeaver: курсовая раб. / А.Г. Лепешкин; вятский государственный гуманитарный университет. - Киров, 2003. – Режим доступа : http://www.allbest.ru/  - 24.10.2011.

4. Дронов, В.В. Macromedia Dreamweaver MX 2004: самоучитель / В.В. Дронов. – 1-е изд. – П. : – БХВ-Петербург, 2003. - 736 с.

5. Карпов, Б.В. Dreamweaver 4. Краткий курс : самоучитель / Б.В. Карпов, А.С. Жданов. – 2-е изд. – П. : – Питер, 2001. - 432 с.

6. Зольников, Д.С. Как  самостоятельно создать сайт  любой сложности / Д.С. Зольников.  - 1-е изд. – М. : - НТ Пресс, 2005. - 109 с.

7. Хестер, Н.Д. Создание Web-страниц в Dreamweaver  / Н.Д. Хестер.  - 1-е изд. - М. : - НТ Пресс, 2005. – 104 с.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение А

 

 

 

 

 

 

Создание макета сайта  в Dreamweaver CS 4

 

 

Для начала необходимо запустить  программу Dremweaver CS 4, затем создать новый файл (см. рисунок 1).

Рисунок 1

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

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

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

1. Создадим таблицу (Insert->Table), (см. рисунок 2).

Рисунок 2

2. Создадим таблицу с  одним столбцом и с одной  строкой. Ширину таблицы делаем 80 % от ширины нашего экрана (см. рисунок 3).

Рисунок 3

3. Выроним таблицу по  центру (Format->Align->Center).

4. Следующим шагом нужно,  в  таблицу вставить таблицу  с одним столбцом и одной колонкой. Эта таблица выполнит роль «шапки» сайта, то есть там я размещу логотип сайта и название сайта, также в некоторых видах сайта можно размещать слоган или девиз, если этот сайт какой-либо организации или компании. Таблицу вставляем аналогично пункту 2 (Insert-> Table).  

5. Далее вставим таблицу с одной строкой и двумя столбцами ниже, только что созданной мной таблицей. Новая таблица будет являться «телом» нашего макета. В левом столбце будет находиться меню сайта (навигация сайта), а в правом столбце – информационная часть сайта (Insert-> Table).

Рисунок 4

6. В панели навигации,  то есть в левом столбце  таблицы, нужно сделать таблицу  с одним столбцом и, допустим, шестью колонками. Все эти шесть  колонок будут в последующем ссылками на категории сайта (Гостевая книга, форум, «На главную», новости сайта, и т.д.), (Insert-> Table).

Рисунок 5

7. В правой таблице  вставим две таблицы первую  с одним столбцом и одной строкой, а вторую с тремя строками и одним столбцом, и ширину таблицы выставить 90 % от ширины информационной части сайта (правая колонка). Таблицы нужно вставить одну в одну, это позволяет в дальнейшем избежать проблем с «плаванием сайта». (Insert-> Table).

Рисунок 6

Структурирование макета можно считать законченным. Осталось сделать дизайн сайта (графическое  оформление) и вставить основные элементы сайта (ссылки и информацию). 

Допустим, мой сайт будет  посвящен физико-математическому факультету БГПУ. Для начала я нарисую шапку сайта в Adobe Photoshop. Вот, что у меня получилось (см. рисунок 7).

Рисунок 7

8.Вставим готовое изображение  на сайт (Insert-> Image). В результате получится:

Рисунок 8

Теперь я нарисую фон  для моих кнопок и фон для заголовка  информационного поля. После этого вставим кнопки-ссылки в меню навигации, и фон заголовка в информационное поле соответственно.

9. Insert->Image.

Рисунок 9

10. Добавим гиперссылки  к кнопкам панели навигации  (Выделяем нужное изображение, и в меню Properties в поле Link указываем имя страницы, на которую будет переходить сайт при нажатии на картинку), (см. рисунок 10).

 


Рисунок 10

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

Рисунок 11

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

Я создал один из самых простых  макетов, с помощью Dreamweaver CS 4. Dreamweaver является мощным инструментом для создания сайтов, с помощью него можно также создавать фреймы, создавать CSS стили (цветовые схемы сайта), а кроме того писать часы, календари на JavaScript языке. Поэтому программа Dreamweaver подойдет как новичку web дизайна, так и профессионалу в сайтостроению, позволяя экономить время на создание сайта.