Создание веб-сайта
практическая работа
Официальный сайт Kompozer.net
1 часть
1.
Создаем свою папку для
будущего сайта в папке «Сайт» со своим именем
2.
Открываем KompoZer
3.
Меняем фон рабочего
пространства
·
Формат
·
Фон
·
Выбираем цвет фона
4.
Создаем таблицу
·
Таблица
·
Вставить
·
Выбрать три вертикальные
ячейки в левом крайнем ряду
·
Помечаем всю таблицу мышью
·
Таблица
·
Свойства таблицы
·
Установим параметры:
-
Установим пиксели – 700
-
Рамки установить нули
0-0-0
-
ОК
5.
Выровняем таблицу по
центру
·
Таблица
·
Свойства таблицы
-
Выбираем «центр»
-
ОК
6.
Меняем фон в ячейках
таблицы
·
Таблица
·
Цвет фона
·
Выбираем цвета
7.
Вставляем картинку в шапку
сайта
·
Выбираем верхнюю ячейку
·
Вставка
·
Картинка
-
Выбираем папку – источник
«баннеры»
-
Выбираем один из баннеров
-
Открыть
-
В строке «Альтернативный
текст» пишем «шапка»
8.
В среднюю ячейку вписываем
текст с клавиатуры.
«Здравствуйте! Это мой первый сайт»
9.
Форматируем текст, пометив
его мышкой
·
Меняем размер шрифта, его
тип и цвет по вкусу.
·
Выравниваем текст по
центру
·
Переходим на вторую строку
10.
Вставляем картинку
·
Вставка
·
Картинка
-
Выбираем папку «Картинки»
и в ней фото по вкусу
-
Открыть
-
В строке «Альтернативный
текст» пишем «фото»
-
ОК
11.
Подгоняем размер картинки
под размер ячейки таблицы
12.
Выравниваем картинку к
левому краю таблицы
13.
Пишем текст страницы
Привет! Меня зовут …………., добро пожаловать на
мой сайт!
14.
Задаем расстояние между
картинкой и текстом
·
Помечаем картинку и правой
кнопкой мышки вызываем «свойства картинки»
-
Отступ
-
Вписываем слева 10
пикселей.
15.
Поднимаем текст выше
·
Помечаем картинку и правой
кнопкой мышки вызываем «свойства картинки»
-
Положение текста
-
Отступ вверх
-
ОК
16.
Меняем размер, тип и цвет
шрифта текста
17.
Дополняем содержание
текста по своему усмотрению
18.
Вставим пустую строку
после заголовка
19.
Сохраним страницу (Файл-Сохранить как-Мой сайт-ОК-html-Сохранить)
20.
Посмотрим HTML
код, который у нас получился.
2 часть
21.
Сделаем меню навигации
·
Создаем над заголовком две
пустые строки
·
В верхней строке печатаем
Главная | Контакты | О нас (верт. Слэш – на лат.
Возле Бэкспейс)
·
Меняем формат шрифта и
прижимаем меню к правому краю
22.
Сохраняем страничку
23.
Создаем еще 2 странички (Контакты
и О нас)
·
Используем полученный
шаблон и сохраняем его еще 2 раза под именами Kontakt и About us
24.
Открываем страничку Kontakt
·
Заходим в HTML код
и меняем «мой сайт» на «контакты», название вкладки изменится.
25.
Открываем страничку About us
·
Заходим в HTML код
и меняем «мой сайт» на «О нас», название вкладки изменится.
26.
Получится три вкладки с
разными именами
27.
Выделим в меню Главная и
нажимаем Link
·
Выбираем в списке файлов
нашу главную страницу (html)
·
ОК
28.
Повторяем с двумя
оставшимися страницами
29.
Сохранить каждую из
3-х вкладок под старыми именами
30.
Меняем содержимое страницы
«О нас»
·
Заменим заголовок: «На
этой страничке вы узнаете о нашей компании»
·
Удалим старый текст и фото
31.
Меняем содержимое страницы
«Контакты»
·
Заменим заголовок: «На
этой страничке вы можете с нами связаться»
·
Удалим старый текст и фото
32.
Сохраняем каждую
вкладку с новым текстом
33.
Проверяем
работоспособность ссылок в браузере.
34.
Вставим видео с Ютуб
·
Пишем Шевроле
·
Заходим на Ютуб и под
видео автомобиля находим
-
«Сгенерировать HTML-код»
-
Копируем появившийся код в
буфер обмена
-
Под заголовком Шевроле
вставляем мышкой HTML-код
35.
Появится черный
прямоугольник
36.
Сохраняем страницу
и смотрим в браузере
37.
Картинка появилась
38.
Работа окончена
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.