Jump to content
  • 0

Не получаются сайты на практике


Tascan
 Share

Question

Всем привет!

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

С этого момента я решил приняться за практику.

Но возникла такая проблема: скачиваю я, например, макет из интернета (будь то psd макет или готовый набор файлов). В случае с набором файлов, я пытаюсь просто переписать html, а следом и css код. Так сказать скопировать его, чтобы понять как этот сайт сделан. И в принципе понимаю все теги и все свойства. Так же понимаю, для чего они там присутствуют.

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

Может у кого-нибудь была такая же проблема на начальном этапе изучения. Подскажите, что в таком случае делать?

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 1
12 hours ago, Tascan said:

Может у кого-нибудь была такая же проблема на начальном этапе изучения. Подскажите, что в таком случае делать?

Научись верстать вначале отдельные элементы - навигация, форма, список, блок с текстом и т.п. Выше тебе уже посоветовали пару ссылок с материалами. Добавлю еще "Большая книга CSS" также построена по типу от простого к сложному, от частного к общему, и не плохо структурирует материал. Все сталкивались с подобным. Это вполне нормально и проходит с опытом и практикой.

Link to comment
Share on other sites

  • 0

Проблема ступора, когда общая логика понятна, но не вполне понятно в какой ситуации какую логику применить. К тому же, описание этой логики на формальном языке даёт дополнительное препятствие, поскольку какие-то реальные задумки требуется адекватно формализовать, а связи между задачами, и адекватными им средствами языка, нет. В результате более-менее всё понятно, а что писать? Что необходимо? Что это даст? Адекватно ли это? Возможно ли то? И так далее... Хочется каких-то ориентиров.

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

Link to comment
Share on other sites

  • 0
8 hours ago, Launder said:

Проблема ступора, когда общая логика понятна, но не вполне понятно в какой ситуации какую логику применить. К тому же, описание этой логики на формальном языке даёт дополнительное препятствие, поскольку какие-то реальные задумки требуется адекватно формализовать, а связи между задачами, и адекватными им средствами языка, нет. В результате более-менее всё понятно, а что писать? Что необходимо? Что это даст? Адекватно ли это? Возможно ли то? И так далее... Хочется каких-то ориентиров.

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

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

4 hours ago, DivMan said:

Умеешь делать простую сетку с 3 калонками, с шапкой и подвалом? 

На htmlbook есть похожий макет с 3 колонками, В общем суть его строения понял. Но опять же, если вдруг на практике придётся делать похожий макет, пока у меня это не получится.

Link to comment
Share on other sites

  • 0
2 hours ago, sigma77 said:

Научись верстать вначале отдельные элементы - навигация, форма, список, блок с текстом и т.п. Выше тебе уже посоветовали пару ссылок с материалами. Добавлю еще "Большая книга CSS" также построена по типу от простого к сложному, от частного к общему, и не плохо структурирует материал. Все сталкивались с подобным. Это вполне нормально и проходит с опытом и практикой.

Спасибо, обязательно прочитаю книгу)

Я думал, что нужно сразу пытаться полный сайт сделать. А оказывается, желательно вначале научиться верстать отдельные элементы. Большое спасибо за информацию.

Link to comment
Share on other sites

  • 0
6 hours ago, DivMan said:

Возьми любой макет, объведи отдельные блоки и покажи здесь.

Если не сложно, можно уточнить: просто взять psd макет, обвести в нём блоки и так же psd сюда скинуть. Или просто по грубому, скриншот макета сделать и уже в программе, по типу paint, выделить.

Просто я пока в этом не очень силён. Не знаю, как лучше делать.

Link to comment
Share on other sites

  • 0
48 minutes ago, Tascan said:

Если не сложно, можно уточнить: просто взять psd макет, обвести в нём блоки и так же psd сюда скинуть. Или просто по грубому, скриншот макета сделать и уже в программе, по типу paint, выделить.

Просто я пока в этом не очень силён. Не знаю, как лучше делать.

Например вот так

Spoiler

2737ae116a37e1b8c5cff970da83d8a0.jpg

Знаешь для чего я сделал вложенный блок, там где велосипеды?

Link to comment
Share on other sites

  • 0
44 minutes ago, DivMan said:

Например вот так

  Hide contents

2737ae116a37e1b8c5cff970da83d8a0.jpg

Знаешь для чего я сделал вложенный блок, там где велосипеды?

Если я так понял, то это необходимо для точного и правильного позиционирования блоков с велосипедами на странице.

Внешнему блоку присваивается position: relative, а вот внутренним уже position: absoulte. И как я понял, тогда будет меньше проблем с их отображением в разных браузерах. И также поможет правильно разместить их относительно друг друга.

Link to comment
Share on other sites

  • 0
6 hours ago, DivMan said:

В данном случае position здесь вообще не нужен. 

https://jsfiddle.net/9emkj8sz/

Круто получилось. Спасибо за информацию)

А можно поподробнее о классе clearfix. Как я понял, он рисует нижнюю линию. Но как совмещаются эти три свойства в нём я не понял.

Link to comment
Share on other sites

  • 0

никакую линию он не рисует. линию рисует свойство border;

clearfix это просто название класса, его можно назвать, как угодно.

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

И что бы это место не занималось, применяется класс clearfix, в котором есть свойство clear со значением both.

Оно говорит, что бы следующий элемент начинался только с новой строки, то есть под элементом.

 

Забыл сказать, что когда флоатишь, то эти элементы выходят из общего потока, то есть родительский блок их видеть не будет. 

если в моём примере убрать clearfix, то чёрная рамка сожмётся. (блок схлопнется)

и если потом добавить

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

 

то этим ты говоришь этому блоку, что бы он увидел все вложенные в него зафлоатные элементы и обернул их.

 

Почитай ещё про clear http://htmlbook.ru/CSS/clear

И по гугли что такое clearfix

Никогда не делай каркас сайта с помощью position. (пока вообще забудь это свойство )

в основном оно применяется для декоративных элементов, но не как не для сеток. 

Edited by DivMan
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • <div class="modal-body"> <?php if (!empty($_SESSION['cart'])): ?> <?php else: ?> <p>Корзина пуста...</p> <?php endif; ?> <?php if (!empty($_SESSION['cart'])): ?> <table class="table"> <thead> <tr> <th scope="col">Изображение</th> <th scope="col">Название</th> <th scope="col">Цена</th> <th scope="col">Количество</th> </tr> </thead> <tbody> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <tr> <td><a href="#"><img class="br-3" src="images/<?= $item['img'] ?>" alt="<?= $item['title'] ?>"></a></td> <td><p><?= $item['title'] ?></p></td> <td><?= $item['price'] ?></td> <td> <?= $id ?> <a id="min-to-cart" href="?cart=minus&id=<?= $id ?>" class="min-to-cart minus-btn badge-light minus-to-cart" data-id="<?php echo $id ?>"></a> <?= $item['qty'] ?> <a id="plus-to-cart" href="?cart=plus&id=<?= $id ?>" class="plus-btn badge-light plus-to-cart" data-id="<?php echo $id ?>"></a> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <button type="button" class="btn delete-btn remove-from-cart" id="remove-from-cart" data-id="<?php echo $id ?>"></button> </td> </tr> <?php endforeach; ?> <tr> <td colspan="4" align="right">Товаров: <span id="modal-cart-qty"><?= $_SESSION['cart.qty'] ?></span> <br> На сумму: <?= $_SESSION['cart.sum'] ?> руб.</td> </tr> </tbody> </table> <form action="telegram.php" method="POST"> <legend>Введите имя, номер телефона и адрес:</legend> <div class="form-group"> <input type="text" class="form-control" id="" name="name" placeholder="Введите имя"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="phone" placeholder="Введите телефон"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="address" placeholder="Введите адрес"> </div> <div class="form-group"> <textarea name="msg" placeholder="Ваш комментарий..."></textarea> </div> <button type="submit" class="btn btn-success">Оформить заказ</button> <button type="button" class="btn btn-danger" id="clear-cart">Очистить корзину</button> </form> <!--<script src="common/scripts.js"></script>--> <?php endif; ?> </div> <div class="modal-footer"> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <?php endforeach; ?> </div>               функция полной очистки работает, видимо потому что этот класс есть изначально, а не появляется из-за сессии   $('.add-to-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'add', id: id}, dataType: 'json', success: function (res) { if (res.code == 'ok') { showCart(res.answer); } else { alert(res.answer); } }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content .remove-from-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); console.log(id); }); $('#get-cart').on('click', function (e){ e.preventDefault(); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'show'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content').on('click', '#clear-cart', function (){ $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'clear'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); });
    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Добрый день.На сайте после удаления переводчика gtranslate появилась такая вот проблема:при переадресации с http://tto-studio.com.ua/ на https://tto-studio.com.ua/ru/ вылетает такая вот страница <strong>https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=</strong>Что мне делать, как это можно исправить? А точнее — на странице https://tto-studio.com.ua/ru/ в адресной строке я удаляю букву s с http s:// и нажимаю enter. И заместь того чтобы меня кинуло на страницу — https://tto-studio.com.ua/ru/ меня кидает на — https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy