-
어떻게 하면 웹사이트를 더 좋게 만들고, W3C 표준에 더 적합하게 만들 수 있으며, 좋은 사용자 경험을 가질 수 있을까요? 이것은 많은 웹페이지 제작자들이 직면한 문제이며, Netgather 웹마스터가 결국 다음과 같은 결과를 얻었음을 알고 싶어하는 것이기도 합니다. 장기적인 실무에 있어 모두에게 도움이 되기를 바랍니다.
1. 웹사이트의 주제를 이해하고, 웹사이트와 대부분의 탐색 그룹에 표시되는 콘텐츠를 명확히 합니다.
사용자에게 유용한 웹사이트를 구축하려면 먼저 웹사이트의 내용과 기능을 고려해야 합니다. 웹사이트 디자이너로서 전체 디자인 과정에서 사용자가 원하는 것을 어떻게 빠르고 쉽게 찾을 수 있을까요? 이 측면을 중심으로 모든 작업을 수행해야 합니다. 사용자가 원하는 것을 빨리 얻을 수 없거나 사이트가 사용하기 쉽지 않다면 해당 사이트는 실패한 것입니다. 사용자는 실망할 것이며 귀하의 웹사이트에 다시는 로그인하지 못할 수도 있습니다. 작은 예: 주식 웹 사이트를 만들고 싶지만 웹 사이트의 글꼴 크기가 12px인 경우 생각해보면 집에서 은퇴하고 주식에 투자하는 노인의 수가 적지 않습니다. 컨텐츠 아무리 좋고 예리해도 모니터에 돋보기를 대고 웹 사이트를 보는 것은 불가능합니다. 결과적으로는 많은 수의 사용자를 잃게 될 것입니다.
2. 합리적인 컬러 매칭
웹디자이너에게 디자인 과정은 고통스럽기도 하고 즐겁기도 합니다. 어떤 웹사이트를 만들고 싶은지 파악한 후에는 테마를 보다 합리적으로 반영할 수 있는 색상 선택과 레이아웃 과정을 거쳐야 합니다. 개인적으로 초개인화된 웹사이트를 구축하는 것이 아니라면 컬러 매칭은 어려운 작업이 아니라고 생각합니다. 먼저 메인 컬러를 알아보세요. 사실, 색상의 산업 특성은 그다지 중요하지 않습니다. 산업과 색상 매칭 사이의 관계를 형성하는 것은 산업에 대한 사람들의 인식일 뿐입니다. 예를 들어 호텔 웹사이트를 구축한다면 당연히 빨간색일 수 없습니다. 사실, 그것은 사람들의 인식에 달려 있습니다. 왜냐하면 우리 둘 다 빨간색은 축제의 색이므로 장례식장에 적합하지 않다고 생각했기 때문입니다. 예를 들어, 파란색은 일반적으로 기술이나 기술 기반 웹사이트에 더 좋고, 분홍색은 여성 웹사이트에 더 좋습니다. 둘째, 보조색상과 마감색상 홈페이지의 메인색상을 확인하기 위해서는 보조색상과 마감색상도 대부분 동일색상과 인접색상 조합을 사용하여야 한다. 기본 색상의 투명도, 채도, 밝음 또는 어둡기를 변경하여 동일한 색상 매칭을 얻습니다. 인접 색상 매칭은 빨간색, 주황색 등 색상환에서 인접한 색상을 취하여 기본 색상을 기반으로 합니다. 마무리 색상은 일반적으로 기본 색상과 상당히 다릅니다. 일반적으로 웹 페이지의 더 중요한 콘텐츠나 버튼에 사용됩니다. 그 기능은 사용자의 관심을 끌고 웹 페이지의 시각적 피로를 해소하는 것입니다. 너무 많은 외관을 피하는 것이 합리적입니다. 그렇지 않으면 비생산적입니다.
3. 좋은 웹 레이아웃
웹페이지 레이아웃에서 파악해야 할 요소는 명확한 우선순위, 조화와 정돈, 사용자의 시각적 습관 존중, 콘텐츠의 합리적인 배치 등이다. 가능한 한 사용자가 원하는 것을 먼저 표시하고 잠재적인 사용자 행동 지침에 주의를 기울이십시오. 속담처럼: 좋은 기억력은 나쁜 펜만큼 좋지 않습니다. 웹 사이트 인터페이스를 디자인할 때 먼저 연필을 사용하여 웹 사이트의 레이아웃을 스케치한 다음 그리기 소프트웨어를 사용하여 원하는 대로 만들고 수정해야 합니다. 원하는 효과. 세부 사항이 성공 또는 실패를 결정합니다. 디자인 렌더링에서는 가능한 한 적은 수의 큰 색상 블록을 사용하고 탐색을 강조하며 명확한 섹션을 사용하여 깨끗하고 간결하며 깔끔하고 조화로운 효과를 얻습니다. 예를 들어, 탐색 표시줄은 마우스 효과와 함께 적절하게 추가되어야 합니다. 웹 페이지의 줄은 색상 차이가 너무 크지 않아야 하며, 존재 여부에 관계없이 너무 명확하지 않아야 합니다. 그림과 텍스트, 웹 페이지 섹션 사이의 간격은 합리적이고 균일해야 하며, 동일한 수준의 텍스트 스타일은 통일되어야 하며, 일상 생활의 물리적 특성을 존중해야 합니다. 한쪽은 가볍고 다른 쪽은 가볍거나 물체를 감싸는 리본처럼 전환점이 약간 돌출되어 은은하게 둥근 그림자가 있어야 합니다.)...
웹페이지 렌더링 제작이 확정된 후 html 페이지 제작을 시작하겠습니다.
4.웹페이지 제목 및 메타
웹 페이지의 제목과 메타는 기본 열과 콘텐츠 페이지를 기반으로 해야 하며, 전체 사이트에 동일한 형식을 사용하지 마십시오. 검색 엔진에 거의 영향을 미치지 않는 키워드를 추가할 필요가 없습니다. 키워드 쌓기.
5.h1-h6 태그 사용
웹페이지 h1 태그는 한 번만 사용할 수 있습니다. 웹사이트의 홈페이지, 채널 페이지, 목록 페이지에서는 각각 웹사이트 이름, 채널 이름, 열 목록 이름으로 h1 태그를 사용할 수 있습니다. 단, 웹사이트의 기사 세부정보 페이지에서는 h1 태그를 사용해야 합니다. 기사 제목에 사용하세요. h2-h6 태그는 웹 사이트 계층 구조를 준수하면서 페이지에서 반복적으로 사용될 수 있습니다.
6.CSS 파일
링크를 사용하여 외부에서 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
작가 토마토의 개인 공간