Создание Web-сайта

 















Создание Web-сайта

Введение


Интернет стал неотъемлемой частью нашей жизни. Сегодня можно не выходя из дома оплатить коммунальные услуги, заказать продукты питания, пополнить счет мобильного телефона, общаться с друзьями, дальними родственниками, коллегами, пересылать различные файлы, документы и многое другое.

Однако для работы в интернете нужны как минимум три вещи: браузер, доступ в интернет и начальные навыки построения и структуры Web-сайтов.

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

Цель курсовой работы - изучить принцип построения сайтов, выучить основные теги, применяемые при его создании, создать автономный web-сайт.

1.Создание HTML страницы


.1 Инструментарий


Для начала создадим на рабочем столе папку, в которую будем складывать все файлы в процессе обучения. Для этого щелкаем правой кнопкой мыши в любом месте рабочего стола, затем нажимаем «Создать» и из выпавшего списка выберите «Папку» (Рис. 1) и даем имя папке, например - HTML.


Рисунок 1 - Создание папки


Теперь можно приступать к созданию страницы. Создать простую страницу HTML очень просто.

Открываем программу «Блокнот», «WordPad» или любой другой текстовый редактор, который есть на Вашем компьютере.

Заполняйте очень внимательно, важен каждый знак, каждая запятая, каждая кавычка, иначе может не получиться. Код можно писать как заглавными, так и маленькими буквами.

<HTML>

<HEAD>

<TITLE>Курсовая работа. Интернет-магазин одежды</TITLE>

</HEAD>

<BODY BGCOLOR="#CCCCFF"> Курсовая работа. Интернет-магазин одежды </BODY>

</HTML>


Этим кодом мы создали страницу сайта. Теперь надо сохранить эту страницу в формате HTML. В меню текстового редактора нажимаем «Файл» «Сохранить как..» в открывшемся окне выбираем место для сохранения файла. У нас это рабочий стол, указываем папку в которой будет лежать файл - это папка «HTML» нажимаем на кнопку «Открыть». Затем в строке Имя файла пишем, например: page.html и нажимаем кнопку «Сохранить». В папке «HTML», в зависимости от браузера появится один из этих значков (Рис 2.)


Рисунок 2 - Ярлыки браузеров


В дальнейшем, когда будем добавлять или изменять код, в меню текстового редактора будем нажимать «Сохранить». Чтобы открыть и посмотреть на созданную страницу, нажмите на значок правой кнопкой мыши и в выпавшем списке выберите «Открыть». Страница откроется в браузере, правда пока она пустая или, если учитывать введенный текст, « Пробная страница для курсовой работы», этот текст и будет отображен на странице.

Если мы закрываем текстовый редактор в котором писали код, чтобы открыть его вновь и продолжить работу, нажимаем на значок и в выпавшем списке выбираем «Открыть с помощью» и из списка выберите «Блокнот».


1.2 Основные теги


Сайты создаются с помощью тегов. Открывает и закрывает страницу теги <HTML> и </HTML>, они ставятся в начале и конце страницы. Затем идут теги <HEAD> и </HEAD>, это служебные теги, между ними пишутся команды для браузера. Например, теги <TITLE> и </TITLE>, все, что написано межу этими тегами, будет отображаться при открытии страницы в самом верху браузера. Между тегами <BODY> и </BODY> помещается все содержимое страницы сайта, таблицы, тексты, картинки, в общем, все из чего состоит сайт.

Цвет страницы прописывается в теге <BODY> атрибутом bgcolor="#CCCCFF". В кавычках обозначается код цвета, может быть любым. Так же фоном страницы можно сделать картинку. Для этого в теге <BODY> вместо атрибута BGCOLOR, применим атрибут BACKGROUND="images/имя картинки"


1.3 Построение таблиц


Для форматирования сайтов применяются таблицы. Таблицы оформляются тегами <TABLE> и </TABLE>. Между ними теги <TR> и </TR>, а между тегами TR теги <TD> и </TD>. Между тегами <TD> и </TD>, помещается текст, вставляются картинки и все что будет видно на странице сайта.

Теги <TR> и </TR>, обозначают горизонтальную строку таблицы, а теги <TD> и </TD> - вертикальную колонку или ячейку.

Ниже показана строка таблицы, которая состоит из одной ячейки, в коде она будет располагаться так: <TR><TD> Строка из одной ячейки </TD></TR> (Рис.3).

Разделим эту строку на четыре ячейки (Рис. 4) и код будет таким:


<TR>

<TD>1- ячейка</TD>

<TD>2- ячейка</TD>

<TD>3- ячейка</TD>

<TD>4-ячейка</TD>

</TR>


Рисунок 3 - Строка из одной ячейки


Рисунок 4 - Строка из нескольких ячеек


Внутри тега <TABLE> прописываются атрибуты; BORDER, CELLPADDING, CELLSPACING. В коде это будет так: <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>

Рассмотрим значение этих атрибутов:

BORDER - указывает, будет ли рамка вокруг таблицы и ее размеры. Рамки можно задать любой цвет, делается это значением BORDERCOLOR="#CC6666";

CELLSPACING - указывает, будет ли пространство между ячейками таблицы и размеры этого пространства, или ячейки будут плотно прилегать друг к другу;

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

Таблице нужно указать размеры, ширину - WIDTH="" и высоту - HEIGHT="", а также цвет - BGCOLOR="#". Для каждой ячейки, можно задавать свой размер и цвет. Все эти значения прописываются внутри тега <TD>, так:

<TD width= 650 height=550 bgcolor="#00FFCC">

В следующем примере строку для содержимого страницы, разделим на две части, и в код этой строки между тегами <TR></TR> добавим теги <TD></TD> для левой колонки. Теперь шапка и строка для меню расположены над двумя колонками, вместо одной в первом примере, также строка низа расположена под двумя колонками, поэтому в теги этих строк добавим атрибут COLSAN=2.

Если страница будет из трех колонок, то между тегами <TR></TR>, в которых размещена средняя часть сайта, помещаем еще одну пару тегов <TD></TD>, для правой колонки, значение COLSPAN, будет равняться 3, вместо 2 в предыдущем примере, так как верх и низ сайта, расположены уже над и под тремя колонками.

В следующем коде, размеры и цвета указаны такие, какие применялись к этой таблице. (Рис. 5)


<HTML>

<HEAD>

<TITLE>Курсовая работа: Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY>Курсовая работа: Интернет-магазин одежды</BODY>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD WIDTH=1 HEIGHT=8 BGCOLOR=#FFFFCC rowspan=3> BACKGROUNDLEFT</TD>

<TD height=100 BGCOLOR=#CCCC99 colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD WIDTH=1 HEIGHT=80 BGCOLOR=#FFFFCC rowspan=3>BACKGROUNDRIGHT</TD>

</TR>

<TR>

<TD HEIGHT=250 BGCOLOR="#0000FE">Платья</TD>

<TD HEIGHT=250 BGCOLOR=#66CC66>Юбки</TD>

</TR>

<TR>

<TD HEIGHT=250 BGCOLOR=#FF9999>Майки</TD>

<TD HEIGHT=250 BGCOLOR=#FFFF66>джинсы</TD>

</TR>

</TABLE>

</BODY>

</HTML>


Рисунок 5 - Отображение кода

Еще один вид таблицы, когда вертикальная ячейка расположена вдоль нескольких или всех строк таблицы. Для такой ячейки применяется атрибут ROWSPAN, он указывает, вдоль какого количество строк располагается эта ячейка. В нашей таблице это 4 строки - для шапки, для меню, центр страницы, и низ страницы, значит ROWSPAN=4.


1.4 Добавление изображений


Картинки вставляются с помощью тега <img> с атрибутом src, прописывается это так: Создаем в папке «Мои документы» новую папку и называем ее «Уроки». Внутри папки «Уроки» тоже создаем новую папку и даем ей имя, обычно папке с картинками дается имя «images», но можно назвать и по другому, в эту папку помещаем картинки, которые будем применять при создании сайта. Так же, в папку «Уроки» помещаем файлы сайта. В этом случае, код для вставки картинки пишется так: <img src="images/имя картинки"> Если у папки с картинками будет другое имя, то вместо images пишем ее имя. Так же для картинок применяются размеры, width и height, в коде будет так:

<img src="images/имя картинки" height=130> Если не указывать размер картинки, то по умолчанию она будет вставлена на сайт своего реального размера. Если картинка лежит в той же папке, где и файлы сайта, как на картинке слева, то в этом случае, код для вставки картинки пишется так:

<img src="имя картинки" height=130>

Для выравнивания картинок применяется атрибут ALIGN. Этот атрибут применяется со значениями:=right - картинка будет прижата к правому краю,а текст будет располагаться слева от картинки.=left - картинка будет располагаться слева, а текст будет справа от картинки.=top - текст будет располагаться сверху.=middle - текст будет располагаться посредине.=bottom - текс будет располагаться под картинкой.

Следующие атрибуты, которые применяются к картинкам это VSPACE и HSPACE VSPACE=5 - вертикальный отступ картинки от края=5 - горизонтальный отступ от края. И наконец, атрибут ALT - это подсказка, при наведении курсора к картинке.

Любую картинку или изображение можно сделать фоном. Сейчас в нашей виртуальной страничке сайта, в ячейке для шапки, картинку сделаем фоном. В отличии от картинки, на которой нельзя писать текст, он может располагаться только по сторонам - справа, слева и т.д. На фоновой картинке можно писать текст в любом месте (Рис.6).


<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY>Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD height=100 BGCOLOR=#CCCC99 colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>Платья</TD>

<TD HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>Юбки</TD>

</TR>

<TR>

<TD HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>Майки</TD>

<TD HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>джинсы</TD>

</TR>

</TABLE>

</BODY>

</HTML>


Рисунок 6 - Отображение главной страницы


1.5 Ссылки


Ссылки бывают, на внутренние страницы сайта, на определенное место, той же страницы сайта, на сайты в интернете и на e-mail. Ссылки прописываются тегами <a> и </a>, открывающий тег <а> пишется со значением href: <a href=" В этих кавычках пишется путь где лежит страница на которую ведет ссылка">Здесь пишется текст ссылки</a>.Чтобы задать ссылке нужный цвет, в теге<BODY> устанавливаем атрибут LINK="#FFFFFF" - цвет ссылки, атрибут VLINK="#FFFFFF" - цвет посещенной ссылки, атрибут ALINK="#63FFB7" - цвет ссылки при наведении на нее курсора мыши

Если страница лежит в той же папке, то путь прописывается, так как в нашем коде, если же страница лежит в другой папке, например у нас папка называется «Уроки» и в ней лежит несколько страниц сайта - «jinsi.html» , «maiki.html» , «platiya.html» и другие страницы «html» , также в этой папке может находится еще одна папка, допустим, называется «primer», в ней тоже лежат страницы, «1.html», «2.html» и т.д ссылка на эти страницы будет такая: <a href="primer/1.html">Текст ссылки</a>.

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

Для платьев (Рис. 7);


<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY link="#FFFFFF" alink="#FF6600" vlink="#FFFFFF">Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>

<a href="platiya.html">ПЛАТЬЯ</a></TD>

<TD HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>

<a href="ubki.html">ЮБКИ</a></TD>

</TR>

<TR>

<TD HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>

<a href="maiki.html">МАЙКИ</a></TD>

<TD HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>

<a href="jeans.html">джинсы</a></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рисунок 7 - Страница с платьями


<<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY>Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. ДЖИНСЫ</TD>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD HEIGHT=420 BACKGROUND="images/jinsi1.jpg" align=left>CAMELOT</TD>

<TD HEIGHT=420 BACKGROUND="images/jinsi2.jpg" alt="ПЛАТЬЯ" align=center>WAGON</TD>

</TR>

<TR>

<TD HEIGHT=420 BACKGROUND="images/jinsi3.jpg" align=center>D&G</TD>

<TD HEIGHT=420 BACKGROUND="images/jinsi4.jpg" align=center>BABAYGA</TD>

</TR>

</TABLE>

</BODY>

</HTML>


Рисунок 8 - Страница для джинс


<<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY>Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. ЮБКИ</TD>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD HEIGHT=420 BACKGROUND="images/ubka1.jpg" align=center>CAMELOT</TD>

<TD HEIGHT=420 BACKGROUND="images/ubka2.jpg" alt="ЮБКИ" align=center>WAGON</TD>

</TR>

<TR>

<TD HEIGHT=420 BACKGROUND="images/ubka3.jpg" align=center>D&G</TD>

<TD HEIGHT=420 BACKGROUND="images/ubka4.jpg" align=center>BABAYGA</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рисунок 9 - Страница для юбок


Теперь, когда готовы страницы, которые будут у нас ссылками, мы соединим их с главной страницей так, чтобы при нажатии на главной страницы ссылки, открывалась та страница, ссылку которой мы нажали. Для этого дописываем в нашем коде дополнительные теги.


<HTML>

<HEAD>

<TITLE>Курсовая работа:Интернет-магазин одежды</TITLE>

</HEAD>

<BODY>

<BODY link="#FFFFFF" alink="#FF6600" vlink="#FFFFFF">Курсовая работа:Интернет-магазин одежды</BODY>

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<TR>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundleft.jpg" rowspan=3> </TD>

<TD height=100 BGCOLOR=#FFFFF colspan=2> Курсовая работа. Интернет-магазин одежды</TD>

<TD HEIGHT=100 BACKGROUND="imagesweb/backgroundright.jpg" rowspan=3></TD>

</TR>

<TR>

<TD HEIGHT=250 BACKGROUND="imagesweb/platiya.jpg" align=center>

<a href="platiya.html">ПЛАТЬЯ</a></TD>

<TD HEIGHT=250 BACKGROUND="imagesweb/ubki.jpg" alt="ЮБКИ" align=center>

<a href="ubki.html">ЮБКИ</a></TD>

</TR>

<TR>

<TD HEIGHT=250 BACKGROUND="imagesweb/maiki.jpg" align=left>

<a href="maiki.html">МАЙКИ</a></TD>

<TD HEIGHT=250 BACKGROUND="imagesweb/jinsi.jpg" align=center>

<a href="jeans.html">джинсы</a></TD>

</TR>

</TABLE>

</BODY>

</HTML>


Если нужно сослаться на какой то другой сайт в интернете, то ссылка прописывается так: <a href="#"justify">Ссылкой может быть и картинка, прописывается так:

<a href="страница.html"><img srс="папка,где картинка/имя картинки"></a>.

Подведя курсор к картинке и нажав на нее, вы перейдете на указанную страницу.

Ссылка на почтовый ящик создается так:

<a href="mailto:[email protected]"> пишите на адрес</a>, щелкнув по этой ссылке, откроется почтовая программа, останется только написать текст письма и нажать кнопку «отправить».


1.6 Работа с текстом


Как видите, в тексте есть заголовок и есть подзаголовки. Если, мы будем просто набирать текст на клавиатуре, у нас получится мешанина, все предложения сольются друг с другом, Согласитесь, такой текст, читать невозможно, нужно выделить заголовок, да и абзацы должны быть в тексте.

В тегах <font> </font>, применяется и элемент FACE, задает имя шрифта (Рис. 10) например:


Рисунок 10 - Имя шрифта


Для создания заголовков в HTML, существуют теги <H> </H>, эти теги могут принимать значение от 1 до 6 (Рис. 11) например, размер шрифта, заключенный в теги :


Рисунок 11 - Жирный шрифт


Для придания размера шрифта, можно использовать теги<font> </font> со значением size (Рис. 12) но в отличии от тегов <H> </H>, шрифт не будет жирным, например:


Рисунок 12 - Размер шрифта


Так же в тегах <font> </font>, атрибутом COLOR, задается цвет шрифта, например:

<font color="#FF3300">Цвет текста будет такой</font>

<font color="#9933CC">Цвет текста будет такой</font>

<font color="#993333">Цвет текста будет такой</font>

Тегами <SPAN> </SPAN>, с элементом STYLE, задается цвет под конкретным текстом (Рис. 13) например:

Рисунок 13 - Цвет текста


Для переноса текста на другую строку применяется не парный тег <br>. Для создания абзацев существует теги <p> </p>, в которых можно задавать значения элемента ALIGN. Например:

<p align="center">Текст будет располагаться в центре страницы </p>

<p align="right"> Текст выровняется по правому краю страницы </p>

<p align="left"> Текст выровняется по левому краю страницы </p>

<p align="justify">Выровняет текст по обеим сторонам страницы </p>

Текст может быть простым, жирным, курсивом, подчеркнутым и зачеркнутым. Жирный текст заключается между тегами

<b>Жирный текст </b>.

Текст курсивом, между тегами <I>Текст жирный, курсивом </I>

Текст подчеркнутый между тегами <U>Текст жирный подчеркнутый</U>

Текст зачеркнутый между тегами <STRIKE> Текст зачеркнутый</STRIKE>


1.7 Списки


Списки бывают маркированные и нумерованные. Маркированные списки оформляются тегами <UL></UL>. Между этими тегами пишутся теги <LI></LI>, внутри которых, пишется элемент списка. К тегам <UL></UL> применяется атрибут TYPE=".." со значениями Square - квадратик, Circle - незакрашенный кружок, Disk - закрашенный кружок. Например, чтобы список был как на рисунке ( Рис. 14,а ) код будет таким:

<UL TYPE="square">

<li>Художественная литература</li>

<li>Техническая литература</li>

<li>Другая литература</li>

</UL>

Если изменим значение TYPE="circle", список будет выглядеть так (Рис. 14, б)

Значение TYPE="disk", маркировка списка будет такой (Рис. 14, в)

Нумерованные списки оформляются тегами <OL></OL> так же со значениями в атрибуте TYPE="..", в котором указывается, как будет пронумерован список, по умолчанию, нумерованный список оформляется арабскими цифрами (Рис. 14, г)

Если в код добавит атрибут со значением TYPE="A" (Рис. 14, д)

Соответственно, если поставить маленькую букву a, то нумерация всего списка будет маленькими буквами, если поставить <OL TYRE="I">, то список будет пронумерован римскими цифрами (Рис. 14, е)

Списки могут быть и вложенными, например (Рис. 14, ж)


Рисунок 14 - Виды списков

1.8 Таблица каскадных стилей

форматирование сайт таблица каскадный

Таблица каскадных стилей представляет собой набор правил для оформления различных элементов страницы. Применяя CSS можно для каждого элемента страницы прописать свой стиль, такие как цвет текста, размер и расположение шрифта, как будет выглядеть меню. Описание стилей размещается между тегами <HEAD> и </HEAD> в тегах <STYLE> и </STYLE>.

Описание стилей может располагаться как в самой странице сайта, так и в отдельном файле. Если сайт большой, в нем много страниц, описание стилей удобнее располагать в отдельной странице. Для этого открываем блокнот, сохраняем его в той же директории, где лежат файлы сайта, под именем "style.css" и начинаем прописывать элементы, например:

html,body {margin:0px;padding:0px;} - чтобы не было промежутков между таблицей и границами экрана;

td.menu {PADDINGLEFT:30px; PADDING-top: 30px;} - указывает отступ слева и сверху от края, для таблицы в которой расположено меню;

.newText {PADDING-LEFT: 220px; PADDING-right: 220px; FONTWEIGHT:bold; FONT-SIZE: 16px; FONT-FAMILY:arial, verdana, sans-serif; color: black} - это описание стиля для бегущей строки, ее можете вставлять по желанию, если она не нужна удалите ее;

p { padding-left:0px; padding-right: 15px; } - указывает границы текста помещенного в теги <p>;

.Nav2 { COLOR: #000000; text-align:middle; font-weight: bold; } - Расположение и цвет текста класса Nav2,в данном примере цвет черный, текст жирный, располагается посредине;

.Nav2 A:link { COLOR: #000000; text-decoration: none; font-weight: bold; }- Цвет ссылки, text-decoration: none: - означает, что ссылка не будет подчеркнутой, если вместо "none" написать "underline" ,ссылка будет подчеркнутой;

- .Nav2 A:visited { COLOR: #000 text-decoration: none; font-weight: bold; } - цвет и шрифт посещенной ссылки;

.Nav2 A:hover { COLOR: #DC143C; text-decoration: none font-weight: bold;} - Цвет ссылки при наведении на нее курсора.

Теперь сохраняем файл style.css, а в странице сайта между тегами<HEAD> и </HEAD> добавляем ссылку на файл CSS, в коде страницы сайта это будет выглядеть так:


<HTML>

<HEAD>

<TITLE> </TITLE>

<LINK href="style.css" type=text/css rel="stylesheet">

</HEAD>

<BODY>


Если у вас одна или несколько страниц сайта, стили можно прописывать в самой странице сайта так:


<HTML>

<HEAD>

<TITLE> </TITLE>

<STYLE type="text/css">

<!--

Здесь будет само описание стилей

->

</STYLE>

</HEAD>

<BODY>

1.9 Оптимизация структуры сайта


Структура сайта, это правильное формирование опубликованных материалов, разделение их на разделы и категории, расположение файлов сайта, создание удобного меню и др.

Если на вашем письменном столе нет выдвижных ящиков, куда можно складывать документы, то очень скоро, вы перестанете ориентироваться в них. То же самое и с компьютером, единственное отличие состоит в том, что компьютер обладает более гибкими возможностями. Например, вместимость выдвижных ящиков письменного стола ограничена, а «выдвижные ящики» компьютера могут быть расположены по Вашему усмотрению и в них поместятся все ваши документы.

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

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

Если в готовых СMS-системах структура сформирована, и для того чтобы создать там новую страницу, надо указать к какому разделу и категории она будет относится, то в обычном HTML-сайте вы сами решаете как и в какой последовательности будут расположены файлы. Можно все файлы сложить вперемежку в одну папку, в результате может получится как на картинке. Правда здесь показано небольшое количество файлов, на практике их может оказаться гораздо больше и даже пусть файлы в папке будут упорядочены по типу и алфавиту, все равно , когда файлов будет много, работа с ними усложнится.

Обычно в составе сайта есть картинки, видеофайлы, скрипты, файлы для скачивания и другие, все это нужно упорядочить. Для картинок создается отдельная папка images. Если картинок много, в папке images, создайте дополнительные папки, например, картинки для оформления дизайна сайта, можно сложить в саму папку images, другие картинки можно распределить либо по видам, например смайлы в одну папку, фотографии в другую и так далее. Главное не забывайте правильно прописывать путь к картинке. Если для картинки лежащей в самой папке images путь будет <img src="images/ппп.jpg>, то для картинки лежащей в отдельной папке внутри папки images, путь будет <img src="images/имя папки/ппп.jpg>.

Отдельные папки создайте для видеофайлов, для скриптов, если есть файлы для скачивания, для них тоже создайте папку download. Внутри папки download, тоже можно создать подпапки и распределить файлы по видам, например папка для книг, другая папка для скачивания видео и т.д.

Страницы сайта разделите на разделы, основные страницы поместите в корневой папке, второстепенные страницы, разместите в отдельные папки для каждой категории.

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

2.


Создание Web-сайта Введение Интернет стал неотъемлемой частью нашей жизни. Сегодня можно не вы

Больше работ по теме:

КОНТАКТНЫЙ EMAIL: [email protected]

Скачать реферат © 2017 | Пользовательское соглашение

Скачать      Реферат

ПРОФЕССИОНАЛЬНАЯ ПОМОЩЬ СТУДЕНТАМ