Файл: Методические рекомендации к проведению практических занятий по мдк 08. 01 Проектирование и разработка интерфейсов пользователя для специальности 09. 02. 07 Информационные системы и программирование.docx

1. 
   Студент должен выполнить практическую работу самостоятельно (или в группе, если это предусмотрено заданием).
   
2. 
   Если студент не выполнил практическую работу или часть работы за отведенное время, то он может выполнить работу или оставшуюся часть во внеурочное время, согласованное с преподавателем.
   
3. 
   Каждый студент после окончания урока, должен представить преподавателю выполненную работу в электронном виде с анализом полученных результатов и выводом по работе.
   
4. 
   Дифференцированную оценку по практической работе студент получает, с учетом срока выполнения работы, если:
   

• 
  работа выполнена правильно и в полном объеме;
  
• 
  сделан анализ проделанной работы и вывод по результатам работы;
  
• 
  студент может пояснить выполнение любого этапа работы;
  

1. 
   Трогать разъёмы соединительных кабелей.
   
2. 
   Прислоняться к экрану и тыльной стороне монитора.
   
3. 
   Включать и выключать ЭВМ без разрешения преподавателя.
   
4. 
   Прислоняться к проводам и устройствам заземления.
   
5. 
   При обнаружении запаха гари немедленно остановить работу, выключить клавиатуру и сообщить преподавателю.
   

1. 
   Убедится в отсутствии видимых повреждений рабочего места.
   
2. 
   Запрещается работать во влажной одежде (и вообще в верхней одежде) и с влажными руками.
   
3. 
   На рабочем месте размещать тетрадь и учебные пособия так, чтобы они не мешали работе.
   

1. 
   Работать 60-80 см на расстоянии от ЭВМ.
   
2. 
   Строго выполняйте вышеуказанные правила.
   
3. 
   Следить за исправностью аппаратуры.
   
4. 
   Немедленно прекратить работу при появлении постороннего звука и сообщить преподавателю.
   
5. 
   Работать на клавиатуре чистыми руками, правильно нажимать на клавиши.
   
6. 
   Никогда не пытаться самим устранить неисправность при работе с аппаратурой.
   
7. 
   Не вставать со своих мест, когда входит посетитель.
   

1. 
   Отключить ЭВМ, навести порядок на рабочем месте.
   
2. 
   Сдать рабочее место преподавателю.
   

• 
  Назначение и цели создания сайта
  
• 
  Содержание сайта
  
• 
  Структура сайта
  

• 
  Задание на сайт может быть изменено с учетом конкретных требований.
  
• 
  Задание на сайт предназначено для русскоязычных сайтов, объемом не более 50 html страниц. Если сайт имеет версию на иностранном языке или версию для просмотра на мобильных устройствах, задание на сайт должно быть дополнено соответствующими пунктами.
  
• 
  Веб-дизайнер не несет ответственности за несоответствие сайта эстетическим ожиданиям Заказчика при условии выполнения технического задания на сайт.
  

Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.

Тег 

 относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Также с помощью тега 

 можно выравнивать текст внутри этого контейнера с помощью атрибута align.

,.,

Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.

---

Рисует горизонтальную линию, которая по своему виду зависит от используемых атрибутов. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
Определяет параграф (абзац) текста.
Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов, идущих в коде подряд на веб-странице показывается как один. Тег 
 позволяет обойти эту особенность и отображать текст как требуется разработчику.

Теги логического форматирования текста.



Выделяет в тексте аббревиатуру. Браузерами обычно подчеркивается пунктирной линией.

CSS

Практически ко всем тегам применим атрибут title - всплывающая подсказка, так вот если Вы в тексте выделяете некую аббревиатуру, старайтесь давать к ней расшифровку, используя данный атрибут.



Данный тег выделяет в тексте акроним. Акроним это почти то же самое что и аббревиатура, только образованная из начальных букв, слов или словосочетаний, произносимая как единое слово, а не побуквенно.

Вступай в комсомол !

Так же как и с аббревиатурой для расшифровки текста желательно использовать атрибут title.

Указывает автора документа и его адрес. Обычно отображается курсивом. Предназначен для поисковых систем для сбора информации об авторе его адресе и прочей информации владельца/цев сайта.

Вася Пупкин г. Урюпинск Макаронная фабрика 2010г.

Выделяет в тексте цитату или сноску на другой документ. Обычно браузеры отображают её курсивом.

Как сказал Остап Бендер Лед тронулся! господа присяжные заседатели!



Отмечает текст как некий программный код. Обычно отображается моноширинным шрифтом.

function() - так обозначается функция в PHP



Выделяет удалённый текст в новой версии документа. Выделенный текст станет перечёркнутым.

Напоминает теги физического форматирования  и сокращённый  - перечёркнутый текст.

Использование тега , более предпочтительно, так как помимо того, что он разбавляет текст логикой еще и заменяет собой теги  и , которые помечены спецификацией 4.01 как нежелательные.

Старая цена 1000р. - Новая 999 р.!



Выделяет текст как определение. Как правило, когда в тексте встречается новый термин, авторы выделяют его курсивом и дают его определение, собственно для этого и нужен тег 

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



Выделяет новый текст в новой версии документа. Выделенный текст в большинстве браузеров станет подчёркнутым.

Противоположен по значению тегу  с ним же в паре обычно он и используется.

Старая цена 1000р. - Новая 999 р.!



Выделяет особенно важный фрагмент текста. Обычно отображается курсивом.

Как создать сайт? - узнай на Вебремесло.ру!



От английского keyboard - клавиатура. Указывает текст вводимый с клавиатуры, или для названия клавиш. Обычно отображается моноширинным шрифтом.

Нажмите Ctrl + Z для того чтобы отменить последнее действие.



Выделяет в тексте цитату. В отличие от тега  цитата обозначенная тегом  автоматически берётся браузерами в кавычки.

Как сказал Остап Бендер Лед тронулся! господа присяжные заседатели!



Обозначает текст, который выводится на экран в результате работы какой-либо программы. Обычно браузерами отображается моноширинным шрифтом.

В процессе решения задачи 2+2 программа выдаст ответ: 4



Выделяет особенно важный фрагмент текста. Обычно отображается полужирным.

Как создать сайт? - узнай на Вебремесло.ру!



Выделяет текст, как переменную в работе какой либо программы. Обычно браузерами отображается курсивом.

Данная функция использует переменную $count
Задание №2. Выполните практическое задание.

1 Создайте файл my.html со своими данными: имя, фамилия отчество, группа, специальность. Используйте разные шрифты и выравнивания

2 В файл my.html добавьте три горизонтальных линии после фамилии, имени, отчества. Линии должны иметь разный тип. После этого введите столбиком, изучаемые предметы этой сессии.

3 Измените в своем файле начертание (стиль шрифта) группы, факультета, название предметов

4 Откройте свой файл и преобразуйте список предметов в нумерованный список. Создайте маркированный список своих интересов (хобби), сопроводив его заголовком.

5 Создайте другой файл, назовите его zadan.html. Откройте свой файл и создайте в нем ссылку с именем «задания по лабораторной работе». В файл zadan.html укажите все задания, которые перечислены в данной практической работе.

6 Найдите на компьютере графические файлы и включите их в состав своего файла my.html.

7 Используя разные цветовые гаммы определите цвет фона и цвет каждого шрифта, используемого в документе.

8 Создайте в своем документе расписание занятий на текущую неделю.

Задание №. Ответьте на контрольные вопросы.

1 Как форматировать текст по ширине?

2 Чтобы убрать синюю рамку вокруг картинки-ссылки?

3 Обязательно ли использовать кавычки в значениях атpибyтов?

4 Как вставлять комментарии в HTML?

Вывод. Охарактеризуйте проделанную работу.

Практическое занятие №3.

Тема: «Создание формы на html-странице».

ЦЕЛЬ: 1 Научиться применять шаблоны при разработки web-сайтов. 2 Научиться создавать HTML-документы 3 Научиться связывать HTML-документы в пределах одного web-узла, вставлять рисунки в HTML-документ, создавать и форматировать таблицы 4 Научиться создавать формы, формировать ОК 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11.

Ход занятия:

Задание №1. Изучить теоретический материал.

Формы предназначены для организации взаимодействия с пользователем. Они позволяют вводить текст, осуществлять выбор из предложенных значений при помощи списков или кнопок, организовывать интерактивный обмен информацией между Web-страницей и сервером. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию. Механизм обработки форм представлен на рисунке



Все формы начинаются тэгом 

 и за вершаются

.            Формы нельзя вкладывать одну в другую!!!

Структура формы такова:

  Элементы формы и все остальное....  

 method

Метод посылки сообщений из данной формы. Посылать данные можно двумя способами:

-      GET: Информация из формы добавляется в конец URL. который был указан в описании за   головка формы.

Пример:  http://www.webboard.ru/wb.php?board=I0767

Этот метод рекомендуется для обмена небольшими (до 256 байт) порциями данных, а также для передачи данных в другой HTML-документ, который может с помощью JavaScript их обработать на стороне клиента.

-      POST: Данный метод передает всю информацию о форме немедленно после обращения к  указанному URL. CGI-программа на сервере получает данные формы из стандартного потока  ввода. Данный метод рекомендуется к использованию на стороне сервера.

enctype

Указание типа передаваемой информации. В зависимости от MIME-типа информация будет преоб­разована соответствующим образом.

action

Описывает URL. который будет вызываться для обработки формы. Данный URL почти всегда ука­зывает на CGI-программу, обрабатывающую данную форму. Если данные надо принять по электронной почте, то необходимо ввести точный адрес почтового ящика.

Пример: action = "mailto:xxx@xxx.xx enctype=""text/plain"

Элементы формы

 - ввод элемента формы            Атрибуты тэга

type =            text | radio | submit           -тип поля  name=              myName                     - имя поля (обязательный атрибут!!!)

Типы полей ввода:

TEXT” >: однострочное поле ввода.              Атрибуты тэга

size =                      20       - размер отображаемого поля ввода на экране (20- по умолчанию)  maxlength=            4         - максимальная длина вводимого значения в символах

Пример:   введите имя: 
   введите серийный код: 

: кнопка сброса.                                                                                                     Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию (или очистка формы).

SUBMIT">: кнопка для отправки формы.                                                                                  По щелчку, будет вызываться почтовая программа OutLook и форма отправляется по адресу (URL), указанному в параметре ACTION. Атрибут VALUE может содержать надпись на кнопке.

RADIO"> : одиночный выбор значения из нескольких (радиокнопка).                                Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE = "RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME = VALUE, причем VALUE примет значение атрибутаVALUE того поля ввода, которое будет выбрано. Выбор одного из полей автома тически отменяет выбор всех остальных полей того же имени (атрибут NAME).

Атрибуты тэга

name =            "myName"         - имя возвращаемой переменной  value=          "yes"                     - значение возвращенной переменной (т. е. "yes")  checked                                будет выбрано по умолчанию

Пример:

Эдуард Антон      Олег  CHECKBOX"> : множественный выбор.

Пример:

Эдуард Aнтон    Олег

 

PASSWORD">: одиночный для ввода пароля.  То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране

Атрибуты тэга

size =                      20          - размер отображаемого поля ввода на экране (20- по умолчанию)  maxlength=         4          - максимальная длина вводимого значения в символах

BUTTON">: кнопка.  Простая кнопка. Параметр "value = " задает надпись на кнопке. Используется для вызова программы на JavaScript, например, для проверки данных формы.       FILE">: передача файлов при помощи форм.  В параметрах 

 необходимо указать ENCTYPE = "multipart/form-data".  Внимание! Данная возможность требует поддержки получения файлов Web-сервером.

 - раскрывающийся список  Закрывающийся тэг - обязателен.  Выбор значений из раскрывающегося списка значений, заданных при помощи   Возможен одиночный или множественный выбор.

Атрибуты тэга  size =               "5"      - начальная высота списка  multiple                      - разрешить множественный выбор нескольких значений

Пример:    яблоко   банан    груша    лимон    киви    папайя   

Для множественного выбора используйте select multiple.

 - многострочное текстовое поле.<br><br>+Закрывающийся тэг - обязателен. Пример:  <textarea name="address" rows="5" cols='25"'>                УФА              ул. Р Зорге д. 12/2                                офис 438.    Тел.24-33-74        

Атрибуты тега  name =  "address"- имя поля ввода  rows =  5- высота поля в строках  cols=   25        - ширина поля в символах  wrap =  off | virtual | physical    - неразбивать строки                                                                                    -разбивать при вводе, но передавать как

- одну строку   - разбивал, на строки и передавать так же

Задание №2. Выполнить практическое задание.

Создать web-сайт (Задание выбирается в соответствии с номером списка группового журнала), с применением обязательных элементов.

№	Название сайта (тематика)	Кол-во страниц	Обязательные элементы
1	Личный сайт (страница успеваемости, хобби)	3	Таблица, маркированный список, цвет фона и шрифта, ссылки, форма для отзыва
2	Сайт туристической фирмы	3	Маркированные и нумерованные списки, рисунки, ссылки, форма заказа путевок
3	Сайт Интернет магазина	4	Форма счета, форма анкеты, ссылки, нумерованные списки
4	Сайт библиотеки	3	Таблица, форма заполнения формуляра, ссылки, шрифты, нумерованные списки
5	Сайт новостей	4	Маркированные списки, нумерованные списки, ссылки, форма заполнения рейтинга, цвет текста

Задание №3. Ответьте на контрольные вопросы 

1 Какие цвета вы использовал и при создании web-сайта?

2 Какой вид сайта вы создали?

3 Какие типы графических файлов вы использовали?

Вывод. Охарактеризуйте проделанную работу.

Практическое занятие 4.

Тема: «Форматирование web-страниц с использованием каскадных таблиц стилей».

ЦЕЛЬ: формировать ОК 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11. Уметь форматировать web-страниц с использованием каскадных таблиц стилей.

Ход занятия:

Задание №1. Изучить теоретический материал.

Стиль — это набор правил оформления элемента web-стра­ницы.

Селектор — элемент стиля, в селекторе указаны параметры форматирования (цвет элемента, фоновый цвет, гарнитура шриф­та, размер символов, отступы, стили границ и др).

Типы селекторов: селекторы тегов, классы и идентификаторы.

Синтаксис стиля:

селектор {параметр].: значение;

параметр2: значение]., значение2;

}

При написании стиля можно использовать любой регистр клавиатуры, пробелы необязательны, значение можно помещать в двойные кавычки, значок // обозначает начало комментария.

Расположение стиля.

1. В отдельном файле, если одинаковым стилем оформлены разные страницы. Стили записываются в текстовый файл с рас­ширением CSS (например, mystyle.css):

Пример:

р { color: gold;

background-color: #990000;

}

В коде страницы, на которой используется стиль из этого файла, делают ссылку: Пример:



Стиль применяется, когда используют тег, оформленный данным стилем:



<р>текстр>

<Н1>ЗаголовокН1> Обычный текст


текст р>


TeKCT




ByKBnua



| CcbinKa K/a> I Ссылка 2 I

CcbtnKa 3 I

I CcbinKa 1а> |
class=linkl>CcbmKa 2 |
class=link2>CcbLnKa 3 |

I CcbuiKa 1а> |
+class=linkl>CcbmKa 2 |
class=link2>CcbuiKa 3 |

(в тело) HTML-документа вставлены операторы языка JavaScript.

Пример 1. Вычисление площади треугольника

Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в разделе HTML-документа (листинг 1).

 

Листинг 1. Первый сценарий в документе :








Страница, содержащая сценарий.





Конец формирования страницы, содержащей сценарий


Расписание

занятий на вторник