Download
1 / 17
170 likes | 397 Views
Создание и дизайн сайтов. Краткая аннотация: Урок рассчитан для 11-го класса. Предполагается предварительное ознакомление с программой Adobe Dreamweaver. Мини опрос:. Что такое сайт ? Что такое контент ? Что такое движок сайта? Что представляет из себя хостинг ?. Правильные ответы:.
E N D
Создание и дизайн сайтов Краткая аннотация: Урок рассчитан для 11-го класса. Предполагается предварительное ознакомление с программой Adobe Dreamweaver
Мини опрос: Что такое сайт? Что такое контент? Что такое движок сайта? Что представляет из себя хостинг?
Правильные ответы: Сайт – это совокупность взаимосвязанных документов Контент – это содержание сайта Движок – это программа, позволяющая изменять контент и оформление сайта Хостинг– это предоставление места под сайт
определения Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <> CSS (англ. CascadingStyleSheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. JAVAScript- язык программирования, основанный на объектном представлении браузера. Adobe Dreamweaver в пер. «ткач мечты», «мечтаплёт» или «плетельщик мечты») — HTML-редактор.
Способы создания Ручной (самописный) – этот способ использовался профессионалами и сегодня практически утратил свою актуальность. Онлайновый– этот способ используется для создания простых сайтов из готовых шаблонов. Программный – этот способ используется для создания дизайнерских изысков и сложных сайтов.
Ручной (самописный) способ ПЛЮСЫ: свободное владение языком программирования <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> </head> <body> // тут может быть что угодно </body> </html> возможность свободного изменения свойств страницы отсутствие лишнего ненужного кода МИНУСЫ: не удобность позиционирования большая вероятность наличия ошибок отсутствие парсинга отсутствие подсветки кода долгое время создания и многое другое…
Основные элементы страницы <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> </head> <body> // тут может быть что угодно </body> </html> ДОКтайп заголовок Теги обработки Тело страницы КОНТЕНТ СТРАНИЦЫ ЗАКРЫВАЮЩИЙ ТЕГ СТРАНИЦЫ
онлайновый Существует множество различных хостингов предоставляющих как место под уже готовые сайты, так и имеют свои собственные структуры шаблонов для создания сайта. Рассмотрим пример создания сайта на web сервисе http://www.UCOZ.ru
Создание сайта онлайн 1. Нажимаем кнопку создать сайт 2 1 2. Заполняем все поля Шаг 1-2
Создание сайта онлайн 3. Подтверждаем регистрацию через e-mail 3 4 4. Заполняем колонку администратора Шаг 3-4
Создание сайта онлайн 5. Указываем домен сайта 5 6 7 6. Сайт успешно создан 7. Панель управления дизайном сайта Шаг 5-7
программный Далее рассмотрим создание каркаса сайта с помощью программы ADOBE DREAMWEAVER, а также привязку CSS для формирования стиля
Программное создание сайта Тип документа Дизайн документа Версия кода, тип css 4. Заполняем колонку администратора 1. Создаем новый документ из шаблона пустой страницы – выбираем все пункты и нажимаем создать Шаг 1
Программное создание сайта Шапка сайта контент правая колонка Подвал сайта Левая колонка После нажатия кнопки создать у Вас появится такое окно и есть созданный нами сайт с его основными структурными частями Шаг 2
Программное создание сайта Редактирование кода Просмотр в браузере Визуальное редактирование Шаг 3
