Выбранный для просмотра документ Создание web-сайта в Microsoft FrontPage 2003.pdf
ГЛАВА I. О РАБОТЕ C MICROSOFT FRONTPAGE 2003 ................................................
ГЛАВА II. СОЗДАНИЕ WEB-САЙТА БОТАНИЧЕСКОГО САДА ..............................
Microsoft FrontPage 2003 представляет собой идеальное решение для быстрой разработки web-сайтов.
В Microsoft FrontPage 2003 для создания web-страниц применяется метод WYSYWYG (what you see is what you get – что я вижу, то и получаю).
Благодаря этому в FrontPage можно просто вводить текст и форматировать его, добавлять рисунки, кнопки и анимацию, гиперссылки и создавать другие элементы web-страниц в интерактивной среде, в которой можно просматривать web-страницу прямо в ходе ее создания и даже тестировать многие функции. После того как работа будет завершена, FrontPage 2003 автоматически создаст необходимый HTML-код, описывающий страницу; программа, разумеется, никогда не допустит синтаксических ошибок. Внося дальнейшие изменения в web-страницу, FrontPage будет просто
автоматически переделывать HTML-код так, чтобы он отражал внесенные изменения.
Замечательной особенностью FrontPage является возможность, минуя ручной ввод кода (для этого нужно лишь, чтобы ваш сайт поддерживался специальным сервером), создавать сложные интерактивные элементы, такие как формы, гостевые книги и даже web-серверы, предназначенные для определенных нужд.
Актуальность исследования темы дипломной работы заключается в необходимости создания web-сайта для ботанического сада с целью его развития, демонстрации итогов деятельности и привлечения инвесторов. Сеть Интернет с каждым годом приобретает все большую аудиторию, что и обуславливает выбор размещения информации о нашей организации в виде web-документа. А использование конструктора сайтов FrontPage 2003, входящего в пакет Microsoft Office, облегчает нашу задачу, так как не требует особого знания языка программирования, при этом предоставляя широкие возможности по созданию динамически сложенного и профессионально оформленного сайта.
Объект исследования: процесс создания web-сайта с помощью
FrontPage 2003.
Предмет исследования: создание web-сайта ботанического сайта К(П)ФУ с помощью Microsoft FrontPage 2003.
Новизна состоит в том, что созданный web-сайт ботанического сада К(П)ФУ с содержащейся в нем информацией был сконструирован впервые.
Гипотеза состояла в предположении: в результате применения конструктора сайтов FrontPage 2003 возможно создавать и опубликовывать профессиональные web-сайты со сложными динамическими webкомпонентами.
Эксперимент реализован в созданном web-сайте ботанического сада К(П)ФУ.
Цель исследования состояла в разработке структуры и контента webсайта ботанического сада.
Поставленная цель реализуется решением следующих задач:
1. Изучить литературу по конструированию web-сайтов c помощью Microsoft FrontPage 2003.
2. Определить пути, позволяющие разработать динамический сайт с удобным интерфейсом.
В FrontPage хорошо продуман пользовательский интерфейс.
В Главном окне FrontPage отображаются все стандартные элементы, присутствующие обычно в окнах Windows, а также специфические детали, характерные для FrontPage. При этом можно самостоятельно выбрать, какие
элементы отображать, а какие нет при просмотре в различных режимах.
Как и в окне любой программы Windows, в верхней части окна FrontPage имеется строка меню, под ней располагаются панели
инструментов. Они содержат кнопки, позволяющие вызывать наиболее часто используемые команды.
По умолчанию FrontPage 2003 отображает только две из всех возможных панелей: Standard (Стандартная) и Formatting (Форматирование).
Панель Standard содержит общие функции, необходимые для работы с FrontPage 2003: создание новой страницы, открытие web-сайтов и файлов, сохранение файлов, запуск проверки правописания, вырезание, копирование, вставка, печать, вставка компонентов FrontPage и таблиц, предварительный просмотр, работа с гиперссылками и публикация web-страницы в Web или в вашей интрасети.
Панель Formatting очень похожа на аналогичные панели форматирования в других программах Microsoft Office. Ее основное назначение заключается в осуществлении операций по форматированию текста и абзацев. Отличительной особенностью панели Formatting в FrontPage от панелей форматирования в других программах является то, что доступные начертания текста согласуются со стандартами HTML.
В FrontPage имеется множество других панелей, предназначенных для выполнения специальных задач, просмотреть список всех панелей можно, щелкнув правой кнопкой мыши по пустому пространству любой из панелей:
• DHTML Effect (Эффекты DHTML): динамический HTML позволяет добавлять к документам динамические эффекты. Например, можно сделать так, чтобы кнопка начинала блестеть при наведении на нее указателя мыши, или вы можете заставить текст летать по экрану.
• Drawing (Рисование): используя инструменты панели можно создавать рисунки прямо на web-странице. С помощью панели Drawing можно создавать на странице различные фигуры, такие как стрелки, элементы блок-схем, ленты и другие.
• Drawing Canvas (Холст): при создании во FrontPage рисунка, он располагается на «холсте» - области страницы, которую вы можете изменять независимо от ее остальной части. Панель позволяет изменять размеры холста, обрезать рисунок.
• Folder List (Список папок): специальный навигационный инструмент, доступный в режимахPage (Страница), Navigation (Навигация), Hyperlink (Гиперссылки) и всегда видимый в режимеFolders (Папки).Отображает все папки и файлы сайта.
• Navigation (Переходы): панель позволяет тщательно спланировать структуру сайта и определить, как страницы будут связаны друг с другом.
• Pictures (Рисунки): появляется при выделении мышью любого рисунка на странице, содержит все необходимые инструменты для изменения рисунков и для назначения гиперссылок отдельным областям большого изображения.
• Positioning (Размещение): панель позволяет точно размещать на странице все элементы.
• Reporting (Отчеты): работая во FrontPage можно автоматически создавать большое количество различных отчетов, позволяющих эффективнее управлять сайтом и легче отыскивать ошибки в нем. Панель Reports позволяет выбрать подходящий отчет и настроить все его параметры.
• Style (Стиль): с помощью панели можно гораздо проще применять к тексту стили и применять их формат. Необходимо, однако, помнить, что такие стили не отображаются браузерами, не совместными с технологией Cascading Style Sheets (CSS–каскадные таблицы стилей).
• Table (Таблицы): таблицы имеют большое значение в web-дизайне не только потому, что они позволяют представлять информацию удобным способом, но и потому, что они обычно используются для размещения любых объектов на web-странице. Панель позволяет осуществлять практически любые действия, которые только могут быть применены к таблицам, включая их создание, добавление строк и столбцов, слияние и разбиение ячеек, изменение выравнивания содержимого ячеек и изменение цвета фона.
• WordArt: с помощью панели можно создавать эффектные трехмерные надписи, изменять их направление, цвет, размер и форму, а затем использовать на web-странице.
Большую часть экрана FrontPage занимает главное рабочее пространство программы. Отображаемое содержимое области меняется в зависимости от выбранного режима.
Область задач позволяет быстро выполнять три типа задач: открывать существующие или создавать новые web-страницы, работать с буфером обмена и производить поиск файлов. Каждая из задач отмечается собственным названием, появляющимся в верхней части панели.
Режим Page является редактором документов – местом, где можно создавать web-страницы, создавать и форматировать текст, добавлять графику, создавать гиперссылки, а также создавать формы и таблицы. Режим Page предоставляет четыре варианта отображения web-страниц: Normal
(Обычный), С разделением (режимы Обычный и HTML одновременно), HTML и Preview (Просмотр).
Режим Normal Page предназначен для непосредственного создания web-страниц. Страница в этом режиме очень похожа на то, как она будет в действительности выглядеть в браузере, но некоторые отличия все же присутствуют: разметка страницы оказывается слегка отличной от конечного варианта и, кроме того, в режиме Normal Page не работают элементы DHTML; однако, переходить по гиперссылкам возможно, щелкая по ним, удерживая нажатой клавишу Ctrl. Режим Normal Page – рабочая среда, но не область для тестирования.
Как уже было сказано во введении, web-страницы состоят преимущественно из HTML-кода. Однако когда люди создают во FrontPage web-страницы, они просто добавляют и форматируют текст и графику в режиме Normal Page, а программа самостоятельно генерирует HTML-код, необходимый для реализации сделанных на странице изменений. Эта замечательная возможность FrontPage позволяет не вдаваться в детали HTML. Впрочем, иногда бывают случаи, когда работать с исходным HTMLкодом страницы бывает удобнее. В большинстве случаев это необходимо, когда нужно добавить свой собственный кусок кода на страницу. Для этих целей и служит режим HTML Page, позволяющий просматривать и изменять код HTML-страниц.
Режим HTML Page (Код страницы)
Режим Preview Page (Просмотр) позволяет проверить работоспособность страницы. В отличие от режима Normal Page здесь отлично работают гиперссылки (достаточно просто щелкнуть по ней левой кнопкой мыши) и такие функции, как DHTML-эффекты. Однако даже в режиме Preview Page некоторые функции могут работать некорректно. К этим функциям относятся формы и большинство элементов, доступных в меню Insert | Web Component. Чтобы решить эту проблему следует опубликовать сайт на сервере, поддерживающем расширения FrontPage.
Разметка страницы в режиме Preview Page максимально приближена к тому, что будут видеть посетители сайта в своих браузерах. По сути FrontPage отображает web-страницы в режиме Preview с помощью браузера Internet Explorer, поэтому пользователи Web, пользующиеся данным браузером, будут видеть в точности то же, что и разработчик сайта.
Помимо режима Page, где при создании сайта проведено большую часть времени, во FrontPage 2003 имеются и другие режимы, необходимые
для управления сайтом. Они позволяют в простой форме увидеть необходимую информацию о различных аспектах сайта, просмотреть отчеты, позволяющие выявить потенциальные проблемы, а также позволяет составлять план действий, необходимых для создания и поддержания сайта.
Web-сайт всегда состоит из множества web-страниц, поэтому первое, о чем стоит задуматься при его создании – это то, как они создаются. Создание страниц в FrontPage можно осуществлять по-разному. Приведем примеры.
Для того чтобы получить возможность создавать в FrontPage страницы, необходимо сначала создать web-сайт для дальнейших экспериментов над ним. Для этого выполним ряд действий.
1. Выберем команду File | New | Page or Web (Файл | Создать | Страница или web-узел). Откроется область задач, предоставляющая различные возможности для создания новых web-страниц или web-сайтов.
2. Выберем, щелкнув, Web Site Templates (Шаблоны web-сайтов), чтобы открыть диалоговое окноWeb Site Templates.
3. Укажем место на жестком диске, где мы желаем создать новый сайт. Для этого введем необходимый путь в поле Specify The Location Of The New Web (Укажите расположение нового web-узла) в правой части диалогового окна.
4. Щелкнем дважды по значку Personal Web (Личный web-узел) в диалоговом окне Web Site Templates.
5. FrontPage запустит процесс создания нового web-сайта. Это может занять пару мгновений.
6. Если после этого на экране будет открыта новая пустая страница, то щелкнем по кнопке Close в правом верхнем углу new_page_1.htm, чтобы закрыть страницу, так как она уже не понадобиться. В результате мы получим стандартный вид экрана.
Можно создавать новые страницы с помощью контекстного меню в самых различных режимах просмотра программы. При таком способе создания страницы создаются мгновенно и тут же отражаются в списке файлов. При этом мы не получаем возможность выбрать шаблон страницы или присвоить ей подходящее имя или заголовок.
Мы можем создавать новые страницы с помощью контекстного меню в нескольких режимах:
• Page (Страница) – только в списке папок (Folder List).
• Folder (Папка) – в списке папок или в области содержимого (Content Pane).
• Navigation (Переходы) – в списке папок или щелчком по существующей странице в области содержимого. Новая страница автоматически станет дочерней по отношению к выделенной странице.
• Hyperlink (Гиперссылка) – только в списке папок.
Можно создавать новые страницы с помощью меню File в любом режиме. Кроме того, этот способ предоставляет большие возможности: используя его, можно выбрать шаблон страницы из списка стандартных шаблонов и присвоить подходящее имя странице еще в ходе ее создания.
Чтобы создать новую страницу с помощью меню File, выполним предлагаемые действия.
1. Выберем команду File | New | Page or Web. FrontPage отобразит панель задач.
2. В разделе New Form Template (Создать из шаблона) панели задач щелкнем Page Templates (Шаблоны страниц).
3. FrontPage откроет диалоговое окно Page Templates и отобразит доступные шаблоны web-страниц.
4. Выберем желаемый шаблон. При выделении каждого шаблона уменьшенное изображение его вида появляется в области Preview (Просмотр) в нижнем правом углу и сопровождается словесным описанием в области Description (Описание) в правой части диалогового окна.
5. По желанию можно применить к web-странице какой-нибудь стиль, для этого нужно перейти во вкладку Style Sheets (Стили) и щелкнуть по одному из вариантов. Следует иметь в виду, что стили являются продвинутой функцией, зависящей от каскадных таблиц стилей (Cascading Style Sheets - CSS), и корректно отображаются только в браузерах Netscape Navigator 4.5 и Internet Explorer 5 (и их более поздних версиях). Кроме того, каждый браузер отображает страницы, основанные на CSS, по-своему, и предсказать заранее, каков будет вид страницы, достаточно сложно.
6. Щелкнем OK, чтобы создать новую страницу.
7. Щелкнем правой кнопкой мыши по странице и выберем Page Properties
(Свойства страницы) из контекстного меню или воспользуемся командой
File | Properties (Файл | Свойства). Откроется диалоговое окно Page Properties.
8. Введем описательное название для страницы. Щелкнем OK, чтобы закрыть окно Page Properties.
9. Выберем команду File | Save. Откроется диалоговое окно Save As. Здесь можно выбрать название для файла, а также решить, где он будет храниться.
10. Введем имя для файла в поле File Name (Имя файла).
11. Щелкните Save, чтобы сохранить страницу.
По умолчанию, в качестве имени файла странице присваивается ее название, только записанное со знаками подчеркивания вместо пробелов между словами. Выберем место, где желаем сохранить файл. По умолчанию, FrontPage предложит сохранить новый файл в папке web-сайта, над которым мы работали в данный момент, и, как правило, именно так и стоит делать. Впрочем, как и в любом диалоговом окне FrontPage, мы можем выбрать совершенно любое место для файла на своем жестком диске, в локальной сети или даже в Интернете.
Можно создавать web-страницы, импортируя файлы и папки из других директорий жесткого диска или локальной сети. Импорт файлов и папок позволяет скопировать их в папку web-сайта и сделать их его частью. Мы можем также импортировать файлы и папки и из сайтов в Интернете.
Для импорта файлов и папок с жесткого диска или из сети выполним предлагаемые действия:
1. Выберем команду File | Import (Файл | Импорт), чтобы открыть диалоговое окно Import. С его помощью можно импортировать файлы с жесткого диска, из локальной сети или из Интернета.
2. Для добавления файла щелкнем по кнопке Add File (Добавить файл). Появиться стандартное диалоговое окно открытия файла, названное Add File To Import List (Добавление файла в список импортируемых).
3. Выберем файл из списка файлов на жестком диске или в локальной сети. Имя файла будет при этом отображаться в поле File Name в нижней части окна.
4. Щелкнем по кнопке Open, чтобы вернуться к диалоговому окну Import. Теперь выбранный файл будет присутствовать в списке готовых к импорту. Добавьте к списку все необходимые файлы.
5. Для добавления папки щелкнем по кнопке Add Folder (Добавить папку), чтобы открыть стандартное окно File Open.
6. Отыщем папку, которую хотим импортировать и выберем ее в диалоговом окне. Затем щелкнем OK, чтобы добавить папку вместе со всем ее содержимым в список окна Import. Добавьте все желаемые папки
к списку. Мы получим готовый список файлов и папок, предназначенных для импорта. После завершения импорта мы увидим новый список файлов в режиме Folders.
Для импорта файлов из Web убедимся в том, что диалоговое окно Import открыто.
1. Щелкнем по кнопке From Web (Из Web). Запустится мастер webимпорта (Import Web Wizard). Укажем место (web-адрес или URL) страницы, которую хотим импортировать, и щелкнем Next (Далее) для продолжения.
2. Подумаем, стоит ли ограничивать число импортируемых уровней (гиперссылок) данной страницы. Если установить предел в пять уровней (стандартная установка), то выбранная страница и все страницы, связанные с ней, а также страницы до глубины в пять уровней, связанные с этими страницами, будут импортированы. Для импорта только одной страницы установим предел на ноль.
3. Решим, стоит ли ограничивать количество импортируемых данных. Эта возможность бывает очень полезна, особенно в случаях, когда мы не знаем, как много данных содержат страницы, связанные с импортируемой страницей. Устанавливая предел количества данных, мы можем быть уверены в том, что не скачаем слишком много лишнего.
4. Решим, стоит ли ограничивать импорт только текстом и графикой. Если мы не сделаем такого ограничения, может получиться, что мы импортируем Java, JavaScript, ActiveX и другие элементы.
5. Щелкнем Next для продолжения, затем - Finish, чтобы покинуть мастера и начать процесс импорта из Web. В отличие от импорта папок и файлов, мы не сможем создавать списки из web-адресов и импортировать их все одновременно.
Для создания новой web-страницы на основе существующей стоит выполнить следующие действия:
1. Выберем команду File | New | Page or Web, чтобы отобразить область задач.
2. В области задач щелкнем Choose Page (Выберите страницу). Откроется стандартное окно открытия файла, названное New Formed is ting page (Создать из существующей страницы).
3. Если страница, которую мы хотим использовать, отсутствует в папке текущего сайта, выберем web-сайт или папку, которые содержат ее из раскрывающегося списка Look In (Папка).
4. Выберем страницу, которую мы хотим использовать в качестве основы для создания новой страницы, и щелкнем по кнопке Create New (Создать новую). В папке сайта появится новая страница, созданная на основе выбранной вами. Новая страница будет использовать тему текущего сайта.
После создания пустой web-страницы приступают к реализации задуманного проекта, конструируют содержимое сайта, тем самым создавая неповторимый дизайн web-документа.
Безусловно, пользуясь одним лишь текстом, мы передадим много полезной информации, однако web-страница, содержащая один лишь простой текст, весьма скучна. Добавление графики позволяет сделать страницу более интересной для просмотра, кроме того, рисунки позволяют представлять на страницах информацию, выражаемую графическим образом. Мы можем использовать рисунки, входящие в пакет Microsoft Office, или же добавлять их из графических файлов, сохраненных на компьютере или в Интернете. После добавления любой графики можно изменить его размер, способ обтекания текстом и многие другие свойства.
Следует учесть, что в Интернете используют только два типа графических файлов: GIF (Graphics Interchange Format– формат графического обмена) и JPEG (Joint Photographic Experts Group – объединенная группа экспертов в области фотографии). Все браузеры, работающие с графикой, поддерживают эти форматы. Графические файлы таких расширений как PCX, BMP или TIFF, чаще отображаются браузером с помощью
вспомогательных программ – плагинов. Однако, так как мы не можем быть уверены, что у посетителей нашего сайта установлен подходящий плагин, надежнее использовать рисунки форматов GIF и JPEG. Существует еще один формат Интернет-графики – PNG, но он также поддерживается не любыми системами. И поэтому лучше его не использовать.
Каждый из форматов GIF и JPEG имеет свои сильные и слабые стороны, благодаря чему их можно использовать для различных целей. GIF – достаточно компактен работает с числом цветов до 256, идеально подходит для отображения рисованной графики, где не требуется наличие переходящих друг в друга цветов (как в фотографиях). Кроме того, серьезные графические редакторы позволяют уменьшать количество цветов, используемых в GIF-файле, делая его еще меньше. JPEG-файлы требуют больше времени для распаковки (отображения на экране), чем GIF, однако поддерживают возможность непрерывных переходов одного цвета в другой и огромное их количество – 16,7 миллионов оттенков, что делает JPEG-формат более подходящим для отображения фотографий. Также возможно самостоятельно указывать степень сжатия JPEG-файлов, регулируя тем самым размер файла и выбирая наилучшее соотношение между размером и качеством. Чем сильнее сжат файл, тем хуже качество изображения.
Для добавления рисунка к web-странице выполним предлагаемые действия:
1. Выберем команду Insert | Picture | ClipArt (Вставка | Рисунок |
Картинки) или выберем инструмент Insert Clip Art на панели Drawing
(Рисование).
2. Выберем из раскрывающегося списка нужный пункт, в том числе и Search In, включающий: My Collection (Мои коллекции), Office Collection (Коллекция Office) (доступна если FrontPage установлен в комплекте с Microsoft Office) и Web Collections (Web-коллекции).
Удобнее и надежнее всего сохранять все рисунки, используемые при создании сайта, в файловой структуре текущего сайта. Конечно, рисунки могут отображаться независимо от того, где они находятся: на компьютере, в локальной сети или даже в Интернете. Однако, в этих случаях никогда нельзя заранее быть уверенным, что рисунки будут корректно отображаться, особенно, если учесть, что при публикации сайта на web-сервере все файлы рисунков, расположенных за пределами локального сайта, не публикуются.
Для хранения графики страниц в FrontPage имеется возможность пользоваться специальной папкой с именем images (Рисунки), расположенной в файловой структуре web-сайта. Хранить все файлы рисунков стоит именно в ней. Мы можем копировать и импортировать графические файлы в папку рисунков еще перед размещением их на странице или, наоборот, сохранять копии рисунков, размещенных где-то еще, в папке с графикой при сохранении страницы.
В Microsoft Office есть вспомогательная программа Clip Organizer
(Коллекция картинок), упрощающая работу с графическими, звуковыми, анимационными и другими типами мультимедийных файлов. При необходимости возможно самостоятельно добавлять собственные коллекции в Clip Organizer, добавлять или удалять картинки из коллекций, редактировать списки ключевых слов (используемых для поиска), а также изменять свойства коллекций. Коллекции Clip Organizer очень удобно использовать, когда приходится добавлять к множеству страниц различные кнопки и значки. Вместо того чтобы отыскивать их каждый раз на своем жестком диске, просто поместите их в коллекцию картинок, и использовать их станет гораздо проще.
При желании можно добавить какой-нибудь звук к своей странице, выбрав его в Clip Organizer. При этом добавленный элемент не оставляет никаких следов своего присутствия на странице. Такой звук называется фоновым для данной страницы. Для добавления звука воспользуемся теми же инструкциями, что использовали для добавления обычных картинок.
Web-компоненты позволяют добавлять сайту самые продвинутые и изощренные возможности, не затрачивая времени на их программирование. Эта дополнительная функция делает FrontPage предпочтительнее других приложений для создания web-сайтов. Однако следует иметь в виду, что изза сложности этих функций пользоваться ими следует с особой внимательностью. К примеру, web-компоненты могут работать только на серверных web-сайтах, – на дисковых сайтах они запускаться не будут. Более того, на сервере обязательно должны быть установлены расширения FrontPage 2003. К web-компонентам относятся такие эффекты как: бегущая строка, интерактивная кнопка, счетчик посещений, различные способы компоновки коллекций фотографий и множество других немаловажных эффектов, придающих сайту динамизм.
Web-компоненты – это дополнительные возможности, позволяющие использовать мощь FrontPage в полной мере. Web-компоненты (в более ранних версиях FrontPage они назывались webbots, и теперь такое название используется для определения компонента в генерируемом исходном HTMLкоде документа) позволяют автоматизировать процессы, которые в противном случае могли бы потребовать написания HTML-кода или команд на скриптовом языке. Обычно для добавления web-компонента нужно воспользоваться командой Insert | Web component и выбрать компонент, который считаем нужным добавить.
Благодаря компонентам и формам FrontPage мы сэкономим время на разработке web-сайтов.
Компоненты FrontPage представляют собой программные вкрапления на HTML-страницах, расширяющие функциональные возможности web-сайта. В несколько щелчков мыши мы можем вставить в свою страницу, к примеру, поисковый компонент (Search Component), и на странице тотчас появится полнотекстовый поисковый сервис к большому удовольствию наших пользователей. Чтобы этого достичь в традиционном варианте, разработчик web-сайта должен был сделать следующее:
1. Создать форму HTML для инициализации поиска.
2. Приобрести и установить на web-сервер программное обеспечение для полнотекстового поиска.
3. Написать для web-сервера скрипт CGI, обеспечивающий взаимодействие формы HTML с поисковым механизмом.
Благодаря компонентам обо всем этом можно забыть — мы сможем создавать изысканные интерактивные web-сайты, не изощряясь в программировании на HTML и CGI. Только следует иметь в виду, что для корректной работы компонентов FrontPage на сервере, где будет размещаться сайт, должны быть установлены Серверные расширения FrontPage (FrontPage Server Extensions). Эти расширения автоматически инсталлируются на Персональный web-сервер Microsoft (Microsoft Personal Web Server) и Персональный web-сервер FrontPage (FrontPage Personal Web
Server), но на остальные web-серверы их придется устанавливать вручную.
Выбрав компонент из меню Insert Редактора, мы увидим одно или несколько диалоговых окон, предоставляющих возможности конфигурирования его параметров, после чего FrontPage вставит компонент в страницу на том месте, где установлен курсор. Некоторые компоненты связаны с формами.
Чтобы предоставить пользователям нашего сайта возможность поиска слов или предложений в тексте страниц сайта или в сообщениях дискуссионных групп, воспользуемся поисковым компонентом (Search Component). Поисковый компонент можно сконфигурировать на просмотр всех слов в сайте; такой режим называется полнотекстовым поиском (fulltext searching).
Поисковый компонент создает форму, позволяющую пользователям ввести слово или несколько слов для поиска по сайту.
FrontPage в действительности не проверяет все страницы сайта;
вместо этого он просматривает список слов, создаваемый и поддерживаемый Серверными расширениями FrontPage. В качестве результата FrontPage возвращает список страниц, содержащих искомое слово или слова.
Чтобы реализовать возможность поиска слов или фраз по своему сайту, сделаем следующее:
1. Установим в Редакторе курсор в то место, где будет находиться верхний левый угол поисковой формы (созданные поисковым компонентом метка, поле ввода и кнопки).
Если мы захотим исключить из поиска некоторые страницы, запишем их прямо в папку _private каталога вашего сайта на web-сервере (FrontPage по умолчанию не производит поиск по папкам, имена которых начинаются с символа подчеркивания). Если же мы запишем страницу в каком-либо другом месте, а потом переместим ее в Проводнике в папку _private, то нам придется обновить поисковый индекс командой Проводника Recalculate Hyperlinks.
2. В меню Insert выберем пункт Active Elements, а затем Search Form выпадающего меню. На экране появится окно Search Form Properties (Свойства поисковой формы) с вкладками Search Form Properties и Search Results (Результаты поиска). Выберем вкладку Search Form
Properties.
3. В текстовом поле Label for Input (Метка поля ввода) введем текст, который будет служить меткой поля поиска. По умолчанию вам будет предложена строка Search for:.
4. В поле Width in Characters (Ширина в символах) задаем ширину поля ввода (в символах).
5. В текстовом поле Label for "Start Search" Button (Метка кнопки Start Search) наберем текст, который будет нанесен на кнопке запуска поиска.
6. В текстовом поле Label for "Clear" Button (Метка кнопки Clear) наберите текст для кнопки остановки поиска.
На вкладке Search Results диалогового окна Search Form Properties
расположен ряд опций, относящихся к результатам поиска:
1. В текстовом поле Word List to Search (Список слов для поиска) введем Аll, если поиск должен осуществляться по всему web-сайту. Если мы создаем дискуссионную группу при помощи Мастера сайта дискуссионных групп, мы можем указать здесь имя папки группы; это ограничит круг поиска только заданной дискуссионной группой.
2. Три флажка на этой вкладке определяют категории информации, включаемой в отчет о результатах поиска:
• Score (Closeness of Match) (Точность совпадения) - этот показатель отражает качество соответствия результатов поиска запросу, т. е.
позволяет оценить, насколько найденное слово близко к искомому.
• File Date (Дата файла) - установка этого флажка включает в результат
поиска дату и время последней модификации документа, содержащего найденный текст.
• File Size (in Кbytes) (Размер файла в килобайтах). Этот флажок предназначен для вывода в отчет информации о размере найденных документов, что может быть весьма насущным для пользователей с медленным телефонным подключением, которым важно знать, сколь велик документ, прежде, чем начать его загружать.
3. Введя всю необходимую информацию в диалоговом окне Search Form Properties, нажмите кнопку OK. FrontPage поместит поисковую форму на открытую в Редакторе страницу.
Свойства поискового компонента легко можно перенастроить, щелкнув в Редакторе правой кнопкой мыши на компоненте и выбрав в контекстном меню пункт Form Page Component Properties либо выделив компонент и нажав комбинацию клавиш <Alt>+<Enter>.
Единственное ограничение поискового компонента относится к обновлению поискового индекса. Предположим, мы сохранили на сайте страницу test.htm, в тексте которой содержится слово «Теплица». Индекс, поддерживаемый поисковым компонентом, зафиксировал тот факт, что на странице test.htm есть слово «Теплица». Теперь представьте, что вы удалили слово «Теплица» из этой страницы. Поисковый индекс не обновляется автоматически, так что он по-прежнему будет показывать, что «Теплица» в тексте страницы test.htm присутствует. Стало быть, если комунибудь придет в голову поискать на сайте слово «Теплица», он получит ложное указание на страницу test.htm. Чтобы исправить ситуацию, следует обновить поисковый индекс с помощью команды Recalculate Hyperiinks из меню Tools Проводника.
Чтобы поставить на странице дату и время последнего редактирования или автоматического обновления страницы, используем компонент FrontPage под названием штемпель (timestamp).
Чтобы вставить в страницу штемпель, проделаем следующую процедуру:
1. Установим в Редакторе курсор на то место, где должен будет находиться штемпель. Обычно этому компоненту предшествует фраза типа "Дата последнего изменения страницы".
2. Выберем в меню Insert опцию Timestamp; откроется диалоговое окно Timestamp Properties (Свойства штемпеля).
3. В разделе Display укажем, какую именно дату вы хотели бы вывести: дату последнего редактирования (Date this page was lastedited) или последнего автоматического обновления (Date this page was last automatically updated).
Между редактированием и обновлением есть небольшая разница. Страница считается отредактированной, когда она изменена и сохранена на Web-сервере; страница считается обновленной, когда изменена и сохранена на сервере она или ее включаемая страница. Включение в страницу содержимого других страниц осуществляется при помощи компонента включения.
4. Выберем из раскрывающегося списка формат даты и времени на штемпеле. Символы TZ в строках формата времени означают Time Zone (часовой пояс). Если штемпель не будет содержать дату или время, установим в соответствующем поле опцию None.
5. Завершив в диалоговом окне Timestamp Properties ввод необходимой информации, нажмем кнопку ОК, и штемпель появится на вашей странице. Форматирование текста в штемпеле осуществляется стандартными инструментами Редактора.
Компонент Table Of Contents (TOG) используется для создания оглавления web-сайта, содержащего ссылки на каждую страницу. Этот компонент можно настроить таким образом, чтобы при добавлении, удалении и редактировании страниц оглавление обновлялось автоматически.
Чтобы включить в свою страницу оглавление, необходимо сделать следующее:
1. Установить в Редакторе курсор на то место, где будет начинаться оглавление.
2. Вменю Insert выбрать опцию Table of Contents. Откроется диалоговое окно Table of Contents Properties (Свойства оглавления).
3. В поле Page URL for Starting Point of Table (Адрес начальной страницы оглавления) введем URL страницы, с которой будет начинаться оглавление. В оглавлении будут указаны все страницы, ссылки на которые есть на начальной странице. Если вы задать здесь заглавную страницу вашего Web-сайта (чаще всего она называется default.htm или index.htm), то оглавление будет охватывать сайт полностью. Если сайт открыт в Проводнике FrontPage, то для просмотра списка его страниц нажмем кнопку Browse; после этого выберем страницу в диалоговом окне Current Web и нажмем кнопку ОК.
4. В раскрывающемся списке Heading Size (Размер заголовка) выберем размер заголовка первого пункта оглавления. Размер можно задать в пределах от 1 (самый крупный) до 6 (самый мелкий) или оставить установленный в браузере по умолчанию, выбрав опцию None.
5. Остальные опции в этом диалоговом окне управляют поведением компонента Table Of Contents:
• Show each page only once (Включать страницы только единожды).
Чтобы каждая страница присутствовала в оглавлении один и только один раз, установите этот флажок; в противном случае страницы, ссылки на которые есть в нескольких местах, будут представлены в оглавлении в соответствующем количестве экземпляров.
• Show pages with no incoming hyperlinks (Включить в оглавление страницы, на которые нет ссылок). Установите этот флажок, чтобы в оглавление попали страницы, на которые нет ссылок с других страниц вашего сайта.
• Recompute table of contents when any other page is edited (Перестраивать оглавление при любых изменениях). Установите этот флажок для автоматической перегенерации оглавления при каждом добавлении, удалении или редактировании страниц на вашем сайте. Если ваш сайт достаточно велик и страницы на нем обновляются часто, то установка этой опции может замедлить вашу работу, например, при сохранении. В качестве контрмеры можно порекомендовать перестраивать оглавление вручную путем открытия и сохранения страницы, содержащей компонент Table Of Contents.
6. Закончив в этом диалоговом окне все необходимые настройки, нажмем кнопку ОК. Оглавление появится на странице в Редакторе.
Мы не сможем форматировать отдельные пункты оглавления, любое форматирование на этой странице автоматически коснется всего оглавления в целом. Так, например, мы не сможем выделить заголовки курсивом, оставив при этом список обычным текстом.
После получения учетной записи на сервере провайдера мы можем опубликовать сайт. Процесс публикации заключается в копировании файлов сайта через Интернет на сервер. FrontPage позволяет делать это очень просто, особенно если сервер имеет установленные расширения FrontPage. Для публикации сайта необходимо знать три аспекта: URL (местоположение в
Интернете) для публикации, имя пользователя (username) на сервере, пароль (password).
После подписки на услуги провайдера он предоставит нам все эти сведения. URL обычно имеет вид http://www.servername.net/username/.
Для опубликования сайта на сервере, поддерживающем расширения FrontPage, выполним предлагаемые действия:
1. Выберем команду File | Publish Web.
После опубликования сайта FrontPage запоминает его
местоположение, поэтому при последующих публикациях диалоговое окно Publish destination отображаться не будет. Вместо него сразу будет
появляться запрос на ввод имени пользователя и пароля.
2. Введем URL, по которому мы собираемся опубликовать web-сайт.
При публикации сайта на сервере, поддерживающем расширения FrontPage, всегда добавляйте http:// перед вводом местоположения. Этот префикс используется FrontPage для правильной публикации сайта. Если указать местоположение с префиксом ftp://, то расширения для учетной записи могут быть повреждены, в результате чего может потребоваться переустановка сервера.
3. Введем имя пользователя и пароль в диалоговом окне. Щелкнем OK, чтобы открыть диалоговое окно Publish Web.
4. Для публикации всех вложенных узлов выбранного сайта поставим флажок Include sub webs (Включить вложенные узлы).
5. Если мы хотим изменить параметры публикации, щелкнем по кнопке Options (Параметры), чтобы открыть диалоговое окно Options со вкладкой Publish. Доступны следующие опции:
• Выберите опцию Publish changed pages only (Публиковать только измененные страницы), если нужно опубликовать только страницы, которые были изменены
• Determine changes between source and target (Изменения между исходными файлами и конечными): если решено опубликовать только те файлы, которые были изменены, нужно будет указать FrontPage, как программе узнавать, какие файлы были изменены. Если требуется, чтобы FrontPage сравнивала исходные файлы (на ПК) с конечными (на сервере), выберите опцию Determine changes by comparing source and destination webs (Определять изменения путем сравнения исходных и конечных файлов). Если использовать временные метки файлов, то выберем Use source file timestamps to determine changes since last publish (Использовать временные метки файлов для определения изменений после последней публикации).
• Опция Log the publishing changes позволяет записывать изменения при публикации.
6. Если мы хотим опубликовать web-сайт, то достаточно щелкнуть по кнопке Publish (Опубликовать) и дождаться, пока сайт опубликуется.
7. FrontPage начнет публикацию web-сайта. При этом можно наблюдать за протеканием процесса.
8. После успешного протекания публикации FrontPage попросит щелкнуть
по гиперссылке, позволяющей взглянуть на опубликованный сайт.
В диалоговом окне Publish web есть возможности для более точного управления процессом публикации web-сайта. В первую очередь, позволяющее сравнивать web-сайт на ПК с сайтом на сервере. Для этого достаточно щелкнуть по кнопке Show>> (Показать), чтобы расширить окно
Publish web. Область в левой части расширенного диалогового окна отображает сайт на локальном компьютере. В правой же части демонстрируется сайт на удаленном сервере. Используя расширенный режим, можно сравнивать два сайта, сравнивать файлы, даты их изменения, авторов и размеры файлов. В столбце Status в левом окне отображаются указания на то, что необходимо сделать, для того чтобы оба сайта были синхронизированы. В этом столбце могут отображаться ряд значений.
Publish (Опубликовать) – это значение указывает на то, что файл на
локальном компьютере отличается от того, который расположен на удаленном сервере, и он более новый. Поэтому такой файл необходимо опубликовать.
Если для некоторых файлов вы установили параметр Don’t publish
(Не публиковать), то для них в столбце Status будет отображаться Don’t publish.
Up to date (Обновлен) – это значение указывает на то, что файл на
локальном компьютере идентичен файлу на удаленном сервере, соответственно публиковать файл нет никакой необходимости.
Conflict (Конфликт) – это значение указывает на то, что файл на локальном компьютере является более старым, чем файл на удаленном сервере и отличается от него. В этом случае при опубликовании сайта файл на сервере будет перезаписан более старым файлом с локального компьютера. Такая ситуация возможно только для файлов, которые могут обновляться прямо на удаленном сервере, таких как гостевые книги или файлы, содержащие результаты формы. В этом случае лучше всего скопировать файл с удаленного сервера к себе на компьютер.
Контекстное меню, доступное для файлов в левом окне (локальный компьютер), предоставляет довольно много возможностей. Вдобавок к стандартным командам, таким как Cut, Copy, Paste, Rename и Delete, можно выбрать из меню следующие пункты: Change the publish status (Изменить статус опубликования), Publish selected files (Опубликовать выделенные файлы), Delete a file (Удалить файл).
Публиковать файлы и папки с локального компьютера на удаленном сервере можно просто перетаскивая их из левой части окна в правую. Аналогичным образом, перетаскивая файлы справа налево, также мы имеем возможность закачивать файлы с удаленного сервера к себе на компьютер. Это бывает особенно удобно, когда необходимо обновить собственную локальную копию сайта файлами, измененными на удаленном сервере кем-то еще. И особенно это удобно, когда необходимо получить файлы, которые были изменены на сайте автоматически, например, счетчики посещений (Default.htm.cnt в папке _private), файлы результатов форм и обратной связи, гостевые книги и даже файлы с содержимым баз данных, обновляемых через форму.
Если (и только в этом случае) на сервере, где мы собираемся опубликовывать свой сайт, не установлены серверные расширения FrontPage,то для публикации позволяется воспользоваться протоколом передачи файлов FTP (File Transfer Protocol). Конечно, при этом продвинутые функции FrontPage работать не будут, однако основные
элементы любого сайта могут быть опубликованы и без расширений.
Многие провайдеры услуг Интернета (ISP) бесплатно предоставляют своим абонентам дисковое пространство, которое разрешается использовать для размещения небольшого web-сайта. Следует отметить только, что такая возможность обычно активно не рекламируется. К примеру, такие провайдеры, как America Online, MSN, Yahoo, Excite и CompuServe предоставляют дисковое пространство.
Процесс опубликования сайта на FTP-сервере мало отличается от публикации на сервере, поддерживающем расширения FrontPage. Для опубликования сайта на FTP-сервере выполним предложенные действия:
1. Выберем команду File | Publish Web, чтобы открыть диалоговое окно Publish Web.
2. Введем имя пользователя и пароль, когда появится соответствующий запрос.
3. Введем URL, по которому собираемся опубликовывать web-сайт. В данном случае он должен начинаться с префикса ftp://, например, ftp://server.host.net/username/subdirectory.
4. Щелкнем по кнопке Publish (Опубликовать). FrontPage начнет публиковать сайт. После того как весь процесс завершится, мы сможем просмотреть опубликованный сайт, щелкнув по предложенной ссылке.
Если регулярно публиковать файлы на различных FTP-серверах, то стоит сохранять все эти местоположения, чтобы затем их можно было просто выбрать из списка, а не набирать вручную длинные адреса. Для этого следует выполнить следующие действия:
1. Выберем команду File | Publish Web, чтобы открыть диалоговое окно Publish Web (или окно Publish destination).
2. Щелкнем по кнопке Change (Изменить), чтобы открыть окно Publish destination.
3. Щелкнем по кнопке Browse (Обзор), чтобы открыть окно New publish location (Новое местоположение для публикации).
4. В списке Look in (Папка) выберем пункт Add/Modify FTP Locations
(Добавить/Изменить FTP).
5. FrontPage откроет диалоговое окноAdd/Modify FTP Locations.
6. Введем в поле Name of FTP site (Имя FTP-сайта) полный URL местоположения, по которому будут опубликованы страницы.
7. Выберем вариант User (Пользователь) и введем имя пользователя в раскрывающемся списке, расположенном рядом. Введем пароль, соответствующий имени пользователя.
8. Щелкнем Add (Добавить), чтобы добавить этот комплект из URL, имени пользователя и пароля к списку FTP-сайтов в нижней части диалогового окна.
Для изменения ранее добавленного FTP-сайта выберем его из списка FTP-сайтов, изменим имя сайта, имя пользователя и пароль. Затем нажмем Modify (Изменить). Для удаления ранее созданного FTP-сайта выберем его из списка и щелкнем Remove (Удалить).
После того как будут заданы все FTP-сайты, станет возможным выбрать любой из них, просто нажав кнопку Browse в окне Publish destination, выбрав пункт FTP Locations из списка Look in и выбрав нужный FTP-сайт из списка.
Как уже было упомянуто выше, многие функции и компоненты FrontPage 2003 не будут работать, если вы опубликуете сайт на FTP-сервере с помощью FrontPage 2003, так как для их работы требуется наличие на сервере расширений FrontPage. Если мы попытаемся опубликовать webстраницы, которые содержат эти функции или компоненты, то будем предупреждены об этом перед публикацией.
К функциям и компонентам, которые не работают без расширений FrontPage, относятся: обработчики форм (включая формы обсуждений, регистрационные и поисковые формы); совместные границы; страницы включения; страницы и рисунки, отображаемые по расписанию; счетчики посещений; рейтинги; вложенные узлы; каскадные таблицы стилей (CSS); настаиваемые темы; Dynamic HTML; отчеты по использованию.
Мы можем сформировать навигационную структуру сайта, разместив подходящим образом web-страницы в режиме Navigation (Переходы). Этот режим отображает структуру web-сайта наглядным образом, благодаря чему добавлять новые файлы и перераспределять имеющиеся, становится очень просто. Чтобы перейти в режим Navigation, на панели Views выберем соответствующий значок. Основным назначением режима навигации является показ структуры сайта, иерархии его страниц и связей между ними. При этом элементы структуры, связывающие главную страницу сайта с остальными, называются панелями переходов, связанными с представлением Navigation. Линиями в главном окне режима Navigation показывается, как страницы соединяются гиперссылками с панелями переходов.
В ходе исследования темы данной дипломной работы сконструируем сайт, на котором представим информация о ботаническом саде. Имеющиеся у нас сведения мы изложим на четырнадцати страницах:
1. Index.htm – главная страница;
2. История;
3. Список сотрудников;
4. Лаборатории: Дендрология,
• Цветоводство,
• Интродукция,
• Лекарственные растения;
5. Новости;
6. Услуги:
• Реализация семян,
• Выращивание семян,
• Ландшафтный дизайн,
• Оформление зимних садов.
Создаем в редакторе FrontPage структуру сайта, т.е. к главной странице добавим еще тринадцать страниц: История; Список сотрудников; Лаборатории: Дендрология, Цветоводство, Интродукция, Лекарственные растения; Новости; Услуги: Реализация семян, Выращивание семян, Ландшафтный дизайн, Оформление зимних садов.
Создаем структуру, изображенную на рисунке:
1. Для этого перейдем в режим Переходы, выполнив команду Вид/Переходы.
2. Затем необходимо выделить домашнюю страницу и щелкнуть по кнопке Новая страница на панели Переходы или применить контекстное меню, добавится Новая страница 1, которую возможно сразу же переименовать в нужный нам раздел сайта.
3. Аналогичным образом добавляем оставшиеся страницы, за исключением типов лабораторий и разновидностей услуг. В этих случаях следует выделить отдельно web-страницы Лаборатории и Услуги, затем добавить к ним подтипы данных страниц.
4. На каждой странице web-сайта создаем ссылки для всех пунктов навигации.
В главном окне режима навигации мы можем раскрывать и сворачивать иерархические структуры страниц. Чтобы показать нижележащие страницы, щелкнем по кнопке со знаком «+» на родительской странице. Чтобы свернуть их, щелкнем по знаку «–». Можно также изменять ориентацию отображения с книжной на альбомную и наоборот (кнопки Portrait/Landscape – Книжная/Альбомная на панели инструментов или
соответствующая команда из контекстного меню).
Контекстное меню, появляющееся при щелчке правой кнопкой мыши по странице в режиме Navigation, в значительной мере совпадает с меню для страниц в режиме Folders. Впрочем, некоторые из команд меню режима Navigation работают не так, как в режиме Folders. Отличия описаны ниже.
• New | Page (Создать | Страница). При выборе команды New | Page FrontPage создает новую страницу, подчиненную выделенной.
• New | Custom Link Bar (Создать | Пользовательская панель переходов).
Пользовательские панели переходов представляют собой определяемые нами наборы гиперссылок. В отличие от панелей, связанных с режимом Navigation (в этом случае они иногда называются навигационными панелями), пользовательские панели переходов могут содержать любые гиперссылки, какие мы пожелаем, включая внешние
(гиперссылки на web-страницы за пределами разрабатываемого сайта).
Такие панели могут быть размещены на любой странице создаваемого web-сайта, и их часто используют как готовые наборы предустановленных гиперссылок. Создать панель переходов на определенной странице можно, воспользовавшись командой New | Custom Link Bar.
• Add Existing Page (Добавление существующей страницы). Позволяет добавлять файлы, подчиненные (дочерние) выделенной странице. Эта команда часто используется для добавления в режиме Navigation webстраниц, хранящихся за пределами сайта. Чтобы сделать это, следует указать адрес Интернета (URL) в адресной строке (Address) диалогового окна Insert Hyperlink (Вставить гиперссылку). Таким образом, мы можем добавить к структуре абсолютно любой файл.
• Open (Открыть). Открывает страницу либо в редакторе страниц, либо в другом редакторе, связанном с данным типом файлов.
• Open With (Открыть с помощью). Открывает страницу в редакторе, который можно выбрать в окне Open With. Диалоговое окно при этом показывает все редакторы, выбранные ранее для работы с файлами
.htm.
• Preview in Browser (Просмотр в браузере). Открывает страницу в браузере.
• Cut (Вырезать). Удаляет файл и помещает его в буфер обмена, откуда его можно потом куда-нибудь вставить. Эта команда имеется также в меню Edit (Правка).
• Copy (Копировать). Копирует файл в буфер обмена, откуда его можно потом куда-нибудь вставить. Эта команда имеется также в меню Edit.
• Paste (Вставить). При вставке страницы в режиме Navigation она становится подчиненной данной странице.
• Rename (Переименовать). Позволяет изменить заголовок значка страницы в режиме Navigation. Этот заголовок необходим для того, чтобы можно было идентифицировать страницу на панели.
• Delete (Удалить). Предлагает удалить страницу лишь из навигационной структуры или вообще из всего сайта.
• View Subtree Only (Показать только внутреннюю структуру). Эта опция доступна только тогда, когда страница имеет внутреннюю структуру связанных страниц. Если это действительно так, возможно пользоваться этой командой для показа на экране только выбранной страницы и всех подчиненных ей.
• Include in Navigation Bar (Включение в навигационные панели). При активации функции страница добавляется ко всем навигационным панелям web-сайта.
• Properties (Свойства). Открывает диалоговое окно Properties для выбранного файла. При желании с помощью этого возможно изменить заголовок значка страницы. Впрочем, то же самое мы можем сделать и воспользовавшись командой Rename.
При щелчке правой кнопкой мыши по пустому пространству главного окна появляется другое меню, со своими опциями.
• New | Top Page (Создать | Верхняя страница). Эта команда меню добавляет элемент (страницу) к режиму Navigation на уровне самого высокого элемента в иерархической структуре сайта (обычно им является домашняя страница web-сайта).
• New | Custom Link Bar (Создать | Пользовательская панель переходов).
Запускает процесс создания пользовательской панели переходов. Появляющаяся панель переходов при этом оказывается не связанной ни с одной из страниц, поэтому ее необходимо перетащить мышью и «подсоединить» к одной из имеющихся страниц. В противном случае панель переходов становится абсолютно бесполезной.
• Zoom (Масштаб). Открывает подменю, в котором можно выбрать подходящий масштаб (уровень увеличения) отображения режима Navigation. Как и в случае функции Zoom, расположенной на панели инструментов, здесь оказываются доступны несколько вариантов масштаба вплоть до 150%, а также особая команда Size to Fit.
• Portrait/Landscape (Портретная/Альбомная). Выбор ориентации.
• Expand All (Развернуть все). Раскрывает все свернутые внутренние папки web-сайта. Эффект аналогичен щелчкам мыши по значку плюс «+», позволяющим разворачивать отдельные поддрева.
• Web Setting (Параметры Web). Открывает диалоговое окно Web
Settings.
Содержимое сайта (контент) - непростая задача. Не каждый, даже очень грамотный человек, может подать материал так, чтобы он был легко воспринимаем, и запоминающимся.
Дизайн сайта – это связующая нить, устанавливающая связь между автором и посетителями на подсознательном уровне. Посетителями сайта ценится качество контента: лёгкость восприятия, соответствие найденной информации своему запросу, актуальность, занимательность написания (должно возникать желание добавить страницу в избранное и передать ссылку знакомым). Эти факторы влияют на интерес пользователя к созданному сайту.
В основу конструирования разработанного нами web-сайта ботанического сада была положена заранее продуманная структура сайта, - об этом мы подробно рассказали в предыдущей части главы. Затем был создан общий макет страниц для размещения предоставленной нам организацией информации.
В ходе реализации контента сайта нами разработан баннер ботанического сада с использованием многофункционального графического редактора Adobe Photoshop CS6.
Для отображения наиболее важных и срочных объявлений на каждой из страниц web-сайта мы решили использовать динамический webкомпонент «Бегущая строка».
Для
удобства пользования сайтом ботанического сада было принято решение применить
web-компонент «Поиск», осуществляющий поиск вводимого пользователем запроса в
текущем web-узле. Однако, следует отметить, что корректно данный web-компонент
будет функционировать после публикации сайта на
сервере, поддерживающем расширения FrontPage. Если же опубликовать страницу в браузере, то грамотно работать будут лишь поле поиска и кнопка сброса, при нажатии же на кнопку «Найти» выйдет системное сообщение о неправильной работе компонента.
Также для наиболее яркого и легкого восприятия информации нами были применены web-компоненты компоновки графического содержимого, в частности – фотографий.
Созданный нами web-сайт снабжен гибкой системой гиперссылок, позволяющей быстро переходить в нужный раздел web-документа.
Все параметры оформления страницы мы сможем легко видоизменить при помощи Редактора FrontPage.
Путешествуя по просторам Internet, можно заметить, что на многих страницах текст набран простым черным шрифтом и образует одинаковые утомительные абзацы. И хотя сейчас наблюдается явная тенденция к улучшению внешнего вида сайтов, мы все еще далеки от того времени, когда все страницы во Всемирной Паутине будут радовать глаз. Однако, при помощи FrontPage мы сможем, наконец, оформить свои документы так, чтобы они действительно выделялись на общем фоне. Вероятность привлечь внимание публики увеличится, если страницы будут выглядеть ярко и живо.
С интеграцией FrontPage и Microsoft Office появилось намного больше свободы в оформлении web-страниц, чем в предыдущих версиях FrontPage. Многие функции форматирования представлены на панели инструментов форматирования (Format toolbar), которую можно показывать и убирать при помощи опций меню View.
Редактор FrontPage предоставляет множество возможностей вариации гарнитуры символов текста, их цвета и размера. Мы сможем менять большинство параметров оформления, используя кнопки на панели инструментов, причем, абсолютно все опции включены также и в различные меню.
FrontPage в соответствии с правилами языка HTML исчисляет размер шрифта в уровнях, в отличие от более привычных нам пунктов. При этом наименьшему уровню соответствует наименьший размер; например, первому уровню соответствует текст с размером кегля 8 пт, второму уровню — 10 пт и т. д. Кроме того, можно устанавливать произвольные размеры шрифта, а также изменять другие атрибуты шрифта и абзаца с помощью таблиц стилей.
Есть два способа изменения размера символов текста:
1. Выделим участок текста, который хотим изменить. Это может быть одно слово, строчка, абзац или целая страница (чтобы выделить страницу целиком, следует нажать <Ctrl>+<A>), затем щелкнем на кнопке увеличения (Increase Text Size) или уменьшения (Decrease Text Size) размера шрифта на панели инструментов.
2. Выделив участок текста, можно использовать команду Font (Шрифт) в меню Format (Формат)
Удачное цветовое оформление текста может привлечь внимание, но подчеркиваем — удачное. Когда слишком много цветов, текст становится перегруженным и неудобочитаемым. Наиболее подходящий способ использования цвета — выделить цветом первые слова важных абзацев. Такое оформление текста поможет структурировать страницу, ведь посетители всегда обращают внимание на что-то необычное, но такой прием эффективен только в том случае, если им не злоупотреблять.
Для оформления текста возможно использование набора из 48 стандартных цветов, предлагаемого FrontPage, или комбинирование цвета по собственному вкусу. Для изменения цвета выделим нужный участок текста и нажмем кнопку Text Color (Цвет текста) на панели инструментов.
В появившемся диалоговом окне Color (Цвет) выберем цвет из стандартного набора и нажмем кнопку ОК. Если возникнет желание использовать дополнительные цвета, нажмем кнопку Define Custom Colors (Определить цвет), определим цвет и затем щелкнем мышью на кнопке Add To Custom Colors (Добавить в набор). Создавая комбинированный цвет, помним, что для коррекции цвета можно использовать указатель (ползунок) с правой стороны окна. Советуем при создании сайта придерживаться "безопасной" 216-цветной палитры.
Имея в распоряжении широкий спектр шрифтов, мы сможем легко оформить нашу страницу именно так, как мы хотим. Однако, несмотря на большое количество различных возможностей, постараемся быть последовательными и логичными. Не следует использовать в пределах одного сайта чересчур много различных шрифтов и стилей, т. к. текст, от которого рябит в глазах, не хочется читать.
Шрифт, который мы используем, должен быть установлен и на компьютере пользователя. Если мы выберем шрифт, которого нет в пользовательской системе, браузер автоматически будет использовать другой шрифт, скорее всего, Times New Roman. Если все же возникнет желание использовать какой-нибудь специфический шрифт, то в этом случае предпочтительней делать надписи в виде графического изображения.
Image Composer— весьма подходящая программа для подобных целей.
FrontPage не ограничивает в выборе шрифта. Для изменения шрифта выделим текст, который мы хотим изменить, и выберем нужный шрифт из раскрывающегося списка.
Варьируя начертание шрифта, можно выделять наиболее важные слова, фразы или даже целые абзацы из остального текста. Используя этот прием, постараемся быть объективными, примем во внимание интересы будущей аудитории посетителей страницы.
Мы можем легко изменить начертание шрифта (на полужирный, курсив или подчеркнутый), нажав всего одну кнопку на панели инструментов. Эти кнопки специально вынесены на панель инструментов Format. Для этого выделим текст, который мы хотим изменить, а затем нажмем на одну из этих кнопок.
Редактор предоставляет несколько дополнительных стилей, т. н. специальные стили. FrontPage их поддерживает, потому что страницы, которые мы открываем, могут содержать специальные стили. Когда мы создаем новый текст, постараемся использовать стандартные стили, а не специальные. В браузере стили могут не отображаться, т. к. некоторые браузеры их не поддерживают. Если мы захотим использовать специальный стиль, выделим текст и выберем пункт Font в меню Format. Мы увидим диалоговое окно настройки шрифтов Font. Перейдем на вкладку Special
Styles.
Установив соответствующий флажок, мы увидим образец выбранного стиля в окне Sample (Образец). Чтобы применить специальный стиль, выберем его и затем нажмем кнопку ОК. Становятся доступны следующие специальные стили:
• Citation - курсив, который может быть использован для выделения
заголовков: разделов, пособий или книг Sample - шрифт пишущей машинки.
• Definition - используется для выделения терминов.
• Blink - делает текст мерцающим (множество браузеров до сих пор не поддерживают мерцающий текст).
• Code - моноширинный шрифт, который обычно используется для
представления кода программ.
• Variable - курсив, который может использоваться для выделения
(например, имен переменных).
• Bold - полужирный шрифт
• Italic - простой курсив.
• Keyboard - моноширинный шрифт, который можно использовать, например, для ввода текста пользователем
Мы можем использовать несколько стилей одновременно. Например, выбрав Italic и Keyboard, мы получим курсивное начертание стиля Keyboard. Нажав кнопку Style на вкладке Special Styles диалогового окна Font, мы сможем создать и модифицировать собственную таблицу стилей.
FrontPage дает возможность ввести один или несколько символов выше или ниже базовой линии строки. Такой специальный стиль называется верхний или нижний индекс и используется весьма часто (например, при написании математических формул). Такая возможность поддерживается и большинством браузеров.
Мы можем установить начертание выделенного фрагмента текста в виде верхнего или нижнего индекса на вкладке Special Styles диалогового окна Font, для этого выберем пункт Font в меню Format. Выберем Superscript (Верхний индекс) или Subscript (Нижний индекс) в раскрывающемся списке Vertical Position (Вертикальная позиция) и затем отметим номер уровня. Номера соответствуют изменению высоты верхнего или нижнего индекса по отношению к основной строке, а не их размера. Например, отметив Уровень 1 нижнего индекса, мы установим индекс чуть ниже основной строки. Уровень 2 устанавливает нижний индекс еще ниже, чем Уровень 1 и т. д.
Символы, также иногда называемые спецсимволами, находятся вне основной кодовой таблицы ASCII. Базовая таблица ASCII — наиболее широко распространенная в мире система кодирования символов. Но она не включает в себя многие важные символы: специфические буквы многих европейских языков, знак авторского права, знак торговой марки и др. Во FrontPage мы можем использовать многие из этих специальных символов:
1. Установим курсор там, где мы хотим вставить символ.
2. Выберем пункт Symbol (Символ) в меню Insert (Вставка). Затем появится диалоговое окно Symbol.
3. Выберем символ и щелкнем по кнопке Insert. FrontPage вставит символ на страницу, но не закроет диалоговое окно, чтобы, повторяя эту процедуру, мы смогли вставить нужное количество символов.
4. Для завершения работы нажмем Close (Закрыть).
Форматируя абзацы, мы сможем применять такие функции, как выравнивание, оформление абзаца при помощи различных стилей из обширного списка, предлагаемого Редактором FrontPage, и др. Далее описываются многие функции, использование которых поможет добавить к страницам несколько привлекательных штрихов.
Начнем с самого простейшего. Для создания нового абзаца нажмем клавишу <Enter>. Появится новая строчка. По умолчанию новый абзац будет использовать стиль Normal (Обычный). Для установки иного стиля абзаца сделаем следующее:
1. Установим курсор там, где мы хотим начать следующий абзац. Если курсор находится в конце строки, то нажмем <Enter> один раз.
2. Выберем новый стиль в раскрывающемся списке Change Style (Изменить стиль).
Если мы вставим новый абзац в уже существующий, то Редактор разобьет исходный абзац на две части и вставит новый между ними, сохранив стили для обеих частей. Например, вставив абзац стиля Formatted (Форматированный) в текст со стилем Normal, мы получим текст, начало которого отформатировано стилем Normal, далее идет абзац Formatted и оставшаяся часть текста опять использует стиль Normal.
Предположим, что следует изменить стиль абзаца с Normal на Heading 3 (Заголовок 3). Есть несколько способов это сделать. Сначала отметим абзац, стиль которого мы хотим изменить, или просто установим курсор где-нибудь в его пределах. Затем выберем один из трех способов:
• В раскрывающемся меню Change Style (Изменить стиль) выберем стиль нового абзаца.
• Выберем пункт Paragraph (Абзац) в меню Format (Формат). Выберем новый стиль в диалоговом окне Paragraph Properties (Свойства абзаца) и нажмем кнопку ОК.
• Щелкнем правой кнопкой мыши в пределах абзаца и выберем пункт Paragraph Properties из контекстного меню, затем выберем стиль и щелкнем по кнопке ОК.
Чтобы у абзацев был одинаковый отступ, выравниваем их в Редакторе. Для выравнивания абзаца установим курсор где-нибудь в его пределах и нажмем кнопку Increase Indent (Увеличить отступ) на панели инструментов. Чтобы уменьшить отступ, используем кнопку Decrease Indent (Уменьшить отступ).
Мы можем выровнять абзац по левой или правой границе и отцентровать, нажав на панели инструментов клавиши Align Left (Выключка влево), Align Right (Выключка вправо) или Center (Выключка по центру) соответственно.
Эти кнопки могут использоваться как для позиционирования абзаца на странице, так и для размещения текста в ячейке таблицы. После выравнивания по левой границе мы получим текст с рваными краями справа, после выравнивания по правой границе — слева, а при центрировании рваными получаются оба края.
Если мы изменяем стиль абзаца в диалоговом окне Paragraph Properties, то тут же можем изменить и выключку абзаца.
В свою очередь при создании сайта и текстового содержимого мы старались придерживаться единого стиля.
Благодаря гиперссылкам осуществляется переход от одной страницы к другой, а также к разным частям страницы web-сайта. Вводя адрес URL в адресную строку браузера, мы, конечно, можем получить доступ к любой незапрещенной специальными правами странице в Интернете, однако откуда мы можем знать адрес любой страницы в Интернете, какую только захотим получить? Это невозможно, впрочем, благодаря гиперссылкам это и не нужно. Достаточно лишь попасть на домашнюю страницу, а на ней уже будут расположены ссылки на другие страницы, представляющие интерес. Просто щелкнув по гиперссылке, мы сможем отобразить в браузере интересующую страницу, не имея ни малейшего представления о том, какой у нее адрес URL. Поэтому гиперссылки считаются одним из наиболее важных элементов web-страниц (помимо самого содержимого, конечно).
Существует три основных типа гиперссылок:
1. Внутренние гиперссылки – гиперссылки, указывающие на какую-то точку внутри сайта.
2. Внешние гиперссылки – гиперссылки, указывающие на какую-то точку на другом сайте.
3. Закладки – гиперссылки, ведущие к определенному месту на странице нашего web-сайта.
Любая гиперссылка состоит из двух частей, в которых стоит разобраться: сама гиперссылка и ее назначение. Назначение гиперссылки – это точка, на которую мы попадаем, щелкая по гиперссылке. Чаще всего в качестве назначения гиперссылки используются другие web-страницы внутри web-сайта или за его пределами. Хотя назначением может быть все, что угодно, например, рисунок, аудио или видеоклип, программа.
Сама гиперссылка связывается с определенным куском текста (называемым гипертекстом) или рисунком (таким как, например, кнопка). Более того, вы можете присвоить сразу несколько гиперссылок одному рисунку, создав карту изображения.
При создании web-сайта мы будем пользоваться в основном гиперссылками на другие страницы созданного сайта. Мы можем создать ссылку, которая уже существует, или же создать гиперссылку вместе со страницей, на которую она ведет.
Для создания ссылки на существующую страницу сайта выполним предложенные действия:
1. В режиме Page выделите текст, который будет использоваться как гиперссылка. Если текст еще не создан, введите его на странице и выделите.
Гиперссылкой стоит делать такой текст, который кратко описывал бы точку назначения ссылки. Например, гиперссылку, отображающую домашнюю страницу сайта, можно назвать «Главная страница».
2. Щелкнем правой кнопкой мыши по выделенному тексту и выберем пункт Hyperlink (Гиперссылка) из контекстного меню. Можно также щелкнуть по кнопке Hyperlink на панели Standard или воспользоваться командой Insert | Hyperlink. Откроется диалоговое окно Insert Hyperlink.
Пользуйтесь этими кнопками для Введите точку перехода к различным спискам назначения
файлов, которые можно сделать гиперссылки
назначением гиперссылки здесь
3. Создаем ссылку одним из трех способов:
• Щелкнув по кнопке Existing file or web page (Существующий файл или web-страница) и выделив страницу текущего сайта в списке файлов окна Insert Hyperlink.
• Щелкнув по кнопке с изображением папки (называемой Browse for fife (Поиск файла)) для открытия диалогового окна Link to file (Ссылка на файл). После этого выберем страницу, сохраненную на жестком диске или в локальной сети, и щелкнем по ней.
• Воспользовавшись полем Address (Адрес) для ввода точного пути к файлу, на который нужно сделать ссылку.
Возможно также создавать гиперссылку, пользуясь списком Folder или панелью Navigation. Для этого следует открыть страницу, к которой нужно добавить гиперссылку, в режиме Page. Затем из списка Folder или панели Navigation перетащим страницу, на которую мы хотим сделать ссылку, на открытую страницу.
В качестве текста новой гиперссылки будет использоваться заголовок страницы, на которую она ведет, однако при желании мы можем его изменить, введя другой текст в поле Text to display диалогового окна Edit Hyperlink (Изменить гиперссылку).
Протестировать созданную гиперссылку можно в режиме Page, как в обычном, так и в режиме предварительного просмотра.
Мы можем создавать ссылки и на любые другие web-сайты в Интернете. Это бывает очень полезно. Вместо того чтобы размещать чьи-то материалы на своем сайте (которые занимают лишнее место на сайте и могут стать причиной проблем с авторскими правами), мы можем просто разместить у себя ссылку на информацию другого web-сайта. Достоинством такого подхода является то, что если содержимое страницы назначения будет обновлено, то ссылка будет указывать на самую последнюю информацию. Однако, если на сайте назначения будет изменена вся структура, и страница, на которую ведет ссылка, исчезнет (или изменится имя ее файла), то ссылка окажется неработающей, в результате чего при щелчке по ней будет выдаваться ошибка 404 (файл не найден). Поэтому, если мы решим размещать ссылки на внешние web-сайты, то их придется периодически проверять. Проще всего сделать это с помощью отчета, созданного специально для этих целей.
Для создания ссылки на внешний web-сайт мы должны быть подключены к Интернету.
1. В режиме Page выделим текст, который будет гиперссылкой. Если текст еще не создан, введите его на страницы и выделите.
2. Щелкнем правой кнопкой мыши по выделенному тексту и выберем пункт Hyperlink (Гиперссылка) из контекстного меню.
3. Щелкнем по кнопке с названием Browse the web (просмотреть Web) рядом с полем Look in. Откроется браузер.
Если мы знаем точный адрес URL страницы или файла, на который нужно сделать ссылку, то можно опустить все остальные шаги и просто ввести адрес в поле Address (Адрес). Важно написать URL полностью, включая http://.
4. Обычным образом откройте в браузере страницу, на которую нужно сделать ссылку. После этого вернитесь в FrontPage.
5. В поле Address диалогового окна Insert Hyperlink теперь будет отображаться адрес найденного сайта. Щелкнем OK, чтобы создать ссылку на него.
При создании гиперссылок мы не ограничены использованием только текста – мы можем присваивать гиперссылкам и рисункам. Делается это точно так же, как и создание обычных текстовых ссылок, но вместо текста при этом следует выделять рисунок. Однако, в отличие от текста, рисунки никак не будут показывать, что они являются гиперссылками, до тех пор, пока мы не станем наводить на них указатель мыши.
При создании графических гиперссылок мы получаем еще один способ задания пункта назначения гиперссылки. Чтобы воспользоваться этим способом, щелкнем правой кнопкой мыши по рисунку, выберем команду Picture Properties (Свойства рисунка) из контекстного меню и затем перейдите на вкладку General.
Для выбора назначения гиперссылки введите его в поле Location или щелкнем по кнопке Browse и зададим ссылку в окне Edit Hyperlink, как это описано ранее. Щелкнем OK, чтобы закрыть окно Picture properties и добавить ссылку к рисунку.
Независимого от того, насколько качественно был создан сайт, в нем возможны ошибки, которые не были замечены. Такой ошибкой может быть неправильно написанное слово, неработающая гиперссылка, страница, загружающаяся слишком долго, страница, не связанная с сайтом гиперссылками и т.д. Чем сложнее сайт, тем больше вероятность того, что на нем присутствуют хотя бы мелкие элементы, которые требуют исправления.
Первым шагом в проверке сайта на ошибки является использование средств проверки правописания. Пожалуй, нет других таких вещей, как орфографические ошибки, которые столь сильно подвергали бы сомнению компетентность web-дизайнера.
FrontPage позволяет работать со множеством отчетов, помогающих находить проблемы на сайте и быстро их решать. К таким отчетам относятся Broken Hyperlinks (Неработающие гиперссылки), Component errors (Ошибки компонентов) и Unlinked Files (Несвязанные файлы).
В FrontPage есть отчет, позволяющий выяснить, есть ли проблемы с гиперссылками. Если в строках Broken Hyperlinks или Unlinked Files отчета Site summary отображается число, отличное от нуля, то проблемы с гиперссылками присутствуют. Проще всего проверить работоспособность ссылки, щелкнув правой кнопкой мыши по непроверенной гиперссылке и выбрав Verify hyperlink (Проверить гиперссылку) из контекстного меню.
Неработающие ссылки необходимо исправить. Сделать это можно прямо из отчета Broken hyperlinks, щелкнув по ссылке правой кнопкой мыши и выбрав либо Edit hyperlinks (Изменить гиперссылку), либо Edit Page
(Редактировать страницу) из контекстного меню. Исправить ссылки можно либо в диалоговом окне (Edit Hyperlink), указав для них другое значение, либо на странице (Edit Page), просто удалив ссылку.
Из-за ошибок компонентов эти элементы не могут корректно работать на сайте после его публикации на сервере. К примеру, если опубликовать web-сайт, созданный в FrontPage 2003, на сервере, не содержащем установленные расширения FrontPage, то определенные компоненты работать не будут. Ошибки компонентов такого типа являются неустранимыми. Все, что можно сделать, - только удалить компоненты из web-сайта.
Впрочем, существуют ошибки компонентов, которые возможно исправить самостоятельно. Например, добавив компонент Substitution (Замена) к web-странице, воспользуемся командой Insert | Web component
(Вставка | web-компонента), щелкнув по пункту Included content (Содержащий) в списке типов компонентов и выбрав Substitution в правой части диалогового окна. Возможными элементами, которые возможно добавлять в качестве замены, являются web-параметры (для выбора параметра выберем команду Tools | Web settings и воспользуемся вкладкой Parameters).
Если взять в качестве замены параметр, который не существует, возникнет ошибка компонента, - нужно будет либо удалить замену, либо определить параметр.
Если опубликовать вместе со всем сайтом файлы, которые не связаны гиперссылками с другими страницами сайта, то посетители не смогут увидеть их. Чтобы исправить ситуацию, необходимо добавить недостающие гиперссылки. Стоит отметить, что даже если мы не добавим ссылки, несвязанные файлы могут быть найдены при осуществлении поиска по сайту с помощью поисковой системы.
Мы выбрали тему «Создание web-сайта ботанического сада с помощью Microsoft FrontPage 2003» потому, что эта тема заинтересовала нас возможностью изучить новый для нас программный продукт по разработке профессиональных сайтов без применения знаний по htmlпрограммированию.
В ходе исследования темы данной дипломной работы были изучены основы конструирования web-сайтов c помощью Microsoft FrontPage 2003, разработан достаточно конструктивный, слаженно функционирующий сайт ботанического сада с удобной системой навигации.
Полученный результат свидетельствует о том, что, даже не зная тегов языка гипертекстовой разметки, можно и без помощи дорогих и сложных специализированных редакторов создавать связанные, структурированные web-документы.
В ходе дипломного проектирования была поставлена и достигнута следующая цель: разработать структуру и контент web-сайта ботанического сада.
Реализация данной цели потребовала содержательного и методического решения следующих задач:
1. Была изучена литература по конструированию web-сайтов c помощью Microsoft FrontPage 2003.
2. Определены пути, позволяющие разработать динамический сайт с удобным интерфейсом.
3. Разработана концептуальная модель web-сайта.
4. Изучены возможности графического пакета Adobe Photoshop CS6 по созданию графики, а также редактированию готовых изображений.
5. Составлено краткое методическое руководство по разработке webсайта.
1. Акопян А. В.. Teach Pro: Microsoft FrontPage 2003; мультимедийный самоучитель. – СПб.: МТ и ДО, 2006.
2. Берд Д.. Веб-дизайн: руководство разработчика. – СПб.: Питер, 2012.
3. Гарретт Д.. Веб-дизайн: элементы опыта взаимодействия. – М.: СимволПлюс, 2008.
4. Григорьева Н. В.. MS FrontPage 2002, серия «Шаг за шагом». – М.: ЭКОМ, 2002.
5. Кронин Д., Рейман Р., Купер А.. Об интерфейсе: основы проектирования взаимодействия. – М.: Символ-Плюс, 2009.
6. Леонтьев Б.. Web-дизайн: хитрости и тонкости. – М.: Познавательная книга плюс, 2001.
7. Макарова Е.А.. Microsoft FrontPage 2003. – М.: ЭКОМ, 2005.
8. Мэттьюз М., Кронан Д., Пулсен Э.. Microsoft Office – FrontPage2003. – М.:
НТ Пресс, 2006.
9. Нильсен Я., Лоранжер Х.. Web-дизайн: удобство использования Webсайтов. – СПб.: Вильямс, 2007.
10. Омельченко Л., Федоров А.. Самоучитель MS FrontPage 2002. – СПб.: БХВ, 2001.
11. Плоткин Д.. Все о работе с FrontPage 2002. – М.: Аст: Астрель, 2006.
12. Прохорский Г.В.. Как сделать свою веб-страницу или сайт с помощью Microsoft FrontPage 2003. – М.: НТ Пресс, 2005.
13. Рандалл Н., Джоунз Д.. Использование Microsoft FrontPage 2002, специальное издание. – СПб.: Вильямс, 2002.
14. Скотт Б., Нейл Т.. Проектирование веб-интерфейсов. – М.: Символ-Плюс, 2010.
15. Смирнова И.Е.. Начала web-дизайна. – СПб.: БХВ, 2005.
16. Усенков Д.. Уроки Web-мастера. – М.: Лаборатория базовых знаний, 2002.
17. Хестер Н.. Microsoft FrontPage 2002 для Windows, серия «Быстрый старт». – М.: ДМК Пресс, 2002.
18. Чебыкин Р.. Разработка и оформление текстового содержания сайтов. – СПб.: БХВ, 2004.
19. Штарев В.Н., Фарин С.Г.. Microsoft FrontPage 2000: Учебное пособие. –
Томск: Дельтаплан, 2002.
20. http://www.lessons-tva.info/edu/e-inf3/m3t3_4.html. Создание сайта и страниц в FrontPage.
Допустим, что мы решили разработать сайт, на котором будет представлена информация о ботаническом саде. Имеющуюся у нас информацию мы можем изложить на четырнадцати страницах:
1. Index.htm – главная страница;
2. История;
3. Список сотрудников;
4. Лаборатории:
• Дендрология,
• Цветоводство,
• Интродукция,
• Лекарственные растения; 5. Новости;
6. Услуги:
• Реализация семян,
• Выращивание семян,
• Ландшафтный дизайн,
• Оформление зимних садов.
ü Для создания сайта с помощью приложения FrontPage 2003 необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс FrontPage, в котором будет отображаться предыдущий сайт или страница. Для выхода из предыдущего сайта или страницы в FrontPage надо выполнить команду «Файл/Закрыть» или «Файл/Закрыть узел», либо то и другое, если были открыты узел и страница.
ü Затем выполняем команду Файл/Создать и в отрывшейся области задач «Создание» щелкаем мышью на «Другие шаблоны веб-узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб-узлов», в котором необходимо выделить «Пустой веб – узел», далее указать расположение нового веб-узла (например, D:\Сайт\Ботанический сад) и щелкнуть ОК.
После сохранения сайта, на экране в окне приложения FrontPage будет отображаться новый веб-узел в режиме папки.
ü Создание домашней страницы в FrontPage можно осуществлять поразному. Например, можно щелкнуть по кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm, которая показана на рисунке.
ü Далее дважды щелкаем по странице index.htm в открытом окне вебузла. В результате главная страница откроется в режиме страница.
Создаем дизайн страницы либо добавляем заранее разработанную страницу.
ü Конструируем в редакторе FrontPage структуру сайта, - к главной странице добавим еще тринадцать страниц: История; Список сотрудников; Лаборатории: Дендрология, Цветоводство, Интродукция, Лекарственные растения; Новости; Услуги: Реализация семян, Выращивание семян, Ландшафтный дизайн, Оформление зимних садов.
Для этого перейдем в режим Переходы, выполнив команду Вид/Переходы. Затем выделяем домашнюю страницу и щелкаем по кнопке Новая страница на панели Переходы (либо используем контекстное меню). Добавится Новая страница 1, которую возможно сразу же переименовать в нужный нам раздел сайта, щелкнув по ней правой кнопкой мыши и выбрав из контекстного меню соответствующий пункт.
Аналогичным образом добавляем оставшиеся страницы, за исключением типов лабораторий и разновидностей услуг. В этих случаях следует выделить отдельно web-страницы Лаборатории и Услуги, и только потом добавить к ним подтипы данных страниц.
ü С целью единства дизайна страниц сайта копируем содержание главной страницы в созданные страницы.
Для этого открываем главную страницу в режиме Страница и выполняем команду Правка/Выделить все, и щелкаем по кнопке Копировать на панели инструментов. Переходим в режим Папки и щелкаем дважды по страничке История, она откроется в режиме Страница, затем щелкаем по кнопке «Вставить». Содержимое главной страницы скопируется в страницу История, аналогично копируем содержимое главной страницы в остальные двенадцать страниц.
ü На каждой странице web-сайта создаем текстовые и графические (на наше усмотрение) ссылки для всех пунктов навигации.
ü Далее на страницах: История; Список сотрудников; Лаборатории: Дендрология, Цветоводство, Интродукция, Лекарственные растения; Новости; Услуги: Реализация семян, Выращивание семян, Ландшафтный дизайн, Оформление зимних садов изменим содержание в некоторых ячейках, т.е. введем новый текст и рисунки, которые были подготовлены заранее для этих страниц.
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Создание web-сайта в Microsoft FrontPage 2003.ppsx
Скачать материал "Исследовательская работа по информатике: "Создание web-сайта в Microsoft FrontPage 2003""
Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание web-сайта
ботанического сада
с помощью Microsoft FrontPage 2003
Работу выполнила
учитель начальных классов
МОУ «Гимназия №9 г. Буденновска»
Лобанова Наталья Германовна
2015
2 слайд
Содержание
Глава 1. О работе в Microsoft FrontPage 2003
1.1. Интерфейс пользователя Microsoft FrontPage 2003
1.2. Создание web-страницы
1.3. Элементы дизайна web-документа
1.4. Публикация сайта
Глава 2. Создание web-сайта ботанического сада
2.1. Разработка структуры web-сайта
2.2. Содержание web-документа
2.3. Настройка системы гиперссылок
2.4.Тестирование и проверка web-сайта
3 слайд
1.1. Интерфейс пользователя Microsoft FrontPage 2003
Меню
Панель инструментов
Список папок
(Folder List)
Переходы
(Navigation)
Главная рабочая область
Режимы работы
4 слайд
1.2. Создание web-страницы
1. Для выхода из ранее созданного сайта или страницы в FrontPage следует выполнить команду «Файл/Закрыть» или «Файл/Закрыть узел».
2. Затем выполняем команду Файл/Создать и в отрывшейся области задач «Создание» выбираем «Другие шаблоны веб-узлов». В диалоговом окне «Шаблоны веб-узлов» выделяем «Пустой веб-узел» и указываем расположение нового веб-узла.
После сохранения сайта, на экране в окне приложения FrontPage будет отображаться новый веб-узел в режиме папки.
3. Создание домашней страницы осуществляем, щелкнув по кнопке «Создать страницу» на панели «Содержимое».
4. Конструируем в редакторе FrontPage структуру сайта. Для этого перейдем в режим Переходы, выполнив команду Вид/Переходы.
5 слайд
1.3. Элементы дизайна web-документа
Мультимедиа
Гиперссылки
Web-компоненты
Форма, таблица
Интерактивная кнопка
Бегущая строка
Поиск
Счетчик посещений
Коллекция фотографий
Способы представления и компоновки данных
Гипертекстовые
Графические
Текст
Изображения
Аудио
Видео
6 слайд
1.4. Публикация сайта
7 слайд
2.1. Разработка структуры web-сайта
ботанического сада
Основным назначением режима навигации является показ структуры сайта, иерархии его страниц и связей между ними.
В результате исследования темы дипломной работы был сконструирован сайт, на котором представлена информация о ботаническом саде. Имеющиеся у нас сведения мы изложили на четырнадцати страницах.
8 слайд
2.2. Содержание web-документа
ботанического сада
9 слайд
2.3. Настройка системы гиперссылок
ботанического сада
Гиперссылки
Внешние
Внутренние
Закладки
Поиск файла для ссылки
Выберите файл из списка в этой области
Выберите точку назначения гиперссылки здесь
Выберите существующий файл или web-страницу
Введите текст гиперссылки
Переход на одну папку вверх
Просмотр Web для выбора назначения гиперссылки
10 слайд
2.4. Тестирование и проверка web-сайта
ботанического сада
Средства проверки правописания;
отчет Broken Hyperlinks (Неработающие гиперссылки);
отчет Component errors (Ошибки компонентов);
отчет Unlinked Files (Несвязанные файлы).
11 слайд
Спасибо за внимание
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
6 654 513 материалов в базе
Настоящий материал опубликован пользователем Лобанова Наталья Германовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
600 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.