Практическая работа 1 «Создание алгоритма разработки web-сайта»
|
Скачать 2.33 Mb.
|
|
Министерство образования Республики Башкортостан УФИМСКИЙ ГОСУДАРСТВЕННЫЙ КОЛЛЕДЖ РАДИОЭЛЕКТРОНИКИ
СБОРНИК МЕТОДИЧЕСКИХ УКАЗАНИЙ ДЛЯ СТУДЕНТОВ ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКИХ РАБОТ МЕЖДИСЦИПЛИНАРНЫЙ КУРС «WEB-ТЕХНОЛОГИИ» специальность 230115 «Программирование в компьютерных системах» ДЛЯ СТУДЕНТОВ ОЧНОЙ И ЗАОЧНОЙ ФОРМ ОБУЧЕНИЯ
Уфа 2014 г. СОДЕРЖАНИЕ
ПРЕДИСЛОВИЕ Методические указания для студентов по выполнению практических работ являются частью основной профессиональной образовательной программы Государственного бюджетного образовательного учреждения среднего профессионального образования «Уфимский государственный колледж радиоэлектроники» по специальности СПО 230115 «Программирование в компьютерных системах» в соответствии с требованиями ФГОС СПО третьего поколения. Методические указания для студентов по выполнению практических работ адресованы студентам очной, заочной и заочной с элементами дистанционных технологий форм обучения. Методические указания созданы в помощь для работы на занятиях, подготовки к практическим работам, правильного составления отчетов. Приступая к выполнению практической работы, необходимо внимательно прочитать цель работы, ознакомиться с требованиями к уровню подготовки в соответствии с федеральными государственными стандартами третьего поколения (ФГОС-3), краткими теоретическими сведениями, выполнить задания работы, ответить на контрольные вопросы для закрепления теоретического материала и сделать выводы. Отчет о практической работе необходимо выполнить и сдать в срок, установленный преподавателем. Наличие положительной оценки по практическим работам необходимо для допуска к экзамену, поэтому в случае отсутствия студента на уроке по любой причине или получения неудовлетворительной оценки за практическую необходимо найти время для ее выполнения или пересдачи. Правила выполнения практических работ 1. Студент должен прийти на практическое занятие, подготовленным к выполнению практической работы. 2. После проведения практической работы студент должен представить отчет о проделанной работе. 3. Отчет о проделанной работе следует выполнять в журнале практических работ на листах формата А4 с одной стороны листа. Оценку по практической работе студент получает, если: - студентом работа выполнена в полном объеме; - студент может пояснить выполнение любого этапа работы; - отчет выполнен в соответствии с требованиями к выполнению работы; - студент отвечает на контрольные вопросы на удовлетворительную оценку и выше. Зачет по выполнению практических работ студент получает при условии выполнения всех предусмотренных программой работ после сдачи журнала с отчетами по работам и оценкам. Внимание! Если в процессе подготовки к практическим работам или при решении задач возникают вопросы, разрешить которые самостоятельно не удается, необходимо обратиться к преподавателю для получения разъяснений или указаний в дни проведения дополнительных занятий. Обеспеченность занятия (средства обучения):
Порядок выполнения отчета по практической работе
Практическая работа № 1 «Создание алгоритма разработки web-сайта» Цель работы: ознакомиться с логической и физической структорой сайта, элементами web-страницы, научиться строить логическую и физическую структуру сайта. Образовательные результаты, заявленные во ФГОС третьего поколения: Студент должен уметь: - проектировать web-приложения. знать: - инструменты создания web-приложений. Краткие теоретические и учебно-методические материалы по теме практической работы Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html. Примечание: Такое имя файла рекомендуется присваивать всем стартовым документам сайта, поскольку в противном случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) броузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов. Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется логической структурой сайта. Физическая структура, напротив, подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт. Пример сравнения логической и физической структур одного и того же ресурса Интернета показан на рис. 1.1.  Рисунок - Сравнение логической и физической структуры сайта Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов. Совет: Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием «Images», расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории. Для того чтобы все гиперссылки на вашей домашней страничке или web-сайте работали корректно, все документы открывались правильно, и броузер не выдавал ошибок при обращении к каким-либо разделам ресурса, при создании его физической структуры следует соблюдать несколько простых правил: 1. Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов. 2. При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm, 3.htm и т. д. Для того чтобы облегчить процесс обновления web-страниц, дополнения разделов или создания новых рубрик, заведите средство документирования проекта — любую электронную таблицу, созданную, например, в Microsoft Excel, или просто разграфленную тетрадку, в которую записывайте соответствие элементов физической структуры вашего проекта его логической структуре. До тех пор пока количество составляющих ваш сайт файлов относительно мало, это может показаться излишним, когда же оно перевалит за первые два десятка, в обилии html-документов и графических элементов будет легко запутаться, особенно если вы создаете несколько проектов одновременно. Пример оформления такого средства документирования показан в табл. 1.1. Таблица Пример оформления средства документирования проекта
Становится очевидным, что физическая структура сайта скрыта от посетителей вашего ресурса: они могут наблюдать только логическую структуру, причем именно так, как она представлена при помощи элементов навигации. Отсюда следует вполне логический вывод: строение системы навигации должно если не полностью повторять, то хотя бы максимально соответствовать разработанной вами логической структуре сайта. Элементы web-страницы Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета. Безусловно, ассортимент и количество подобных объектов могут варьироваться в зависимости от тематической направленности сайта, объема опубликованных на нем материалов, а также от целей и задач, которые ставит перед собой создатель данного ресурса. Компоновка таких элементов, проектирование их взаимного расположения и составляет одну из главных задач web-мастера. Первым элементом web-страницы является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сайта, если данный web-ресурс представлен на двух языках. Непосредственно под заголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена — системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность. Основную часть документа занимает так называемое текстовое поле — участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют «контент» (от англ, content — содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа. Следующей обязательной составляющей частью web-страницы являются элементы навигации — гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, например Java-апплетов. Последние представляют собой те же кнопки, которые, в отличие от своих «традиционных» сестер, умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта «нажатия», изменение формы и т. д.). Располагать элементы навигации следует таким образом, чтобы они всегда были «на виду», «под рукой», то есть так, чтобы пользователю не приходилось «отматывать» страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты. Если web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений — небольшой сценарий, вызывающий установленный на сервере CGI-скрипт, который фиксирует каждое открытие документа в броузере пользователей, изменяя значение индикатора счетчика. Благодаря этому web-мастер без труда определит количество посетителей, навестивших его страничку в течение какого-либо времени. На практике часто встречаются web-сайты, в дизайне которых, элементы навигации позиционированы по правой границе экрана. В этом случае текстовое поле смещается налево, остальные компоненты документа располагаются, исходя из принципа максимальной эстетичности их сочетания. Пример такого исполнения сайта показан на рис.  Рисунок - Пример компоновки web-страницы с правым позиционированием элементов навигации Как видно из рисунка, логотип в этом случае помещен на один уровень с заголовком документа, а рекламный баннер позиционирован относительно центра страницы. При таком подходе рекомендуется выдерживать графическое оформление заголовка, логотипа и поля для размещения рекламы в едином цветовом и художественном стиле — тогда несимметричность положения данных объектов будет не столь очевидна и не станет «резать глаз» сторонникам строгой, «табличной» эстетики дизайна. Элементы навигации можно разместить не только вблизи правой и левой границ страницы, но и в верхней части документа. Такой вариант компоновки наиболее подходит, на мой взгляд, при создании домашних страничек: в этом случае все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подготовка самой таблицы значительно упрощается. Единственным недостатком подобного подхода является необходимость продублировать элементы навигации в нижней части документа. Очевидно, что вариантов «смешанной компоновки» web-страницы может быть великое множество: конкретные решения зависят от количества составляющих ресурс разделов, объема подготовленного для размещения на сайте текста и, наконец, от фантазии самого дизайнера. Важно лишь, чтобы внешний вид сайта не вызывал нареканий у посетителей. |
Похожие:
 |
Практическая работа 1 создание первого приложения windows form Цель: получение первичных навыков разработки приложений с использованием Windows Forms |
 |
Реферат Тема: "Создание web сайта, Синтаксис html, Объекты и формы, Создание графики." Ввести читателя в этот мир можно только одним спосо- бом: усадив его за компьютер, подключенный к Сети |
|
Дипломная работа по специальности 230201. 65 «Информационные системы... Разработка информационного web-сайта на основе системы «1с-битрикс: Управление сайтом» |
|
Практическая работа №12 72 Изучение холодильных шкафов 72 Практическая... Ознакомление с оборудованием системы автоматизации ресторанной деятельности (r- keeper) 22 |
|
Практическая работа №1 «Работа с нормативными документами» ... |
|
Описание практической работы №2 создание шаблона сайта Цель работы: изучение и освоение принципов работы с html тегами, их атрибутами и умение создавать базовые элементы web–страницы |
|
Урока 9 класс Тема урока: Понятие и свойства алгоритма «алгоритм», «исполнитель алгоритма»; освоение знаний о свойствах алгоритма; формирование представления о роли алгоритмов в жизни |
|
Практическая работа №1 «Расчет срока окупаемости капитальных вложений... Практическая работа №2 «Задача выбора поставщика и ее решениена основе анализа полной стоимости» |
|
Практическая работа №1 «Технология строительства воздушных линий связи» Практическая работа №9 «Технология ввода кабелей в здание атс. Оборудование шахт» |
|
Практическая работа №1 «Изучение конструкции материнской платы» Практическая работа №5 «Изучение принципа работы и характеристик жидкокристаллических дисплеев» |
|
Практическая работа №1 «Изучение организации бесперебойного питания пк» Практическая работа №3 «Изучение типов современных процессоров и их характеристик» |
|
Практическая работа №1 «Изучение организации бесперебойного питания пк» Практическая работа №3 «Изучение типов современных процессоров и их характеристик» |
|
Практическая работа №1 «Изучение методов конфигурирования сетей доступа» Практическая работа №2 «Изучение методов отбора, подготовки и контроля линии под технологию adsl» |
|
Реферат Создание web-сайта 8в класса в среде «Конструктор школьных сайтов e-publish» Это важно, поскольку интернет-представительство образовательного учреждения не должно быть только личным делом его создателя и предполагает... |
|
«Проектирование и создание веб-сайта для чоу «Спортивная школа Ушу» В работе рассматривается актуальная тема создания «Проектирование и создание веб-сайта чоу «Спортивная школа Ушу». Сформулированы... |
|
Инструкция по установке приложения «Удостоверяющий центр ммвб» Общая... Спиу (бд спиу), к которой web-приложение обращается за информацией по оплате услуг цус ммвб |