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