Помощник
|
С чего начать верстку сайта с нуля?Пожалуйста, помогите новичку! |
nad-sergo
|
Сообщение
#1
|
||
|
|
||
|
|||
Электроник |
26.3.2012, 18:43;
Ответить: Электроник
Сообщение
#2
|
|
Но вот опять проблема, с которой думаю многие сталкивались. У меня есть знания HTML & CSS, но как с помощь них начать верстать хотя бы простенькие сайты с PSD макетов? макеты для того, чтобы видеть как и что нужно сверстать определяетесь в каком редакторе верстать берёте свои знания по HTML & CSS смотрите на макет (если не умеете, то научитесь хоть "открывать фотошоп") начинаете верстать (всё что не знаете как, или не понимаете почему - сначала гуглите, это тоже не просто так все пишут/советуют) несколько способов которые могут помочь/сам и когда начинал, и сейчас так делаю: в случаях когда нужна точность верстки вплоть до 1px, заливайте background (блоков, столбцов, ...) разными цветами, потом делаете скрин, и в фотошопе увеличиваете и линейкой проверяете что, где и сколько (лучше сразу учиться верстать точно, а не винить дизайнеров из-за своей беспомощности) если код большой и непонятно в чём ошибка, то лучше искать её вырезая и проверяя отдельные части кода копируя их в другой/чистый файл/страницу (например если много таблиц в таблицах, вырезать по таблице и проверять этот код отдельно, заливать background делать скрины, и смотреть на них в фотошопе) то есть поиск ошибки методом исключения Да и многие говорят, что то, что нужно, освоится в ходе практики. в большинстве случаев так и есть пс:совет, старайтесь не выкладывать свои файлы тут во вложении или где-нибудь ещё не всем нравиться скачивать непонятно что вы же написали что PSD макет, что тяжело сделать из него jpg и прикрепить как картинку.. |
|
|
Оксана Мязина |
27.3.2012, 5:28;
Ответить: Оксана Мязина
Сообщение
#3
|
|
сначала создайте базовую структуру страницы, то есть ее макет. http://htmlbook.ru/layout . в архиве приложена уже какая-то верстка, я так понимаю она не ваша? кстати, насчет шрифтов. если в макете попадается нестандартный шрифт, не пугайтесь, чаще всего его подключить не займет и пяти минут (при условии что шрифт у вас уже имеется). вот хорошие сервисы для этого http://www.fontsquirrel.com/fontface/generator и http://fontface.codeandmore.com/
|
|
|
Lovller |
27.3.2012, 9:17;
Ответить: Lovller
Сообщение
#4
|
|
Adobe Photoshop - Как разрезать макет сайта
Вот полезная ссылочка для новичков. Сам по ней учусь. Там еще много интересных уроков |
|
|
nad-sergo
|
Сообщение
#5
|
|
(если не умеете, то научитесь хоть "открывать фотошоп") . Спасибо, но фотошоп открывать я умею. пс:совет, старайтесь не выкладывать свои файлы тут во вложении или где-нибудь ещё не всем нравиться скачивать непонятно что вы же написали что PSD макет, что тяжело сделать из него jpg и прикрепить как картинку. Я не думал, что на таких форумах люди могут выкладывать файлы с вирусами, мне кажется, большинство людей тут за помощью. Буду теперь это учитывать. Сейчас приложу JPG. |
|
|
nad-sergo
|
Сообщение
#6
|
|
в архиве приложена уже какая-то верстка, я так понимаю она не ваша? Да, эта верстка не моя. Но я должен сверстать такой же сайт, как и на той верстке. вот хорошие сервисы для этого http://www.fontsquirrel.com/fontface/generator и http://fontface.codeandmore.com/ Спасибо большое, думаю они мне пригодятся. |
|
|
nad-sergo
|
Сообщение
#7
|
|
|
|
|
DelphinPRO |
27.3.2012, 14:04;
Ответить: DelphinPRO
Сообщение
#8
|
|
как это делаю я. :)
0. Проверяем поступление предоплаты на счет. :) (опционально) 1. Открываю фотошоп, загружаю макет, в целом оцениваю сложность. 2. Иду на кухню, делаю чашку кофе, возвращаюсь. 3. Более тщательно изучаю макет. Мысленно разбиваю на логические блоки. 4. Блин, булочки забыл - на кухню, за булочками. 5. Ну вот, можно работать. Отключаем все слои, кроме фоновых. 6. Нарезаем фоновые картинки (общий фон для сайта), часто это однопиксельные градиенты, либо крупные, неоднородые изображения. 7. Включаем слои с изображением шапки. нарезаем. В голове при этом уже складывается приблизительная структура HTML ... Повторяем для остальных элементов. 8. Булочки кончились - опять к холодильнику. ) 9. Берем заготовку с html страницей, наиболее подходящую под данный макет, открываем текстовый редактор на втором монике, чтобы было видно картинк и код одновременно. 10. описываем весь html (приблизительно, отдельные элементы потом допишем) 11. Запускаем программку или вручную переписываем все классы, присутствующие в html, в файл CSS / 12. по порядку описываем стили для классов. 13. на этом этапе страница уже практически готова, и правильно отображается в современных браузерах. 14. кофе кончился, идем на кухню за очередной порцией. 15. открываем страницу в FF и с помощью расширений pixelperfect и firebug подгоняем верстку, чтобы она максимально соответствовала макету. 16. остается только пофиксить баги в отсталых браузерах, если клиент не против - используем изящную деградацию. (квадратные углы вместо круглых, непрозрачность вместо полупрозрачности, png8 вместо png24 и прочее). Если против - пробуем убедить (правда делаем это перед началом работы). Не получается убедить - используем костыли. 17. ждем поступления денег на счет. |
|
|
Оксана Мязина |
27.3.2012, 15:09;
Ответить: Оксана Мязина
Сообщение
#9
|
|
|
|
|
nad-sergo
|
Сообщение
#10
|
|
как это делаю я. :) 0. Проверяем поступление предоплаты на счет. :) (опционально) 1. Открываю фотошоп, загружаю макет, в целом оцениваю сложность. 2. Иду на кухню, делаю чашку кофе, возвращаюсь. 3. Более тщательно изучаю макет. Мысленно разбиваю на логические блоки. ................................................................................ ................................................................................. ................................................................... 17. ждем поступления денег на счет. Ну да, на словах вроде все просто. Но когда берешься выполнять верстку, возникает куча вопросов. Спасибо что ответили и поделились своим опытом :rolleyes: Да и еще, если кто может дать ссылочки на простенькие PSD макеты, которые можно сверстать новичку, то оставьте пожалуйста их тут. Спасибо. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Быстрая индексация страниц сайта и обратных ссылок - 2Index | 38 | 2Index | 6620 | Вчера, 12:56 автор: 2Index |
|
Какой % отказов нормален для сайта? | 11 | Aloof | 2811 | 16.4.2024, 12:48 автор: diviner99 |
|
SiteAnalyzer - бесплатная программа для аудита и анализа сайта | 77 | Chaser | 74211 | 9.4.2024, 11:36 автор: Chaser |
|
Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта | 0 | Alex-777 | 844 | 7.4.2024, 18:05 автор: Alex-777 |
|
Продвижение молодого сайта | 30 | maxmer | 6575 | 26.3.2024, 21:49 автор: c4p1t4l15t |
Текстовая версия | Сейчас: 19.4.2024, 8:35 |