1 / 17

Создание и дизайн сайтов

Создание и дизайн сайтов. Краткая аннотация: Урок рассчитан для 11-го класса. Предполагается предварительное ознакомление с программой Adobe Dreamweaver. Мини опрос:. Что такое сайт ? Что такое контент ? Что такое движок сайта? Что представляет из себя хостинг ?. Правильные ответы:.

melody
Télécharger la présentation

Создание и дизайн сайтов

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Создание и дизайн сайтов Краткая аннотация: Урок рассчитан для 11-го класса. Предполагается предварительное ознакомление с программой Adobe Dreamweaver

  2. Мини опрос: Что такое сайт? Что такое контент? Что такое движок сайта? Что представляет из себя хостинг?

  3. Правильные ответы: Сайт – это совокупность взаимосвязанных документов Контент – это содержание сайта Движок – это программа, позволяющая изменять контент и оформление сайта Хостинг– это предоставление места под сайт

  4. определения Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <> CSS (англ. CascadingStyleSheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. JAVAScript- язык программирования, основанный на объектном представлении браузера. Adobe Dreamweaver в пер. «ткач мечты», «мечтаплёт» или «плетельщик мечты») — HTML-редактор.

  5. Способы создания Ручной (самописный) – этот способ использовался профессионалами и сегодня практически утратил свою актуальность. Онлайновый– этот способ используется для создания простых сайтов из готовых шаблонов. Программный – этот способ используется для создания дизайнерских изысков и сложных сайтов.

  6. Ручной (самописный) способ ПЛЮСЫ: свободное владение языком программирования <!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> возможность свободного изменения свойств страницы отсутствие лишнего ненужного кода МИНУСЫ: не удобность позиционирования большая вероятность наличия ошибок отсутствие парсинга отсутствие подсветки кода долгое время создания и многое другое…

  7. Основные элементы страницы <!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> ДОКтайп заголовок Теги обработки Тело страницы КОНТЕНТ СТРАНИЦЫ ЗАКРЫВАЮЩИЙ ТЕГ СТРАНИЦЫ

  8. онлайновый Существует множество различных хостингов предоставляющих как место под уже готовые сайты, так и имеют свои собственные структуры шаблонов для создания сайта. Рассмотрим пример создания сайта на web сервисе http://www.UCOZ.ru

  9. Создание сайта онлайн 1. Нажимаем кнопку создать сайт 2 1 2. Заполняем все поля Шаг 1-2

  10. Создание сайта онлайн 3. Подтверждаем регистрацию через e-mail 3 4 4. Заполняем колонку администратора Шаг 3-4

  11. Создание сайта онлайн 5. Указываем домен сайта 5 6 7 6. Сайт успешно создан 7. Панель управления дизайном сайта Шаг 5-7

  12. Вид созданного сайта

  13. программный Далее рассмотрим создание каркаса сайта с помощью программы ADOBE DREAMWEAVER, а также привязку CSS для формирования стиля

  14. Программное создание сайта Тип документа Дизайн документа Версия кода, тип css 4. Заполняем колонку администратора 1. Создаем новый документ из шаблона пустой страницы – выбираем все пункты и нажимаем создать Шаг 1

  15. Программное создание сайта Шапка сайта контент правая колонка Подвал сайта Левая колонка После нажатия кнопки создать у Вас появится такое окно и есть созданный нами сайт с его основными структурными частями Шаг 2

  16. Программное создание сайта Редактирование кода Просмотр в браузере Визуальное редактирование Шаг 3

  17. Спасибо за внимание!

More Related