Лекция: Глава 13
Существуют мощные инструментальные системы разработки сайтов, например Microsoft FrontPage или Macromedia Dre-amweawer. Для разработки отдельных Web-страниц можно использовать свободно распространяемые редакторы FrontPage Express (входит в состав Microsoft Internet Explorer) и Netscape Composer (входит в состав Netscape Communicator).
Рассмотрим в качестве примера использование Netscape Composer (рис. 13.1) для создания и редактирования Web-страниц без программирования на HTML. Composer позволяет форматировать текст, создавать различного типа списки, помещать на страницу графические изображения и таблицы, вставлять гиперссылки и так далее.
Процесс создания и редактирования страницы очень нагляден, так как производится в режиме WYSIWYG («What You See Is What You Get» — «Что видишь, то и получишь»).
Запустим Netscape Composer командой [Программы-Netscape Communicator-Netscape Composer]. Окно приложения представляет собой стандартное окно, в верхней части которого расположены строка меню и горизонтальные панели инструментов.
Файл Правка Ё№ Б;?at*о <*ур»>.зт Сееьис Ьо^пд^нты £пр«ека
| J fi) i -' л. & A fi] а/ @ С" -
щ Соэасгь Открыть Экспорт Браузер Встар Пе**тъ Рейс*. Ссылка Метка Ри^умс* Лш**я
£ jевший 3 р7«1«й™йо»а*3 |l2 jj И-l А /1 А ^ :£ !Е '1 '1 г,
»<£" —ч*"- ij^^^-fmcKi _________________________ °Ч&. «df <Р ^J /f
Рис. 13.1. Окно редактора Netscape Composer
Создадим с помощью этого редактора Web-страницу «Комплектующие», содержащую таблицу с наименованиями комплектующих и их ценами.
18. Ввести команду [Файл-Создать-Пустую Страницу].
Сначала дадим странице название и сохраним ее в виде файла в папке сайта.
19. Ввести команду [Формат-Цвета и Свойства Страницы].
На появившейся диалоговой панели Параметры страни
цы в окне Заголовок: ввести текст «Комплектующие».
Основы языка гипертекстовой разметки документов
20. Ввести команду [Файл-Сохранить как...]. На диалоговой
панели Сохранить как… ввести имя файла hardware.htm и
выбрать папку для сохранения.
Введем заголовок страницы «Цены на комплектующие», установим требуемые размер и цвет шрифта, а также тип выравнивания.
| и 1».л.1.чт\ i„www -^ |
| Цены на комплектующие I---------------------- 1 иг1 |
| * — j-j j. |
21. В окне приложения ввести
текст. Задать команды:
[Формат-Заголовок-1]
[Формат-Выравнивание-
По Центру]
[Формат-Цвет...]
Заголовки различных уровней, различного типа списки и абзацы предоставляют большие возможности по форматированию текста на Web-странице. Однако, если необходимо соблюдать точное размещение текста и графики или распределять текстовую и числовую информацию по строкам и столбцам, целесообразно использовать таблицы.
Разместим информацию о ценах на комплектующие компьютера в таблице, которая будет содержать три столбца («№», «Наименование» и «Цена») и четыре строки.
| Шп-^ямяаЛ1- >>^Щ*^*«-+:3&9! шжЩШ8я | ||
| Ко*ааство строи. [* К owweerao ewfiuoe | ||
| Вьоаеянмпнс т *&*чы | ||
| <*■ Поувгм^ксла & Г u*<t4 *» Псз*» *t * | ||
| Г ^^«ч* Г Г | ||
| Р *MB*ap*v | -»»c«i4o« | ||
| Htflee**iM««flj «ой> *■«- | гмм э« | ||
| 0-сг#> «г-грм **»гм. j TWteiwtot | ||
| С &<t»wi *6*-ьы 1 ' ' • | ""^ | |
| Г * ««** <мср« ) К | -», | ~3 | |
| !7 fvu* V•*■"££aMP"1** | ||
| * «tsSmiw | ||
| Р Jeer j Г ^^ГГГГГГГ ггггггг rm-r-rrr -' { ■■■»■■■ | •.*… 1 | |
| _->.#.*… j | ||
| I | ||
| ^ *. — - « | ||
| Л ••„->.„*._ *»*„*. ч^,» Ч | ~1 | |
| вНГ… Ш, | I | |
| sai»————" — | | | |
| "-*- " | -, | |
| »«...*..- | ||
| г „,__«_. | -а- *- j | | |
| г ...-------- ..„. » „,««_ |
22. Ввести команду
[Вставка-Таблица-Таблица].
На появившейся диалоговой
панели Параметры Новой Таб
лицы в текстовых окнах с по
мощью переключателей,
флажков и раскрывающихся
списков установить необходи
мые параметры таблицы, в том
числе цвет фона таблицы.
23. Ввести и отформатировать данные в таблице с помощью пункта меню Формат. Ввести команду [Формат-Свойства Таблицы).
На диалоговой панели Свойства Таблицы установить необходимую ширину столбцов и другие параметры.
Глава 13
| Обам* ивсгмФон jbruMtUJ Ийтл омни*- | ||
| ИИ| ЗОьтммеп | Обычным теист ) etc/ Ссылки | |
| ИИ) Ёыйр»*ь* оеьи*>. | Дишвная Ссыща | |
| Просмотре иная Ссыпка | ||
| С 1] £<>44-Di«et*»*^«-3atpooi9tt«neeT] | ||
| Фомы лЭ ptTpm* | ||
| У j Г £ ^»«*. | i^J — 1 | ||
| 1 » 1 | Этн*па ( | tnpawa [ | |
Для того чтобы Web-страницы выглядели привлекательнее, мы можем подбирать различные сочетания цветов для текста, непросмотренных, просмотренных и активных гиперссылок. В качестве фона страницы можно использовать цвет или какое-то графическое изображение. Как правило, это изображение небольшого размера, которое, повторясь много раз, заполняет все окно браузера, в котором отображается документ. Получаются своеобразные «обои» на странице. 24. Ввести команду [Формат-Цвета и Свойства Страницы]. На диалоговой панели Параметры Страницы на вкладке Цвет и фон установить оптимальную цветовую схему для отображения текста, гиперссылок и фона.
Готовый сайт хранится гпппмгг^-=>
в каталоге \textbook\HTML\ ^и-»«м |£§Г
Практические задания
*■-?»*»*?>■ ^f
13.6. Используя инструментальное средство разработки Web-сайта, попробуйте улучшить дизайн вашего сайта.