Приглашаем посетить
Культура (niv.ru)

Создание главной и основной страницы (шаблона)

Создание главной и основной страницы(шаблона)

Перейдём непосредственно к самому созданию сайта. Определение темы сугубо Ваше право, я выбрал произвольную тему, весь код который будет использоваться для ваяния паги Вы можете скопировать и использовать как свой заменив лишь контент и графику на свою.

<теория>

Далее определимся какие(и сколько) разделы будет садержать сайт, в нашем случае это будут 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>&nbsp;</P>
<P>&nbsp;</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>&nbsp;Страничканачинающего<BR>     мегакулпорталостроителя-=KR0Na= -

< P> <FONTsize=1><!--здесь можно вставить свой логотип сайта -->&nbsp;</FONT></P>
    </TD>
  </TR>
  
       

<!--меню страницы-->

<TR>
    <TD>&nbsp;
<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>&nbsp;</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>

вспомним что...

основной код внесённый нами код(изменяемый) код "шапки" код меню код блока, таблицы содержащей контент

[Назад] [Содержание] [Вперед]