Вопрос по техническому алгоритму создания сайта

Палиндром · December 26, 2007

Привет

Я начинающий ("чайник")

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

1. В Фотошопе сначала создается дизайн сайта (например шапка, цвет общего фона, отдельные графические элементы и т.п.)

(?) - а как создавать блоки с меню, их сразу в фотошопе рисовать?

Потом файл сохраняется в формате (?) - я думаю, что jpeg

2. А что делать потом (?). Как вставлять текст в графический файл? Когда начинается верстка?

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

4. После верстки прикрепляем сайт к CMS (здесь вообще темный лес...)

Буду благодарен, если поясните мне, спасибо.

klierik · December 26, 2007

1. создание макета сайта. рекомендовано создавать в Photoshop так как он наиболее распрастранен.

2. после отрисовки макета и утверждения его заказчиком, исходник (psd, не jpeg) передаеться верстальщику.

3. кодер создает основную структуру сайта после чего начинает е? наполнять графическим и текстовым содержимым.

нарезка происходит в том же Photoshop

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

вот собственно все... если коротко

Палиндром · December 26, 2007

klierik , спасибо, стало понятнее, только по п.3. - верстальщик в какой программе создает структуру сайта? "Нарезка" в Фотошоп это и понимается как верстка?

Иван Шумов · December 26, 2007

1) рисуется дизайн исходя из тематики сайта. Обычно в Photoshop (профи сначала в Corel Draw половину делают...). получается макет так называемый. Макет должен содержать все необходимое, включая как выглядит нажатая кнопка если она есть. иногда макет таким образом делят на несколько файлов. соответственно выходящим файл разумеется должен быть PSD.

2) верстка. обязательное правило верстки - одинаковое визуальное представление во всей СТБ(Святая тройка браузеров IE, FF, Opera) ну и соответственно правильно тянуться и т.п.

3) прошу не путать структуру и дизайн. структуру можно хоть на бумажке набросать. Структура - логические разделы сайта. вот и все.

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

Vlad · December 26, 2007

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

1. Идея сайта (зачем, для кого)

2. Информационное проектирование (какие разделы будут на сайте, связи, типы связей, блоки, навигация...)

3. Дизайн (оформление, графика, стиль)

4. Верстка (превращение картинок в HTML)

5. Наполнение контентом

6. Программирование

7. Тестирование

8. Публикация

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

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

Палиндром · December 26, 2007

Спасибо, мотаю на ус

Палиндром · December 26, 2007

У тебя алгоритм не создания сайта, а подготовки макета. Само создание будет более обширным и сложным.
1. Идея сайта (зачем, для кого)
2. Информационное проектирование (какие разделы будут на сайте, связи, типы связей, блоки, навигация...)
3. Дизайн (оформление, графика, стиль)
4. Верстка (превращение картинок в HTML)
5. Наполнение контентом
6. Программирование
7. Тестирование
8. Публикация
Часть работ идут последовательно, а часть параллельно могут разрабатываться. Например, тексты пишутся независимо от дизайна. Программист также независим от дизайнера.
Еще не включил технические моменты, которые также разрабатываются параллельно с общим процессом. Технические это тип хостинга, выбор CMS, ее установка, возможности или написание собственных программ.

А у меня возник вопрос, вот между п. 3 и п.4 (т.е. при переходе от дизайна к верстке) - омжно подробнее об этом важном моменте. Допустим, у меня есть дизайн , сделанный в Фотошопе, чтобы начать делать верстку, я, сохранив файл в psd , куда иду дальше, в какую программу?

Вы меня извините за глупые, на первый взгляд вопросы, просто многое непонятно на начальном этапе, вдобавок вся эта информация потом может пригодиться другим новичкам

Flo · December 27, 2007

пункты 2 и 3...

когда ты нарисовал дизайн, у тебя есть графическое изображение, картинка... но она же статична, ты с ней ничего не можешь делать, картинка и все... а чтобы превратить это в ХТМЛ страницу (эта самая страница и будет твоим макетом) ты должен сделать ту самую загадочную и непонятную "нарезку"

это значит что ты в графическом редакторе (тот же фотошоп) из твоей картинки "вырезашь" элементы и вставляешь в свой шаблон

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

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

затем ты верстаешь сайт

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

например твой хтмл будет такой

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Мой первый сайт!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<p>Это мой первый сайт!</p>

</body>

</html>

затем создаешь стили для сайта - файл style.css (обычный текстовый файл)

p {
 color: red;
 text-decoration: underline;
}

теперь в твоем сайте будет написана строка, которая будет красная и подчеркнутая (благодаря стилям, которые мы написали: красная "color: red;", подчеркнутая "text-decoration: underline;")

на этом сайте htmlbook.ru есть хороший справочник тэгов (то что в хтмл файле ты видишь

, и т.д., т.е. все что между "<" и ">") - http://htmlbook.ru/html/

и справочник разметки css (те свойства, что мы писали - color, text-decoration) - http://htmlbook.ru/css/

Палиндром · December 27, 2007

Flo, спасибо за подробное руководство, стало намного понятнее на данном этапе.

А зачем мне использовать блокнот для html-разметки, когда есть Дреамвивер - там же намного легче все делать?

Иван Шумов · December 27, 2007

А зачем мне использовать блокнот для html-разметки, когда есть Дреамвивер - там же намного легче все делать?

кому-как

Палиндром · December 27, 2007

Может быть Дреамвивер какие-то "косяки" в коде делает, в отличие от текстовых (ручных) редакторов

Dimitry Wolotko · December 27, 2007

Не может быть - а так и есть. Много мусора.

Flo · December 27, 2007

Палиндром, можно и ДВ, хорошая штука, только если сам внимательно следишь за своим кодом

чтобы выучить тэги, лучше, конечно блокнот

в общем ДВ тоже хорош... особенно не самый новый, попробуй 4ю версию, он вообще мусора не дает в коде

вечером еще немного напишу, а ты пока придумай конкретные вопросы )))

Палиндром · December 27, 2007

Да, все верно, начинающему сначала нужно попробовать ручками код написать, чтобы почувствовать лучше процесс, а потом уже юзать ДВ.

Flo, насчет ДВ, у меня Adobe Dreamweaver CS3 9.0

Так хочется создать самому сайт, от и до (закончить прикреплением к движку и выкладыванием на сервер).

Как я понял, сначала просто на бумаге рисую простейшую структуру сайта, а потом в Фотошопе все рисую в графическом формате и сохраняю все это в формат psd. На этом этапе все вроде понятно, слабое знание Фотошопа надеюсь восполнить на курсах в Бауманке (на которые уже записан на начало января). А вот что дальше делать с рисунком - вроде понятно, но с другой стороны "я знаю, что ничего не знаю"

maddogrts · December 27, 2007

Палиндром

У вас как то все технично . Во первых не важно где рисовать. Хоть в паинте. На паинт то у вас знаний хватит. Другое дело что например ленточку или какие нибудь эффекты в шопе легче сделать. Но опять же это можно сделать и в паинте. Но все это потом в начале следует сделать структуру сайта, продумать интерфейс и все остально вот что должно получиться в итоге http://www.jvetrau.com/wp-content/uploads/...frames-home.png

Э"mj надо сделать на бумаге. Чтобы продумать все мелочи, а уже потом исходя из структуры лепить дизаин. А уже потом верстка и т.п

klierik · December 27, 2007

klierik , спасибо, стало понятнее, только по п.3. - верстальщик в какой программе создает структуру сайта? "Нарезка" в Фотошоп это и понимается как верстка?

верстальщик создает структуру по средствам разметки HTML

в качестве приложения разработки может быть использован как обычный блокнот (какая разница где писать код)

так и к примеру тот же DreamWeaver со своим набором функций которые облегчают написание кода

Не может быть - а так и есть. Много мусора.

не совсем так. смотря как именно использовать данное приложение...

я его использую в режиме кодинга и очень редко в режиме кодинг+дезигн

весь код полностью самописный и нет ни символа лишнего.

хотя начинающие начинают как правило "рисовать" страницы,

что в свою очередь естественно накидывают множество лишнего кода

Палиндром · December 27, 2007

А возможен такой "легковесный вариант"

1. Открываю Дреамвивер, в нем делаю табличную разметку, потом в нужные ячейки таблицы сразу вставляю и текст, и нужные картинки и т.п. (например, в Фотошопе сделал нужную картинку или привел в нужный вид фото)

2. Потом привожу в порядок код

3. Сохраняю в формате html и заливаю на сервер. Если нужно, то прикрепляю к нужному движку

Какие при таком подходе минусы или так вообще "не по технологии" делать нельзя

Палиндром · December 27, 2007

У меня еще один вопрос

В каком расширении должны быть файлы на сайте

Я в интернете нашел несколько вариантов

1. http://www.artlebedev.ru/news/ (т.е. без .html)

2. http://molotok.ru/48393_monety_.html?order...p=1&aid=7805605 (т.е. здесь набор цифр, букв и знаков)

3. http://top.rbc.ru/society/27/12/2007/131877.shtml (ну или .html или .htm)

Какой из этих вариантов лучше, к чему стремиитьтся?

Vlad · December 27, 2007

Используй расширение html и не забивай более этим голову. К перечисленным вариантам можно переходить когда есть веб-сервер и знание PHP как минимум.

Что касается превращения картинки в HTML-документ, то здесь требуется определенная квалификация как веб-дизайнера, так и веб-верстальщика. Я не зря добавил приставку веб к этим профессиям. Веб-дизайнер отличается от простого (полиграфического) дизайнера тем, что пересмотрел не одну сотню сайтов, знает как минимум HTML, CSS, законы композиции и особенности дизайна сайтов. Эти знания позволяют ему рисовать будущий сайт, а не картинку, которую только на стену повесить.

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

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

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

Палиндром · December 27, 2007

Vlad, а сейчас же говорят, что язык html утрачивает актуальность, сейчас xhtml, а у меня Adobe Dreamweaver тоже xhtml

Я как понял сайты, типа http://www.artlebedev.ru/news/ (без расширения) это и есть сайты, сделанные на css?

maddogrts · December 27, 2007

Палиндром

по мойму вы что то путаете. расширение это не обязательная сторона вопроса. , еслм там в конце стоит index.php или ничего не стоит, это не значит что там не используется html или xhtml. Html это язык гипертекстовой разметки, в любом случае с помощью него строиться все что мы видим в браузере.

Что значит сделаные на СSS ? у меня такое чувство что CSS и HTML для вас разные вещи. поправлю на всякий случай это неразделимые вещи (односторонне !)

http://www.artlebedev.ru/news/ это сайт сделаный на цмс ) с помощью шаблонов, которые в своб очередь писались на html и css

klierik · December 27, 2007

2Палиндром,

так хватит. на все ети вопросы вы вполне можете получить ответы изучая основы веб-верстки.

там же вы узнаете какие бывают разширения у файлов, какая разница между html/xhtml и что такое css/css2

как создава?тся ресурс от истоков и заканчивая готовым продуктом.

Палиндром · December 27, 2007

хорошо, продолжаю учить матчасть

Палиндром · January 5, 2008

Ребят, помогите понять одну вещь (я учу матчасть, но не могу нигде об этом прочитать).

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

Я читаю сейчас книгу Чарльза Уайк-Смита "Стильный сайт с помощью CSS" и там по алгоритму создания сайта (на примере сайта о гномах) показано, что сначала делается базовая разметка страницы с помощью кода, определяется примерный ее макет (2-3 колонки и т.д.), а потом в определенные места вставляются графические элементы, сделанные в фотошопе. Т.е. при таком подходе сначала не нужно полностью рисовать сайт, а просто можно нарисовать отдельные его элементы (шапку, к примеру), а потом их вставить в нужное место на сайте. Вопрос - обязательно ли в начале полностью рисовать сайт в фотошопе или можно ограничиться рисованием отдельных его элементов?

И второй вопрос у меня такой. Я к примеру нарисовал сайт в фотошопе, разрезал его на части, сохранил как (Save for Web & Devices) - сайт разрезался на несколько частей. Потом открываю его, к примеру, в Дреамвивере и вижу такой код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html><head>
<title>kony1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<style type="text/css">
TABLE {
 table-layout: auto
}
</style>

</head>


<body bgcolor="#E7D1AC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (kony1.psd) -->
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
		<td colspan="7" bgcolor="#E7D1AC"#E7D1AC"> </td>
<td bgcolor="#E7D1AC">
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
  </tr>
	<tr>
		<td colspan="3" rowspan="4" bgcolor="#E7D1AC"> </td>
		<td colspan="3">
			<img src="images/kony1_03.jpg" width="612" height="145" alt=""></td>
		<td rowspan="2" bgcolor="#E7D1AC"> </td>
  <td>
			<img src="images/spacer.gif" width="1" height="145" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" bgcolor="#E7D1AC"> </td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td rowspan="5" bgcolor="#E7D1AC"> </td>
  <td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td rowspan="10">
			<img src="images/kony1_08.jpg" width="119" height="720" alt=""></td>
		<td rowspan="9"><img src="images/kony1_09.jpg" width="367" height="517" alt="" /></td>
		<td rowspan="10">
			<img src="images/kony1_10.jpg" width="126" height="720" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="36" alt=""></td>
	</tr>
	<tr>
		<td rowspan="9">
			<img src="images/kony1_11.jpg" width="117" height="684" alt=""></td>
		<td colspan="2"><img src="images/kony1_12.jpg" width="200" height="88" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="88" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/kony1_13.jpg" width="200" height="13" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="13" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2"><a href="www.kony.ru"><img src="images/kony1_14.jpg" alt="" width="200" height="76" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="58" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/kony1_15.jpg" width="324" height="102" alt=""><img src="images/spacer.gif" width="1" height="84" alt=""></td>
  <td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td><img src="images/kony1_16.jpg" width="169" height="84" alt=""></td>
		<td rowspan="5">
			<img src="images/kony1_17.jpg" width="31" height="507" alt=""></td>
		<td> </td>
  </tr>
	<tr>
		<td><img src="images/kony1_18.gif" width="169" height="84" alt=""></td>
		<td>
			<img src="images/kony1_19.jpg" width="324" height="84" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="84" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/kony1_20.jpg" width="169" height="106" alt=""></td>
		<td>
			<img src="images/kony1_21.jpg" width="324" height="106" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="106" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/kony1_22.jpg" width="169" height="233" alt=""></td>
		<td rowspan="3">
			<img src="images/kony1_23.jpg" width="324" height="315" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/kony1_24.jpg" width="367" height="203" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="203" alt=""></td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2"> </td>
		<td>
			<img src="images/spacer.gif" width="1" height="82" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/kony1_26.jpg" width="324" height="12" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="12" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

У меня вопрос - здесь программа автоматически поставила на сайт табличную верстку, а если я хочу сверстать этот сайт с помощью слоев (DIV), вставить туда CSS элементы, то мне это можно будет сделать или нет?

Vlad · January 5, 2008

Верстка на таблицах проще, ее легче автоматизировать, поэтому программы легко преобразуют картинку в HTML-код на таблицах. Со слоями пока еще подобные кунштюки не проходят.

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

Вообще, дурная эта мысль делать эскиз веб-страницы в Фотошопе, неудобен он для этой цели. Используй Illustrator, гораздо продуктивнее результат получится.

Палиндром · January 6, 2008

Vlad, спасибо, все понятно пока, буду осваивать "люстру". Начинаю понимать сущность CSS - возможности у них намного шире, чем у таблиц и код страницы становится значительно меньше.

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

И мое мнение по Дреамвиверу - последняя версия его - отличнейшая программа, если следить за кодом, то нет никакого в нем мусора, вдобавок он при работе с xhtml и css-файлами сам подставляет нужные значения свойств... Может я просто не пользовался другими программами, но мне дреамвивер нравится.

Sign In

Вопрос по техническому алгоритму создания сайта

Question

Link to comment

Share on other sites

31 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

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

Link to comment

Share on other sites

Обсуждения

Important Information