Создание Web-сайта

Автор: Пользователь скрыл имя, 18 Декабря 2012 в 02:38, курсовая работа

Краткое описание

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

Оглавление

ВВЕДЕНИЕ 5
1 Теоретическая часть 6
1.1 Понятие Интернет. Классификация сервисов Интернет 6
1.2 Преимущества и направления использования Интернет для бизнеса 8
1.3 Понятие, цели и задачи Web-сайтов. Классификация Web-сайтов 10
1.4 Этапы проектирования Web-сайтов 13
1.5 Организация электронного бизнеса на предприятии 14
1.5.1 Способы формирования цепочек добавления потребительской стоимости в киберпространстве 15
1.5.2 Основные категории электронного бизнеса 16
1.5.3 Классификация моделей электронного бизнеса 17
1.5.4 Возможности и преимущества электронной торговли 19
2 Практическая часть 21
2.1 Постановка задачи 21
2.2 Обоснование выбора средства разработки Web-сайта 21
2.3 Разработка структуры Web-сайта 23
2.4 Выбор компоновки Web-страниц 24
2.5 Разработка контента и оформление Web-страниц 25
2.5.1 Структура и компоненты HTML-документа 28
2.5.2 Теги для структурирования и форматирования текста 30
2.5.3 Теги для работы с графикой в HTML-документах 32
2.6 Разработка и настройка системы гиперссылок 33
2.7 Тестирование и продвижение Web-сайта 35
ЗАКЛЮЧЕНИЕ 38
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 39
Приложение А 40
Приложение Б 45

Скачать в ZIP (4.86 Мб) Сколько стоит заказать работу?
Файлы: 1 файл

практика.doc

— 5.46 Мб (Скачать)

<HEAD>

…

<METANAME = "description"CONTENT= "Этот сайт посвящён поисковому сайту Yahoo.">

<METANAME = "keywords"CONTENT= "Yahoo, сайт Yahoo, история и возможности Yahoo">

…

</HEAD>

2.5.2 Теги для структурирования  и форматирования текста

 

 

Теги элементов текста

  • Тег <TR> служит контейнером для создания строки таблицы. 
  • <pre></pre> Тег PRE или "preformatted" (заранее форматированный) сохраняет все имеющиеся в теле текста пробелы и переносы строк.
  • <h1></h1> Тег H1 определяет заголовок первого уровня (самые крупные буквы в заголовке). Всего имеется шесть уровней заголовков.
  • <h6></h6> Тег H6 определяет заголовок шестого уровня (самые мелкие буквы в заголовке). Всего имеется шесть уровней заголовков.
  • <b></b> Тег B устанавливает отображение текста в жирном начертании.
  • <i></i> Тег I устанавливает отображение текста курсивом.
  • <tt></tt> Тег TT ("teletype" - телетайп) устанавливает отображение текста моноширинным шрифтом, создавая иллюзию того, что текст был напечатан с помощью телетайпа.
  • <cite></cite> Тег CITE устанавливает отображение текста курсивом. Используется для указания на факт цитирования поисковым машинам.
  • <em></em> Тег EM устанавливает отображение текста жирным курсивом.
  • <strong></strong> Тег STRONG устанавливает отображение текста в жирном начертании.
  • <fontsize=?></font> Атрибут SIZE тега FONT устанавливает относительный размер шрифта. Список возможных значений состоит из положительных и отрицательных чисел.
  • <fontcolor=?></font> Атрибут COLOR тега FONT устанавливает цвет текста. Цвет может быть указан с помощью с помощью названия или шестнадцатричного кода.
  • <p></p> Тег P устанавливает начало и конец абзаца.
  • <p align=?> Атрибут ALIGN тега P устанавливает режим выравнивания текста: влево (LEFT), вправо (RIGHT) или по центру (CENTER).
  • <br> Тег BR устанавливает перенос строки (даже если текст продолжается за тегом).
  • <blockquote></blockquote> Тег BLOCKQUOTE устанавливает отступы слева и справа от текста. Кроме этого тег устанавливает разрыв абзаца до и после указанного текста.
  • <ol></ol> Тег OL ("orderedlist" - упорядоченный список) устанавливает режим последовательной нумерации элементов, размещенных внутри списка.
  • <ul></ul> Тег UL ("unorderedlist" - неупорядоченный список) устанавливает режим отображения текста в виде маркированного списка.
  • <li></li> Тег LI устанавливает режим отображения текста в виде пункта списка. Такой список может быть неупорядоченным, упорядоченным или маркированным.
  • <divalign=?> Тег DIV используется для структурирования и форматирования текста. Атрибут ALIGN тега DIV устанавливает режим выравнивания текста. Возможно выравнивание влево (LEFT), вправо (RIGHT) или по центру (CENTER).

Теги таблиц

  • <table></table> Тег TABLE устанавливает начало и конец таблицы. Все теги, определяющие структуру таблицы, должны располагаться между тегами TABLE.
  • <tr></tr> Тег TR определяет строку таблицы.
  • <td></td> Тег TD определяет колонку таблицы. Текст, заключенный между тегами TD ("table data" - табличные данные), отображается внутри одной ячейки.
  • <th></th> Тег TH устанавливает режим отображения текста в виде заголовка таблицы.
  • <table border=?> Атрибут BORDER тега TABLE устанавливает ширину рамки таблицы в пикселах.
  • <table cellspacing=?> Атрибут CELLSPACING тега TABLE устанавливает расстояние между соседними ячейками таблицы в пикселах.
  • <table cellpadding=?> Атрибут CELLPADDING тега TABLE устанавливает расстояние между границей ячейки и ее содержимым.
  • <table width=?> Атрибут WIDTH тега TABLE устанавливает ширину таблицы в пикселах или в процентах от ширины области просмотра.
  • <tr align=?> or <td align=?>Атрибут ALIGN устанавливает выравнивание содержимого ячейки по ее левому краю (LEFT), по центру (CENTER) или по ее правому краю (RIGHT).
  • <tr valign=?> or <td valign=?>Атрибут VALIGN устанавливает вертикальное выравнивание содержимого ячейки по ее верхнему краю (TOP), посередине (MIDDLE) или по ее нижнему краю (BOTTOM).
  • <td colspan=?> Атрибут COLSPAN тега TD устанавливает сколько соседних ячеек в строке будут объединены с данной.
  • <td rowspan=?> Атрибут ROWSPAN тега TD устанавливает число ячеек, объединяемых в одну. Объединяются ячейки, расположенные одна под другой.
  • <td nowrap> Атрибут NOWRAP тега TD препятствует разбиению текста внутри ячейки на несколько строк.

 

 

 

 

2.5.3  Теги для работы с графикой  в HTML-документах

 

 

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

Существует два способа использования  графики в HTML-документах. Первый - это  внедрение графических образов  в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inlineimage". Синтаксис тэга:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

Теги графических элементов

  • <img src="name"> Тег IMG устанавливает режим отображения графического файла.
  • <img src="name" align=?> Атрибут ALIGN тега IMG устанавливает режим выравнивания указанного изображения в отведенном ему пространстве. Возможно выравнивание влево (LEFT), вправо (RIGHT), по центру (CENTER), вниз (BOTTOM), вверх (TOP), посередине (MIDDLE).
  • <img src="name" border=?> Атрибут BORDER тега IMG устанавливает режим отображения рамки вокруг указанного изображения. Рисунок с гиперссылкой по умолчанию имеет рамку, цвет которой совпадает с цветом, используемым для гиперссылок.
  • <img src="name" alt=?> Атрибут ALT тега IMG устанавливает режим отображения указанного текста (в качестве альтернативы) в случае, если броузер не может отобразить графический файл.
  • <hr> Тег HR ("horizontalrule" - горизонтальная линия) образует горизонтальную линию или объемную линию с тенью. Такая горизонтальная линия часто используется для разделения блоков HTML-документа. Тегу HR не нужен закрывающий тег.
  • <hr size=?> Атрибут SIZE тега HR устанавливает высоту горизонтальной линии в пикселах.
  • <hr width=?> Атрибут WIDTH тега HR устанавливает ширину горизонтальной линии либо в пикселах, либо в процентах от размера доступной области просмотра.
  • <hr noshade> Атрибут NOSHADE тега HR указывает на то, что горизонтальная линия не должна иметь тени, придающей линии объемный вид (которая по умолчанию присутствует).

 

Рисунок 4.2- Макет главной страницы  и пример использования тэгов

 

 

    1. Разработка и настройка системы гиперссылок

Гиперссылки  в HTML

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а  также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, UniversalResourceLocator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис тэга А:

<AHREF="адрес URL" TARGET=_blank|_self| _parent| _top>

тело-ссылки

</A>

Тэг <AHREF="URL">открывает описание ссылки, а тэг </A> — закрывает его.

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

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

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

Адрес URL может быть  абсолютный или относительным, что часто используется при организации больших структурированных WEB-сайтов. Чтобы задать полный электронный адрес документа, относительно которого в документе построена адресация, используется тэг <BASE>.

Синтаксистэга<BASE>:

<BASE href= URL >.

Атрибут href указывает полный электронный адрес документа.

Тег <base> располагается в элементе <head>…</head>.

Например:

<head>

<title>Фильм</title>

<base href=”http://www.film.ru”>

</head>

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

Для создания ссылки на закладку необходимо выполнить следующие шаги:

Создать закладку (маркер, якорь раздела):

<ANAME="имя_закладки"> Текст, к которому идет переход </A>

Создать ссылку на закладку (маркер):

<AHREF="#имя_закладки">Текст-ссылки</A>

Закладки могут быть указаны  и для внешних документов:

<A HREF=”http://www.server.ru/doc1.html#zakladka1”>

Создание гиперссылки  на новую страницу в редакторе Notepad++:

<a href="index.html" class="levij"><div class="glavn" >на главную</div></a>

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

 

Рисунок 5.2- вид страницы Бизнес-решение(гиперссылка)

 

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок.

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class

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

Href – обязательный атрибут ссылок. Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера.

 

 

2.7 Тестирование и продвижение  Web-сайта

 

 

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

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

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

Чтобы сайт начал работать, ему нужно присвоить доменное имя и разместить на сервере провайдера, постоянно подключенном к Интернету. Доменное имя, вводимое пользователем в сети, с помощью DNS-серверов преобразуется в IP-адрес компьютера, по которому происходит поиск и взаимодействие компьютеров в сети.

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

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

Информация о работе Создание Web-сайта