-
Как мы можем сделать веб-сайт лучше, более соответствующим стандартам W3C и обеспечить удобство работы с пользователем. С этой проблемой сталкиваются многие производители веб-страниц, и каждый веб-мастер Netgather хочет знать об этом следующие результаты. в долгосрочной практической работе, я надеюсь, что это может быть полезно для всех. Пожалуйста, критикуйте и исправляйте любые недостатки.
1. Понять тематику веб-сайта, уточнить содержание, отображаемое на веб-сайте и в большинстве групп просмотра.
Если вы хотите создать веб-сайт, который будет полезен пользователям, вам следует сначала подумать о его содержании и функциях. Что нужно пользователям? Как они могут быстро и легко найти то, что хотят, на протяжении всего процесса проектирования? Все должно быть сделано вокруг этого аспекта. Если пользователи не могут быстро получить то, что хотят, или ваш сайт не удобен в использовании, значит, сайт плох. Пользователи будут разочарованы и, возможно, никогда больше не зайдут на ваш сайт. Небольшой пример: если вы хотите создать биржевой сайт, но размер шрифта сайта составляет 12 пикселей, задумайтесь, количество стариков, которые выходят на пенсию дома и спекулируют акциями, немалая цифра, даже если ваш сайт Контент Каким бы хорошим или острым он ни был, они не смогут поднести увеличительное стекло к монитору и посмотреть на ваш сайт. В результате вы потеряете большое количество пользователей.
2. Разумное сочетание цветов
Для веб-дизайнера процесс проектирования одновременно болезненный и радостный. После того, как вы определились, какой веб-сайт вы хотите создать, вам придется пройти процесс выбора цвета и макета, чтобы более разумно отразить тему. Лично я считаю, что если вы не создаете суперперсонализированный веб-сайт, то подбор цветов — несложная задача. Сначала определите основной цвет. На самом деле, отраслевые характеристики цвета не очень важны. Только восприятие отрасли людьми определяет связь между отраслью и соответствием цветов. Например, если вы создаете веб-сайт отеля, то, конечно, он не может быть красным. ? На самом деле, все сводится к восприятию людей, потому что мы оба считали красный цвет праздничным и поэтому неподходящим для похоронного бюро. Например, синий цвет обычно лучше подходит для веб-сайтов, посвященных технологиям или технологиям, розовый — для женских веб-сайтов и т. д. Во-вторых, вспомогательные цвета и цвета отделки. Для подтверждения основного цвета веб-сайта также требуются вспомогательные цвета и цвета отделки. Вспомогательные цвета обычно используют одну и ту же цветовую комбинацию и соседние цветовые комбинации. Одинаковый подбор цветов достигается путем изменения прозрачности, насыщенности, осветления или затемнения основного цвета. Сопоставление соседних цветов основано на основном цвете путем взятия соседних цветов на цветовом круге, например красного и оранжевого. Цвет отделки обычно сильно отличается от основного цвета. Обычно он используется в более важном контенте или кнопках веб-страницы. Его функция — привлечь внимание пользователя и устранить зрительное утомление веб-страницы. Используйте цвет отделки. разумно избегать слишком большого внешнего вида, иначе это будет контрпродуктивно.
3. Хороший веб-дизайн
Элементы, которые следует учитывать при макете веб-страницы, — это четкие приоритеты, координация и аккуратность, уважение к визуальным привычкам пользователей и разумное расположение контента. Как можно больше покажите, чего хотят пользователи, и обратите внимание на потенциальные рекомендации по поведению пользователей. Как говорится: хорошая память не так хороша, как плохая ручка. При разработке интерфейса веб-сайта мы должны сначала нарисовать карандашом макет веб-сайта, а затем использовать программное обеспечение для рисования, чтобы создать и изменить его после достижения цели. желаемый эффект. Детали определяют успех или неудачу. В визуализации дизайна используйте как можно меньше крупных цветных блоков, выделяйте навигацию и используйте четкие разделы, чтобы добиться чистого, лаконичного, аккуратного и скоординированного эффекта. Например, панель навигации должна быть соответствующим образом дополнена эффектом мыши; линии веб-страницы должны избегать слишком больших различий в цвете; контур и тень не должны быть слишком очевидными, если они присутствуют или нет, это лучше всего; изображения и тексты; расстояние между разделами веб-страницы должно быть разумным и равномерным; стили текста одного уровня должны быть едиными, а физические характеристики повседневной жизни должны достигаться реалистичными (например, свет становится ярче); с одной стороны и светлее с другой, или как лента, обвивающая предмет, точка поворота должна слегка выступать и иметь тонкую округлую тень)...
После подтверждения создания рендеринга веб-страницы мы приступим к созданию html-страницы.
4. Заголовок и мета-страница
Заголовок и мета-страницы должны основываться на основных столбцах и страницах контента. Не используйте один и тот же формат для всего сайта. Вам не нужно добавлять ключевые слова, что мало влияет на поисковые системы. наложение ключевых слов.
5.Использование тегов h1-h6.
Тег h1 веб-страницы можно использовать только один раз. На домашней странице, странице канала и странице списка веб-сайта тег h1 можно использовать для имени веб-сайта, имени канала и имени списка столбцов соответственно. Однако на странице сведений о статье веб-сайта тег h1 должен использоваться. использоваться в заголовке статьи. Теги h2-h6 можно использовать неоднократно на странице, в свою очередь, соблюдая иерархию сайта.
6.CSS-файлы
Попробуйте импортировать файлы CSS извне, используя ссылки, и напишите файл reset.css, который вы часто используете для сброса стиля CSS. Избегайте использования *{}. Напишите один стиль в одной строке, чтобы уменьшить размер файла. Старайтесь использовать определения классов и уменьшать определения идентификаторов. Никогда не делайте этого самостоятельно.
7.Оптимизация фоновых изображений.
Помимо фактического содержимого веб-сайта, изображения, используемые в рамке, должны быть максимально определены в файле CSS. В соответствии с реальной ситуацией фоновое изображение должно быть максимально объединено, чтобы улучшить скорость загрузки. Лучше не размещать очень маленькое изображение на большой площади.
8.div+css макет для уменьшения вложенности страниц
Цель использования макета div+css — сократить код страницы, сделать структуру сайта иерархической и разделить контент и представление. Уменьшение вложенности не только удобно для поисковых систем, но также помогает уменьшить размер страницы и упрощает последующее обслуживание и внесение изменений.
9. Оптимизируйте страницу js
JS-файлы, которые можно объединить, объединяются в один, что сокращает масштабные циклы и чрезмерные иерархические ссылки, а также повышает скорость загрузки и работы.
10. Избегайте неработающих ссылок и пустых соединений
Как было бы неприятно пользователям, если бы при нажатии на нужную им статью открывалось только сообщение «Эта страница не может быть отображена».
11. Соответствующий текст и графика.
Не заполняйте свой сайт изображениями намеренно. Поисковые системы не распознают изображения, за исключением атрибута alt. Добавление изображений в соответствующих местах может помочь привлечь посетителей и устранить усталость от чтения длинных текстов.
12. Требования к изображениям веб-страниц
Добавляйте атрибуты alt, а также атрибуты ширины и высоты к изображениям веб-страниц. Не сжимайте изображения намеренно, чтобы гарантировать, что изображение не будет деформировано.
13. Проверьте свой сайт в разных браузерах.
Чтобы позволить большему количеству людей нормально просматривать ваш веб-сайт, протестируйте свою страницу в различных основных браузерах, чтобы убедиться, что ваш веб-сайт работает нормально.
14. Пройдена проверка W3C.
http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
Личное пространство автора помидора