Как создать свой сайт? Adobe Dreamweaver

Урок 3. Работа с текстом, списками и таблицами

Цель: ознакомиться с работой заголовков, параграфов и иных элементов текста

Задачи:

• Научиться вводить текст заголовка и параграфа.
• Научиться вставлять текст из другого источника.
• Научиться вставлять маркированные списки.
• Научиться вставлять блоки текста(blockquotes).
• Научиться вставлять и изменять таблицы.
• Научиться использовать подсказки Spry.

В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 3.1):

Рисунок 3.1 - Предварительный просмотр веб-страницы

Импортирование текста

В этом задании мы введем текст заголовка и параграфа, который будет импортирован из текстового документа.

1. Щелкните два раза по файлу Lab3/santorini-start.html на панели Files, чтобы открыть его.

2. Выберите File Save As и сохраните файл как santorini.html. Вы будете работать над этой версией файла, не изменяя исходную версию.

Вы видите новую страницу на сайте Here and Back Travel. Изображения уже вставлены, поэтому теперь вам надо работать с текстом.

3. Дважды щелкните по файлу Text.txt, чтобы от­крыть его.

4. Выберите текст, начинающийся словами «Добро пожаловать в рай!» и заканчивающийся словами «находятся кафе, таверны, аренда зонтов».

5. Скопируйте текст в буфер обмена (Ctrl+C).

6. Найдите и выберите фразу «Вставьте текст» сразу после первого изображения, но перед вторым заголовком (рисунок 3.2).

Рисунок 3.2 - Место для вставки текста

7. Выберите File Paste (Файл Вставить) или нажмите Ctrll+V чтобы вставить в эту область но­вый текст.

8. Вернитесь к файлу Text.txt и скопируйте текст начинающийся словами «Евгений и Мария» и заканчивающийся словами «небольшие таверны у побережья.»

9. Выберите фразу «Вставьте текст» после фотографии здания, но перед заголовком «Рекомендованные отели» (рисунок 3.3).

Рисунок 3.3 - Место для вставки текста

10. Вставьте в эту область текст используя метод из пункта 7.

11. Выберите File => Save.

Создание заголовков,  списков и блоков текста

1. Немного прокрутите страницу вниз и щелкните в любом месте текста «Курорты».

2. Убедитесь, что на панели Properties выбрана вкладка HTML. Выбе­рите Heading 3 в меню Format (Формат) данной панели (риунок 3.4).

Рисунок 3.4 - Меню Format (Формат)

3. Отформатируйте фразу «Пляжи» так же, как и элемент заголовка 3.

Списки - это основопалагающие компоненты Интернета, так как их проще читать по сравнению с блоками насыщенного текста и они помогают пользователям быстро находить ответы. В этом упражнении мы создадим  неупорядоченный (маркированный) список

4. Выберите неполные предложения, которые идут после предложения «ласковом солнце и теплом чистом море» (рисунок 3.5).

Рисунок 3.5 - Пример выделения

5. Выбрав текст, щелкните по кнопке Unordered List (Неупорядоченный список) на панели Properties (рисунок 3.6).

Рисунок 3.6 - Панель Properties

6. Повторите эти действия для всего текста после заголовка «Пляжи» (рисунок 3.7).

Рисунок 3.7 - Результат создания списков

7.  Выберите File => Save.

Блок текста в HTML фактически является блоком цитируемого текста. Давайте переместимся в них к разделу страницы под названием «Что говорят наши клиенты»

8. Установите курсор в любом месте параграфа, который начинается словами «Мы любим Санторини больше…».

9. Щелкните по кнопке блоков текста (Text Indent)(рисунок 3.8) на панели Properties.

Ривунок 3.8 - Кнопка блоков текста

10. Повторите пункт 9 для параграфов, начинающихся со слов «Еда в маленьких бистро…» и «Вся моя семь обожает...».

11. Щелкните по иконке New CSS Rule на панели CSS.

12. Выберите Tag (redefinesanHTMLelement) (Тег переопределяет элемент HTML) во всплывающем меню Selector Туре (Тип селек­тора) диалогового окна NewCSSRule. Введите «blockquote» в поле Selector Name. В качестве альтернативы для выбора блоков текста вы можете использовать всплывающее меню в поле Selector Name. Убедитесь, что во всплывающем меню RuleDefinition будет определен новый стиль mystyles.css. Щелкните по кнопке ОК (рисунок 3.9).

Рисунок 3.9 - Диалоговое окно New CSS Rule

13. Выберите Box в столбце Category открывшегося диалогового окна CSS Rule Definition for blockquote in mystyle.css. Снимите флажок Same for all (Одинаково для всех) в области Padding (Заполнение); введите 4 в полях Right и Left, а во всплывающих меню опций блока выберите для Right и Left единицу px (рисунок 3.10).

Рисунок 3.10 - Диалогове окно CSS Rule Definition (Box)

14. Выберите категорию Border (Граница). Отметьте solid (сплошная) во всплывающем меню раздела Style и thin (тонкая) в разделе Width (Ширина). Щелкните по палитре цветов и выберите темно-голубой цвет #00C. Щелкните по кнопке ОК (рисунок 3.11).

Рисунок 3.11 - Диалогове окно CSS Rule Definition (Border)

15. Выберите File => Save All, чтобы сохранить страницы HTML и CSS.

16. Используйте режим отображения Live или выполните предваритель­ный просмотр в браузере, чтобы увидеть изменения (рисунок 3.12).

Рисунок 3.12 - Предварительный просмотр страницы

Создание таблиц

1. Прокрутите до нижней части страницы, в которой приведен текст «Вставьте таблицу». Удалите текст, но не убирайте оттуда курсор.

2. Щелкните по вкладке Layout на панели Insert, а затем щелкните по иконке Table. Если вы используете панель Insert а не классическую панель, то внешний вид категории Layout будет немного отличаться. Иконка таблицы в обоих случаях выглядит одинаково (рисунок 3.13).

Рисунок 3.13 - Кнопка Table на панели Insert

3. В диалоговом окне Table введите 6 для Rows (Строки) и 3 для Columns (Столбцы). Убедитесь в том. что не заполнили разделы шири­ны, границ, заполнения и интервала.

4. Выберите Тор (Сверху) в разделе Header (Заголовок), чтобы заго­ловки располагались вверху каждого столбца, а в пате Caption (Под­пись) введите «Отели Санторини». Щелкнете по кнопке ОК (рисунок 3.14).

Рисунок 3.14 - Диалоговое окно Table

5. Введите «hotels» в поле Table (рисунок 3.15).

Рисунок 3.15 - Панель Properties

6. Щелкните по первой ячейке верхнего ряда таблицы. Введите «Город».

7. Нажмите  клавишу Tab, чтобы перейти к новой ячейке строки. Введите «Отель».

8. Нажмите Tab еще раз и введите «Рейтинг»

В целях экономим времени вы скопируете и вставите полную таблицу

9. Откройте файл Table.html находящийся в папке Lab3.

10. Щелкните в любом месте таблицы и выберите в селекторе тегов <table#hotels> (рисунок 3.16).

Рисунок 3.16 - Таблица из файла Table.html

11. Скопируйте выделенную таблицу в буфер обмена Control+C.

12. Закройте вкладку table.html и вернитесь на страницу santorini.html.

13. Выберите тег <table#hotels>, чтобы выбрать всю таблицу, а затем на­жмите Delete, чтобы удалить неполную таблицу, которую начали создавать.

14. Выберите Edit => Paste или нажмите Control+V.

15. Выберите File => Save All (рисунок 3.17).

Рисунок 3.17 - Завершенная таблица

Стилизация таблиц посредством CSS

Инструменты CSS программы Dreamweaver позволяют вам представить таблицу различными способами. В этом задании мы создадим правила CSS, чтобы контролировать размер таблицы и добавить границы.

1. Поместите таблицу в нижнюю часть страницы.

2. Щелкните в любом месте таблицы. Затем используйте селектор тегов, чтобы выбрать <table#hotels>.

3. Выбрав таблицу на панели CSS Styles, щелкните по кнопке New CSS Rule.

4. Выберите Tag(Тег) (повторно определяет элемент HTML) во всплывающем меню Selector Туре диалогового окна NewCSSRule Dreamweaver автоматически поместит таблицу в поле Selector Name на основании текущего выбора, сделанного в окне Document. Убеди­тесь, что во всплывающем меню RuleDefinition новое правило будет определено в mystyles.сss. Щелкните по кнопке ОК (рисунок 3.18).

Рисунок 3.18 - Диалоговое окно New CSS Rule

5. Выберите Box в столбце Category Диалогового окна CSS Rule Definition for table in mystyles.css. Введите 475 в поле Width и выберите во всплывающем меню опций блока px. Введите 4 в области Padding поля Тoр, и значение автоматически применится ко всем сторонам окошка (рисунок 3.19).

Рисунок 3.19 - Диалоговое окно CSS Rule Definition (Box)

6. Выберите Border (Граница) в столбце Category. Выберите solid во всплывающем меню области Style, thin в области Width и #00С в области Color. Значения автоматически применятся к Top, Right Bot­tom и Left. Щелкните по кнопке ОК (рисунок 3.20).

Рисунок 3.20 - Диалоговое окно CSS Rule Definition (Border)

7. Выберите File => Save All. Используйте режим отображения Live или браузер, чтобы выполнить предварительный просмотр страницы (рисунок 3.21).

Рисунок 3.21 - Предварительный просмотр страницы

8. Щелкните по кнопке New CSS Rule, чтобы создать новый стиль.

Мы создадим список селекторов в диалоговом окне New CSS Style Rule, где они будут разграничиваться запятыми.

9. Выберите Compound (Компоновка (на основании выделенного фраг­мента)) во всплывающем меню Selector Туре. Удалите все в поле Selector Name и введите «th, td»

10. Убедитесь, что новое правило будет определено в mystyles.css. Щелкните по кнопке ОК (рисунок 3.32).

Рисунок 3.22 - Диалоговое окно New CSS Rule

11. Выберите Border (Граница) в столбце Category диалогового окна CSS Rule Definition for th, td in mystyles.css. Введите те же значения (solid, thin, #00C), которые используются для границ таблицы. Щелкните по кнопке ОК (рисунок 3.23).

Рисунок 3.23 - Диалоговое окно CSS Rule Definition (Border)

Последнее, что вы должны сделать — это удалить интервалы между разграничивающими линиями ячеек таблицы. В диалоговом окне CSS Definition программы Dreamweaver отсутствует свойство, необходимое для этого правила CSS. поэтому вам придется добавить сто вручную, используя панель CSS Styles.

12. Щелкните по вкладке All на панели CSS Styles, а затем выберите в окне All Rules селектор таблиц. Щелкните по кнопке Add Property на панели Properties для окна Table.

13. Введите свойство «border-collapse», нажмите Tab, чтобы перейти к полю значений, и введите «collapse». Нажмите Enter, чтобы подтвердить новое свойство и значение.

14. Выполните File => Save.

Использование виджета Spry Tooltip

В Dreamweaver CS4 имеется виджет Spry Tooltip, который позволяет контролировать размещение и внешний вид подсказки. И HTML подсказка создается посредством использования атрибута наамиия с тегом, например <acronym>. Тем не менее подсказка Spry Dreamweaver CS4 ис­пользует JavaScript и CSS.

1. Выберите в таблице слово Oia под заголовком «Город».

2. Выберите иконку SpryTooltip в категории Spry панели Insert (рисунок 3.24).

Рисунок 3.24 - Категория Spry

3. Если это первая подсказка Spry на вашем сайте, то в диалоговом окне Copy Dependent Files (Копирование зависимых файлов) может появиться уведомление о том, что на ваш сайт будут добавлены два файла. Щелкните по кнопке ОК.

4. Щелкните по обозначению подсказки «Spry Tooltip: sprytooltip1», чтобы выбрать подсказку, - таким образом вы сможете ознакомиться с опциями панели Properties для управления параметрами настройки подсказки (наборы, задержки, эффекты и действия мыши) (рисунок 3.25). На атом этапе ничего менять не надо.

Рисунок 3.25 - Панель Properties

5. Выполните File => Save. Используйте режим отображения Live или браузер, чтобы выполнить предварительный просмотр страницы (рисунок 3.26).

Рисунок 3.26 - Итоговая веб-страница

Ответьте на контрольные вопросы.

1. Как форматировать заголовок Heading 1 или Heading 2?
2. Расскажите о простом способе копирования и вставки содержимого с текстового файла на страницу.
3. В этом уроке вы создали неупорядоченный список. Как создать на этой странице упо­рядоченный список десяти самых важных вещей, которые стоит сделать в Santorini?
4. Как стилизовать заголовок таблицы?
5. Как добавить в таблицу подсказку, где пользователям сообщается, что Fira зачастую пишется как Thera? Что контролирует стиль такой подсказки?

Контрольное задание

1. Подберите материал для своего веб-сайта.
2. Реализуйте третью страницу своего веб-сайта.

Требования к веб-странице:

1. Создать как минимум 1 спиок (нумерованный или маркированный).
2. Создать одну таблицу.
3. Применить стили CSS к таблице (оформить таблицу).
4. Создать как минимум 1 подсказку Spry Tooltip.