Практическая работа №1.

Microsoft Expression Web 2.0
Практическая работа №1.
Создание сайта «Группа Э-36» на основе шаблона
Опытному пользователю не составит труда создать сайт с чистого листа.
Перед нами стоит задача использовать в качестве отправной точки создания
сайта готовый шаблон, в который можно добавить новые разделы, изменить
уже существующие.
Любой сайт содержит несколько типичных заголовков: Главная, Контакты,
Наши работы и т.д. Мы не будем изобретать велосипед и используем всеми
узнаваемые заголовки (их названия оставим на английском языке).
Шаг 1. Создадим сайт на основе шаблона: выберите пункт меню File > New >
Web Site (Файл > Новый > Сайт). В окне New выберите группу Templates
(Шаблоны) в левой колонке, в правой колонке выберите название шаблона
Personal 7 (рис. 1). Обязательно укажите место сохранения вашего сайта в
своей папке, для этого нажмите кнопку Browse и в проводнике найдите свою
папку.
Рис. 1. Создание сайта на основе шаблона
Шаг 2. На созданном нами шаблоне изменим содержание страниц сайта, вместо
Resume добавим две новые страницы News (новости) и Our works (наши
работы). Для этого необходимо открыть страницу master.dwt, включите
комбинированный режим отображения страницы (split) (рис. 2). На странице
master.dwt можно изменить навигационную панель сайта, что невозможно
сделать на других страницах.
Microsoft Expression Web 2.0
Рис. 2. Страница сайта master.dwt
Для добавления двух страниц пропишем HTML тэги, в которых указывается
название 2 новых страниц и место их содержания в папке Resume. Вставьте
следующий код:
<li><a href="resume/news.htm">News</a></li>
<li><a href="resume/our works.htm">Our Works</a></li>
Не забудьте удалить страницу resume из HTML кода (рис.3):
Рис. 3. Добавление 2 новых страниц в папку Resume
Сохраните изменения в вашем сайте File>Save. Программа Expression Web
по созданному вами коду автоматически добавит новые вкладки навигационной
панели. Проверьте содержание папки Resume в структуре сайта.
Добавьте страницу news.htm, our works.htm. Для этого щёлкните правой
клавишей на страницу resume.htm, выберите команду copy (копировать), затем
правой клавишей paste (вставить), переименуйте страницу с помощью команды
Rename. Удалите исходную страницу resume командой Delete (рис.4).
Microsoft Expression Web 2.0
Рис. 4. Добавление и удаление страниц сайта
Шаг 3. Сохраните все изменения командой File>Save All. Просмотрите вашу
страницу в браузере, нажав клавишу F12. Обратите, что страницы News и Our
works идентичны, проверьте работоспособность гиперссылок сайта.
Мы изменили верхнее навигационное меню, осталось ещё изменить
нижнее, поставьте курсор на ссылку resume страницы master.dwt, в коде HTML
вместо ссылки resume вставьте код:
|
<a
href="resume/news.htm">News</a>
works.htm">Our Works</a> |
|
<a
href="resume/our
Изменим заголовок на странице master.dwt, вместо My Website введем
название Group Э-36, в качестве подзаголовка можно записать «Последняя
выпускная группа операторов». Измените цвет текста, используя панель
инструментов (рис. 5).
В результате заголовок сайта будет отображаться при открытии любой из
страниц в браузере.
Microsoft Expression Web 2.0
Рис. 5. Изменение названия сайта
Сохраните изменения File>Save All. Просмотрите страницу default.htm в
браузере.
Шаг 4. Откройте страницу default.htm (эта страница является главной или
домашней и в браузере обозначается как home). Изменим содержание данной
страницы.
Вместо заголовка Healing2 введите Оператор ЭВМ, удалите текст под
данным заголовком и напишите текст, в котором необходимо ответить на два
вопроса:
1. Что значит для вас профессия оператор ЭВМ?
2. Какие программы изучаются на данной профессии?
Замените картинку на странице. Для этого выделите картинку и выберите
из меню команду Insert ⇒ Picture (Вставка ⇒ Картинка) и укажите путь,
откуда нужно взять картинку (желательно вставить собственную фотографию).
В HTML коде измените размер фотографии, если это необходимо.
Переместите картинку после текста, нажмите Enter, чтобы отделить
картинку от текста, выровняйте её по центру с помощью панели инструментов.
Вместо заголовка Healing4 впишите «Изучение программ», напишите
несколько предложений с рекомендациями по освоению новых программ.
Примените ко всем текстовым областям выравнивание по ширине.
Сохраните изменения File>Save All и просмотрите страницу в браузере
(рис.6).
Microsoft Expression Web 2.0
Рис. 6. Вид домашней страницы в браузере
Примечание:
На странице master.dwt можно изменить расположение подзаголовка
Headline3, разместите его под заголовком Headline2 (рис. 7). При этом это
правило сохранится для всех страниц сайта.
Рис. 7. Изменение структуры размещения подзаголовков сайта
Сохраните изменения и закройте ваш сайт. Если вы снова запустите
программу Expression Web 2.0, то автоматически откроется последний сайт, над
которым вы работали.
Microsoft Expression Web 2.0
Окно импорта сайта: