Программные средства создания Web-страниц и Web-сайтов

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

• создание различных эффектов в простом текстовом редакторе - громоздкая и сложная задача;
• документ подготовленный с помощью какой-либо программы проще конвертировать, чем создавать заново;
• текстовые редакторы можно использовать для очистки от "мусора" HTML-документов, созданных с помощью специализированных программ;
• при создании эффектов с помощью специальных программ (например, Microsoft FrontPage) следует предусмотреть поддержку этих эффектов на web-сервере.

Рис. 2 Microsoft FrontPage

            Одним из лидеров в области разработки программного обеспечения для подготовки web-публикаций является компания  Macromedia (http://www.macromedia.com). Очень популярны пакеты Macromedia: Dreamweaver, HomeSite (до версии 5 этот пакет выходил под названием Allaire HomeSite), а также специализированные пакеты для создания компьютерной графики и анимации (таблица № 1). 

19

 
         

Рис. 3 Компания  Macromedia

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

Таблица № 1

 
Наиболее популярные программные  средства, предназначенные для разработки Web-сайтов.

Microsoft FrontPage	WYSIWYG -редактор. Недостаток: автоматически вырабатываемый html-код документа, созданного разработчиком в визуальном режиме, как правило, неоптимален.
Macromedia Flash 5	Технология Flash становится очень популярной.   Она позволяет создавать очень эффектные web-страницы, содержащие FLASH-объекты или исполняемые файлы, содержащие большое количество векторной графики, анимационные ролики.  За счет применения векторной графики Flash-страницы быстрее загружаются на компьютеры клиента, чем традиционные (содержащие растровую графику) и одинаково воспринимаются на различных платформах: Windows, Macintosh, Solaris, Unix.   Имеется возможность передачи данных из HTML-документа FLASH-объекту и наоборот, что позволяет создавать управляемые FLASH-объекты, а также делать более эффектными HTML-страницы (например, формы).
Macromedia Director 8	Лидер рынка мультимедийных средств. Объединяет графику, звук, анимацию, текст и видео для интерактивных информационных каналов, которые можно разместить как на web-страницах, так и на CD- или DVD-дисках.  От технологии Flash отличается более развитым встроенным языком программирования.
Macromedia Dreamweaver MX 2004	WYSIWYG-редактор. Профессиональное решение для web-дизайна и разработки web-сайтов. Имеет очень удобный, простой интерфейс (в стиле PageMaker/Illustrator/PhotoShop). Автоматизирует работу над проектом. Создаваемый код почти не отличается от написанного программистом. Содержит встроенные средства работы с графикой. Позволяет непосредственно внутри пакета создавать FLASH-анимации. Обеспечивает средства отладки JavaScript-сценариев для браузеров MS Internet Explorer и Netscape Navigator. Допускает расширение возможностей за счет дополнительных модулей. Библиотека дополнительных компонент (более 150) входят в комплект поставки при вводе кодов создает список значений тэгов и атрибутов в виде всплывающей подсказки
Macromedia Fireworks 3	Профессиональное приложение для создания графических изображений  и их размещения в Интернет. Позволяет обрабатывать изображения, полученные с помощью других графических редакторов, цифровые фотографии, отсканированные изображения Позволяет создавать эффекты анимации, использовать динамические стили Macromedia Dreamweaver 3 Fireworks 3 Studio  Совместное использовании Dreamweaver 3 и Fireworks 3 сокращает время разработки за счет взаимной автоматизации повторяющихся действий.
Allaire HomeSite 4.5	Позволяет легко и  быстро создавать эффектные web-сайты Имеет удобный интуитивно понятный интерфейс, богатую палитру инструментов Содержит средства контроля качества: проверку синтаксиса html-кода, верификацию ссылок НОВОСТЬ: Фирма Allaire несколько лет назад была поглощена компанией Macromedia. Известный продукт HomeSite теперь выходит под названием Macromedia HomeSite 4.5. (хотя название Allaire все еще присутствует на упаковке.)
Macromedia DreamWeaver UltraDev 4	Первая визуальная среда, позволяющая быстро разрабатывать Web-приложения для доступа к серверным  базам данных. БД могут поддерживаться на различных серверных платформах. Достаточно просто создаются системы электронной коммерции, такие как электронные витрины, системы регистрации клиентов. Продукт уже имеет  награды как лучший в своем  классе средств разработки.
Macromedia ColdFusion 4.5. UltraDev 4 Studio	Объединение среды разработки ColdFusion Studio и среды DreamWeaver UltraDev.  Содержит мощные инструменты визуальной разработки приложений для размещения на платформе ColdFusion Server 5, визуального представления серверного источника данных (набора записей, переменной, директория и пр.), средства отладки сценариев.
Adobe PhotoShop 6	Мировой стандарт обработки  изображений как для печати, так  и для web

            До появления Интернет компьютеры использовались лишь для обработки информации (главным образом, для вычислений); результаты расчетов переносились на внешние носители (чаще всего, на бумагу). Благодаря Интернет и, прежде всего, основной ее компоненте, - World Wide Web, компьютеры становятся средством связи. 
            Современные web-технологии представляют широчайшие возможности для публикации информации. WWW - одно из самых демократичных средств массовой информации: правом размещать в Web свою информацию в равной степени пользуются и правительственные организации, и крупные фирмы, и частные лица. Информация, опубликованная в WWW, не подвергается цензуре.  
            Web-технология применяется не только в Интернет, но и для обеспечения информационной поддержки работы различных подразделений в рамках одной организации (intra-сети,intranet). Intranet существенно облегчают процесс создания, хранения и поиска документов, позволяют не только усовершенствовать делопроизводство, но и качественно изменить весь процесс управления предприятием.  
            Очевидно, что наибольшее влияние развитие web-технологий имеет на те сферы общественной деятельности, которые непосредственно связаны с управлением информационными потоками, с передачей и обработкой информации, с визуализацией данных, полученных в результате вычислений.

 

 

 

 

24

4. . Разработка Web-сайта посвященного теме «Мой ребенок» и продукту «Нурофен»  

 

4.1 Создание новой web-страницы (шаблона)

Для создания новой страницы в Dreamweaver я выбрала в меню Файл пункт Новый… или. На экране появится диалоговое окно Новый документ (рис.4).

Рис. 4 Создание новой web-страницы в Dreamweaver

          Выбираем категорию Стартовые страницы и загружаем один из шаблонов.

Шаблон — это особым образом подготовленная и сохраненная Web-страница, где уже имеются некоторые элементы, которые могут понадобиться (заголовок, сведения об авторских правах, элементы оформления и т. п.).

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

25

(далее корневая папка), в которой будут находиться  все файлы, необходимые для  создания файла. Назовем эту  папку Мой сайт. Для сохранения файла выбираем в меню Файл пункт Сохранить и в появившемся окне указываем путь сохранения Корневая папка.

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

4.2 Ввод и  форматирование текста

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

Текст набирается с помощью  клавиатуры при этом Dreamweaver самостоятельно разобьет текст на строки. Чтобы  создать новый абзац, нужно нажать клавишу <Enter>. Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш <Shift>+<Enter>.

Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая клавиши <PeUn> и <PeDown> мгновенно перемещаться к началу и концу строки клавишами <Ноте> и <End>. Чтобы быстро переместиться в начало или конец документа, нужно нажать, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Мы также можем устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.

В случае ошибки мы всегда можем удалить неправильно введенный текст, воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии

26

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

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

Быстро выполнить все  необходимые операции с текстом  поможет специальная панель, расположенная снизу главного окна в программе Dreamweaver(рис.5).

 

Рис. 5 Панель операций с  текстом в Dreamweaver

После того, как необходимый  текст набран и отформатирован, необходимо поработать с цветом. Цветовые параметры страницы тоже можно отредактировать при помощи этой панели.

Для задания цвета  используется так называемый селектор цвета.

    Селектор цвета состоит из двух частей. Справа находится поле ввода, где вводится код нужного цвета в формате RGB. Выглядит это так — #RRGGBB, где RR — это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете красной составляющей, GG — зеленой, а BB — синей. Пример задания цвета в формате RGB — #336699 (это тускло-голубой цвет). Но вряд кто запомнит наизусть шестнадцатеричные коды цветов. Поэтому в левой части селектора цвета находится кнопка вызова окна выбора цвета. Большую часть этого окна занимает палитра, где, собственно, мы и ищем нужный цвет.

27

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

Зададим фон всей страничке. Я выбрала в качестве фона не цвет, а картинку. Соответственно теперь нужно изменить цвет шрифта, чтобы  текст был удобнее читать.

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

 

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

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

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

Форматов графических  изображений на свете существует очень много. Но в Web-графике популярны  только три из них: GIF, JPEG и PNG. При  разработке своего сайта я используя только формат JPEG.

Формат JPEG (Joint Pictures Encoding Group, группа кодирования неподвижных  изображений), напротив, замечательно подходит для хранения полутоновых изображений. Поэтому картины и сканированные фотографии хранят только в этом формате. Для начала, все графические изображения, которые я буду использовать при разработке web-сайта, необходимо скопировать в корневую папку. Если этого не сделать, при просмотре сайта в Web обозревателе вы не увидите желаемых изображений. Чтобы вставить изображение на страницу сайта, нужно в меню Вставить выбрать пункт Изображение, и в сплывающем окне найти тот файл, который я хочу разместить.

28

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

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

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

 

4.4 Создание  гиперссылок

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

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

29

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

30

Заключение

В данной курсовой работе рассмотрены актуальные вопросы  разработки и создания современного Web-сайта.

При этом мною были решены следующие частные задачи:

– ознакомление с современными Интернет-технологиями и использовать их в своей разработке;

– изучение основных понятия  и программы Dreamweaver, применяемой  для разработки и создания Web-сайтов;

– ознакомление с методами и способами представления на Web-страницах различных видов  информации (текстов и изображений);

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