Студопедия

КАТЕГОРИИ:

АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Раздел 2. Конструкторская часть.

Отчет по практике

Работа выполнена студентом
Специальности____________
группа___________________
_________________________
(Ф.И.О. студента)

_________________________
(Ф.И.О. руководителя по практике)

Оценка__________________

 

г. Королев 2012г.







Введение

Разработка – простейшая система управления сайтом.

Выбранная тематика сайта – обучение Powermove.

Powermove (силовое движение) – раздел брейкинга– совокупность движений, требующих хорошую физическую подготовку, скорость и выносливость.

Содержание сайта –информации по Powermove, и видео-уроки.

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

 

Содержание

Раздел 1. Теоретическая часть «Технология разработки интернет сайта»

1. 1. Клиент-серверная архитектура.

1. 2. Конфигурация сервера, файл .htaccess.

1. 3. CGI.

1. 4. HTML.

1. 5. PHP.

1. 6. CSS.

Раздел 2. Конструкторская часть.

2. 1. Структура сайта.

2. 2. Папка pages.

2. 3. Файлindex.php.

2. 4. Файл main.css.

Раздел 3. Результат.

 

 


 

 


Раздел 1. Теоретическая часть «Технология разработки интернет сайта»

Клиент-серверная архитектура.

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

Для взаимодействия между клиентом и сервером в интернете используется протокол HTTP (HyperTextTransferPrоtocоl — «протокол передачи гипертекста»), специально для этого и разработанный.

Примерыбраузеров — Internet Explorer, Firefox, Opera, Google Chrome идр.

Примеры серверов —Apache, nginx, IIS.

Браузер отправляет запрос серверу. Сервер обрабатывает запрос в соответствии с конфигурацией сервера, и, в случае необходимости, отдает запрос на обработку CGIскрипту или программе, и возвращает браузеру результат — готовую страницу.

Конфигурация сервера, файл .htaccess.

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

Влияние этого файла действует только на каталог, в котором располагается, и на его дочерние каталоги.

Использование:

· Авторизация, аутентификация — файлы .htaccess часто используются для указания ограничений для конкретной директории. Файл .htaccess часто используется вместе с .htpasswd, который сохраняет имена пользователей и их пароли.

· Собственные страницы ошибок — изменение страниц, которые отдаются при ошибках на стороне сервера, например HTTP 404 NotFound.

· Изменение URL-адресов — серверы используют .htaccess для изменения длинных, излишне сложных URL-адресов на короткие и легко запоминающиеся.

· Контроль кеша— файлы .htaccess позволяют серверу контролировать кеширование веб-браузерами и кеширующими прокси для уменьшения использования полосы, загрузки сервера и лагов.

CGI.

CGI— интерфейс, используемый для связи внешней программы с веб-сервером. Активно используется.

Внешняя программа — интерпретатор скриптового языка, или откомпилированная программа.

Откомпилированная программа может быть написана на любом языке, а в качестве интерпретаторов часто используются Perl, Python, Rubyи PHP. Скриптовые языки в веб-программировании более популярны, из-за удобства редактирования.

Все .html, .css, .txt, .jpgи многие другие не скриптовые файлы выдаются сервером без обработки, как есть.

Все скриптовые файлы, например, .php—передаются на выполнение интерпретатору, который построчно считывает файл, выполняет инструкции и возвращает серверу результат. Сервер выдает этот результатклиенту.

HTML.

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки.

Пример самого короткого HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

С чего начинается работа

На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тегом <HTML> и им же закрывается.

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:

<!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 3.2 Final//EN">
<HTML>
<HEAD>
           <TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
           Текст документа
</BODY>
</HTML>

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).

Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство вашихHTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>.









PHP.

При создании системы управления сайтом был использован скриптовый язык программирования PHP.

PHP – это широко используемый язык сценариев общего назначения с открытым исходным кодом.

Говоря проще, PHP это язык программирования, специально разработанный для написания web-приложений (сценариев), исполняющихся на Web-сервере.

Аббревиатура PHP означает “HypertextPreprocessor (Препроцессор Гипертекста)". Синтаксис языка берет начало из C, Java и Perl. PHP достаточно прост для изучения. Преимуществом PHP является предоставление web-разработчикам возможности быстрого создания динамически генерируемыхweb-страниц. Подробнее о преимуществах PHP можно узнать здесь.

Важным преимуществом языка PHP перед такими языками, как языков Perl и C заключается в возможности создания HTML документов с внедренными командами PHP.

Значительным отличием PHP от какого-либо кода, выполняющегося на стороне клиента, например, JavaScript, является то, что PHP-скрипты выполняются на стороне сервера. Вы даже можете сконфигурировать свой сервер таким образом, чтобы HTML-файлы обрабатывались процессором PHP, так что клиенты даже не смогут узнать, получают ли они обычный HTML-файл или результат выполнения скрипта.

PHP позволяет создавать качественные Web-приложения за очень короткие сроки, получая продукты, легко модифицируемые и поддерживаемые в будущем.

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

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

Язык PHP постоянно совершенствуется, и ему наверняка обеспечено долгое доминирование в области языков web -программирования, по крайней мере, в ближайшее время.

 

 

CSS.

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

 

Каскадные таблицы стилей (CascadingStyleSheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

 

Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт Arial и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

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

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:

· использование различных расширений HTML;

· применение изображений вместо текста;

· использование рисунков для контроля пустого пространства, так называемые распорки;

· использование таблиц для верстки веб-страниц;

· написание программных скриптов вместо использования HTML.

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

Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.


 

 


Раздел 2. Конструкторская часть.

Структура сайта.

Маршрут запроса.

Благодаря файлу .htaccessвсе запросы перенаправляются в index.php. Исключение – запросы, начинающиеся с /public/.

Содержимое файла .htaccess:

# включить режим перенаправления
RewriteEngineon
# все, что начинается на public/ выдавать как есть.
RewriteRule^(public/.*)$ $1 [L,QSA]
# все остальное отправлять в index.php, для автоматической обработки.
RewriteRule^(.*)$ index.php [L,QSA]

Папка publicнужна для безопасных файлов, которые выдаются клиенту без изменений, такие как стили, картинки, текстовые файлы, аудио и видео файлы.

Все остальное идет в файл index.php, где запрашиваемая страница берется из папки pagesи встраивается в дизайн.






Папка pages.

В папке pagesхранятся страницы, готовые к выдаче. Вотфайлpages/main.html:

Power movePower moves are moves loosely defined as relying on speed, momentum, and acrobatic elements for performance. They are prominent in B-boying, often the centerpieces of routines featuring the other elements (toprock, downrock, and freezes) that make up breakdancing. B-boys who focus heavily on power moves and execute them as a main part of their routines are often called "power heads".<iframe

 

А вот, к примеру, /pages/mills/windmill.html:

Windmill<iframe

 

Формат страниц такой: Первая строчка файла – заголовок(title) страницы, все остальное – содержание.

Загрузка файлов и вставка в дизайн происходит в файле index.php.

Файлindex.php.

Загрузка заголовка и содержания страницы

$pageName=$_SERVER['REQUEST_URI'];

if($pageName=='/')$pageName='/main';

 

if(file_exists('pages'.$pageName.'.html')){

$pageArray=file('pages'.$pageName.'.html');

$pageTitle=array_shift($pageArray);

$pageContent=implode('',$pageArray);

}else{

$pageTitle='Error 404';

$pageContent='<b>Page "'.$pageName.'" not found!</b>';

}

 

Разборкода

$pageName=$_SERVER['REQUEST_URI'];

// $_SERVER['REQUEST_URI'] – все содержимое адресной строки, идущее после адреса сайта.

if($pageName=='/')$pageName='/main';

// Если в запросе не указана страница,то показать главную страницу например http://example.com/ = http://example.com/main

if(file_exists('pages'.$pageName.'.html')){

// Если искомый файл существует в папке Pages, то:

$pageArray=file('pages'.$pageName.'.html');

// Записать содержимое файла в массив, каждый элемент которого – строчка из файла.

$pageTitle=array_shift($pageArray);

// Извлечь первый элемент массива(первую строчку) и записать ее в переменную $pageTitle

$pageContent=implode('',$pageArray);

// Все остальное содержимое файла обьеденить в строку и записать в переменную $pageContent

}else{

$pageTitle='Error 404';

$pageContent='<b>Page "'.$pageName.'" not found!</b>';

}

// Если файл не найден, то записать в соответствующие переменные информацию об ошибке.

 

Далее в этом же документе находится дизайн сайта, в который встраивается заголовок(<? print $pageTitle ?>) и содержимое(<? print $pageContent ?>) страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title><? print $pageTitle ?> - Power move education</title><metahttp-equiv="content-type"content="text/html; charset=utf-8"><linkrel="stylesheet"type="text/css"href="/public/main.css"></head><body><divclass="container"><divclass="header">Power move education</div> <divclass="left"><ulclass="menu"><liclass="page"><ahref="/main">Main page</a></li><liclass="page"><ahref="/history">History</a></li> <liclass="category">MILLS</li><liclass="item"><ahref="/mills/windmill">Windmill</a></li><liclass="item"><ahref="/mills/munchmill">Munchmill</a></li><liclass="item"><ahref="/mills/nutcracker">Nutcracker</a></li> <liclass="category">AIRFLARES</li><liclass="item"><ahref="/airflares/airflare">Airflare</a></li><liclass="item"><ahref="/airflares/one_hand_airflare">One hand airflare</a></li><liclass="item"><ahref="/airflares/elbow_airflare">Elbow airflare</a></li><liclass="item"><ahref="/airflares/airflare_1_5">Airflare 1.5</a></li> <liclass="category">FLARES</li><liclass="item"><ahref="/flares/flare">Flare</a></li><liclass="item"><ahref="/flares/virgin_flare">Virgin Flare</a></li></ul></div> <divclass="content"><h1><?print $pageTitle ?></h1> <? print $pageContent ?></div> <divclass="footer">© 2012 Слава Гримальский</div></div></body></html>

 

Файл main.css.

Оформление задается стилями, которые находятся в папке public – main.css:

/* Общийстиль */ *{font-family: Verdana;} a{color:#0066CC;} h1 {font-size:25px;margin:0px;} /* Блоки */ .container{margin:0auto;max-width:900px;} .header{font-size:40px;padding:10px;border-bottom:1pxsolid#CCCCCC;} .left{width:200px;padding-left:10px;padding-top:20px;float:left;} .content{padding-left:210px;padding-top:20px;min-height:600px;} .footer{font-size:10px;padding:5px;border-top:1pxsolid#CCCCCC;} /* Меню */ .menu{list-style:none;padding:0px;margin:0px;} .menu.category{padding-top:20px;font-weight:bold;font-family: Arial;letter-spacing:4px;} .menu.page,.menu.item{padding-top:4px;font-size:14px;} .menu.item{padding-left:10px;} /* Настройкафреймов */ .contentiframe{margin:20px0;}

 



Раздел 3. Результат.

Вот так выглядит, главная страница:


 

А так выглядит одна из страниц с видео-уроками:










Последнее изменение этой страницы: 2018-04-12; просмотров: 284.

stydopedya.ru не претендует на авторское право материалов, которые вылажены, но предоставляет бесплатный доступ к ним. В случае нарушения авторского права или персональных данных напишите сюда...