Контрольная работа: Разработка сайта "Интернет-магазин средств связи" средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript
Источники для формирования контента сайта
В качестве источников формарования сайта использованы
общедоступные бесплатные рисунки и фотографии средств связи (мобильных
телефонов). Обзоры (описания) продукции получены из свободно распространяемых
рекламно-информационных и позновательных проспектах (брошурах). Полученные
исключительно на законных основаниях.
Средства и способы форматирования контента
Для форматирования контента использованы средства языка
разметки гипертекста HTML. Файлы
содержащие кодировку HYML
написаны в текстовом редакторе "Блокнот" переведены в формат HTML путём сохранения докуиента с
соответствующим расширением (.html).
Все рисунки выполнены в формате .jpg.
2.3 Разработка системы навигаци
Средства навигации
Вся навигация сведена к минимизации лишних переходов, и
реализуется с помощью ссылок на страницы. Ссылки выполнены как в текстовом, так
и в графическом формате. В графическом формате ссылка представляет собой
рисунок, либо ячейку таблицы выполненную ввиде кнопки.
Особенности системы навигации
Система навигации данного сайта создана с учётом возможности
перехода из ооного пункта в любогой пункт за одно нажатие ссылки.
Так как сайт пострен с использованием технологии фреймов
часть элементов остаются неизменными при любой просматриваемой странице.
Логотип и пункты меню остаются неизменными, изменяется только часть окна
браузера. В которой можно просмаривать все страницы по-очерёдно, на каждой
странице для удобства встроены дополнительные ссылки выполняющие функции
наиболее уместные в данном пункте, и не создающие путаницы для пользователя.
2.4 Особенности дизайна сайта
Описание средств для создания дизайна
Для создания дизайна использованы средства языка разметки
гипертекста HTML. Размеры рисунков (фотографий)
задаются специальными командами (операторами, тегами), с их помошью также
произведено распределение объектов на страницах сайта. В качестве основного
разметочного инструмента использованы таблицы. Цветовые решения выполенные без
рисунков (фотографий) созданы с использованием кодировки цветов безопасной
палитры.
Особенности дизайна сайта. Дизайн сайта выполнен в спокойных
распологоющих к нему (сайту) тонах не заружающих зрение пользователя. Для таких
пунктов, как рекламный слоган, номера оператора и цена товара выбран резкий тонизирующий
цвет, который призван привлечь основную часть внимания пользователя. Основная
задача резкого цвета заставить пользователя купить именно здесь.
Использование библиотек
Библиотека данного сайта состоит из общей папки
К.р._веб-прогр._МурашкинАВ, в которую включены четыре управляющих HTML файла: index.html, logo.html, menu.html, content.html, sale.html; два рисунка: 1.jpg, a0001.jpg и архив из двадцати одной папки (1,
2, 3….21). Каждая папка из этого архива(1, 2, 3…21) содержит управляющий файл HTML (1.html, 2.html,
3.html….21.html) и коллекции картинок товаров. Например: папка-1: 1.html, 8800_1.jpg, 8800_2.jpg, 8800_3.jpg.
3. Средства разработки сайта
Описание языка разметки или веб-программирования
Тег <HTML>
</HTML>—указывает программе просмотра страниц что это HTML документ.
Тег <HEAD>
</HEAD>—определяет место, где помещается различная информация не
отображаемая в теле документа. Здесь располагается тег названия документа и
теги для поисковых машин
Тег <TITLE> </TITLE>—не является частью
отображаемого текста. Он может отображаться, например, как заголовок страницы
или название окна. Только один TITLE может быть в документе. Элемент TITLE
должен использоваться для идентификации содержимого документа. Поскольку
пользователи часто обращаются к документам вне контекста, авторы должны
предоставлять осмысленные заголовки. Таким образом, вместо такого заголовка,
как "Введение", который не даёт достаточно информации о документе,
авторы должны записать, например, так: "Введение в HTML". Название
должно быть не более 40 символов, т.к. название, привышающее размер в 40
символов непомещается в строку заголовка окна браузера.
Тег <frameset> </frameset>—служит
для описания фрейма.
Атрибуты:
cols="200,*,…, *"—производит вертикальное
разделение окна,
rows="100,*,…, 100"—производит горизонтальное
разделение окна.
Тег <frame> служит для описания фрейма. Закрывающий тег
не требуется.
Атрибуты:
Name—назначает имя текущему фрейму. Это имя может
использоваться в качестве цели в последующих ссылках,
Src—определяет исходный документ, содержащийся в фрейме,
Noresize—если этот атрибут присутствует, он сообщает агенту
пользователя, что размеры фрейма изменять нельзя,
Scrolling—создаёт либо убирает полосы
прокрутки,
marginwidth="0" marginheight="0"—определяют ширину
полей фрейма.
Тег <body></body>—определяет видимую часть документа.В этом разделе
располагается вся содержательная часть документа (текст статьи, фотографии,
формы для заполнения, другие объекты).Тег имеет ряд необязательных атрибутов.
Рекомендуется вместо нежелательных атрибутов использовать каскадные таблицы
стилей. Начальный и конечный теги необязательны
Атрибуты:
Bgcolor—устанавливает цвет фона документа, используя значение
цвета в виде RRGGBB—пример: FF0000—красный цвет, либо используя константы
цвета, например для желтого цвета, используемой на данной странице <body
bgcolor= "yellow">
Background—указывает цвет фона документа,
Text—устанавливает цвет текста документа, используя значение
цвета в виде RRGGBB - пример: 000000 - черный цвет, либо используя константы цвета,
например для зеленого цвета, используемой на данной странице <body text=
"green">,
Link—устанавливает цвет гиперссылок, используя значение цвета
в виде RRGGBB—пример: 00FF00—зеленый цвет,либо используя константы
цвета,например для красного цвета,используемой на данной странице <body
link= "red">,
Vlink—устанавливает цвет гиперссылок на которых вы уже
побывали, используя значение цвета в виде RRGGBB—пример: 333333—серый цвет,
Alink—устанавливает цвет гиперссылок при нажатии. Например,
на этой странице ссылки становятся синими при нажатии мышкой
bgproperties=fixed—фоновое изображение прокручиваться не
будет. Т.е. текст будет двигаться при нажатии PageDown, а фон—нет. Данный
параметр поддерживается только Internet Explorer
Эти параметры можно объединять.
Тег <img src="8800_1.jpg"> вставка рисунка.
Атрибуты:
alt="нокиа-8800"—всплывающая подсказка,
height="100"—высота рисунка, может задаваться в %,
width="200"—ширина рисунка, может задаваться в %,
border="0"—обрамление рисунка.
Тег <center></center>—выключка по центру.
Тег <Align left></ Align left >—выключка по левому краю.
Тег < Align right ></ Align right >—выключка по правому краю.
Тег <A> </A>—служит для создания гипертекста
(ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента
текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег
обязателен. Тег должен содержать либо атрибут name, либо href
Атрибуты:
href
—задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке.
Атрибут может указывать как на внешний документ, так и на элемент внутри
данного документа. Для создания гиперссылки вызова почтовой программы для
написания письма используется <a href="mailto:your@email">,
target=" name"—имя
ссылки или фрейма.
Тег <font></font> определяет выводимый шрифт, его
цвет и размер. Закрывающий тег требуется.
Атрибуты:
fase="times new roman"—задаёт тип техста,
color—зазаёт цвет текста,
size="+2"—размер текста.
Тег <b></b>—жирный текст,
Тег <i></i>—курсивный текст.
Тег <h1></h1>—заголовок.
Тег <TABLE></TABLE>—создает
таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается
также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая
таблица. Закрывающий тег обязателен.
Тег <tr></tr>—создает строку таблицы.
Тег <td></td>—создает ячейку таблицы.
Атрибуты:
Align—выравнивание таблицы
относительно документа. Возможные значения: center, left, right,
Background—строка, определяющая рисунок для
заднего фона,
Bgcolor—определяет задний фон
таблицы,
Border—толщина рамки в пикселах. Если
атрибут не указан, то таблица выводится без видимой рамки,
Bordercolor—цвет рамки,
Cellspacing—задает расстояние между
ячейками таблицы,
Cellpadding—задает расстояние между
содержимым ячейки и ее рамкой.
Тег <BR>—не требует парного закрывающего тега, (BReak
line) вставляет перевод строки.
Тег <DIV></DIV>—элемент DIV определяет контейнер для HTML. Закрывающий
тег: требуется.
Заключение
Для разных типов сайтов используются
различные технологии, и способ обеспечивающий максимальное удобство в одном
случае может совершенно не подходить в другом. Из-за того что каждая компания
старается выпустить свой интернет браузер, создаются дополнительные трудности
для Веб-мастеров, так например "бегущая строка" работающая в Internet Explorer не работает с тем же тегом в других
браузерах.
Кроме всего прочего влияет даже такой
фактор, как размер элементов сайта, т.к. пока грузится например картинка в Internet Explorer в другом браузере уже можно
просмотреть часть страницы сайта. Приходится учитывать так же вожмозности
пользователей, так например сайт с низкими параметрами будет некомфортно
просматривать на Full HD мониторе. Так же проблемно будет
пользователю с низкими возможностями аппаратных средств просматривать сайт с
очень высоким разрешением элементов. Не каждый пользователь может позволить
себе выделенку с максимальной скоростью в своём регионе, и соответственно
загрузка Web-страниц будет происходить с разными
скоростями.
Страницы: 1, 2, 3 |
