웹 페이지의 주요 요소는 무엇입니까? 웹페이지의 기본 요소. HTML 언어 구조: 태그
모든 웹 페이지에는 각 리소스의 필수 구성 요소인 특정 표준 요소 집합이 포함되어 있습니다. 인터넷 네트워크. 이러한 요소의 레이아웃, 상대적 위치 설계는 웹마스터의 주요 작업 중 하나입니다.
웹페이지의 첫 번째 요소는 제목. 텍스트나 그래픽 형태로 만들 수 있지만 두 경우 모두 문서 상단에 위치해야 합니다. 때로는 제목과 결합되기도 함 키릴 문자 인코딩 선택 메뉴그리고 사이트의 러시아어 버전에서 영어 버전으로 전환하는 버튼, 이 웹 리소스가 두 가지 언어로 제공되는 경우.
일반적으로 문서의 부제목에는 배치를 위해 할당된 공간이 있습니다. 광고 배너. 대부분의 경우 웹 페이지 상단에 배너를 포함시키는 것은 배너 교환 서비스에 사이트를 등록하기 위한 전제 조건입니다. 배너 교환 서비스는 배너 교환 네트워크의 다른 참가자의 광고를 페이지에 표시하는 대가로 귀하가 생성한 리소스를 광고하는 시스템입니다. 귀하의 사이트.
문서의 주요 부분은 소위 텍스트 필드- 페이지의 의미론적 콘텐츠가 위치한 영역: 콘텐츠 정보 텍스트그리고 삽화. 나열된 요소는 "content"(영어에서 content)라고도 합니다. 텍스트 필드의 위치는 주로 웹 디자이너가 문서의 나머지 요소를 배치하는 방법에 따라 달라집니다.
웹페이지의 다음 필수 구성요소는 탐색 요소- 하이퍼링크 연결 이 문서사이트의 다른 섹션과 함께. 탐색 요소는 텍스트 문자열, 그래픽 개체, 즉 버튼 또는 활성 구성 요소의 형태로 만들 수 있습니다.
예를 들어 Java 애플릿입니다. 후자는 "전통적인" 자매 버튼과 달리 마우스 움직임에 반응하여 커서를 마우스 위에 올리면 몇 가지 간단한 작업(백라이트 켜기, "클릭" 효과 만들기, 모양 변경 등)을 수행할 수 있는 동일한 버튼입니다. ).d.).
가장 확립된 접근 방식은 페이지 왼쪽 가장자리에 탐색 요소를 배치하는 것입니다.
문서 하단에 게시하는 것이 관례입니다. 사이트 개발자 및 주소에 대한 정보 이메일 를 통해 리소스 방문자는 자신의 응답, 제안 및 희망 사항을 페이지 소유자에게 보낼 수 있습니다.
웹 페이지가 시작 문서인 경우 해당 웹 페이지의 맨 아래에도 배치됩니다. 히트 카운터- 서버에 설치된 CGI 스크립트를 호출하는 작은 스크립트로, 사용자 브라우저에서 문서를 열 때마다 기록하고 카운터 표시기의 값을 변경합니다. 한 페이지에 여러 개의 서로 다른 카운터를 배치하는 것은 권장되지 않습니다.
웹사이트는 서로 다릅니다:
크기(여러 페이지부터 기가바이트의 정보가 포함된 웹 서버까지).
디자인(일반 색상 구성, 글꼴 형식, 사용된 일러스트레이션 등)
구조(링크 시스템, 사이트 내 페이지 연결 및 다른 사이트와의 연결).
동시에 모든 웹페이지는 두 그룹으로 나눌 수 있는 표준 요소로 구성됩니다.
수동(예시) 요소
생기
활성 요소
입력 필드
스위치
프레임액자- 프레임, 프레임워크)는 웹페이지를 여러 부분(창)으로 나누어 다른 부분과 상관없이 각 부분의 내용을 변경할 수 있도록 하는 기술입니다. 따라서 사이트의 목차는 불변 프레임에 배치되고 내용은 다른 프레임에 배치되는 경우가 많습니다.
주제 9. 전자 커뮤니케이션. 이메일 주소
전자메일(E-mail)은 네트워크 서비스의 주요 형태이다. 메시징은 시스템을 통해 수행됩니다. 메일 서버.
메일 서버의 각 사용자마다 별도의 사서함이메일 메시지가 저장되는 서버 디스크의 위치입니다. 이메일 주소 등록 절차를 완료하면 사용자는 로그인 및 비밀번호를 받게 되며, 이 정보는 자신의 사서함에 액세스하는 데 사용됩니다. 메일함의 이름(로그인)은 사용자가 직접 지정합니다. 서버는 이름이 고유한지만 확인합니다.
이메일 주소는 @ 기호(일반적으로 "개"라고 함)로 구분된 두 부분으로 구성됩니다.
예를 들어, 이리나@ 우편. 루
이메일 주소는 라틴 문자, 숫자 또는 기호(사용 가능)를 사용하여 공백 없이 작성됩니다.
사용자 컴퓨터의 이메일 주소 등록 데이터를 기반으로계정 , 여기에는 사용자 이름(로그인) 및 비밀번호.
이 기록을 기반으로 서버는 사용자를 식별합니다.
보호를 위한 인터넷 보안 계획
공격의 대상은 네트워크를 통해 전송되는 정보와 인터넷에 연결된 컴퓨터일 수 있습니다.
인터넷을 사용할 때 완벽한 보안을 보장하는 것은 불가능하지만 사전 보안 계획을 세우면 공격 가능성이 크게 줄어듭니다. 인터넷이 끊임없이 발전하고 있기 때문에 새로운 보안 문제가 끊임없이 발생하므로 보안 도구를 업데이트하는 것은 컴퓨터 시스템의 상태를 유지하는 데 필수적인 부분입니다.
방어선:
가능한 공격 차단:
안전하지 않고 불필요한 데이터를 차단하는 특수 소프트웨어 및 하드웨어를 사용하십시오.
인증 및 암호화를 사용합니다.
위험 원인 감소:
꼭 필요한 인터넷 서비스만 사용하세요.
버그가 없는 소프트웨어를 사용하고 정기적으로 업데이트하세요.
소프트웨어를 올바르게 구성하십시오(허용 수준이 낮을수록 보안 수준은 높아집니다).
자신에 대한 정보를 온라인으로 광고하지 마십시오.
컴퓨터 리소스에 대한 액세스를 제한하십시오.
공격으로부터 복구 준비:
정기적으로 생성 및 업데이트 백업작업 데이터.
항상 소프트웨어 배포 키트를 준비하십시오.
인증(에서rp생태학적인증- 진위) – 진위 확인.
우리 모두는 키워드를 선택하고 키워드 목록을 올바르게 작성하는 방법, 키워드를 사용하여 특정 검색어와 관련된 웹 사이트를 만드는 방법에 대한 수많은 기사를 읽었습니다. 웹페이지에 키워드를 배치하는 방법을 자세히 살펴보겠습니다.
웹 페이지에 키워드를 배치하는 위치와 방법을 아는 것은 귀하의 SEO 회사를 성공시키거나 망칠 수 있습니다.
모든 웹페이지에는 키워드를 배치해야 하는 5가지 요소가 있습니다.
- 페이지 제목(제목 태그)
- 페이지 키워드(메타태그 키워드)
- 페이지 설명(메타 설명 태그)
- 이미지의 대체 텍스트(Alt 태그)
- 웹페이지 콘텐츠(본문 태그)
위의 웹페이지 요소 중 가장 중요한 것은 페이지의 콘텐츠입니다(5번 항목). 이에 대한 자세한 내용은 아래에서 확인하세요.
지금은 이 목록을 순서대로 살펴보겠습니다.
요소 #1. 페이지 제목(제목 태그)
먼저 페이지 제목(제목 태그)을 살펴보겠습니다. 이 요소는 모든 웹페이지의 헤드 블록에 있는 다른 모든 요소 중 첫 번째이자 가장 중요합니다.
인터넷 브라우저의 맨 윗줄에서 웹페이지의 제목을 볼 수 있습니다. 이를 확인하려면 다음과 같은 브라우저를 실행하십시오. 인터넷 익스플로러, 오페라 또는 모질라 파이어 폭스, 아무 웹사이트로 이동하여 제목 태그의 내용을 해당 브라우저의 맨 윗줄과 비교하세요. 검색 엔진은 사이트에 대한 정보를 수집하고 주제를 결정하며 검색 엔진 결과(SERP)에서 웹 페이지 이름으로 사용하는 고유한 목적으로 이 태그를 사용합니다.
기억하다!웹페이지의 제목은 간단한 설명.
위 사항 외에도 제목 태그의 내용은 인터넷 브라우저 즐겨찾기에 추가 시 웹 페이지의 제목으로 사용됩니다.
요소 번호 2. 페이지 키워드(메타태그 키워드)
이제 키워드와 설명 메타태그에 대해 이야기해 보겠습니다. 얼마 전에는 검색 엔진 색인에 사이트를 추가할 때 메타 키워드 태그가 사용되었습니다. 그러나 그런 시대는 지나갔습니다. 이제 검색 엔진은 이 태그를 무시합니다. 왜냐하면... "더러운" 목적으로 사용되는 경우가 많습니다. 일부 검색 엔진은 사이트의 주제를 결정하기 위해 이 태그에 주의를 기울입니다.
지금까지 말한 모든 것에서 이 태그는 필수는 아니지만 의도된 목적으로만 사용할 수 있습니다.
키워드는 쉼표로 구분해야 합니다. 가장 중요한 키워드를 목록의 시작 부분에 배치한 다음 중요도의 내림차순으로 배치합니다. 검색 엔진은 더 이상 키워드의 대소문자를 구분하지 않으므로 이제 모든 키워드를 소문자로 입력할 수 있습니다.
요소 번호 3. 페이지 설명(메타 설명 태그)
설명 메타 태그는 키워드를 배치해야 하는 또 다른 사이트 요소입니다. 검색 엔진은 이 태그를 검색하여 키워드가 있는지 확인하고 해당 내용을 사이트 자체의 콘텐츠(body 태그의 내용)와 비교합니다. 매우 중요한 상황은 검색 엔진이 설명 태그의 내용을 검색 결과(SERP)의 웹 페이지 설명으로 사용한다는 것입니다.
이 태그에는 웹페이지에 대한 간략한 설명이 포함되어야 하지만 50단어 이하여야 합니다.
요소 번호 4. 이미지의 대체 텍스트(Alt 태그)
Alt 태그는 이미지 내용에 대한 텍스트 설명입니다. 어떤 이유로 사진이 로드되지 않고 이 사진에 대체 텍스트가 있는 경우 사진 대신 이 텍스트가 표시됩니다.
그림이 로드되고 그림에 대체 텍스트도 있는 경우 그림 위에 마우스를 올리면 해당 내용을 볼 수 있습니다. Alt 태그는 어떤 이유로 그래픽을 표시하지 않는 인터넷 사용자의 편의를 위해 사용됩니다.
많은 검색 엔진이 이 태그의 내용을 색인화하므로 키워드가 포함될 수 있습니다. 대체 텍스트는 이미지와 일치하고, 이미지를 설명하고, 그에 상응하는 텍스트여야 한다는 점만 기억하세요. 구분선, 글머리 기호 등 마크업 이미지에는 alt 태그를 사용하지 마세요.
요소 번호 5. 웹페이지 콘텐츠(본문 태그)
그래서 우리는 마침내 사이트의 가장 기본적인 요소, 즉 인터넷 사용자에게 가장 흥미로운 콘텐츠를 포함하는 요소인 body 태그에 도달했습니다. 주요 검색 엔진은 귀하의 웹 사이트 페이지에 키워드가 여러 번 반복된다는 이유만으로 더 이상 SERP에서 1위 위치를 제공하지 않습니다. 특정 항목과 가장 관련성이 높은 항목만 검색어웹 페이지.
이를 달성하려면 선택한 키워드를 웹 페이지 코드에 구현하고 반복 빈도를 관찰해야 합니다. 다음과 같이 진행하십시오. 각 특정 페이지에 대해 1-2개의 키워드를 선택하고 해당 페이지를 최적화하십시오.
새로운 웹사이트나 제품에 대한 프레젠테이션을 준비하고 있다고 상상해 보세요. 예를 들어 슬라이드 파워포인트 프레젠테이션– 단락. 짧고 명확해야 합니다. PowerPoint 프레젠테이션과 마찬가지로 목록을 사용하여 사이트나 제품의 장점을 나열할 수 있으며, 매번 선택한 키워드에 중점을 둘 수 있습니다.
선택한 키워드를 각 웹페이지의 위 5가지 요소에 구현하면 현재 순위와 결과가 크게 향상됩니다.
HTML 언어
웹 페이지는 어떤 형식으로든 존재할 수 있지만 표준은 이미지, 사운드, 애니메이션, 비디오 클립 및 웹 전체에 분산된 다른 문서에 대한 하이퍼텍스트 링크가 풍부한 풍부한 텍스트를 생성하도록 설계된 하이퍼텍스트 마크업 언어인 하이퍼텍스트 마크업 언어입니다. 동일한 서버에 있거나 동일한 웹 프로젝트의 필수적인 부분입니다.
지식 없이도 웹 작업을 할 수 있습니다 HTML 언어, HTML 텍스트는 다양한 특수 편집기 및 변환기로 생성될 수 있기 때문입니다. 하지만 HTML로 직접 작성하는 것은 어렵지 않습니다. 기능이 제한되거나, 버그가 있거나, 여러 플랫폼에서 작동하지 않는 열악한 HTML을 생성하는 HTML 편집기나 변환기를 배우는 것보다 훨씬 쉬울 수도 있습니다.
HTML 언어는 여러 가지 형태로 제공되며 계속 발전하고 있지만 HTML 구성은 앞으로도 계속 사용될 것입니다. HTML을 배우고 좀 더 깊게 이해하고, HTML 학습 초기에 문서를 작성하고, 최대한 확장함으로써 많은 사람들이 볼 수 있는 웹페이지를 만들 수 있습니다. 웹 브라우저, 현재와 미래 모두. 이는 Netscape Navigator, Internet Explorer 또는 기타 프로그램에서 제공하는 고급 방법과 같은 다른 방법을 사용할 가능성을 배제하지 않습니다.
HTML 작업은 실제로 필요한 경우에만 확장 기능을 사용하여 표준화된 언어로 문서를 작성하는 방법을 자세히 배우는 방법입니다.
HTML은 World Wide Web Consortium에 의해 비준되었습니다. 이는 널리 사용되는 여러 브라우저에서 지원되며 아마도 거의 모든 브라우저의 기초가 될 것입니다. 소프트웨어, 웹과 관련된 것입니다.
웹페이지 제작의 원리, 웹페이지의 기본요소
웹 페이지를 생성하려면 HTML(HyperText Markup Language)이라는 특수 언어가 사용됩니다. 이 언어는 웹 페이지의 특정 요소의 형식이나 목적을 지정하는 데 사용되는 태그라는 특수 명령 집합을 정의합니다. 웹 페이지에 배치하는 데 특수 태그가 사용됩니다. 그래픽 이미지, 오디오 및 비디오 클립 및 기타 소위 포함된 개체입니다.
웹페이지는 평범하다 텍스트 파일다음에서 생성됨 표준 메모장또는 유사한 간단한 텍스트 편집기. 그리고 여기에는 페이지에 넣고 싶은 텍스트와 동일한 텍스트가 포함되어 있으며 특별한 방법으로만 표시됩니다. 하기 위해 다양한 프로그램웹 브라우저가 동일한 웹 페이지를 올바르게 표시하려면 HTML이 표준화되어야 합니다.
실제로 HTML 표준은 Microsoft Internet Explorer 및 Google Chrom과 같은 가장 유명한 브라우저에서 제안하고 지원하는 태그의 존재에 크게 영향을 받습니다. 이 태그는 이 순간현재 HTML 사양의 일부일 수도 있고 아닐 수도 있습니다.
특별히 설계된 편집 도구가 있습니다. HTML 작성. 키가 포함되어 있으므로 시간이 절약됩니다. 빠른 접근문서, 표의 초기 설정을 지정하거나 단순히 텍스트에 스타일을 적용하는 등 반복적인 작업을 수행하는 데 사용됩니다. HTML 편집기는 HTML을 수동으로 컴파일하기 위한 규칙에 대한 지식이 필요하다는 점에서 WYSIWYG 저작 도구와 다릅니다. 편집기는 이 프로세스를 단순화하고 속도를 높입니다. WWWC 표준 HTML 태그(표준 태그) 외에도 웹 브라우저는 많은 비표준 태그를 지원합니다. 이러한 태그는 특정 웹 브라우저 프로그램 개발자가 경쟁사보다 우위를 점하기 위해 도입한 것입니다. 그들은 이러한 독점 확장이 나중에 HTML 표준의 일부가 되기를 바랐지만 이러한 희망은 결코 실현되지 않았습니다. 그러나 태그는 그대로 유지되며 계속 지원됩니다.
웹 페이지를 만들려면 Internet Explorer 또는 Internet Explorer와 같은 브라우저가 필요합니다. 구글 크롬 Mozilla Firefox 또는 두 가지 모두 더 좋습니다. HTML 요소시청 프로그램에 따라 다르게 표시되므로 이러한 차이를 제어하는 것이 매우 바람직합니다.
또한 HTML 파일을 준비하는 등의 텍스트 편집기와 수행된 작업을 보고 제어하려면 브라우저가 필요합니다.
웹페이지를 만들기 위한 첫 번째 단계는 사이트 구조를 만드는 것입니다. 웹사이트는 고유한 이름과 영구 주소를 가진 서버로, WWW에 물리적으로 연결되어 있거나 가상으로 다른 대규모 서버에서 호스팅됩니다.
사이트 구조를 만든 후 다음을 실행하십시오. 텍스트 에디터말씀, 창조하다 새 문서웹 페이지로 저장한 다음 웹 페이지 만들기를 진행하세요. 이는 우리의 작업을 더 쉽고 더 좋게 만듭니다. 여기에서 우리는 웹 사이트를 만드는 시기, 디버깅, 주제 및 채우기를 결정합니다.
방문자가 사이트 인터페이스를 이해할 수 있도록 하는 몇 가지 간단한 규칙이 있습니다[10번].
1. 사이트에는 쓸데없는 정보가 포함되어서는 안 되며, 글꼴은 읽기 쉬워야 합니다. 그래픽 요소는 명확하고 표현력이 풍부해야 하며 로드 속도가 빨라야 했습니다.
2. 인간의 눈은 웹사이트 페이지를 위에서 아래로 스캔합니다. 가장 많은 관심은 페이지의 왼쪽 상단에 집중됩니다. 따라서 원칙적으로 사이트 페이지 상단에는 중요한 정보: 회사명, 로고, 홈페이지명 등
3. 사이트 방문자는 관심 있는 정보를 쉽게 찾을 수 있어야 하며 포괄적인 정보(텍스트 설명과 여러 사진)를 얻을 수 있어야 합니다.
4. 정보는 그룹 간에 배포되어야 합니다. 이름과 설명으로 제품을 검색하는 기능을 제공할 수 있습니다.
5. 웹사이트에는 다음과 같은 정보 섹션이 있어야 합니다.
회사에 관한 정보(활동 분야, 주소, 연락처 등)
웹페이지의 기본 요소:
1. 헤더/로고(헤더)
3. 내용/내용(텍스트 필드)
4. 탐색 요소
5. 사이트 개발자에 대한 정보
모든 웹 페이지에는 특정 세트가 포함되어 있습니다. 표준 요소, 이는 모든 인터넷 리소스의 필수 구성 요소입니다.
우리가 살펴보아야 할 웹 페이지의 첫 번째 요소는 제목입니다. 사이트의 로고나 이름은 모든 기관 입구의 표지판과 동일한 역할을 합니다. 인터넷은 또 다른 문제입니다. 여기서 주요 이동 방법은 순간 이동이므로 모든 페이지에서 이 "표시"를 볼 필요가 있습니다.
문서의 주요 부분은 소위 텍스트 필드(페이지의 의미론적 내용이 있는 영역, 즉 의미 있는 정보 텍스트 및 그림)가 차지합니다.
나열된 요소는 "Content"(영어, content - Content)라고도 합니다. 텍스트 필드의 배치는 주로 웹 디자이너가 나머지 문서 요소를 배치하는 방법에 따라 달라집니다.
그림 1. 사이트 콘텐츠의 예
웹 페이지의 다음 필수 구성 요소는 탐색 요소입니다. 즉, 이 문서를 사이트의 다른 섹션과 연결하는 하이퍼링크입니다. 탐색 요소는 텍스트 문자열, 그래픽 개체, 즉 버튼 또는 Java 애플릿과 같은 활성 구성 요소의 형태로 만들 수 있습니다.
문서 하단에는 사이트 개발자에 대한 정보와 리소스 방문자가 페이지 소유자에게 응답, 제안 및 희망사항을 보낼 수 있는 이메일 주소를 게시하는 것이 일반적입니다. (그림 2)
그림 2. 연락처 정보
웹 사이트 제작을 시작하기 전에 페이지 요소 정렬 문제에 대해 매우 책임감 있는 접근 방식을 취하십시오. 일반적으로 웹페이지는 페이지 콘텐츠, 탐색, 관련 정보로 구분됩니다. 이러한 요소는 차례로 더 작은 요소로 나뉩니다.
결과적으로 웹 사이트 개발을 위한 일련의 작업은 다음과 같은 간단한 알고리즘으로 귀결됩니다.
1. 목표 설정 및 주요 업무 정의.
2. 미래의 주제 섹션 목록을 만듭니다.
3. 리소스의 논리적, 물리적 구조 개발.
4. 디자인 스케치, 사이트 레이아웃, 보이지 않는 레이아웃 테이블을 준비합니다.
5. 텍스트 자료 준비.
6. 벡터 형식의 그래픽 자료 준비.
7. 벡터 드로잉을 래스터 형식으로 내보냅니다.
8. 모든 이미지의 최적화.
9. 웹 페이지 템플릿 만들기.
10. 웹페이지 조립 및 코드 디버깅.
11. 다양한 화면 해상도, 색상 팔레트, 다양한 브라우저를 사용하여 웹 페이지의 표시 정체성을 확인합니다.
모든 웹 페이지에는 모든 인터넷 리소스의 필수 구성 요소인 특정 표준 요소 집합이 포함되어 있습니다. 물론 이러한 개체의 범위와 수는 사이트의 주제별 초점, 사이트에 게시된 자료의 양, 이 리소스 작성자가 스스로 설정한 목표 및 목표에 따라 달라질 수 있습니다. 이러한 요소의 레이아웃, 상대적 위치 설계는 웹마스터의 주요 작업 중 하나입니다.
우리가 살펴보아야 할 웹 페이지의 첫 번째 요소는 제목입니다. 텍스트나 그래픽 형태로 만들 수 있지만 두 경우 모두 문서 상단에 위치해야 합니다. 이 웹 리소스가 두 가지 언어로 제공되는 경우 헤더는 키릴 문자 인코딩을 선택하기 위한 메뉴와 사이트의 러시아어 버전에서 영어 버전으로 전환하기 위한 버튼과 결합되는 경우가 있습니다. 일반적으로 문서의 부제 바로 아래에는 광고 배너를 배치하기 위해 할당된 공간이 있습니다. 대부분의 경우 웹 페이지 상단에 배너를 포함시키는 것은 배너 교환 서비스에 사이트를 등록하기 위한 전제 조건입니다. 배너 교환 네트워크의 페이지에 다른 참가자의 광고를 표시하는 대가로 귀하가 생성한 리소스를 광고하는 시스템입니다. 귀하의 사이트. 문서 제목 아래 게시되는 배너의 표준 크기는 일반적으로 468x60픽셀입니다. 정적 페이지 레이아웃을 사용하는 경우 문서의 머리글 너비는 약 640픽셀입니다. 이는 주로 문서가 640x480픽셀 모니터에 올바르게 표시되도록 하고 가로 스크롤 막대가 있어 보기 어렵게 만드는 것을 방지하기 위한 것입니다. 분명히 이 경우 배너 너비는 헤더 너비보다 훨씬 작습니다. 이로 인해 광고 공간을 할당하려는 페이지 부분에 빈 공간이 나타나서 다음으로 채워질 수 있습니다. 이 사이트를 소유한 회사의 로고 또는 웹호스팅을 구현하는 서버에 대한 링크. 물론 로고가 항상 필요한 것은 아닙니다. 일반적으로 로고는 사이트가 상업적인 목적을 가지고 있는 경우에만 웹페이지에 포함됩니다.
문서의 주요 부분은 소위 텍스트 필드(페이지의 의미론적 내용이 있는 영역, 즉 의미 있는 정보 텍스트 및 그림)가 차지합니다. 나열된 요소는 "content"(영어에서 content)라고도 합니다. 텍스트 필드의 위치는 주로 웹 디자이너가 문서의 나머지 요소를 배치하는 방법에 따라 달라집니다.
웹 페이지의 다음 필수 구성 요소는 탐색 요소입니다. 즉, 이 문서를 사이트의 다른 섹션과 연결하는 하이퍼링크입니다. 탐색 요소는 텍스트 문자열, 그래픽 개체, 즉 버튼 또는 Java 애플릿과 같은 활성 구성 요소의 형태로 만들 수 있습니다. 후자는 "전통적인" 자매 버튼과 달리 마우스 움직임에 반응하여 커서를 마우스 위에 올리면 몇 가지 간단한 작업(백라이트 켜기, "클릭" 효과 만들기, 모양 변경 등)을 수행할 수 있는 동일한 버튼입니다. ).d.). "웹 디자인의 기본 "가정" 섹션에서 이미 언급했듯이 탐색 요소는 항상 "눈에 보이는", "가까운" 방식으로 배치되어야 합니다. 즉, 사용자가 페이지를 뒤로 "되감기"하려면 텍스트 필드가 높이가 여러 실제 화면을 차지하는 경우 다른 섹션에 대한 링크를 찾는 데 오랜 시간을 소비해야 합니다. 가장 확립된 접근 방식은 페이지 왼쪽 가장자리에 탐색 요소를 배치하는 것입니다.
문서 하단에는 사이트 개발자에 대한 정보와 리소스 방문자가 페이지 소유자에게 응답, 제안 및 희망사항을 보낼 수 있는 이메일 주소를 게시하는 것이 일반적입니다. 웹 페이지가 시작 문서인 경우 방문 카운터도 그 하단에 배치됩니다. 이는 서버에 설치된 CGI 스크립트를 호출하는 작은 스크립트로, 사용자 브라우저에서 문서를 열 때마다 기록하여 값을 변경합니다. 카운터 표시. 덕분에 웹마스터는 일정 기간 동안 자신의 페이지를 방문한 방문자 수를 쉽게 확인할 수 있습니다. 방문 카운터는 사이트에 액세스할 때 호출되는 첫 번째 페이지에만 설치되며 리소스의 다른 문서에는 존재하지 않습니다.
그래서 우리는 웹 페이지의 모든 주요 구성 요소와 서로에 대한 가능한 위치를 조사했습니다. 위에 설명된 전체 구성요소 세트를 포함하는 웹사이트 레이아웃의 예가 그림 1에 나와 있습니다. 3.6. 문서의 왼쪽 가장자리를 따라 배치할 탐색 요소를 선택합니다.
쌀. 3.6. 탐색 요소가 왼쪽에 배치된 웹 페이지 레이아웃의 예
실제로 우리는 탐색 요소의 디자인이 화면의 오른쪽 가장자리에 배치되어 있는 웹사이트를 자주 접합니다. 이 경우 텍스트 필드가 왼쪽으로 이동하고 문서의 나머지 구성 요소는 조합의 최대 미학 원칙에 따라 배열됩니다. 이러한 사이트 구현의 예가 그림 1에 나와 있습니다. 3.7.
쌀. 3.7. 탐색 요소가 오른쪽에 배치된 웹 페이지 레이아웃의 예
그림에서 볼 수 있듯이 이 경우 로고는 문서 제목과 같은 높이에 배치되고 광고 배너는 페이지 중앙을 기준으로 배치됩니다. 이 접근 방식을 사용하면 광고용 헤더, 로고 및 필드의 그래픽 디자인을 단일 색상과 예술적인 스타일로 유지하는 것이 좋습니다. 그러면 이러한 개체의 위치 비대칭이 너무 명확하지 않고 "눈을 아프게"하지 않습니다. ” 엄격한 “표 형식” 디자인 미학을 지지하는 사람들입니다.
탐색 요소는 페이지의 오른쪽 및 왼쪽 테두리 근처뿐만 아니라 문서 상단에도 배치할 수 있습니다. 제 생각에는 이 레이아웃 옵션이 홈 페이지를 생성할 때 가장 적합합니다. 이 경우 모든 페이지 개체가 보이지 않는 테이블의 지정된 너비에 조화롭게 "맞아" 테이블 자체를 준비하는 것이 크게 단순화됩니다. 이 접근 방식의 유일한 단점은 문서 하단에 탐색 요소를 복제해야 한다는 것입니다. 페이지에서 수직으로 스크롤하면 탐색 요소가 화면 상단 테두리 뒤로 사라지고 해당 요소에 접근하려면 사용자가 다음을 수행해야 하기 때문입니다. 화면을 "되감기"하는 것은 매우 불편합니다. 상단 탐색 요소가 있는 페이지 디자인의 예가 그림 1에 나와 있습니다. 3.8.
쌀. 3.8. 탐색 요소가 상단에 배치된 웹 페이지 레이아웃의 예
물론, 이 섹션에서 언급된 모든 내용은 만병통치약이 아니라 행동 지침입니다. 나는 사이트의 구조를 계획할 때 사용되는 일반적인 원칙만을 개괄적으로 설명하려고 노력하고 있지만 최종 결정은 항상 웹마스터에게 있습니다. 궁극적으로 미래 프로젝트의 기초로 어떤 디자인을 사용하든 작업 결과는 여전히 정확할 것입니다. 인터넷에는 사이트 제작자를 하나 또는 다른 엄격한 프레임워크에 강요하는 검열이나 규정이 없습니다. 위의 범주에 속하지 않는 디자인 솔루션의 예는 소위 혼합 레이아웃이며 대략적인 다이어그램이 그림 1에 나와 있습니다. 3.9.
그림에서 볼 수 있듯이 이 예에서는 일부 제어 요소가 페이지 헤더에 직접 내장되어 있습니다. 우리 얘기 중이야사이트의 러시아어 버전과 영어 버전 간 전환을 위한 버튼 정보 및 탐색 버튼 정보: 리소스 작성자의 이메일 주소에 대한 링크(문서 하단에 중복됨) 및 다음 중 하나에 대한 링크일 수 있습니다. 뉴스 페이지와 같은 주제별 섹션. 탐색 요소의 기본 블록은 문서의 왼쪽 테두리를 기준으로 위치하지만 키릴 문자 인코딩 선택 메뉴는 페이지 상단의 광고 배너 바로 아래에 있습니다. 텍스트 필드는 두 개의 비대칭 열로 나뉘며 오른쪽 열에는 해당 섹션에 대한 링크를 포함하여 리소스를 구성하는 주제별 섹션에 대한 간략한 공지가 포함되어 있습니다.
분명히 웹페이지에는 매우 다양한 "혼합 레이아웃" 옵션이 있을 수 있습니다. 구체적인 솔루션리소스를 구성하는 섹션 수, 사이트에 배치하기 위해 준비된 텍스트의 양, 마지막으로 디자이너 자신의 상상력에 따라 달라집니다. 중요한 것은 모습사이트는 방문자로부터 불만을 제기하지 않았습니다. 결국, 다른 누구도 아닌 개발자인 당신만이 당신의 모든 능력과 재능을 보여주고 자신의 취향에 맞게 페이지를 구성할 권리가 있습니다. 일부 홈 페이지의 작성자는 의심의 여지없이 문서의 오른쪽 상단에 조회수 카운터를 배치하고 사이트 이름은 작고 깔끔한 글꼴로 작성되고 광고 배너 아래에 게시되며 어떤 이유로 탐색 요소 텍스트 블록 중앙, 자신에 대한 이야기와 프로젝트 작성자가 사랑하는 개 사진 사이에 예기치 않게 나타납니다. 그들이 말했듯이 맛과 색깔에는 동지가 없습니다. 하지만 개인적으로 이 질병은 치료가 불가능한 것 같습니다.
쌀. 3.9. "혼합" 웹 페이지 레이아웃의 예
