Иванская С. Методы создания и сопровождения сайта - файл n1.doc

приобрести
Иванская С. Методы создания и сопровождения сайта
скачать (228 kb.)
Доступные файлы (1):
n1.doc356kb.21.10.2011 10:23скачать

n1.doc



МИНИСТЕРСТВО ОБРАЗОВАНИЯ СТАВРОПОЛЬСКОГО КРАЯ

Государственное бюджетное образовательное учреждение среднего профессионального образования «Минераловодский колледж железнодорожного транспорта»
МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

ПО САМОСТОЯТЕЛЬНОМУ ИЗУЧЕНИЮ ТЕМЫ


Методы создания и сопровождения сайта





Разработал: Иванская Светлана Алексеевна, преподаватель информатики, высшей категории


Минеральные Воды

2011

Содержание

1. Основы Web-дизайна
1.1. Зачем нужен сайт?
1.2. Что такое сайт?
1.3. Как осуществляется передача Web-страниц в Интернет?

1.4. Определение цели создания сайта
1.5. Разработка технического задания
1.6. Регистрация домена
1.7. Разработка сайта - важнейший этап создания сайта
1.8. Размещение сайта на хостинге
1.9. Регистрация сайта в поисковых системах и тематических каталогах
1.10. Поддержка и регулярные обновления (развитие) сайта
2. Знакомство с программой FrontPage
2.1. Окно приложения FrontPage
2.2. Создание Web-страниц в редакторе FrontPage
2.3. Создание веб–страницы на основе шаблонов FrontPage

2.4. Создание веб–страницы на основе имеющихся Web-страниц в ПК

2.5. Создание сайта в редакторе FrontPage
2.6. Создание сайта на основе шаблона редактора FrontPage

3. Создание Web - страниц
3.1. Создание новой пустой Web – страницы

3.2. Планирование веб-сайта
3.3. Создание веб-узла с помощью приложения FrontPage




Создание Web – сайта в программе FrontPage

1. Основы Web-дизайна

1.1. Зачем нужен сайт?


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

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

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

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

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

1.2. Что такое сайт?


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

Web-страницы создаются с помощью специального языка HTML. HTML или Hyper Text Markup Language является языком разметки гипертекста, разметка осуществляется с помощью тегов. Сегодня кроме HTML применяются и другие языка разметки: WML, XML.

В настоящее время для создания интерактивных сайтов применяются различные современные технологии:, PHP, ASP, Perl, JSP, CSS, базы данных DB2, MsSQL, Oracle, Access и т.д. Современные сайты, как правило, управляемые сайты, т.е. сайты, которые оснащены CMS (Системой Управления Контентом - Content Management Systems).

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

1.3. Как осуществляется передача Web-страниц в Интернет?

Возможность работы с Web-страницами обеспечивает один из видов сервиса Internet, который называется World Wide Web или сокращенно WWW. В основу World Wide Web был положен протокол прикладного уровня http, который обеспечивает прием и передачу Web-страниц.

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

Для создания Веб–сайта компании необходимо:

1.4. Определение цели создания сайта


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

1.5. Разработка технического задания


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

Обычно сайт должен включать:

1. Информацию о компании, реквизиты: почтовый адрес. Телефон, адрес электронной почты

2. Каталог предлагаемой продукции или услуг

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

4. Гостевую книгу

5. Способы оплаты

6. Счетчики числа посетителей (счетчики рейтингов)

1.6. Регистрация домена


Регистрация домена осуществляется в выбранной пользователем зоне ua, ru, com, net, info и так далее. В зависимости от назначения сайта выбирается его зона регистрации. Для регистрации сайта желательно выбрать домен второго уровня, например lessons-tva.info, хотя можно работать и с доменом третьего уровня, например tva.jino.ru.

Домен второго уровня регистрируется у регистратора – организации занимающейся администрированием доменных имен, например http://www.imhoster.net/domain.htm. Домен третьего уровня приобретается, как правило, вместе с хостингом у хостинговой компании. Имя сайта выбирают исходя из вида деятельности, названия компании или фамилии владельца сайта.

1.7. Разработка сайта - важнейший этап создания сайта


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

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

Для разработки сайта используются различные средства: конструкторы сайтов (дизайнеры), WebCoder 1.6.0.0, профессиональные приложения: Macromedia HomeSite Plus v5.1 for Windows XP, Macromedia Dreamweaver, Microsoft FrontPage и т.д. Для создания сайтов целесообразно использовать редакторы на русском языке Macromedia Dreamweaver 8.0.1 или FrontPage 2003.

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

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

Особое внимание необходимо уделять таким мета - тегам как Тitle (заголовок), Keywords (ключевые слова) и Description (описание), а также расположению ключевых слов в тексте Web-страниц

1.8. Размещение сайта на хостинге


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

Для размещения сайта на хостинге необходимо зарегистрироваться на одном из серверов, который предоставляет услуги по размещению. Интернет-адрес или доменный адрес сайта зависит от того, какой Вы уровень домена приобрели. При работе в Internet используются не доменные имена, а универсальные указатели ресурсов, называемые URL (Universal Resource Locator).

URL - это адрес любого ресурса (документа, файла) в Internet, он указывает, с помощью какого протокола следует к нему обращаться, какую программу следует запустить на сервере и к какому конкретному файлу следует обратиться на сервере. Общий вид URL: протокол://хост-компьютер/имя файла (например: http://lessons-tva.info/book.html).

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

Загрузить файлы на сервер можно и с помощью браузера (Internet Explorer) по протоколу ftp, например ftp://ftp.lessons-tva.info/. Далее появится диалоговое окно с запросом ввести пароль, после ввода пароля и нажатия кнопки "ОК" в окне просмотра будут отображены все Ваши директории на сервере.

Далее откройте папку, где будут размещены файлы сайта и скопируйте их туда одним из методов. Адрес FTP-сервера указывается в персональных данных, которые вы получите после регистрации на сервере. Чтобы соединение по FTP-протоколу происходило быстрее необходимо предварительно войти в свой аккаунт по протоколу http.

Но лучше всего для загрузки файлов использовать WC или Total Commander для этого в меню "СЕТЬ" выбрать команду "Новое FTP - соединение" и в появившемся диалоговом окне "Соединиться" ввести FTP-адрес (например, ftp://ftp.lessons-tva.info/). Затем по запросу ввести пароль и на одной из панелей WC появятся папки, расположенные на сервере, в одну из них необходимо поместить (скопировать) файлы.

Далее Вы присвойте имя этому соединению и сохраните его. Это имя будет помещено в опцию "Соединиться с FTP-сервером" в меню "СЕТЬ". При повторном соединении (например, при обновлении страничек) Вы выбираете это имя, далее на запрос вводите пароль и соединяетесь с директорией, в которой находятся странички и файлы Вашего сайта.

1.9. Регистрация сайта в поисковых системах и тематических каталогах


После размещения сайта на хостинге необходимо зарегистрироваться в поисковых системах и тематических каталогах Yahoo, Rambler, Апорт и (адреса регистрации находятся  на страничке http://lessons-tva.info/favorite.html) и осуществить раскрутку сайта. Для раскрутки применяются различные средства.

Контроль посещаемости сайта осуществляется по счетчикам. Поисковые машины, как правило, имеют рейтинговые системы, которые ранжируют ресурсы по их посещаемости. Для участия в рейтинге установите на главной странице своего сайта счетчики рейтингов.

1.10. Поддержка и регулярные обновления (развитие) сайта


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

Прикладная программа FrontPage 2003 – это визуальный html-редактор для быстрого создания сайта.  Язык HTML является основным языком программирования Web - среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на  сервер в сети Интернет.

Web–страницы основаны на языке описания гипертекстовых документов HTML (Hypertext Markup Language). В HTML для определения содержания и формата гипертекстовых документов используются команды, которые называются  тегами (tags). HTML – страницы представляет собой документы в обычном текстовом формате, содержащие специальные команды форматирования (теги HTML).

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

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

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

Обычно сайт размещается на Web-сервере – компьютере, который предоставляет доступ к Web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно в файловой системе компьютера пользователя, а затем, когда он будет готов, опубликовать его на Web-сервере.

2.1. Окно приложения FrontPage


После запуска программы FrontPage (Пуск – программы – FrontPage) на экране появится окно приложения, в котором отображается новая страница (нов_стр_1.htm). В области задач отображается панель Приступая к работе.



Окно приложения FrontPage состоит: из строки заголовка, строки меню, панелей инструментов редактирования и форматирования, кнопок быстрого выбора тега (для редактирования и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами), рабочего окна, в котором отображается новая страница, панели рисования, кнопок режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости 56 кбит/с, индикатора размера страниц, области задач.

В редакторе FrontPage можно пользоваться одним из четырех режимов просмотра: "Конструктор", "Код", "С разделением" и "Просмотр". В режиме "Конструктора" как в любом текстовом редакторе можно в визуальном режиме создавать, редактировать и форматировать страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не отображается.

В режиме "Код" на экране будет отображаться вся кодировка и можно напрямую редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML – код новой пустой страницы в редакторе FrontPage .



В режиме "С разделением" - на экране отображается Web-страница одновременно в режиме Код и в режиме Конструктор. В режиме просмотра  Web–страница имеет вид аналогичный ее отображению в Web–браузере.

Команды, которые предназначены для работы с Web–страницами и Web–узлами, расположены в меню Вид редактора FrontPage:


2.2. Создание Web-страниц в редакторе FrontPage


Создание новой пустой Web-страницы

Если при открытии окна приложения FrontPage в нем отображается пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора FrontPage, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач Пустая страница. В окне приложения появится пустая страница. Далее необходимо осуществить разработку страницы, т.е. выполнить разметку (структуру) страницы, ввести текст, рисунки и т.д.



2.3. Создание веб–страницы на основе шаблонов FrontPage

Создать новую страницу можно также на базе одного из шаблонов. Для этого необходимо выбрать команду «Другие шаблоны страниц» в области задач. На экране будет отображаться окно диалога Шаблоны страниц, в котором представлены различные шаблоны страниц по категориям.



2.4. Создание веб–страницы на основе имеющихся Web-страниц в ПК

Создать веб–страницу можно и на базе имеющихся, на компьютере веб–страниц. Для этого необходимо в области задач выбрать команду «Из имеющейся страницы» и в появившемся окне диалога выбрать требуемую страницу. Далее можно произвести необходимые изменения на странице и сохранить ее под другим именем.

2.5. Создание сайта в редакторе FrontPage


Создание нового пустого сайта или создание веб-узла без содержимого
Для создания нового пустого сайта  надо выполнить команду Файл/Создать и выбрать в области задач команду «Другие шаблоны веб–узлов». Откроется окно диалога Шаблоны веб–узлов, в котором необходимо выделить Пустой веб–узел и щелкнуть ОК. В окне приложения FrontPage будет отображаться веб - узел, который представлен на рисунке.



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



Дважды щелкните на домашней странице левой кнопкой мыши, и она откроется в режиме конструктора для редактирования (страница - index.htm).



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



2.6. Создание сайта на основе шаблона редактора FrontPage

Для создания сайта на основе шаблона выполните Файл/Создать и в области задач щелкните команду Веб – пакеты, откроется окно диалога Шаблоны веб–узлов.



Выберите требуемый шаблон или мастера для создания нового сайта. Созданный сайт имеет разметку и дизайн, но в нем отсутствует контент. Далее в страницы этого сайта необходимо ввести соответствующий текст, рисунки, скрипты, счетчики и другие элементы сайта.




3. Создание Web - страниц


3.1. Создание новой пустой Web – страницы

Если при открытии окна приложения FrontPage в нем отображается новая пустая страница, то разработку веб - страницы можно осуществлять на базе этой страницы. Если при открытии редактора, отображается пустое главное окно, то для создания новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в области задач "Пустая страница".

В окне приложения появится новая пустая страница. Сохраняем страницу, но перед тем, как сохранить страницу в окне «Сохранить» создаем папку, например EN101, в которой создаем вложенную папку images для рисунков, а затем сохраняем страницу в папке EN101. Имя страницы назначаем - index, что означает домашняя или  главная страница. Редактор сохраняет страницу с расширением .htm. Таким образом, в папке EN101, будет находиться вложенная папка images и файл index.htm.



Рисунки для веб - страницы должны быть заранее подготовлены и вставлены в папку images, причем имя рисунка должно состоять из символов латинского алфавита. Скопируем  в папку images рисунки для создания веб – страницы, посвященной изучению английского языка в Интернет.

Далее необходимо осуществить разработку страницы. Разработка страницы начинается с ее разметки. Для разметки страницы используются таблицы, можно применить Макеты страницы, которые расположены на панели задач "Макеты таблицы и ячейки" в области задач. Установим в области задач "Макетные таблицы и ячейки"



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



1. Устанавливаем ширину (в точках или процентах) странички равную 900 точек (ширина первого столбца – 213 точек, ширина второго столбца – 687 точек). Для этого подводим указатель мыши к верхней границе и когда от примет вид наклоненной влево стрелки щелкаем левой кнопкой мыши, появятся раскрывающиеся списки, раскрыв которые можно изменить ширину столбца.

2. Выравниваем страничку по центру. Устанавливаем размер границы, цвет. Для этого щелкаем на раскрывающийся тег таблицы (на панели быстрый вызов тега) и выбираем команду «Свойства тега», затем  в открывшемся окне диалога «Свойства таблицы» устанавливаем: Выравнивание по центру, Границы: размер – 1 и цвет – темно-синий (код: 000080).
3. В ячейках таблицы я установил цифры: 1, 2, 3, 4 (эти цифры будут заменены содержанием ячеек), чтобы можно было легко ориентироваться. Итак, в первую ячейку можно установить рисунок ("Вставка / Рисунок / Из файла", выбираем рисунок из папки images). Вставим, например, логотип компании EN101, которая ведет курсы дистанционного обучения  иностранных языков в Интернет.



4. Устанавливаем фон ячейки 1 и 2 аналогичный фону логотипа (существуют приложения для подбора цвета, например, «Цветик ver. 5.1») код цвета - dee7ef. Для заливки ячейки цветом необходимо щелкнуть на раскрывающийся тег ячейки
(на панели быстрый вызов тега) и выбрать команду «Свойства тега», затем  в открывшемся окне диалога «Свойства ячейки» устанавливаем: цвет фона – (код: dee7ef).

5. Во вторую ячейку помещаем заголовок сайта, например «Английский язык в Интернет». В режиме конструктора вводим текст. Выбираем шрифт Verdana (наиболее распространенный шрифт для веб - страниц), размер 24 пт, цвет темно-синий (код цвета: 000080), выравнивание по центру.



6. В ячейке 3 размещаем навигацию, для перехода на другие (будущие) странички.  Вводим текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт, выравнивание по центру. Далее вводим текст (шрифтом Verdana, размер шрифта 8 пт): Главная, О компании En101, Бизнес-обзор проекта, Способы оплаты, выделяем эти строки и щелкаем на кнопке маркеры на панели инструментов форматирования. Таким образом, создали маркированный список для навигации.

7. Устанавливаем гиперссылку для строки Главная. Выделяем строку Главная, щелкаем правой кнопкой мыши и из контекстного меню выбираем команду Гиперссылка. Откроется окно диалога, в котором надо в папке EN101 выделить файл index  и нажать ОК.

8. Создаем ссылки на партнерские сайты. Устанавливаем курсор ниже списка и выбираем команду "Таблица / Вставить / Таблица", в открывшемся окне диалога  устанавливаем: Строк – 1, Столбцов – 1; Выравнивание – по центру; Задать ширину: 98%; Задать высоту: 30 в точках; Границы: размер – 1, цвет–темно-синий (код: 000080); Фон: цвет-темно-синий (код: 000080). Далее щелкаем Применить и ОК. Затем в созданную таблицу вводим текст «ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размер шрифта 10 пт, выравнивание по центру, цвет белый.

Ниже таблицы ПАРТНЕСКИЕ САЙТЫ вводим адреса требуемых сайтов:
http://lessons-tva.info/
http://tva.jino.ru/
http://vladant.inmarket.biz/
http://tva.en101.com
http://en101.tva.jino.ru/

и создаем гиперссылки. Например, выделяем  адрес http://lessons-tva.info и вызываем контекстное меню, в котором выбираем команду Гиперссылка. В открывшемся окне диалога в строке Текст выделяем http://lessons-tva.info и копируем (Ctrl+C), затем установить курсор в строку Адрес и вставить из буфера обмена (Ctrl+V), щелкнуть ОК.



Содержание третьей ячейки представлено на рисунке



9. В ячейке 4 размещаем текст и рисунки. Текст можно вводить с клавиатуры или вставлять скопированный текст из буфера обмена. Текст вводится, редактируется и форматируется как в любом текстовом редакторе. Рисунки можно вставлять только из папки images, которую предварительно создаем при сохранении веб – страницы.

10. Добавляем таблицу для записи: Copyright © Английский язык в Интернет, 2007. All Rights Reserved, которая предназначена для защиты Вашей интеллектуальной собственности на данную веб-страницу. Кроме того,  в этой таблице располагаются счетчики. Для этого устанавливаем курсор ниже страницы (вне поля страницы, т.е. ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и ячейки» выбираем команду «Вставить макетную таблицу». Размеры этой таблицы подгоняем под размеры страницы, например, устанавливаем 900х57 точек, размер границы - 1, цвет - темно-синий (код: 000080), цвет фона - белый. В созданную таблицу вводим текст Copyright © Английский язык в Интернет, 2007. All Rights Reserved

11. Добавляем цвет фона вокруг страницы. Выбираем  команду Формат / Фон, в открывшемся окне диалога на вкладке форматирование устанавливаем цвет фона – темно-синий (код: 000080)

12. Добавляем и заполняем метатеги (между тегами и ) в режиме Код:

Английский язык в Интернет







В результате разработки получим готовую веб–страницу, фрагмент которой представлен на рисунке



Для разработки собственной веб-страницы скачайте:


3.2. Планирование веб-сайта


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

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

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

  • Главная

  • О компании En101

  • Бизнес-обзор проекта

  • Способы оплаты

Выбираем имя сайта исходя из вида деятельности, например: lessons-en101.

Назначаем имена страницам:

  • index – Главная

  • info - О компании En101

  • business- Бизнес-обзор проекта

  • pay - Способы оплаты

В качестве главной страницы используем созданную ранее веб-страницу Главная (index)

Создаем структуру сайта, которая представлена на рисунке.




Подготовим текст в редакторе Word для каждой страницы и рисунки в  Adobe Photoshop в форматах GIF, JPEG или PNG с разрешением 72 пикс/дюйм, кроме того, можно использовать скрипты.

Далее можно зарегистрировать домен второго уровня в одной из зон  (ua, ru, com, net, info и т.д.) и после разработки сайта выбрать платный хостинг, который устраивает по скорости доступа и предоставляет необходимые услуги для эффективной работы сайта. Если мы будем располагать сайт на бесплатном хостинге, то можно выбрать, например, хостинг на сервере narod.ru. Для этого необходимо будет зарегистрироваться на сервере и получить бесплатный хостинг. В этом случае у Вас будет домен третьего уровня, например: lessons-en101.narod.ru.

3.3. Создание веб-узла с  помощью приложения FrontPage


1. Для создания веб-сайта с помощью приложения FrontPage необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс FrontPage, в котором будет отображаться  предыдущий сайт или страница. Для выхода из предыдущего сайта или страницы надо выполнить команду «Файл/Закрыть» или «Файл/Закрыть узел», либо то и другое, если были открыты узел и страница.

Затем выполняем команду Файл / Создать и в отрывшейся области задач «Создание» щелкаем мышью на «Другие шаблоны веб – узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб – узлов», в котором необходимо выделить «Пустой веб – узел», далее указать расположение нового веб-узла (например, D:\Documents and Settings\ТВА\Мои документы\Мои веб-узлы\lessons-en101) и щелкнуть ОК. На рисунке представлен фрагмент окна диалога «Шаблоны веб – узлов», в котором указан адрес нового сайта.



После сохранения сайта на экране в окне приложения будет отображаться новый веб-узел в режиме папки.



2. Создание домашней страницы для нового сайта. Создание домашней страницы можно осуществлять по-разному. Например, можно щелкнуть на кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm, которая показана на рисунке



3. Затем копируем содержимое ранее созданной папки EN101, в которой находятся  папка images и страничка index (папка _vti_cnf формируется автоматически при создании веб-страницы). Содержимое папки EN101 представлено на рисунке.



Вставляем сохраненное содержание папки EN101 из буфера обмена во вновь созданную папку веб-узла lessons-en101, которая представлена на рисунке.



4. Далее дважды щелкаем на странице index.htm в открытом окне веб-узла, в результате главная страница откроется в режиме страница, которая показана на рисунке.



Таким образом, в качестве домашней страницы в новом сайте использована ранее созданная страница index.htm (Английский язык в Интернет). Можно создавать главную страницу и другими способами, изложенными в разделе

5. Создаем структуру сайта, т.е. к главной странице добавим еще три страницы: info - О компании En101; business- Бизнес-обзор проекта; pay - Способы оплаты. Для этого надо перейти в режим Переходы, выполнив команду Вид/Переходы. Затем необходимо выделить домашнюю страницу и щелкнуть на кнопке Новая страница на панели Переходы или применить контекстное меню, добавится Новая страница 1. Аналогичным образом добавляем еще две новые страницы. Структура сайта представлена на рисунке.



6. Переименование Новых страниц. Переходим в режим папки и с помощью контекстного меню меняем имена Новая страница 1 на info, Новая страница 2 на business, Новая страница 3 на pay.



7. С целью единства дизайна страниц сайта копируем содержание главной страницы в созданные страницы info, business, pay. Для этого открываем главную страницу в режиме Страница и выполняем команду "Правка / Выделить все", и щелкаем на кнопке Копировать на панели инструментов. Переходим в режим Папки и щелкаем дважды на страничке info, она откроется в режиме Страница, затем щелкаем на кнопке Вставить. Содержимое главной страницы скопируется в страницу info, аналогично копируем содержимое главной страницы в остальные две страницы.

8. На каждой страничке создаем ссылки для всех пунктов навигации:

  • Главная

  • О компании En101

  • Бизнес-обзор проекта

  • Способы оплаты

Например, выделяем пункт навигации "Бизнес-обзор проекта" и с помощью контекстного меню открываем окно диалога Добавления гиперссылки, в котором выделяем business.htm и щелкаем ОК. Аналогично создаем гиперссылки для всех пунктов навигации на всех страницах. На рисунке представлен фрагмент окна диалога Добавления гиперссылки.



9. Далее на страницах: "О компании En101"; "Бизнес-обзор проекта"; "Способы оплаты" изменим содержание в некоторых ячейках, т.е. введем новый текст и рисунки, которые были подготовлены заранее для этих страниц.

10. Добавляем и заполняем метатеги (между тегами и ) на страницах: "О компании En101"; "Бизнес-обзор проекта"; "Способы оплаты" в режиме Код.

Например, для страницы "О компании En101" теги заполнены следующим образом:
О компании En101





11. Переименование заголовков страниц в режиме Переходы. Выделить страницу и с помощью контекстного меню осуществить переименование:

  • Новая страница 1 переименовать на "О компании En101".

  • Новая страница 2 переименовать на "Бизнес-обзор проекта".

  • Новая страница 3 переименовать на "Способы оплаты".

В результате разработки получим сайт, который состоит из четырех веб-страниц. Этот сайт, созданный в файловой системе ПК, можно разместить на веб-сервер в сете Интернет или Интранет.

Источники:

http://www.lessons-tva.info/edu/e-inf3/m3t3_2.html

http://office.microsoft.com/ru-ru/frontpage-help/HA001077589.aspx

http://www.intuit.ru/department/internet/inwwwtech/8/



Учебный материал
© nashaucheba.ru
При копировании укажите ссылку.
обратиться к администрации