Главная
страница 1
ЛЕКЦИЯ № 7

ПРОЕКТИРОВАНИЕ WEB-САЙТОВ
Учебные вопросы:

  1. Этапы создания Web-сайта

  2. Терминология Web-проектирования

  3. Создание Web-сайтов средствами языка HTML




  1. Этапы создания Web-сайта

Создание Web-сайта предполагает наличие нескольких эта­пов — от придумывания идеи до ее воплощения. Чтобы создать дей­ствительно интересный и полезный продукт, необходимо пройти следующие этапы.



Анализ и проектирование. Анализ сильных и слабых сторон кон­курентов, информационное проектирование Web-сайта, разработка его концепции, оценка целевой аудитории.

Написание контента. Под контентом (Content) понимается ин­формационное наполнение сайта. Термин применяется для обозна­чения идейного содержимого Web-сайта.

Креатив. Креатив (Creative) — термин для обозначения визуаль­ной составляющей Web-сайта. Сюда входит разработка дизайна, гра­фических элементов, обработка графики и все, что с ней связано.

Написание кода Web-сайта. Программирование Web-файла, на­писание функциональной части.

Тестирование. На этом этапе проверяется все: удобство навига­ции, целостность данных, корректность ссылок и орфография, к то­му же не все браузеры одинаково интерпретируют одни и те же теги HTML.

Публикация. Размещение Web-сайта в Интернете. Большинство Интернет-провайдеров (Internet service provider — ISP) предоставляют услугу по размещению домашних Web-страниц бесплатно (эта услуга называется Web-хостингом — Web hosting), например http://www.chat.ru/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб), http://www.boom.ru/ (до 50 Мб). Для публикации можно размещать Web-сайт у провайдера или воспользоваться другими возможностями.

Раскрутка. Рекламная компания по узнаванию Web-сайта и по­вышения его посещаемости. Сюда входит регистрация Web-сайта в поисковых системах, обмен ссылками, баннерная реклама и др.

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


2. Терминология Web-проектирования
Web-браузер — программа-приложение, предназначенная для интерпретации кодов HTML документов и отображения гипертек­стового документа на экране компьютера. Наиболее часто исполь­зуемые браузеры — MicroSoft Internet Explorer и NetScape Navigator. Наряду с термином «браузер» используют термины-синонимы: «обозреватель» и «навигатор».

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

Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в WWW. Web-страница кроме текста может содержать графику, ани­мации, видеоклипы, музыку, а также гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их.

Один из способов создания Web-страниц (или документов HTML) состоит в использовании текстового редактора Блокнот



(NotePad), встроенного в Windows. В этом редакторе создается файл Web-страницы, который сохраняется с расширением *.htm с после­дующим просмотром результатов с помощью браузера. После со­хранения файла и выхода из Блокнота для просмотра отредактиро­ванной страницы надо выполнить команду Файл — Открыть в про­грамме Internet Explorer и указать путь к созданной Web-странице с помощью кнопки Обзор.
3. Создание Web-сайтов средствами языка HTML
Язык HTML (Hyper Text Markup Language) — язык гипертексто­вой разметки документа, служит для написания Web-сайтов. Язык HTML позволяет:

  • создавать и редактировать Web-сайты, в том числе домашнюю Web-страницу, которую можно затем разместить в Интернете;

  • редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);

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



ОСНОВНЫЕ ПОНЯТИЯ ЯЗЫКА HTML

Элемент — это конструкция языка HTML, или контейнер, со­держащий данные.

Web-страница представляет собой набор элементов.

Тег (Tag) — это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, например: . Конечный тег, если он предусмотрен синтаксисом языка, снабжает­ся косой чертой: .

Гиперссылка (Hyperlinks) — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют пе­реходить от одного документа к другому.

Фрейм (Frame) — область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют разбивать страницы на прямоугольные области, в каждой из которых отображается своя собственная страница. Вы можете разместить один или несколько фреймов на странице (такая страница называется страницей фрей­мов или фреймсет (frameset)).

Форма (Form) — область гипертекстового документа, кото­рая необходима для организации обратной связи с посетителями сайта.

Апплет (Applet) — небольшая прикладная программа, передавае­мая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script) — программа, включенная в состав Web-страни­цы для расширения ее возможностей.

Загрузка (DownLoad) — копирование документа с Web-сервера на компьютер клиента.

Размещение (UpLoad) — копирование документа с компьютера клиента на Web-сервер — используется при создании собственной Web-страницы (т.е. при ее опубликовании).

Пиксел (Pixel) — наименьшая цветная точка экрана монитора.

ОБЩАЯ СТРУКТУРА ПРОСТЕЙШЕГО ДОКУМЕНТА HTML

Общая структура простейшего документа HTML такова:

<СОММЕЭТ>Комментарий

<HTML>

<HEAD>

<TITLE> Название документа

HEAD>

<BODY>

Здесь расположен текст самого документа HTML.



BODY>

HTML>

Дадим пояснения указанным тегам документа HTML. <COMMENT> — комментарий к документу. Не является обяза­тельным.



<HTML> — идентификатор всего блока HTML-команд. <HEAD> — идентификатор заголовка документа HTML. <TITLE> — идентификатор заголовка окна просмотра. <BODY> — идентификатор HTML-команд документа для про­смотра.

Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру основную информацию для идентификации и организа­ции документа.

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

<МЕТА> — непарный тег применяется для указания подробной информации о документе.

ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТОВОГО ПОТОКА

<Р> — идентификатор конца абзаца, после которого добавля­ется пустая строка. В конце нужен тег .

<BR> — идентификатор перевода строки.

<HR> — идентификатор изображения горизонтальной линии.

Эти теги одиночные, т.е. непарные, они не требуют тегов с ко­сой чертой.



<PRE> — установка равноширинного шрифта. В конце нужен тег PRE>.

ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ ЗАГОЛОВКОВ И ПОДЗАГОЛОВКОВ ДОКУМЕНТА



<Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>. При этом заголовки будут выведены большими буквами, причем размер букв у тега <Н1> будет самый большой, у <Н2> — меньше, у <НЗ> — еще меньше и т.д.

ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ СИМВОЛОВ ТЕКСТА

<В> — идентификатор полужирного шрифта.

<strong> — идентификатор выделенного шрифта.

<i> — идентификатор курсива.

— идентификатор подчеркивания.

— идентификатор перечеркивания.

<tt> — идентификатор равноширинного шрифта (телетайпного или курьера).

<big> — задает увеличенный размер шрифта. <small> — задает уменьшенный размер шрифта. <center> — задает центрирование текста. <sub> — задает нижний индекс.

ТЕГИ ФОРМАТИРОВАНИЯ АБЗАЦЕВ align=left> — выравнивание текста в абзаце по левому краю. align=right> — выравнивание текста в абзаце по правому краю.



<p align=center> — выравнивание текста в абзаце по центру. align=justify> — полное выравнивание по обоим краям экрана, align — атрибут выравнивания.

ТЕГИ СПИСКОВ

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



<OL> — идентификатор упорядоченного списка. В конце OL>.

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



<UL> — идентификатор неупорядоченного списка. В конце UL>.

Отдельные элементы в упорядоченном и неупорядоченном спи­сках помечают одиночным тегом <LI>, а элементы в списках опре­делений <DL> тегами <DT> для термина и <DD> для значения термина.



<Ы> — идентификатор элемента в упорядоченном и неупоря­доченном списке.

Конечный тег может быть опущен.



ТЕГИ СПИСКОВ ОПРЕДЕЛЕНИЙ

Списки определений обеспечивают специальное форматиро­вание, как в словарях, для терминов и связанных с ними описа­ний.



<DL> — идентификатор списка определений. В конце DL>. <DT> — идентификатор термина в списке определений. <DD> — идентификатор значений термина в списке определе­ний. <DL>

<DT> название термина I <DD> определение термина 1 <DD> другое определение термина 1

DL>

ТЕГИ ЦВЕТА



<BODY bgcolorteal» textaqua» linkred»> — задает цвет тек­ста {text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).

<BODY backgroundback.jpg»> — задает фоновый рисунок (обои) на Web-странице в файле back.jpg.

<BODY background=«\windows\tartan.bmp»> — фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла.

<font coloryellow» size=5> — задает цвет символов текста (color) и их размер (size). В конце нужен тег font>.

ТЕГИ ЛИНИЙ



<hr colorlime»> — задает цвет горизонтальной линии.

<hr colorred» size=3 width=220 align=center> — атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселях; атрибут align=center (или left, или right) за­дает смещение линии (ее размещение в центре, или смещение вле­во, или вправо).

ТЕГИ ДЛЯ ВСТАВКИ ИЗОБРАЖЕНИЙ

Графика на страницах — это средство выражения мысли, под­черкивания идеи.

Изображения можно сохранять в нескольких форматах. Тип фай­лов GIF - графический формат обмена, стал первым типом файлов, которые поддерживались в WWW. Затем был разработан формат JPEG - объединенная группа экспертов фотографии. Это формат эффективнее GIF для представления больших изображений.

Приобрел популярность формат PNG — персональная сетевая графика, который заменяет GIF.

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

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



<IMG SRClycos.gif»> — вставка графического изображения в виде анимационного файла lycos.gif. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.

<IMG SRCechomsk.gif» width=«403» height=«263»> — если при вставке изображения использованы атрибуты width (ширина в пикселях) и height (высота в пикселях), то при загрузке изображения браузер покажет сначала рамку, где должно быть изображение, а за­тем уже само изображение, поскольку оно загружается дольше. Та­ким образом, резервируется место на экране под изображение.

<IMG SRC=«\html\animat\iexplor.gif»> — вставка графического изображения в виде файла iexplor.gif, причем указан полный путь графического файла на диске: c:\html\animat\iexplor.gif.

<IMG SRCscene.jpg» border=3 alt=«Картина»> — атрибут border задает рамку по периметру изображения толщиной 3 пикселя. Атрибут Alt дает текст на месте рамки, если изображения нет.

Атрибут border=0 используется, чтобы убрать рамку вокруг ри­сунка. Это необходимо, например, при использовании анимирован-ных ^//-рисунков на прозрачной основе.



«Цветок» >

Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.



Атрибут alignleft» обеспечивает размещение рисунка слева.

ТЕГ ПЕРЕХОДА К ДРУГОМУ ФАЙЛУ

hrefexcite.htm»>excite.htma> — гипертекстовая ссылка к файлу excite.htm.

hrefC:\book\book.inf»>book.uifa> — гипертекстовая ссылка, переход к файлу book.inf. При запуске браузера следует ука­зать программу для просмотра текстового файла book.inf, например edit.com.

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

Для облегчения работы можно задавать цифровые имена файлов (цифры всегда одного размера).
ТЕГ ПЕРЕХОДА К ДРУГОЙ WEB-СТРАНИЦЕ

hrefhttp://www.da.ru»>http://www.da.rua> — гипертек­стовая ссылка в виде текста, переход в Интернете к Web-странице http://www.da.ru.

hrefzinn.gif»Ximg srcglobe.gif» border=«3»X/a> — ги­пертекстовая ссылка в виде изображения globe.gif, переход к про­смотру изображения zinn.gif.

ТЕГ ВСТАВКИ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ hrefmaiIto: int@mtu-net.ru»>int@mtu-net.rua> — гипер­ссылка на адрес электронной почты. При нажатии происходит вы­зов почтовой программы и указанный адрес E-mail:int@mtu-net.ru вводится в пункт Кому.



ТЕГ ВСТАВКИ ДОКУМЕНТА

вставка объекта в документ HTML. В данном случае это мультиме­дийный файл *.avi, причем при загрузке страницы происходит авто­запуск этого файла, размеры которого на экране заданы атрибутами Width и Height.

Если документ HTML большой, то внутри него делают переходы по метке (U01): <РХа ЬтеР=«#и01»>ВвеяениеnameU01»> Введение

ТЕГИ ДЛЯ СОЗДАНИЯ БЕГУЩЕЙ ТЕКСТОВОЙ СТРОКИ

(ТОЛЬКО ДЛЯ INTERNET EXPLORER):

Интер­нет — это окно в MHp!

Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (т.е. без атрибутов, и она будет бежать влево):



<шагдиее>Добро пожаловать! marquee>

Если текстовая строка должна бежать то влево, то вправо, то в теге используется атрибут behavior=«alternate».



СПИСОК ЦВЕТОВ СИМВОЛОВ HTML

Всего 16 основных цветов:

Вместо указанных терминов для задания цвета можно использо­вать RGB-коды (Red, Green, Blue), например: #FFFFFF — белый (white), #FF0000 — красный (red).

Меняя RGB-коды, цвета можно подбирать желаемые текста и фона.





ТЕГИ ПОДКЛЮЧЕНИЯ ЗВУКА

Для воспроизведения звука (файл *.mid) после загрузки доку­мента HTML в браузер Internet Explorer (т.е. в фоновом режиме), надо записать следующую команду, например:



Можно также использовать файл формата *.wav. Число воспро­изведений loop можно увеличить с 1 до п.



ТЕГИ ФРЕЙМОВ

<firameset>frameset> — определение фреймовой (оконной) структуры документа: размеры и расположение фреймов на страни­це. Заменяет тег BODY в документе с фреймами; может быть вло­жен в другие фреймсеты.

<frameset rowsvalue, value* > — определение количества и раз­меров горизонтальных фреймов (фреймов-строк) в окне браузера (пиксели, проценты ширины).

<frameset colsvalue,value»> — определение количества и раз­меров вертикальных фреймов (фреймов-столбцов) в окне браузера (пиксели, проценты ширины).

<frame> — определение фрейма и его свойства внутри FRAMESET-структуры.

<noframes>noframes> — определяет, что показывать, если браузер не поддерживает фреймы.

Атрибуты фреймов



<frame srcURL»> — указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

<frame namename»> — определение имени данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра target.

<frame marginwidth=#> — определение ширины (в пикселях) левого и правого полей фрейма; должен быть равен или быть боль­ше 1.

<frame marginheight=#> — определение ширины (в пикселях) верхнего и нижнего полей фрейма; должен быть равен или быть больше 1.

<frame scroUing=VALUE> — определение наличия полосы про­крутки содержимого фрейма; значениями могут быть: «yes,» «по,» или «ашо.» По умолчанию стоит auto.

<frame noresize> — предотвращение изменения размеров фрейма.

ТЕГИ ФОРМЫ

Для функционирования формы понадобится ^написать CGI скрипт. HTML просто создает вид формы.

СОЗДАНИЕ ТАБЛИЦ В HTML

Таблицы являются удобным средством форматирования данных в HTML.

Таблицу задает и определяет ее общие свойства тег <table>table>. По горизонтали, например по центру, таблицу можно выровнять с помощью тега aligncenter»>, размещаемо­го перед <table>.

Тег <table> может иметь атрибуты:

,

где


border=«5» — ширина боковой грани в пикселях. При нулевом значении рамка исчезает;

width=«100» — ширина таблицы в пикселях или width=«50%» — ширина таблицы в % по отношению к ширине страницы в окне;

cellspacing=«10» — ширина фронтальной грани в пикселях;

cellpadding=«10» — задает размер пустого пространства в пиксе­лях, окружающего данные в ячейке.


Тег <captionX/caption> задает заголовок таблицы.

Тег <tr> задает строку таблицы. Следующий тег <tr> задает сле­дующую строку таблицы. Конечный тег необязателен.

Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую ячейку таблицы. Конечный тег необязателен.

Цвет фона ячейки задается в теге <td>: <td bgcolorcyellow»>

Непарный тег <th> — задает элемент ячейки, которая является заголовком таблицы. Этот тег должен находиться внутри тега <tr>.

Ячейка-заголовок отличается от обычной тем, что текст внутри нее выделяется полужирным шрифтом. Цвет фона заголовка задает­ся: <tr><th bgcoloryeIlow»>3anxriOBOK 1.

СКРИПТ

Для реализации Web-сайта используется программа Движок, реализующая функциональность, отличную от простого показа го­товых Web-страниц. Например, просмотр каталога Интернет-мага-тна (список товаров извлекается из базы данных магазина), поиск в И нтернете (страницы с ответами поисковой системы формируют­ся динамически), показ баннеров (движок «выдает» страницам сай­та тот или иной баннер по заданному алгоритму).



Скрипт - несложная программа на «скриптовом» языке про­граммирования (Perl, Php, Javascript), компонент движка. В пре­дельном случае движок сайта может состоять из одного-единствен-ного скрипта.

Cgi-bin исторически — подкаталог на сервере, в котором распо­лагались скрипты и иные компоненты движка сайта. Некоторые хостинги (услуги по размещению чужого Web-сайта на своем Web-сервере или чужого Web-сервера) предоставляют своим клиентам личные каталоги cgi-bin для размещения скриптов.



Смотрите также:
Лекция №7 проектирование web-сайтов учебные вопросы: Этапы создания Web сайта
220.28kb.
1 стр.
Проектирование web-сайта образовательного учреждения и размещение его в сети Интернет Разработка web-сайта
264.93kb.
1 стр.
Практикум по курсу "Электронный маркетинг" Технологии создания Web-сайтов Москва 2003 Составители: Н. Б. Завьялова
643.92kb.
1 стр.
Лабораторная работа №3 Объектно-ориентированная реализация Web-страниц в asp. Net
535.81kb.
7 стр.
Техническое задание на разработку сайта этапы и сроки создания сайта
59.42kb.
1 стр.
Техническое задание на разработку промо-сайта этапы и сроки создания сайта
34.74kb.
1 стр.
Лабораторная работа №5 Использование Web сервисов xml в консольных приложениях и приложениях Windows Forms цель и задачи работы
284.97kb.
1 стр.
Технологиям мощный программно-информационный комплекс, который состоит из
248.82kb.
1 стр.
Анализ эффективности работы web-сайта с применением методов иад
117.4kb.
1 стр.
Инструкция по установке приложения «Удостоверяющий центр ммвб» Общая конфигурация. Система состоит из: web-приложения (сайта), базы данных, в которой web-приложение хранит свои данные
28.07kb.
1 стр.
Москва, Россия
75.38kb.
1 стр.
Тематический план курса дополнительного образования «web-дизайн» Наименование темы Всего часов Лекц часов Практ часов
32.96kb.
1 стр.