Макет веб-страницы CSS также можно рассматривать как систематическую работу. Разработка веб-сайта DIVCSS может выполняться несколькими людьми в сотрудничестве и в команде. Это требует определенного количества нормативных рабочих вопросов. требуется систематизированная и стандартизированная статья, перепечатанная из Blue, которая очень эффективна. Автор обобщил большой практический опыт, и каждый может обратиться к ней и поучиться на ней.
Обзор
Эта спецификация является одновременно спецификацией разработки и справочником по языку сценариев. Эта спецификация не является неизменным положением, которое необходимо строго соблюдать. Ее следует использовать гибко и вносить определенные изменения в особых обстоятельствах. Однако, пожалуйста, не меняйте характеристики по своему желанию. Если у вас возникнут вопросы, пожалуйста, свяжитесь со мной вовремя, и я оперативно внесу изменения в соответствующие образцы кода и документы данной спецификации.
Основные требования
1. Откройте три подкаталога изображений common temp в корневом каталоге веб-сайта и при необходимости откройте подкаталог мультимедиа. Каталог изображений содержит общедоступные изображения, которые используются страницами в разных столбцах, например логотипы компаний, баннеры и т. д. меню, кнопки и т. д.; общий подкаталог содержит общедоступные файлы, такие как css, js, php, include и т. д.; подкаталог temp содержит различный текст, изображения и другие оригинальные материалы, предоставленные клиентами; подкаталог media содержит файлы Flash, avi, быстрое время и т. д. Мультимедийные файлы.
2. В принципе, для каждого столбца в корневом каталоге следует открыть каталог в соответствии со структурой столбцов домашней страницы. При необходимости в каталоге каждого столбца следует открыть подкаталог изображений и мультимедиа для размещения изображений и мультимедиа. исключительно для этого столбца. Если в этом столбце много содержимого и он разделен на множество подчиненных столбцов, для мультимедийных файлов можно соответственно открыть другие каталоги.
3. Во временном каталоге часто бывает много файлов. Рекомендуется открыть каталог с именем времени, чтобы классифицировать и систематизировать информацию, предоставляемую клиентами одну за другой.
4. Если нет особых обстоятельств, имена каталогов и файлов должны состоять из строчных английских букв, цифр и символов подчеркивания, пробелы и специальные символы не должны использоваться при именовании. Не используйте пиньинь без крайней необходимости. Опыт показывает, что каталоги, названные пиньинь, часто становятся непонятными через месяц.
При написании сценариев
мы должны иметь единое представление об общем стиле сценария. это означает, что вы написали его месяцем позже и месяц назад. Стиль сценариев остается неизменным, как и стиль сценариев, написанный разными разработчиками в одной рабочей группе, потому что мы не можем вечно разрабатывать изолированно, и вы всегда можете работать. с самим собой три месяца назад (ваш заказчик попросил доработку), вам часто приходится разрабатывать проект совместно с разными коллегами по студии, и вас могут попросить изменить сценарии, разработанные ушедшими в отставку людьми. Конечно, вы также можете. оставить проект последующим коллегам.
1. Универсальный шаблон для Html-файлов:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
<html>
<!–
Генератор: Студия Sub Design ( www.eastline.net.cn )
Данные о создании: 2000-8-1
Автор оригинала: Eastline
->
<голова>
<title>Название документа</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
Другие метатеги
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Клиент определения таблицы стилей Определение функции Javascript и операция инициализации
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css com. ]
</голова>
<body bgcolor="#ffffff">
… …
</body>
Добавлено:
Чтобы гарантировать совместимость веб-сайта со следующим поколением стандартов XML веб-языка, все атрибуты тегов HTML должны быть заключены в одинарные или двойные кавычки, то есть мы должны писать <a href="url"> вместо < a href=url >.
2. Для страниц, допускающих полнотекстовый поиск, чтобы обеспечить эффективный поиск поисковыми системами в Интернете, метатеги «Ключевые слова» и «Описание» должны быть добавлены между тегами <head></head> HTML. на главной странице канала, например:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
<meta name=”keywords” content=”Восточный Синкансэн, автомобили, покупка автомобилей”/>
<meta name=”description” content=”Новая восточная линия Канджин, первая в мире остановка с информацией о китайских автомобилях”/>
3. Пример кода формата файла CSS:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css com. ]
<style type="text/css">
<!—
п {текстовый отступ: 2em;
тело {семейство шрифтов: "宋体"; размер шрифта: #000000; поле-верх: 0 пикселей; поле-нижнее: 0 пикселей; поле-лево: 0 пикселей}
таблица {семейство шрифтов: "宋体"; размер шрифта: 9pt; высота строки: 20 пикселей; цвет: #000000}
а: ссылка {размер шрифта: 9pt; цвет: #FFFFFF; оформление текста: нет}
а: посетил {размер шрифта: 9pt; цвет: #99FFFF оформление текста: нет}
a:hover {размер шрифта: 9pt; цвет: #FF9900; оформление текста: нет}
а: активный {размер шрифта: 9pt; цвет: #FF9900; оформление текста: нет}
a.1: ссылка {размер шрифта: 9pt; цвет: #3366cc; украшение текста: нет}
а.1: посетил {размер шрифта: 9pt; цвет: #3366cc; оформление текста: нет}
a.1:hover {размер шрифта: 9pt; цвет: #FF9900; оформление текста: нет}
а.1: активный {размер шрифта: 9pt; цвет: #FF9922 оформление текста: нет};
.blue {семейство шрифтов: "宋体"; размер шрифта: 10,5 пт; высота строки: 20 пикселей; цвет: #0099FF; интервал между буквами: 5em}
->
</style>
Здесь следует особо отметить, что порядок a:link a:visited a:hover a:actived должен строго соответствовать приведенному выше примеру кода, иначе возникнет больше или меньше проблем. Кроме того, мы оговариваем, что переопределение идет первым, псевдоклассы — вторым, а настройка — последним, что облегчает чтение вам и другим!
Чтобы обеспечить единообразие размера шрифта в разных браузерах, рекомендуется определять размер шрифта в точках и пикселях. px обычно использует 9pt и 11pt в китайской династии Сун, а px обычно использует 12px и 14,7px в китайском языке. Songti Это оптимизированный размер шрифта, полужирный шрифт или полужирный шрифт Song, обычно более подходящие размеры шрифтов 11pt и 14,7 пикселей.
При написании <table> для вложения друг в друга строго следуйте стандарту. Для одной <table> <table><tr> должна быть выровнена, <td> должен иметь отступ на два пробела половинной ширины, если таковые имеются. другое Для вложенных таблиц <table> также имеет отступ в два пробела половинной ширины. Если в <td> нет вложенной таблицы, закрывающий тег </td> должен находиться на той же строке, что и <td>, без строки.
Как мы отмечаем,
в исходном коде такого кода быть не должно:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
<td><img src="../images/sample.gif">
</td>
Должно быть так:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
<td><img src=»../images/sample.gif»></td>
Это связано с тем, что браузер считает, что новая строка эквивалентна пробелу половинной ширины. Вышеупомянутый нестандартный метод записи эквивалентен непреднамеренному добавлению. пробел половинной ширины. Если действительно необходимо добавить пробел половинной ширины, и его следует написать так:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
<td><img src="../images/sample.gif”> </td>
<table>, принадлежащий одному и тому же уровню, должен быть выровнен по левому краю, а пустые ячейки без какого-либо содержимого не могут существовать. между <td> и </td> следует указать высоту, большую или равную 12 пикселей. Если высота меньше 12 пикселей, между <td> и </td> Picture следует вставить прозрачный gif размером 1*1. это связано с тем, что некоторые браузеры считают пустые ячейки незаконными и не интерпретируют их. Если порядок кода хаотичен, вы можете изменить его с помощью команды->применить форматирование кода в DW3!
5. Также существуют унифицированные стандарты записи ширины и высоты. Обычно для таблиц только с одним столбцом ширина записывается в теге <table>, для таблиц только с одной строкой высота записывается в теге <table>. ; для таблиц с несколькими строками и несколькими столбцами Ширина и высота таблицы записываются в теге <td> первой строки или столбца. Короче говоря, следуйте одному принципу: не должно быть более одной высоты и ширины, которые управляют размером одной и той же ячейки. Убедитесь, что любая ширина и высота допустимы. То есть, если вы измените значение любой ширины и высоты в файле. код, он должен быть в разделе «Изменения видны в браузере». Сделать это непросто, требуется долгое время практики и размышлений.
Общие принципы
1. Прежде чем упорядочивать таблицы, тщательно подумайте о лучшем решении. Старайтесь контролировать вложенность таблиц в пределах трех уровней и старайтесь избегать двух тегов <colspan> и <rowspan>. Опыт показывает, что эти две метки могут вызывать проблемы. много проблем.
2. На веб-странице следует стараться избегать использования всей большой таблицы. Весь контент вложен в эту большую таблицу, поскольку, когда браузер интерпретирует элементы страницы, он отображает их один за другим в виде таблиц, если веб-страница встроена. Если он помещен в большую таблицу, вероятным последствием будет то, что когда посетитель вводит URL-адрес, он сначала в течение длительного времени столкнется с пустым пространством, а затем весь веб-контент появится одновременно. Если вам необходимо это сделать, используйте тег <tbody>, чтобы большую таблицу можно было отображать частями.
3. При наборе текста мы часто сталкиваемся с необходимостью сделать отступ в первой строке. Не используйте пробелы полной ширины для достижения эффекта. Стандартный подход заключается в определении p { text-indent: 2em } в таблице стилей; добавьте тег <p> для каждого абзаца; обратите внимание, что в обычных обстоятельствах не пропускайте закрывающий тег </p>.
4. В принципе, мы запрещаем использование <img width=? height=?> для искусственного изменения размера отображаемого изображения, и рекомендуется не включать атрибуты ширины и высоты в тег <img>. Это связано с тем, что. в процессе производства изображение часто требует повторных модификаций, что позволяет избежать вмешательства человека в размер отображаемого изображения и максимизировать собственные функции браузера, однако побочным эффектом этого является то, что веб-страница не загружает изображение; , размер изображения на сайте не будет зарезервирован. Это может привести к дрожанию веб-страницы во время загрузки (если изображение вставлено в таблицу фиксированного размера, этого явления не произойдет), особенно если размер изображения равен. при большом размере это явление будет очевидным, поэтому, когда это ожидается. Когда возникает такая ситуация, которая явно приводит к дрожанию веб-страницы, обязательно прикрепите атрибуты ширины и высоты к <img> в конце.
5. Чтобы максимально использовать функцию автоматического набора текста в браузере, старайтесь не использовать <br> для ручного вмешательства в сегментацию всего текста.
6. Между словами на разных языках должен быть пробел в половину ширины, за исключением символов заголовка и после символа хвоста. Знаки препинания между китайскими иероглифами должны быть полноширинными, а в скобках вокруг английских букв и цифр следует использовать половину ширины. -ширина скобок.
7. Все размеры шрифтов должны быть реализованы с использованием таблиц стилей, а тегам <font size=?> запрещено появляться на странице.
8. Не размещайте на веб-странице более одного пробела подряд и используйте как можно меньше пробелов по всей ширине (в английском наборе символов пробелы по всей ширине становятся искаженными символами. Используйте отступы, отступы и поля). , hspace, vspace и прозрачность для изображений пустого пространства.
9. При смешивании китайского и английского языков мы изо всех сил стараемся определить английский и цифры как шрифты Verdana и Arial.
10. Для определения межстрочного интервала рекомендуется использовать процентное соотношение. Обычно используются два значения межстрочного интервала: высота строки: 120%/150%.
11. Все пути на веб-сайте используют относительные пути и обычно ссылаются на. файл по умолчанию в определенном каталоге. Путь ссылки не обязательно должен быть полным именем. Например, нам не обязательно делать это: <a href="aboutus/index.htm">, но он должен быть таким: <a. href="aboutus/">
12. При встраивании графического текста рекомендуется использовать шрифты большего размера. Не включайте текст в графику.
13. «Размер веб-страницы» определяется как сумма размеров файлов всех веб-страниц, включая файлы HTML и все встроенные объекты. Пользователи предпочитают быстрые сайты, а не новые. Для пользователей модемов целесообразно поддерживать размер страницы ниже 34 КБ.
Принципы именования файлов
1. Каждый каталог должен содержать файл HTML по умолчанию, а имя файла должно быть index.htm.
2. Имена файлов должны представлять собой комбинацию строчных английских букв, цифр и символов подчеркивания.
3. Руководящая идеология принципа именования заключается в том, чтобы позволить себе и каждому участнику рабочей группы легко понять значение каждого файла. Второе заключается в том, что когда мы используем команду «сортировать по имени» в папке, тот же Большой. категории файлов могут быть организованы вместе, чтобы мы могли искать, изменять, заменять, рассчитывать нагрузку и т. д.
4. Ниже используется столбец «Новости» (включая «Внутренние новости» и «Международные новости») для пояснения принципа именования html-файлов:
☆ Создайте каталог новостей в корневом каталоге. ☆ Первый элемент новостей по умолчанию называется index.htm.
☆ Все новости, относящиеся к «внутренним новостям», названы по порядку: china_1.htm, china_2.htm, …
☆ Все новости, принадлежащие «Международным новостям», названы по порядку: internation_1.htm, internation_2.htm, …
☆ Если количество файлов состоит из двух цифр, укажите первые девять файлов: china_01.htm, china_02.htm, чтобы обеспечить правильную сортировку всех файлов в папке.
5. Принципы наименования изображений соответствуют следующим стандартам:
☆ Имя разделено на две части: первую и последнюю, разделенные подчеркиванием.
☆ Заголовок указывает общий характер изображения, например рекламу, логотип, меню, кнопку и т. д.
☆ В общем:
Назовем прямоугольные изображения, такие как рекламные объявления и декоративные узоры, размещенные вверху страницы: баннер.
Мы назвали знаковую картинку: логотип.
Называем маленькую картинку ссылкой, которая не закреплена на кнопке страницы.
Назовем изображения столбцов ссылок, которые появляются непрерывно в определенной позиции на странице и имеют одинаковую природу: меню.
Мы назвали фотографию для украшения: pic
Называем изображение без ссылки для указания заголовка: title
Следуйте этому принципу и так далее.
☆Хвостовая часть используется для выражения особого смысла изображения.
☆ Вот несколько примеров. Вы сможете с первого взгляда понять значение изображений:
div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com]
баннер_sohu.gif
баннер_sina.gif
Menu_aboutus.gif
меню_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg