Методы веб-реконструкции и решения распространенных проблем
1. Знание xhtml+CSS
●Подготовительные работы перед рефакторингом:
1. Получите PSD-рендеринг, это должен быть PSD, чтобы вы могли самостоятельно его нарезать;
2. Сначала создайте веб-страницу, не разрезая PSD, и назовите ее index_psd.html (эта страница предназначена для справки);
3. Подготовьте несколько необходимых папок images (для картинок), css (для файлов стилей css) и js (для js-файлов);
●После завершения подготовки сначала проанализируйте структуру всей страницы. Чтобы проанализировать структуру страницы, сначала посмотрите на целое, а затем на части. Сначала посмотрите, как связаны между собой самые большие разделы страницы, расположены ли они рядом сверху и снизу или расположены плиткой слева и справа. Четко увидев большую структуру разделов страницы, вы можете построить самые основные блоки страницы. Например, если наша страница имеет верхнюю, среднюю и нижнюю структуру, мы можем написать:
<div id="header"></div>//Размещение заголовка, навигации и т. д.
<div id="content"></div>//Содержимое темы страницы
<div id="footer"></div>//Заявление об авторских правах в нижнем колонтитуле страницы и т. д.
●При написании CSS вам необходимо использовать файл index_psd.html. Откройте этот файл с помощью DW и выберите режим просмотра. Вы можете измерить длину и ширину каждого блока, потянув за вспомогательные линии, чтобы получить ссылку для настройки CSS. Преимущество этого в том, что восстановленная страница может быть с точностью до 1 пикселя.
●Каждый раз, когда вы пишете блок, вам необходимо использовать IE и ff для проверки эффекта, чтобы проблемы можно было быстро обнаружить и решить. Когда каждый блок не имеет содержимого, лучше всего добавить к ним цвет фона.
●После написания большого раздела проанализируйте его содержимое. Тот же принцип заключается в том, чтобы начать с целого, а затем с частей. Например, страница контента выглядит так, будто на ней есть два раздела слева и справа. время, мы можем написать код так:
<div id="header"></div>//Размещение заголовка, навигации и т. д.
<div id="content">//Содержимое темы страницы
<div class="content-2-1"></div>//Слева
<div class="content-2-2"></div>//right
</div>
<div id="footer"></div>//Заявление об авторских правах в нижнем колонтитуле страницы и т. д.
Таблица 2 в контенте-2-1 разделена на два столбца, 2-1 представляет левый столбец, а 2-2 представляет правый столбец. Этот метод разделения столбцов может сделать вас более интуитивно понятным при просмотре кода страницы. столбцы, это преимущества более очевидны.
●Списки новостей, списки статей и т. д. лучше всего использовать:
<ул>
<li>Заголовок новости 1< >
<li>Заголовок новости 2< >
…………
<li>Заголовок новости< >
</ul>
●Лучше всего использовать список столбцов и описание:
<дл>
<dt>Столбец 1</dt>
<dl>Описание столбца 1</dl>
<dt>Столбец 2</dt>
<dl>Описание столбца 2</dl>
</дл>
●Лучше всего добавить следующий оператор в начале определения файла CSS.
тело,html{высота:100%};
* {маржа: 0 пикселей; дополнение: 0 пикселей;
●Лучше всего устанавливать overflow::hidden для больших блоков, чтобы гарантировать, что контейнер не растягивается и тем самым не разрушается макет всей страницы.
2. Проблемы с DIV+CSS
1. Неожиданная пустая проблема в IE6:
Когда несколько маленьких блоков укладываются рядом в большом блоке, сумма ширин маленьких блоков равна ширине большого блока. В других браузерах, таких как FF, это не проблема, но в IE6 есть только. один блок. Если его невозможно отобразить, он будет помещен ниже. На данный момент вы можете установить CSS маленького блока для отображения: встроенный. Если это не помогло, уменьшите ширину каждого блока на 1 или 2 пикселя.
2. Проблема с ореолом IE6:
Иногда в IE6 несколько символов в конце содержимого div повторяются внизу большого DIV, чего нет в других браузерах, таких как FF. Есть два способа решить эту проблему: 1) Удалить комментарий. 2) Добавить <div class="clear"></div> после этого DIV. Определите стиль CSS Clear как:
.прозрачный {
размер шрифта: 1 пиксель;
ясно: оба;
видимость: скрыта;
ширина: 1 пиксель;
}
Рекомендуется использовать второй способ. Удаление комментариев повлияет на читаемость кода.
3． Проблема с невозможностью центрирования IE6:
Вообще говоря, пока вы устанавливаете стиль CSS для элемента div (устанавливаете его идентификатор равным 1): Margin:0px auto;, вы можете центрировать элемент div в контейнере, в котором он находится (установите его идентификатор на 0). следующее:
<div id="0">
<div id="1"> … </div>
</div>
Но IE6 не работает. В это время вы можете установить CSS для div0: text-align: center;
4. На связанных изображениях в IE6 появляются неожиданные рамки.
В IE6 иногда связанные изображения имеют некрасивую рамку, вызванную <a>. Этого можно избежать, установив { border:0px;} в CSS.
5. Содержимое внутри DIV в FF сошло с рельсов
Иногда контент, который выглядит нормально в IE, можно увидеть в FF, но содержимое внутри DIV вышло наружу. Эта ситуация особенно очевидна, когда у div есть граница. Это связано с тем, что после установки высоты div в IE, если содержимое внутри div выше, чем div, высота div автоматически увеличится. Но FF не такой гибкий, пока высота ограничена, она не изменится сама по себе. На данный момент вы можете решить эту проблему, сбросив высоту или установив ее автоматически.
6． Область неожиданно исчезает в FF
В FF пропала нормальная раскладка в IE. Такая проблема часто возникает в блоке авторских прав в нижнем углу страницы. Эту проблему можно решить, добавив в эту область:clear:both;
В данный момент я не могу думать о других проблемах. В процессе реконструкции всегда будут возникать какие-то необъяснимые проблемы. Если вы хорошо думаете, потрудитесь проверить или поискать в Интернете, вы всегда найдете решение. Решение любой проблемы – это большая выгода.