Ну вот мы и закончили с уроками по общей теории создания сайта, теперь перейдём непосредственно к самому созданию сайта. Определение темы сугубо Ваше право, я выбрал произвольную тему, весь код который будет использоваться для ваяния паги Вы можете скопировать и использовать как свой заменив лишь контент и графику на свою.
<теория>
Далее определимся какие(и сколько) разделы будет садержать сайт, в нашем случае это будут 4е раздела: фотогаллерея, моя биография, ссылки на любимые сайты и гостевая. Фотогаллерея будет содержать фотографии которые я хочу показать всем. Моя биография будет интересна некоторым или вообще безинтересна :). Ссылки на любимые сайты, будет отражать сайты на которых я был и которые мне понравились. Гостевая - здесь не будет ничего, т.к. гостевая книга устанавливается отдельно. Начнём с того, что возьмём код шаблона из нашего 2го урока >>, и изменим его до следующего вида > где цветом выделенные области определяют -
основной код |
внесённый нами код(изменяемый) |
код "шапки" |
код меню |
код блока, таблицы содержащей контент |
Создание главной страницы сайта
Код HTML |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU">
<html>
<head>
<title>Главная страница сайта</title>
</head>
<!--здесь код который мы изменили, добавили.в главной странице--> |
<body bgcolor="#004080" topmargin=0><basefont face="'Comic Sans MS',fantasy" color ="black">
<P> </P>
<P> </P>
<P>
<table align="center" bgcolor="#004080" style="WIDTH: 367px; HEIGHT: 244px">
<TR>
<TD>
<hr size="1" color="White" noshade>
<TABLE style="WIDTH: 274px; HEIGHT: 101px" width=274 align=center
bgColor=#004080 border=0>
<TR>
<TD>фото<A href="itogac.html">
<IMG height=45 alt="Фото которое меня окружает"
src="images/button.gif" width=45 align=left border=0></A></TD>
<TD>обо мне<A href="itogad.html"><IMG height=45 alt="Биография"
src="images/buttongr.gif" width=45 align=left border=0></A>
</TD></TR>
<TR>
<TD>гестбука<A href="itogab.html"><IMG height=45 alt="Гостевая книга(пока нет -не проходили)"
src="images/buttonred.gif" width=45 align=left border=0></A></TD>
<TD>ссылки<A href="itogag.html"><IMG height=45 alt="Мои любимые сайты"
src="images/buttonye.gif" width=45 align=left
border=0></A></TD></TR></TABLE>
<hr size="1" color="Yellow" noshade></TD></TR></table></P></basefont> |
</body>
</html>
|
Создание страницы сайта, раздел - ФОТО
Код HTML |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ru">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="краткое описание сайта/страницы">
<META NAME="Keywords" content=" ключевые слова через запятую/смысловая нагрузка страницы ">
<TITLE>Страничка начинающего мегакулпорталостроителя/фото</TITLE>
</HEAD>
<BODY text="black" link="red" vlink= "maroon" alink= "fuchsia"font face="Arial,'Comic SansMS',Courier"
leftmargin=0 topmargin=0 bgcolor="#004080">
<basefont face="'Comic Sans MS',Arial" ><FONT face="Comic Sans MS">
<P align=left>
<!--здесь код который мы изменили, добавили. в странице сайта--> |
<!--шапка странички-->
<TABLE align=center>
<TBODY>
<TR>
<TD>
<P align=center><FONT color=#ccff00><IMG height=39
alt=logo src="images/logo.gif" width=40 align=left
border=0></A></P>
<P align= left> Страничканачинающего<BR> мегакулпорталостроителя-=KR0Na= - < P> <FONTsize=1><!--здесь можно вставить свой логотип сайта --> </FONT></P>
</TD>
</TR>
|
<!--меню страницы-->
<TR>
<TD>
<TABLE align=center>
<TR>
<TD><IMG height=45 alt=""
src="images/button.gif" width=45 border=0><FONT color=#ff6600>фото</FONT></TD>
<TD><A title="обо мне" href="itogad.html"><IMG
height=45 alt="обо мне" src="images/buttongr.gif" width=45
border=0>обМне</A></TD>
<TD><A title=links href="itogag.html"><IMG
height=45 alt=links src="images/buttonye.gif" width=45
border=0>ссылки</A></TD>
<TD><A title=GB href="itogab.html"><IMG
height=45 alt=GB src="images/buttonred.gif" width=45
border=0>гостевая</A>
</TD>
</TR>
</TABLE> |
<P> </P>
<!--таблица для контента -->
<TABLE align=center style="WIDTH: 628px; HEIGHT: 136px">
<TR>
<TD> |
<P align=center><IMG
height=82 alt="" src="images/nurd.gif" width=140 border=0></P>
<P align=center>[мой кактус]</P>
</TD>
<TD>
<P align=center><IMG
height=133 alt="" src="images/2100000.jpg" width=90 border=0></P>
<P align=center>[мой кролик]</P>
</TD>
<TD>
<P align=center><IMG height=96 alt=""
src="images/Internet.gif" width=140 border=0></P>
<P align=center>[эт Я]</P>
</TD>
<TD>
<P align=center><IMG height=82 alt="" src="images/opr009HW.jpeg" width=110 border=0></P>
<P align=center> [друганы]</P>
</TD>
<TD>
<P align=center><IMG
height=115 alt="" src="images/Jennifer-Lopez-feat.-Jadaki" width=106
border=0></P>
<P align=center>[моя гёрлФренд]</P>
</TD>
</TR>
</TABLE>
<STRONG><FONT color=#ffffff size=4>
<A title="На главную страницу сайта!" href="tr.html"><STRONG>
<FONT color=#ffffff >
</STRONG>
</A>
</FONT>
</STRONG>
<!--окончание таблицы для контента -->
</TD>
</TR>
</TBODY>
</TABLE> |
|
</P>
</FONT>
</BASEFONT>
</BODY>
</HTML>
|
вспомним что...
основной код |
внесённый нами код(изменяемый) |
код "шапки" |
код меню |
код блока, таблицы содержащей контент |
http://life-pics.ru/technology/