Навигация
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-страниц будет происходить с разными скоростями.
Из этого следует, что при разработке сайта необходимо ориетироваться на определённую категорию пользователей, например сайту по продаже китайского дешёвого ширпотреба не нужно иметь заоблачных характеристик, дабы не расходовать время пользователей на ожидание длительных загрузок.
А сайт по продаже элитной HI-End аппаратуры может позволить себе порадовать пользователей высоким качеством элементов сайта, так как ориетирован на другую категорию пользователей, которые пользуются аппаратурой с более высокими хартеристиками и пропускная способность линии выше в разы.
По сложности сайты так же разнообразны от элементарой сайта-визитки до сложного многостраничного сайта крупной компании, в последнее время растёт количество сайтов с различными услугами, например интернет магазины. К сожалению не все Web-мастера работают в рамках закона, следствием чего является рост мошеннических сайтов.
Литература
1.Храмцов П.Б. , Брик С.А. , Русак А.М. , Сурин А.И. Основы web-технологий, БИНОМ. Лаборатория знаний, Интернет-университет информационных технологий - ИНТУИТ.ру, 2007.
2.Громов Ю.Ю., Земской Н.А., Иванова О.Г., Лагутин А.В. Основы Web-инжиниринга. В 2 ч. Ч. 1: Учебное пособие.—Тамбов: Издательство ТГТУ, 2007.
3.Пауэлл Т. WEB-дизайн.—СПб.: Питер, 2005.
4.Розенсон И.А. Основы теории дизайна.—СПб.: Питер, 2006.
5.Кузнецов, М.В. РНР 5. Практика разработчика Web-сайтов. / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев.—СПб.: БХВ-Петербург, 2007.
6.Захаркина В.В. JavaScript. Основы клиентского программирования: Учебное пособие.—СПб.: Ф-т филологии и искусств СПбГУ, 2007.
7.Белозубов А.В., Николаев Д.Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3: Учебно-методическое пособие.—СПб.: СПбГУ ИТМО, 2007.
8. http://www.alleo.ru
9. http://www.sotasot.ru
10. http://www.mobilelux777.ru
11. http://www.vertu-luxe.ru
Приложение 1
Скриншоты страниц
Рисунок 9-Скриншот страницы: Главная
Рисунок 10-Скриншот страницы: Нокиа 8800
Рисунок 11-Скриншот страницы: Нокиа 8800 (окончание)
Рисунок 12-Скриншот страницы: Нокиа 8820
Рисунок 13-Скриншот страницы: Нокиа 8820 (окончание)
Рисунок 14-Скриншот страницы: I Phone Air Slim
Рисунок 15-Скриншот страницы: Звонок оператору
Рисунок 16-Скриншот страницы: I Phone Air Slim (окончание)
Приложение 2
1. Имя сайта (название домена): www.S_MAG.ru
2. Название сайта: cайт "Интернет Магазин Средств Связи". Далее - Фирма.
3. Назначение сайта (цель создания сайта):
Практическое задание по дисциплине Web-програмирование.
4. Язык сайта: русский/english.
5. Основные ключевые слова, по которым сайты должны находить по запросам в поисковых системах и Интернет – каталогах:
Интернет Магазин Средств Связи.
6. Объём и состав текстовой и графической информации в электронном виде: необходимый и достаточный.
7. Предполагаемая возрастная аудитория сайта: от 10 лет и старше, ядро аудитории от 18 до 50 лет.
8. Количество страниц сайта: сайт содержит следующие html страницы: 1—Главная (домашняя) страница; 2…22—Вид товара с описанием характеристик;23—Страница заказа ( Звонок оператору).
9. Кнопки управления (навигация сайта): Текстовые и графические гиперссылки. Пользователь с просматриваемой страницы может перейти на другую любую по его усмотрению станицу сайта.
10. Объём сайта: 6,70 МБ (ввиде архива Win.rar—5,32 МБ).
11. Оформление рисунков: все рисунки объемом от 15—100 МБ в формате .jpg. Рисунки на страницах с описанием характреристик товара выполнены с замещающим текстом.
12. Основной диапазон разрешения мониторов, на которых будет просматриваться сайт: основное разрешение, на которое оптимизируется сайт: 1280х800 пикселей.
13. Основной браузер, которым будет просматриваться сайт, и его минимальная версия: Mozilla Firefox 3.6.10, Opera 10.62, Safari 4.0.4 , Internet Exsplorer 8.0.
Похожие работы
... 20% от общего товарооборота, соответственно окупаемость магазина произойдет за более длинный промежуток времени, нежели чем при полном ассортименте. Получение дополнительной прибыли электронному магазину по продаже программного обеспечения, компакт дисков и dvd дисков на основании приведенных выше затрат ожидается уже с третьего - четвертого месяца, что является достаточно хорошим экономическим ...
... , гибкостью. Работа с ней, как правило, не вызывает больших трудностей. Поддержка сервера MySQL автоматически включается в поставку PHP. 2 Разработка интернет-магазина для предприятия «Электра» 2.1 Принципы работы интернет магазина 2.1.1 Оформление заказа Выбрав необходимые товары или услуги, пользователь обычно имеет возможность тут же на сайте выбрать метод оплаты и доставки. ...
... , изменяя представление о мире, обязывают повышать ответственность медицины перед обществом. В данной работе рассматривался процесс создания интернет-ресурса для системы дистанционного образования по курсу «Медицинская информатика». В работе приведено обоснование необходимости в применении средств дистанционного обучения для сотрудников медучреждений Тульской области, предложена структура ...
... охватывало бы вопросы воспитания, взаимодействия учителей с родителями учеников и самими учениками, вопросы самоподготовки желающих учиться учеников, помощи отстающим и т.п. 5. РАЗРАБОТКА ШКОЛЬНОЙ ИНФОРМАЦИОННОЙ СИСТЕМЫ (ШИС) НА ОСНОВЕ IT-ТЕХНОЛОГИЙ ДЛЯ МОУ СОШ № 97 Поставленные в предыдущем разделе задачи могут быть решены путем организации широчайшего (относительно родителей, учеников и ...
0 комментариев