WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Советы » Урок8 Создание главной и основной страницы(шаблона)

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


Дата публикации: 18-06-2008

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

<теория>

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

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Октябрь 2018 (14)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта



5.00-8 10pr

5.00-8 10pr

shina00.ru


Случайная цитата

Неизвестный автор:

"Танцевать можно от печки, а сочинять дизайн - от лампочки."

Опрос

Какой текстовый редактор Вы используете?

OpenOffice
AbiWord
Notepad++
UltraEdit
PSPad
Microsoft Office
Microsoft Блокнот
Другой...