Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Teksty_lekcii_po_discipline.doc
Скачиваний:
10
Добавлен:
30.08.2019
Размер:
4.93 Mб
Скачать

Тема 12.2. Лекция. Создание Web-страницы средствами CorelDraw.

Вопросы: 1. Оформление Web-страницы.

2. Основы языка HTML.

Вопрос 1. Оформление Web-страницы.

  1. Структура Web-страницы:

– Сочетание текста и графики.

– Особенность: текст создается в текстовом редакторе (Блокнот) и содержится в файлах с расширением .html (HTML-файлах).

(HTML-код см.: http://www.htmlbook.ru/html/)

– Вся графика содержится во внешних файлах, ссылки (указатели) на которые содержатся в коде (тексте) HTML-файла.

– Графические файлы должны быть минимальными по размеру: .gif или .jpeg (изображения, макс. 100 dpi), .gif или .swf (анимация).

– Наличие кнопок – гиперссылок.

  1. Создание фона

Первый способ.

Создайте в текстовом редакторе HTML-файл и введите код

<body bgcolor=”#******”>

где ”#******” – код цвета от #000000 (черный) до #ffffff (белый).

Например, красный – #ff0000, синий – #0000ff, бирюзовый – #ff33cc

Таблица цветов:

(см.: http://fsweb.info/web/html_handbook/colors.html)

Цвет на экране монитора задается тремя составляющими, так называемый RGB-код - красный, зеленый, голубой. Каждое значение RGB изменяется от 0 до 255, которое показывает долю свечения данного цвета - 0 - черное, 255 - максимально яркое. Путем смешивания этих составляющих в различных сочетаниях достигается отображение на экране любого цвета. Если Вы подсчитаете количество комбинаций, то получите огромную цифру – свыше 16 миллионов цветовых оттенков, порой даже практически неотличимых друг от друга. Однако представление цвета десятичными знаками для компьютера неперспективно, поскольку память используется неэффективно, гораздо более удобным (и принятым по умолчанию, по крайней мере для всех браузеров) считается представление цвета в 16-теричном коде. Если, например, для кодировки белого цвета в десятичном исчислении надо задать так: 255, 255, 255, то есть 9 цифр, да еще обязательно с разделителем, получается 11 знаков. Разделители необходимы потому, что код каждого цвета может быть однозначным, двухзначным или трехзначным числом. То есть для каждого цвета должно быть отведено не менее 11 ячеек памяти. В 16-теричном коде для этого нужно не более 6 ячеек (для белого цвета FFFFFF). Каждое 16-теричное число изначально задается двухзначным, то есть, если это 4, то пишется 04 и так далее до FF, которое в переводе на десятичную систему соответствует 255.

Таким образом, шестизначное число 16-теричного кода цвета ХХХХХХ означает, что первые две цифры показывают долю красного, вторые – зеленого, третьи – голубого. Если цифру этого кода вставить в тэг <body bgcolor=00ff00>, то фон страницы окрасится в максимально яркий зеленый цвет, если же его вставить в тэг <table bgcolor=00ff00>, то в этот цвет окрасится только таблица, если в тэг <tr bgcolor=00ff00> – строка таблицы, а в тэг <td bgcolor=00ff00> – ячейка.

Второй способ.

Использование в качестве фона готового изображения:

– создайте с помощью графического редактора фото (или рисунок) и сохраните его в формате *.jpg в папке.

– в текстовом редакторе введите код: <body background=”*.jpg ”> и сохраните файл .html в той же папке.

Изображение будет растиражировано в качестве фона (швы!).

  1. Создание обрамления.

  1. Установите размер страницы A4. Разрешение 100 dpi.

  2. Создайте квадрат 10 на 50 мм (темно-красного цвета) без контура.

  3. Постройте второй прямоугольник 10 на 395 мм (бледно-розовый) без контура.

  4. Выровняйте прямоугольники по левому краю и по верху.

  5. Выполните экспорт графики *.jpg.

  6. Переключитесь в браузер и обновите изображение.

  1. Размещение изображений.

  1. Создайте с помощью графического редактора фото (или рисунок) и сохраните его в формате *.jpg в папке.

  2. В текстовом редакторе введите код: <img src=”*.jpg ”> и сохраните файл .html в той же папке.

  3. Изображение будет отражено на странице браузера.

  1. Создание кнопок.

Что такое кнопка: три вида.

  1. Нарисуйте кнопку – вид сверху (импортируйте рисунок).

  2. Эффекты – Ролловер – Создать ролловер

  3. Эффекты – Ролловер – Редактировать ролловер

  4. Всплывающее меню Интернет: Закладка Обычное-Сверху-Снизу

  5. Нажать пиктограмму Завершить Редактирование ролловера

  6. Заполнит URL-адрес: http://www.google.ru

  7. Файл – Публикация в Интернете – HTML

  8. Выбрать папку в пункте НазначениеОК.

  1. Создание страницы сайта при помощи инструментов CorelDraw

  1. Создание фона: прямоугольник 370 на 200 (и более) мм, заливка, без контура.

  2. Оформление заголовка (текст + изображения)

  3. Оформление левого поля (обрамления)

  4. Выполнение управляющих кнопок с гиперссылками.

  5. Размещение изображений, текстов (с гиперссылками).

  6. Файл – Публикация в Интернете – HTML