- 19.10.2016
- 211
- 1
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ САМАРСКОЙ
ОБЛАСТИ
Государственное автономное профессиональное образовательное учреждение
Самарской области
«Поволжский строительно-энергетический колледж им. П. Мачнева»
Методические указания
к практическим работам
краткого курса:
«Web-дизайн: основы языка гиперразметки HTML
и технологий CSS»
Разработчик: преподаватель информатики Загороднева Е.А.
Самара 2016
Оглавление
Практическая работа №1 «Создание HNML-страницы: теги абзацев, заголовков, списков, рисунков»
Практическая работа №2 «Теги ссылок и таблиц»
Практическая работа №3 «Понятие CSS. Подключение таблиц стилей. Селекторы и их свойства»
Практическая работа №4 «CSS и таблицы. Фоновый цвет и изображение»
Практическая работа №5 «Работа с рамками блоков»
Практическая работа №6 «Создание каркаса web-странички на основе float»
В рамках кружка по Web-дизайну студенты изучают курс по основам сайтостроения .
Этот курс посвящён основам языка гиперразметки HTML. Курс по созданию стандартного HTML-сайта будет отличным фундаментом для перехода к более сложным сайтам.
Изучение технологии CSS, без которой сегодня не обходится ни один сайт, позволит стать мастером в создании качественного сайта.
Полученные знания дают возможность сверстать любой макет по принципам блочной верстки веб-страниц, готовых для отображения в любом современном браузере.
Основные задачи программы:
· Познакомить со структурой гиперразметки : блоки html, head, body
· Научить применять основные теги: абзацев, заголовков, списков, рисунков, ссылок и таблиц и т.д.
· Дать понятие CSS технологии.
· Научить подключать таблицы стилей.
· Дать понятие селекторов и их свойств, изучить синтаксис записи стилей
· Изучить основные свойства стилей: цвет, фоновый цвет и изображение, внешние и внутренние отступы, рамки, гарнитура и размер шрифта и т.д
· Дать понятие блоков и рассмотреть его свойство float
· Изучить технологию создания структуры каркаса сайта на основе свойства float
Курс рассчитан на 16 академических часов. Учащиеся в рамках курса должны получить следующие знания и умения:
· Знать возможности редактора Notepad .
· Уметь создавать и сохранять файлы .html и .css
· Уметь открывать файлы .html и .css в режимах редактировании в Notepad и в режиме просмотра
· Знать оcновные теги языка HTML и уметь их использовать
· Знать атрибуты основных тегов и уметь их использовать
· Уметь подключить таблицы стилей
· Знать синтаксис записи стилей
· Уметь создавать стили
· Знать виды структур сайтов уметь работать с блоками
· Знать и уметь использовать технологию создания структуры сайта на основе свойства float
· Знать о возможности подключения таблиц готовых стилей
1. Установить редактор Notepad: установочный файл npp.5.4.2.Installer размещен в папке Notepad++ в сетевой папке ЗаданияНаПреподаватель.
2. Открыть редактор Notepad и настроить кодировку: в строке главного меню выбрать команды Опции®Настройки®Новый документ®UTF без метки BOM
3.
В правом нижнем углу окна в строке состояния должно
быть 
4. Создать и сохранить файл index.html в папку Web, которую создать в своей именной папке
5. Скопировать в свою именную папку файл html_page_template.txt из сетевой папки
6. Открыть файл html_page_template.txt и скопировать каркас HTML-кода в файл index.html
7. Между тегами <body> и </body> напишите любой текст и сохраните изменения в файле index.html
8. Запустите в браузере — по команде Запуск в строке главного меню
9. Скопировать файл аrticle.txt в свою именную папку из сетевой папки
10. Открыть файл и скопировать текст между тегами <body> и </body> - сохранить изменения
11. Запустить в браузере и посмотреть как текст выглядит
12. Оформить все абзацы тегами <p> - в начале и </p> - в конце. Сохранить изменения и запустить в браузере для просмотра
13. Оформить заголовки - теги <h> - в начале и </h> - в конце:
<h1>How To Avoid Wasting Your Most Valuable Online Asset - TIME!</h1>
<h2>Retyping the same old thing time and time again.</h2>
<h3>Failing to manage your email effectively.</h3>
Сохранить изменения и просмотреть в браузере
14. Между тегами <title>и </title> замените фразу «Документ без названия» на «Моя первая HTML страница». Сохраните изменения и просмотрите в браузере
15. Оформить упорядоченный список:
<ol>
<li> Retyping the same old thing time and time again. </li>
<li> Failing to manage your email effectively. </li>
<li> Getting sucked into pointless forum discussions. </li>
<li> Failing to set a goal, before you switch the computer on. </li>
</ol>
Сохранить изменения и просмотреть в браузере
16. Добавте в текст спиок копированием и оформит его как маркерованный список:
<ul>
<li> Retyping the same old thing time and time again. </li>
<li> Failing to manage your email effectively. </li>
<li> Getting sucked into pointless forum discussions. </li>
<li> Failing to set a goal, before you switch the computer on. </li>
</ul>
Сохранить изменения и просмотреть в браузере
17. Добавьте в тег <ul> атрибут type="circle" – получится <ul type="circle"> Сохранить изменения и просмотреть в браузере
18. В папке Web создать папку Images и скопировать в неё файл alarm.jpg из сетевой папки
19. Добавить после первого заголовка рисунок: <img src="Images/alarm.jpg">. Сохранить изменения и просмотреть в браузере
20. Добавить атрибуты к тегу <img> — width="200" height="300" alt= "будильник". ">. Сохранить изменения и просмотреть в браузере
21. Добавить ещё атрибут align="right". Сохранить изменения и просмотреть в браузере
22. В атрибуте src="Images/alarm.jpg" сотрите например расширение в наименовании файла. Сохранить изменения и просмотреть в браузере
Внимание! – После каждого пункта необходимо сохранить изменения и просмотреть их в браузере.
Задание1: Добавление ссылок
23. Откройте файл index.html, созданный в первой работе
24. Добавить в текст гиперссылку. Для этого папке Web надо создать папку Files и скопировать в неё файл time.pdf из сетевой папки, затем в конце статьи добавить:
<a href="Files/time.pdf"> Скачать этот файл в формате pdf </a>
25. Для того чтобы файл открывался в новом окне браузера тегу <a> добавить ещё один атрибут target="blank"
26. Добавить в конце статьи ссылку «Перейти к началу статьи». Для этого необходимо заголовку добавить идентификатор (identifier — опознавател), то есть к тегу <h1> дописать атрибут id="header", затем в конце статьи добавить: <a rel="nofollow ugc" target="_blank" href="#header"> Перейти к началу статьи </a>
Задание2: Создание таблицы
Таблица создается с помощью парного тега:
<table> </table>
Строки таблицы
задаются тегами <tr> </tr>,
а ячейки в строке создаются тегами <th> </th>
для первой строки и для остальных строк
тегами <td> </td>.
Таким образом, таблица 5 строк на 4 столбца с помощью тегов записывается так:
<table>
<tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr>
<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
</table>
1. Добавьте в конце статьи выше описанную структуру из тегов и заполните ячейки – получиться:
<table>
<tr> <th>Дата </th> <th> Продукт</th> <th> Место</th> <th>Стоимость </th> </tr>
<tr> <td>12.12.2011 </td> <td> Кефир</td> <td>Москва </td> <td>30 </td> </tr>
<tr> <td>13.12.2011 </td> <td> Молоко</td> <td>Самара </td> <td> 70</td> </tr>
<tr> <td>14.12.2011 </td> <td>Сок </td> <td>Уфа </td> <td> 80</td> </tr>
<tr> <td>14.12.2011 </td> <td>Йогурт </td> <td>Владимир </td> <td> 30</td> </tr>
</table>
2. Чтобы видеть очертания таблицы тегу <table> надо дописать атрибут border=”1”
3. Объедините две ячейки с одинаковыми датами используя атрибут для тега <td> rowspan, как показано ниже:
<table border=”1”>
<tr> <th>Дата </th> <th> Продукт</th> <th> Место</th> <th>Стоимость </th> </tr>
<tr> <td>12.12.2011 </td> <td> Кефир</td> <td>Москва </td> <td>30 </td> </tr>
<tr> <td>13.12.2011 </td> <td> Молоко</td> <td>Самара </td> <td> 70</td> </tr>
<tr> <td rowspan=”2”>14.12.2011 </td> <td>Сок </td> <td>Уфа </td> <td> 80</td> </tr>
<tr> <td>Йогурт </td> <td>Владимир </td> <td> 30</td> </tr>
</table>
4. Преобразуйте вид записи как показано ниже и просмотрите, изменится ли результат:
<table border=”1”>
<tr>
<th>Дата </th>
<th> Продукт</th>
<th> Место</th>
<th>Стоимость </th>
</tr>
<tr>
<td>12.12.2011 </td>
<td> Кефир</td>
<td>Москва </td>
<td>30 </td>
</tr>
<tr>
<td>13.12.2011 </td>
<td> Молоко</td>
<td>Самара </td>
<td> 70</td>
</tr>
<tr>
<td rowspan=”2”>14.12.2011 </td>
<td>Сок </td>
<td>Уфа </td>
<td> 80</td>
</tr>
<tr>
<td>Йогурт </td>
<td>Владимир </td>
<td> 30</td>
</tr>
</table>
Внимание! – После каждого пункта необходимо сохранить изменения и просмотреть их в браузере.
Задание1: Просмотреть видеоролик «Понятие CSS»
Задание2: Создать файл style.css и подключить его к нашей веб-страничке index.html
1. Создайте в папке Web папку CSS для файлов стилей
2. Откройте файл index.html в редакторе Notepad
3. Файл®Новый;
4. Файл®Сохранить как: укажите путь .. Web \CSS и имя с расширением style.css
5. Перейти в файл index.html и подключить к нему файл style.css: для этого в области head добавляем ещё одну строку <link href=”css/style.css” type=”text/css” rel=”stylesheet”> (здесь атрибут href указывает путь файлу стилей, атрибут type описывает тип подключаемого файла, а атрибут rel означает взаимосвязь )
Задание3: Изучение структуры создания стилей в файле style.css
Стиль состоит из двух частей: селектора и перечня свойств заключенных в фигурные скобки.
Селектор – это выбранный элемент или несколько элементов. Это может быть либо тег, либо имя идентификатора какого-либо тега через #, либо имя класса через точку. Например:
1. Для того чтобы шрифт всех абзацев стал серым в файле style.css необходимо прописать:
p {
color:#808080;
}
2. Для того чтобы только первый заголовок стал красного цвета, в роли селектора используем его идентификатор id=” header ”. Для этого в файле style.css добавьте ещё один стиль:
#header {
color:#FF0000;
}
3. Добавьте в таблицу стилей класс, например, с именем new и задайте элементам этого класса зелёный цвет. Для этого в файле style.css добавьте ещё один стиль:
.new{
color:#00FF00;
}
4. Пропишите в файле index.html в некоторых строчках списков для тега <li> атрибут class=”new” как показано ниже:
<ol>
<li> Retyping the same old thing time and time again. </li>
<li class=”new” > Failing to manage your email effectively. </li>
<li class=”new” > Getting sucked into pointless forum discussions. </li>
<li> Failing to set a goal, before you switch the computer on. </li>
</ol>
<ul>
<li> Retyping the same old thing time and time again. </li>
<li> Failing to manage your email effectively. </li>
<li class=”new” > Getting sucked into pointless forum discussions. </li>
<li> Failing to set a goal, before you switch the computer on. </li>
</ul>
5. В роли селектора можно выбирать несколько элементов. Например, если надо задать серый цвет заголовкам второго и третьего уровня, то можно в первый стиль для абзацев дописать h2 и h3 через запятые:
p {
color:#808080;
}
p, h2, h3{
color:#808080;
}
6. Если надо для абзацев, заголовков, списков, таблиц и т.п. задать, например, шрифт Verdana, то можно задать это свойство для тега <body>, тогда это свойство будет выполняться для всех подчиненных ему тегов:
body {
font-family:Verdana;
}
7. Выделить некоторые фрагменты текста курсивом (italic) и жирным (bold) шрифтом. Для этого в таблицу стилей добавьте стили классов nachertanie1 и nachertanie2
.nachertanie1 {
font-style:italic;
}
.nachertanie2 {
font-weight: bold;
}
8. Пропишите в файле index.html для тега <p> пятого абзаца атрибут class=”nachertanie1” как показано ниже:
<p class=”nachertanie1” >So what are the greatest online time wasters and what can you do to avoid them? </p>
Внимание! Теги div и span не выполняют по большому счету никаких действий и предназначены для выделения элементов сайта: тег div для выделения блочных элементов, а тег span для выделения вложенных элементов
9. Во втором абзаце найдите элемент текста указанный ниже и выделите тегом div и просмотрите результат в браузере:
<div> And thisapplies even more to the online world</div>
10. Затем замените тег div на span и снова просмотрите результат в браузере:
< span > And thisapplies even more to the online world</ span >
11. Пропишите для тега < span атрибут class=”nachertanie2” как показано ниже:
< span class=”nachertanie2”> And thisapplies even more to the online world</ span >
Внимание! – После каждого пункта необходимо сохранить изменения и просмотреть их в браузере.
Задание1: Создать стили для оформления таблицы
6. Откройте файлы index.htm и style.css в редакторе Notepad
7. У тега <table> удалите атрибут border=”1”, так как мы его пропишем в таблице стилей
8. Прописать стиль, задающий таблице и ячейкам границу толщиной 1пиксель светло-серого цвета :
table, td, th {
border:1px solid #cccccc;
}
9. Пропищите стиль для таблицы, определяющий ширину внешние отступы сверху и снизу по 25 пикселей, а справа и слева такие, чтобы таблица выравнивалась по центру
table {
width: 700px; < - - ширина таблицы- - >
margin: 25px auto; < - - внешние отступы сверху и снизу по 25 px и справа и слева авто - - >
}
10. Пропишите стиль задающий ячейкам высоту 50 пикселей:
td, th {
height: 50px;
}
11. Скопируйте из сетевой папки Задания на Преподаватель в папку Web\Images файл tablebg.jpg
12. Пропишите стиль, задающий для первой строки фоновое изображение tablebg.jpg:
th {
background-image: url(../Images/tablebg.jpg);
}
13. Пропишите стиль, задающий для строк класса blue голубой цвет:
.blue {
background-color:#CEEFFF;
}
14. В файле index.html для третьего и пятого тегов <tr> добавьте атрибут class=”blue”
15. Пропишите стиль, задающий для строк класса blue голубой цвет:
. white {
background-color:#FFFFFF;
}
16. В файле index.html для второго и четвертого тегов <tr> добавьте атрибут class=” white”
Задание2: добавить фон веб-страничке.
1. Пропишите стиль, задающий для сайта серый фон
body{
background-color: #C3C3C3;
}
2. Добавьте в этот стиль свойство, задающее для сайта фоновое изображение, предварительно скопировав из сетевой папки в папку Web\Images файл pattern.png
body{
background-color: #C3C3C3;
background-image: url(../Images/pattern.png);
}
Внимание! Фон картинки Будильник непрозрачный - её надо заменить на картинку alarm_pr.png с прозрачным фоном.
Цель: изучение блочной структуры веб-страниц и управления ими с помощью стилей CSS
Задание: Cоздать рамку для блока с первым заголовком и изучить структуру блока.
1. Откройте файлы index.html и style.css
2. Добавьте рамку к первому заголовку, укажите её толщину в пикселях, стиль(сплошная, двойная, пунктирная и т.п.) и цвет (в шестнадцатиричном коде). Для этого в таблице стилей найдите стиль для идентификатора первого заголовка header и добавьте свойство border как показано ниже:
#header {
color: #FF0000;
border: 4px solid #00FFFF;
}
3. Добавьте рамку для блока тега body. Для этого в таблице стилей найдите стиль данного тега и добавьте свойство border как показано ниже:
body{
font-family: Verdana;
background-color: #C3C3C3;
background-image: url(../Images/pattern.png);
border: 2px solid #CCCCCC;
}
Внимание! Каждый тег это блок. Блок занимает всю
доступную ему ширину и имеет структуру, как показано на рисунке:
Рамка(border) имеет три параметра: толщину, стиль и цвет.
Поле (margin) и Отступ (padding) имеют четыре параметра: верх(top), право(right), низ(bottom), лево(left).
4. Для блока тега body сбросим внешнее поле, чтобы между рамкой и краем окна браузера не было зазора. Для этого в таблице стилей найдите стиль данного тега и добавьте свойство margin как показано ниже:
body{
font-family: Verdana;
background-color: #C3C3C3;
background-image: url(../Images/pattern.png);
border: 2px solid #CCCCCC;
margin:0;
}
5. Задайте для рамки блока первого заголовка внутреннй отступ по 40 пикселей сверху, снизу, справа и слева. Для этого в таблице стилей найдите стиль для идентификатора первого заголовка header и добавьте свойство padding как показано ниже:
#header {
color: #FF0000;
border: 4px solid #00FFFF;
padding: 40px;
}
6. По умолчанию блок занимает всю доступную ему ширину, но её можно задать указав ширину, например, в пикселях:
#header {
color: #FF0000;
border: 4px solid #00FFFF;
padding: 40px;
width: 550px;
}
7. Выровнить зaголовок в блоке по центру
#header {
color:#FF0000;
border: 2px solid #FF00FF;
text-align:center;
}
8. Выровнять блок по центру можно задав внешнему полю (margin) значения для left и right значения auto:
#header {
color: #FF0000;
border: 2px solid #FF00FF;
text-align: center;
margin: 20px auto 20px auto;
}
9. Далее заполнить этот блок голубым цветом
#header {
color: #FF0000;
border: 2px solid #FF00FF;
text-align: center;
margin: 20px auto 20px auto;
background-color: #00FFFF;
}
Контрольные вопросы:
· Что означает, что каждый тег это блок?
· Назовите характеристики блока
· По умолчанию блок занимает всю доступную ему ширину. Как можно задать ширину жестко?
· Как выровнять блок с фиксированной шириной по центру?
Цель: изучение свойства float и использование его с с целью разметки каркаса web-странички
Задание1: Знакомство со свойством float
1. Открой те файл index.html и у тега <img > уберите атрибут align="right", после этого картинка станет блочным элементом, то есть будет занимать всю строку и не будет давать тексту обтекать её.
2. Задайте картинке идентификатор, то есть у тега <img > добавьте атрибут id=”myImg” (по этому идентификатору вы будете обращаться к картинке из файла стилей)
3. Откройте файл style.css и создайте эффект обтекания рисунка с помощью таблицы стилей. Для этого используйте свойство float как показано ниже:
# myImg {
float: right;
}
4. Сохраните и просмотрите в браузере: «float» переводится как «плавающий», поэтому картинка прижимается к правому краю, а текст обтекает слева.
5. Добавьте границу для блока с картинкой и для стилей абзацев и заголовков:
p, h2, h3 {
color:#808080;
border: 1px solid #CCCCCC;
}
#header {
color:#ff0000;
border: 1px solid #CCCCCC;
}
6. Добавьте границу для блока с картинкой
# myImg {
float: right;
border: 1px solid #FF0000;
}
7. Просмотрите полученный результат – блок с картинкой расположен поверх остальных блоков, то есть свойство float позволяет разместить блок поверх других блоков, которые поднимаются на его место.
C ВНИМАНИЕ! свойство float используется для блочных элементов создаваемых посредством тегов <div> </div> с целью разметки каркаса web-странички
Задание 2: Выполните разметку web-странички по образцу:
Порядок выполнения:
1. Создайте в именной папке папку Web2 и сохраните в неё новый файл index2.html
2. Скопируйте в него каркас HTML-кода из файла html_page_template.txt
3. Между тегами <title>и </title> замените фразу «Документ без названия» на «Моя структурированная web-страничка».
4.
Между
тегами <body> и </body> напишите:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
5. Затем добавьте каждому блоку div идентификаторы: wrapper («обложка»), header («заголовок»), sidebar («боковая колонка»), content («содержание»), footer («подвал»), и наполните их текстом — как показано ниже:
<div id=” wrapper”>
<div id=”header”> </div>
<div id=”sidebar”> </div>
<div id=”content”> </div>
<div id=”footer”> </div>
</div>
6. Создайте в папке Web2 папку CSS2 для файлов стилей сохраните в неё новый файл стилей style2.css.
7.
Подключите
созданный файл стилей к файлу index2.html. Для этого перейдите в файл index2.html и в области head добавьте ещё одну строку:
<link href=”CSS2/style2.css” type=”text/css” rel=”stylesheet”>
8. Перейдите в файл style2.css и оформите каждый блок цветом:
# wrapper {
background-color:#CCCCCC;
}
# header {
background-color:#FF0000;
}
# sidebar {
background-color:#00FF00;
}
# content {
background-color:#CEEFFF;
}
# footer {
background-color:# EE00EE;
}
9. Если сохранить и просмотреть в браузере, то ничего пока не увидите, так как надо наполнить все блоки div. Заполните каждый блок в файле index2.html, как показано ниже:
<div id=” wrapper”>
<div id=”header”>
<h1>Портретная галерея</h1>
</div>
<div id=”sidebar”>
<ul>
<li> Чарльз Бэббидж</li>
<li> Лавлейс Августа Ада</li>
<li> Билл Гейтс</li>
<li> Касперский Евгений Валентинович</li>
</ul>
</div>
<div id=”content”>
< h3> Чарльз Бэббидж</ h3>
<p> В 1833 создал первую цифровую вычислительную машину — прообраза ЭВМ, которая была механической</p>
< h3> Лавлейс Августа Ада<h3>
<p> Является первым программистом в мире.</p>
< h3> Билл Гейтс</ h3>
<p> Американский предприниматель и разработчик в области электронно-вычислительной техники </p>
< h3> Касперский Евгений Валентинович</ h3>
<p> Один из ведущих мировых специалистов в области защиты от вирусов.</p>
</div>
<div id=”footer”>
< h6> страничка создана 01.01.2013 Ивановым И.И.</ h6>
</div>
</div>
10. В файле style2.css добавьте стили для абзацев и заголовков:
h3 {
font-size:24px;
text-align:center;
}
p {
font-size:16px;
text-align:left;
}
h1 {
text-align:center;
}
11. Для того чтобы зеленый блок (идентификатор sidebar) со списком расположился слева в виде колонки добавим в его стиль свойство float, как показано ниже:
#sidebar {
background-color:#00FF00;
float:left;
}
12. В браузере видно что голубой блок поднялся на место зелёного и текст его обтекает, но зеленый блок расположен поверх голубого. Задайте для голубого блока слева отступ 320 пикселей с помощью свойства margin:
#content {
background-color:#CEEFFF;
margin:auto auto auto 320px ;
}
1. Задайте зелёной и голубой колонкам одинаковую высоту, для этого в соответствующие стили добавьте свойство height:
#sidebar {
background-color:#00FF00;
float:left;
height:1500px;
}
#content {
background-color:#CEEFFF;
margin:auto auto auto 300px ;
height:1500px;
}
Задания для самостоятельной работы:
1. Скопируйте папку ImagesPortpetid в папку Web2 с портретами людей внёсших огромный вклад в развитие информатики и добавьте их портреты на web-страничку.
2. Добавьте к строкам в списке зелёной колонки гиперссылки на соответствующие заголовки в голубой колонке.
Рабочие листы
к вашим урокам
Скачать
6 651 392 материала в базе
Настоящий материал опубликован пользователем Загороднева Елена Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.