| |
Создание главной и основной страницы(шаблона)
Перейдём непосредственно к самому созданию сайта. Определение темы сугубо Ваше
право, я выбрал произвольную тему, весь код который будет использоваться для
ваяния паги Вы можете скопировать и использовать как свой заменив лишь контент
и графику на свою.
<теория>
Далее определимся какие(и сколько) разделы будет садержать сайт, в
нашем случае это будут 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/004/button.gif" width=45 align=left border=0></A></TD>
<TD>обо
мне<A href="itogad.html"><IMG height=45 alt="Биография"
src="/images/004/buttongr.gif" width=45 align=left border=0></A>
</TD></TR>
<TR>
<TD>гестбука<A
href="itogab.html"><IMG height=45 alt="Гостевая книга(пока
нет -не проходили)"
src="/images/004/buttonred.gif" width=45 align=left border=0></A></TD>
<TD>ссылки<A
href="itogag.html"><IMG height=45 alt="Мои любимые сайты"
src="/images/004/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/004/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/004/button.gif" width=45 border=0><FONT
color=#ff6600>фото</FONT></TD>
<TD><A title="обо мне" href="itogad.html"><IMG
height=45 alt="обо мне" src="/images/004/buttongr.gif" width=45
border=0>обМне</A></TD>
<TD><A title=links href="itogag.html"><IMG
height=45 alt=links src="/images/004/buttonye.gif" width=45
border=0>ссылки</A></TD>
<TD><A title=GB href="itogab.html"><IMG
height=45 alt=GB src="/images/004/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/004/nurd.gif" width=140 border=0></P>
<P align=center>[мой кактус]</P>
</TD>
<TD>
<P align=center><IMG
height=133 alt="" src="/images/004/2100000.jpg" width=90 border=0></P>
<P align=center>[мой кролик]</P>
</TD>
<TD>
<P align=center><IMG height=96 alt=""
src="/images/004/Internet.gif" width=140 border=0></P>
<P align=center>[эт Я]</P>
</TD>
<TD>
<P align=center><IMG height=82 alt="" src="/images/004/opr009HW.jpeg"
width=110 border=0></P>
<P align=center> [друганы]</P>
</TD>
<TD>
<P align=center><IMG
height=115 alt="" src="/images/004/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>
|
вспомним что...
| основной код |
внесённый нами код(изменяемый) |
код "шапки" |
код меню |
код блока, таблицы содержащей контент |
[Назад]
[Содержание]
[Вперед]
|
