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

В рамках блатной рекламы на нашем форуме

Свернутый текст

(то есть еще тогда, когда я сама дизайны делать-то толком не умела)

1. запятая после "то есть"

сколлекционировала свои расшифровки этого вопроса для разных пользователей на разных ресурсах, и, наконец, решилась

2. запятая перед "и" не нужна

максимально-просто и при этом использовать максимальное количество приемов, которые, на мой взгляд

3. "максимально просто" - дефис не нужен
4. запятая перед "и"
5. "как можно большее количество приемов"
6. запятая после "на мой взгляд"

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

7. слитно

Делаем GIF анимацию легче - урок photoshop по работе с форматом GIF

8. "урок для..."

Таблицы в HTML - очень подробно о том, как сделать HTML код таблицы

9. "HTML-код" - дефис

Свернутый текст

Кто этот мужик в шапке? какое он имеет отношение к форуму?

10. второе предложение с заглавной

не с чистого листа бумаги, а с фотошопа или подбора клапарта

11. "клипарта"

Итог. первое, что при разработке дизайна надо учитывать - это ТЕМАТИКА ресурса

12. или "Итог: первое...", или "Итог. Первое..."

Для примера (чтоб было на чем показывать) я беру себе тему "Фентези". (буду делать стиль для свободного каталога)

13. запятая после "было"
14. точку из середины предложения - в конец

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

15. запятая перед "и"

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

16. запятая перед "и"

Не отвлекайтесь от этого процесса и не лазийте по сайтам

17. "лазьте"

Все, что вам нужно для хорошего дизайна у вас уже есть в голове.

18. запятая после "дизайна"
Это под спойлером:

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

19. с заглавный
Тот же спойлер:

Категории и заголовки будут торчать за пределы области форума

20. или "торчать за пределами...", или "выходить/выдаваться за пределы..."
Тот же спойлер:

Копирайт в отличие от шапки за края торчать не будет.

21. "в отличие от шапки" - в запятых
Тот же спойлер:

внутрь. в копирайте будет рабочая область для текста.

22. предложение с заглавной буквы

шаблона проекта. он должен быть чисто схематическим

23. или с заглавной, или через запятую

чтобы помнить то, что вы собрались делать и стараться не откланяться от цели.

24. запятая после "делать"
25. "отклоняться"

Но если до художника вам далеко пользоваться сайтами с исходниками - не грех

26. запятая после "далеко"

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

27. запятая после "обычно"
28. тире после "самостоятельно"

Однако, к сожалению, оба сайта содержат кучу хентая, если вам нет 18 даже не открывайте эти сайты

29. "Если..." - новым предложением или хотя бы "...хентая, поэтому, если..."
30. запятая после "18"

поиск на этих сайтах происходит ТОЛЬКО по тегам.

31. с заглавной

Но найти исходники - это не главное, Главное - это исходники подобрать.

32. с прописной

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

33. подчеркнутое - с заглавной
34. жирное - "ищете"

Например, красиво смотрится дизайн, где в шапка сделана из одной картинки и не красиво получается

35. зачеркнутое - лишнее
36. запятая после "картинки"

а возвращайтесь к листку бумаги - обозначьте на на своем шаблоне схематическое

37. зачеркнутое - лишнее

Свернутый текст

В этой части мы подробно разберем правила работы с макетом и то, как, собственно создавать свой макет.

38. запятая после "собственно"

без которых ваш макет превратится с кашу. где даже вы не сможете разобраться

39. вместо точки перед "где" - запятая

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

40. полагаю, что вместо "свои" должны быть "слои"
41. запятая после "элементу"

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

42. с заглавной

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

43. с заглавной
44. тире после "слои"

Не забудте удалить все неиспользованные слои по окончанию создания элемента удалите или вынесете в отдельную папку.

45. "забудьте"
46. "по окончании"
47. "По окончании создания элемента, не забудьте удалить или вынести в отдельную папку все неиспользованные слои"

Во-первых, названия получаются гораздо короче. А, во-вторых, не будет проблем

48. запятая после "А" не нужна
49. или в одно предложение, тогда "а" - с прописной, а вместо точки перед ней - запятая, или без союза вообще: "Во-вторых..."

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

Дело в том, что рождение "штучки справа", если вообще и происходит, то от бессилия. От того, что человек сменит используемый язык, бессилие не пропадет: он всё так же не будет знать, как эту "штучку" назвать иначе, и получится та же "штучка", только теперь еще и на английском, и ситуацию это не спасет совершенно, а может, даже еще больше запутает.
Я понимаю, о чем вы хотели сказать, и, вероятно, вы правы в своем совете, но аргумент, доказательство (речь о "во-вторых"), которое вы привели - не годящийся.

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

50. запятая после "клика"

Если вам все же понадобилось что-то склеить в один слой поступайте одним из двух методов:

51. запятая после "слой"

2 способ - сохраните текучий макет с учетом версии.

52. "текущий"

При работе с макетом надо представлять, пространство веб-страницы

53. запятая не нужна

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

основные разрешения - 1920*1200 (телеэкран)

создавайте макет шириной

54. все с заглавной

Высота может быть любой. можно поставить 1200

55. с заглавной

то можно просто всегда увеличить (или уменьшить)

56. "то всегда можно просто увеличить..."

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

57. с заглавной
58. запятая перед "в какую"
59. "пространство"
60. "пространство" вынести за скобку
61. запятая перед "и остается"

после создания большой рабочей области, создаем другие размеры с разрешением.
создаем новый файл размером 1600*1200
выбираем цвет и заливаем пространство. (я выбрала синий)

62. подчеркнутое - с заглавных
63. "создаем слой с другими размерами разрешения" - ?
64. скобки с их содержимым и точка - поменяны местами

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

65. с заглавной

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

66. с заглавной
67. запятая после "полосок"

файл с боковой полоской. ширина посчитана, а высота должна соответствовать

68. с заглавной

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

69. с заглавных
70. "скопируйте"

(слои находятся обычно на панели слоев слева. если у вас такой панели нет включите ее: Window > Layers (окно > слои)

71. вместо точки перед "если" - точка с запятой

полоску справа. остается только подвинуть середину так, чтоб она не наезжала и не вылезала за боковые полоски. делать это надо при 100% отображении макета. (если оно будет меньше, вы можете допустить пробел в 1-3 px между серединой и одной из полосок)

72. подчеркнутое - с заглавных
73. скобки с их содержимым - перед точкой

разрешениями экрана. лучше будет выбирать разные цвета для разных разрешений. цвета выбирайте как вам будет удобней,

74. подчеркнутое - с заглавных
75. запятая перед "как вам будет..."

в одну группу "SCREEN". если понадобится посмотреть

76. с заглавной

Для начала выбираем ширину самого "тела" сайта/форума.  при чем именно той части, где будет находится текст, а не боковые украшения.

77. после "сайта/форума" вместо точки - запятая
78. "причем" - слитно
79. "находиться"

Делается это так же как и вспомогательные слои с разрешениями экрана.

80. запятая перед "как"

При "резиновой" верстки нужно выбрать ширину в процентах и посчитать сколько она будет занимать

81. запятая перед "сколько"

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

82. запятая не нужна
83. запятая перед "описанные"

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

84. с заглавных

потому как приемов в дизайне существует масса и все их описывать в одной статье не получится

85. запятая перед "и"
86. "описать"

Когда заменить цвет нужно не частично, а всю целиком

87. "весь"

(отмечено стрелочками) - выберете заранее цвет и нажмите галочку колоризовать

88. "выберите"
89. взять "колоризовать" в кавычки

Первый шаг на встречу решения этой проблемы

90. "навстречу" - слитно
91. "решению"

создавать элементы дизайна. например, у вас уже точно будет обозначен размер

92. с заглавной

который надо выровнять и на слой, относительно которого будем ровнять:

93. запятая перед "и"
94. "выравнять" - "равнять" (тут объясняется различие)

Например, выровняем квадрат по центру:

95."выравняем" (см. выше)

Дело в том, что высчитывает всю ширину перемещаемого объекта.

96. кто "высчитывает"? Потеряно существительное.

Свернутый текст

вы должны быть одновременно и поваром, и пекарем, и завхозом одновременно, так что,

97. подчеркнутое - что-то одно убрать
98. запятая в конце не нужна

Что по сути есть изменение дизайна?

99. "по сути" - в запятых

А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации.

100. запятая перед "удобный"

Однако, дизайн css не влияет на содержимое форума:

101. запятая не нужна
В таблице сравнений:

так выглядит форум с стандартным дизайном

102. "со" вместо "с"

либо прописывать коды в head с тегами <style>, или открыть стандартный шаблон и изменять его

103. "либо... либо..." или "или... или..."

нужно просто понять как они работают и запомнить написание кодов

104. "как они работают" - в запятых
105. подчеркнутое - "выучить их синтаксис"?

это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)

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

Например, вот так выглядит HTML код шапки mybb форума

108. "HTML-код" - дефис

в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.).

109. "в css-коде..."

а сразу несколько. когда нужно задать одинаковые свойства сразу

110. с заглавной

Для того, чтоб исходный код было удобно просматривать, сделана масса программ, в том числе есть иснструменты

111. первая запятая не нужна
112. "инструменты"

html и css коды как орешки, лучше озаботиться поиском отдельного програмного обеспечения

113. "html- и css-коды"
114. запятая перед "как"
115. "программного"

поэтому и добавлю сюда инструкцию по использованию. (если у кого-нибудь будут рекомендации

116. точка перед скобкой не нужна

и HTML-код и CSS-Код в панели FireBug модно редактировать.

117. "CSS-код"
118. "можно"

необходимо глядя на макет представлять его в виде элементов дизайна и исходя из этого "резать" макет.

119. "глядя на макет" - в запятых
120. "исходя из этого" - в запятых

Четко спланируйте какое изображение под каким будет находиться

121. запятая перед "какое"

Так же следует заметить, что в CSS-коде страницы всегда найдется место

122. "Также" - слитно

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

123. с заглавной

если вы добавляете анимированный элемент дизайна, старайтесь облегчить вес анимации.

124. с заглавной
125. "облегчить анимацию" или "уменьшить вес анимации"

поэтому картинку следует сохранять в PNG только если в ней есть прозрачные области

126. запятая после "PNG"

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

127. запятая перед "и"

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

128. подчеркнутое - с заглавных
139. "Также" - слитно
130. "здравствует"

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

131. запятая не нужна
132. запятая после "сайт"

Но, у новичков (да и у опытных юзеров) с этим проблемы

133. запятая не нужна

Кроме использования ключевых слов положение также можно задавать в процентах

134. запятая после "слов"

селектор {background-position:: top center;}
селектор {background-position:: 30px 30px;}
селектор {background-position:: 10% 50%;}

135. лишние двоеточия после параметров

Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

136. запятая не нужна

но фон выходящий за рамки элемента остаётся на месте.

137. "выходящий за рамки элемента" - в запятых

селектор {background-attachment:: fixed;}

138. лишнее двоеточие после параметра

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

139. "HTML-кода" - дефис

С помощью FireBug видно, что тег HEAD не подсвечивается, а при наведении курсора на BODY выделяется вся страница

140. тире после "BODY"

собственно body и переводится с английского как "тело"

141. запятая после "собственно"

Свернутый текст

В этом уроке стоит обратить вше внимание на шапку из дизайна-примера:

142. "ваше"

С его помощью можно менять положение элементов дизайна не смотря на место, которое они занимают в коде.

143. запятая после "дизайна"
144. "несмотря" - слитно

при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет.

145. запятая перед "словно"

Визуально элемент с абсолютным позиционированием выглядит будто находится НАД остальными.

146. после "выглядит" - "так,"

После того, как элементу заается абсолютное позиционирование

147. "задается"

вы его двигаете ОТ КРАЕВ ЭКРАНА, не зависимо от того, какое позиционирование стоит у родительского элемента

148. "независимо" - слитно

Например, можно было объеденить ее с фоном, расположенным под ней и вставлять через контейнер pun_wrap.

149. "объединить"
150. запятая после "ней"

Но, тогда картинка была бы больше, а следовательно, тяжелее.

151. первая запятая не нужна

На любом движке существует возможность дополнить HTML шаблон своими кодами:

152. "HTML-шаблон" - дефис

в некоторых случаях эти возможности шире (например, ucoz, phpbb, joomla и т.д.), в некоторых - крайне не велики (mybb, borda...)

153. "невелики" - слитно

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

154. подчеркнутое - с заглавной
155. "CSS-коды" - дефис

Во-первых, текст (или другое содержимое) должны быть внесены в отдельные дополнительные теги.

156. "текст" в единственном числе, все остальное - во множественном. "текстовые блоки" - ?

Почему? потому что если тег элемента дизайна и тег текста совпадает

157. подчеркнутое - с заглавной
158. запятая после "что"
159. "совпадают"

Итак, нам нужно сделать контейнер в шапке форума. создаем DIV для текста:

160. с заглавной

Также (но в этом случае - без прокрутки) можно поступить и с копирайтом:

161. "Так же" - раздельно

Свернутый текст

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

162. "научить вас"
163. "и" перед "с таблицами"
164. скобки с их содержимым и точку - поменять местами
165. Сложно читается. "Хотелось бы научить вас производить эту операцию не только над/с отдельными контейнерами, но и с таблицами"

HTML-код полученного макета. попытаемся прочертить визуальные границы:

166. с заглавной

Подробно о том, как составлять HTML код таблицы написано здесь:

167. "HTML-код" - дефис
168. запятая после "таблицы"

Что такое css 3 и откуда он взялся? жили-были люди

169. с заглавной

версией CSS-кодов. Зачем? затем, что не все действия можно выполнить с помощью css-кодов. закругленные

170. с заглавных

Например, свечение текста в Mozilla и в Opera выглядят по разному.

171. "выглядит"
172. "по-разному"

Так что, при использовании CSS3 требуется тщательная проверка на кроссбраузерность.

173. запятая не нужна

Здесь будет перечислены все свойства

174. "будут"

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

175. запятая перед "как"

создает элемент с закругленными (сглаженными углами)

176. закрывающую скобку не после "углами", а до

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

177. запятая после "текстом"

заставляет длинные слова, выходящие за пределы границ элемента, должны разделяться и переносится на новую строку;

178. зачеркнутое - лишнее
179. "переноситься"

создает полу-прозрачные элементы;

180. "полупрозрачные"

одно из свойств, позволяющий анимировать элементы, создает эффекты перехода;

181. "позволяющее"

позволяет легко и ыстро разбить текст на столбцы;

182. "быстро"

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

183. запятая перед "необходимо"
184. двоеточие не нужно

Для создания контейнера назовем ячейку с контейнером "box-td" и вставим в ячейку контейнер "my_box"

185. запятая перед "назовем"

Через стиль ограничиваем размер ячейки (чтоб ничто никуда не вылазило):

186. "не вылезало"

Теперь сделаем поверх него фею, делаем так же, как и с контейнирами для элементов дизайна (см. выше): создаем DIV-блок для картинки, а в CSS прописывается ширина, высота + позиционирование:

187. "Теперь расположим..."
188. "контейнерами"
189. "прописываем"
190. "ширину, высоту"

Добавляем текст (с отступом от феи) и готово:

191. запятая после закрывающей скобки

чем оно так необходимо и полезно? дело в том, что по правилам HTML теги влияют на положения элементов

192. с заглавных
193. запятая перед "теги"

Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам

194. запятая после "например"
195. "...вести себя подобно..."

Элемент отображается как встроенный.

196. запятая перед "как"

Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

197. запятая перед "как"
198. запятая после "встроенным элементом"

Элемент выводится как блочный и добавляется маркер списка.

199. запятая перед "как"

Устанавливает элемент как блочный или встроенный в зависимости от контекста.

200. запятая перед "как"

Элемент отображается как строка таблицы (тег <tr>).

201. запятая перед "как"

Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

202. запятая перед "аналогично"

это свойство заставляет элемент(ы) отображаться в строчку. чаше всего употребляется в горизонтальных меню:

203. вместо точки - точка с запятой

Что делать, если нам нужно, чтоб элемент вел себя как контейнер (ему можно было бы задать ширину, высоту), но при этом, чтоб элемент не переносил на другие строчки своих соседей? тут нас спасает значение inline-block

204. запятая перед "как"
205. подчеркнутое - с заглавной

В соседней от CSS3 контейнера ячейке, нам нужно разместить красивые контейнеры для каких-нибудь важных ссылок:

206. запятая не нужна

Теперь сделаем каждую ссылку с отдельном div-контейнере:

207. "в отдельном"

но при этом стоять в линию. Поправзяем inline на inline-block

208. "Поправляем"

Когда вы пытаетесь уставить на форум какой-то неимоверно красивый шрифт

209. "установить"

Однако, лишние картинки - это лишняя графика, дизайн становится в разы "тяжелее" (особенно когда каждую категорию пытаются сделать картинкой, да еще и в формате PNG)

210. первая запятая не нужна

это вызывает и спелинговые ошибки, и грамматические.

211. "спеллинговые"

Не смотря на многочисленные недостатки картинок-заголовок

212. "несмотря"
213. "заголовков"

аргументом: "хочу что было красиво"

214. "чтобы"

Во-вторых, хоть шрифт грузиться быстрее тонны картинок, но все равно грузится.

215. "хоть шрифт и..."
216. "грузится"

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

217. "Также" - слитно

Необычный шрифт и без того не легко подобрать

218. "нелегко" - слитно

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

219. недостает глагола: "Например, можно сделать..."

Свернутый текст

Иногда, это действительно не лишнее

220. запятая не нужна

Она испортит ко всем чертям загрузку вашего дизайна, по любой из сотни причин

221. запятая не нужна

Заставить фонарик в шапке светиться или персонажа подминивать

222. тире после "персонажа"
223. "подмигивать"

Для начала следует достаточно хорошо овладеть GIF-анимацией, вам не подойдет уроки типа "делаем баннер".

224. "подойдут"

Для начала Нужно ее разложить по кадрам.

225. "нужно" - с прописной

Еще полезная информация для тех, кто не в курсе - В самом фотошопе окно анимации открывается через меню:

226. или после тире с прописной или новым предложением

Переделывать пидется каждый слой, поэтому

227. "придется"

Теперь создадим новую папку на панеле своев анимации и упакуем туда все слои:

228. "панели"
229. "слоев"

После этого создаем анимацию по кадрам, включая и отключая свои как было на изначальной анимашке и работа по созданию закончена:

230. жирное - "слои"
231. "как было на изначальной анимашке" - в запятых

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

232. скобки с их содержимым - до точки

Надо устанить как можно больше промежуточных отрывков

233. "устранить"

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

234. первая запятая не нужна
235. "анимашками" - с прописной
236. запятая перед "как"

В теории, картина должна быть замечательной, но кто хочет быть профи

237. первая запятая не нужна

При чем эта проблема будет возникать только при наличии именно правой анимашки.

238. "Причем" - слитно

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

239. запятая после "слева"

потому что граница окна браузера слева - это исходная точки отчета

240. "точка"