Как эффективно кодировать каркас веб-сайта? [закрыто]

Если у вас есть в уме, на бумаге или на экране изображение вашего веб-сайта, как вы должны его реализовать? Используете Adobe Creative Suite? Текстовый/HTML-редактор?

Насколько я понимаю, в прошлом люди «нарезали» изображения, но сейчас это кажется устаревшим. Я не графический дизайнер, но я разрабатываю сайты случайно (для себя), и я хочу знать, каковы современные лучшие практики. Я намерен использовать HTML5, CSS3, серверные (python) и клиентские фреймворки (Javascript).

Я в замешательстве - ваш более поздний комментарий «Учитывая эскиз или каркас, как вы эффективно создаете HTML и CSS?» кажется, задается совсем другим вопросом. Думаю, вам нужно переработать вопрос, чтобы получить осмысленные ответы.
@e100: отличается от чего? Я в замешательстве.
В отличие от вашего первоначального вопроса выше. Сначала вы спрашиваете: «Как эффективно кодировать каркас веб-сайта?» но затем «Если у вас есть в голове, на бумаге или на экране изображение вашего веб-сайта, как вам его реализовать?»; «Учитывая эскиз или каркас, как эффективно создать HTML и CSS?» который, кажется, о производственном коде.
Мне кажется похоже. Если у вас уже есть каркас или эскиз, как вы его кодируете — реализуете?
«Внедрение» при запуске с бумаги или идеи подразумевает, что вы хотите создать ее в цифровом формате (Photoshop, Illustrator, InDesign). «Код» буквально означает написание кода. Итак, спрашивая «как вы пишете код эффективно?» — это не тот же вопрос, что и «как лучше всего перенести мою идею из моей головы в компьютерный файл, чтобы я мог поделиться ею с другими?»
Но я не спрашивал: «Как лучше всего перенести мою идею из головы в компьютерный файл, чтобы я мог поделиться ею с другими?» Я просто хочу знать, как эффективно реализовать (закодировать) черновик/макет/каркас в качестве функционального веб-сайта с использованием HTML5 и CSS3. Я надеюсь, что это проясняет ситуацию.
Есть специальные приложения для вайрфрейминга, например Balsamiq или Axure. Кроме этого, просто html+css — хорошая идея.

Ответы (2)

Зависит от того, что вы подразумеваете под «каркасом».

Если вы хотите, чтобы подробный эскиз показывал функциональность без фактического кодирования, я считаю, что Wireframe Sketcher является полезным промежуточным шагом между «макетом в продукте Adobe» и «готовым CSS/HTML».

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

Допустим, у меня есть подробный эскиз. Как мне перейти к следующему шагу: рабочий сайт?
Извините, вы спрашиваете "как мне создать работающий сайт?" или «рабочий сайт — следующий шаг в этом процессе?»
Ни то, ни другое, я бы сказал. Имея набросок или каркас, как эффективно создать HTML и CSS? Какие инструменты вы используете?
Я работаю в Dreamweaver, но до тех пор, пока не доберусь до того момента, когда смогу импортировать изображения и контент, я обычно вручную ввожу код HTML и CSS в документ Dreamweaver.
Программные средства не имеют значения. Ключ в изучении HTML, CSS и JS.
-1 за бессовестный самозатык. Но вы неправильно написали "Лорен". Это n и нет o. :)
Говорит пользователь, который изменил свой никнейм с вполне понятного «Скотт» на что-то похожее на тег граффити от 12-летнего подростка. ;)

В наши дни, как только каркас создан, я просто использую BBEdit и браузер для построения каркаса.

Приложения для работы с изображениями — Photoshop, Illustrator и др. др. - используются для создания отдельных элементов, но становится все реже создавать целую страницу в приложении для рисования / рисования, а затем нарезать ее. Во многих случаях гораздо эффективнее просто кодировать.

Теперь я обобщаю до некоторой степени. Во многом это зависит от дизайна сайта. Есть некоторые сайты с интенсивным использованием изображений, которые необходимо создать графически, а затем разбить на соответствующие фоновые изображения или элементы для использования в CSS.