Инстркментальные средства ПО. нструментальныеСредстваПрПО_. Литература 60 Целью webпроектирование
 Скачать 342.81 Kb.
|
(Текст с условиями валютных вкладов)
( Текст с условиями пенсионных вкладов)Литература: СОДЕРЖАНИЕ ОСНОВНЫЕ СВЕДЕНИЯ О ТЕХНОЛОГИЯХ WEB – ПРОЕКТИРОВАНИЯ 4 ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА И СТРУКТУРА HTML-ДОКУМЕНТА 11 ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА ДЛЯ ВВОДА И РЕДАКТИРОВАНИЯ HTML-ДОКУМЕНТОВ 13 СОЗДАНИЕ WEB-ПРОЕКТА С ПОМОЩЬЮ МАСТЕРА WEB СТРАНИЦ И MS WORD 15 РЕДАКТОР СЦЕНАРИЕВ 24 ПРИМЕНЕНИЕ HTML ДЛЯ ОПИСАНИЯ ВЕБ-ДОКУМЕНТА 29 СОЗДАНИЕ ИНТЕРАКТИВНЫХ HTML-ДОКУМЕНТОВ 48 ОБЗОР ПРИЛОЖЕНИЯ FRONT PAGE 54 ПУБЛИКАЦИЯ ВЕБ-СТРАНИЦ 56 Литература: 60 Целью «WEB-проектирование» является формирование знаний, умений и навыков по созданию как в период обучения, так и в дальнейшей профессиональной деятельности сайтов различного назначения. применение редактора сценариев Microsoft Script Editor, дескрипторов языка HTML, элементов языка описания сценариев VB Script, а также создание форм для интерактивных HTML - страниц. Дисциплина «WEB-проектирование» относится к циклу специальных дисциплин, рекомендуемых для подготовки специалистов в области финансов, кредита, страхования, налогообложения, учета, анализа и аудита, международных экономических отношений, налоговых расследований, антикризисного управления, математических методов в экономике, государственного и муниципального управления. Освоение учебной дисциплины базируется на знаниях основ информатики, информационных систем и компьютерных технологий. Принципы использования глобальных вычислительных сетей в осуществлении профессиональной деятельности в сфере экономики и финансово–кредитных отношений. Основные свойства и возможности языка гипертекстовой разметки текста HTML. Способы применения инструментальных средств для создания и редактирования HTML – документов. Уметь создавать сайты с использованием Microsoft Script Editor и VB Script. Создавать формы для HTML – документов. о тенденциях развития инструментальных средст создания сайтов. Объем дисциплины и виды учебной работы Учебная дисциплина по выбору «WEB-проектирование» изучается в течение одного семестра. Итоговой формой контроля по изучаемой дисциплине является зачет без оценки. Теоретическая часть курса дает представление об основных технологиях проектирования сайтов. Практическая часть представляет собой курс обучения работе с использованием языков HTML, VB Script, а также редактора сценариев Microsoft Script Editor. Изучение этой части курса проводится в форме практических занятий в компьютерном классе. От студентов требуется наличие хороших навыков работы на компьютере (работа в среде Windows и с приложениями MS Office). Трудоёмкость и виды учебной работы приведены в табл.1. Информационные технологии, использующие возможности Интернет, проникают в большинство сфер человеческой деятельности. Умение использовать эти возможности в экономической деятельности обеспечивают её успешность и способствует повышению эффективности. Электронная коммерция и банки, консалтинговые услуги, маркетинг с использованием корпоративных сайтов, предложение рекламной продукции посредством Интернет и другие услуги прочно входят в повседневную деловую жизнь. Создание персональных или корпоративных веб-страниц и размещение их в Интернет обеспечивает практически неограниченные возможности рекламы продукции и услуг, решение задач дистанционного образования. В настоящее время веб-пространство стало такой же платформой для создания приложений, как и персональный компьютер. Поэтому овладение технологиями создания веб-приложений является обязательным элементом информационной подготовки современного специалиста. В ряду современных технологий веб-проектирования заметное место занимает CGI (Common Gateway Interface)-программирование, к достоинствам которого можно отнести: CGI-технология не зависит от платформы, CGI-программы применимы в операционных системах UNIX, Windows NT и почти для любого веб-сервера; создание CGI-программы не требует использования какого-то конкретного языка программирования. удобство интерфейса, обеспечивающее взаимодействие CGI-программы с веб-сервером на обычных UNIX-концепциях стандартного ввода и вывода и переменных среды (stdin, stdoutи environment variables). Альтернативные технологии создания веб-приложений можно разделить на три категории: технологии, позволяющие вносить команды в текст HTML-страниц (например, Active Server Pages производства Microsoft, ColdFusion производства компании Allaire или PHP); технологии, вызывающие из страниц внешние программы (например, серверы приложений WebObjects); технологии, создающие программный интерфейс к веб-серверу (например, технология mod_perl, NSAPI или ISAPI). Технология Active Server Pages (ASP) обеспечивает создание веб-приложений с помощью HTML, программ и компонентов ActiveX. Страница ASP создается внедрением программы в текст HTML. При обращении пользователь к ASP-странице, веб-сервер выполняет программу, встроенную в эту страницу, и вставляет выходные данные этой программы в страницу как составную часть. ASP поддерживает по умолчанию языки VBScript и JavaScript, но возможна также поддержка других языков, в том числе Perl. В процессе первой загрузки страницы, программа компилируется в этой странице. Результат компиляции сохраняется на сервере до тех пор, пока исходный текст не изменится, затем программа перекомпилируется и записывается на сервере. Метод кэширования позволяет ASP избежать проблем связанной с низкой производительности (не нужно перекомпилировать программу всякий раз, когда пользователь обращается к ней). Важнейшей частью технологии ASP являются компоненты ActiveX, или программные компоненты. Большинство пользователей компьютера знакомы с компонентами ActiveX по работе в Интернет, где их можно загрузить и использовать с браузером Internet Explorer. Компоненты ActiveX также могут использоваться для расширения свойств веб-сервера. Один из наиболее часто используемых компонентов ActiveX, известный как Active Data Objects (ADO) разработан компание Microsoft. Компонент ADO работает как посредник между страницей ASP и реляционной базой данных. В разработке компонентов ASP можно использовать большинство современных языков программирования, включая C++, Java и Visual Basic. ASP-программы вставляются в HTML-страницы и используются как интерфейс с ASP-компонентами. Программы компилируются Web-сервером и выполняются им же при обращении к Web-странице. Вывод программы вставляется непосредственно в страницу на место самой программы. В написании программы возможно использование различных языков, включая Visual Basic и JScript. Кроме того, Microsoft добавила поддержку дополнительных языков, таких как ActiveWare PerlScript, что позволяет вставлять в страницу программы на языке Perl. Важным в технологии ASP является создание страниц HTML. Результаты работы компонентов и программ ASP, попадая на браузер, выглядят как обычные HTML-страницы. Преимуществом технологии ASP является то, что большая часть работы делаетсяе в виде HTML, дополняя ее некоторым количеством команд ASP. Технология ColdFusion компании Allaire — это сервер приложений, поддерживающий множество программных интерфейсов веб-серверов (NSAPI производства Netscape, ISAPI производства Microsoft, CGI и др.). Технология ColdFusion по своему действию похожа на ASP. Для создания интерактивных веб-страниц в HTML-текст вставляются специальные знаки разметки, которые интерпретируются сервером, и браузер получает текст Web-страницы на стандартном языке HTML. Главное отличие между ColdFusion и ASP состоит в том, что в ColdFusion каждая команда заключается в собственные знаки разметки, в то время как в ASP, создаются традиционные блоки команд. Это позволяет писать структурированные программы на ASP, но, с другой стороны, для тех, кто имеет опыт работы с HTML, но мало знаком с программированием, удобнее иметь дело с технологией ColdFusion. Технология mod_perl веб-сервера Apache выполнен в виде нескольких программ, называемых модулями. Получая запрос, веб-сервер передает его нескольким модулям, после чего каждый из них проверяет, должен ли он выполнять этот запрос. Технология mod_perl объединяет интерпретатор языка Perl с веб-сервером Apache, что позволяет запускать CGI-программы, написанные на языке Perl, не требуя обработки этих программ интерпретатором всякий раз, когда на них поступает запрос. Запуск программ через встроенный интерпретатор вместо стандартного значительно улучшает производительность системы, и многие программы на Perl могут работать без дополнительных изменений. Модуль mod_perl создает для программ на языке Perl программный интерфейс с веб-сервером, позволяющий писать расширения для сервера Apache на языке Perl. Этот программный интерфейс позволяет дополнять или модифицировать любую функцию, встроенную в веб-сервер Apache, наиболее популярный в сети Интернет. Перенос CGI-программ в технологию mod_perl, можно осуществить, настроив сервер так, чтобы программы с определенным расширением выполнялись модулем mod_perl или указать определенный каталог, в которм все программы будут выполняться модулем mod_perl. Но следует констатировать, что написание mod_perl-модулей требует от специалиста очень высокой квалификации и прямого доступа к ресурсам сервер, что бывает невозможно в случае аренды ресурсов веб-сервера у хостинговых компаний. Технология Java Servlet Development Kit компании Sun. Язык Java приобрел популярность как средство для создания аплетов, небольших программ, которые выполняются в браузере и дополняют веб-странице интерактивностью. Но по мере развития популярности этого языка оказалось, что он очень удобен для создания самых разных видов приложений, а не только аплетов. Одним из примеров применения языка Java является технология сервлетов, или программ, работающих на сервере. Главное достоинство среды Java — это переносимость. Компания Sun создала виртуальную машину Java, которая выполняет приложения Java для многих платформ. Если на компьютере установлена виртуальная машина Java, то на нем может выполняться любое приложения Java, независимо от того, на каком компьютере оно было скомпилировано. Пакет JSDK позволяет писать классы Java, которые работают как веб-приложения. Для того чтобы создавать веб-страницы, необходимо знать язык гипертекстовой разметки и технологию их создания с использованием этого языка. Существуют три языка гипертекстовой разметки - SGML (Standard Generalized Markup Language - стандартный язык общей разметки), НТМL (Нурег Техt Markup Language - язык разметки гипертекста) и ХМL (Ехtensible Markup Language - расширяемый язык разметки). Язык SGML является прародителем НТМL. Он допускает создание дескрипторов с указанием, какие типы данных эти дескрипторы могут содержать, и определением состояний, которые могут поддерживаться их атрибутами. Язык НТМL является спецификацией, предусматривающей использование фиксированного набора дескрипторов. Эта спецификация определяет замкнутый класс документов - множество документов, отвечающих одному и тому же набору правил и имеющих схожие свойства. В отличие от НТМL язык ХМL может использовать возможности SGML, что позволяет определять собственные пользовательские классы документов. Язык НТМL является наиболее простым и понятным для изучения, поэтому освоение технологии создания веб-страниц целесообразно начинать с изучения НТМL. Одним из базовых понятий веб–проектирования является понятие веб-узла, под которым понимается специальная папка, в которой размещены файлы, содержащие текстовую информацию по какой-либо теме, а также информацию в виде рисунков, графиков, фотографий, анимационных изображений и звуковых эффектов. В этих файлах содержатся описания веб-страниц на одном из языков разметки гипертекста – HTML или XML. Они имеют одно из следующих расширений: html, htm, xml. Все, что содержит веб-узел, далее будем называть веб-проектом. Существует три типа веб-узлов: создаваемые на веб-сервере поставщика услуг Internet; создаваемые в интрасети как веб-узлы группы; виртуальный веб-узел, который может быть создан на жестком диске автономного компьютера, не подключенного к какой-либо сети. Информация на веб-узле размещается в виде отдельных страниц. Каждая веб-страница имеет вполне определенное содержательное и функционально законченное назначение. Поэтому такие страницы называют информационными статьями. Все страницы (статьи) определенным образом связаны друг с другом так, чтобы обеспечить пользователю удобный переход от страницы к странице и быстрый поиск интересующей его информации. Как правило, эта связь организуется по принципу родовых (иерархических) (рис.1) или сетевых отношений. Родовые отношения обеспечивают удобство при просмотре содержимого веб-узла от общего к частному. Сетевые отношения создаются в тех случаях, когда целесообразно иметь возможность переходить с одних на другие страницы, для получения справочной либо уточняющей информации. Каждая веб-страница хранится в отдельном файле. Связь между веб-страницами (файлами), обеспечивающая быстрый переход с одной страницы на другую и эффективный поиск нужной информации, устанавливается с помощью гиперссылок. Одна из страниц выполняет роль главной страницы. В ней должна содержаться информация о тематической направленности проекта, а также элементы, обеспечивающие навигацию по страницам и поиск нужной информации. Именно эта страница будет отображаться первой на экране посетителя. Так, если в адресную строку браузера ввести, например DNS-адрес , то на самом деле будет сформирован URL-адрес /index.htm и будет выполнена попытка найти и загрузить веб-страницу именно с таким URL-адресом. Поэтому файл, в котором хранится первая веб-страница, и с которой посетитель начнет движение по страницам узла, используя гиперссылки, должен иметь имя "index.htm".  Рисунок 1 Папка веб-узла внутри себя должна содержать еще одну папку. Эта папка служит для хранения файлов, содержащих какие-либо графические изображения, которые предполагается отображать на веб-страницах. Веб-страница представляет собой документ, содержащий описание ее структуры и содержания, создаваемого посредством команд, сформированных на языке HTML. Эти команды выполняются программой - браузером, таким, например, как Microsoft Internet Explorer. Интерпретируя команды HTML, браузер создает визуальное изображение документа, собирая его из отдельных объектов. Таким образом, веб-документ - это изображение в окне браузера, которое он создает, выполняя команды языка HTML. Фактически веб-мастер создает не сам документ, а лишь описывает его структуру на языке гипертекстовой разметки. Сам документ создается браузером, интерпретирующим команды языка HTML. Таким образом, для каждой веб-страницы на узле должен быть помещен файл, содержащий документ HTML с ее описанием. Возможности языка HTML таковы, что он обеспечивает только описание структуры HTML документа. Он, собственно, не является языком программирования. Для создания интерактивных web-страниц кроме языка HTML служат так называемые сценарии, представляющие собой программы, которые создаются на языках программирования, обеспечивающих их интерпретацию и выполнение браузером. Существует две разновидности таких языков – JavaScript и VBScript. Поэтому для того, чтобы создавать интерактивные web-страницы необходимо использовать язык HTML и один из указанных языков программирования. ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА И СТРУКТУРА HTML-ДОКУМЕНТА Язык разметки гипертекста HTML служит для описания структуры веб-документа, в соответствии с которым веб-браузер формирует документ, и содержит набор команд, интерпретируя которые браузер создает документ. Команды в HTML называются дескрипторами (tag), иногда их называют тегами. Дескриптор - это основной элемент кодирования, принятый в стандарте HTML. Дескрипторы помогают браузеру распознать, что нужно выделить, где отобразить графику, где находятся гиперссылки. Дескрипторы представляют собой ключевые слова, состоящие из последовательности букв, которые заключены в угловые скобки (< >). Так как веб-документ представляет собой упорядоченный набор объектов, то дескрипторы задают установки объектов, их свойств и методов. Дескрипторы имеют следующий синтаксис: <ИМЯ_HTML-ДЕСКРИПТОРА [атрибуты]>, где ИМЯ_ДЕСКРИПТОРА – определяет тип объекта, а необязательные атрибуты устанавливают его свойства и методы. Например: Здесь FONT – имя дескриптора, а size и color- атрибуты, с помощью которых устанавливаются параметры шрифта: размер 12 пт., цвет шрифта голубой. Дескриптор предписывает поместить в документ объект Кнопка с надписью ОК, которая имеет имя Button1, кнопка реагирует на событие click и выполняет сценарий с указанным именем. Действие дескрипторов может распространяться на весь документ, на какую-то его часть документа или действовать только в месте его размещения (локально). В соответствии с этим дескрипторы бывают двух типов: контейнеры и одиночные. Контейнер – это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) дескриптора. Начальный дескриптор имеет вид < ИМЯ_HTML-ДЕСКРИПТОРА> Конечный (закрывающий) дескриптор контейнера имеет вид . Закрывающий дескриптор аналогичен открывающему с той лишь разницей, что имени дескриптора предшествует символ слэш (/). Контейнеры служат для хранения какой-либо информации, например текста или других дескрипторов HTML, в том числе и других контейнеров. Содержимое контейнера размещается между начальным и конечным дескрипторами. Конструкция, включающая начальный и конечный дескрипторы вместе с заключенным между ними содержимым, называется элементом HTML-документа. Например, отформатированный текст и дескрипторная пара и , в которую он заключен, представляет собой элемент: Это содержимое контейнера Одиночный дескриптор иногда называют пустым дескриптором, так как он не содержит никакой информации. Он имеет только начальный дескриптор и выполняет самостоятельную задачу, не связанную с конкретным текстом. Примером может являться дескриптор < BR > - этот одиночный дескриптор предписывает переход на новую строку. Он действует локально именно в том месте, где поставлен и не требует закрытия. Например: Особенности синтаксиса языка HTML и его применение Браузер после интерпретации этого HTML кода выведет на экран две строки: Особенности синтаксиса языка HTML и его применение Документы HTML могут иметь различную структуру, включающую множество элементов. Но все они должны содержать два таких элемента, как: раздел заголовка страницы - HEAD; тело документа (страницы) – BODY. Раздел заголовка служит для описания общих свойств страницы, таких как заголовок (имя) страницы, который будет отображаться в строке имени окна браузера, МЕТА указаний и описания таблиц стилей. МЕТА указания служат для задания параметров, которые необходимы для поисковых систем. Этот раздел формируется с помощью парного дескриптора Tag "Font" , отображается в окне браузера.  Рисунок 2 Код HTML в примере 1 содержит следующие дескрипторы: весь документ заключён в парный дескриптор < HTML > здесь содержание страницы < /HTML > , который указывает, что всё, что внутри этого дескриптора, браузеру необходимо интерпретировать. Внутри существуют ещё два больших элемента HEAD и BODY, тоже парные, которые требуют закрытия. HEAD - это раздел заголовка, в нём нужно описывать свойства документа в целом, такие как общий заголовок документа TITLE и некоторые другие. BODY - это так называемое тело документа, где описывается всё содержимое страницы. У дескриптора BODY есть несколько атрибутов, с помощью которых можно определить какие-либо установки. Можно задать цвет страницы атрибутом bgcolor="X". Параметр X можно задать двумя способами: указанием названия цвета, например bgcolor="red" или шестнадцатеричной константой, например bgcolor="#017D75", (кавычки при указании значения атрибута обязательны). Можно установить цвет основного текста на страничке атрибутом TEXT="X". Параметр X - это значение цвета, устанавливаемое по любому из двух описанных выше способов. В качестве фона можно использовать рисунок, для этого в дескрипторе BODY следует задать следующий атрибут: background="Y". Здесь Y - это путь к файлу фона, например fon.gif, но для этого этот файл должен находиться в той же папке, что и файл странички, на которую он загружается. Можно зафиксировать фон на одном месте, добавив атрибут bgproperties="fixed". Так же можно указать цвета не просмотренных ссылок, атрибут LINK= , цвет активной ссылки (на которую наведён курсор) устанавливается атрибутом ALINK= , цвет просмотренных ссылок - атрибутом VLINK=. Создание веб-страниц с помощью редактора БЛОКНОТ предполагает знание и умение использовать все возможные дескрипторы HTML. В этом редакторе нет средств, помогающих пользователю, поэтому использовать его для создания HTML документов достаточно сложно и неэффективно. Для этой цели разработан ряд специальных инструментальных средств, предназначенных для создания HTML документов. Среди них Front Page, HTML Editor и некоторые другие. В MS Office 2000 встроены специальные инструментальные средства для создания веб-страниц, такие как “Мастер Web-страниц” и MS VB Script Editor. С помощью Мастера Web-страниц можно создавать веб-страницы без интерактивных элементов, практически не зная и не используя язык HTML. Редактор MS VB Script Editor обеспечивает создание интерактивных веб-страниц, использующих элементы форм СОЗДАНИЕ WEB-ПРОЕКТА С ПОМОЩЬЮ МАСТЕРА WEB СТРАНИЦ И MS WORD Начиная с Word 2000 создание веб-страниц перестало существенно отличаться от создания стандартных документов. Команды Word и интерфейс программы практически не зависят от того, с каким документом ведётся работа: над обычным текстом или веб-страницей в формате HTML. Технологию создания Web-проекта с помощью инструмента Мастер Web-страниц рассмотрим на следующем примере. Пусть требуется разработать простой учебный веб-узел, содержащий Web-проект по теме:” Основы Web-проектирования” с помощью инструмента MS Office Мастер Web страниц. С этой целью необходимо выполнить следующие действия: 1. Определите статьи проекта и их содержание. Пусть на страницах Web-проекта в соответствии с выбранной темой раскрываются следующие вопросы: Основные понятия Web. Технология создания узла с помощью Мастера Web-страниц. Технология применения активных элементов и применение редактора MS VB Script Editor. Таким образом, веб-документ должен содержать три страницы (статьи): главную, содержащую информацию об основных понятиях Web, и две страницы, отражающие содержание второго и третьего вопроса. 2. Создайте виртуальный Web-узел, где будет храниться содержимое разрабатываемого Web-проекта. Это будет обычная папка на жестком диске с именем, например Web_design. Для запуска программы “Мастер Web страниц” можно использовать два способа: выполните команду главного меню Создать документ MS Office. В раскрывшемся диалоговом окне Создание документа выберите вкладку Web-страницы и щелкните на ОК – раскроется диалоговое окно Мастер Web—страниц. запустите приложение MS Word. В меню Файл выберите команду Создать. В области задач Создание документа в группе Создать с помощью шаблона выберите Общие шаблоны. Откройте вкладку Web-страницы. Дважды щелкните на значке Мастер Web-страниц. Мастер Web-страниц предлагает пошаговую технологию создания Web-проекта. Таких шагов пять. Каждый шаг предполагает выполнение определенных операций. Переход к следующему шагу производится щелчком на кнопке Далее или на соответствующем квадратике в схеме последовательности Мастера, возврат к предыдущим этапам – щелчком на кнопке Назад. На первом шаге нужно указать адрес веб-узла, в котором он будет храниться – URL адрес ( в нашем случае это путь к созданной ранее папке Web_Design) и наименование веб-узла. Используя кнопку <Обзор>, установите адрес узла и в поле Заголовок веб-узла введите его название (рис. 3). Рисунок 3. На втором шаге Мастер предлагает выбрать способ перехода от страницы к странице веб-документа, иными словами, предлагает выбрать тип навигатора. Если обозреватель не поддерживает такие объекты, как фреймы, то навигатор следует размещать на отдельной странице. Положим, в нашем проекте ссылки навигатора следует разместить вертикально в левой части окна, для этого установите соответствующий переключатель (рис. 4). Рисунок 4. На третьем шаге можно определить схему и тип проекта – либо по шаблону, имеющемуся в библиотеке, из ранее созданного файла, либо создать новый проект (рис. 5). В нашем случае создается новый проект, состоящий из трех страниц. Используя кнопки Новая пустая страница и Удалить страницу, удалите ненужные страницы, например страницы, вставленные из шаблона, и добавьте новые.  Рисунок 5. На четвертом шаге Мастер предлагает создать переходные ссылки между веб-страницами, а также указать названия этих страниц. Эти названия будут использованы в переходных ссылках, поэтому в них как можно точнее должна отражаться тематическая направленность каждой из страниц. Первой странице установите название “ Общие сведения о Web-проектировании”, второй – “Создание Web-проекта с помощью Мастера”, а третьей “Создание страниц с активными элементами” (рис. 6).  Рисунок 6. На пятом шаге Мастер предлагает установить Тему для оформления веб-узла – стилевое оформление. Если такое оформление будет применяться, то нужно установить соответствующий переключатель в окне Мастера и щелкнуть на кнопке Просмотр тем. В раскрывшемся окне Темы, выберите нужное стилевое оформление, например Перетекание После выполнения операций пятого шага щелкните на кнопке Готово в результате на экране отобразится первая страница создаваемого веб-проекта (рис. 7) .  Рисунок 7. В левой части экрана в виде столбца размещен навигатор, содержащий ссылки на все страницы проекта. В верхней его части помещено название веб-узла. В правой части – содержимое первой веб-страницы, которой было присвоено наименование “Общие сведения о Web-проектировании”. Используя навигатор, можно переключаться на каждую из страниц и редактировать (вводить и редактировать текст) их содержимое также, как в текстовом процессоре MS Word. Для просмотра содержимого созданного веб-узла в Internet-обозревателе выполните следующие операции: закройте приложение MS Word; запустите программу Internet Explorer; в строке адреса обозревателя укажите путь к папке Web_design и в ней выберите файл с именем default.htm. Редактирование веб-страниц в MS WORD Редактирование веб-страниц с использованием текстового процессора Word рассмотрим на следующем примере, поясняющем, как можно вводить текстовую информацию в веб-страницу, создавать внутренние ссылки в пределах одной страницы, помещать на страницу иллюстрации. Для этого продолжим работу со страницами созданного ранее веб-узла. Пусть первая страница должна содержать информацию, включающую текст и подзаголовки, например такую: Пример 2: Что такое WEB узел Web- узел – это специальная папка, в которой размещены файлы, содержащие текстовую информацию по какой-либо теме в формате HTML, а также информацию в виде рисунков, графиков, фотографий, анимационных изображений и звуковых эффектов. Существует два вида Web- узлов: Создаваемые на Web- сервере поставщика услуг Internet Создаваемые в интрасети как Web- узлы группы Последовательность создания проекта Процесс создания проекта состоит из нескольких этапов. На первом этапе, прежде чем приступать к созданию проекта, следует определиться с его функциональным назначением и тематической направленностью информационного материала. На следующем этапе обычно проводится декомпозиция общей темы на тематические подразделы и отдельные статьи с определением связей между ними. Результатом такой декомпозиции является создание структуры проекта. Структура HTML документа Документы web могут иметь различную структуру, включающую различные элементы. Но все они должны содержать два таких элемента, как: Раздел заголовка страницы –HEAD; Тело документа (страницы) – BODY. Раздел заголовка служит для описания общих свойств страницы, таких как заголовок (имя) страницы, который будет отображаться в строке имени окна браузера, МЕТА указаний и описания таблиц стилей. МЕТА указания служат для задания параметров, которые необходимы для поисковых систем. Для примера 2 предложены лишь фрагменты текста. Для удобства его просмотра на странице желательно поместить ее содержание и предусмотреть возможность перехода на нужный заголовок с помощью внутренних ссылок. Далее необходимо выполнить следующие действия: запустить приложение MS Word и открыть в нем документ, содержащий первую страницу Web- проекта с именем “Общие сведения о Web-проектировании” – отобразится первая страница; ввести на страницу приведенный выше текст примера 2; для всех заголовков установить стили заголовков, например “Заголовок 1”; после названия страницы вставить оглавление без использования номеров страниц и заполнителя. Оно будет выполнять роль навигатора по разделам этой страницы; сохранить документ с тем же именем “Общие сведения о Web-проектировании”. Добавление рисунков и графических изображений на страницу Веб-страница может содержать растровые рисунки и другие графические изображения, текст в виде бегущей строки, а также фильмы. Поскольку рисунки должны будут передаваться по каналам Internet к компьютеру пользователя сети, и желательно, чтобы их передача осуществлялась как можно быстрее, рекомендуется их записывать в сжатые файлы в формате GIF или JPEG. Для подготовки новых рисунков или преобразования существующих к таким форматам можно использовать редакторы Corel Draw, Adobe Fotoshop или встроенный в операционную систему редактор Paint. Анимированные изображения и фильмы могут создаваться в форматах GIF и MPEG. Технологию добавления рисунков и графических изображений на веб-страницу рассмотрим на примере 3, для чего создадим файл, содержащий рисунок в формате GIF, а затем поместим его на Web-страницу, созданную выше по примеру 2. Следуя теме нашего Web-проекта, положим, что рисунок должен изображать окно Мастера Web-страниц. Пример 3: запустить описанным выше способом Мастер Web-страниц - появится диалоговое окно Мастер Web-страниц; записать в буфер обмена изображение экрана монитора, используя клавишу Print Screen; запустить редактор Paint; в окно документа Paint поместить содержимое буфера обмена; используя соответствующие инструменты редактора, вырезать нужный фрагмент рисунка; создать новый документ и поместить в него содержащийся в буфере обмена фрагмент рисунка; сохранить рисунок в папке ранее созданного по примеру 2 веб-узла в формате .gif или .jpeg; запустить приложение MS Word и открыть файл, содержащий веб-страницу с заголовком “Создание Web-проекта с помощью Мастера”; используя команду меню Вставка Рисунок Из файла вставить созданный рисунок; сохранить документ и закрыть его; открыть измененный документ из программы Проводник или из программы Internet Explorer, при этом в окне браузера Internet Explorer отобразится рисунок. Создание полей форм Размещение на странице элементов формы, таких как “Бегущая строка”, “Фильм”, “Переключатель” и других производится с помощью панели инструментов “Web-компоненты”. Она включается командой меню Вид Панели инструментов. Каждое из полей форм после его размещения в документе Word становится объектом, который имеет имя (Name), какие-либо присущие ему свойства (Properties) и способен выполнять определенные действия при появлении событий. Для размещения поля формы в поле документа нужно установить курсор в строку, где должен быть помещен элемент, и щелкнуть на выбранном элементе панели Web-компоненты. Чтобы просмотреть или изменить свойства помещенного в документ объекта, следует перейти в режим Конструктора, щелкнув для этого на соответствующем значке панели Web-компоненты, маркировать нужный объект, щелкнуть на кнопке <Свойства> и в раскрывшемся окне свойств установить нужные значения. Технологию размещения поля формы в поле документа рассмотрим на примере 4, в соответствии с которым на ранее созданную веб-страницу требуется поместить поле формы “Бегущаястрока” и установить ее свойства. Пример 4: открыть в приложении Word веб-страницу создаваемого веб-проекта с именем “Общие сведения о Web-проектировании” ; установить курсор в левую рамку страницы над навигатором; поместить на экран панель Web-компоненты; выбрать на панели Web-компоненты поле формы Бегущая строка и щелкнуть на нем - в месте размещения курсора появится объект Бегущая строка и раскроется диалоговое окно Бегущая строка (рис. 8).  Рисунок 8. в диалоговом окне установить нужные свойства объекта и ввести текст, который должен отображаться в строке. Щелкнуть на кнопке ОК; перейти в режим конструктора и маркировать внедренный объект; используя команду меню Формат Шрифт, установить параметры шрифта (тип, размер, начертание, цвет); для изменения высоты и ширины объекта щелкнуть на элементе Свойства - раскроется окно свойств маркированного объекта; установить нужные значения свойств Height (высота) и MarqueWidth (ширина). Выйти из режима конструктора; сохранить документ, а затем открыть его в Internet Explorer. РЕДАКТОР СЦЕНАРИЕВ В предыдущем разделе была рассмотрена технология создания веб-проекта, содержащего несколько страниц с использованием инструмента Мастер Web-страниц и текстового процессора MS Word. Она достаточно проста и доступна. Следует сказать, что использование MS Word для создания страниц Web является не лучшим стилем хотя бы по той причине, что HTML код такой страницы имеет существенную избыточность, требует для своего размещения неоправданно много памяти и, следовательно, потребуется больше времени для передачи кода по каналу связи. Это не всегда совпадает с интересами пользователя. Поэтому наилучшим стилем является описание веб-страницы на языке HTML, используя в качестве инструментальной среды какой-либо предназначенный для этой цели редактор. Существует целое семейство HTML-редакторов, например MS FrontPage, HTML Editor и других. Самым доступным и достаточно простым редактором является Редактор сценариев (Microsoft Script Editor), встроенный в MS Office (2000 и ХР). Запуск редактора сценариев Для запуска редактора сценариев нужно выполнить следующие действия: запустить одно из приложений MS Office, например MS Word или MS Excel; выполнить команду меню Сервис Макрос Редактор сценариев, или нажать комбинацию клавиш Alt + Shift + F11. Элементы интерфейса редактора сценариев После активизации инструмента Редактор сценариев на экране отобразится его окно, которое содержит ряд объектов, образующих интерфейс. Ограничимся кратким рассмотрением основных элементов интерфейса. Окно документа HTML предназначено для ввода и редактирования документа. При создании нового документа Редактор сценариев, используя шаблон, формирует и помещает в создаваемый документ основные дескрипторы. Панель элементов полей форм содержит инструменты, с помощью которых в документ HTML можно помещать поля формы. Окно проекта предназначено для отображения структуры Web-проекта. Используя это окно, можно быстро перейти на нужную HTML страницу, выполнив двойной щелчок на ее пиктограмме. В окне свойств отображаются допустимые атрибуты для дескрипторов HTML. Оно состоит из трех частей. В верхней его части расположен раскрывающийся список, в котором отображается название того дескриптора, внутри которого помещен мерцающий курсор. Ниже раскрывающегося списка расположено окно атрибутов. Оно поделено на две части. В левой части в текущий момент времени отображаются возможные атрибуты того дескриптора, внутри которого помещен мерцающий курсор. В правой части отображаются параметры атрибутов. Используя окно свойств, для каждого дескриптора можно указать нужные атрибуты и задать для них необходимые параметры. Это создает определенные удобства, так как пользователю нет необходимости задумываться о том, какие атрибуты может иметь тот или иной дескриптор и какие параметры необходимо устанавливать. Установку атрибутов и их значений можно выполнить двумя различными способами. Способ первый: установить курсор после ключевого слова дескриптора и сделать пробел - раскроется список атрибутов (рис. 9);  Рисунок 9 в списке выбрать нужный атрибут и дважды щелкнуть на нем или нажать клавишу TAB - в тексте документа появится название атрибута; Ввести знак “=” – раскроется список возможных значений атрибута или кнопка указателя (рис. 10); щелкнуть на кнопке указателя – раскроется окно для установки значения (например, окно селектора цвета или окно установки URL); установить нужное значение параметра и нажать клавишу Enter.  Рисунок 10 Способ второй: установить курсор после ключевого слова дескриптора; в левой части окна свойств (рис. 11) выбрать нужный атрибут и щелкнуть на нем. Используя кнопку или список в правой части окна свойств, установить нужное значение параметра.  Рисунок 11 Создание HTML документа в среде редактора сценариев Для создания веб-страницы одним из описанных выше способов активизируйте редактор сценариев и выполните команду меню FileNewFile – в результате откроется диалоговое окно New File. Выберите шаблон HTML Page, раскройте список, расположенный правее кнопки Open, и выберите в списке элемент Open With - раскроется диалоговое окно Open With (рис. 12). Если создаваемая страница будет главной в создаваемом проекте, то в списке этого диалогового окна выберите HTML/XML Editor (Defoult). Если создаваемая страница будет одной из подчиненных, то выберите в списке HTML/XML Editor with Encoding или Source Code (text) Editor, затем щелкните на кнопке [Open]. После выполнения этой операции откроется окно редактирования HTML-кода для создаваемого документа, в котором по умолчанию будет создана заготовка HTML-документа в виде базового шаблона, представленного в примере 5.  Рисунок 12 Пример 5: Услуги сбербанка по вкладам гражданВ настоящее время сбербанк России предоставляет следующие услуги по вкладам:Депозитные вклады Пенсионные вклады Срочные вклады Валютные вклады Депозитные вклады |
"> Срочные вклады
align=center >
Внешняя ячейка
|
| target=three> Девушка |
СОЗДАНИЕ ИНТЕРАКТИВНЫХ HTML-ДОКУМЕНТОВ
Создание HTML-формы
Формы в HTML документе предназначены как для отображения информации, так и для ее сбора (ввода). Отображение и ввод информации в формах производится в специальных полях. Формы в сочетании со встроенными или CGI сценариями позволяют сделать HTML документ интерактивным. Пользователь веб-страницы, в которую помещена форма, получает возможность взаимодействовать с формой, изменять вид и содержание веб-документов, а также использовать сразу несколько окон.
Для создания HTML-форм предназначена дескрипторная пара . Все, что расположено внутри этой дескрипторной пары, является либо описанием полей формы, либо текстовыми или графическими элементами. Текстовые и графические элементы применяются для сообщения пользователю, информация какого характера отображается (вводится) в то или иное поле.
Синтаксис открывающего дескриптора