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

Содержание

• 
  Слайд 1

  Инструментальные средства создания Web-сайтов

  Кондратьева Ирина Сергеевна, преподаватель информационных дисциплин

• 
  Слайд 2

  Цель занятия

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

• 
  Слайд 3
  
• 
  Слайд 4
  

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

• 
  Слайд 5

  Сайт

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

• 
  Слайд 6

  Web-страница

  Web-страница является элементарной частью Всемирной Паутины (WorldWideWeb, 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 13

• 
  Слайд 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

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

• 
  Слайд 26
  
• 
  Слайд 27

  Пример

• 
  Слайд 28

   Изменение цвета всех символов в теле документа

  Для того, чтобы изменить цвет всех символов необходимо в открывающемся теге

  указать параметр text = “# код цвета” Например, - означает, что все символы в документе будут синими если цвет в не задавать, то по умолчанию он будет черным
• 
  Слайд 29

  Изменение цвета фона документа

  Цвет фона так же устанавливается в тэге

  Например: - устанавливает чёрный фон
• 
  Слайд 30

  Изменение цвета отдельных символов

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

• 
  Слайд 31

  Изменение размера шрифта

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

• 
  Слайд 32

  Изменение начертания шрифта

  Жирный текст Наклонный текст (курсив) Подчеркнутый текст
• 
  Слайд 33

  Изменение типа шрифта

  текст (шрифт Arial)
• 
  Слайд 34

  Выравнивание абзаца

  Текст по центру:

  текст

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

  текст

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

  текст

• 
  Слайд 35

  Добавление картинки

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

• 
  Слайд 36

    Взаимное расположение текста и картинки

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

• 
  Слайд 37
  

   Картинка слева, а текст справа: Картинка справа, текст слева: Картинка вверху (по умолчанию): Текст посередине:    Картинка внизу:

• 
  Слайд 38

   Дополнительные параметры тега

  параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его несколько секунд, то выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет.
• 
  Слайд 39
  параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки
• 
  Слайд 40
  параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.
• 
  Слайд 41
  параметр border - рамка вокруг самой картинки (в пикселях).
• 
  Слайд 42
  

  Картинку можно сделать фоном документа. Это необходимо прописывать в открывающем тэге боди:

  Параметр Background указывает на то, где лежит фоновая картинка. Параметр bgcolor необходиом прописывать на тот случай, если фоновая картинка не загрузится.
• 
  Слайд 43

  Оформление списков

  Списки задаются тегом

Например: - закрашенный круг
• - незакрашеный круг
• - квадрат