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

Для того чтобы сделать  из любого слова или нескольких слов гиперссылку - достаточно задать тег гиперссылки к данному тексту или фразе слов. Для наглядности - в тексте  "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 дизайна, так и профессионалу в сайтостроению, позволяя экономить время на создание сайта.