Инструкция, создания сайта

werwen · December 21, 2012

Доброго времени суток, форумчане. Есть желание создать сайт, но проблема в том, что не знаю с чего начать. Интересует, такой вопрос, как начать грамотную разработку сайта? С чего начать лучше? База данных? CMS? А может, с самого HTML?

werwen · December 24, 2012

С этим все понятно. Теперь, какой лучше, выбрать размер сайта? Что лучше резиновая верстка или фиксированная?

eis · December 24, 2012

С этим все понятно. Теперь, какой лучше, выбрать размер сайта? Что лучше резиновая верстка или фиксированная?

Для каждого случая - свое решение.

madhed · December 24, 2012

Создается HTML+CSS+JavaScript, все это добро, так сказать), натягивается на CMS. После этих "не сложных" действий, во всю эту конструкцию , можно внедрить PHP, которая будет иметь, непосредственное, соединение с базой данных. Надеюсь я правильно все понял и изложил?))

Само "натягивание" и есть внедрение php и подключение базы. Если, конечно, cms содержит php, а не написана, к примеру, на Java или Grails... PHP не обязательно для работы с базами данных)

Edited December 24, 2012 by madhed

npofopr · December 24, 2012

Начните с фиксированной.

werwen · December 24, 2012

Размер 1024х768, оптимальный?

npofopr · December 24, 2012

Размер 1024х768, оптимальный?

Ну возьмите длину 980px, а высота тут не принципиальна. Я про саму страницу.

А уж потом будете учиться адаптировать.

werwen · December 24, 2012

Просмотр сообщенияwerwen (24 Декабрь 2012 - 21:35) писал:
Размер 1024х768, оптимальный?
Ну возьмите длину 980px, а высота тут не принципиальна. Я про саму страницу.
А уж потом будете учиться адаптировать.

Хорошо, с размерами я понял. На данный момент пока вопросов нет. Отрисуй, порежь, сверстай. Буду пробовать)Спасибо.

А вопрос не по теме, когда заработает поиск?

Edited December 24, 2012 by werwen

Николя223 · December 24, 2012

werwen, А... вы уже верстать умеете, а я тут целое сочинение написал, для первого урока) ладно... оставлю на всякий случай)))))

___________________________________________________________________________________________________________

http://jsfiddle.net/nikolya223/H4nTt/embedded/result/

ну можно и так сказать)) только учтите, что значение имеет - ширина, а высота в любом случае должна расстягиваться, (бывают исключения, но это уже эксклюзив...)

т.е другими словами берём блок, задаем ему ширину, и ровняем по центру. В нем уже располагаем все элементы - это один из вариантов))))


<!DOCTYPE html> <!--это один из самых важных элементов страницы, бывает разных видов. сейчас, рекомендуется писать так - стандарт html5-->
<html><!-- открытие документа --> 
<head>
<!-- с английского языка, название тега переводится как голова, что не лишено смысла. Он распологается сверху страницы. В данный тег рекомендуется подключать скрипты, таблицы стилей и мн.др. -->
<tittle>Титульная страница</tittle> <!--Это название нашей странички оно отображается на вкладке(т.к. пример я показываю во фрейме, мы его почему то видим)-->
<meta > - <!-- также в тег HEAD прописываются различные метазаголовки, которые несут множество функций, но об этом вам лучше прочитать в справочнике -->

<!-- Это таблица стилей, всю разметку рекомендуется заносить сюда(это я для простоты. на самом деле заносится в файл с расширением .css и подключается через <LINK   > )-->
<style>
    /*Выбираем элементы по тегу*/

    /*небольшой трюк*/
 html,body{
height: 100%;
    }
  /*Выбираем элементы по классу*/
.OurDivClass{
    width: 1024px;           /*ширина нашего элемента*/
    height: 100%;            /*высота нашего элемента*/
background-color: #48A4F7;   /*фон нашего элемента*/
margin: 0 auto;              /*с помощью margin - центруем наш элемент*/
    position: relative;      /*существуют relative,absolute, fixed. можно не задавать*/

} 
    /*все теги <p>(которые не имеют классов)будут отображаться так*/
    p1{color: #0C20DA;  
    margin: 20px auto;  
    font-family: Arial; /*задаём шрифт*/
    font-style: italic; /*выделяем элемент курсивом*/

    }
    .shapka{
    background-color: #6473F7;
    height: 50px;
    border-bottom: 3px solid white; /*рисуем нижний border*/
    }
    .leftColumn {display: table-cell; /*отображение элемента, подробнее в справочник*/
    width: 300px;
    height: 100%;
    text-align: center;
    background-color: #A697EE;
    border-right: 3px solid white;
    }
    .centrColumn{
    display: table-cell; /*отображение элемента, подробнее в справочник*/
    height: 100%;
    text-align: center;/*внутренние выравнивание, сейчас - по центру*/
    background-color: #959B9F;
    width: 724px;
    }
    .table{
    font-family: Tahoma;
    display: table; /*отображаем элемент как таблицу*/
    height: 100%;
    }

    footer{
    height: 50px;
    background-color: grey;
    width: 1024px;
    margin: 0 auto;

    bottom: 0px;
    border-top: 3px solid white;    
    }
</style>

</head>
<body>
<!-- по аналогии с HEAD, BODY переводится как тело, туловище. Именно здесь и прописывается всё содержание нашего документа -->

<div id='OurDiv' name='OurDivName' class='OurDivClass'>
<!--Это первый элемент нашей страницы. Как мы видем, мы, можем обозначить его как ID (можно использовать, для выбора индетификации элементов в скриптах, также можно по ID, выбирать элемент в таблице стилей, но для этой цели рекомендуется использовать классы). ID должен быть УНИКАЛЬНЫМ на странице!! 

name.. в данном теге указывать атрибут name - не имеет смысла, я сделал это только в целях наглядности.
 name, зачастую служит для идентификации элементов форм, при передачи их содержимого обрабатывающему скрипту. (для каких элементов нужен name? опять же прошу в справочник))))
Также, name, может быть идентификатором элемента в скрипте (да в принципе сейчас и классы, тоже могут являться)))

Разрешается использовать одинаковые имена для элементов. Зачем? прошу в справочник))))

class . он собственно и нужен, для идентификации элементов при составлении стилевых таблиц.
Элементы могут иметь одинаковый класс (собственно классы для этого и нужны: классифицировать(объединять в группы) элементы)
-->

  <!-- это обозначение неразрывного пробела, он нужен в тех случаях, когда нужно поставить несколько пробелов подряд, либо использовать в стилевой таблице  white-space (браузеры, по умолчанию показывают только один пробел, не важно сколько стоит в коде)-->

    <p1>точно таким же образом вкладываются другие элементы</p1>
    <div class="shapka">
        первый вложеный элемент

    </div>
    <div class="table">
       <div class="leftColumn">
        второй вложеный элемент

       </div>
       <div class="centrColumn">
        третий вложеный элемент

       </div>
    </div>
    <div class="footer"> 
    <!-- нижняя часть страницы, подвал. это место, чаще всего используют для размещения информации о сайте, копирайты и т.д.-->
    </div>
</div>

</body>





</html><!--Закрытие документа -->


?

Мы же именно поэтому вас к гуглу и отправляем))) понятное дело, что мы сможем объяснить лучше чем поисковик)) другое дело, сколько времени вы потратите на выяснение всех элементарных вопросов здесь, и сколько с помощью поисковика)))

Если здесь, то чувствую эта тема разрастется на сотни страниц))

Как хотите))

Edited December 24, 2012 by Николя223

werwen · December 24, 2012

Верстать не умею, точнее пробовал, ну маленькие, какие-то совсем детали. А за урок преогромнейшее спасибо))) Насчет гугл, мелкие вопросы я и сам найду, меня то что интересует. Я хочу в голове нарисовать общую картину, основных моментов. Грубо говоря модель. Мелкие какие-то моменты я и сам , думаю, смогу найти. А почему я хочу разобрать с более опытными, у меня диплом на носу, вот теперь и осваиваю, новые борозды невы))Зовут меня, кстати, Максим)

А насчет темы, я считаю, что многим даже будет , очень полезно и интересно, сразу все в одной теме прочитать. Не нужно там кусок, там кусок. Зашел и нарисовал в голове модель. А потом отдельные моменты более детально разбирать)

Edited December 24, 2012 by werwen

npofopr · December 24, 2012

werwen, А... вы уже верстать умеете, а я тут целое сочинение написал, для первого урока) ладно... оставлю на всякий случай)))))

___________________________________________________________________________________________________________

http://jsfiddle.net/nikolya223/H4nTt/embedded/result/

ну можно и так сказать)) только учтите, что значение имеет - ширина, а высота в любом случае должна расстягиваться, (бывают исключения, но это уже эксклюзив...)

т.е другими словами берём блок, задаем ему ширину, и ровняем по центру. В нем уже располагаем все элементы - это один из вариантов))))


<!DOCTYPE html> <!--это один из самых важных элементов страницы, бывает разных видов. сейчас, рекомендуется писать так - стандарт html5-->
<html><!-- открытие документа --> 
<head>
<!-- с английского языка, название тега переводится как голова, что не лишено смысла. Он распологается сверху страницы. В данный тег рекомендуется подключать скрипты, таблицы стилей и мн.др. -->
<tittle>Титульная страница</tittle> <!--Это название нашей странички оно отображается на вкладке(т.к. пример я показываю во фрейме, мы его почему то видим)-->
<meta > - <!-- также в тег HEAD прописываются различные метазаголовки, которые несут множество функций, но об этом вам лучше прочитать в справочнике -->

<!-- Это таблица стилей, всю разметку рекомендуется заносить сюда(это я для простоты. на самом деле заносится в файл с расширением .css и подключается через <LINK   > )-->
<style>
    /*Выбираем элементы по тегу*/

    /*небольшой трюк*/
 html,body{
height: 100%;
    }
  /*Выбираем элементы по классу*/
.OurDivClass{
    width: 1024px;           /*ширина нашего элемента*/
    height: 100%;            /*высота нашего элемента*/
background-color: #48A4F7;   /*фон нашего элемента*/
margin: 0 auto;              /*с помощью margin - центруем наш элемент*/
    position: relative;      /*существуют relative,absolute, fixed. можно не задавать*/

} 
    /*все теги <p>(которые не имеют классов)будут отображаться так*/
    p1{color: #0C20DA;  
    margin: 20px auto;  
    font-family: Arial; /*задаём шрифт*/
    font-style: italic; /*выделяем элемент курсивом*/

    }
    .shapka{
    background-color: #6473F7;
    height: 50px;
    border-bottom: 3px solid white; /*рисуем нижний border*/
    }
    .leftColumn {display: table-cell; /*отображение элемента, подробнее в справочник*/
    width: 300px;
    height: 100%;
    text-align: center;
    background-color: #A697EE;
    border-right: 3px solid white;
    }
    .centrColumn{
    display: table-cell; /*отображение элемента, подробнее в справочник*/
    height: 100%;
    text-align: center;/*внутренние выравнивание, сейчас - по центру*/
    background-color: #959B9F;
    width: 724px;
    }
    .table{
    font-family: Tahoma;
    display: table; /*отображаем элемент как таблицу*/
    height: 100%;
    }

    footer{
    height: 50px;
    background-color: grey;
    width: 1024px;
    margin: 0 auto;

    bottom: 0px;
    border-top: 3px solid white;    
    }
</style>

</head>
<body>
<!-- по аналогии с HEAD, BODY переводится как тело, туловище. Именно здесь и прописывается всё содержание нашего документа -->

<div id='OurDiv' name='OurDivName' class='OurDivClass'>
<!--Это первый элемент нашей страницы. Как мы видем, мы, можем обозначить его как ID (можно использовать, для выбора индетификации элементов в скриптах, также можно по ID, выбирать элемент в таблице стилей, но для этой цели рекомендуется использовать классы). ID должен быть УНИКАЛЬНЫМ на странице!! 

name.. в данном теге указывать атрибут name - не имеет смысла, я сделал это только в целях наглядности.
 name, зачастую служит для идентификации элементов форм, при передачи их содержимого обрабатывающему скрипту. (для каких элементов нужен name? опять же прошу в справочник))))
Также, name, может быть идентификатором элемента в скрипте (да в принципе сейчас и классы, тоже могут являться)))

Разрешается использовать одинаковые имена для элементов. Зачем? прошу в справочник))))

class . он собственно и нужен, для идентификации элементов при составлении стилевых таблиц.
Элементы могут иметь одинаковый класс (собственно классы для этого и нужны: классифицировать(объединять в группы) элементы)
-->

  <!-- это обозначение неразрывного пробела, он нужен в тех случаях, когда нужно поставить несколько пробелов подряд, либо использовать в стилевой таблице  white-space (браузеры, по умолчанию показывают только один пробел, не важно сколько стоит в коде)-->

    <p1>точно таким же образом вкладываются другие элементы</p1>
    <div class="shapka">
        первый вложеный элемент

    </div>
    <div class="table">
       <div class="leftColumn">
        второй вложеный элемент

       </div>
       <div class="centrColumn">
        третий вложеный элемент

       </div>
    </div>
    <div class="footer"> 
    <!-- нижняя часть страницы, подвал. это место, чаще всего используют для размещения информации о сайте, копирайты и т.д.-->
    </div>
</div>

</body>





</html><!--Закрытие документа -->


?

Мы же именно поэтому вас к гуглу и отправляем))) понятное дело, что мы сможем объяснить лучше чем поисковик)) другое дело, сколько времени вы потратите на выяснение всех элементарных вопросов здесь, и сколько с помощью поисковика)))

Если здесь, то чувствую эта тема разрастется на сотни страниц))

Как хотите))

http://csstemplater.com/

Верстать не умею, точнее пробовал, ну маленькие, какие-то совсем детали. А за урок преогромнейшее спасибо))) Насчет гугл, мелкие вопросы я и сам найду, меня то что интересует. Я хочу в голове нарисовать общую картину, основных моментов. Грубо говоря модель. Мелкие какие-то моменты я и сам , думаю, смогу найти. А почему я хочу разобрать с более опытными, у меня диплом на носу, вот теперь и осваиваю, новые борозды невы))Зовут меня, кстати, Максим)
А насчет темы, я считаю, что многим даже будет , очень полезно и интересно, сразу все в одной теме прочитать. Не нужно там кусок, там кусок. Зашел и нарисовал в голове модель. А потом отдельные моменты более детально разбирать)

http://www.sdelaysite.com/ вам дополнительно в помощь

Николя223 · December 24, 2012

npofopr, я знаю о таких генераторах))) здесь другой момент... это то же самое, что дать неопытному студенту в руки инструмент, а для чего он нужен и как работает - не говорить... Если у него (Макса) есть желание.. пусть спрашивает

Edited December 24, 2012 by Николя223

werwen · December 24, 2012

Огромное спасибо, за эти 2 ссылки. Очень интересные инструменты, для меня , точно))

npofopr, я знаю о таких генераторах))) здесь другой момент... это то же самое, что дать неопытному студенту в руки инструмент, а для чего он нужен и как работает - не говорить... Если у него (Макса) есть желание.. пусть спрашивает
Сообщение отредактировал Николя223: Сегодня, 00:20

Примерно так понимаю, посижу там, что будет не понятно, думаю вы ребята мне поможете разобраться))

Sign In

Инструкция, создания сайта

Question

Link to comment

Share on other sites

37 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information