Начало работы в Dreamweaver
Запустите редактор Dreamweaver MX. Рассмотрим 3 режима работы:
1.
Переключитесь в режим Html-кода,
щелкнув по кнопке
Code.
Затем переключитесь в режим Кода
и дизайна,
щелкнув по
Split;
затем - в режим Дизайн,
щелкнув по
Design.
В режим Кода и дизайна можно перейти и другим способом: нажмите в меню Вид /Код и дизайн (View /Code and Design).
2. Посмотрите на html-код пустой страницы. Между тэгами <title></title> вместо Untitled Document напишите: <title>Моя страница </title>. Чтоб произошло обновление, нажмите на клавиатуре F5.
Смотрите – вверху, в окне Заголовок (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+пробел. В режиме кода на этом месте появится метка   (означает неразрывный пробел).
Атрибуты тегов (уточняют действие тегов)
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"
Ответьте: что делают эти атрибуты?