Смотрите – вверху, в окне Заголовок (Title) появилось `Моя страница`.

3. Сохраните документ (web-страницу): File/Save под именем index.html Посмотрите, как вверху окон, в 2х местах отобразилось это изменение.

4. Нажмите клавишу F12 (или Файл/Просмотр в браузере), чтобы увидеть, как выглядит ваша страница в Internet Explorer. Она пока пуста, но посмотрите, что отразилось в самом верху, в строке заголовка браузера? Окно браузера не закрывайте, перейдите в Dreamweaver.

II. Принципы языка HTML и работа в режиме html-кода

1. Посмотрите на html-код страницы. Пока страница пуста, между тегами <body>..</body> нет никакой информации.

2. Напишите между <body>..</body> стих (каждую строку с новой строки):

< body> Люблю тебя, Петра творенье,
Люблю твой строгий, стройный вид,
Невы державное теченье,
Береговой его гранит.< /body>

Если в программе некорректно отображаются русские буквы, настройте: внизу, на панели свойств нажмите Page Properties. Откроется окно, где выберите категорию Title \Encoding, в поле Encoding выберите Кириллица KOI8-R.

3. Нажмите F5, чтоб произошло обновление на странице (в режиме дизайна). Хотя вы ввели стих в 4 строки, на web-странице всё будет в 1 строку. Причина – вы не вставляли тег разрыва строк <br>.

4. В режиме кода после каждой строчки добавьте тег <br>, чтоб стало так:

< body> Люблю тебя, Петра творенье, <br>
Люблю твой строгий, стройный вид, <br>
Невы державное теченье, <br>
Береговой его гранит. <br> < /body>

5. Нажмите F5 и посмотрите, что на web-странице, в режиме дизайна стих стал в 4 строки.

6. В режиме кода после стиха (после слова `гранит.` и тэга <br>) введите: Пушкин А.С.

7. Сделаем стих и ФИО автора отдельными абзацами. Вставьте тег абзаца<p>:

< body> </p> Люблю тебя, Петра творенье, <br>
Люблю твой строгий, стройный вид, <br>
Невы державное теченье, <br>
Береговой его гранит. </p>

<p> Пушкин А.С.</p> < /body>

Нажмите F5 (применить), посмотрите на web-странице результат:

тег <p> отделяет абзац (например, Пушкин С.А.) от других отступом.

8. Обрамите фамилию автора тегами <b>: <p><b> Пушкин А.С.</b><p>.
Нажмите F5 (применить). Итак, тэг <b> делает шрифт жирным.

Затем заключите стих в тэги <i>, чтоб получилось:

<p><i> Люблю тебя, Петра творенье, <br>

Люблю твой строгий, стройный вид, <br>

Невы державное теченье, <br>

Береговой его гранит. </i></p>

<p><b> Пушкин А.С. </b></p>

Нажмите F5 (применить). Итак, тэг <i> делает шрифт курсивным.

9. Поставьте лишние пробелы между словами в любой строчке стиха. Например: Люблю тебя, Петра творенье,

Смотрите: в режиме web-страницы (режиме Дизайна) ничего не изменилось

Но если нужны дополнительные пробелы, нажимают одновременноCtrl+Shift+пробел. В режиме кода на этом месте появится метка &nbsp (означает неразрывный пробел).

Атрибуты тегов(уточняют действие тегов)

1. Обрамите слова `Пушкин А.С.` тэгами <marquee>, чтоб получилось:

<marquee><p><b>Пушкин А.С.</b></p></marquee>

Нажмите F5. В окне Dreamweaverизменений не увидите. Сохраните изменения (нажмите Ctrl+S) и посмотрите, как выглядит страница в браузере. Для этого перейдите в браузер Internet Explorer и там нажмите F5. Результат - тэг <marquee> создаёт эффект бегущей строки.

2. После тэга <marquee> поставьте атрибут direction="right" так:

<marquee direction="right"><p><b>Пушкин А.С.</b></p></marquee>

Сохраните изменения (нажмите Ctrl+S). Перейдите в браузер, там нажмите F5 (применить изменения). Результат -атрибут direction="right" поменял бег строки в направлении слева направо.

3. Поэкспериментируйте с атрибутами. Вместо "right"вводите поочередно (и каждый раз сохраняя и смотря результаты в браузере, нажав там F5):

direction="up" direction="down"
behavior="slide" behavior="alternate"

Ответьте: что делают эти атрибуты?

III. Работа в режиме дизайна: форматирование текста

· Форматирование абзацев

· Характеристики шрифта








Дата добавления: 2015-02-23; просмотров: 815;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.005 сек.