Разработка дизайна сайта
Введение
Интернет - мировая компьютерная сеть. Она составлена из разнообразных
компьютерных сетей, объединенных стандартными соглашениями о способах обмена
информацией и единой системой адресации. Интернет использует протоколы
семейства TCP/IP. Они хороши тем, что обеспечивают относительно дешевую
возможность надежно и быстро передавать информацию даже по не слишком надежным
линиям связи, а также строить программное обеспечение, пригодное для работы на
любой аппаратуре. Система адресации (URL-адреса) обеспечивает уникальными
координатами каждый компьютер (точнее, практически каждый ресурс компьютера) и
каждого пользователя Интернета, создавая возможность взять именно то, что
нужно, и передать именно туда, куда нужно.
О существовании интернета знают все цивилизованные жители нашей планеты.
Не слышали о нём разве что ленивые и пожилые люди из деревенской глубинки.
С каждым годом количество пользователей всемирной паутины неуклонно
растёт. Интернет предоставляет массу возможностей своему клиенту.
Всю необходимую и интересующую вас информацию вы легко можете найти в
сети. Будь-то географическая, юридическая, экономическая, строительная
тематика. В интернете можно найти любую книгу. Существует масса разнообразных
электронных библиотек, которые предоставляют возможность бесплатного скачивания
книги в цифровом формате. Вам нужно написать курсовую, контрольную работу? - Не
проблема, выходите в интернет и информационная база к вашим услугам. Всемирная
паутина в современном мире - основной источник знаний. В интернете вы без
проблем сможете скачать фильмы и игры бесплатно.
Сейчас многие институты и университеты поставили интернет себе на службу.
Существуют различные виртуальные и дистанционные программы обучения. С помощью
интернета осуществляется коммуникация между преподавателями и студентами. Через
почту, к примеру, можно пересылать учебный материал, а также отправлять уже
выполненные задания. Использование интернета в учебном процессе экономит время,
деньги, физические затраты. За интернетом - будущее в обучении, ибо он
позволяет играть в виртуальные игры разума. И неудивительно, что всё больше
ВУЗов переходят на формы обучения, которые тесно связаны с интернетом.
Сегодня с помощью интернета можно зарабатывать деньги, не выходя из дома.
Причём предложение и спрос на работу с каждым годом неуклонно растёт. Каждый
пользователь, обладающий навыками и умениями в своей сфере, а также
интеллектом, может найти работу себе по душе. Одна из самых распространённых
профессий - это копирайтеры. Копирайтеры пишут уникальные статьи на заказ.
Поэты, писатели, творческие люди, обладающие хорошими знаниями русского языка,
могут найти применение своим навыкам и умениям. И это делает интернет
демократичным, либеральным и открывает возможности, которых попросту может и не
быть в реальном мире.
Возможности, которые предоставляет обществу интернет, воистину
безграничны. В нём можно найти как научную информацию, так и различные игры для
девочек, на любой вкус. Актуальность фразы "за интернетом будущее"
носит вполне логичный характер, ведь технологии и информационные базы постоянно
совершенствуются, а работа в сети - чрезвычайно удобна и экономит время и
деньги.
Изначально единственной технологией, с помощью которой создавались сайты
и веб-страницы, была технология html. Однако такие страницы и сайты выглядели
бедно и не обладали интерактивностью, поэтому за короткое время, прошедшее от
начала массового распространения интернета, появились и стали использоваться
при создании сайтов многочисленные дополнительные технологии и языки.
Итак, классифицируем сайты по используемым технологиям:
Статические сайты и веб-страницы. Статические сайты и веб-страницы - это
сайты, сделанные по классической технологии html. Веб-страницы таких сайтов
написаны полностью на языке html и имеют расширение .htm или .html.
Статическими они называются потому, что, набирая определённый адрес (URL),
соответствующий сайту или его определённой странице, вы всегда будете видеть
одно и то же содержание. Это потому, что статические html-страницы лежат на
сервере в неизменном виде и по вашему запросу сервер просто берёт их и
отправляет вам в браузер. С динамическими страницами, которые не существуют в
заранее предопределённом виде на сервере, а формируются при помощи серверных
скриптов, ситуация иная, и, набирая один и тот же адрес, вы, в зависимости от
разных условий, можете получать совершенно разное содержание.
Статические сайты имеют свои как плюсы, так и минусы. Плюсы статических
сайтов - это простота их создания и нетребовательность к аппаратным ресурсам.
Статические сайты не требуют поддержки скриптов и баз данных и могут быть
размещены на абсолютно любом хостинге, при этом они не будут создавать почти
никакой нагрузки на сервер, и с ними не возникнет проблема, когда сайт тормозит
или выдаёт различные сбои при большом притоке посетителей. Статические сайты
могут включать в себя графику, анимацию и javascript, они прекрасно подходят
для предоставления пользователям информации, которая не должна, по крайней
мере, часто и существенно изменяться. Основным минусом статических сайтов является
отсутствие интерактивности. Кроме того, в таких сайтах сложнее изменить
информацию, внешний вид и дизайн страниц.
Динамические сайты и веб-страницы. Как уже было упомянуто, динамические
страницы не существуют в неизменном виде на сервере, а формируются при помощи
скриптов. Содержание и вид динамической страницы с одним и тем же адресом может
быть совершенно различным в зависимости от разных условий - например, в
зависимости от времени, от конкретного пользователя, от введённого
пользователем запроса и т. п. Скрипты, которые используются для формирования
динамических веб-страниц, могут быть написаны на разных языках.
Распространёнными языками веб-программирования являются, например, php, perl,
asp и т. д. Такие сайты могут предоставлять пользователям интерактивность -
например, вводить разные запросы и осуществлять поиск по сайту, отправлять на
сайт и сохранять свою собственную информацию и осуществлять общение с другими
пользователями (как, например, в гостевых книгах, форумах и т. п.) и многие
другие функциональные возможности. Кроме того, ведение и обновление этих сайтов
гораздо проще. Минусы динамических сайтов в том, что они требуют поддержку
дополнительных технологий, создают повышенную нагрузку на сервер, их сложнее
оптимизировать, а ещё использование на сайте скриптов означает потенциальную
угрозу для безопасности.
Флэш-сайты. Технология флэш (flash) позволяет создавать очень красивые,
интерактивные, со звуком и анимацией, сайты, которые выглядят на порядок
эффектнее, чем обычные html-сайты. Однако сложность и трудоёмкость их
изготовления, а также то, что страницы, созданные на флэш, имеют, как правило,
большой вес и долго загружаются, что отпугивает часть пользователей, приводит к
тому, что флэш-сайты не получили пока слишком широкого распространения.
1. Средства создания WEB-страниц
.1 HTML
Всемирная паутина соткана из WEB-страниц (WEB-pages), а эти страницы
создаются при помощи языка разметки гипертекста (Hypertext Markup Language,
HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании
на HTML", HTML - это язык разметки. Вы используете HTML для разметки
текстового документа, точно так же, как это делает редактор при помощи жирного
красного карандаша. Эти пометки служат для определения формата (или стиля),
который будет использован при выводе текста на экран монитора.
Добавление заголовков и параграфов
Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо
использование стилей для выделения заголовков по степени важности. В HTML
заголовки по степени важности делятся на шесть уровней. Н1 - самый важный, Н2 -
чуть менее важен, и, наконец, Н6 - наименее значимый.
Пример того, как добавить важный заголовок:
<h1>Важный заголовок</h1>
Результат:
Важный заголовок
и чуть менее важный:
<h2>Чуть менее важный</h2>
Результат:
Чуть менее важный
Каждый параграф, который вы напишете должен начинаться тэгом <p> и
заканчиваться тэгом </p> . Например:
<p>Это первый параграф.</p>
<p>А это второй параграф.</p>
Выделение курсивом
Вы можете выделить одно или больше слов, используя тэг <em>,
пример:
Это действительно <em>интересный</em> пункт!
Результат:
Это действительно интересный пункт!
Изменение цвета и размера текста
Тэг FONT может быть использован для указания цвета и размера шрифта,
которым будет выведен ваш текст. В этом примере устанавливается цвет:
В этом предложении есть <font color="red">слово</font> , выделенное желтым
цветом.
Результат:
В этом предложении есть слово выделенное желтым цветом.
Атрибут size служит для указания размера шрифта в условных единицах от 1
до 7. Принято считать, что размер "нормального" шрифта соответствует
числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и
относительной (SIZE=+2):
Советы <font size="+2"
color="maroon">ветеринарного</font> врача
Результат:
Советы ветеринарного врача
Вставка рисунков
Использование рисунков делает ваши страницы более интересными. Вставить
рисунок позволяет тэг <img>. Предположим, что файл рисунка
"peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же
папке что и HTML файл.
<img src="peter.jpeg" width="200"
height="150"><BR>
Указание ширины и высоты не является строго необходимым, но увеличивает
скорость загрузки вашей WEB-страницы. Следует задать описание картинки для
людей, у которых отключена загрузка изображений. Вы можете добавить краткое
описание, используя атрибут alt:
<img src="peter.jpeg" width="200"
height="150" alt="Мой друг Петя">
В WWW используется два формата графических файлов GIF и JPEG. Формат GIF
используется, когда требуется прозрачное изображение или анимация, а также для:
· черно-белых рисунков и текста
· изображений с ограниченным количеством цветов
· графики с резкими контурами (меню, кнопки, диаграммы и т.п.)
· изображений с текстом
Формат JPEG больше подходит в следующих случаях:
· сканированные изображения
· графика со сложным сочетанием цветов и оттенков
· любое изображение с палитрой более чем 256 цветов
Создание ссылок на другие страницы
Ссылки обозначаются тэгом <a>. Определим ссылку на страницу
определенную в файле "advanced.htm":
Это ссылка на <a href="advanced.htm">Продвинутый
HTML</a>.
Результат:
Это ссылка на Продвинутый HTML.
Текст между <a> и </a> используется как описание ссылки,
обозначается обычно синим цветом, и подчеркивается линией.
Для ссылки на другую Web-страницу нужно указать ее полный Web-адрес (называемый
URL), например, для ссылки на #"868003.files/image001.jpg">
рис 1. Дизайн сайта.
Далее представлен код HTML-файла:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Education
website">
<meta name="keywords" content="education,
learning, teaching">
<link href="css/style.css"
rel="stylesheet" type="text/css">
<? include ("connect.php");?>
</head>
<body>
<? include ("header.php");?>
<? include ("left.php");?>
<td><h1>Bosh saxifaga xush kelibsiz
!</h1></td>
</tr>
<tr>
<td>
<table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr align="center">
<td width="100%" height="1"
align="center"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif"
width="13" height="1"></td>
<td width="100%"
bgcolor="#1A658C"><img src="images/spacer.gif"
width="1" height="4"></td>
<td><img src="images/spacer.gif"
width="5" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top">
<p>The term education is often used to refer to formal
education (see below). However, the word's broader meaning covers a range of
experiences, from formal learning to the building of understanding and
knowledge through day to day experiences. Ultimately, all that we experience
serves as a form of education.</p>
<p>It is widely accepted that the process of education
is lifelong. Studies have shown that the child already in uetero is educated by
the experiences it is exposed to.</p>
<p> accepted that the process of education is lifelong.
Studies have shown that the child already in uetero is educated by the
experiences it is exposed to.</p>
<p><em>From Wikipedia, the free
encyclopedia</em></p></td>
<? include ("footer.php");?>
</body>
</html>
.2 Insert.php
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251" />
<title>Education website</title>
<meta name="description" content="Education
website">
<meta name="keywords" content="education,
learning, teaching">
<link href="css/style.css"
rel="stylesheet" type="text/css">
<? include ("connect.php");?>
<style type="text/css">
<!--
.style4 {color: #000000}
->
</style>
</head>
<body>
<? include ("header.php");?>
<? include ("left.php");?>
<td><h1><marquee width="300"
scrollamount="3">Ustun qoshish
</marquee></h1></td>
</tr>
<tr>
<td>
<table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr align="center">
<td width="100%" height="1"
align="center"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif"
width="13" height="1"></td>
<td width="100%"
bgcolor="#1A658C"><img src="images/spacer.gif"
width="1" height="4"></td>
<td><img src="images/spacer.gif"
width="5" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top">
<?php include ("connect.php")?>
<?php if (isset ($_GET['otprov']))
{
$query="Insert into XODIMLAR
(ID_XODIM,FISH,TUGULGAN_YILI,TURMUSH_QURGANLIGI,FARZANDLAR_SONI,MAOSHI,JINSI,MALAKASI)
Values
('$_GET[ID_XODIM]','$_GET[FISH]','$_GET[TUGULGAN_YILI]','$_GET[TURMUSH_QURGANLIGI]','$_GET[FARZANTLAR_SONI]','$_GET[MAOSHI]','$_GET[JINSI]','$_GET[MALAKASI]')";
?>
<Form name="insert" method="get"
action="insert.php"><br />
<table><tr><td><br>ID<br><br></td><td>
<input type="text"
name="ID_XODIM"/></br></tr></td>
<tr><td><br>FAM<br><br></td><td>
<input type="text"
name="FISH"/></br></tr></td>
<tr><td><br>TUGULGAN YIL<br><br></td><td>
<input type="text"
name="TUGULGAN_YILI"/></br></tr></td>
<tr><td><br>TURMUSH
QURGANI<br><br></td><td><input type="text"
name="TURMUSH_QURGANLIGI"/></br></tr></td>
<tr><td><br>FARZANDLAR
SONI<br><br></td><td><input type="text"
name="FARZANTLAR_SONI"/></br></tr></td>
<tr><td><br>MAOSHI<br><br></td><td>
<input type="text"
name="MAOSHI"/></br></tr></td>
<tr><td><br>JINSI<br><br></td><td>
<input type="text"
name="JINSI"/></br></tr></td>
<tr><td><br>MALAKASI<br><br></td><td>
<input type="text" name="MALAKASI"/></br></tr></td>
<tr><td><input type="submit"
name="otprov"
Value="opravit"/></br></tr></td>
</table>
</form>
<?php if ($result){echo"malumot
saqlanadi";}?>
<? include ("footer.php");?>
</body>
</html>
.3 Header.php
<style
type="text/css">
<!--
.style1
{font-weight: bold}
->
</style>
<table
width="765" border="0" align="center"
cellpadding="0" cellspacing="0"
bgcolor="#FFFFFF">
<tr>
<td
height="1"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td>
<div
style="position:absolute; top:60px; margin-left:7px; width:200px">
<table
width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td
align="center"><img src="images/logo.jpg"
alt="" width="100" height="101"></td>
</tr>
<tr>
<td>
</tr>
<tr>
<td>
</tr>
</table>
</div>
<img
src="images/t1.jpg" width="207" height="237"
/></td>
<td><table
width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td><img
src="images/t2.gif" width="355"
height="37"></td>
</tr>
<tr>
<td><img
src="images/t2-5.jpg" width="355"
height="200"></td>
</tr>
</table></td>
<td><img
src="images/t3.jpg" width="293"
height="237"></td>
</tr>
</table></td>
</tr>
<tr>
<td
height="1"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td
width="1"><img src="images/ml.gif"
width="7" height="35"></td>
<td
background="images/mbg.gif">
<tr>
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35">
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35">
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35">
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35"></td>
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35"></td>
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35"></td>
<td>
<td
width="1"><img src="images/msep.gif"
width="5" height="35"></td>
<td>
<td><a
href="foto.php">Galeriya</a></td>
<td
width="1"><img src="images/ms.gif" alt=""
width="1" height="34"></td>
</tr>
</table></td>
<td
width="1"><img src="images/mr.gif" width="8"
height="35"></td>
</tr>
</table></td>
</tr>
<tr>
<td
valign="top"><table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
2.4 Foto.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "#"868003.files/image002.gif">
Рис 2. База данных в PhpMyAdmin.
.2 Соединение с сервером и базой данных
_connect( ) - устанавливает связь с сервером MySQL_select_db( ) - выбор
БД на сервере:
<?php @mysql_connect("localhost","root") or die("Невозможна подключится к
серверу");
@mysql_select_db("oybekdb") or die("Невозможна выбрать Базу Данных");
?>
где- имя компьютера, root -
имя пользователя;
@ перед функцией mysql_connect() подавляет все сообщения об ошибке,
которые заменяются сообщением в die(); oybekdb - имя базы данных;
$link - идентификатор соединения;
Можно функции соединения с сервером и БД поместить в файл, например, conn.php.
После завершения работы с сервером MySQL соединение необходимо закрыть
функцией mysql_close( ).
Заключение
Создание сайта ради фирмы является важнейшим аспектом ее деятельности
наряду вместе с выводом новых товаров на рынок, их позиционированием, рекламой
а также продвижением. При этом оригинальное качество сайта, вероятно,
значительно повлиять на репутацию фирмы.
Первое, место с чего начинают оценку сайта, это его наружный вид, но еще
дальше делают выводы, изучая содержимое. Посетители сайта составляют взгляд о
дизайне не более чем за секунду, а также на основании с его мнения формируется
внушительная частица представления о фирмы-владельце. Дизайн сайта - это первое
впечатление, которое оказывает на посетителя, а также от него зависит, захочет
ли он продолжить дальнейший просмотр всего всемирного сети-ресурса или он
поторопится покинуть просматриваемые страницы этого сайта.
При изготовлении web-сайта, в особенности дизайна, мы должны учитывать
все самые необходимые основные потребности к его разработке: начиная от
создания сайта в едином, фирменном стиле фирмы-заказчика впредь до
максимального удобства пользования сайтом, в навигации, а также в интуитивном
понятном интерфейсе.
В данном курсовом проекте я создала сайт на тему " Институт ".
На эту тему не только я создала и обрабатывала некоторые сайты. Но смысл в том,
что я создала этот сайт в связи, с базой данных которой увеличивает качества и
безопасность информаций, хранящиеся в сайте, в сайте все информации будут
загружаться из базы данных, а это намного эффективнее и сэкономит время
пользователей при посещении сайта. То есть, когда пользователь посещает
страницы сайта, при этом страницы сайта загружаются быстрее, чем обычные
страницы сайтов.
Выполнение курсового проекта я закрепила знания, полученные в течение
всего курса "Интернет технологии". В результате выполнения курсового
проекта я применила накопленные мною знания, которые и помогли мне разработать
данный курсовой проект. Передо мной была поставлена задача, которая нашла своё
решение, как в теоретической, так и в практической части. Была создана сайт
"Институт" в Macromedia Dreamweaver 8, а также разработано приложение
в PhpMyAdmin, работающее с данной базой данных.
web приложение сайт сервер
Список использованной литературы
1. А.Матросова, М.Чаунин, А.Сергеев - HTML 4.0
. Энди Харрис. PHP/MySQL
для начинающих.
. Дмитрий Котерев. Самоучитель PHP 4.
. Под редакцией В.Н. Печниковой. Создания Web - сайтов без посторонней помощи.
. Б. Артанов. Web - мастеринг без посторонней помощи.
. Лаура Томсон, Люк Веллинг - PHP и MySQL
7. uch1.tashiit.uz