- •Смысловой модуль 1. Электронные платежные системы и предприятия электронной коммерции.
- •1.1. Электронные деньги
- •1.2. Банковские платежные системы
- •Перечень критериев и вопросов для анализа систем Интернет-банкинга
- •1.3. Особенности использования банковских карт. Виртуальные карты
- •1.4. Системы электронных платежей в Интернет. Система WebMoney
- •Тема 2. Основные понятия электронного бизнеса и электронной коммерции.
- •2.1. Электронная коммерция как новый экономический объект
- •2.2. Виды электронной коммерции
- •Тема 3. Модели электронной коммерции. Развитие информационного общества и электронной коммерции в мире.
- •3.1. Модели электронного бизнеса в мировой экономике.
- •3.2. Статистика интернет-торговли в странах мира
- •Тема 4. Международная классификация предприятий электронной коммерции. Электронные магазины, витрины, молы (торговые площадки), аукционы.
- •4.1. Международная классификация электронного бизнеса
- •4.2. История появления электронных магазинов. Современные реалии
- •Тема 5. Функциональные элементы и юзабилити сайтов пэк. Seo - оптимизация контента сайтов пэк.
- •5.1. Юзабилити сайтов предприятий электронной коммерции
- •Смысловой модуль 2. Создание сайтов интернет-магазинов с помощью языка разметки гипертекста html Тема 6. Язык разметки гипертекста html
- •6.1. Структура html - документа
- •6.2. Форматирование данных на странице
- •Тема 7. Создание списков, таблиц, фреймов
- •7.1. Списки
- •7.2. Таблицы
- •7.3.Фреймы
- •Тема 8. Работа с изображениями
- •8.1. Использование изображений на web – странице
- •8.2. Создание гиперссылок
- •8.3. Бегущая строка
- •Тема 9. Создание фреймов, каскадные таблицы стилей css
- •9.1. Назначение, синтаксис css
- •9.2. Применение таблиц стилей css
- •Литература
- •Учебное издание
- •Электронная коммерция опорный конспект лекций
- •283023, Г. Донецк, ул. Харитонова, 10. Тел.: (0622)97-60-45,97-60-50
8.2. Создание гиперссылок
Гипертекстовые ссылки создаются с помощью тега <A>, который имеет несколько атрибутов. Атрибут HREF указывает на ссылку на другой документ или закладку. При его определении следует указать URL или маршрут поиска и имя файла, на который осуществляется ссылки.
<A HREF="http://www.rambler.ru"> Поиск в Rambler </A>
<A HREF="Пример.htm"> Ссылка </A>
При осуществлении перехода внутри документа нужно значения атрибуту HREF определить так: символ числа #, имя закладки.
Создаются закладки с помощью атрибута NAME тега <A>.
Например, можно определить первое предложение документа как закладку с именем «Начало»:
<A NAME=" Начало"> Первое предложение страницы </A>
Для перехода на начало документа можно в конце страницы создать такую гиперссылку:
<A HREF="# Начало"> На кочан страницы </A>
8.3. Бегущая строка
Бегущая строка создается с использованием тега <MARQUEE>, что имеет такие атрибуты:
Атрибут BEHAVIOR определяет поведение строки на экране, может принимать значение SCROLL – пересекает экран (значение по умолчанию), SLIDE – текст выдвигается на экран и там остается, ALTERNATE – движение в прямом и обратном направлениях.
Атрибут BGCOLOR – цвет фона.
Атрибут DIRECTION задает направление движения, возможные значения: LEFT – слева направо, RIGHT – наоборот.
Атрибут HEIGHT определяет высоту строки в пикселях или в процентах к размеру окна.
Атрибут LOOP – количество проходов строки по экрану.
Атрибут SCROLLAMOUNT – скорость перемещения текста, принимает значение от 1 (наименьшая скорость) до 2000.
В качестве бегущей строки можно определить также рисунок.
Например,
<MARQUEE BEHAVIOR=ALTERNATE BGCOLOR=Red HEIGHT=10% SCROLLAMOUNT=10> Пример </MARQUEE>
Пример бегущей строки:
<MARQUEE> <IMG SRC="Человек.jpg"> </MARQUEE>
Тема 9. Создание фреймов, каскадные таблицы стилей css
9.1. Назначение, синтаксис css
Каскадные таблицы стилей CSS (от англ. Cascading Style Sheets – каскадные таблицы стилей) дают возможность задать стиль начертания символов, шрифты, цвета символов и фона, цвета гипертекстовых ссылок и т.п. и использовать эти стили при определении внешнего вида документа.
CSS предоставляют разработчику такие возможности:
Можно один раз создать файл, в котором содержится описание всех стилей, и дальше ссылаться на него из разных документов.
Быстро и просто менять вид документа.
CSS осуществляют дополнительный контроль над характеристиками документов.
Уменьшается время на загрузку документов, поскольку уменьшается их размер.
Синтаксис письма стиля имеет структуру:
Элемент или селектор – это может быть любой тег или несколько тегов.
Свойство – атрибуты форматирования для определенного элемента.
Значение – значение свойства.
Объявление – свойство и значение, которое она должна принять.
|
|
|
Правило |
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
Объявление |
|
||
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
Элемент |
|
Свойство |
|
Значение |
|||
Например, запись H1 {color:red; size:20pt;} означает, что все элементы заголовка первого уровня будут иметь красный цвет и размер 20 пунктов.
Характеристика некоторых свойств приведена в таблице 1.
Таблица 1 - Характеристика свойств, которые используются в CSS
Свойства |
Значение |
||
имя |
описание |
возможные значение |
описание |
1 |
2 |
3 |
4 |
Параметры шрифта |
|||
font-family |
Гарнитура шрифта |
serif |
шрифт с засечками |
sans-serif |
шрифт без засечек |
||
font-style |
стиль шрифта |
normal |
обычный |
italic |
курсив |
||
oblique |
наклон |
||
font-variant |
варианты отображения шрифта |
normal |
нормальный размер букв |
small-caps |
все буквы выглядят как прописные |
||
font-weight |
жирность шрифта |
normal |
нормальное начертание |
bold |
полужирное |
||
bolder |
|
||
lighter |
|
||
|
значение от 100 до 900 с шагом 100 |
|
|
font-size |
размер шрифта |
размер |
|
xx-small |
|
||
x-small |
|
||
small |
в 1, 2 раза менее чем medium |
||
medium |
значение в браузере по умолчанию |
||
large |
в 1, 2 раза более чем medium |
||
x-large |
|
||
xx-large |
|
||
smaller |
|
||
larger |
|
||
Форматирование текста |
|||
word-spacing |
расстояние между словами |
normal |
|
значение |
|
||
text-decoration |
текстовые эффекты |
none |
|
underline |
подчеркивание |
||
overline |
надчертание |
||
line-through |
перечеркнутый |
||
blink |
мигание текста |
||
letter-spacing |
расстояние между буквами |
normal |
|
значение |
задается в тысячных долях М-пробела (отношение высоты шрифта к высоте прописной буквы) |
||
vertical-align |
позиционирование по отношению к другим элементам, которые находятся в одном блоке |
baseline |
по базовой линии блока |
sub |
по нижнему индексу |
||
super |
по верхнему индексу |
||
top-text |
по верхнему краю |
||
top |
по верхнему краю (лишь для таблиц) |
||
middle |
по середине (лишь для таблиц) |
||
bottom |
по нижнему краю (лишь для таблиц) |
||
bottom-text |
по нижнему краю |
||
% |
|
||
text-transform |
смена регистров текста |
none |
|
Capitalize |
первые буквы всех слов становятся большими |
||
uppercase |
символы превращаются в прописные |
||
lowercase |
символы превращаются в строчные |
||
text-align |
выравнивание текста |
left |
налево |
right |
по правую сторону |
||
center |
по центру |
||
justify |
по ширине |
||
text-indent |
отступление для первой строки абзаца |
значение |
|
% |
|
||
line-height |
отступление сверху |
normal |
|
значение |
|
||
% |
|
||
Определение цвета и фона |
|||
color |
цвет элемента |
значение |
|
background-color |
цвет фона элемента |
значение |
|
background-image |
изображение - фон |
none |
|
URL |
|
||
background-repeat |
варианты повторения фонового изображения |
repeat |
повторяется |
repeat-x |
повторяется лишь по оси Х |
||
repeat-y |
повторяется лишь по оси Y |
||
no-repeat |
не повторяется |
||
background-attachment |
возможность прокрутки фонового изображения |
scroll |
|
fixed |
|
||
background-position |
положение фонового изображения |
(% ширины% высоты |
|
top |
|
||
middle |
|
||
bottom |
|
||
left |
|
||
center |
|
||
right |
|
||
background |
обобщает перечисленные свойства |
любая комбинация перечисленных значений |
|
Параметры блока (содержимое страницы внутри контейнеров <P> или <DIV>) |
|||
margin-top |
определяет отступление сверху |
значение |
|
% |
|
||
auto |
|
||
margin-right |
определяет отступление по правую сторону |
значение |
|
% |
|
||
auto |
|
||
margin-bottom |
определяет отступление снизу |
значение |
|
% |
|
||
auto |
|
||
margin-left |
определяет отступление налево |
значение |
|
% |
|
||
auto |
|
||
margin |
обобщает перечисленные свойства |
|
|
padding-top |
отступление от верхнего бордюра |
значение |
|
% |
|
||
padding-right |
отступление от правого бордюра |
значение |
|
% |
|
||
padding-bottom |
отступление от нижнего бордюра |
значение |
|
% |
|
||
padding-left |
отступление от левого бордюра |
значение |
|
padding |
обобщает перечисленные свойства |
% |
|
border-top-width |
толщина верхнего бордюра |
значение |
|
thin |
тонкая |
||
medium |
средняя |
||
thick |
толстая |
||
border-right-width |
толщина правого бордюра |
значение |
|
thin |
|
||
medium |
|
||
thick |
|
||
border-bottom-width |
толщина нижнего бордюра |
значение |
|
thin |
|
||
medium |
|
||
thick |
|
||
border-left-width |
толщина левого бордюра |
значение |
|
thin |
|
||
medium |
|
||
thick |
|
||
border-width |
обобщает перечисленные свойства |
|
|
border-color |
цвет бордюра |
значение |
|
border-style |
стиль линии бордюров |
none |
нет |
dotted |
точками |
||
dashed |
пунктирная |
||
solid |
сплошная |
||
double |
двойная |
||
groove |
втиснутая |
||
ridge |
объемная |
||
inset |
блок внутри рамки отображается втиснутым |
||
outset |
блок внутри рамки отображается выпуклым |
||
border-top |
обобщает перечисленные свойства |
|
|
border-right |
обобщает перечисленные свойства |
|
|
border-left |
обобщает перечисленные свойства |
|
|
border-bottom |
обобщает перечисленные свойства |
|
|
border |
обобщает перечисленные свойства |
|
|
width |
ширина элемента |
значение |
|
% |
|
||
height |
высота элемента |
значение |
|
% |
|
||
float |
расположение элемента |
left |
|
right |
|
||
none |
|
||
clear |
расположение других элементов вокруг данного |
left |
|
right |
|
||
both |
|
||
none |
|
||
Форматирование списков |
|||
display |
определяет, как будет отображаться элемент |
none |
|
block |
|
||
inline |
|
||
list-item |
|
||
white-space |
определяет, как будут отображаться пробелы между элементами |
normal |
|
pre |
|
||
nowrap |
|
||
list-style-type |
определяет вид list-item маркера в списках |
disc |
зарисованный круг |
circle |
пустой круг |
||
square |
квадрат |
||
decimal |
арабская цифра |
||
lower-roman |
римские цифры маленького размера |
||
upper-roman |
римские цифры большого размера |
||
lower-alpha |
встречные латинские буквы |
||
upper-alpha |
прописные латинские буквы |
||
none |
|
||
list-style-image |
задает вид list-item маркера из картинки |
none |
|
URL |
|
||
list-style-position |
определяет положение маркера в зависимости от list item элемента |
inside |
|
outside |
|
||
list-style |
обобщает перечисленные свойства |
|
|
При создании нового стиля можно определять тег, к которому этот стиль будет применяться.
Например, правило
P {color:black; font-family:Times New Roman}
определяет стиль для текста внутри абзаца – черный цвет символов, шрифт Times New Roman.
Можно также перечислить несколько тегов, на которые распространяется данное правило.
Например, правило H1, H2, H3 {font-style:italic} определяет, что для заголовков первого, второго и третьего уровня используется стиль начертания – курсив.
В правилах CSS используется понятие класса. Класс определяется таким образом
Селектор.Класс { свойство CSS: значение}
Это предоставляет возможность к одному селектору применять разные классы – способы оформления.
Например,
H1.normal { color:black;font-style:normal;} – стиль заголовка normal
H1.funny { color:blue;font-style:italic} – стиль заголовка funny
Можно определять также классы, не связанные с определенными селекторами
.Класс { свойство CSS: значение}
Например,
.red { color:blue } – класс синего цвета элементов.
В таблицах стилей CSS можно также создавать комментарии по такому правилу:
/* текст комментария */