Презентация на тему : "Инструментальные средства создания веб-сайтов"
презентация к уроку по информатике и икт на тему

Слайд 1

Инструментальные средства создания Web -сайтов Кондратьева Ирина Сергеевна, преподаватель информационных дисциплин

Слайд 2

Цель занятия – Познакомиться с инструментами, при помощи которых можно создать веб-сайт. – Рассмотреть этапы создания сайтов. – Рассмотреть виды сайтов.

Слайд 4

Веб-дизайн - интересное, актуальное и востребованное направление развития современных информационных технологий.

Слайд 5

Сайт Сайт (веб-сайт англ. website, от web — паутина, «веб» и site — «место») - это место во всемирной сети (интернете), которое имеет свой адрес, собственного хозяина и состоит из отдельных веб-страниц, которые мы видим как одно целое.

Слайд 6

Web-страница Web-страница является элементарной частью Всемирной Паутины (World Wide Web, www). WWW, в свою очередь, — одна из возможностей компьютерной сети Internet, связывающей компьютеры по всему миру.

Слайд 7

Гиперссылка – фрагмент текста , который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Слайд 8

Каждый сайт имеется свой адрес в сети, который называется иначе унифицированным адресом ресурса ( Uniform Resource Locator , URL ).

Слайд 9

http://www.uni-vologda.ru Домен может быть географическим (ru — Россия, us — США, uk — Великобритания, ger — Германия, ua — Украина и т. п.)

Слайд 10

или тематическими (com — коммерческий сайт, edu — образование, gov — правительство, net — сетевые службы, mil — военное дело и оборона и т. п.).

Слайд 11

Для просмотра web-страниц используются специальные программы, называемые браузерами (web browser). Они позволяют загружать из Сети для просмотра страницы с заданным адресом и переходить от документа к другому по гиперссылкам.

Слайд 12

2 способа: Ручной С использованием конструктора

Слайд 13

HTML — стандартный язык разметки документов во Всемирной паутине WEB- браузер —интерпретатор HTML , отображает язык HTML в удобной для человека форме Понятие языка HTML

Слайд 14

Структура HTML -документа

Слайд 15

Тег ( tag ) – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web - страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.

Слайд 16

Атрибут ( attribute ) – параметр или свойство элемента. Это переменная, которая имеет стандартное имя и которой может присваиваться определённый набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в кавычки, но некоторые броузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

Слайд 17

ПРАВИЛА ЗАПИСИ ТЭГОВ Тэги всегда заключаются в угловые скобки (т.е. ВСЕГДА начинается со знака «меньше» и оканчивается знаком «больше» Например:
(новая строка, непарный тег)

Слайд 18

Программа Kompozer

Слайд 19

На что вы обращаете внимание, впервые оказавшись на какой-либо интернет-странице? Какие элементы оформления наиболее значимы?

Слайд 20

Этапы создания сайта: Анализ и проектирование сайта Информационное наполнение сайта Креатив, или визуальная составляющая сайта Написание кода Тестирование Публикация Раскрутка Поддержка

Слайд 21

Этапы создания сайта: Анализ и проектирование сайта. Анализ аналогичных сайтов с выделением сильных и слабых их сторон. Сайт проектируется исходя из интересов предполагаемой аудитории. Информационное наполнение сайта (контент). Привлекает потенциальных пользователей. Информация должна быть интересна для целевой аудитории и качественно оформлена.

Слайд 22

Этапы создания сайта: Креатив. Включает разработку дизайна, графических элементов, обработку графики и все, что с ней связано. Разработка всегда осуществляется на бумажном носителе, чтобы определить лучший вариант расположения типовых элементов. Т.к. страницы оформляются в едином стиле, то создается шаблон.

Слайд 23

Этапы создания сайта: Тестирование. Проверяется удобство навигации, целостность данных, корректность ссылок и орфография: 1) альфа-версия – ошибки проверяют сами разработчики; 2) бета-версия – проверяют другие люди. Публикация. Сайт размещается в Интернете. Можно воспользоваться бесплатным хостингом www.narod.ru , www.boom.ru , либо разместить сайт у провайдера.

Слайд 24

Этапы создания сайта: Раскрутка. Рекламная компания по узнаванию сайта и повышению его посещаемости – регистрация сайта в поисковых системах, обмен ссылками и.т.д. Поддержка. Постоянное обновление сайта. (не реже 1 раза в 2 недели).

Слайд 25

По уровню персонификации сайты классифицируются: Сайты Корпоративные Персональные

Слайд 27

Пример

Слайд 28

Изменение цвета всех символов в теле документа Для того, чтобы изменить цвет всех символов необходимо в открывающемся теге < body > указать параметр text = “# код цвета ” Например, - означает, что все символы в документе будут синими если цвет в не задавать, то по умолчанию он будет черным

Слайд 29

Изменение цвета фона документа Цвет фона так же устанавливается в тэге Например: - устанавливает чёрный фон

Слайд 30

Изменение цвета отдельных символов Для выделения отдельных символов в тексте можно использовать тег < font > . Например: Добро пожаловать! - окрашивает фразу «Добро пожаловать» в красный цвет.

Слайд 31

Изменение размера шрифта Размер шрифта задаётся в теге < font > следующим образом при помощи параметра size следующим образом: текст текст текст текст текст текст текст

Слайд 32

Изменение начертания шрифта Жирный текст Наклонный текст (курсив) Подчеркнутый текст

Слайд 33

Изменение типа шрифта текст (шрифт Arial)

Слайд 34

Выравнивание абзаца Текст по центру:

текст

Текст по левому краю:

текст

Текст по правому краю:

текст

Слайд 35

Добавление картинки Для добавления картинки на страничку используют тег Рисунок обычно должен иметь расширение .gif, .png, . jpg

Слайд 36

Взаимное расположение текста и картинки Для того, чтобы изменить взаимное расположение текста и картинки на экране используют параметр align

Слайд 37

Картинка слева , а текст справа: < img src =" pr 1. png " align =" left "> Картинка справа , текст слева: Картинка вверху (по умолчанию): < img src =" pr 1. png " align =" bottom "> Текст посередине: Картинка внизу :

Слайд 38

Дополнительные параметры тега < img > < img src =" pr 1. png " alt ="моя фотография"> параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его несколько секунд, то выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет.

Слайд 39

параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки

Слайд 40

параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.

Слайд 41

параметр border - рамка вокруг самой картинки (в пикселях).

Слайд 42

Картинку можно сделать фоном документа . Это необходимо прописывать в открывающем тэге боди: Параметр Background указывает на то, где лежит фоновая картинка. Параметр bgcolor необходиом прописывать на тот случай, если фоновая картинка не загрузится.

Слайд 43

Оформление списков Списки задаются тегом < li > Например:

- закрашенный круг < li type =" circle "> - незакрашеный круг < li type =" square "> - квадрат

Слайд 44

Рисование линии Линии используются при оформлении страницы. Для того, чтобы добавить линию, используют тег

---

, который не требует закрывающегося тега. В результате на экране появиться такая линия:________________________________

Слайд 45

Параметры рисования линии: < Hr align =" right "> ( center или left ) расположение линии по центру, слева или справа

---

ширина линии в процентах/пикселях < Hr size ="6"> толщина линии < Hr NoShade > отмена объемности

---

цвет линии, только в I internet E xplorer

Слайд 46

Создание ссылки текст ссылки

Слайд 47

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