|
Модераторы: Illuminaty |
|
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Вот мы и начинаем Урок по созданию сата.
Может для кого то это не интересно, но многие не знают с чего начать и что надо делать. И чтобы не наступать на грабли, мы постараемся поэтапно обсудить и рассказать весь процесс создание шедевра Что будет в Уроке (кратко)? - Как из рисованного макета сделать HTML-макет? - Какая будет структура страниц сайта: HTML, HTML+JavaScript, HTML+SSI, PHP, PHP+MySQL? - Какие дополнительные полезные скрипты нужны? - Как оптимизацировать страницы? - Где разместить? - и многое другое А теперь начнём Содержание: - Урок № 1. Содание макета сайта. - Урок № 2. Режим макет. - Урок № 3. Создание HTML-скелета. - Урок № 4. Создание HTML-шаблона. - Урок № 5. Что такое CSS? - Урок № 6. Маленькие хитрости и тонкости выше сказанного. * Какие файлы получились и где их хранить * Тонкости нарезки макета * Подготовка нарезанных картинок * Мета-теги для шаблона Вопрос-Ответ - Урок № 7. Создание HTML-сайта * по мере появления уроком содержание будет добавляться -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Урок № 1. Содание макета сайта.
С чего же оно начиналось? Начиналось со встречи с заказчиком и получения ТЗ. Нет программы рисующей сайты. Есть программы, в которых можно нарисовать отдельный элементы, скомпоновать их вместе, сделать из эскиза живую страницу. Еще есть руки прямые и кривые. А программ где нажмешь три кнопки и получишь готовую страницу - нет. Наверно у каждого дизайнер свой подход для приманивания муз Мой способ таков: Сначала подробное изучение задания. Сразу необходимо определиться что заказчик (или ты сам) хочет, а главное, чего не хочет видеть на сайте. Вычерчивание структуры, где решается какой пункт будет проживать в главном меню, какой - во второстепенном. Как только начинает вырисовываться каркас, приступаем к самой интересной части - созданию эскиза. Обычно к этому времени уже есть общая идея или хотя бы примерное цветовое решение. Плашками заливается общий фон, вписываются будущие пункты меню и начинается их таскание по всему листу. Творческий процесс, разве ж его объяснишь? Рисую в разных слоях с разной прозрачностью. Перемещаю элементы вместе или по отдельности, добавляю название разделов. Маленькие рисунки вроде иконок рисую в векторе, потом уменьшаю и перевожу в растр. Здесь по пикселю довожу до ума. Программы которые использую: Растр: Photoshop Вектор: Flash, Illustrator. Автор: Caramel И вот результат творчетсва Присоединённый файл ( Кол-во скачиваний: 452 ) Drakon_Vodka2.gif -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Урок № 2. Режим макет
Во-первых нам неодходимо определиться с будущей структурой сайта Область № 1 - Здесь размещается декоративная линейка с лозунгом сайта Область № 2 - В этой области у нас будет отображаться название раздела и подменю раздела Область № 3 - Это основное меню нашего сайта Области № 4 и 6 - Так как дизайн сайта планируется быть "резиновым" и чтобы текст не расползался по всеё страницы я ввожу дополнительные поля-ограничители, которые будут пустыми и будут отделять текст от краёв. Скажем так, это такая авторская задумка Область 5 - Это основная область в которой и будет располагаться весь контекст нашего сайта Область № 7 - Здесь размещаются копирайты, можно и счётчики-рейтинки Присоединённый файл ( Кол-во скачиваний: 390 ) _______.gif -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Во-вторых, определяем какие картинки и фоновые изображения нам понадобятся и в соответствии с уже имеющейся разметкой вырезаем их
1-5 - Это наш логотип Называем (справа-налево, сверху-вниз) - logo1.gif .... - logo5.gif 6-14 - Это пункты меню. В дальнейшем мы добавим ещё и картинки которые будут появляться при наведении на них указателя мыши. Называем: - menu01_off.gif ... - menu09_off.gif 15 и 16 - Здесь у нас будет только фоновое изображение. Называем - fon01.gif - fon02.gif И конечно, мы вырезаем иконки "На главную", "E-Mail", "Карта сайта" и "Вверх" Присоединённый файл ( Кол-во скачиваний: 306 ) _______.gif -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Урок № 3. Создание HTML-скелета
Теперь нам необходимо создать структуру будущего сайта, то есть мы делаем таблицу и размещаем в ней ячейки в соответствии с тем как мы определились во втором уроке. Как видно, у нас должна получиться таблица 4х4 ячейки. Вот результат
Комментарий к коду: - в ячейка проставлены цифры в соответствии с описанием структуры макета. В дальнейшем, мы их заменим на картинки и контекст - Обязательно проставте внутри ячеек комментарии, начало и конец области. Это сейчас очень всё понятно и легко воспринимается, но в дальнейшем могут возникнуть сложности с нахождением необходимой области. Советую эти комментарии не удалять и в последующем, при оптимизации кода - Не нужные ячейки не обязательно комментировать - В таблице установлен border=1 и в пустых ячейках пробелы для наглядного восприятия. В последующем мы их уберём -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Урок № 4. Создание HTML-шаблона
Теперь мы размещаем все полученные картинки в нашу таблицу. Если просто разместить их в таблице, то наш сайт будет смотреться довольно коряво и явно не так как мы видели на макете. Необходимо провести лёгкое косметическое форматирование таблицы, то есть придать шаблону нужные размеры и выравнивание В результате получился этот код
-------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Теперь разберём каждую из 4-х строк нашей таблицы
Маленькое отступление. Мы создали ещё один дополнительные прозрачный GIF-файл размером 1х1рх, который будем использовать как некий инструмент для форматирования. Строка № 1 Здесь всё просто - устанавливаем фоновое изображение линейки - объединяем все 4 ячейки в одну <td background="images/fon01.gif" colspan=4> - в саму ячейку вставляем наш прозрачный файл 1х1.gif и устанавливаем его высоту в 30рх. Это нам необходимо чтобы декоративная линейка была вся видна и не затералась вторым слоем <img src="images/1x1.gif" width=1 height=30 border=0> - после этой картинки идет текст лозунга сайта Строка № 2 1. В первой ячейки размещаем файл logo1.gif 2. Во второй ячейки - logo2.gif В самих картинках мы жёстко прописываем ширину и высоту. Во-первых, при отключенной графики в браузерах у нас сохраниться структура самого сайта. Во-вторых, мы определяем минимальную ширину и высоту самой ячейки 3. В третью ячейку вставляем фоновое изображение и дулаем её ширину 100%. Это нам даёт гарантию того, что наш разрезанный логотип не будет разъезжаться, т.е. эта ячейка будет использовать всё свободное пространство. А также нам не нужно будет в дальнейшем устанавливать ширину для основной части страницы <td width="100%" background="images/fon02.gif"> 4. В четвёртую ячейку также вставляем фоновую картинку <td background="images/fon02.gif"> А в саму ячейку файл 1х1.gif и устанавливаем его ширину в 60рх. Это и будет ширина нашего правого поля. Высоту мы не выставляем, т.к. в первой и второй ячейках уже заложена минимальная высота <img src="images/1x1.gif" width=60 height=1 border="0"> Строка № 3 1. В первой ячейки у на подряд идут картинки меню, в конце которых мы ставим принудительный обрыв строки (так, на всякий случай) После меню добавляем наши три кнопки-картинки, делаем их через неразрывный пробел и с абзаца в котором ставил выравнивание по центру 2. Во вторую ячейку вставляем две оставшиеся части нашего логотипа, тоже через принудительный разрыв строки 3. Третья - оставляем. Там будет у нас сам контекст 4. Ну и четвёртая нам уже не нужна Ещё маленкое замечание. В самой строке делаем вертикальное выравнивание, чтоб у нас было прижато к верху <tr valign="top"> Строка № 4 1. Первая - вставляем туда нашу последнюю картинка и делаем у неё отступ по вертикали чтобы принудительно указать минимальное расстояние от края до картинки 2. Вторая ячейка нам уже не нужна, вставляем туда пробел. 3. Третью и червёртую ячеки мы объединяем и там у нас будут копирайты. <td class="fon3" colspan=2> -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Урок № 5. Что такое CSS?
Как вы успели заметить, в таблице встречаются классы. Если просто вставить в таблицу картинки, это не будет смотреться так, как мы запланировали. Нужно ещё кое-где подкрасить Вот для этих целе я и использую CSS (Каскадные таблицы стилей). Все стили мы будем хранить в отдельном файле, который вставляем в заголовок страницы (между тегами <head></head>) <link rel="STYLESHEET" type="text/css" href="style.css"> Почему я использую отдельный файл, а не вставляю стили в страницу? 1. При изменении какого-либо элемента нам не нужно будет менять все страницы. 2. Мы достаточно сократим наш код, страницы будут занимать меньше места 3. Облегчим работу поисковым роботам. Подробнее по оптимизации можно почитать здесь Вот файл стиля
Теперь разберём каждый стиль: body Начинам всегда с главного элемента. Так как дизайн у нас "резиновый", нам необходимо установить отступы от краёв браузера в 0рх. И также задаём цвет основного фона. Почему я задаю принудительно белый фон если он и так по умолчанию белый? Отвечаю: основная причина в том, что многие пользователи используют различные цветовые схемы Windows, а в них не обязательно установлен белый. Да и вообще, не стоит полагаться на то, что браузер по умолчанию будет отображать наши страницы как мы задумали. .fon1 Здесь мы задаём цвет на котором располагаются наши кнопки и меню .fon2 Тоже самое, только мы здесь добавляем вверху линию и центрируем элементы .fon3 Это цвет и верхняя линия для поля "копирайты" Почему мы не прописали форматирование внутри шаблона? 1. Если нам что-то понадобиться поправить, например, цвет фона или линии, то нам дастаточно исправить один файл 2. Чтобы не загромаждать наш шаблон лишнем кодом 3. Опять же сокращаем размер страниц Итог: У нас полностью готов HTML-шаблон -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Урок № 6. Маленькие хитрости и тонкости выше сказанного.
Какие файлы получились и где их хранить Не знаю как кто делает, но мне удобнее распределять файлы так 1. Папки - images - здесь храняться картинки общего назначения, в том числе которые используются для формирования нашего шаблона - menu_xx - эти папки соответствуют пунктам меню. Например, menu_01 - "Понятие", menu_02 - "История" и т.д. В них и будут располагаться наши разделы сайта - scripts - здесь будут JavaScript`ы - _tmp - это так, служебная папка для черновиков и временных файлов 2. Файлы - style.css - это файл стилей, будет лежать в корневой папке - maket.html - файл макета - index.html - основной файл сайта - menu_01.html ... menu_09.html - основные файлы разделов, будут лежать в своих папках - Ну и вот какие получились картинки Присоединённый файл ( Кол-во скачиваний: 226 ) qw.gif -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Тонкости нарезки картинки
Очень много способов нарезки макета на куски. Как только народ не извращается . Я не буду здесь описывать все способы, а только остановлюсь на том, которым пользуюсь и который меня полностью удовлетворяет. Покажу на примере одной картинки Буду использовать Photoshop Открываем наш макет. Самый верхний слой - это линии нарезки и контрольные точки. По ним мы будем ориентироваться. Для начала необходимо поставить контрольные точки (на рисунке красным цветом). Их я ставля в пересечение линий нарезки. Затем выделяю область от верхнего левого до нижнего правого (на рисунке зелёным цветом). Обратите внимание с какой стороны стоят контрольные точки. Затем выключаю слои где у меня лини нарезки и контрольные точки. Копирую слитое (Shift+Ctrl+C) Создаю новый (Ctrl+N) Вставляю туда из буфера скопированную картинку и сохраняю её. Можно конечно включить Линейку и Сетку, но я считаю, что по линиям удобнее ориентироваться Присоединённый файл ( Кол-во скачиваний: 222 ) qqq.gif -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Подготовка нарезанных картинок
Мы нарезали картинки, всё вроде здорово. Но есть маленькая деталь. При рисовании макета у нас наверняка появилось много мусора. То есть очень схожие цвета, которые не видны глазу, но занимают определённую память и соответственно увеличивают размер картинки Расскажу это на маленьком примере Вот одна из наших картинок - "Домик". В реальном размере он выглядит вроде хорошо. А вот как он выглядит при увеличении (верхний рисунок). Как видно используется уже не три цвета, а больше (если быть точным - 17) Наша задача сделать три. Что мы делаем? Опять же, как это делаю я... ;) - Выбираем инструмент "Волшебная полочка" (W). Не забудьте убрать "Смежность" - Жмём на фоне. У нас выделились все одинаковые цвета. - удерживая Shift нажимаем на невыделенные места фона. - Таким образом у нас будет выделен весь фон. Почему именно так выделяем? Просто эта картинка у нас маленькая и простая, а если будет больше, то просто не очень будет удобно лазить по всей картинке. - далее мы "Пипеткой" (I) выбираем цвет закрашивания. Так как цвета очень похожи можно выбрать любой цвет фона, но лучше который визуально чаще встречается - и наконец заливаем этим цветом выделенную область Аналогично делаем с другими элементами. Правда если не так много, то можно воспользоваться "Карандашом" Вот что в итоге у нас получилось - Первая - 17 цветов, 285 байт - Вторая - 3 цвета 94 байта Как видно - в три раза меньше. Это и есть оптимизация графики для нашего сайта. Хоть это и маленькие величины, но в конечном итоге мы очень много экономим на памяти, а это прямо влияет на скорость разрузки сайта. Присоединённый файл ( Кол-во скачиваний: 175 ) q1.gif -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Мета-теги для шаблона
< META HTTP-EQUIV="Content-Type"Content="text/html; Charset=Windows-1251"> - Указивается кодировка на которой была написана наша страница. Это чтобы помочь браузеру <META Name="author" Content="Ваши Ф.И.О., E-Mail"> - Здесь можно указать информацию об авторе страницы <META Name="copyright" Content="Информация о вашей фирме"> - Указываются авторские права, информация о фирме и тд. <META Name="keywords" Content="Ваши ключевые слова"> - Сюда пишим ключевые слова, встречающиеся на странице. Помогаем Поисковикам. <META Name="description" Content="Описание Вашей страницы"> - Краткое описание содержимого данной страницы. Также для поисковых роботов <META HTTP-EQUIV="Expires" Content="Mon, 11 Jun 1998 00:00:01 GMT"> - Это для браузера, говорит чтобы страница бралась не и кэша <META Name="Publisher-Email" Content="Ваш_e-mail@сервер.домен"> - адрес издателя страницы или ваш адрес <META Name="Publisher-URL" Content="Адрес Вашего сайта"> - адрес Вашего сайта в сети Интернет <META Name="Generator" Content="Microsoft Notepad"> - описывается средство, с помощью которого была создана данная страница. <META Name="revisit-after" Content="10 days"> - как часто обновляется информация на странице. <meta http-equiv="Content-Language" content="ru"> - Говорит в какой языковой зоне сайт. Для поисковиков. Остальные нам не понадобятся -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Gold Dragon |
|
||||||||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
Вопрос-Ответ
Здесь будет раздел "Вопрос-Ответ", т.е. ответы на вопросы, возникающие по ходу обсуждения. Именно этот раздел будет пополняться при появлении вопросов. Вопрос 1
я стараюсь всё писать в нижнем регистре, а там как получится, но всё равно перед размещением привожу всё в нижний регистр (в редакторе HomeSite есть такая функция). Насчёт спецификации не уверен, так как даже валидатор в строгом режиме ничего не сообщает. Если кто найдёт что-то подобное, дайте ссылку Вопрос 2
Этот файл используется для форматирования внешнего вида. Например, у нас есть таблица левый край у которой сделан декором. От сюда у нас получается два столбца: в левый поместим наш декоративный край, то есть фоновую картинку, во второй сам контекст. Вот что получается
Но при таком форматировании мы не увидем левый край, т.к. самя ячейка пуста. По этому нам необходимо поместить в эту ячейку что-то определённого размера. Вот и приходит нам на помощь прозрачный файт 1х1.gif. Мы просто вставляем его в ячейку и устанавливаем необходимые размеры.
Заодно мы указываем размер и самой ячейки. Почему не задать просто размер ячейки без файла? Да просто, мы таким способом обеспечиваем себе гарантию, что ячейка с рисунком не будет меньше 8 рх при любом дальнейшем раскладе. PS Проверял на валидаторе HTML 4.01 Strict! <TABLE> <Table> <table> <tablE>- ничего мне не сказал Это сообщение отредактировал(а) Red Dragon - 22.5.2005, 10:11 -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
||||||||
|
|||||||||
Aliance |
|
|||
I ♥ <script> Профиль Группа: Модератор Сообщений: 6418 Регистрация: 2.8.2004 Где: spb Репутация: нет Всего: 137 |
http://validator.w3.org/ поставил свой сайт на проверку - выдал исправить те, которые были в верхнем регистре на нижний. |
|||
|
||||
Gold Dragon |
|
|||
Призрачный Профиль Группа: Экс. модератор Сообщений: 6753 Регистрация: 1.3.2004 Где: Россия, Тамбов Репутация: 7 Всего: 71 |
тут dm9 нашёл информацию, которую можно отнести к нашему обсуждению. Вот выдержка из спецификации
Та что спецификация HTML4 не оговаривает в каком регистре писать тэги, но по моему мнению стремиться необхотимо к стандартам будущих и развивающихся технологий -------------------- Нельзя жить в прошлом, оно уже прошло. Нельзя жить в будущем, оно ещё не наступило. Нужно жить в настоящем, помня прошлое и думая о будущем! |
|||
|
||||
Правила форума "Веб-разработка, идеи, проектирование" | |
|
1. Прежде чем поучаствовать в дискуссиях, пожалуйста, перечитайте правила нашего форума. Воспользуйтесь поиском прежде чем создавать новую тему, возможно, Ваш вопрос уже обсуждают. Модератор имеет право удалять или обьединять дублирующиеся темы. 2. В этом разделе проводится обсуждение дизайна готовых сайтов, рабочих web-проектов, web-макетов, а также сами идеи и перспективы ресурсов. 3. Обсуждение отдельных элементов (логотипов, баннеров, анимации и т.п.) проводится здесь 4. В разделе запрещается а) предлагать на обсуждение форумы, чаты, гостевые книги, имеющие стандартный движок без собственного дизайнерского оформления; б) рекламировать какой-либо проект; в) предлагать купить web-проект, работу, модераторство, зарегистрироваться в разделах web-ресурса; г) спрашивать о возможной стоимости проекта. Указанные сообщения будут удаляться без предупреждения(!) 5. При создании новой темы (обсуждение конкретного ресурса) необходимо указать: в названии темы - название вашего проекта, в описании темы - адрес, в топике - вопрос и ссылку 6. Все сообщения, касаемые критики сайта, не содержащие какие-либо собственные предложения будут удаляться! Если Вам понравилась атмосфера форума, заходите к нам чаще! С уважением, Illuminaty, dr.ZmeY. |
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | Стартапы, проекты, идеи | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |