Разработка архитектуры информационной системы «Резьба по дереву»
Курсовая работа, 17 Июня 2013, автор: пользователь скрыл имя
Описание работы
Каждый из нас уже сейчас может сделать свой вклад в развитие Интернет. Для этого достаточно создать свой Web-сайт и разместить его в Сети. Но как это сделать? Ответ на данный вопрос я попробую дать в этой работе.
Для этого необходимо решить следующие частные задачи:
– ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;
– изучить программный инструментарий, применяемый для разработки и создания Web-сайтов;
– выявить и учесть методы и способы представления на Web-страницах различных видов информации, не препятствующие их доступности;
– ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике;
Содержание работы
Введение 3
Глава 1. Базовые знания необходимые для создания Web-сайта 5
1.1. Web-страницы и Web-сайты 5
1.2. Язык разметки гипертекстовых страниц HTML 6
1.3. Обеспечение доступности Web-страницы 6
1.4. Представление текста на Web-страницах 10
1.5. Представление графики на Web-страницах 12
1.6. Web-серверы 15
Глава 2. Основные правила и этапы создания сайта 22
2.1. Влияние дисплеев на Web-дизайн 23
2.2. Стандартные размеры и разрешения дисплеев 24
2.3. Альтернативные дисплеи 25
Глава 3. Разработка архитектуры информационной системы «Резьба
по дереву» 27
3.1. Создание новой web-страницы (шаблона) 27
3.2. Ввод и форматирование текста 36
3.3. Работа с графикой 36
3.4. Создание гиперссылок 37
Выводы 33
Литература 34
Файлы: 1 файл
осн часть.doc
— 2.31 Мб (Скачать файл)
- В открывшемся окне параметров шаблона «Горячее свечение»
- Текст: Резьба по дереву
- Кегель шрифта: 150;
- Шрифт: Monotype Corsiva;
- Цвет фона: черный;
- Ок
- После того как поле с логотипом появилось, необходимо удалить черный фон. Для этого обратимся к окну «Слои». Слой с черным фоном необходимо выделить и отправить в корзину .
- Далее необходимо подобрать цветовую гамму для логотипа. Для этого выполним команду Цвет → Цветовой баланс. В появившемся окне параметров необходимо скорректировать баланс цветов теней, полутонов и светлых частей.
- Последний этап это этап сохранения. Сохраняем логотип в формате .
png.
- Подготовка навигационных кнопо
к. Кнопки необходимы для осуществления связи между страницами сайта. Так же как и при создании логотипа можно использовать шаблоны кнопок программы Gimp 2.6 .
Алгоритм создания логотипа:
- Запускаем программу Gimp 2.6 ;
- Далее выполняем команду Файл → Создать → Кнопки → Простая выпуклая кнопка (см. рис. 9);
- В открывшемся окне параметров шаблона « Простая выпуклая кнопка» (см. рис. 10) выбираем:
- Текст: Главная;
- Кегель шрифта: 16;
- Шрифт: Monotype Corsiva;
- Цвет верхний - левый: синий;
- Цвет нижний - правый: темно синий;
- Цвет текста: белый;
- Заполнение: 4
- Ширина скоса: 6
- Ок
- Появилась готовая кнопка. Здесь нет необходимости менять цветовой баланс;
- Последний этап это этап сохранения. Сохраняем кнопку в формате .jpg.
- Разметка страницы. При помощи языка гипертекстовой разметки HTML и каскадной таблицы стилей CSS я создал шаблон Web – страницы, сохранив его как Web – документ (с расширением .htm & .css соответственно). Естественно включив уже созданные логотип, кнопки и фон. Затем скопировав этот документ n – раз (всего получилось 6 страниц) переименовал их соответственно.
Исходный код шаблона:
<html>
<head>
<link rel="stylesheet" type="text/css" href="my_css.css">
</head>
<body>
<table id="main">
<tr>
<td>
</td>
</tr>
</table>
<table border=0 width=75% align = center>
<tr>
<nav>
<td width=10%><A HREF="text.html"><img src=kli/1.jpg></A></td>
<td width=10%><A HREF="teory.html"><img src=kli/2.jpg></A></td>
<td width=60% ><A HREF="prakt.html"><img src=kli/3.jpg></A></td>
<td width=7% ><A HREF="kontrol.html"><img src=kli/4.jpg></A></td>
<td width=20% ><A HREF="albom.html"><img src=kli/5.jpg></A></td>
<td width=10%><A HREF="avt.html"><img src=kli/6.jpg></A></td>
</nav>
</tr>
</table>
<br>
<table border=1 width=90% align = center>
<tr valign=top>
<td width=70% align = center>
</td>
</tr>
</table>
<br>
<table border=0 width=75% align = center>
<tr>
<td align = center>
</tr>
</table>
</body>
</html>
Исходный код таблицы стилей:
body {
background-image: url('foto/55.JPG');
};
P {
color: black; font-size: 9ptl; font-family: "Times New Roman"; text-align: justify
background - color:silver
}
#main{
width:80%;
border:none;
text-align:center;
}
#main1{
width:75%;
border:none;
text-align:center;
}
#main2{
width:90%;
border:1px solid blue ;
text-align:center;
}
- Заполнение страниц. Для каждой страницы была подобрана определенная информация.
3.2. Ввод и форматирование текста
Процесс форматирования текста также не составил особого труда, так как основные параметры форматирования (цвет, размер, выравнивание и начертание текста) были прописаны мной в файле каскадных стилей my_css.css. А так как все страницы сайта имеют доступ к нему, то процесс форматирования осуществляется автоматически, за исключением некоторых случаев, где необходимо вручную выделить определенную часть в тексте.
3.3. Работа с графикой
Большинство графических изображений на сайте были обработаны в программе Gimp 2.6. Некоторые были взяты из интернета. Некоторая часть работы с графикой прописана в пункте 3.1.
3.4. Создание гиперссылок
Мною были созданы
гиперссылки которые
<A HREF="text.html"><img src=kli/1.jpg></A></td>
<A HREF="teory.html"><img src=kli/2.jpg></A></td>
<A HREF="prakt.html"><img src=kli/3.jpg></A></td>
<A HREF="kontrol.html"><img src=kli/4.jpg></A></td>
<A HREF="albom.html"><img src=kli/5.jpg></A></td>
<A HREF="avt.html"><img src=kli/6.jpg></A></td>
Так же на сайте реализованы ссылки для просмотра и скачивания буклетов, презентаций, фильма и др.:
Заключение
В данной курсовой работе рассмотрены актуальные вопросы разработки и создания современной информационной системы.
При этом мною были решены следующие частные задачи:
– ознакомление с современными Интернет-технологиями и использовать их в своей разработке;
– изучение основных понятия HTML 5, языка применяемого для разработки и создания Web-сайтов;
– ознакомление с методами и способами представления на Web-страницах различных видов информации (текстов и изображений);
– ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им в своей практике;
– определение структуры Web-страниц;
– предоставление пошаговой стратегии разработки web-сайта.
В результате проведенных работ на базе выбранных технологий был создан прототип современного Web-сайта.
Список используемой литературы
- Алексеев А.П. Введение в Web-дизайн: учебное пособие. – М.: СОЛОН-ПРЕСС, 2008.
- Барысов Р. Постройте профессиональный сайт сами. – СПб., 2009.
- Вильямсон Х. Универсальный Dynamic HTML / Библиотека программиста – СПб.: ПИТЕР, 2001.
- Кроудер Д. Создание web-сайта для чайников: 3-е издание. – М.: Диалектика, 2009
- Панфилов К. По ту сторону веб-страницы. – СПб.: ДМК Пресс, 2008.
- Печников В.Н. Сомоучитель Web-страниц и Wrb-сайтов. – М.: Триумф, 2006.
- Печников В.Н. Создание Web-сайтов без посторонней помощи. – М.: Триумф, 2006.
- http://myrusakov.ru/html-5.
html - http://ru.wikipedia.org/wiki/
HTML5 - http://ru.wikipedia.org/wiki/%
CA%E0%F1%EA%E0%E4%ED%FB%E5_% F2%E0%E1%EB%E8%F6%FB_%F1%F2% E8%EB%E5%E9 - http://ru.wikipedia.org/wiki/
Цвета_HTML - http://www.eltisbook.ru/html/
html.php - http://www.woolfs.ru/content/
category/12/68/125/