Курсовая работа (т): Создание Web-сайта
<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="#"785618.files/image010.gif">
Рисунок 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>
Если у вас одна или несколько страниц сайта, стили можно прописывать в самой странице сайта так:
<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.