Практическое занятие №6 Макетирование документа с применением таблиц
Цель работы: формирование умений разметки страниц с помощью таблиц
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3
Задание:
Создать веб-сайт для любого учебного заведения используя стандартный макет (рис. 1.)
Главная страница должна содержать не менее 4 блоков. Блоки обязательно должны быть разделены пустыми ячейками размером 3-30 пикселов, бордюры должны быть не видимыми.
Верхняя и нижняя часть должны быть сделаны как отдельные таблицы, чтобы их можно было вставлять и на других страницах.
Примените на свой вкус фоновый цвет ячеек или фоновый рисунок ячеек.
Сделать ссылку на первую страницу.
В исходнике страницы укажите, в виде комментариев, начало каждого блока и какой это блок (правый, левый, второй сверху и т.д.).
Приведите все остальные страницы к общему виду, т.е. верхняя и нижняя часть должны быть одинаковы для всех страниц
Поясняющая информация
Чтобы допускать минимум ошибок, надо воспользоваться чужим опытом. Самый большой опыт разметки страниц накоплен у печатных изданий. Если взять газету, журнал, книгу и т.д., и внимательно посмотреть, то увидим следующие основные элементы:
Используются белый фон и черные буквы.
Поля (справа и слева) и отступы (сверху и снизу).
Абзацы выровнены по обеим сторонам.
Новый абзац начинается с отступом первой строки, между абзацами пробел больше, чем между строк. Так легче визуально выделить абзацы.
Применение "колончатой структуры", особенно заметно в газетах и журналах. Таким образом, можно более эффективно использовать всю большую страницу, размещая маленькие тексты и элементы графики, не оставляя "белых пятен". Также текст в узких колонках можно читать сверху в низ, не перемещая "глаза" справа на лево.
Для представления информации в виде колонок текст и изображения размещают внутри ячеек таблицы. Внутрь ячеек можно вкладывать дополнительные таблицы. Наиболее часто используемая структура приведена ниже (см. рис.1):
О
дно
из распространенных разрешений —
800х600, значит ширину основной таблицы
нужно задавать не более 750, чтобы она
была полностью видна на экране.
Размеры таблицы можно задать в процентном отношении к окну браузера, например 80% (если задать 100%, то часть таблицы не будет видна).
Для ускорения загрузки страницу делают из трех, одинаковых по ширине, таблиц - верхнюю, основную и нижнюю. Это помогает поддерживать общий стиль всего сайта, когда верхняя часть и нижняя повторяется на всех страницах.
Практическое занятие № 7 Рамки, фреймы в html
Цель работы: Приобретение навыков создания фреймов и простого Web-сайта, состоящего из нескольких HTML-документов, и ссылок в определенный фрейм.
КРАТКАЯ ТЕОРИЯ
Фрейм (frame) — рамка, область страницы — позволяет разделять экран на несколько областей, в каждой из которых отображается содержимое отдельной страницы или Web-узла.
Для задания фреймов используется парный тег <Frameset> … </Frameset>, а для их описания — тэг<Frame>.
Для задания расположения и размеров фреймов в тэге <Frameset> используются атрибуты cols(столбцы) и rows (строки).
Для описания содержания каждой области в тэге <Frame> используется атрибут src=имя_страниц.html
Примеры:
a) <Frameset Cols=«30%, 30%, *» > <Frame src= “s1.html” > <Frame src= “s2.html”> <Frame src= “s3.html” > </Frameset> |
делит страницу на 3 вертикальные области, отводя на 1 и 2 по 30%, а на 3 – оставшуюся часть. И размещает в каждой части соответственно s1.html , s2.html и s3.html страницы. |
b) Если в примере а) заменить Cols на Rows=«30%, 30%, *», то страница будет разделена на 3 горизонтальные области, 1 и 2 по 30%, а на 3 – оставшаяся часть. В каждой части соответственно будут размещены s1.html, s2.html и s3.html страницы.
c) <Frameset Cols= «30%, *» >
<Frame src= “s1.html” >
<Frameset Rows= «50%,50%» >
<Frame src= “s2.html” >
<Frame src= “s3.html”>
</Frameset>
</Frameset>
Страница будет разделена на 2 вертикальные области, отводя на 1 – 30%, и оставшуюся часть на вторую. Вторая область в свою очередь разделена на 2 горизонтальные области, по 50% на каждую часть. В каждой части соответственно будут размещены s1.html, s2.html и s3.html страницы.
Пример а) |
|
Пример b) |
|
Пример c) |
Замечание. Разбиение страницы на части можно выполнить так же с помощью тэга <Table> и парного тэга <Iframe></Iframe> (организовывает “плавающий” фрейм), внутри которого можно отобразить какой-либо документ или объект.
Другие атрибуты тэга <Frameset>:
border=n – ширина границы фрейма;
bordercolor=цвет – цвет границы фрейма.
Другие атрибуты тэга <Frame>:
noresize – запрет изменения размера фрейма;
frameborder=yes|no – соответственно оставить границу| убрать границу;
scrolling=yes|no|auto – соответственно полосы прокрутки всегда присутствуют| полос прокруткинет| полосы прокрутки присутствуют при необходимости;
marginwidth=n и marginheight=n – управляют отступом изображения внутри фрейма (n – целое число)
name=имя_фрейма – позволяет задать фрейму имя, которое затем может использоваться, например при создании гиперссылок.
Связь между фреймами.
Для того чтобы страница, вызванная по гиперссылке, открылась в нужном фрейме, необходимо в тэге<A> в атрибуте target указать имя этого фрейма.
Например, если фрейму, отображающему страницу 2 задать имя «nomber2»:
<Frameset cols= «30%, *» >
<Frame src=s1.html >
<Frame src=s2.html name=nomber2>
</Frameset>
a в документе s1.html поместить ссылку:
<A href=s3.html target=nomber2> стр3 </A>
то страница 3 откроется не в первом, а во втором фрейме.
ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:
1 задание. Выполните подготовительную работу: создав 3 страницы, для каждой из которых задайте свой цвет фона, заголовок 1 уровня «Страница №…» и произвольный рисунок, сохраните страницы под именами str1.html, str2.html, str3.html.
2 задание. Создайте страницу, состоящую из 3 равных вертикальных областей. В каждой из которых отобразите соответственно содержимое 1, 2 и 3 страниц. Задайте ширину и цвет границ фреймов по желанию. Сохраните ее под именем vert.html.
3 задание. Измените страницу, заменив вертикальное деление на горизонтальное. Уберите ширину ицвет границ фреймов. В первом фрейме установите запрет на изменение его размера. СохранитеHTML-документ под именем gor.html.
4 задание. Создайте HTML-документ под именем glav.html, состоящий из 2 вертикальных областей (размеры которых относятся, как 1:3).
В левой области должен отображаться HTML-документ c заголовком Оглавление и гиперссылки на 1, 2 и 3 страницы (str1.html, str2.html, str3.html). Гиперссылки, организуйте, таким образом, чтобы страницы 1, 2 и 3 отображались в правой области.
5 задание. Создайте HTML-документ под именем str4.html: задайте заголовок 1 уровня «Страница №…» и определение «Фрейм (frame) — рамка, область страницы — позволяет разделять экран на несколько областей, в каждой из которых отображается содержимое отдельной страницы илиWeb-узла.».
6 задание. Создайте HTML-документ под именем plav.html: задайте свой цвет фона, отцентрированный заголовок 1 уровня «Пример плавающего фрейма» и отцентрированный “плавающий” фрейм (шириной – 30%, высотой – 200 пиксель), отображающий содержимое страницы 4 (str4.html).
7 задание. Создайте HTML-документ под именем ram.html, состоящий из 3 равных вертикальных областей, третью область разделите на две равные горизонтальные области. В каждой из которых отобразите соответственно содержимое 1, 2 , 3 и 4 страниц.
8 задание. Продемонстрируйте преподавателю результаты работы: vert.html, gor.html, oglav.html,glav.html, plav.html, ram.html.
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 8
Работа с формами. Получение информации при помощи форм.
Цель работы: Приобретение навыков отправки данных на web-сайт с использованием форм и создания html-документа с несколькими формами
Задание: Создайте html-документ с несколькими формами в соответствии с рисунком.
ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 9
Карты-изображений.
Цель работы: знакомство с тегами HTML, обеспечивающими работу с мультимедиа объектами, и приобретение навыков их использования.
Коды формируемых профессиональных компетенций: ПК 1.1–1.5, ПК 3.3