Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · web...

35
И. В. Прудаева СОЗДАНИЕ САЙТА (ПРОДВИНУТЫЙ КУРС) Лабораторный практикум

Upload: others

Post on 05-Mar-2020

62 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

И. В. Прудаева

СОЗДАНИЕ САЙТА (ПРОДВИНУТЫЙ КУРС)

Лабораторный практикум

Page 2: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

ОглавлениеТема: Web-сервер Денвер. HTML.................................................................3

Задание 1......................................................................................................................................3

Задание 2......................................................................................................................................4Задание 3......................................................................................................................................5

Задание 4......................................................................................................................................7Задание 5......................................................................................................................................7

Задание 6......................................................................................................................................8Задание 7....................................................................................................................................10

Задание 8....................................................................................................................................11Задание 9....................................................................................................................................11

Задание 10..................................................................................................................................12

Тест для контроля знаний по теме HTML...................................................13Тема: Каскадные таблицы стилей – CSS...................................................17

Задание 11..................................................................................................................................17

Задание 12..................................................................................................................................18Задание 13..................................................................................................................................19

Тест для контроля знаний по теме CSS.....................................................21Тема: Java Script...........................................................................................23

Задание 14..................................................................................................................................23

Тест для контроля знаний по теме Java Script...........................................24Список литературы......................................................................................27

Page 3: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Тема: Web-сервер Денвер. HTML.Задание 1

1. Создайте новый документ с именем Lab1.html и сохраните его

в корне своего домена.

2. Напишите текст:

ПЕСНЯ ПОСЛЕДНЕЙ ВСТРЕЧИ 

Так беспомощно грудь холодела,

Но шаги мои были легки.

Я на правую руку надела

Перчатку с левой руки.

Показалось, что много ступеней,

А я знала - их только три!

Между кленов шепот осенний

Попросил: «Со мною умри!

Я обманут моей унылой

Переменчивой, злой судьбой».

Я ответила: «Милый, милый -

И я тоже. Умру с тобой!»

Это песня последней встречи.

Я взглянула на темный дом.

Только в спальне горели свечи

Равнодушно-желтым огнем.

Анна Ахматова

3. Измените фон страницы и цвет текста согласно рисунку 1.

4. Разбейте текст на абзацы используя тег <p>.

5. Установите абзацам выравнивание.

6. Установите словам жирное, подчеркнутое и курсивное

начертание.

7. Во втором абзаце используйте верхний и нижний индекс.

3

Page 4: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

8. Используя тег <font> выделите фамилию автора

стихотворения.

9. Добавьте в документ два линии, первую длиной в 400

пикселей, а высотой в 5 пикселей. А вторую шириной 50%.

10. Используя теги <h1>..<h6> выделите заголовок.

11. Используя коды специальных символов подпишите

выполненное задание как указано на рисунке 1:

Рисунок 1 Образец выполнения задания 1

Задание 21. Создайте свой домен, в имени которого будет присутствовать

ваша фамилия и группа. В папке www вашего домена (каталога)

создайте файл Lab2.html

2. Введите и отформатируйте текст таким образом, чтобы он

отображался в браузере как на рисунке 2:

4

Page 5: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Рисунок 2 Образец оформления задания 2

Задание 31. Напишите код HTML, чтобы получить результат, приведенный

на рисунке 3.

5

Page 6: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Рисунок 3 Образец выполнения задания 3Варианты:

1. Линейное однородное дифференциальное уравнение n-го

порядка y(n )+a1 (x ) y (n−1 )+…+an−1 ( x ) y '+an ( x ) y=0, где y= y (x) — неизвестная

функция, a1(x ) ,a2(x) ,... , an−1(x ), an(x) — известные.

2. Общее решение имеет вид: y ( t )=c1eαt cos (βt )+c2 e

αt sin (βt )

3. Общее решение имеет вид: y ( t )=c1eα 1 t+c2 e

α2 t

4. Однородное уравнение второго порядка: a2 y ' '+a1 y '+a0 y=0

5. Пусть λ1 , λ2 — корни характеристического уравнения a2 λ2+a1 λ+a0=0, являющегося квадратным уравнением.

6. Пусть λ1 ,…, λk — все различные корни характеристического

многочлена, являющегося левой частью характеристического уравнения an λ

n+an−1 λn−1+…+a1 λ+a0=0

7. Однородное уравнение: an y(n)+an−1 y(n−1)+…+a1 y

'+a0 y❑=0

8. Если дано частное решение неоднородного уравнения y0(t ), и

y1 ( t ) ,…, yn(t) — фундаментальная система решений соответствующего

однородного уравнения, то общее решение уравнения задается

формулой y (t )=c1 y1 ( t )+…+cn yn (t )+ y0(t), где c1 ,…,cn — произвольные

постоянные.

9. В случае, когда f (t) — квазимногочлен, то есть

f (t )=p ( t ) eαt cos (βt )+q (t)eαt sin ( βt), где p ( t ) , q (t ) — многочлены,

10. Частное решение уравнения ищется в виде есть y0 ( t )=( p ( t )eαt cos (βt )+q ( t ) eαt sin (βt ))t s, где p ( t ) , q (t) — многочлены,

6

Page 7: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Задание 41. Создайте новый документ с именем Lab4.html и сохраните его

в корне своего домена.

2. Введите текст, вставьте изображения с учетом: ширины,

высоты, выравнивания.

Рисунок 4 Образец выполнения задания 4

Задание 51. Создайте новый документ с именем Lab5.html и сохраните его

в корне своего домена.

2. Создайте список определений как на рисунке 5.

3. Создайте маркированный список. Измените внешний вид

маркера на квадратик.

4. Создайте нумерованный список. Осуществите нумерацию

римскими цифрами и измените начало нумерации с числа XV.

5. Создайте список с многоуровневой нумерацией.

6. Добавьте внизу странички ссылку на загрузку установочного

файла Денвера.

7. Добавьте внизу документа ссылку на свою страничку в

контакте, которая будет открываться в новом окне.

7

Page 8: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

8. Второе изображение в документе сделайте ссылкой на

поисковую систему Google

9. Создайте новый файл index.html, в котором разработайте

список, содержащий ссылки на задания лабораторных работ.

Рисунок 5 Образец выполнения задания 5

Задание 6Создать документ Lab6.html, в нем по центру создать таблицу, по

варианту, соответствующему последней цифре вашего номера в списке.

8

Page 9: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Вариант 1

12

3 45 6 7 8

9 10 11 12 1314 15 16 17 1819 20 21 22 23Таблица 1, выполнил «ФИО»

Вариант 2

1

23 4

5

6 7 88 9 10

11 12 13

14 15 16

17 18 1

9 20

Таблица 1, выполнил «ФИО»

Вариант 31 23

4

5 6

7

89 10 11 1213 14 15 1617 18 19 2021 22 23 24Таблица 1, выполнил «ФИО»

Вариант 41

4

2 35 6 7 8 910

11 12 13

14

15

16 17 18

19

20

21 22 23

24

Таблица 1, выполнил «ФИО»Вариант 51 2 34 5 6 7 8

9 10 111213

14 15 16 17 18Таблица 1, выполнил «ФИО»

9

Page 10: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Вариант 61 2

34 5

6 7 8 910 11 12 13

14 15 16 17 1819 20 21 22 23Таблица 1 выполнил «ФИО»

Вариант 7Таблица 1, выполнил «ФИО»

1 23 4

67 8 9 1011 12 13 1415 16 17 18

19 20 21 22 23

Вариант 8Таблица 1, выполнил «ФИО»

12

34 56 7 8

9 10 11 12 13

14 15 16 1718 19 20 21

22 23 24 25 26

Вариант 91 2 3

4

56 7

8 9 10 1112 13 14 15

16 17 18 19 2021 22 23 24

Таблица 1, выполнил «ФИО»

Вариант 10

1

2 34 5

6 7 8 910 11 12 13

1415 16 17 18 1920 21 22 23 24Таблица 1, выполнил «ФИО»

Задание 7Создать в файле Lab7.html таблицу для шаблона сайта (см.

рисунок 6), которая будет отвечать следующим требованиям:

Рисунок 6 Образец выполнения задания 7

10

Page 11: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

1. шапка таблицы должна состоять из двух ячеек;

2. размер левой верхней ячейки задать в зависимости от

размера рисунка-фона;

3. фоном этой ячейки сделать изображение;

4. правая верхняя ячейка должна занимать все оставшееся

место в окне браузера и иметь цвет фона подходящий под цветовую

гамму изображения;

5. в верхней правой ячейке измените цвет текста и его

выравнивание (согласно рисунку) и запишите в ней свою фамилию;

6. центральную (контентную) часть сделать высотой в 350

пикселей и задать цвет фона #fff3e5;

7. в центральной ячейке объединить две ячейки так, что бы

получилась одна общая, установить выравнивание текста по ширине и

по верхнему краю ячейки;

8. задать подвал таблицы высотой в 30 пикселей, текст

выровнять по правому краю. Включить в подпись символ ©.

Задание 81. В файле Lab8.html создать таблицу размером 3х3, (пунктиром

указаны границы ячеек).

Рисунок 7 Образец для выполнения задания 32. Задать ширину и высоту таблицы и ячеек так, что бы ширина

таблицы уменьшалась и увеличивалась при изменении размеров окна

браузера, а высота была установлена равной высоте браузера.

Задание 91. Создайте файл anketa.html на своем домене.

11

Page 12: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

2. Создать поля для ввода имени пользователя и пароля

пользователя (символы, вводимые в поле Пароль должны отображаться

звездочками).

3. Создать поля для ввода даты рождения. День и месяц

рождения выбирается из выпадающего списка, а год вводится в ручную

в поле ввода, причем количество вводимых символов не должно

превышать четыре.

4. Создать переключатели для выбора пола. Реализовать

возможность выбора только одного варианта.

5. Создать флажок, с текстом «Да, я желаю получать спам» с

флажком, установленным по умолчанию.

6. Создать переключатели для выбора количества писем

получаемых в день.

7. Создать список интересов с возможностью выбора

нескольких элементов.

8. Добавить поле для ввода нескольких строк текста с

дополнительной информацией о пользователе. Поле должно иметь

размеры 7 строк и 30 столбцов.

9. Создать поле с кнопкой «Обзор» для загрузки файла

изображения.

10. Создать две кнопки. Первую для передачи данных формы на

сервер, а вторую для очистки формы.

Задание 101. Создайте html-файл (frame.html), состоящий из трех фреймов

(см. рисунок 8).

Рисунок 8 Образец разбивки на фреймы

12

Page 13: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

2. Поместите файл на свой веб-сервер и дайте каждому фрейму

уникальное имя.

3. Задайте левому фрейму фиксированную ширину в 234

пикселя с запретом изменять ширину фрейма.

4. В левый фрейм поместите файл меню (menu.htm), который

будет состоять из списка лабораторных работ. Меню разместите в

таблице, состоящей из 3-х строк, в каждую строку фоном поместите

рисунок (см. рисунок 9).

Рисунок 9 Образец меню5. Задайте для каждой лабораторной работы ссылку на

соответствующий документ, который будет открыт в правом нижнем

фрейме.

6. В верхний фрейм поместите в качестве источника поисковую

систему google.com.

7. Создайте в папке своего домена файла map.html,

содержащий карту изображений.

8. Поместите в файл map.html изображение-карту г.Тюмени (см.

рисунок 10)

9. Нанесите на карту ссылки на сайты административных

округов.

10. Добавьте в файл, находящийся в левом фрейме ссылку на

обе карты изображений.

13

Page 14: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Рисунок 10 Карта г. ТюмениТест для контроля знаний по теме HTML

1. Какой вариант написан с ошибкой?

a) <ol type="A">b) <ol type="I">c) <ol type="i">d) <ol type="N">

2. Какой валидный код XHTML 1.1 используется, для того чтобы при

наведении мыши на изображение, появлялась всплывающая подсказка

с текстом “Подсказка"?

a) <img src="foto.jpg" alt="Изображение" title="Подсказка" />b) <img src="foto.jpg" alt="Подсказка" />c) <img src="foto.jpg" alt="Подсказка" title="Изображение" />d) <img src="foto.jpg" title="Подсказка" />

3. Какой тег существует:

a) <pr>b) <color>c) <code>d) <quote>

4. Какой тег нужно добавить для переноса строки, сохранив при этом

валидность XHTML 1.1?

a) <br>b) <hr />c) <hr>d) <br />

5. На сайте внутри папки pages находится файл page.html. А внутри

папки images находится файл foto.jpg. Причём папки images и pages

14

Page 15: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

лежат в корне сайта. Как правильно написать путь к foto.jpg из файла

page.html:

a) ../images/pages/foto.jpg b) images/foto.jpg c) pages/images/foto.jpgd) ../images/foto.jpg

6. Изображение вставлено на сайт следующим образом: <img

src=’my_foto.jpg’ title=’Моя картинка’ />. Но при попытке проверить на

валидность стандарту XHTML 1.1 появляется ошибка. В чём она

заключается?

a) Неправильно закрыт тег <img>. Вместо /> надо писать >. b) Не хватает атрибута alt у тега <img>. c) Атрибута title у тега <img> не существует. d) Атрибуты нужно заключать в двойные кавычки, а не в одинарные.

7. Необходимо добавить несколько подряд идущих пробелов в

тексте. Какой тег надо использовать, чтобы пробелы не вырезались?

a) <span>b) <pre>c) <address>d) <code>

8. Какой тег нужно использовать для создания нумерованного списка:

a) <ol>b) <list>c) <tr>d) <ul>

9. Размер окна браузера 1000 пикселей. На страницу добавили блок

с шириной 40%. Затем в этот блок добавили таблицу с шириной 50%.

Какова будет ширина таблица в пикселях?

a) 250 пикселей. b) Недостаточно данных. c) 500 пикселей. d) 200 пикселей.

10. Какой из вариантов содержит ошибку:

a) <a href="page.html#17">Ссылка</a>b) <a href="page.html">Ссылка</a>c) <a href="page.html"#top>Ссылка</a>d) <a href="page.html#top">Ссылка</a>

15

Page 16: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

11. Ширина таблицы должна быть на всю страницу (либо

родительского контейнера). Как нужно написать тег <table>?

a) <table>b) <table width="100">c) <table width="100%">d) <table width="auto">

12. Какой из представленных вариантов является валидным по XHTML

1.1:

a) <img src="foto.jpg" title="Изображение">b) <img src="foto.jpg" alt="Изображение">c) <img src="foto.jpg" alt="Изображение" />d) <img src="foto.jpg" title="Изображение" />

13. Какого тега НЕ существует:

a) <ol>b) <adress>c) <em>d) <pre>

14. Как правильно задать ссылку на адрес электронной почты:

a) <a href="mailto:[email protected]">Написать</a>b) <a href="email:[email protected]">Написать</a>c) <a href="mail:[email protected]">Написать</a>d) <a href="[email protected]">Написать</a>

15. Какая ошибка содержится в следующей строке?

<p><b>lorem ipsum dolor sit </b><span>amet<blockquote> consectetuer </blockquote> <span>adipicim</span> elit </span></p>

a) Тег <span> задан без атрибутов.b) Строчный элемент размещается внутри блочного.c) Тег <b> использовать нельзя, его следует заменить на тег <strong>.d) Блочный элемент размещается внутри строчного.e) Перекрёстное вложение тегов.

16. Какое значение атрибута width тега <img> является ошибочным?

a) 1%b) 120%c) 34.5%d) 1097e) 13

17. Вы хотите получить валидный HTML-код. Какое требование

необходимо выполнить?

a) Писать значения атрибутов только прописными буквами.

16

Page 17: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

b) Не использовать сокращенные атрибуты тегов.c) Опускать теги, которые добавляются по умолчанию.d) Применять правильное вложение тегов.e) Писать все теги в нижнем регистре.

18. Для какого тега элемент <!DOCTYPE> выступает родителем?

a) <head>b) Ни для одного тега.c) <html>d) <body>e) <title>

19. Как написать химическую формулу оксида алюминия Al2O3, чтобы

двойка и тройка были в нижнем регистре?

a) Al<sup>2</sup>O<sup>3</sup>b) Al<sub>2</sub>O<sub>3</sub>c) Al<span>2</span>O<span>3</span>d) Al˅2O˅3e) Al<pow>2</pow>O<pow>3</pow>

20. Как открыть ссылку в новом окне?

a) <a href="1.html" rev="blank">b) <a href="1.html" rel="blank">c) <a href="1.html" frame="blank">d) <a href="1.html" target="_blank">e) <a href="1.html" blank>

17

Page 18: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Тема: Каскадные таблицы стилей – CSS.Задание 11

1. Создайте в html файле Lab11.html пять абзацев длиной в три

строки.

2. В css файле напиши стиль для селектора тега body, в

котором укажите цвет текста (#009933), размер букв (14px) и название

шрифта (Arial):

3. В css файле создайте шрифт абзаца, в котором установите

разраженный интервал текста между буквами на 10px

4. Один из абзацев сделать курсивом и подчеркнутым.

5. Создать класс для форматирования третьего абзаца со

следующими свойствами:

шрифт абзаца Comic Sans; (font-family)

размер шрифта 25 пт; (font-size)

отступ красной строки в 50 пикселей (text-indent).

подключите стиль к третьему абзацу (используя атрибут class).

6. Создайте класс .rich для отображения пятого абзаца,

содержащий следующие свойства текста:

Шрифт Arial, 15 пт;

Начертание жирное + курсив (font-weight; font-style);

Цвет букв оранжевый (color);

Высота строки 25 пунктов (line-height).

7. Создайте класс perenos и запретите в нем перенос слов в

пределах одного абзаца. Назначте это свойство второму и четвертому

абзацу.

8. Создать класс, содержащий заглавные красные буквы.

Применить данный класс к тегу <p>.

9. Создайте класс следующими свойствами:

Шрифт Courier 12 пт;

все буквы заглавные;

межбуквенный интервал разряженный на 200%;18

Page 19: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

текст подчеркнутый;

красная строка 2 см;

междустрочный интервал двойной.

10. Добавьте еще пару абзацев и назначьте им свойства этого

класса.

Задание 121. Создайте html-файл Lab12.html, содержащий блочный

элемент DIV.

2. Создайте css-файл и подключите его к html-документу.

3. Создайте класс k1, в котором определите размер блока

200х200 пикселей, фон (светло-зеленый) и рамку (сплошную, темно-

зеленую, шириной в 3 пикселя).

4. Добавьте еще пять таких же блоков размером 200х200

пикселей.

5. Расположить блоки друг за другом и добавить расстояние

между ними (поэксперементируйте со свойствами: padding, margin,

border и offset).

6. Создайте горизонтальный светофор из трех блоков. Ширину

блоков сделайте динамичной, что бы они изменялась в зависимости от

ширины окна, но все блоки должны иметь одну ширину. Задайте

каждому блоку свой цвет. Отступы для body уберите с помощью css.

Рисунок 11 Образец выполнения задания 127. Создайте три блока. В первом блоке сделайте рамку,

шириной с разным типом линии с разных сторон блока. Во втором блоке

19

Page 20: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

задайте фоновое изображение (background-image). В третьем блоке,

задайте фон в виде точек. Добавляйте строчки по одной и смотрите

изменения в браузере после каждой строки.

Рисунок 12 Образец выполнения задания 128. Расположите блоки один над одним как показано на рисунке

12.

9. Создать блок со скругленными углами.

10. Описать стиль для изменения прозрачности любого

изображения при наведении на него курсора мыши.

11. Используя блоки, их вложенность, фон, выравнивание,

свойство float, шрифт Georgia создайте шапку (см. рисунок 13).

Рисунок 13 Образец выполнения задания 12Задание 13

1. Создайте html-файл Lab13.html, создайте в нем таблицу (см.

рисунок 14).

Рисунок 14 Образец выполнения задания 132. Создайте css-файл в котором укажите что в таблице и

ячейках будет использоваться рамка красного цвета, шириной в 1

пиксель.

3. Замените двойную рамку на одинарную.

4. Назначьте таблице отдельный класс. Опишите свойства

отдельных элементов таблицы используя следующие стили:

20

Page 21: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

.frmtbl { /*задание стиля таблицы в целом*/ }

.frmtbl thead { /*задание стиля для заголовка таблицы */ }

.frmtbl tbody { /*задание стиля для основной части таблицы*/ }

.frmtbl tfoot { /* задание стиля для нижней части таблицы */ }

5. Используя свойства list-style-type, list-style-position, list-style-

image разместите в блоке маркированный список. В качестве маркера

используйте изображение, маркер должен быть внутри списка. Отступ от

левого края блока до списка должен составлять 50 пикселей.

6. Вставьте блок текста:

Рисунок 15 Блок текста7. Опишите идентификатор layer, который будет содержать:

желтый фон, зеленую рамочку, отступ от текста до края блока до текста,

синие буквы, ширину в 200 пикселей, абсолютное позиционирование и

область позиционирования элемента clip: rect(40px, auto, auto, 40px);

Рисунок 16 Результат применения идентификатора layer8. Создайте блок с рамкой размером 200х200 пикселей.

Поместите в этот блок изображение заведомо большего размера.

Просмотрите в браузере Mozilla. Поэкспериментируйте со свойством

overflow так, что в том случае, если в блок не вмещается содержимое,

появлялись полосы прокрутки (или только одна):

21

Page 22: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Рисунок 17 Результат применения свойства overflow

Тест для контроля знаний по теме CSS1. Какой CSS-код необходимо задать, чтобы цвет посещённых и

непосещённых ссылок был одним и тем же:

a) a:active, a:visited {color: yellow;}b) a:link, a:active {color: yellow;}c) a:link {color: yellow;}d) a:link, a:visited {color: yellow;}

2. Какой псевдоэлемент нужно использовать, чтобы при наведении

курсора мыши на ссылку, она меняла цвет?

a) onmouseover b) link c) active d) hover

3. В каком из представленных ниже вариантов содержится явная

ошибка:

a) p span#text (font-size: 150%;}b) p {font-size: 150%;}c) p text (font-size: 150%;}d) p span {font-size: 150%;}

4. Какой CSS-код написан правильно?

a) div> {border: 1px solid #ccc;}b) div> {border: 1px solid #hhh;}c) div {border: 1px solid #ccc;}d) div {border: 1px solid #hhh;}

22

Page 23: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

5. Есть такой CSS-код во внешнем файле: p {color: blue;}. На странице

написан такой HTML-код: <p style="color: red;">текст</p>. Какого цвета

будет "текст"?

a) Красногоb) Чёрногоc) В браузере IE8 синего, а в других красногоd) Синего

6. Какое свойство используется для задания отступов у блока?

a) direction b) position c) margin d) padding

7. CSS-код: body {font-size: 14pt;} p {font-size: 2em;}. Какой размер

текста будет в теге <p>:

a) 28ptb) 7ptc) 12ptd) 16pt

8. HTML-код: <div id="myid">Содержимое</div>. Как задать стиль для

тега <div>?

a) div.myid {margin: 1px;} b) .myid {margin: 1px;} c) div[myid] {margin: 1px;} d) div#myid {margin: 1px;}

9. Как изменить цвет фона для всех элементов h1 на странице?

a) h1.all {background-color: #ccc;} b) h1 {background-color: #ccc;} c) h1[all] {background-color: #ccc;} d) h1:all {background-color: #ccc;}

10. Куда надо добавить свойство margin: 0, чтобы границы страницы

примыкали к краям окна браузера.

a) head b) doctype c) html d) body

23

Page 24: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Тема: Java ScriptЗадание 14

1. Напишите скрипт, изменяющий свойство документа - фон при

наведении курсором на какой-то текст.

2. Создайте три абзаца текста.

a. Напишите скрипт, изменяющий цвет текста первого

абзаца при наведении мышкой.

b. Напишите скрипт, изменяющий цвет фона текста

второго абзаца при наведении мышкой.

c. Напишите скрипт, изменяющий цвет фона текста

третьего абзаца только при наведении мышкой.

3. Создайте панель меню, чтобы при наведении курсора мыши

на название раздела менялся фон этого раздела.

4. Реализовать калькулятор, позволяющий выполнять

простейшие операции над двумя операндами.

5. Найти и вывести в документ максимальное из 3 двухзначных

чисел, вводимых с клавиатуры.

6. Определить количество дней в месяце 2013г. С клавиатуры

вводится номер месяца, на экран выдается сообщение, например: «в

апреле 30 дней».

7. Определить, является ли введенный с клавиатуры год

високосным. Високосным годом называется год, который делится на 4 и

не делится на 100, пока не делится на 400. (вис. – 1972, 2000, не висок. -

1900, 2001).

24

Page 25: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

8. «Угадай число». Компьютер «задумывает» целое случайное

число в диапазоне от 0 до 10. Игрок вводит число с клавиатуры, пытаясь

угадать секретное число. Компьютер выдает подсказки, наподобие «мое

число меньше», и подсчитывает число попыток. После отгадки выдается

надпись: «Вы угадали число с такой-то попытки».

9. Рассчитать число ПИ, используя метод множественных

опытов (метод Монте-Карло). PI = (4*M)/N, где N – число опытов, в

каждом из которых генерируется точка с координатами (X,Y). X и Y –

случайные числа, распределенные по равномерному закону в диапазоне

[0,1]. M – количество точек, попавших внутрь сектора с радиусом 1.

10. Подсчитать сумму чисел, кратных 3, и произведение

положительных чисел, вводимых с клавиатуры. Ввод чисел д.б.

завершен при наборе числа «999». Числа вывести в документ в виде

маркированного списка, а результаты вычислений оформить в виде

таблицы.

11. Сформировать динамическую страницу, содержащую

заголовок первого уровня, горизонтальную линию и таблицу. Цвет

шрифта, выравнивание заголовка, длина горизонтальной линии,

количество строк и ячеек таблицы, а также цвет рамки задаются с

клавиатуры.

Тест для контроля знаний по теме Java Script1. Что будет написано в появившемся сообщении при выполнении

такого скрипта:<script type="text/javascript"> alert(0==false);</script>

a) falseb) 0c) trued) Ошибка, поскольку нельзя сравнивать значения в параметрах функции.

2. Что будет написано в появившемся окне?<script type="text/javascript">  var arr = new Array();  arr[arr.length] = 0;  arr[arr.length] = 1;

25

Page 26: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

  alert(arr.length);</script>

a) Код нерабочий, поскольку писать arr[arr.length] можно только при длине массива отличной от 0.b) 1c) 0d) 2

3. Какой из вариантов объявления функции правильный: var func =

function() {}; или function func() {}

a) Оба варианта правильные.b) function func() {}c) var func = function() {};d) Оба варианта неправильные.

4. Что будет в появившемся окне?<script type="text/javascript">  var a = 1;  function func() {    a = 10;  }  func();  alert(a);</script>

a) Ошибка, поскольку в коде идёт попытка 2 раза объявить переменную с одинаковым именем.b) undefinedc) 1d) 10

5. Какая разница между функциями setInterval() и setTimeout()?

e) Функция setInterval() вызывает заданную функцию постоянно через заданный промежуток времени, а функция setTimeout() вызывает функцию через заданный промежуток только 1 раз.f) В функции setInterval() можно задавать любой интервал для выполнения кода, тогда как в setTimeout() задержка всегда равна 1000 мс.g) Функция setInterval() вызывает функцию через заданный промежуток только 1 раз, а функция setTimeout() вызывает заданную функцию постоянно через заданный промежуток времени.h) Никакой разницы нет.

6. Что будет написано в появившемся окне<script type="text/javascript">  var a = 1;  function func() {    alert(a);  }  func();</script>

a) undefined

26

Page 27: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

b) 0c) 1d) Ничего не будет, поскольку возникнет ошибка "переменная не определена".

7. Что делает функция printMessage("Text")?

e) Выводит окно с текстом Text.f) Выводит окно с текстом "Text".g) Функция printMessage() вообще не существует.h) Ошибка, поскольку в функции printMessage() 2 параметра.

8. Какая функция вызывает окно с текстовым полем, в которое

пользователь может ввести строку?

a) prompt()b) alert()c) promt()d) alerts()

9. Какая функция вызывает окно с предупреждающим сообщением?

a) promt()b) prompt()c) confirm()d) alert()

10. Что будет написано в появившемся окне?<script type="text/javascript">  var a = 1;  var b = ++a + 1;  alert(b);</script>

a) 3b) 2c) Ничего не будет, поскольку инкремент пишется всегда так: a++.d) 1

27

Page 28: Проектирование веб сайтов.гимназия-21.рф/files/we_9789.docx · Web viewВ первом блоке сделайте рамку, шириной с разным

Список литературы1. Бранденбау Д. JavaScript: сборник рецептов, - СПб.: Питер, -

2000, - 416 стр.

2. Русаков М.Ю. Как создать свой сайт. - http://myrusakov.ru/

3. ТГАТУ Кафедра прикладной информатики. -

http://study.pmkt.com.ua/discipline/25.html

4. Лекции по компьютерным информационным технологиям

http://www.aboutkit.ru/laby/laby-po-javascript.html

5. Java Script http://flash-library.narod.ru/UMK/JavaScript/

6. Задачи по Java Script

http://gendocs.ru/v483/%D0%B7%D0%B0%D0%B4%D0%B0%D1%87

%D0%B8_%D0%BF%D0%BE_javascript

28