ФГАОУ ВПО «Российский государственный профессионально- педагогический университет»

ФГАОУ ВПО «Российский государственный профессионально- педагогический университет» «Интернет-технологии» Екатеринбург 2012

Дисциплина «Интернет-технологии» Цель дисциплины: приобретение знаний и умений по разработке, настройке, поддержке и сопровождению web-сайтов. • Выполнить лабораторный практикум • Выполнить контрольную работу • ЭКЗАМЕН – практическое задание (на заданную тему создать две web-страницы, связанные между собой гиперссылками).

Установка к контрольной работе Контрольная работа включает в себя: • Разработанный web-сайт (электронный вариант). • Пояснительную записку (печатный и электронный варианты). • Все материалы находятся по адресу Учебные материалы/Web-дизайн/Интернет- технологии (Ин. Ис) • В материалы входит лабораторный практикум, метод. указания к КР, требования к экзаменационному практическому заданию.

Требования к экзаменационному практическому заданию На заданную тему создать две web-страницы, взаимосвязанные между собой гиперссылками. • Обе страницы должны быть выполнены методом блочной верстки. Макет должен содержать не менее двух столбцов и двух строк. • Обе страницы должны иметь одну общую таблицу стилей. Каждая web-страница должна включать: • Текст с применением цвета к различным его фрагментам. Текст должен быть структурирован, т. е. иметь заголовки и подзаголовки. • Миниатюры изображений, при щелчке по каждой из которых большое изображение будет загружаться в новое окно (или в новую вкладку)

Рейтинговая система (три задания) 1. Создать сложную таблицу 2. Создать сложную фреймовую структуру 3. Создать композицию web-страницы методом блочной верстки 4. Создать web-страницу методом блочной верстки с наполнением контентом Каждое задание оценивается в 10 баллов, по сумме баллов предусматривается «автомат» : • отлично (34 -40 баллов – 86%-100%), • хорошо (28 -33 балла) – 71%-85%), • удовлетворительно (22 -27 баллов) – 55%-70%).

Основные понятия web-дизайна

Технологии создания web-сайта

Статические сайты и web-страницы – это сайты, сделанные по классической технологии HTML (+CSS). Такие сайты находятся на сервере в неизменном виде.

Достоинства • простота создания; • нетребовательность к аппаратным ресурсам. Не требуют поддержки скриптов и баз данных и могут быть размещены на абсолютно любом хостинге; • не создают почти никакой нагрузки на сервер; • могут включать в себя графику, анимацию и информацию, которая не должна часто и существенно изменяться. Недостаток - отсутствие интерактивности.

Динамические сайты и Web-страницы. Не существуют в неизменном виде на сервере, а формируются при помощи скриптов. Содержание и вид динамической страницы с одним и тем же адресом может быть совершенно различным в зависимости от разных условий – например, в зависимости от введенного пользователем запроса и т. п.

Достоинство - интерактивность: • ввод запросов; • поиск по сайту; • отправка на сайт и сохранение своей информации; • общение с другими пользователями (гостевые книги, форумы) и др.

Недостатки • требуют поддержку дополнительных технологий; • создают повышенную нагрузку на сервер; • их сложнее оптимизировать; • использование скриптов означает потенциальную угрозу для безопасности.

Правила при создании физической (файловой) структуры сайта: 1. Имена директорий, документов HTML и графических файлов должны быть латинскими буквами и только в строчном регистре. 2. Рекомендуется, чтобы имена файлов и директорий не превышали восемь символов. 3. Имена должны быть «смысловыми» , чтобы легче ориентироваться в содержании страниц. 4. Файл, который запускает сайт должен называться index. html (index. htm). Именно это имя ищет серверная машина при открытии сайта.

Простая Web-страница создается в текстовом редакторе (Notepad++ или др. ) как текстовый документ и сохраняется с расширением. html или. htm. Просматривается web-страница в браузере (Opera, Internet Explorer, Google Chrome, Mozilla Firefox и др. ) Web-страницы сайта связаны между собой взаимными гиперссылками.

Инструментальные средства для создания web-сайтов Web-редакторы: - простые: Note. Pad и т. п. ; - WYSIWYG-редакторы (What You See Is What You Get – что видишь, то и получишь): Microsoft Front. Page, Adobe Dreamweaver, Adobe Go. Live. - Графические редакторы: Adobe Photo. Shop, Adobe Image Ready, Adobe Flash, Corel. DRAW и др.

- web-сервер Apache или Denwer; - FTP-клиенты – для загрузки сайта на хостинг (File. Zilla Client, Smart. FTP, Far manager, Total Commander и др. ). Многие web-редакторы имеют встроенный FTP-клиент. - браузеры: Microsoft Internet Explorer, Opera, Mozilla Firefox, Google Chrome и др.

Структура HTML-документа Файлы имеют расширение. htm или. html. Содержат один тип управляющих конструкций - теги (tags) – дескрипторы. Все теги заключены в угловые скобки < >. Обычно теги парные: начальный и конечный теги. Начальный – <> , конечный . Парный тег называют еще контейнерный. Некоторые теги не имеют обязательного парного тега, такой тег называют одиночный.

Структура Текст документа.

Структура HTML-элемента (локальное форматирование) <[имя тега] [имя атрибута 1]=[”значение атрибута 1”] [имя атрибута 2]=[”значение атрибута 2”]. . . [имя атрибута N]=[”значение атрибута N”]> Содержимое под действием тега

Цвет в Web 1. Система шестнадцатеричного кодирования основана на трех компонентах – красном (Red), зеленом (Green) и синем (Blue), - RGB -. от 00 до FF 2. 0 и 255 в десятичной системе счисления 3. По названию цвета Значение любого цвета можно получить из Photo. Shop

Использование справочника по HTML 1. Создать документ с синим цветом фона белым текстом и отступом всех элементов от верхнего края на 30 px

Использование справочника по HTML 2. Создать заголовок второго уровня с выравниванием по левому краю красного цвета шрифтом Verdana Заголовок 2

Теги, не имеющие атрибутов

Рекомендуемый ресурс http: //htmlbook. ru

Вставка изображений Для вставки изображений используется тег . Обязательным для этого тега является атрибут src (от английского Sou. RCe – источник) - определяет путь до графического файла. Таким образом: .

Например: Атрибут alt необходим для того, чтобы при просмотре web-страницы в режиме отключенных изображений, вместо отсутствующей картинки была надпись, которая прописана в атрибуте alt. Также alt-тексты рекомендуется использовать всегда, т. к. поисковые машины анализируют их как ключевые слова при поиске изображений. Графические файлы могут быть в формате jpg, gif, png.

Адресация в HTML Абсолютная адресация не используется Используется относительная адресация Пример 1 Изображение расположено в одной папке (на одном уровне) с HTML-документом folder_1 doc. html pic. jpg

Пример 2 HTML-документ расположен на один уровень выше, чем изображение doc. html folder_1 pic. jpg

Пример 3 HTML-документ расположен на два уровня выше, чем изображение doc. html folder_1 folder_2 pic. jpg

Пример 4 HTML-документ расположен на один уровень ниже, чем изображение pic. jpg folder_1 doc. html

Пример 5 HTML-документ расположен на два уровня ниже, чем изображение pic. jpg folder_1 folder_2 doc. html

Пример 6 folder_1 folder_3 folder_2 folder_4 doc. html pic. jpg

Таблицы стилей CSS – Cascading Style Sheets (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML. Назначение: позволяет автоматически изменить стиль HTML элемента на всех страницах сайта. Например, мы первоначально задали на десяти web- страницах заголовкам H 1 красный цвет. Затем решили изменить его на зеленый. Если H 1 оформить на страницах обычным способом через тег , то нам придется десять раз изменить red на green (т. е. на зеленый). При использовании же таблицы стилей нам придется только один раз это сделать, изменив параметр red на green в самой таблице стилей. Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.