Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Cascading Style Sheets и Visual InterDev

.

Среда Visual InterDev имеет встроенные инструменты, построения списков стилей. По сути, эти списки представляют собой текстовые блоки, объединяющие сходные стили, которые планируется использовать в коде HTML или ASP. Рассмотрим соответствующие инструменты Visual InterDev и пример их применения.

Создание списка каскадных стилей в Visual InterDev

1. В окне Project Explorer щелкните правой кнопкой мыши на localhost/JoCoffee и выполните Add Style Sheet. По запросу введите имя style.ess. Откроется окно редактора списка стилей (Style Sheet Editor), показанное на рис. слева.

2. По умолчанию в новом списке выделяется тег BODY, т. е. предполагается, что начать нужно с изменения значений по умолчанию для тега BODY. В редакторе можно установить множество самых разных тегов и параметров. Список стилей позволяет программно изменить практически все атрибуты вывода на экран для тегов HTML, включая фоновый цвет, шрифт по умолчанию, контур страницы и т. д. Мы не сможем рассмотреть все разнообразие вариантов.

Cascading Style Sheets и Visual InterDev 

3. Нам нужно отредактировать операции по умолчанию для тега А. Мы хотим, чтобы ссылки выделялись только при попадании на них указателя мыши и не меняли своего цвета в зависимости от предыдущего посещения. Щелкните правой кнопкой мыши на HTML Tags, выберите Insert HTML Tag. Появится диалоговое окно, в раскрывающемся списке укажите тег А.

 Cascading Style Sheets и Visual InterDev

Cascading Style Sheets и Visual InterDev

 

4. В списке появится новый объект, что позволит вам изменить атрибуты тега А. В диалоговом окне этого тега щелкните мышью на кнопке с изображением многоточия (…), находящейся справа от раскрывающегося списка Color. В списке Basic укажите Navy.

5. После выбора цвета укажите None в группе Effects (Эффекты):

 Cascading Style Sheets и Visual InterDev

6. Установите режим подчеркивания для выделения тегов при попадании на них указателя мыши. Щелкните правой кнопкой мыши на HTML Tags и еще раз

 Cascading Style Sheets и Visual InterDev

выполните Insert HTML Tag. В диалоговом, окне введите A:hover. Откроется окно редактора для этого тега. Укажите Underline (Подчеркивание) в секции Effects.

7. Воспользовавшись классом, введем правило, задающее внешний вид каждого специального блока текста. В Cascading Style Sheets классы группируют различные атрибуты, которые совместно применяются к элементам, способным воспринимать эти атрибуты. Постройте класс для шрифта в 8 пунктов. Для этого укажите в атрибуте class тега font имя нового класса, который будет восприниматься тегом font и устанавливать указанный в классе размер в 8 пунктов.

Создайте новый класс: щелкните правой кнопкой мыши на Classes и укажите Insert Class. Введите имя нового класса small.

 Cascading Style Sheets и Visual InterDev

8. Щелкните на ОК. Откроется окно редактора, будет выделен новый класс и. появится то же самое диалоговое окно, что и при изменении атрибутов. Однако перед именем small будет стоять символ "точка". Это важное правило, которое не следует нарушать! CSS ищет точку в начале идентификатора имени, чтобы различить известные ТЄГИ (BODY, FONT И Т.Д.) и новые объявления классов.

9. Опишите характеристики нового класса, воспользовавшись верхними полями вкладки Font. Укажите для класса small тип шрифта Tahoma и установите в поле Specific размер шрифта в 8 пунктов:

10. Нам необходимо создать еще несколько классов в списке стилей. Но теперь проделаем это не в редакторе, а вручную. Закройте Style Sheet Editor. По запросу сохраните измененный файл.

 Cascading Style Sheets и Visual InterDev

11. В окне Project Explorer щелкните правой кнопкой мыши на style.ess и выберите Open With. По умолчанию Visual InterDev открывает список стилей в редакторе, но мы откроем этот список в виде неформатированного текста, чтобы просмотреть код класса и вручную добавить еще три класса.

12. Укажите Source Code (Text) Editor (Текстовый редактор исходного кода) и щелкните на Open.

 Cascading Style Sheets и Visual InterDev

В "сыром" виде список стилей имеет вид:

 Cascading Style Sheets и Visual InterDev

13. В коде изменяются только значения по умолчанию для атрибутов каждого тега или класса списка стилей. Чтобы создать новый класс . std (от standard – стандартный), достаточно скопировать описание класса .small, изменить имя класса и размер I шрифта:

Cascading Style Sheets и Visual InterDev

 

15. Сохраните список стилей, закройте файл и откройте его снова. По умолчанию InterDev откроет список стилей в окне редактора.

 Cascading Style Sheets и Visual InterDev

Cascading Style Sheets и Visual InterDev

 

Используем полученную базовую структуру в качестве шаблона страниц нашего магазина. Для облегчения дальнейшей работы создадим страницу ASP с именем template.asp и поместим в нее все полученные выше строки кода.

Создание template.asp

1. Щелкните правой кнопкой мыши на localhost/JoCoffee и выполните Add  Active Server Page. Назовите страницу template.asp.

2. Скопируйте и вставьте все содержимое default.asp в новый файл и сохраните этот файл.

Формирование домашней страницы

Мы уже договорились, что домашняя страница будет содержать три отдельные секции, соответствующие областям целевой бизнес-модели:

□ Розничная продажа оборудования

□ Розничная продажа расходных материалов

□ Клуб потребителей

Создание домашней страницы

1. Постройте таблицу, структурирующую домашнюю страницу (default. asp),- измените в CSS старые заголовки и добавьте строку для каждого раздела домашней страницы:

 Cascading Style Sheets и Visual InterDev

 Cascading Style Sheets и Visual InterDev

2. Откройте в браузере файл default.asp:

 Cascading Style Sheets и Visual InterDev

Однако для каких практических целей все это делалось? С одной стороны, следует ускорить загрузку домашней страницы, но с другой – хотелось бы добавить некоторые операции.

Большая часть сайтов электронной коммерции использует домашнюю страницу для размещения специальных объявлений. Зайдите, например, на сайт Computers4SURE.com – на домашней странице представлен список предлагаемых в данный момент товаров.

Cascading Style Sheets и Visual InterDev 

Мы обсудим размещение на странице рекламного каталога Featured Items и покажем методы его вывода на страницу. Например, joscoffee.com должен иметь домашнюю страницу следующего вида:

 Cascading Style Sheets и Visual InterDev

Вывод рекламного списка из каталога продуктов уместен для секций оборудования и расходных материалов. Но как быть с клубом потребителей? По этому разделу можно вывести "кофейные новости" нашего сайта, например пять последних новостей. Либо можно показать десять активных дискуссионных групп или привести ссылку на раздел итогов работы кофейного клуба "Coffee Club Summary" и основную страницу клуба потребителей.

.
Читайте так же:
Not found

Нам доверяют

Интернет магазин