Урок на тему: «Современное направление в сайтостроении»




Скачать 154.99 Kb.
НазваниеУрок на тему: «Современное направление в сайтостроении»
Дата27.08.2012
Размер154.99 Kb.
ТипУрок
Открытый урок на тему: «Современное направление в сайтостроении».

Емельянова Зоя Германовна, учитель информатики и ИКТ

Урок «Современное направление в сайтостроении» в 11-м классе является шестым в серии уроков по теме «Моделирование и формализация».

Тип урока: урок изучения нового материала.

Цели урока:

  • знакомство с современными направлениями в сайтостроении; с возможностями ИКТ и применением их на практике;

  • формирование информационных компетентностей, учебно-познавательных и общекультурных компетентностей обучающихся;

  • формирование готовности к саморазвитию.

Задачи урока

  • образовательные

    • знакомство с механизмом добавления в документ структуры и форматирования его средствами внутренней таблицы стилей;

    • знакомство с элементами современной блочной верстки (XHTML) и каскадной таблицы стилей(CSS);

    • обогащение словарного запаса при изучении новых понятий;

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

  • развивающие

    • формирование познавательного интереса, творческой активности обучающихся;

    • формирование картины мира, адекватной современному уровню знаний;

    • развитие умения анализировать, сравнивать, делать выводы.

  • воспитательные –

    • выработка организованности и самостоятельности при выполнении практической работы;

    • формирование культуры отношений в процессе выполнения работы;



Оборудование, программное обеспечение и дидактические материалы:

  1. Компьютерный класс, проектор.

  2. Текстовый редактор Notepad++ (free), браузер IE.

  3. Презентация: «Современные направления в сайтостроении» (Приложение 1).

  4. Практическая работа (Приложение 2)

План урока:

  1. Организационный момент – 2 мин.

  2. Определение целей урока (мотивационное начало занятия)– 2 мин.

  3. Изучение нового материала. – 15 мин.

  4. Выполнение практической работы. – 20 мин.

  5. Подведение итогов урока. Рефлексия. – 5 мин.

  6. Постановка задач на следующий урок. -1 мин.

  7. Постановка домашнего задания. – 1 мин.

Ход урока:

  1. Организационный момент.

Приветствие учащихся.

  1. Определение целей урока.

Осваивая тему «Моделирование и формализация» мы с вами уже создавали и исследовали компьютерные математические модели («Графический метод решения уравнений», «Исследование функции»), физические модели («Движение тела вертикально вверх», «Движение тела под углом к горизонту»), модель по информатике («Калькулятор для перевода чисел в позиционных системах счисления»).

Сегодня я предлагаю создать и исследовать в качестве модели web-страницу, познакомившись с современными направлениями в сайтостроении.


Цели урока выясняются в процессе эвристической беседы:

  • Какие способы создания web-страниц вам известны? (всевозможные конструкторы сайтов, специальные программы: Microsoft Front Page, HTML-редактор Macromedia Dreamweaver; язык HTML);

  • Как расшифровывается HTML (HyperText Markup Language )? (Язык гипертекстовой разметки документов);

  • Его назначение? (Это язык управления программой, предназначенной для просмотра web-документов);

  • Как называются программы для просмотра web-страниц? (браузеры).

  • Что вы слышали о «войне браузеров»? (различные браузеры по-разному отображают web-страницы);

  • Что происходило с вашими web-страницами при изменении размеров, разрешения экрана? (текст «разваливался»);

Итак, есть проблемы. Необходимо решить следующие задачи:

  • Текст не должен «разваливаться» при изменении размеров;

  • Страница должна нормально отображаться разными браузерами.

Сегодня мы познакомимся с их решением.



  1. Изучение нового материала.

В настоящее время эти задачи решены.

1 слайд Вашему вниманию предлагается презентация: «Современные направления сайтостроения» (Приложение 1).

2 слайд. План презентации.

3слайд.

  • Мировым сообществом были признаны технологии, одобренные консорциумом World Wide Web Consortium (W3C), получившие общее название «стандарты Web».

  • В их число входят HTML, XHTML, XML и CSS.

  • Таким образом, современное направление сайтостроения определено как создание сайтов по стандартам W3C.

Но обо всём по порядку.

4 слайд.

  • В конце 1990-х годов Всемирная паутина была диким и опасным фронтиром.

  • Дизайнерам приходилось действовать методом проб и ошибок, «раздвигать границы неизведанного».

5 слайд

  • HTML возник как простой язык для разметки научных статей.

  • Поставщики браузеров и графические дизайнеры, не найдя там средств для верстки, с презрением отвергли его.

  • Правильность структуры игнорировали в угоду визуальному украшению сайта.

  • Microsoft и Netscape нагромождали одно нестандартное решение на другое, стремясь обойти друг друга в знаменитой Войне Браузеров.

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

6 слайд

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

  • Те, кто сохранил работу, быстро поняли, что лишние усилия, затрачиваемые на написание кода для некорректно работающих и нестандартных браузеров, не окупаются.

  • Была создана организация, объединившая широкие массы веб-дизайнеров и получившая название Web Standards Project (или WaSP, www.webstandards.org).

  • Она убеждала основных на тот момент производителей браузеров привести свои сильно отличающиеся программы в соответствие с «Рекомендациями», которые выпускал консорциум W3C.

7 слайд. Зачем же нужны стандарты?

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

  • Все это было учтено в различных рекомендациях, в частности HTML 4.01, XHTML, CSS (каскадных таблицах стилей), названных

8 слайд. Технологии WEB.

  • Эти технологии были с восторгом приняты дизайнерами и программистами, объединившимися в проекте Web Standards Project.

  • Технология CSS попала в самую точку, но вместе с тем это был совершенно новый подход к созданию веб-сайтов. И первые несколько лет ушли на то, чтобы понять, как этой методикой пользоваться.

Давайте разбираться.

9 слайд.

  • HTML и XHTML определяют синтаксис и правила употребления тегов, которые указывают браузеру, как надо отобразить содержимое документа.

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

10 слайд.

  • HTML основан на SGML, стандартном обобщённом языке разметки, который оказался так всеобъемлющ, что у простых смертных не было возможности им пользоваться.

  • HTML игнорирует многие стандарты SGML так, что им легко и удобно пользоваться.

11 слайд.

  • Осознав это, консорциум W3C определил расширяемый язык разметки XML.

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

12 слайд.

  • Т.к HTML версии 4.01 не соответствовал стандарту XML консорциум W3C предложил новый язык разметки XHTML, переработав HTML 4.01 в соответствии с требованиями XML.

13 слайд.

На этой схеме показана эволюция «стандартов web».

14 слайд. Надо помнить, что

  • HTML/XHTML созданы, чтобы структурировать документы, а вовсе не для форматирования их перед отображением.

  • Поэтому так важен сопровождающий стандарт CSS, отвечающий за внешний вид.

15 слайд.

  • Идея была в том, чтобы разделить структуру и оформление web-страниц.

  • Язык XHTML «отвечает» за структуру и содержание, а каскадная таблица стилей (CSS) – за внешний вид web-страниц.

16 слайд.

  • Правильное структурирование документа НТМL (семантика) в том и состоит - выбирать элементы, основываясь на их предназначении, а не на внешнем виде.

  • Т.к. таблицы стилей следует применять к правильному, хорошо семантически структурированному документу.

17 слайд. По большому счёту, создание XHTMLдокумента ничем не отличается от создания HTMLдокумента, нужно лишь придерживаться некоторых правил.

Правила соответствия XHTML–файла стандартам XML:

    • Страница должна начинаться с описания типа документа DOCTYPE.

    • Надо задавать язык и кодировку символов.

    • На каждой странице должен быть элемент с содержательным заголовком. <br /> <li><br /> Теги и их атрибуты должны быть написаны в нижнем регистре. Это же касается <body>. <br /> <li><br /> Для атрибутов тeгов требуются кавычки. <br /> <li><br /> Все теги (даже пустые) должны быть закрыты.<br /> </ul> </ul> <br /> <i>и</i><i> </i><i>некоторые</i><i> </i><i>другие.</i><br /> <br /> <b>18</b><b> </b><b>слайд.</b><br /> <br />Элементы <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">DIV</a> и <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">SPAN</a> вместе с атрибутами <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">id</a> и <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">class</a> обеспечивают общий механизм добавления в документы структуры.<br /> <br /><a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html"><i>DIV</i></a><i> – </i><i>это</i><i> </i><i>блок,</i><i> </i><i>внутри</i><i> </i><i>которого</i><i> </i><i>могут</i><i> </i><i>располагаться</i><i> </i><i>другие</i><i> </i><i>элементы.</i><br /> <br /><b>19</b><b> </b><b>слайд.</b><br /> <br />Эти элементы определяют встраиваемую информацию (<a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">SPAN</a>) или информацию уровня блока (<a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">DIV</a>), но не налагают никаких других выражений для представления контекста.<br /> <br /><i>Если</i><i> </i><i>добавить</i><i> </i><i>к</i><i> </i><i>элементам</i><i> </i><i>идентифицирующие</i><i> </i><i>атрибуты</i><i> </i><i>(</i><i><b>id</b></i><i><b> </b></i><i>и</i><i> </i><i><b>class</b></i><i>),</i><i> </i><i>то</i><i> </i><i>позднее</i><i> </i><i>на</i><i> </i><i>них</i><i> </i><i>можно</i><i> </i><i>будет</i><i> </i><i>сослаться</i><i> </i><i>из</i><i> </i><i>таблицы</i><i> </i><i>стилей</i><i> </i><i>или</i><i> </i><i>из</i><i> </i><i>сценария</i><i> </i><i>на</i><i> </i><i>языке</i><i> </i><i>JavaScript</i><i>.</i><i> </i> <br /> <br /><i>Атрибут</i><i> </i><i><b>class</b></i><i> </i><i>с</i><i> </i><i>одним</i><i> </i><i>и</i><i> </i><i>тем</i><i> </i><i>же</i><i> </i><i>значением</i><i> </i><i>может</i><i> </i><i>встречаться</i><i> </i><i>у</i><i> </i><i>разных</i><i> </i><i>элементов</i><i> </i><i>на</i><i> </i><i>странице,</i><i> </i><i>тогда</i><i> </i><i>как</i><i> </i><i>каждое</i><i> </i><i>значение</i><i> </i><i>атрибута</i><i> </i><i><b>id</b></i><i> </i><i>в</i><i> </i><i>пределах</i><i> </i><i>страницы</i><i> </i><i>должно</i><i> </i><i>быть</i><i> </i><i>уникальным.</i><br /> <br /> <i>Познакомимся теперь с каскадными таблицами стилей.</i><br /> <br /> <b>20</b><b> </b><b>слайд.</b><br /> <ul> <li><br /><u>Стиль</u> – это правило, которое указывает браузеру, как выводить содержимое определённого элемента HTML/XHTML.<br /> <li><br /><u>Таблица стилей </u>– это ряд определённых стилей.<br /> <li><br /><u>CSS</u><u> - Cascading Style Sheets (каскадные таблицы стилей) </u>— это средство, позволяющее задавать различные визуальные свойства HTML-элементам.<br /> <li><br />CSS отличается от XHTML (HTML) тем, что это совершенно другой язык, предназначенный для изменения и улучшения отображения web-страниц.<br /> <li><br />CSS обеспечивает творческую свободу в разметке и дизайне web-страниц.<br /> </ul> <br /><b>21</b><b> </b><b>слайд.</b><br /> <ul> <li><br /> Таблицы стилей определяются в HTML-документе следующими методами:<br /> <ul> <li><br /> связывания (внешняя таблица стилей),<br /> <li><br /> вложения, <br /> <li><br />встраивания.<br /> </ul> </ul> <br /> <i>Мы</i><i> </i><i>будем</i><i> </i><i>использовать</i><i> </i><i>методы</i><i> </i><i>вложения</i><i> </i><i>и</i><i> </i><i>встраивания.</i><br /> <br /> <b>22</b><b> </b><b>слайд</b>. <i>Метод</i><i> </i><i>вложения.</i><br /> <br /> <i>Внутренняя</i><i> </i><i>таблица</i><i> </i><i>стилей</i><i> </i><i>размещается</i><i> </i><i>в</i><i> </i><i>заголовочной</i><i> </i><i>части</i><i> </i><i>отдельной</i><i> </i><i>web</i><i>-страницы</i><i> </i><i>с</i><i> </i><i>помощью</i><i> </i><i>элемента</i><i> </i><i><</i><i><b>style</b></i><i><b>></b></i><i><b>…</b></i><i><b><</b></i><i><b>style</b></i><i><b>/></b></i><br /> <br /> <b>23</b><b> </b><b>слайд</b>.<i> </i><i>Метод</i><i> </i><i>встраивания.</i><br /> <br /> <i>Этот метод используется для определения стиля одного элемента.</i><br /> <br /> <i>Он имеет приоритет в отношении стилей, определённых во внешних и внутренних таблицах. </i> <br /> <br /> <b>24</b><b> </b><b>слайд</b>.<br /> <br /> <i>Посмотрите</i><i> </i><i>на</i><i> </i><i>примеры.</i><br /> <br /> <b>25</b><b> </b><b>слайд.</b><br /> <br /><i>Определенный</i><i> </i><i>стиль</i><i> </i><i>привязывается</i><i> </i><i>к</i><i> </i><i>селектору,</i><i> </i><i>в</i><i> </i><i>роли</i><i> </i><i>которого</i><i> </i><i>может</i><i> </i><i>выступать</i><i> </i><i>тег,</i><i> </i><i>класс</i><i> </i><i>и</i><i> </i><i>идентификатор,</i><i> </i><i>а</i><i> </i><i>в</i><i> </i><i>скобках</i><i> </i><i>указываются</i><i> </i><i>форматирующие</i><i> </i><i>свойства</i><i> </i><i>и</i><i> </i><i>их</i><i> </i><i>значения.</i><br /> <ul> <li><br />Описание стиля, например, для тега абзаца, записывается так:<br /> </ul> <br /> <b>p{color:</b><b> </b><b>red;</b><b> </b><b>font-size:</b><b> </b><b>16px;}</b><br /> <br />p - селектор, {color: red; font-size: 16px;} – блок объявлений,<br /> <br /> свойство значение свойство значение <br /> <br /> <b>26</b><b> </b><b>слайд.</b><br /> <br /><i>С</i><i>тили</i><i> </i><i>можно</i><i> </i><i>разделить</i><i> </i><i>на</i><i> </i><i>группы:</i><i> </i>оформление текстовых элементов, цвета и фона, отступов и рамок и др. <br /> <br /> <b>27</b><b> </b><b>слайд.</b><b> </b><i> </i><i>Подведём</i><i> </i><i>итоги.</i><br /> <ul> <li><br />Современное направление сайтостроения определено как создание сайтов по стандартам W3C.<br /> <li><br />Основное достоинство дизайна на основе CSS состоит в том, что таблицы стилей можно присоединить к имеющемуся хорошо структурированному документу, дабы сделать его визуально привлекательным.<br /> <li><br />Поэтому до составления таблицы стилей необходимо определиться с правильной разметкой (HTML/XHTML) своей веб-страницы. <br /> <li><br />Элементы <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">DIV</a> и <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">SPAN</a> вместе с атрибутами <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">id</a> и <a rel="nofollow" href="mk:@msitstore:d:%5chtml-2009%5chtml4-rus.chm::/struct/global.html">class</a> обеспечивают общий механизм добавления в документы структуры.<br /> <li><br />Таблицы стилей определяются в HTML-документе методами связывания, вложения и встраивания. <br /> <li><br />Определенный стиль привязывается к селектору, в роли которого может выступать тег, класс и идентификатор.<br /> <li><br />Стили можно разделить на группы: оформления текстовых элементов, цвета и фона, отступов и рамок и др.<br /> <li><br />При использовании правильной разметки и стилей изображение web-страницы становится «резиновым». <br /> </ul> <br /><i>Переходим к практической работе.</i><br /> <ol start=4> <li><br /><b>Практическая работа.</b><br /> </ol> <br /><i>Попробуем создать веб-страницу по новым правилам (создаём компьютерную модель, экспериментируем и делаем выводы). По ходу работы попрошу вас делать в тетради элементарные пометки по схеме: структурный элемент, № рисунка, изменения.</i><br /> <br />Учащиеся преимущественно самостоятельно выполняют работу. Учитель выступает в роли наблюдателя-консультанта. Содержание практической работы см. в <u><b>Приложении 2</b></u>.<br /> <ol start=5> <li><br /><b>Подведение итогов урока. Рефлексия.</b><br /> </ol> <br /><i><u><span>Фронтальная беседа</span></u></i><span>: что сегодня узнали на уроке, чему научились.</span><br /> <ol start=6> <li><br /><b>Постановка задач на следующий урок.</b><br /> </ol> <br /><i>На следующем уроке мы продолжим работу по оформлению титульной страницы: научимся создавать и оформлять ссылки.</i><br /> <ol start=7> <li><br /><b>Домашнее задание.</b><br /> </ol> <br /><i>Разработайте эскиз титульной страницы собственного сайта (начинается работа по выполнению индивидуального проекта).</i><br /> <br /> <u><b>Приложение 2.</b></u><br /> <br /><u><b>Практическая работа</b></u><b>:</b><b> </b><b>«Создание </b><b>web</b><b>-страницы с использованием языка современной блочной вёрстки (</b><b>XHTML</b><b>) и внутренней таблицы стилей (</b><b>CSS</b><b>)»</b><br /> <br /><u>Дано</u>: index.html;<br /> <br /><u>Получить</u>: new.html<br /> <br />При выполнении работы используем общий механизм добавления в документ структуры с последующим применением элементов внутренней таблицы стилей.<br /> <br /> <b>Ход работы:</b><br /> <ol> <li><br />Создать папку “<b>site</b>” в папке с вашей фамилией.<br /> <li><br />Скопировать в неё файл <b>index</b><b>.</b><b>html</b> из папки «<b>Компьютер</b>».<br /> <li><br />Удалив ссылки, панель навигации и адресную строку, сохранить файл как <b>new</b><b>.</b><b>html</b>.<br /> <li><br />Открыть с помощью <b>Notepad</b><b>++. </b>Запустить просмотр в браузере <b>IE</b><b>: </b><i><u>рис.1</u></i>.<br /> </ol> <br /> <img src="26577_html_m6d437281.png" name="рисунок 1" align=bottom width=255 height=191 border=0><br /> <ol start=5> <li><br />В заголовочной части web-страницы прописать <b><style type="text/css"></b>, организуя внутреннюю таблицу стилей. Закрыть тэг <b></style></b>.<br /> <li><br /><u>Для всего рабочего поля</u> в браузере создать селектор CSS в созданном style: <br /> </ol> <br /><b>body</b><b>{ margin: 5px 10px 5px 5px; background-color: silver;}.</b><br /> <br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере, нажав кнопку «Обновить»: <i><u>рис.2.</u></i><br /> <br /> <u><img src="26577_html_74696b0b.png" name="рисунок 1" align=bottom width=252 height=189 border=0></u><br /> <ol start=7> <li><br /><u>Для всей </u><u>web</u><u>-страницы </u> <br /> <ol> <li><br />в части “body” разметить структуру c помощью тегов <div>, открывая:<b><</b><b>div</b><b>></b> и закрывая: <b></</b><b>div</b><b>> </b>их<b>;</b><br /> <li><br />присвоить данному элементу структуры идентификатор только для одного элемента: <b>id</b><b>="</b><b>content</b><b>"</b> <br /> <li><br />создать для данного элемента структуры id-селектор:<br /> </ol> </ol> <br /><b>#content{ margin:</b><b> 5px 50px 5px 5px; padding: 5px; background-color: blue;}</b><br /> <ol> <ol start=4> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.3.</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_4fdf6204.png" name="рисунок 1" align=bottom width=245 height=184 border=0></u><br /> <ol start=8> <li><br /><u>Для пробной строчки «Всё о компьютере»</u><br /> <ol> <li><br />в части “body” разметить структуру c помощью тегов <div>, открывая:<b><</b><b>div</b><b>></b> и закрывая: <b></</b><b>div</b><b>> </b>их<b>;</b><br /> <li><br />присвоить данному элементу структуры идентификатор для множества элементов: <b>class</b><b>="size"</b><br /> <li><br />создать для данного элемента структуры селектор класса:<br /> </ol> </ol> <br /><b>.size{color:</b><b> red; font-family: Arial; background-color: silver;}</b><br /> <ol> <ol start=4> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.4.</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_m1d8553b0.png" name="рисунок 4" align=bottom width=254 height=191 border=0></u><br /> <ol start=9> <li><br /><u>Для горизонтальной линии</u><br /> <ol> <li><br />закомментировать в виде hr--><br /> <li><br />создать элемент структуры, присвоив ему идентификатор:<br /> </ol> </ol> <br /><b><div id="line"><img src="white.jpg" width="100%" height="5" hspace="0" vspace="0"></div></b><br /> <ol> <ol start=3> <li><br />создать для данного элемента структуры id-селектор<b>: # </b><b>line</b><b>{</b><b>margin</b><b>: 0</b><b>px</b><b>; </b><b>padding</b><b>: 0</b><b>px</b><b>;</b>}<br /> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.5.</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_m51bc2aeb.png" name="рисунок 10" align=bottom width=253 height=190 border=0></u><br /> <ol start=10> <li><br /><u>Для заголовка </u><u>h1</u><br /> <ol> <li><br />закомментировать в виде <b> </b> <br /> </ol> </ol> <br />элементы <b><</b><b>font</b><b>>… </</b><b>font</b><b>></b> и <u>h</u><u>1</u>: <b><h2>… всё о компьютере</h2></b><br /> <ol> <ol start=2> <li><br />создать для всех заголовков типа селектор<u> </u><u>h</u><u>1</u>:<br /> </ol> </ol> <br /><b>h1{text-align:center;color:green;font:30px tahoma;}</b><br /> <ol> <ol start=3> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>посмотреть отображение в браузере: <i><u>рис.6.</u></i><br /> </ol> </ol> <br /> <img src="26577_html_m4d155234.png" name="рисунок 19" align=bottom width=278 height=209 border=0><br /> <ol start=11> <li><br /><u>Вставить </u><b><hr color="green"/>. </b>Обратить внимание на /.<br /> <ol> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.7.</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_mea7c935.png" name="рисунок 22" align=bottom width=282 height=211 border=0></u><br /> <ol start=12> <li><br /><u>Для заголовков «Всё о компьютере» разных размеров, начиная с </u><u>h</u><u>2</u><br /> <ol> <li><br />создать блочный элемент структуры <b><</b><b>div</b><b>>…..</</b><b>div</b><b>> ;</b><br /> <li><br />присвоить идентификатор <b>class</b><b>="size"</b>, в таблице стилей такой стиль уже есть (для множества элементов);<br /> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.8.</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_mc9b6a53.png" name="рисунок 25" align=bottom width=292 height=219 border=0></u><br /> <ol start=13> <li><br /><u>Для 1 абзаца вместе с рисунком</u><br /> <ol> <li><br />закомментировать в виде <b>--> и --></b><br /> <li><br />внести блочную разметку, присвоив данному элементу идентификатор id=“abz1”: <br /> </ol> </ol> <br /><b><div id=</b><b>”abz1”></b><br /> <br /> <img src=”computer.jpg” align=”right” alt=”компьютер”><br /> <br /> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие<br /> <br /><b></div></b><br /> <ol> <ol start=3> <li><br />во внутренней таблице стилей создать селектор<br /> </ol> </ol> <br /><b>#abz1{text-align:right;background-color:yellow;padding:5px;}</b><br /> <ol> <ol start=4> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.9.</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_m104210cd.png" name="рисунок 37" align=bottom width=287 height=215 border=0></u><br /> <ol start=14> <li><br /><i><u>Для 2 абзаца</u></i><br /> <ol> <li><br />закомментировать в виде <b>--> и --></b><br /> <li><br />внести блочную разметку, присвоив данному элементу идентификатор id=“abz2”: <br /> </ol> </ol> <br /><b><</b><b>div</b><b> </b><b>id</b><b>=”</b><b>abz</b><b>2”></b> <br /> <br /> p align="right">-->Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.p>--><br /> <br /><b></div></b><br /> <ol> <ol start=3> <li><br />во внутренней таблице стилей создать селектор<br /> </ol> </ol> <br /><b>#abz2{text-align:center;background-color:white;color:blue;}</b><br /> <ol> <ol start=4> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.10.</u></i><br /> </ol> </ol> <br /> <img src="26577_html_11d0172a.png" name="рисунок 40" align=bottom width=286 height=214 border=0><br /> <ol start=15> <li><br /><u>Только для текста в первом абзаце </u> <br /> <ol> <li><br />добавить отдельный div и в нем задать стиль <br /> </ol> </ol> <br /><b><div >На этом сайте вы…</</b><b>div</b><b>></b><br /> <ol> <ol start=2> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.11</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_m170fa4e8.png" name="рисунок 43" align=bottom width=264 height=198 border=0></u><br /> <ol start=16> <li><br /><u>Для слова «словарь» во втором абзаце</u><br /> <ol> <li><br />добавить элемент разметки <br /> </ol> </ol> <br /><b><span></b><b>словарь</b><b></b></span><br /> <ol> <ol start=2> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.12</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_42caacd5.png" name="рисунок 46" align=bottom width=277 height=208 border=0></u><br /> <ol start=17> <li><br /><u>Для фразы «компьютерными терминами,»</u><br /> <ol> <li><br />добавить элемент разметки <br /> </ol> </ol> <br /><b><div > компьютерными терминами,</div></b><br /> <ol> <ol start=2> <li><br />сохранить<b> </b><b>new</b><b>.</b><b>html</b><b>, </b>просмотреть отображение в браузере: <i><u>рис.13</u></i><br /> </ol> </ol> <br /> <u><img src="26577_html_m5c8b9fd3.png" name="рисунок 49" align=bottom width=636 height=477 border=0></u><br /> <br /> Итак, мы реализовали проект сегодняшнего урока: внесли структуру на web-страницу, используя элементы языка XHTML и отформатировали полученные фрагменты посредством внутренней таблицы стилей CSS.<br /><br /><br /><b>Библиография.</b><br /> <ul> <li><br />Философия CSS-дизайна/ Дэйв Ши, Молли Е.Хольцшлаг; пер. с англ. А.А. Слинкина. – м.: НТ Пресс, 2005, - 312с,: ил. – (Школа WEB-мастерства) ISBN 5-477-00122-4<br /> <li><br /><u><a rel="nofollow" href="http://www.csszengarden.com/">www.csszengarden.com</a></u> <br /> <li><br />Чак Муссиано, Билл Кеннеди. HTML и XHTML. Подробное руководство. 6-е изд-е. – Пер. с англ. – СПб: Символ Плюс, 2008. – 752 с.; ил., ISBN-10: 5-93286-104-5<br /> <li><br />Лекции С.А. Жданова, к.п.н., проф. кафедры «ИКТ» ГОУ ПАПО.<br /> </ul> </div></div></body>

Похожие:

Урок на тему: «Современное направление в сайтостроении» iconУрок на тему
Муниципальноеобщеобразовательное учреждение «средняя общеобразовательная школа №4» с. Киевка
Урок на тему: «Современное направление в сайтостроении» iconУрок математики в 4 классе по теме «Двойные неравенства»
Данный урок является третьим в теме «Неравенство» и опирается на тему «Решение неравенств». Знакомство с неравенствами имеет важное...
Урок на тему: «Современное направление в сайтостроении» iconИнструкция по прохождению научно-библиографической практики
Выбрать тему или направление исследования дипломной квалификационной работы совместно с научным руководителем
Урок на тему: «Современное направление в сайтостроении» iconУрок. ( Слайд 1 презентации)
План – конспект урока математики в 5 классе с применением здоровьесберегающих технологий на тему
Урок на тему: «Современное направление в сайтостроении» iconУрок географии в 6 классе на тему «Антропогенное воздействие на биосферу»
Муниципальное образовательное учреждение средняя общеобразовательная школа №1 г. Людиново Калужской области
Урок на тему: «Современное направление в сайтостроении» iconУрок по технологии на тему «Вышивка крестом»
Наглядные пособия: образцы вышивки, эскизы, расположение узоров, стилизованные рисунки, отделочные материалы, виды швов
Урок на тему: «Современное направление в сайтостроении» iconУрок-практикум по обж на тему: "Оказание первой медицинской помощи при различных видах повреждений"
Применение теоретических знаний в практической деятельности (умение накладывать повязки, жгут, иммобилизация конечностей)
Урок на тему: «Современное направление в сайтостроении» iconОткрытый аттестационный урок учителя информатики моу «сош №41» г. Чебоксары Цыгановой Е. А. на тему
Эпиграф к уроку: То, что мы знаем – ограничено, а то, что мы не знаем – бесконечно. (П. Лаплас)
Урок на тему: «Современное направление в сайтостроении» iconУрок. Проблемам четкого определения самого понятия «урок»
Урок должен быть эмоциональным, вызывать интерес к учению, воспитывать потребность в знаниях
Урок на тему: «Современное направление в сайтостроении» iconУрок по информатике на тему: "Оператор условного перехода"
Цель урока: Познакомить учащихся с полной и неполной формой условного оператора, показать применение оператора в решении задач
Разместите кнопку на своём сайте:
Руководства



База данных защищена авторским правом ©do.znate.ru 2012
При копировании укажите ссылку
обратиться к администрации
Руководства
Главная страница