WEB-ДИЗАЙН ДЛЯ ЭЛЕКТРОННОЙ КОММЕРЦИИ /
E-COMMERCE WEB DESIGN
Домой Программа курса Рецензии (.doc) Опросники Нильсена Упражнения на дом Образцы сайтов и критерии оценки Профессиональные ресурсы
Программу Adobe Acrobat для просмотра .pdf-файлов можно скачать здесь.

Домашнее задание: Вставка комментариев в HTML-код, добавление ссылок и других элементов

Вставка комментариев в HTML-код
Graphic with beveled border; in a layer

К рисунку слева применены эффекты в Fireworks: внутренний скос (inner-bevel) и плоская тень (drop-shadow). И рисунок и этот текст расположены на слоях.

Обратите внимание, что когда вы размещайте текст на слое и применяйте фон, будет создаваться впечатление, будто ваш текст скапливается у края слоя, что считается нарушением с точки зрения дизайна. Рациональней разместить текст сначала в таблице, где вы можете дополнить ячейки пробелами (padding) и затем поместить таблице на слой.

Будьте осторожны при смешении элементов, расположенных на слоях и вне них, на одной и той же странице. Иногда, при публикации сайта, пустое пространство может быть исключено при просмотре, преимущественно, когда включен режим Просмотр > Невидимые элементы (View > Invisible Elements). Почему по-вашему это происходит?

Какой способ разменщения вашего содержания на сайте будет по-вашему самым удачным: (а) прямо на страницу, (б) все в таблицах, (в) все на слоях, (г) комбинация вышеперечисленных вариантов? Почему?

 

Graphic with table border

Этот рисунок вставлен в таблицу, которая в свою очередь вставлена в слой. Таблица имеет цветную границу толщиной в 5 пикселов.

Этот текст также находится внутри слоя.

Обратите внимание, что при изменении размера текста в браузере, возникает впечатление, будто страница сдвинулась вверх или вниз (что является результатом совмещения графики и текста).

Если вы предпочли использовать слои, то вам необходимо использовать абсолютные размеры шрифтов для альтернативного текста (всплывающих полдсказок).

Graphic with beveled border; in a layer

К этому рисунку применен внешний скос (outer bevel) и плоская тень. .

И рисунок, и текст размещены на разных слоях.

Для обоих слоев представленных внизу применен фон в виде рисунка. Если слой меньше, чем изображение, то рисунок выглядит обрезанным (для намеренного достяжения такого эффекта целесообразней было бы воспользоваться средствами Fireworks). Если же слой больше изобажения, то он заполняется по "черепичному" принципу как по вертикали, так и по горизонтали.

<html>
<head>
<title>Вставка комментариев в HTML-код, добавление ссылок и других элементов</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../Cassstyles.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#000000" link="000066" vlink="660066" alink="336699">
<p class="CassHead">Вставка комментариев в HTML-код, добавление ссылок и других элементов</p>
<p class="5450Head">Вставка комментариев в HTML-код</p>
<p class="cassdescr">
<!--Это комментарий, включенный в код. Если вы взгляните на исходный HTML-код, то вы увидете, что открывается комментарий символами !--, а закрывается --. Знак пробела между двумя чертами и комментарием роли не играет. НЕ ЗАБУДЬТЕ включить ваше имя и адрес электронной почты в комментарий на главной странице каждого сайта, который вы будете создавать в рамках этого курса. -->
</p>
</body>
</html>

Использование различных гиперссылок

Нижеприведенный маркерованный список - это различные вариации ссылок, как текстовых, так и графических.

  • Внутренняя URL-ссылка (которая также является текстовой ссылкой с гипертекстовым заголовком и ссылкой на именной якорь (Named Anchor), расположенный на другой странице этого сайта)
  • Go see my animations! Графический объект ссылается на другую страницу на этом сайте
  • E-mail гиперссылка (запустит вашу почтовую программу на компьютере, если ваш браузер настроен на это, и адресует электронное сообщение мне)
  • Ссылка типа "именной якорь" (переместит вас назад в начало данной страницы)
  • Внешняя гиперссылка (переместит вас за пределы данного сайта на другой ресурс; не забывайте впечатывать http://; знайте, почему и когда вы выбирайте _blank или _self)
  • Карта рисунка  (очень полезно при использовании карт)

 


Добавление различных элементов
 
  1. Горизонтальный разделитель (Horizontal rule) (вы можете видеть его чуть выше)
  2. Списки (Lists) (вы можете видеть здесь и выше)
  3. Слои (Layers) (показаны ниже)
  4. Таблицы (Tables) (программа курса, которую вы увидите, созданна полнстью в таблице для придания ей необходимого вида).
    К этой таблице применена граница как яркого, так и темного цвета (вы можете установить с это в режиме редактирования кода), объединенные/разбитые ячейки и "верхнее" выравнивание по вертикалии.

 

 

(Будьте осторожней с таблицами - они хороши для выравнивания текста и графических изображений на странице, но изменение границы колонки на одной строке, может привести к ее изменению также на верхней и нижней строках. В дополнение, иногда настройка границы одной колонки может непредсказуемо привести к смещению смежной колонки с ее позиции. Лучше всего разбить ваше содержание на несколко таблиц так, чтобы вы могли выиграть в выравнивании без какого-либо разочарования, в результате изменения ширины колонок. Помните об этом при использовании таблиц для вставки элементов формы (что очень рекомендуется). Вся таблица, включая элементы формы должна находиться внутри тега <form></form>).
  5. Графические изображения с рзличными границами и различным выравниванием.
 

 

Графические изображения с внешней границей и выравниванием. Слои.

Graphic with regular border Этот рисунок вставлен прямо в табличную ячейку, выравнен по левому краю страницы и находится слева относительно текста. Толщина границы равна 4 пикселам. Цвет границы соответствует цвету негиперсвязного текста принятого по умолчанию, либо цвету гипертекста, если рисунок выступает как ссылка.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

наверх
Последнее обновление 16-09-2006
Сайт создан в системе uCoz