Макет веб-страницы CSS также можно рассматривать как систематическую работу. Разработка веб-сайта DIVCSS может выполняться несколькими людьми в сотрудничестве и в команде. Это требует определенного количества нормативных рабочих вопросов. требуется систематизированная и стандартизированная статья, перепечатанная из Blue, которая очень эффективна. Автор обобщил большой практический опыт, и каждый может обратиться к ней и поучиться на ней. Краткое содержание Эта спецификация является одновременно спецификацией разработки и справочником по языку сценариев. Эта спецификация не является неизменным положением, которое необходимо строго соблюдать. Ее следует использовать гибко и вносить определенные изменения в особых обстоятельствах. Однако, пожалуйста, не меняйте характеристики по своему желанию. Если у вас возникнут вопросы, пожалуйста, свяжитесь со мной вовремя, и я оперативно внесу изменения в соответствующие образцы кода и документы данной спецификации. Основные требования 1. Откройте три подкаталога изображений common temp в корневом каталоге веб-сайта, а затем при необходимости откройте подкаталог мультимедиа. Каталог изображений содержит общедоступные изображения, которые используются страницами в разных столбцах, например логотипы компаний, баннеры, меню и т. д. и кнопки и т. д.; общий подкаталог содержит общедоступные файлы, такие как css, js, php, include и т. д.; подкаталог temp содержит различный текст, изображения и другие оригинальные материалы, предоставленные клиентами; подкаталог media содержит мультимедийные файлы, такие как флэш, avi, быстрое время и т.д. . 2. В принципе, для каждого столбца в корневом каталоге следует открыть каталог в соответствии со структурой столбцов домашней страницы. При необходимости в каталоге каждого столбца следует открыть подкаталог изображений и мультимедиа для размещения изображений и мультимедиа. исключительно для этого столбца. Если в этом столбце много содержимого и он разделен на множество подчиненных столбцов, для мультимедийных файлов можно соответственно открыть другие каталоги. 3. Во временном каталоге часто бывает много файлов. Рекомендуется открыть каталог, названный по времени, чтобы классифицировать и систематизировать информацию, предоставляемую клиентами одну за другой. 4. Если нет особых обстоятельств, имена каталогов и файлов должны состоять из строчных английских букв, цифр и символов подчеркивания, пробелы и специальные символы не должны использоваться при именовании. Не используйте пиньинь без крайней необходимости. Опыт показывает, что каталоги, названные пиньинь, часто трудно понять даже через месяц. Сценарии У нас должно быть единое представление об общем стиле сценария, а это означает, что стиль сценария, который вы написали месяц спустя, соответствует стилю сценария, который вы написали месяц назад, и что стиль сценария, написанного вами разные разработчики в одной рабочей группе последовательны, потому что мы не можем развиваться изолированно вечно, вы можете сотрудничать с самим собой три месяца назад в любое время (ваш клиент требует доработки), вам часто приходится разрабатывать проект с разными коллегами в studio, а также вас могут попросить доработать люди, уволившиеся из разработки сценариев, вы, конечно, можете оставить проект и последующим коллегам. 1. Универсальный шаблон для Html-файлов: div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] Другие мета-теги div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] Таблица стилей определяет определение функции Javascript на стороне клиента и операцию инициализации. div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] Пополнить: 2. Для страниц, допускающих полнотекстовый поиск, чтобы обеспечить эффективный поиск поисковыми системами в Интернете, метатеги «Ключевые слова» и «Описание» должны быть добавлены между <head></head> HTML на главной странице канала. , например: div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] 3. Пример кода формата файла CSS: div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] Что здесь требует особого внимания, так это то, что порядок 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] Вместо этого это должно выглядеть так: div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] Это связано с тем, что браузер считает, что новая строка эквивалентна пробелу половинной ширины. Вышеупомянутый метод неправильного написания эквивалентен непреднамеренному добавлению пробела половинной ширины. Если действительно необходимо добавить пробел половинной ширины, так и должно быть. написано так: div css xhtml xml Пример исходного кода Пример исходного кода [www.52css.com] <table>, принадлежащий одному и тому же уровню, должен быть выровнен по левому краю. Кроме того, не допускается существование пустых ячеек без какого-либо содержимого. Ячейки высотой 12 пикселей и более должны быть записаны между <td> и </td>. высота меньше 12 пикселей, между <td> и </td> должно быть вставлено прозрачное изображение gif размером 1*1. Это связано с тем, что некоторые браузеры считают пустые ячейки незаконными и не интерпретируют их. Если порядок кода хаотичен, вы можете изменить его с помощью команды->применить форматирование кода в DW3! 5. Также существуют унифицированные стандарты записи ширины и высоты. Обычно для таблиц только с одним столбцом ширина записывается в теге <table>, для таблиц только с одной строкой высота записывается в теге <table>. ; для таблиц с несколькими строками и несколькими столбцами. Ширина и высота таблицы записываются в теге <td> первой строки или столбца. Короче говоря, следуйте одному принципу: не должно быть более одной высоты и ширины, которые управляют размером одной и той же ячейки. Убедитесь, что любая ширина и высота допустимы. То есть, если вы измените значение любой ширины и высоты в файле. код, он должен быть в разделе «Изменения видны в браузере». Сделать это непросто, требуется долгое время практики и размышлений. Общие принципы 1. Прежде чем упорядочить таблицу, тщательно обдумайте лучшее решение. Постарайтесь контролировать вложенность таблиц в пределах трех уровней и старайтесь избегать двух тегов <colspan> <rowspan>. Опыт показывает, что эти два знака A могут вызвать ошибку. много неприятностей. 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-файлов: 5. Принципы наименования изображений соответствуют следующим стандартам: ☆Хвостовая часть используется для выражения конкретного смысла изображения. ☆ Вот несколько примеров. Вы сможете с первого взгляда понять значение изображений: 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">
<link rel="stylesheet" type="text/css" href="style/style.css">
</голова>
<body bgcolor="#ffffff">
… …
</тело>
Чтобы гарантировать совместимость веб-сайта со следующим поколением стандартов XML веб-языка, все атрибуты тегов HTML должны быть заключены в одинарные или двойные кавычки, то есть мы должны писать <a href="url"> вместо < href=url >.
<meta name=”keywords” content=”Восточный Синкансэн, автомобили, покупка автомобилей”/>
<meta name=”description” content=”Восточная новая линия Канджин, первая в мире остановка китайской автомобильной информации”/>
<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; украшение текста: нет}
a.1: посетил {размер шрифта: 9pt; цвет: #3366cc; оформление текста: нет}
a.1:hover {размер шрифта: 9pt; цвет: #FF9900; оформление текста: нет}
a.1:active {размер шрифта: 9pt; цвет: #FF9922; оформление текста: нет};
.blue {семейство шрифтов: "宋体"; размер шрифта: 10,5 пт; высота строки: 20 пикселей; цвет: #0099FF; интервал между буквами: 5em}
->
</стиль>
<td><img src="../images/sample.gif”>
</td>
<td><img src="../images/sample.gif”></td>
<td><img src="../images/sample.gif"> </td>
☆ Создайте каталог новостей в корневом каталоге. ☆ Первый элемент новостей по умолчанию называется index.htm.
☆ Все новости, относящиеся к «внутренним новостям», называются по порядку: china_1.htm, china_2.htm, …
☆ Все новости, принадлежащие «Международным новостям», названы по порядку: internation_1.htm, internation _2.htm, …
☆ Если количество файлов состоит из двух цифр, укажите первые девять файлов: china_01.htm, china_02.htm, чтобы обеспечить правильную сортировку всех файлов в папке.
☆ Имя разделено на две части: первую и последнюю, разделенные подчеркиванием.
☆ Заголовок указывает общий характер изображения, например рекламу, логотип, меню, кнопку и т. д.
☆ В общем:
Назовем прямоугольные изображения, такие как рекламные объявления и декоративные узоры, размещенные вверху страницы: баннер.
Мы назвали знаковую картинку: логотип.
Называем маленькую картинку ссылкой, которая не закреплена на кнопке страницы.
Назовем изображения столбцов ссылок, которые появляются непрерывно в определенной позиции на странице и имеют одинаковую природу: меню.
Мы назвали фотографию для украшения: pic
Называем изображение без ссылки для указания заголовка: title
Следуйте этому принципу и так далее.
баннер_sohu.gif
баннер_sina.gif
Menu_aboutus.gif
меню_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg