Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Создание сайта от А до Я, Урок 
:(
    Опции темы
Gold Dragon
  Дата 29.3.2005, 09:54 (ссылка) |    (голосов:3) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Вот мы и начинаем Урок по созданию сата.

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

Что будет в Уроке (кратко)?
- Как из рисованного макета сделать HTML-макет?
- Какая будет структура страниц сайта: HTML, HTML+JavaScript, HTML+SSI, PHP, PHP+MySQL?
- Какие дополнительные полезные скрипты нужны?
- Как оптимизацировать страницы?
- Где разместить?
- и многое другое

А теперь начнём smile


Содержание:

- Урок № 1. Содание макета сайта.

- Урок № 2. Режим макет.

- Урок № 3. Создание HTML-скелета.

- Урок № 4. Создание HTML-шаблона.

- Урок № 5. Что такое CSS?

- Урок № 6. Маленькие хитрости и тонкости выше сказанного.
* Какие файлы получились и где их хранить
* Тонкости нарезки макета
* Подготовка нарезанных картинок
* Мета-теги для шаблона

Вопрос-Ответ

- Урок № 7. Создание HTML-сайта



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


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 29.3.2005, 10:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Урок № 1. Содание макета сайта.

С чего же оно начиналось?
Начиналось со встречи с заказчиком и получения ТЗ.

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

Наверно у каждого дизайнер свой подход для приманивания муз smile Мой способ таков:

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

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

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

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

Творческий процесс, разве ж его объяснишь? smile Рисую в разных слоях с разной прозрачностью. Перемещаю элементы вместе или по отдельности, добавляю название разделов.

Маленькие рисунки вроде иконок рисую в векторе, потом уменьшаю и перевожу в растр. Здесь по пикселю довожу до ума.

Программы которые использую:

Растр: Photoshop
Вектор: Flash, Illustrator.

Автор: Caramel

И вот результат творчетсва

Присоединённый файл ( Кол-во скачиваний: 452 )
Присоединённый файл  Drakon_Vodka2.gif


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 30.3.2005, 09:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Урок № 2. Режим макет

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

Область № 1 - Здесь размещается декоративная линейка с лозунгом сайта

Область № 2 - В этой области у нас будет отображаться название раздела и подменю раздела

Область № 3 - Это основное меню нашего сайта

Области № 4 и 6 - Так как дизайн сайта планируется быть "резиновым" и чтобы текст не расползался по всеё страницы я ввожу дополнительные поля-ограничители, которые будут пустыми и будут отделять текст от краёв. Скажем так, это такая авторская задумка

Область 5 - Это основная область в которой и будет располагаться весь контекст нашего сайта

Область № 7 - Здесь размещаются копирайты, можно и счётчики-рейтинки

Присоединённый файл ( Кол-во скачиваний: 390 )
Присоединённый файл  _______.gif


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 30.3.2005, 10:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 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


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 30.3.2005, 10:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Урок № 3. Создание HTML-скелета

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

Как видно, у нас должна получиться таблица 4х4 ячейки.

Вот результат
Код

<table width="100%" border=1>
<tr>
    <td colspan=4>
    <!-- Начало "Верхняя декоративная панель -->
    1
    <!-- Конец "Верхняя декоративная панель -->
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
    <!-- Начало "Название раздела" -->
        2
    <!-- Конец "Название раздела" -->
    </td>
    <td>
    &nbsp;
    </td>
</tr>
<tr>
    <td>
    <!-- Начало "Основное меню" -->
        3
    <!-- Конец "Основное меню" -->
    </td>
    <td>
    <!-- Начало "Левое постое поле" -->
        4
    <!-- Конец "Левое пустое поле" -->
    </td>
    <td>
    <!-- Начало "Основное поле" -->
        5
    <!-- Конец "Основное поле" -->
    </td>
    <td>
    <!-- Начало "Правое постое поле" -->
        6
    <!-- Конец "Правое пустое поле" -->
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan=2>
    <!-- Начало "Копирайты" -->
        7
    <!-- Конец "Копирайты -->
    </td>
</tr>
</table>


Комментарий к коду:

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

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

- Не нужные ячейки не обязательно комментировать

- В таблице установлен border=1 и в пустых ячейках пробелы для наглядного восприятия. В последующем мы их уберём


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 30.3.2005, 14:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Урок № 4. Создание HTML-шаблона

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

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

В результате получился этот код
Код

<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
    <td background="images/fon01.gif" colspan=4>
    <!-- Начало "Верхняя декоративная панель -->
        <img src="images/1x1.gif" width=1 height=30 border=0>&nbsp;исконно русский алкогольный напиток
    <!-- Конец "Верхняя декоративная панель -->
    </td>
</tr>
<tr>
    <td><img src="images/logo1.gif" width=147 height=92 border=0></td>
    <td><img src="images/logo2.gif" width=91 height=92 border=0></td>
    <td width="100%" background="images/fon02.gif">
    <!-- Начало "Название раздела" -->
        &nbsp;
    <!-- Конец "Название раздела" -->
    </td>
    <td background="images/fon02.gif"><img src="images/1x1.gif" width=60 height=1 border="0"></td>
</tr>
<tr valign="top">
    <td class="fon1">
    <!-- Начало "Основное меню" -->
        <img src="images/logo3.gif" width="147" height="52" alt="" border="0"><br>
        <img src="images/memu01_off.gif" width="147" height="32" border="0"><br>
        <img src="images/memu02_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu03_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu04_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu05_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu06_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu07_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu08_off.gif" width="147" height="31" border="0"><br>
        <img src="images/memu09_off.gif" width="147" height="31" border="0">
        <p align="center">
        <img src="images/but01.gif" width="21" height="18" alt="Перейти на главную страницу" border="0">&nbsp;<img src="images/but02.gif" width="21" height="18" alt="Е-Mail" border="0">&nbsp;<img src="images/but03.gif" width="21" height="18" alt="Карта сайта" border="0">
    <!-- Конец "Основное меню" -->

    </td>
    <td>
    <!-- Начало "Левое постое поле" -->
        <img src="images/logo4.gif" width="91" height="52" border="0"><br>
        <img src="images/logo5.gif" width="91" height="32" border="0"><br>
    <!-- Конец "Левое пустое поле" -->
    </td>
    <td>
    <!-- Начало "Основное поле" -->
        &nbsp;
    <!-- Конец "Основное поле" -->
    </td>
    <td>
    <!-- Начало "Правое постое поле" -->
        &nbsp;
    <!-- Конец "Правое пустое поле" -->
    </td>
</tr>
<tr valign="middle">
    <td class="fon2"><img src="images/but04.gif" width="21" height="18" alt="Перейти на верх страницы" vspace="10" border="0"></td>
    <td class="fon3">&nbsp;</td>
    <td class="fon3" colspan=2>
    <!-- Начало "Копирайты" -->
        &nbsp;
    <!-- Конец "Копирайты -->
    </td>
</tr>
</table>



--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 30.3.2005, 15:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 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>


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 31.3.2005, 09:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Урок № 5. Что такое CSS?

Как вы успели заметить, в таблице встречаются классы. Если просто вставить в таблицу картинки, это не будет смотреться так, как мы запланировали. Нужно ещё кое-где подкрасить

Вот для этих целе я и использую CSS (Каскадные таблицы стилей). Все стили мы будем хранить в отдельном файле, который вставляем в заголовок страницы (между тегами <head></head>)

<link rel="STYLESHEET" type="text/css" href="style.css">

Почему я использую отдельный файл, а не вставляю стили в страницу?

1. При изменении какого-либо элемента нам не нужно будет менять все страницы.

2. Мы достаточно сократим наш код, страницы будут занимать меньше места

3. Облегчим работу поисковым роботам. Подробнее по оптимизации можно почитать здесь

Вот файл стиля
Код

body{
    margin : 0px;
    background-color : White;
}
.fon1{
    background-color : #EAE1BA;
}
.fon2{
    background-color : #EAE1BA;
    border-top : 1px solid #DACA86;
    text-align : center;
}
.fon3{
    background-color : White;
    border-top : 1px solid #DACA86;
}


Теперь разберём каждый стиль:

body
Начинам всегда с главного элемента. Так как дизайн у нас "резиновый", нам необходимо установить отступы от краёв браузера в 0рх. И также задаём цвет основного фона.

Почему я задаю принудительно белый фон если он и так по умолчанию белый?

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

.fon1
Здесь мы задаём цвет на котором располагаются наши кнопки и меню

.fon2
Тоже самое, только мы здесь добавляем вверху линию и центрируем элементы

.fon3
Это цвет и верхняя линия для поля "копирайты"


Почему мы не прописали форматирование внутри шаблона?

1. Если нам что-то понадобиться поправить, например, цвет фона или линии, то нам дастаточно исправить один файл

2. Чтобы не загромаждать наш шаблон лишнем кодом

3. Опять же сокращаем размер страниц


Итог:

У нас полностью готов HTML-шаблон


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 1.4.2005, 13:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 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


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 8.4.2005, 13:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Тонкости нарезки картинки

Очень много способов нарезки макета на куски. Как только народ не извращается smile. Я не буду здесь описывать все способы, а только остановлюсь на том, которым пользуюсь и который меня полностью удовлетворяет.

Покажу на примере одной картинки

Буду использовать Photoshop

Открываем наш макет.

Самый верхний слой - это линии нарезки и контрольные точки. По ним мы будем ориентироваться.

Для начала необходимо поставить контрольные точки (на рисунке красным цветом). Их я ставля в пересечение линий нарезки.

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

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

Копирую слитое (Shift+Ctrl+C)

Создаю новый (Ctrl+N)

Вставляю туда из буфера скопированную картинку и сохраняю её.


Можно конечно включить Линейку и Сетку, но я считаю, что по линиям удобнее ориентироваться

Присоединённый файл ( Кол-во скачиваний: 222 )
Присоединённый файл  qqq.gif


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 8.4.2005, 14:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Подготовка нарезанных картинок

Мы нарезали картинки, всё вроде здорово. Но есть маленькая деталь. При рисовании
макета у нас наверняка появилось много мусора. То есть очень схожие цвета, которые не видны глазу, но занимают определённую память и соответственно увеличивают размер картинки

Расскажу это на маленьком примере

Вот одна из наших картинок - "Домик". В реальном размере он выглядит вроде хорошо. А вот как он выглядит при увеличении (верхний рисунок). Как видно используется уже не три цвета, а больше (если быть точным - 17)

Наша задача сделать три.

Что мы делаем? Опять же, как это делаю я... ;)

- Выбираем инструмент "Волшебная полочка" (W). Не забудьте убрать "Смежность"
- Жмём на фоне. У нас выделились все одинаковые цвета.
- удерживая Shift нажимаем на невыделенные места фона.
- Таким образом у нас будет выделен весь фон. Почему именно так выделяем? Просто эта картинка у нас маленькая и простая, а если будет больше, то просто не очень будет удобно лазить по всей картинке.
- далее мы "Пипеткой" (I) выбираем цвет закрашивания. Так как цвета очень похожи можно выбрать любой цвет фона, но лучше который визуально чаще встречается
- и наконец заливаем этим цветом выделенную область

Аналогично делаем с другими элементами. Правда если не так много, то можно воспользоваться "Карандашом"

Вот что в итоге у нас получилось
- Первая - 17 цветов, 285 байт
- Вторая - 3 цвета 94 байта
Как видно - в три раза меньше.

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



Присоединённый файл ( Кол-во скачиваний: 175 )
Присоединённый файл  q1.gif


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 8.4.2005, 14:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 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">
- Говорит в какой языковой зоне сайт. Для поисковиков.


Остальные нам не понадобятся



--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Gold Dragon
Дата 19.4.2005, 11:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



Вопрос-Ответ

Здесь будет раздел "Вопрос-Ответ", т.е. ответы на вопросы, возникающие по ходу обсуждения. Именно этот раздел будет пополняться при появлении вопросов.

Вопрос 1
Цитата(Aliance @ 18.4.2005, 20:55)
В каком регистре лучше писать теги? Ведь стандарт (X)HTML гласит писать все теги в нижнем регистре.

я стараюсь всё писать в нижнем регистре, а там как получится, но всё равно перед размещением привожу всё в нижний регистр (в редакторе HomeSite есть такая функция). Насчёт спецификации не уверен, так как даже валидатор в строгом режиме ничего не сообщает. Если кто найдёт что-то подобное, дайте ссылку

Вопрос 2
Цитата(Fedor @ 18.4.2005, 22:05)
Не очень понятно, зачем нужен файл 1x1

Этот файл используется для форматирования внешнего вида. Например, у нас есть таблица левый край у которой сделан декором. От сюда у нас получается два столбца: в левый поместим наш декоративный край, то есть фоновую картинку, во второй сам контекст. Вот что получается
Код

<table>
    <tr>
        <td background="fon/gif"></td>
        <td>Сам контекст</td>
    </tr>
</table>

Но при таком форматировании мы не увидем левый край, т.к. самя ячейка пуста. По этому нам необходимо поместить в эту ячейку что-то определённого размера. Вот и приходит нам на помощь прозрачный файт 1х1.gif. Мы просто вставляем его в ячейку и устанавливаем необходимые размеры.
Код

<table>
    <tr>
        <td background="fon/gif" width=8><img src="1x1.gif" width=8 height=1></td>
        <td>Сам контекст</td>
    </tr>
</table>

Заодно мы указываем размер и самой ячейки. Почему не задать просто размер ячейки без файла? Да просто, мы таким способом обеспечиваем себе гарантию, что ячейка с рисунком не будет меньше 8 рх при любом дальнейшем раскладе.



PS
Проверял на валидаторе HTML 4.01 Strict!
<TABLE> <Table> <table> <tablE>- ничего мне не сказал

Это сообщение отредактировал(а) Red Dragon - 22.5.2005, 10:11


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Aliance
Дата 19.4.2005, 15:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: нет
Всего: 137



Цитата(Red @ 19.4.2005, 12:33)
Насчёт спецификации не уверен, так как даже валидатор в строгом режиме ничего не сообщает. Если кто найдёт что-то подобное, дайте ссылку


http://validator.w3.org/

поставил свой сайт на проверку - выдал исправить те, которые были в верхнем регистре на нижний.
PM MAIL WWW ICQ Skype   Вверх
Gold Dragon
Дата 22.5.2005, 10:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Призрачный
****


Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 7
Всего: 71



тут dm9 нашёл информацию, которую можно отнести к нашему обсуждению. Вот выдержка из спецификации

Цитата
XHTML™ 1.0:
The Extensible HyperText Markup Language
....
4. Отличия от HTML 4
....
4.2 Имена элементов и атрибутов должны быть в нижнем регистре

Документы XHTML должны использовать нижний регистр для всех имён элементов и атрибутов HTML. Это необходимо, поскольку XML чувствителен к регистру, например, <li> и <LI> это различные теги.

Та что спецификация HTML4 не оговаривает в каком регистре писать тэги, но по моему мнению стремиться необхотимо к стандартам будущих и развивающихся технологий


--------------------
Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!
PM MAIL WWW ICQ   Вверх
Ответ в темуСоздание новой темы Создание опроса
Правила форума "Веб-разработка, идеи, проектирование"
Illuminaty
dr.ZmeY

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

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

3. Обсуждение отдельных элементов (логотипов, баннеров, анимации и т.п.) проводится здесь

4. В разделе запрещается

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

   б) рекламировать какой-либо проект;

   в) предлагать купить web-проект, работу, модераторство, зарегистрироваться в разделах web-ресурса;

   г) спрашивать о возможной стоимости проекта.

Указанные сообщения будут удаляться без предупреждения(!)

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

6. Все сообщения, касаемые критики сайта, не содержащие какие-либо собственные предложения будут удаляться!


Если Вам понравилась атмосфера форума, заходите к нам чаще! С уважением, Illuminaty, dr.ZmeY.

 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Стартапы, проекты, идеи | Следующая тема »


 




[ Время генерации скрипта: 0.1957 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.