Автор работы: Пользователь скрыл имя, 15 Декабря 2012 в 11:24, курсовая работа
Поэтому для удобства используется визуальный HTML - редактор DreamWeaver CS 4 или другие аналогичные HTML редакторы или конверторы. Этот програмный продукт рассчитан на тех, кто плохо знает язык HTML. Dreamweaver CS 4 содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML - кодом. Интуитивный интерфейс Dreamweaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт или шаблон к сайту.
При создании web-страниц текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много недостатков: не поддерживаются проекты, отсутствует "подсветка" ошибок синтаксиса.
Поэтому для удобства используется визуальный HTML - редактор DreamWeaver CS 4 или другие аналогичные HTML редакторы или конверторы. Этот програмный продукт рассчитан на тех, кто плохо знает язык HTML. Dreamweaver CS 4 содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML - кодом. Интуитивный интерфейс Dreamweaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт или шаблон к сайту.
Актуальность данной темы - это популярность на сегодняшний день создания web ресурсов для малых организаций или учебных заведений, где нету профессионалов в языке программирования HTML, поэтому программный продукт Dreamweaver на мой взгляд лучшее решение для создания сайтов.
Целью моей курсовой работы - это рассмотреть основные возможности визуального редактора Dreamweaver CS 4 при создании макета для сайта.
Для достижения этой цели были поставлены следующие задачи:
Для того, чтобы сайт визуально воспринимался, при создании сайта необходимо придерживаться нескольким требованиям.
Выделим основные моменты.
Это использование графики, цветовое решение, скорость загрузки страницы, использование технологий, содержание, навигация по сайту. Размер страницы должен быть 60-80 Кбайт. При вставке графического изображения, формат изображения должен быть JPEG или GIF формата. Чтобы информация, размещенная на странице, не была избыточной, ее следует делить на части. При выборе цветовой гаммы сайта, т.е. какие основные цвета будут присутствовать на странице, нужно использовать не более четырех различных цветов. [6, стр. 43]
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы.
При помощи языка HTML можно создавать web - страницы в обычном блокноте или Word-е. Также можно создавать web - страницы и без знания языка HTML, поскольку теги HTML могут создаваться разными специальными редакторами и конвертерами. В курсовой работе я рассмотрю программу-редактор Adobe Dreamweaver CS 4.
Все в HTML языке осуществляется при помощи тегов, т.е. команд, которые заключены в скобки такого вида: “< “ и “>”. Например, <title>БГПУ Физико-Математический факультет</title>. [6, стр. 25]
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
Если же мы захотим убрать какую-либо из этих групп, можно "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group.
Также в Dreamweaver существует три большие панели. От обычных панелей они отличаются тем, что имеют постоянные размеры и образуют каждая свою особую группу панелей:
Чтобы вывести эти панели на экран нужно выйти в главное меню программы, потом нажать “Вид (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" наоборот уменьшаться (см. рисунок 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-страницы, гиперссылки на файлы, а также ссылки так называемые «якоря». Якоря используются для навигации по странице. Допустим, на странице размещена курсовая работа. Курсовая работа будет занимать значительное место на странице, и при прочтении ее, придется долго возвращаться на начало курсовой страницы. Для этого и используются «якоря», которые позволяют с помощью ссылки переместиться в начало сайта.