Курсовая работа: Интернет-аукционы
Рисунок
2 – анимационное изображение
Второй баннер сайта
использует коллаж с надписью, обработанный средствами фотошоп. Этот баннер
статичный. В данном случае с помощью программы фотошоп был выбран размер
баннера который соответствовал высоте ячейки в которую в последствии он был
помещен. В данной обработке так же были использованы спецэффекты, и так же надпись
была размещена вдоль некоторой кривой, расположение которой настраивалось
вручную.
Рисунок
3 – статичное изображение
Цветовая схема сайта
подбиралась в соответствии с заданными уже цветовыми моделями логотипа и
заголовка.
Поэтому в качестве
основного фона страницы сайта использовались цвета наиболее близкие к уже
заявленной цветовой гамме логотипа и заголовка
Рисунок
4 – цветовое оформление сайта
т.е. <body bgcolor="#5E0000">
<td
colspan="2" height="50" bgcolor="#5E0000">
<p
align="center">
<img
border="0" src="images/antik_spb.gif" width="321"
height="51"></td>
Поэтому верхняя часть
сайта была оформлена в данных тонах.
Однако для нижней части
были подобраны желтые оттенки наиболее близкие к цветовой гамме уже
использующейся в логотипе.
<td
rowspan="8" width="76%" bgcolor="#E7A330"
align="left" style="font-family: Times New Roman; font-size:
12pt" valign="top">
<span
lang="en-us"> </span>
Для оформления текста
были использованы три вида шрифтов и стилей.
Первый был использован в
заголовке
Заголовок был оформлен в
виде заголовка первого уровня т.е. тэг <h1> …</h1>
с атрибутом align - расположение текста.
<h1
align="left"><em><font face="Gabriola"
color="#E7A330" size="7">
Данный шрифт был выбран
как наиболее близкий по стилю к изображению цветка на рисунке заголовка.
Второй шрифт был
использован при оформлении бегущей строки текста.
Здесь были использованы
тэги
<p> …</p>
<marquee>…
</marquee>
<p
style="text-align: center">
<span
style="background-color: #E7A330">
<font size="5"
color="#5E0000">
<marquee
behavior="alternate" scrolldelay="59"
style="font-style: italic; margin-left: 5; margin-right: 5">Приветствуем вас на нашем сайте!</marquee></font></span><p
style="text-align: center">
Третий шрифт был
использован при оформлении основного текста.
<td
rowspan="8" width="76%" bgcolor="#E7A330"
align="left" style="font-family: Times New Roman; font-size:
12pt" valign="top">
<span
lang="en-us"> </span>
Это стандартный шрифт Times New Roman.
При разработке сайта
целесообразно было использовать один и тот же шрифт, но в разных вариациях.
Например для выделения
гиперссылок был использован шрифт Times New Roman, но размер шрифта был взят font-size: 12pt.
Для выделения основного
текста также был взят шрифт Times New Roman, и размер шрифта также font-size: 12pt.
Это дало возможность
подчеркнуть тематику данной страницы.
Для раздела анонс, там
где информация дана в рекламном варианте использовался шрифт Times New Roman, но размер шрифта был взят 10pt.
Что позволило вместить
больше рекламной информации на небольшое пространство.
Так же были использованы
такие атрибуты как толщина границы.
При разработке таблицы
была использована толщина и цвет границы. А также были заданы высота в пунктах
и ширина в процентах. Эти данные были прописаны сss таблицах что дало возможность не изменять ни ширину ни
высоту таблицы сайта.
Цветовая гамма выбранная
для таблицы позволила сочетать уже заданные цвета заливки ячеек и изображений.
<table
border="1" width="77%" height="673"
bordercolor="#5E0000" id="table1">
При вставке изображений
что бы не нарушать уже существующий рисунок границы изображения были равны
нулю. Что позволило зрительно не разъединять картинку и общий фон.
<img border="0"
src="images/1.JPG" width="127" >
3. Контент
Так как данный стиль использует
таблицы, то в основной акцент будет сделан на теги:
Таблицы
<table></table>Создает
таблицу.
<tr></tr>Определяет
строку в таблице.
<td></td>Определяет
отдельную ячейку в таблице.
<th></th>Определяет
заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#>Задает толщину
рамки таблицы.
<table cellspacing=#> Задает
расстояние между ячейками таблицы.
<table cellpadding=#>Задает
расстояние между содержимым ячейки и ее рамкой.
<table width=#>Устанавливает
ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?>Устанавливает выравнивание ячеек в таблице, принимает
значения: left, center, или right.
<tr valign=?> или <td valign=?>Устанавливает вертикальное выравнивание для
ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#>Указывает кол-во
столбцев которое объединено в одной ячейке.
(по умолчанию=1)
<td rowspan=#>Указывает кол-во
строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap>Не позволяет
программе просмотра делать перевод строки в ячейке таблицы.
Также будут использованы гиперссылки:
Гиперссылки
<a
href="URL"></a>Создает гиперссылку на другие документы или
часть текущего документа.
<a href="mailto:EMAIL">
</a>Создает гиперссылку вызова
почтовой программы для написания письма автору документа.
<a
name="NAME"></a>Отмечает часть текста как цель для
гипперссылок в документе.
<a
href="#NAME"></a>Создает гиперссылку на часть текущего
документа.
Тег <P>
и необязательный парный ему </P>
Тег <P>
создает новый параграф. Два или более тега <P>, идущих подряд, заменяются
одним
Параметры
align
Выравнивает параграф
относительно одной из сторон документа, значения:
left - выравнивание по
левому краю. По умолчанию,
right - выравнивание по
правому краю,
center выравнивание по
центру,
justify - выравнивание по
ширине.
title всплывающая
подсказка
Теги <H1>,
<H2>, <H3>, <H4>, <H5>, <H6>
Тег <Hx>
служит для создания заголовка. Всего существует 6 видов заголовков - от H1 до
H6. Тегу H1 соответствует самый большой заголовок, тегу H6 - самый маленький.
Закрывающий тег требуется
Атрибуты
align
Выравнивает заголовок в соответствии
со следующими значениями:
left - выравнивание по
левому краю. По умолчанию,
right - выравнивание по
правому краю,
center выравнивание по
центру,
title всплывающая
подсказка
Внутри заголовка размещаются все
необходимые для конкретного документа Метаданные содержат сведения о самом
документе. В этой секции, как правило, располагается информация об авторе, дате
создания документа, данные об авторском праве и другие дополнительные детали, обычные
для книг и журналов.
Тэг meta имеет два основных атрибута:
name (имя) и content (содержание):
<meta
Значением атрибута name может быть
любая символьная строка без пробелов. Выполнение последнего условия
обязательно. Следовательно, является корректной записью, а name" ошибочна.
В отличие от первого
атрибута на содержимое content ограничения не накладываются. Таким образом,
применение фраз типа "my name" (мое имя), списка значений, в котором
элементы отделяются друг от друга запятой, других информационных компонентов в
качестве величины, переданной атрибуту, вполне допустимо.
<head>
<meta
http-equiv="Content-Language" content="ru">
<meta
http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>А
у
к</title>
<link
rel="stylesheet" type="text/css"
href="stylemy.css">
</head>
Заключение
В заключении можно
сказать что в настоящее время дизайнерская разработка сайтов является очень
востребованной в мире.
При разработке сайтов
невозможно обойтись только знанием одного языка программирования, даже знание
нескольких языков не дает гарантии что вы сможете написать действительно
качественный сайт.
Еще недавно разработкой
сайтов занималась целая группа программистов в которой каждому участнику
давалось задание на разработку определенного участка в определенной программе.
Сейчас способы разработки
сайтов не изменились. Просто увеличилась скорость обработки информации что
позволило значительно сократить время на разработку определенного участка и
появились более наглядные программы, а так же программы с русифицированным
интерфейсом которые намного упростили работу программиста или сделали ее более
наглядной.
Страницы: 1, 2, 3 |
