Реферат на тему создание документа web страницы

Обновлено: 05.07.2024


11 чел. помогло.

Реферат по ИИКТ

Содержание.


  1. Как создаются веб-страницы

  2. Несколько средств веб-разработки

  3. Простейшие средства создания веб-страниц

  4. Веб-редактор TaxtPad

  5. Веб-редактор Arachnophilia

  6. Текстовые редакторы типа WYSIWYG

  7. Редактор Star Office

  8. Netscape Composer

Как создаются веб-страницы

Для создания Web-страниц используется особый язык HTML (HyperText Markup Language – язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.

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

Для того чтобы различные программы Web-обозревателей правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован. Его стандартизацией (а также множеством других стандартов Интернета) занимается особая организация, называемая World Wide Web Consortium или, сокращенно, WWWC. Это название можно перевести как "Комитет Всемирной паутины".

WWWC издает весьма увесистые труды, описывающие различные версии стандарта HTML. Последняя версия этого языка — 4.01 — вышла в конце 90-х годов прошлого века. Все современные версии Web-обозревателей поддерживают эту версию HTML.

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

Версия 4.01 станет последней версией языка HTML. В дальнейшем он будет постепенно заменен своим потомком — языком XHTML (extensible Hyper-Text Markup Language — расширяемый язык гипертекстовой разметки). Этот язык основан на популярном языке описания данных XML (extensible Markup Language — расширяемый язык разметки), он позволяет расширять доступный набор тегов и считается более строгим и более подходящим для машинной обработки. К тому же, из XHTML выброшено множество устаревших тегов, все еще поддерживаемых HTML в целях совместимости.

Скоро ли наступит эра XHTML? Вряд ли. Старый добрый HTML поцарствует на земле еще не один год.

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

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

Одна из Web-страниц, хранящихся на диске серверного компьютера, при настройке Web-сервера задается в качестве страницы по умолчанию или главной страницы. Она будет загружена, если пользователь наберет в строке адреса Web-обозревателя только интернет-адрес сайта (например, "http:// www.site.ru"), без указания имени файла страницы. Как правило, такая страница имеет имя default или index.htm и расширение htm или html, хотя, опять же, все это в руках администратора.

После получения файлов Web-страницы Web-обозреватель сохраняет их на жестком диске клиентского компьютера в особой папке, называемой кэшем. Зачем это нужно? Да хотя бы затем, чтобы вы смогли впоследствии просмотреть эту страницу, не подключаясь к Интернету. Все современные Web-обозреватели поддерживают так называемый автономный режим (по-английски — offline mode), когда они отображают только те страницы, что находятся в кэше. Если же вы попытаетесь просмотреть страницу, которой нет в кэше, Web-обозреватель предложит вам подключиться к Интернету и загрузить ее.
^

Несколько средств веб-разработки

Различные редакторы

На свете существуют две разновидности Web-редакторов: визуальные и невизуальные. Или, как еще говорят, WYSIWYG- и не-WYSIWYG-редакторы. (WYSIWYG или What You See Is What You Get -"что ты видишь, то ты и получишь".)

Невизуальные редакторы работают с "чистым" (или "сырым") HTML-кодом. Они предоставляют возможность быстрого ввода тегов, синтаксического подсвечивания, проверки правильности получившегося кода и ссылок. К ним относится, в частности, известная Arachnophilia.

Невизуальные Web-редакторы часто называют HTML-редакторами.

Визуальные редакторы позволяют работать с самой Web-страницей "как она есть". Пользователь редактирует и форматирует текст, вставляет рисунки, таблицы, как в обычном текстовом редакторе, а уж сама программа формирует соответствующий HTML-код. К такого рода редакторам относится популярный Microsoft FrontPage и целый ряд программ попроще.

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

Специально для таких пользователей, совмещающих прекрасное знание HTML с пристрастием к визуальным средствам редактирования, существуют так называемые гибридные редакторы. Они имеют мощные средства визуального редактирования, одновременно предоставляя доступ к получившемуся HTML-коду. Именно к таким редакторам и относится Macromedia Dreamweaver.

Вообще-то сейчас, судя по всему, уже нет чисто визуальных редакторов — все они являются гибридными. Просто у одних доступ к HTML-коду осуществляется проще (Dreamweaver), а у других — чуть сложнее (FrontPage). Поэтому практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы.

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

Простейшие средства создания веб-страниц

Веб-страницы кодируются на языке гипертекстовой разметки — HTML. Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows. Собственно говоря, это именно то, что нужно, — простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit — для MS-DOS, vi или jed — для Linux, Kedit — для Linux/KDE и т. д.)

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

Веб-редактор TextPad

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

Веб-редактор TextPad позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег , нужно выбрать из списка пункт Block > Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block > Preformatted, в текст автоматически будут добавлены теги и и . Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код: ? ? ?

Кроме списка тегов TextPad предоставляет нам также возможность выбирать из списка специальные символы (список HTML Characters), а также, если потребуется, любой управляющий символ, например символы псевдографики DOS и другие. Те, кто часто вводят какие-либо последовательности символов, что при написании веб-страниц не редкость, могут облегчить свою задачу, записав в TextPad соответствующие макросы. Для записи макроса надо нажать комбинацию клавиш CTRL+SHIFT+R (или выбрать из меню Macros пункт Record). При этом начнется запись макроса, то есть все последующие действия будут запомнены. Чтобы закончить запись, надо снова нажать комбинацию клавиш CTRL+SHIFT+R, после чего присвоить имя файлу макроса, а также дать название для представления макроса в меню. Здесь можно также дать, если нужно, краткое описание макроса и указать имя его автора. После нажатия на кнопку ОК название макроса появится в меню Macros. Выбрав его, можно ввести сразу всю заданную последовательность символов.

Для удобства отладки можно установить флажок в пункте Line Numbers (Нумерация строк) в меню View (Вид), — в этом случае все строки текста будут пронумерованы. Хочется отметить, что если в меню Configure (Настройка) включен пункт Word Wrap (Перенос по словам) для автоматического переноса концов длинных строк в видимую часть экрана, то каждая такая длинная строка все равно будет нумероваться одним номером, а не двумя или тремя (кстати, такая нумерация почему-то недоступна в замечательной программе Homesite, о которой речь пойдет ниже). А если в меню View (Вид) включить флажок Visible Spaces (Отображать пробелы), то можно увидеть на экране и “невидимые символы”, такие, как пробелы, символы табуляции и прочие.

В программе TextPad можно легко сравнить два файла, выбрав из меню Tools (Сервис) пункт Compare Files (Сравнить файлы). А если есть два (или более) похожих файла, в некоторые местах которых надо внести изменения, удобно использовать функцию Synchronize Scrolling (Одновременная прокрутка) из меню Configure (Настройка). В этом случае можно открыть сразу несколько файлов, например, выбрав из меню Windows (Окна) пункт Tile Vertically (Расположить по вертикали), и тогда при прокрутке одного из них другие прокручиваются синхронно. Среди других полезных функций программы TextPad стоит отметить возможность автоматической смены клавиатурного регистра командой Edit > Change Case (Правка > Сменить регистр), автоматического копирования в буфер слова или строки, на которой находится курсор, с помощью команд Edit ” Cut Other (Правка > Вырезать) и Edit > Сору Other (Правка > Копировать), а также функцию проверки орфографии Tools > Spelling (Сервис > Правописание). И, конечно, здесь присутствует возможность просмотра созданного файла в броузере View > In Web Browser (Вид > В броузере).

Веб-редактор Arachnophilia

Завершив краткий обзор возможностей программы TextPad, давайте рассмотрим другую программу для написания HTML-кода — Arachnophilia.

Как и в предыдущем случае, программа автоматически подсвечивает синим цветом теги и атрибуты, а значения атрибутов — зеленым, что улучшает зрительное восприятие, хотя проверка правильности тегов и отсутствует. Зато если случайно забыть закрыть тег, то все последующее содержимое файла подсветится бордовым цветом, так что ошибка сразу бросится в глаза. В программе Arachnophilia предусмотрена автоматизация ввода тегов HTML. В нижней части окна имеются кнопки, каждая из которых открывает соответствующую кнопочную панель. На этих панелях расположены кнопки для быстрого ввода тегов. Например, если нажать кнопку Styles (Стили), то откроется панель управления, содержащая кнопки для ввода тегов форматирования текста . Нажатие на любую из них вводит тег или блок-заготовку. Например, после нажатия на кнопку BR в тексте появится тег , а после нажатия на кнопку HR — появится сразу целая заготовка: .

Нажатие некоторых кнопок вызывает появление диалоговых окон. Например, нажав на кнопку Color (Цвет), можно открыть стандартное диалоговое окно выбора цвета, а с помощью кнопки TableWiz (Мастер таблиц) открывают диалоговое окно Table Wizard (Мастер таблиц), средствами которого можно предварительно задать количество строк и столбцов в таблице, а также определить ее ширину, цвет линий и некоторые другие параметры .

Отличительной особенностью программы является возможность легкого просмотра веб-страницы в различных броузерах, для чего в меню Preview (Предварительный просмотр) предусмотрен пункт Identify Browser (Указать Лроузер). Здесь можно назначить до шести различных броузеров, в каждом из которых легко открыть создаваемый HTML-файл для просмотра, даже не сохраняя его на диске.

Однако самым замечательным свойством программы, пожалуй, является функция Instant View (Немедленный просмотр), которая доступна в меню Preview (Предварительный просмотр). Если она включена и внутренний броузер, который также имеется в программе, открыт, то все изменения, вносимые в текст HTML, немедленно отображаются на экране! Правда, в некоторых случаях, программа не успевает за вводом данных и изображение в окне броузера может исчезать. Но не волнуйтесь, а введите следующий символ, и изображение снова появится.

В программе Arachnophilia существует множество дополнительных полезных функций. Например, в меню Selection (Фрагмент) есть команда Find/Replace/Count (Поиск/Замена/Пересчет), которая позволяет быстро найти или заменить нужные слова в выделенной области, что часто очень выручает при создании веб-страниц. Команда Tag Delimiters (Ограничители тегов) из того же меню позволяет преобразовать угловые скобки, являющиеся общепринятыми ограничителями тегов HTML, в специальные символы , что необходимо, когда надо показать код HTML на самой веб-странице. Можно также осуществить обратное преобразование. В этом же меню есть команда Strip all HTML tags (Скрыть теги HTML), с помощью которой можно быстро освободить текст от HTML-тегов, например, для переноса его в другую программу. Программа Arachnophilia, кстати говоря, способна читать и записывать файлы формата RTF(Rich TextFormat). При открытии RTF-файла предлагается конвертировать его в формат HTML, но его можно редактировать и в обычном виде.

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

По преданию, 13 сентября 490 года до н.э. греческий воин-гонец, прибежавший из Марафона в Афины, не останавливаясь в пути, упал замертво, но донес весть о победе над персами.

Победу в Великой Отечественной войне обеспечили во многом связисты, не зря в книгах и кинофильмах о том времени упоминается ВЧ-связь, посредством которой Ставка Верховного Главнокомандующего выходила на командующих фронтами. Высокочастотный (ВЧ) канал позволял иметь надежное и, главное, секретное общение на больших расстояниях.

Важной особенностью этой обширнейшей информационной базы является её постоянное обновление и создание новых страниц. Среди многообразия выбора программ для создания веб-страниц (Microsoft FrontPage, AOLpress, HomeSite 5, CoffeeCup HTML Editor 8.5, NetObjects Fusion 5.0, Macromedia Dreamweaver) я бы хотел выделить и подробно рассмотреть программу Microsoft Word.

Еще не так давно Microsoft Word использовался исключительно при создании документов для дальнейшей их печати на листах бумаги. Но в связи с постепенным переходом к безбумажным технологиям каждая новая версия программы предоставляет все больше средств для формирования альтернативного конечного продукта – документа, работа с которым будет вестись на компьютере, без его распечатки. В дальнейшем мы будем называть такие документы электронными. Это могут быть обычные документы Word или, теперь более часто встречающийся вариант – веб-страницы, то есть документы в формате HTML (Hypertext Markup Language – язык разметки гипертекста), размещенного на сервере в Интернете или в интранете компании (локальной сети, обладающими свойствами Интернета).

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

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

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

Чтобы вставить поле в документ, выполните следующее:

1. Выберете команду Вставка ► Поле ( Insert ► Field ) , чтобы отобразить диалоговое окно Поле.

2. Выберите в списке Категории ( Categories ) тип поля

3. Выберите определенное поле в списке Поля ( Field Names ) . Ниже отобразится описание выделенного в данный момент поля.

4. Задайте свойства и параметры поля. Их состав зависит от выбранного поля.

Начиная с Word 2000, формирование веб-страниц перестало сильно отличаться от создания стандартных документов. Команды Word и интерфейс программы практически не зависят от того, над каким документом ведется работа: над обычным текстом или над веб-страницей в формате HTML, а существующие небольшие различия мы рассмотрим далее.

Поскольку формат HTML теперь является одним из стандартных форматов Word, применяющимся наравне с обычными форматами .doc или .rtf (Rich Text Format – расширенный текстовый формат), то при сохранении документов в этом формате остаются доступными большинство основных средств редактирования (исключения мы рассмотрим ниже). Даже если какая-то настройка не влияет на отображении документа в браузере, например, размер полей страницы, все подобные параметры сохраняются в HTML-файле и используются при открытии документа в окне Word. Соответственно, можно сохранить обычный документ Word в формате HTML, а позже открыть HTML-файл и преобразовать его назад в документ Word почти без потери элементов форматирования.

Для создания в Word веб-страницы требуется выполнить три основных действия.

Выберите команду Файл ► Создать ( File ► New ) и в открывшейся области задач Создание документа ( New Document ) щелкните на одной из ссылок:

- Новая веб-страница ( Blank Web Page ) создает пустую веб-страницу

- Чтобы создать веб-страницу на основе встроенного шаблона, щелкните на ссылке Общие шаблоны ( General Templates ) , откройте вкладку Веб-страницы ( Web Pages ) и выберите подходящий шаблон. При этом сформированная веб-страница уже будет содержать разметку текста и графические элементы, соответствующие выбранному типу. Теперь можно изменить страницу и добавить на нее собственные элементы.

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

- Чтобы открыть существующую веб-страницу или обычный документ Word, щелкните на ссылке Документы ( Documents ) , которая заменяется ссылкой Другие документы ( More documents ) , если область задач содержит список последних открывавшихся файлов, и выберите файл в диалоговом окне Открытие документа ( Open ) .

Введите или отредактируйте текст веб-страницы, добавьте графические элементы, отформатируйте документ с помощью стандартных инструментов в Word. При этом учтите следующее:

- Некоторые из элементов форматирования не отображаются или не поддерживаются большинством браузеров: отрицательные отступы абзацев, диагональные границы таблиц, расположение текста в ячейках таблиц по вертикали, границы страниц, колонки, автоматическая расстановка переносов, подложка, колонтитулы, размеры полей и другие настройки, сделанные в диалоговом окне Параметры страницы , некоторые элементы символьного форматирования, например стили подчеркивания, тени и анимации текста. Кроме того, вид части элементов в браузере может отличаться от их вида в окне Word, например, текст может некорректно выравниваться по позициям табуляции, узорчатая заливка становиться сплошной, а обтекаемый текстом графический объект или таблица сдвигаются к левому или правому краю абзаца.

- При редактировании веб-страниц Word обычно позволяет применять средства, не поддерживаемые браузером. Как упоминалось выше, эти элементы сохраняются в HTML-файле и используются при последующих открытиях документа в Word. Но программа предоставляет возможность запретить использование большинства инструментов символьного, абзацного и табличного форматирования, несовместимых с определенным браузером. Для этого выберите команду Сервис ► Параметры , откройте вкладку Общие , нажмите кнопку Параметры веб-документа ( Web Options ) и перейдите на вкладку Обозреватели ( Browsers ) . На ней выберите в раскрывающемся списке версию браузера и убедитесь, что в расположенном ниже списке установлен флажок Отключение компонентов, не поддерживаемых этими обозревателями ( Disable Features Not Supported By These Browsers . Word во всех диалоговых окнах отключит не поддерживаемые средства. А если документ уже содержит какой-либо из этих атрибутов форматирования, то при сохранении файла программа сделает запрос и, получив положительный ответ, преобразует подобные элементы, если это возможно, в аналогичные, но поддерживаемые браузером. Учтите, что Word отключает средства только для веб-страниц, поэтому, чтобы запретить их использование для обычного документа, который потом станет веб-страницей, следует сохранить его в формате HTML.

- Интерфейс Word при работе с веб-страницей немного отличается от стандартного. Например, кнопка Создать ( New Blank Document ) заменяется кнопкой Новая веб-страница ( New Web Page ) . В меню Файл появляется команда Версии ( Versions ) , а в меню Вид – команда Источник HTML ( HTML Source ) , позволяющая напрямую редактировать HTML-код веб-страницы.

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

- Лучше всего редактировать веб-страницы в режиме веб-документа, в котором документ отображается почти так же, как в большинстве популярных браузеров. Конечно, для более точного просмотра следует открыть документ в браузере, выбрав команду Файл ► Предварительный просмотр веб-страницы ( File ► Web Page Preview ) .

Если на шаге 2.1 создавалась новая веб-страница или открывалась существующая, можно воспользоваться обычными командами Сохранить или Сохранить как – документ по умолчанию сохраняется в формате HTML. Но если шла работа со стандартным документом Word, следует выбрать команду Файл ► Сохранить как веб-страницу ( File ► Save As Web Page ) .

Word использует несколько форматов HTML. Задать специфичный формат позволяет раскрывающийся список Тип файла ( Save As Type ) в диалоговом окне Сохранение документа :

- Веб-страница (*. htm ; *. html ). Веб-страница сохраняется в HTML-файле, но все графические и другие сопутствующие данные записываются в отдельные файлы. При этом запоминаются все элементы Word, содержащиеся в документе вне зависимости от их поддержки браузерами.

- Веб-архив (*. mht ; *. mhtml ). Весь документ сохраняется в одном файле веб-архива. Также запоминаются все элементы Word.

- Веб-страница с фильтром (*. htm ; *. html ). Веб-страница записывается так же, как и в первом варианте, но сохраняется только необходимая информация, а неподдерживаемые браузерами элементы Word отбрасываются.

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.



КАК СОЗДАТЬ WEB-СТРАНИЦУ

Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.

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

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню — позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза — текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

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

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

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

В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.

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

Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование — Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню — позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

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

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

Использование шаблонов оформления

Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:

Далее в предлагаемой заготовке документа вы должны ввести тексты и картинки:

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.

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

Последний вопрос, который мы планируем рассмотреть в данном разделе — создание гиперссылок в документе.

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка — Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

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

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

Тогда при создании гиперссылки нужно указать эту закладку (кнопка Закладка… расположена в правой части формы), выбрав, например, ее из списка в форме:

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл — Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением .htm и одноименная папка с дополнительными материалами.

Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.

В нижней части экрана создается специальная строка, где располагаются кнопки перехода к слайдам и кнопки для задания различных параметров просмотра презентаций.

Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

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

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд — оглавление коллекции.

Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид — Сортировщик слайдов) и перетащить новый слайд в начало коллекции.

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

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

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.

После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:

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

Обзор редакторов для верстки веб-страниц

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

В этой статье я дам краткий обзор по наиболее популярным редакторам, чтобы помочь вам сориентироваться. Кроме того я приведу полезные ссылки по каждой программе: сайт разработчика, где можно приобрести/скачать в интернет этот редактор, ссылки на обучающие программы и инструкции по работе с редактором.

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые .

Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.

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

Какого же типа вам следует заводить редактор? Если вы изучаете html, css или другие технологии для разметки страниц, если вы хотите уметь создавать качественные страницы и быть профессиональным кодером, то безусловно вам нужен текстовой редактор. Если же у вас нет времени на изучение html, css и прочих технологий, если перед вами не стоит очень сложных задач в выполнении страницы, то смело заводите себе визуальный редактор и пользуйтесь им, он очень экономит время и силы. А лучше всего иметь у себя на компьютере и визуальный, и текстовой редакторы для разных нужд.

Macromedia Dreamweaver MX

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

Разработчики утверждают, что Macromedia Dreamweaver MX предназначена для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Кроме того Dreamweaver легко интегрируется с другими программами от Macromedia, например, такими, как Flash. Т.е. Dreamweaver гораздо больше, чем просто визуальный редактор, это достаточно мощный и сложный инструмент, а всякий сложный инструмент требует, чтобы на его освоение было потрачено какое-то время, прежде, чем пользователь сможет работать в нем. Однако, я считаю, что вас не должно смущать, что придется изучать, как пользоваться программой, Dreamweaver стоит того.

Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe - все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако, следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший. Т.е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном).

Хочу также добавить, что, вероятно, стоит использовать с GoLive такую программу, как Adobe LiveMotion (в предыдущих версиях она называлось Image Styler). Хотя, по идее, LiveMotion является графическим редактором, в котором вы можете создавать незатейливую, но качественную графику для своих веб-сайтов, эта программа также умеет верстать веб-странички, на основе того, что вы нарисовали (не лучшим образом, но довольно прилично, плюсом является то, что LiveMotion сам режет готовый макет на много картинок, которые вы потом можете использовать при верстке сайта в GoLive).

Если верить разработчикам, то программа FrontPage позволяет создавать веб-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, Javascript. Дает достаточно широкие возможности по управлению изображениями и flash-ролликами. Кроме того FrontPage дружит с такими технологиями, как ASP, XML, VBScript, XSL. Также разработчики утвержают, что в последней версии FrontPage теперь борется за чистоту кода, что ж, остается надеятся, что это так, т.к. раньше данный пункт был не на высоте (раньше FrontPage вставлял в код очень много ненужных комментариев и другой лишней информации, так что правильностью и чистотой кода странички, сделанные в этом редакторе похвастаться не могли).

Программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP и Perl, умеет создавать макросы (нападобие Word`a и Excel'я), включает в себя кучу различных справочных материалов по CSS и Html, и многое другое.

Notepad он же Блокнот. В этой программе нет никаких функций, которые облечат вашу жизнь: ни подсветки кода, ни вставки готовых конструкция кода, ничего, но зато эта программа есть в Стандартных на компьютере у каждого пользователя. С нее вы можете начать свои первые шаги в написании кода, а затем уже сменить на более понравившийся редактор. Все мы когда-то начинали с Блокнота :)

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

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office 97, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

Иными словами, средства, предназначенные для работы с Сетью, стали использоваться и в других целях, с нею не связанных, а среди программного обеспечения, устанавливаемого на большинство персональных компьютеров, приложения для Internet заняли свое почетное место.

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

2. Язык гипертекстовой разметки.

Сценарий и структура Web-документа

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

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

Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде всего, это

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

Также основным тегом является

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа.

Читайте также: