Создание статической страницы

Оглавление

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

Этот урок рассказывает как создать и сохранить страницу в Macromedia Dreamweaver MX 2004, потом добавить текст, рисунки и цвета на страницу. Текст основан на уроках компании Macromedia и использует файлы, которые входят в стандартный набор файлов Macromedia Dreamweaver MX 2004.

Открытие и сохранение новой страницы

После настройки сайта вы можете создавать веб-страницы и представлять их путешествующим в сети.

Создать новую страницу можно следующим образом:
1. Используя стартовую страницу Macromedia Dreamweaver.
2. Из меню выбрать File > New.
3. Или просто нажать сочетание клавиш Ctrl+N.

Дальше в этом уроке используется файл layout.html, который входит в набор файлов примеров Macromedia Dreamweaver MX 2004 (находится в папке - Macromedia\Dreamweaver MX 2004\Samples\GettingStarted\1-Design\).

Открыть страницу:
1. Можно используя стартовую страницу Macromedia Dreamweaver.
2. Из меню выбрать File > Open (File > Open Recent - если этот файл недавно открывали).
3. Если настроен сайт (что настойчиво рекомендую) - в панели Files двойным кликом на файле.
3. Или просто нажать сочетание клавиш Ctrl+О.

Откройте страницу layout.html и вы увидите, что страница заполнена заполнителем (placeholder) - текст “Lorem ipsum“, который показывает как примерно будет выглядеть страница если добавить текст.

Сохраните файл с другим названием.

Сохранить страницу:
1. Выберите File > Save As.
2. В диалоговом окне Save As выберите папку 1-Design и в ней сохраните файл с именем index.html.
3. Нажмите Сохранить (Save) для сохранения файла в папке 1-Design. Название файла можно посмотреть в заголовке окна, после слов “Untitled Document.”

Добавление места для рисунка

Сейчас создадим пустое место (placeholder), которое будет показывать где будет вставлен рисунок.

Добавить пустое место для рисунка:
1. Кликните вначале главной текстовой колонки, прямо перед словом “Title,” и нажмите Enter (Windows) или Return (Macintosh) для создания чистой линии перед заголовком. Перейдите курсором на новую чистую линию.

Здесь и будет точка, куда будет вставлен объект.

2. Выберите Insert > Image Objects > Image Placeholder.
3. В диалоговом окне Image Placeholder, введите название (например, SplashImage).

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

4. Еще в диалоговом окне Image Placeholder введите значения ширины (width) и высоты (height). Например, 176х190.
5. Оставьте поля Цвет (Color) и альтернативный текст (Alternate Text) пустыми.

Очень важно использовать альтернативный текст для рисунков, это делает доступной информацию для пользователей, которые используют текстовые браузеры. Если вы оставляете поле Alternate Text пустым, Dreamweaver добавляет атрибут alt="" в тег img.

6. Нажмите OK.
Увидите серый прямоугольник с указанными размерами и названием. Это место на странице для рисунка, которое помогает настраивать дизайн страниц пока нет уже готовых рисунков.

7. Кликните на заголовке “Lorem Ipsum Dolor”. В инспекторе тегов внизу окна документа, выберите тег <h1> и нажмите Backspace (Windows) или Delete (Macintosh).
Текст и тег h1 будет удален.
8. Оставьте курсор в этой строке, повторите шаги с 2 до 6 для вставки другого места для рисунка. Назовите это пустое место - Banner, с размерами 600х41. Позже вставите сюда баннер.
9. Сохраните страницу.

дальше >>

Источник:
Macromedia Dreamweaver для каждого -
статьи, форум, обмен ссылками.

Реклама