Как правильно сверстать

Тема в разделе "Верстка", создана пользователем R:man, 25 июл 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. R:man

    R:man Постоялец

    Заблокирован
    Регистр.:
    26 фев 2012
    Сообщения:
    136
    Симпатии:
    95
    Верстаю свой рисованный шаблон в Adobe Dreamweaver CS5, далее его будут встраивать в скрипт, интересует:
    1. Перейти по ссылке (примерно такой же шаблон) нужно ли верстать верхний слайдер и форму поиска или оставить как картинку,если да то подскажите как.
    2.Выпадающее горизонтальное меню лучше верстать с помощью js?
    3.Как быть с кучей файлов css (их лучше соединить в один или оставить разделенными),чтоб не зависала главная страница.(я новичок в этом)
    4.Может еще пару советов.
     
  2. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    1. Слайдер очень похож на стандартный. Я думаю внедрить такой будет не проблема даже при полном незнании javascript.
    Очень интересно, что ты имел в виду под "форму поиска оставить как картинку"? Она вполне себе верстается обычными тегами.
    2. Выпадающее меню можно сверстать средствами CSS, при некоторых изысках, можно включить немного JS. Но обязательно, чтобы теги ссылок существовали на странице HTML прямыми <a href="/раздел/страница"> (то есть не формировались JSом) - иначе их не найдут и не проиндексируют поисковики.
    3. Когда будешь вводить свой шаблон/сайт в production, можно все ccs и js собрать в два файла. Можно также минимизировать их. Для этого есть проверенная временем десктопная тулза Перейти по ссылке вариант.
    4. По формам и верстке посоветую посмотреть такую чтуку как Перейти по ссылке(специально для новичков), облегчает процесс верстки блоками, верстку форм, слайдеров и много всего другого. Просто находишь на страницах бутстрапа то, что тебе понравилось и копируешь код рядом с этим местом к себе на страничку. :)
     
  3. R:man

    R:man Постоялец

    Заблокирован
    Регистр.:
    26 фев 2012
    Сообщения:
    136
    Симпатии:
    95
    1.То есть получается,что нужно верстать слайдер и подключать его к JS ? ,чтобы он переключался;так же как я понял и с формой поиска.Но вопрос зачем мне с этим париться,если потом я шаблон отдам автору скрипта, и он уже будет его внедрять в скрипт...или я чего то недопонимаю(может быть ему тогда придется доверстывать ?).
    2.С менюшкой буду пытаться..
    3.Про production не понял.Прошу прощения, но верстаю первый раз.
     
  4. recasher2k12

    recasher2k12

    Регистр.:
    19 фев 2012
    Сообщения:
    156
    Симпатии:
    78
    Production - это стадия проекта после внедрения его в работу. Соответственно, если будешь отдавать кому-то шаблон, то не заморачивайся с объединением и сжатием файлов.
    Ну со слайдером погуглил, нашел самое похожее:
    Перейти по ссылке
    Кроме того, здесь можно найти много других:
    Перейти по ссылке


    Чтобы работал тот слайдер, на который дал ссылку нужно:
    1) подключить jQuery
    Код:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></src>
    2) подключить слайдер
    Код:
     <script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
    3) HTML-код элементов слайдера
    Код:
    <div id="slider1">
      <div>Slide one content</div>
      <div>Slide two content</div>
      <div>Slide three content</div>
      <div>And so on...</div>
    </div>
    4) Скрипт для включения слайдера
    Код:
    <script type="text/javascript">
    $(function(){
      $('#slider1').bxSlider({
        displaySlideQty: 3,
        moveSlideQty: 1
      });
    });
    </script>
    
    Как видишь, все вроде просто как белый день. То есть, особо не нужно быть программистом, чтобы все внедрить в страничку.

    С формами все также просто:
    Уже с подключенным jQuery, скачиваешь и подключаешь bootstrap
    Код:
    <script src="/js/bootstrap.js"></script>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet">
    
    Далее HTML-код формы:
    Код:
    <form class="form-horizontal">
      <fieldset>
        <legend>Legend text</legend>
        <div class="control-group">
          <label class="control-label" for="input01">Text input</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="input01">
            <p class="help-block">Supporting help text</p>
          </div>
        </div>
      </fieldset>
    </form>
    
    Перейти по ссылке
    Если ты только начинаешь, то тебе это надо научиться делать обязательно. HTML, JS, CSS приходят только с опытом, пока минимум пять раз не сделаешь - не получится.
     
    Роман123456 нравится это.