Создание сайта "Салон сотовой связи"
Разработка веб-сайта "Салон сотовой связи", деятельностью которого является продажа телефонов и прочих сопутствующих услуг и продуктов. Горизонтальное выравнивание объектов. Работа с языком гипертекстовой разметки HTML и каскадными таблицами стилей CSS.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 24.06.2013 |
| Размер файла | 32,6 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
ВВЕДЕНИЕ
Тема курсовой работы создание сайта «Салон сотовой связи», деятельностью которой является продажа телефонов и прочих сопутсвующих услуг и продуктов.
Цель курсовой работы:
- изучить средства создания сайта: язык HTML и CSS;
- разработка сайта «Салон сотовой связи».
Для достижения поставленной цели необходимо решить следующие задачи:
-разработать структуру сайта;
-выбрать средства программирования, наиболее подходящие для создания сайта;
-создать сайт организации «Салон сотовой связи Мобител»;
Для разработки был выбран язык гиперстекстовой разметки HTML потому что этостандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. Он прост и в изучении и в применении.
Так же будут использованы каскадные таблицы стилей. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью CSS является разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое производится с помощью формального языка CSS). Такое разделение увеличивает доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
1. Горизонтальное выравнивание объектов
Выравнивать блочные элементы (таблицы, изображения, объекты, абзацы и т.д.) можно с помощью атрибута align.
Хотя этот атрибут может устанавливаться для многих элементов HTML, диапазон его возможных значений в разных элементах может быть различным. Здесь обсуждается только значение атрибута align для текста.
Определения атрибутов
align = left|center|right|justify [CI]
Нежелателен.
Этот атрибут задает горизонтальное выравнивание своего элемента относительно окружающего контекста.
Возможные значения:
· left: строки текста выравниваются по левому краю.
· center: строки текста выравниваются по центру.
· right: строки текста выравниваются по правому краю.
· justify: строки текста выравниваются по обоим краям.
Значение по умолчанию зависит от общего направления текста.
Для текста, направленного слева направо, по умолчанию используется значение align=left, я для текста, направленного справа налево - align=right.
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В данном примере заголовок центрируется.
<H1 align="center"> How to Carve Wood </H1>
С использованием CSS, например, Вы можете достичь того же эффекта следующим образом:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> How to Carve Wood </H1>
Будут выровнены все объявления H1. Вы можете ограничить область действия стиля, установив атрибут class:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> How to Carve Wood </H1>
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Аналогично, чтобы выровнять абзац по правому краю с помощью атрибута HTML align можно записать:
<P align="right">...Текст абзаца...
а с использованием CSS:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
P.mypar {text-align: right}
</STYLE>
<BODY>
<P class="mypar">...Текст абзаца...
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Чтобы выровнять по правому краю ряд абзацев, сгруппируйте их с помощью элемента DIV:
<DIV align="right">
<P>...текст первого абзаца...
<P>...текст второго абзаца...
<P>...текст третьего абзаца...
</DIV>
С использованием CSS свойство выравнивания текста наследуется от родительского элемента, поэтому Вы можете использовать:
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
DIV.mypars {text-align: right}
</STYLE>
<BODY>
<DIV class="mypars">
<P>...текст первого абзаца...
<P>...текст второго абзаца...
<P>...текст третьего абзаца...
</DIV>
Чтобы отцентрировать с использованием CSS весь документ
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...тело документа отцентрировано...
</BODY>
Использование элемента CENTER абсолютно эквивалентно использованию элемента DIV с атрибутом align, для которого установлено значение "center". Использование элемента CENTER нежелательно.
2. Создание формы
В языке HTML формы применяются для отправки данных со странички на обработку в какую-либо программу, установленную на сервере. Всем известный пример формы можно видеть при авторизации на сайте или при отправке сообщения администратору.
Пользователь заполняет форму и нажимает кнопку Send (отправить), данные обрабатываеются специальной программой (скриптом) на сервере, и мы получаем на адрес техподдержки вопросы пользователей :-)
Создание форм начинается с элемента
<form>
</form>
У элемента формы form существуют два обязательных атрибута metod и action.
metod - атрибут определяет способ, с помощью которого будет осуществляться связь между формой и Web сервером. Атрибут может принимать значение "get" и "post" (если атрибут не указан явно, его значение по умолчанию ="get").
- action - значением атрибута action является конкретный адрес скрипта, обрабатывающего данные.
- Атрибуты записываются в тег <form> , например так:
<form method= "get" action= "http://www.myserver.com/cgi-bin/mailscript">
В данном уроке рассматривается только создание элементов форм, их виды. Для того, чтобы форма заработала, ее необходимо запрограммировать. Само программирование не входит в рамки данного урока.
Текстовое поле
Для создания поля ввода используют элемент input с атрибутом type.
Type может принимать различные значения. Для самого простого поля ввода текста атрибут type будет иметь значение text.
<input type=text параметры>
Нпример, html код
<form method= "get" action="/cgi-bin/handler.cgi">
<b>Зaполните Ваши данные:</b>
Имя: <input type=text maxlength=25 size=20>
Фамилия:<input type=text maxlength=25 size=20>
</form>
Таблица 1 - значения параметров
|
Параметр |
Описание |
|
|
size=... |
Ширина поля. |
|
|
maxlength=... |
Максимальное количество символов разрешенных в тексте. Если этот параметр опустить, то можно вводить строку длинее самого поля. |
|
|
name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
|
|
value=... |
Начальный текст содержащий в поле. |
|
|
align=... |
Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений. |
Поле для пароля
Поле для пароля -- обычное текстовое поле, но отличается тем, что все символы показываются звездочками, чтобы никто не подглядел вводимый пароль.
Задается кодом
<input type=password параметры>
Например:
<form method= "get" action="/cgi-bin/handler.cgi">
<b>Логин: </b><input type=text maxlength=25 size=20 name="text">
<b>Пароль:</b> <input type=password maxlength=15 size=20 name="pass">
</form>
Многострочный текст
Для возможности введения в поле несколько строк текста используем тег textarea.
Например:
<form method= "get" action="/cgi-bin/handler.cgi">
<b>Введите ваш отзыв: </b>
<textarea rows=10 cols=45></textarea>
</form>
каскадный таблица сайт телефон
Этот код на страничке можно увидеть в виде поля, в которое можно ввести большой текст.
Таблица 2 - параметры: для тега textarea
|
Параметр |
Описание |
|
|
name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
|
|
cols=... |
Количество столбцов текста. |
|
|
rows=... |
Число строк текста. |
|
|
value=... |
Значение поля определяет, что будет отправлено на сервер. |
|
|
wrap=... |
Параметры переноса строк. Возможные значения: off -- отключает перенос строк; virtuals -- показывает переносы строк, но отправляет текст как он введен; physical -- переносы строк вставляются где указано и в таком виде текст отправляется. |
Кнопки
Кнопка -- это элемент интерфейса, на который нужно нажимать.
Используем type=button, "button" переводится как "кнопка".
<input type=button параметры>
Код html
<form method= "get" action="/cgi-bin/handler.cgi">
<p align=center><input type=button name=press value=" Нажми меня :-)">
</form>
Таблица 3 - Параметры для кнопок
|
Параметр |
Описание |
|
|
name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
|
|
value=... |
Надпись на кнопке, а также ее значение. |
|
|
align=... |
Выравнивание поля. Возможные значения: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. Результат их использования точно такой же, как и у изображений. |
Кнопка SUBMIT
При нажатии на кнопку SUBMIT данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега form.
Используем type=submit
Например,
<tr><td>
<form action="/cgi-bin/handler.cgi">
<p><input type=submit value="Отправить данные">
Кнопка RESET
При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение. Используем type=reset
Пример кода
<form action="/cgi-bin/handler.cgi">
<input type=text width=20> <input type=reset value="Сбросить данные">
</form>
Флажки (checkbox)
Флажки используют, когда необходимо выбрать два или более варианта из предложенных. Используем type=checkbox
<form action="/cgi-bin/handler.cgi"> <b>С какими операционными системамы вы знакомы?</b>
<input type=checkbox name=option1 value=a1 checked>Windows 95/98
<input type=checkbox name=option2 value=a2>Windows 2000
<input type=checkbox name=option3 value=a3>Linux
</form>
Значение поля value= определяет, что будет отправлено на сервер при поставленной галочке. Остальные параметры аналогичны параметрам кнопок.
Переключатели (radiobutton)
Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Используем type=radio
<form action="/cgi-bin/handler.cgi"> <b>Какое время года Вы больше любите? :-)</b>
<input type=radio name=answer value=a1>Весну
<input type=radio name=answer value=a2>Лето
<input type=radio name=answer value=a3>Осень
<input type=radio name=answer value=a4>Зиму
</form>
То есть, используя радиокнопки можно выбрать только ОДНО значение.
Поле со списком
В ниспадающем списке можно выбирать одно или несколько значений. Сделаем выбор времени года с помощью ниспадающего списка. Поля выбора начинаются тегом <select> и заканчиваются </select>
Каждое выбираемое поле заключено в теги <option> и </option >
Пример:
<form action="/cgi-bin/handler.cgi">
<b>Какое время года Вы больше любите? </b>
<p align=center>
<select name= время года>
<option>Весну</option>
<option>Лето</option>
<option>Осень</option>
<option>Зиму</option>
</select>
</form>
Таблица 4 - параметры для списков
|
Параметр select |
Описание |
|
|
name=... |
Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать это поле. |
|
|
size=... |
Количество видимых строк. По умолчанию одна строка. |
|
|
multiple |
Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift. |
|
|
Параметр option |
Описание |
|
|
selected |
Видимое поле по умолчанию. |
|
|
value=... |
Значение определяет, что будет отправлено на сервер при выбранном пункте списка. |
Кнопка с изображением
Кнопки с изображениями аналогичны по действию кнопке Submit, но представляют собой рисунок.
Используем type=image
<form action="/cgi-bin/handler.cgi">
<table align=center>
<tr><td colspan=2>Введите ваше имя: <tr>
<td><input type=text width=25></td>
<td><input type=image src=../school/examples3/ser.gif width=90 height=68
border=0></td>
</tr>
</table>
</form>
Картинка задается при помощи тега scr и адреса картинки.
src=images/stories/key.jpg
Таким образом, комбинируя разные способы создания форм, мы можем на одной странике разместить несколько форм сразу. Для отдедения одного вида формы от другого будем использовать тег <fieldset>
Но чтобы заставить форму работать, то есть отправлять введенные данные, входить в систему и тому подобное, форму необходимо обработать. Обработка HTML форм может производиться посредством php или JavaScript.
3. РЕАЛИЗАЦИЯ САЙТА «САЛОН СОТОВОЙ СВЯЗИ»
Для реализации задачи: разработка сайта, был использован язык гипертекстовой разметки HTML. Так же были использованы каскадные таблицы стилей. Основной целью CSS является разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое производится с помощью формального языка CSS).
ЗАКЛЮЧЕНИЕ
В данной курсовой работе подробно рассмотрены и изучены такие разделы HTML как: - «Горизонтальное выравнивае объектов» и «Создание формы». Так же в программном продукте Блокнот был разработан интерактивный интернет сайт на тему «Салон сотовой связи». Данный сайт состоит из 5 страниц: «Главная», «Новости», «Продукция», «Контакты», «Скидки». Слева организованна структура меню. Все страницы друг с другом взаимосвязаны.
В процессе разработки были приобретены навыки работы с языком гипертекстовой разметки HTML и каскадными таблицами стилей CSS.
Была достигнута цель и следующие задачи курсовой работы:
- изучить средства создания сайта: язык HTML и CSS;
- разработка сайта «Салон сотовой связи».
Разработанный интернет сайт полностью соответствует поставленной задачи. Он имеет качественное графическое исполнение и заполнен достоверной и качественной информацией.
ПРИЛОЖЕНИЕ А
Файл styles.css
* {
margin: 0px;
padding: 0px;
}
body {
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
color: #800000;
}
p {
text-indent: 20px;
text-align: justify;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
.textRight {
text-align: right;
}
#mainHeadText {
font-family: Arial Black;
}
#page {
width: 760px;
margin: 0px auto;
text-align: left;
background-color: #ff0033;
}
#header {
background-image: url(image/1.jpg);
height: 200px;
}
#menu {
background-color: #ff0033;
color: black;
float: left;
width: 150px;
padding: 10px;
text-align: center;
}
#content {
background-color: white;
margin-left: 180px;
padding: 10px;
}
#footer {
font-size: 0.8em;
color: #ff0033;
padding: 50px;
text-align: right;
background-color: white;
margin-left: 180px;
}
1. Файл index.html
<html>
<head>
<title>Салон сотовой связи "Мобител"</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<center>
<div id="page">
<div id="header">
</div>
<div id="menu">
<br>
<a href="index.html">Главная</a><br>
<a href="news.html">Новости</a><br>
<a href="prodykt.html">Продукция</a><br>
<a href="contacts.html">Контакты</a><br>
<a href="sale.html">Скидки</a><br>
2. Файл news.html
<html>
<head>
<title>Салон сотовой связи "Мобител"</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<center>
<div id="page">
<div id="header">
</div>
<div id="menu">
<br>
<a href="index.html">Главная</a><br>
<a href="news.html">Новости</a><br>
<a href="prodykt.html">Продукция</a><br>
<a href="contacts.html">Контакты</a><br>
<a href="sale.html">Скидки</a><br>
</div>
<div id="content">
<h2 id="mainHeadText">Новости</h2><br>
<p><h3>Защищаем ребенка от нежелательной информации (обзор услуг сотовых компаний и провайдеров)</h3></p>
</div>
</div>
</center>
</body>
</html>
3. Файл produkt.html
<html>
<head>
<title>Салон сотовой связи "Мобител"</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<center>
<div id="page">
<div id="header">
</div>
<div id="menu">
<br>
<a href="index.html">Главная</a><br>
<a href="news.html">Новости</a><br>
<a href="prodykt.html">Продукция</a><br>
<a href="contacts.html">Контакты</a><br>
<a href="sale.html">Скидки</a><br>
</div>
<div id="content">
<h2 id="mainHeadText">Продукция</h2><br>
<center>
<table align=center>
<tr><td>Apple iPhone 5 </td>
<td><img src="image/01.jpg" ></td>
</tr>
<tr><td>Все мобильные телефоны</td>
<td><img src="image/02.jpg"></td>
</tr>
<tr><td>Смартфоны и коммуникаторы </td>
<td><img src="image/03.jpg"></td>
</tr>
<tr><td>Аксессуары для iPhone</td>
<td><img src="image/04.jpg"></td>
</tr>
<tr><td>Аксессуары для телефонов </td>
<td><img src="image/05.jpg"></td>
</tr>
<tr><td>Карты памяти</td>
<td><img src="image/06.jpg"></td>
</tr>
<tr><td>DECT-телефоны </td>
<td><img src="image/07.jpg"></td>
</tr>
<tr><td>Контракты, sim-карты</td>
<td><img src="image/08.jpg"></td>
</tr>
</table>
</center>
</div>
<div id="footer">
</div>
</div>
</center>
</body>
</html>
Размещено на Allbest.ru
Подобные документы
Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).
лабораторная работа [31,0 K], добавлен 28.10.2010Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования Java Script. Описание используемых тегов при его создании. Особенности разработки навигации и интерфейса сайта.
контрольная работа [2,8 M], добавлен 02.12.2009Назначение информационно-новостного сайта. Структура пользовательской и административной частей. Эмулятор Web–сервера Denwer 3. Типы данных, используемые в PHP. MySQL база данных. Каскадная таблица стилей CSS. Язык гипертекстовой разметки документов HTML.
дипломная работа [2,0 M], добавлен 05.02.2013Инструментальные возможности для реализации программы. Позиционирование сайта в Интернете, разработка дизайна и информационное наполнение. Создание анимированного баннера и добавления в поисковые системы для продвижения данного сайта в Интернете.
курсовая работа [1,9 M], добавлен 29.09.2012Изучение технологического процесса работы биллинговой компании. Инфраструктура предоставления услуг связи. Базовые бизнес-процессы. Цели и задачи проектируемой информационной системы "Работа с абонентами оператора сотовой связи". Этапы разработки проекта.
курсовая работа [695,2 K], добавлен 17.01.2009Понятие сайта и их классификация - корпоративные, презентационные, тематические, интернет-магазины. Язык гипертекстовой разметки HTML и его средства разработки. Виртуальный web-сервер Denver и MySQL базы. Этапы разработки сайта и структура навигации.
дипломная работа [2,4 M], добавлен 13.01.2015Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования JavaScript. Проблема высокого уровня нагрузки на хостинг и создания уникального контента. Выбор средств CMS.
курсовая работа [3,6 M], добавлен 25.05.2014
