Тема 4. Создание текучих макетов при помощи таблиц

Раздел 2. Вопросы, касающиеся макетов

Тема 4. Создание текучих макетов при помощи таблиц

Очевидное преимущество текучих макетов заключается в

· использовании всей доступной реальной площади экрана

· в удобной вертикальной прокрутке контента

· в использовании абсолютных размеров, например, 600 px

Можно ли использовать атрибуты rowspan или colspan в текучем дизайне?

(нет)

Для создания эффекта текучести нужно присвоить параметру width определенных ячеек таблиц символ

· * (верный)

· #

· &

Сколько текучих ячеек можно сделать в строке?

· одну

· две

· все

Выбор текучей ячейки заключается в выборе ячейки

· занимающей одну треть от таблицы

· находящейся посередине

· с наибольшим количеством содержимого

Текучие макеты - это макеты, которые изменяют свои размеры

· для соответствия размерам содержимого ячейки

· для соответствия размерам ссылок на странице

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

Раздел 2. Вопросы, касающиеся макетов

Создание макетов с фиксированной шириной при помощи таблиц CSS

Тег div (division) нужен для того, чтобы

1) Задавать толщину макета

2) Размечать область или раздел Web-страницы

3) Создавать вложенную таблицу

4) Создавать колонку, занимающую всё доступное пространство по высоте

2. Разработка макетов, основанных на таблицах CSS, начинается с

эскизов

Важно помнить о необходимости использования CSS-формата, вместо

_______ - формата, для всего, что находится внутри атрибута style.

HTML

4. Особенности CSS-формата:

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

2) Необходимо писать составные имена атрибутов слитно, не разделяя их дефисом, например, backgroundcolor, а не background-color

3) Необходимо разделять пары атрибут/значение запятой (,)

4) Необходимо использовать символ двоеточия (:), а не знак равно (=), для задания пар атрибут/значение

5) Плюсы макета с фиксированной шириной:

1) Такой макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы)

2) При грамотной верстке макет позволяет достичь большой универсальности в отображении, независимо от ширины окна пользовательского клиента

3) Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину

4) Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера

Макет сайта с фиксированной шириной (или фиксированный макет) характеризуется тем, что

1) Основная область для содержания имеет неизменное значение ширины, не зависящее от разрешения экрана браузера пользователя.

2) Блоки внутри фиксированы по ширине на 800, 650 и 100рх

3) Большинство внутренних элементов имеют ширину, заданную в процентах для того, чтобы приспособиться к разрешению пользователя

4) Макет с фиксированной шириной совпадает с макетом, применяемым браузером по умолчанию, что позволяет считать его «идеологически правильным»

Раздел 2. Вопросы, касающиеся макетов

Центрирование CSS-макетов с фиксированной шириной

Слой или раздел, - это элемент раздела, который расположен внутри другого раздела.

Вложенный

Для построения CSS-макета, выровненного по центру,

1) лучше использовать контейнерный элемент, в котором будут размещаться вложенные элементы с содержимым, а затем отцентрировать контейнер

2) лучше не использовать контейнерный элемент

3) лучше сразу отцентрировать контейнер

4) лучше создать дополнительный контейнер

В CSS правильным способом центрирования элемента фиксированной ширины является указание ширины для элемента, заключающего в себе все материалы страницы (обычно этим элементом является элемент div), а затем

1) для левого и верхнего полей указывается значения auto

2) для правого и нижнего полей указывается значения auto

3) для верхнего и нижнего полей указывается значения auto

4) для левого и правого полей указывается значения auto

Выберете верное утверждение.

1) При построении CSS-макета лучше использовать значение, выраженное в пикселях, а не в процентах, для того, чтобы точно знать точный размер макета.

2) При построении CSS-макета лучше использовать значение, выраженное в процентах, а не абсолютный размер, выраженный в пикселях, так как мы не знаем наверняка ширину окна браузера посетителя.

3) При построении CSS-макета положение вложенных элементов не является абсолютным, и браузер не использует их родительский элемент в качестве базисной точки для вычисления смещений слева и сверху.

4) При построении CSS-макета можно использовать значение, выраженное в пикселях или процентах, так как никакой разницы между ними нет.

Раздел 3. Вопросы, касающиеся изображений

Трансформация изображений с использованием атрибутов языка HTML

1. Атрибут тега img, который задаёт высоту изображения либо в пикселях, либо в процентах:

1) Border

2) Hspace

3) Class

4) Height

2. Параметр bottom атрибута align обозначает:

1) Выравнивание середины изображения по базовой линии текущей строки

2) Выравнивание нижней границы изображения по окружающему тексту

3) Верхняя граница изображения выравнивается по самому высокому элементу текущей строки

4) Размещение нескольких картинок подряд

3. Толщина рамки, обтекающей изображение, будет равна 6 px, если ввести:

1) <img src= "foto.jpg" border ="6">

2) <img = "foto.jpg" bordercolor ="6">

3) <img src= "foto.jpg" width ="6">

4) <img = "foto.jpg" width ="6">

4. Атрибут, который задает вертикальный отступ изображения в пикселях от других объектов html, это –

vspace

5. Для того, чтобы задать отступ изображения в пикселях от других объектов html, вместо hspace и vspace можно применять атрибут

margin

6. Две важные функции, которые выполняет атрибут alt="текст"?

1) Подпись под картинкой не появляется после наведения курсора мыши

2) Выдает подсказку при наведении

2) Если в браузере отключены изображения, то выводится этот текст

4) Подпись располагается поверх изображения

Раздел 3. Тема 2. Оптимизация изображений

1. Выберите 3 важнейших фактора оптимизации изображений:

1) атрибут Alt;

2) атрибут Title;

3) название изображения;

4) атрибут Top.

2. В изображениях высокого разрешения пикселей и байтов:

1) гораздо больше, чем в обычных;

2) гораздо меньше, чем обычных;

3) одинаковое количество;

4) почти одинаковое количество.

3. В каждом из пикселей растрового изображения содержатся значения RGBA:

1) красного (R), зеленого (G), синего (B) канала;

2) альфа-канала;

3) канала прозрачности (A);

4) всех вышеперечисленных.

4. Изображения с одинаковыми настройками качества, но в разных форматах будут:

1) совершенно одинаковы;

2) отличаться в любой степени;

3) очень отличаться;

4) отличаться немного.

5. Масштабирование изображения – это:

1) изменение размера изображения с сохранением пропорций;

2) исключительно увеличение размера изображения;

3) исключительно уменьшение размера изображения;

4) изменение веса изображения.

6. Выберите три стандартных формата изображений:

1) WebP, JPEG XR, PNG;

2) GIF, PNG, JPEG;

3) GIF, WebP, BMP;

4) TIFF, PNG, JPEG.

Какой формат нужно выбрать, чтобы изображение было анимированным?

1) JPEG;

2) GIF;

3) PNG;

4) SVG.

Что делает инструмент optipng?

1) оптимизирует JPEG-изображения;

2) сжимает PNG без потерь;

3) сжимает PNG с потерями;

4) создает и оптимизирует GIF-изображения.

Выбор надлежащего пути

1. Какие типы путей существуют:

a) абсолютные и относительные;

b) относительные, указываемые относительно документа;

c) абсолютные, относительные, указываемые относительно документа и относительные, указываемые относительно корня;

d) абсолютные и относительные, указываемые относительно корня;

 

2. Абсолютный путь:

a) сообщает браузеру, как добраться до требуемой страницы из любого места в интернете;

b) сообщает браузеру, как добраться до; требуемой страницы с текущей веб-страницы

c) сообщает браузеру, как добраться до требуемой страницы с текущего веб-сайта;

d) ничего из вышеперечисленного;

 

3. Какой из путей может работать в автономном режиме:

a) абсолютный;

b) путь, указываемый относительно корня;

c) путь, указываемый относительно документа;

d) никакой;

 

4. Какой из путей полностью совпадает с путем URL:

a) ни один из них;

b) путь, указываемый относительно корня;

c) абсолютный;

d) путь, указываемый относительно документа;

 

5. Что общего между относительным путем, указываемым относительно документа и относительным путем, указываемым относительно корня:

a) Не надо указывать перфикс «https://www» и имя домена для сайта;

b) Не зависят от текущего положения браузера;

c) Можно комбинировать перемещения вверх и вниз по структуре сайта;

d) Не изменяется в зависимости от текущего положения браузера;

 

6. Какой путь будет работать только на Web-сервере:

a) все три;

b) абсолютный путь;

c) путь, указываемый относительно документа;

d) путь, указываемый относительно корня;

A.класс:link

a.класс:visited

a. класс:text-decoration

3. Атрибут для изменения цвета одиночной гиперссылки:

style=’’background: цвет’’

style=’’ text-transform: цвет’’

style="color: цвет"

bgcolor="цвет"

4. Соотнесите код и результат, который будет отображаться на странице HTML

1. <p><a href="content.html" style="color: white">этот текст</a></p>

2. <p><a href="1.html" style="color: Blue">этот текст</a></p>

3. <p><a href="2.html" style="color:Yellow>Этот текст</a></p>

1. Этот цвет голубой

2. Этот текст желтый

3. Этот цвет золотой

4. Этот цвет белый

Ответ: 1-4, 2-1, 3-2.

5. Напишите код для текста гиперссылки зеленого цвета

Ответ:<p><a href=”URL” style=color:green> текст </a></p>

В любом месте страницы

Только в заголовочном теге <h1> </h1>

Только в заголовочных тегах <head> и <h1>

2. Перед точкой указывается:

Стиль для всех тегов на странице

Стиль по умолчанию

Название класса

Стиль для отдельного тега

3. Таблица стилей CSS – это

сборник стилей, подключаемый с помощью тега alink

сборник стилей

Решетка

Равно

Плюс

Минус

5. Соотнесите аргумент и его характеристику:

1. font-weight:

2. text-align:

3. border:

4. font-family:

1. Выравнивание текста

2. Рамка вокруг текста

3. Название шрифта текста

4. Насыщенность текста

Ответ: 1-4, 2-1, 3-2, 4-3

6. Текст стиля font-weight: bolder будет:

Ответ: жирный

A.класс:link

a.класс:visited

a. класс:text-decoration

7. Атрибут для изменения цвета одиночной гиперссылки:

style=’’background: цвет’’

style=’’ text-transform: цвет’’

style="color: цвет"

bgcolor="цвет"

8. Соотнесите код и результат, который будет отображаться на странице HTML

4. <p><a href="content.html" style="color: white">этот текст</a></p>

5. <p><a href="1.html" style="color: Blue">этот текст</a></p>

6. <p><a href="2.html" style="color:Yellow>Этот текст</a></p>

6. Этот цвет голубой

7. Этот текст желтый

8. Этот цвет золотой

9. Этот цвет белый

Ответ: 1-4, 2-1, 3-2.

10. Напишите код для текста гиперссылки зеленого цвета

Ответ:<p><a href=”URL” style=color:green> текст </a></p>

В любом месте страницы

Только в заголовочном теге <h1> </h1>

Только в заголовочных тегах <head> и <h1>

8. Перед точкой указывается:

Стиль для всех тегов на странице

Стиль по умолчанию

Название класса

Стиль для отдельного тега

9. Таблица стилей CSS – это

сборник стилей, подключаемый с помощью тега alink

сборник стилей

Решетка

Равно

Плюс

Минус

11. Соотнесите аргумент и его характеристику:

5. font-weight:

6. text-align:

7. border:

8. font-family:

5. Выравнивание текста

6. Рамка вокруг текста

7. Название шрифта текста

8. Насыщенность текста

Ответ: 1-4, 2-1, 3-2, 4-3

12. Текст стиля font-weight: bolder будет:

Ответ: жирный

Выбором из палитры

В виде трех десятичных чисел

2. Cтиль ссылки при наведении курсора:

visited

Hover

link

color

3. Цвет и его характеристики можно посмотреть:

В таблице стилей CSS

В палитре

Придумать самому

4. При использовании темного фона страницы можно ли выбирать темный цвет текста гиперссылки:

Да

Нет

5. Атрибут для подчеркивания ссылки:

Ответ: text-decoration

Раздел 4. Тема 4. Замена тегов форматирования каскадными таблицами стилей

1. CSS предполагает 3 основных типа таблиц стилей:

1) встроенные;

2) связанные (внешние);

3) импортированные;

4) внедренные (внутренние).

2. Какой метод позволяет взять любой тег HTML и добавить к нему стиль:

1) внедренный (Embedded);

2) встроенный (Inline);

3) связанный (Linked или External);

4) импортированный.

3. В каких скобках должны находиться свойства CSS:

1) в круглых;

2) в квадратных;

3) в фигурных;

4) без скобок.

4. Выберите последовательность применения стилей каскадной таблицы стилей:

1) связанные → внедренные→встроенные;

2) внедренные→связанные→встроенные;

3) встроенные→связанные→внедренные;

4) связанные→встроенные→внедренные.

5. Назовите два тега, которые помогают применять встроенные стили к разделам страницы:

1) <div>, <span>;

2) <div>,<style>;

3) <style>, <form>;

4) <form>, <div>.

6. Встроенный стиль определяется непосредственно в теге с использованием атрибута:

1) style;

2) form;

3) span;

4) type.

Элементы фразы в HTML – это

HTML-тег, который определяет структуру сегмента текста внутри более крупного элемента, такого, как абзац

группа букв, которая заменяет слово или несколько слов

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

текст со ссылками

К элементам фраз относятся

strong

font-family

family-style

size

abbr

acronym

Тег форматирования — это

HTML-тег, который описывает внешний вид блока содержимого, но не идентифицирует ни структуру, ни назначение содержимого

HTML-тег, который описывает назначение содержимого

HTML-тег, который отвечает за структуру таблиц

HTML-тег, который отвечает за структуру заголовка веб-страницы

Раздел 4.Текст

Цвета гиперссылок задаются

ключевым словом (напр., red)

специальным тегом

цифрами в шестнадцатеричном коде

цвет задать нельзя

Гиперссылки служат для

форматирования стиля текстового элемента

создания форм

перехода пользователей и поисковых роботов с их помощью по ресурсу, а также для перехода на другой ресурс

создания заголовков веб-страницы

Раздел 5. Ссылки

Раздел 2. Вопросы, касающиеся макетов

Раздел 3. Вопросы, касающиеся изображений

 

Ресемплированием называют

 

А) расчет и построение новых точек изображения в процессе изменения размеров на основе существующей картинки.

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

В) алгоритм сжатия данных, основанный на поиске и замене в исходном файле одинаковых последовательностей данных, для их исключения, и уменьшения размера 'архива'.

Г) метод, используемый для хранения полутоновых и полноцветных изображений, позволяющий добиться наивысшей степени сжатия и минимальный размер выходного файла.

3.3. получить текстовую информацию об изображении при отключенной в браузере загрузке изображений позволяет…

 

А) ресемплирование

Б) альтернативный текст

В) Вставка изображения в документ

Г) Рамка вокруг изображения

3.4. Пикселом называется…

 

А) элемент светочувствительной матрицы

Б) элемент объёмного изображения, содержащий значение элемента растра в трёхмерном пространстве

В) понятие, используемое при анализе изображений, которое описывает актуальное пространственное разрешение изображения или объёма.

Г) элемент двумерного цифрового изображения в растровой графике, или [физический] элемент матрицы дисплеев, формирующих изображение.

3.5. Параметр, служащий для добавления рамки вокруг изображения:

 

А) border

Б) hspace

В) width

Г) align

 

Раздел 4. Текст

А, 2 – в, 3 – г, 5 - б

Раздел 5. Ссылки

Раздел 6. Формы

Вопрос 6. Работа с метками

6.1. Меткой в форме называют…

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

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

В) фрагмент текста, который описывает то, что посетитель должен вводить в соответствующем поле.

Г) фрагмент текста

6.2. разметка показывате точные взаимосвязи элементов на форме с помощью тега…

А) Label

Б) Entertainment

В) Business

Г) checkbox

6.3. Использование одинаковых IDдля каждого элемента на странице…

А)удобно

Б)необходимо

В)не нужно

Г)нет верного ответа

6.4. способ, позволяющий сообщить браузеру о связывании метки с ее элементом управления явлеется использование следующих тегов…

А)< Business><input>

Б)< checkbox><input>

В)< Entertainment> <input>

Г)< lamber> <input>

6.5.чтобы создать связь между элементами, необходимо использовать вместо вложения пару следующую атрибутов…

А)id/ for

Б) id/value

В) for/Humor

Г) id/ input

 

Раздел 2. Вопросы, касающиеся макетов

Тема 4. Создание текучих макетов при помощи таблиц