웹 페이지 제작의 구조적 레이아웃은 무엇입니까?
1. "통과" 글꼴의 구조 레이아웃
서체라고 하면 충분하다. 페이지 상단에는' 사이트 로고+광고바+메인 메뉴' 또는 메인 메뉴, 왼쪽 하단에는 2 차 바, 오른쪽에는 링크 바, 특정 내용의 레이아웃은 화면 가운데에 표시된다.
이 레이아웃의 장점은 레이아웃을 최대한 활용하고, 페이지 구조가 명확하고, 좌우 스택이 분명하며, 1 차 및 2 차 구분이 뚜렷하며, 정보량이 많다는 것이다. 단점은 페이지가 붐비고 너무 융통성이 없다는 것이다. 디테일과 컬러에 변화와 조정이 부족하면 단조로움을 느끼기 쉽다.
2. "국가" 글꼴 레이아웃
"국가" 자형의 레이아웃은 "통과" 자형의 레이아웃에서 진화한 것이다. "일반" 글꼴을 유지하면서 페이지 아래쪽에 가로 메뉴 또는 광고를 추가합니다. 이는 일부 대형 웹 사이트에서 선호하는 유형입니다. 일반적으로 맨 위에는 사이트 제목과 배너 광고, 그 다음은 사이트 주요 내용이다. 좌우 두 개의 작은 블록의 내용, 가운데에는 주체 부분이 있고, 좌우와 나란히 있고, 아래쪽에는 사이트의 기본 정보, 연락처, 저작권 고지가 있습니다. 이 구조는 인터넷에서 볼 수 있는 가장 일반적인 구조 유형입니다.
이 레이아웃의 장점은 레이아웃을 최대한 활용하고, 정보량이 많으며, 다른 페이지와의 링크를 쉽게 전환할 수 있다는 것입니다. 단점은 페이지가 붐비고 사방이 폐쇄되어 질식감을 느끼게 한다는 것이다.
3.t 레이아웃
페이지 맨 위에는' 사이트 로고+광고바', 왼쪽에는 메인 메뉴, 오른쪽에는 주요 내용이 있다는 의미다. 이 레이아웃의 장점은 페이지 구조가 명확하고 우선 순위가 명확하며 초보자에게 가장 간단한 레이아웃 방법이라는 것입니다. 단점은 페이지가 답답하다는 것이다. 디테일 속 색채에 주의하지 않으면' 재미없어 보인다' 고 쉽게 할 수 있다.
4. "3" 글꼴 레이아웃
이런 배치는 외국 사이트에서 많이 채택해서 국내에는 많지 않다. 페이지에 두 개의 가로 색상 블록이 있어 전체 페이지를 여러 부분으로 나누는 것이 특징이다. 색상 블록은 대부분 광고란, 업데이트 및 저작권 힌트를 넣는다.
레이아웃을 비교하다
이름에서 알 수 있듯이, 이 레이아웃은 좌우 또는 상하 대비 방식 (반암반명) 을 사용한다. 일반적으로 디자인 지향 웹 사이트에 사용됩니다. 장점은 시각적 충격이 강하다는 것입니다. 단점은 두 부분을 유기적으로 결합하기가 어렵다는 것이다.
6. 유행 배치
팝은 광고어에서 인용한다. 페이지 레이아웃이 포스터와 같다는 뜻이다. 아름다운 사진 한 장이 페이지의 디자인 센터라는 뜻이다. 이 유형은 기본적으로 일부 웹 사이트의 첫 페이지에 나타납니다. 대부분 정교한 그래픽 디자인과 작은 애니메이션을 조합하고, 몇 개의 간단한 링크를 넣거나, 단지' 진입' 링크일 뿐, 심지어 첫 페이지의 사진에 직접 링크를 만들 수도 있습니다. 아무런 힌트도 없습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 이런 배치는 대부분 기업 웹사이트와 개인 홈페이지에 등장해 잘 처리하면 즐거운 느낌을 줄 수 있다.
7. 플래시 레이아웃
이 레이아웃은 전체 또는 대부분의 웹 페이지 자체가 Flash 애니메이션이며 그 자체가 동적이라는 것을 의미합니다. 화면은 일반적으로 화려하지 않고 재미있지 않고 비교적 트렌디한 배치 방식이다. 사실 이것은 표지 구조와 비슷하지만, 이 유형은 현재 매우 유행하는 플래시를 사용한다. 표지 구조와는 달리, Flash 의 강력한 기능으로 인해 페이지에 표현되는 정보가 더욱 풍부해 제대로 처리되면 시각 및 청각 효과가 기존 멀티미디어보다 나쁘지 않습니다. 사이트마다 페이지 콘텐츠 배치가 다릅니다. 일반 웹 페이지의 기본 컨텐츠로는 제목, 로고, 머리글, 바닥글, 주요 내용, 광고란 등이 있습니다. A, 페이지 제목에는 사이트의 각 페이지에 페이지의 주요 내용을 알려주는 제목이 있으며, 페이지 레이아웃이 아닌 브라우저의 제목 표시줄에 메시지가 나타납니다. 그것의 중요한 역할은 방문자가 방향을 잃지 않고 사이트 내용을 명확하게 탐색할 수 있도록 안내하는 것이다. HTML 언어에 제목을 추가하는 것은 비교적 간단합니다.
제목 이름 B, 사이트 로고, 대외교류의 중요한 창구, 창시자는 이를 이용해 자신의 이미지를 홍보한다. 기업 (협회) 이 CIS(CorporateIdentitySystem) 이미지 인식 시스템을 도입한 경우 웹 사이트 구축 과정에서 웹 사이트 디자인은 이 시스템을 기반으로 해야 합니다. 여기서 상징적인 패턴은 웹 사이트의 LOGO 입니다. 성공적인 사이트는 설립자 실체처럼 독특한 이미지 인식을 가지고 있어 사이트 홍보 과정에서 더 적은 노력으로 더 많은 일을 할 수 있다. (윌리엄 셰익스피어, 윈스턴, 성공명언) 아직 CIS 를 도입하지 않았다면 한 사이트의 로고들은 사이트 건설 전에 사이트의 전반적인 포지셔닝에 따라 디자인되어 제작되어야 한다. 이는 한 제품의 상표처럼 사이트의 특색, 내용, 내재적인 문화적 내포와 이념을 반영한 것이다. LOGO 는 일반적으로 기본 페이지의 눈에 띄는 위치와 보조 페이지의 머리글 위치에 설정됩니다. C. 머리글 머리글은 페이지의 위쪽 절반을 나타냅니다. 어떤 페이지는 매우 뚜렷하게 구분되어 있고, 어떤 페이지는 뚜렷한 구분이 없거나 머리말이 없다. 머리의 관심값이 높다. 대부분의 사이트 제작자들은 사이트 목적, 슬로건, 광고 언어 등을 설치한다. 여기, 다른 사람들은 그것을 임대용 광고석으로 디자인했습니다. D. 바닥글 바닥글은 페이지 맨 아래이며 일반적으로 웹 사이트 소속 회사 (커뮤니티) 의 이름, 주소, 저작권 정보, e-메일 주소를 표시하는 하이퍼링크로 사용됩니다. 내비게이션은 웹 디자인의 중요한 부분이자 전체 웹 사이트 디자인의 독립 부분이다. 일반적으로 한 사이트 연도의 탐색 위치는 각 페이지에 고정되어 있습니다. 가이드의 위치는 웹 사이트의 구조와 전체 레이아웃에서 중요한 역할을 한다. 탐색 위치에는 일반적으로 왼쪽, 오른쪽, 위, 아래의 네 가지 표준 표시 위치가 있습니다. 일부 웹 사이트에서는 다양한 탐색을 사용하여 페이지 액세스 가능성을 높입니다. F. 주요 컨텐트의 주요 컨텐트는 페이지 디자인의 주요 요소입니다. 일반적으로 2 차 링크 내용의 제목이나 내용의 요약 또는 내용의 일부 발췌문입니다. 표현 수법은 일반적으로 문자와 그림의 결합이다. 그 레이아웃은 일반적으로 내용의 분류에 따라 열별로 정렬됩니다. 페이지의 관심 값은 일반적으로 위에서 아래로, 왼쪽에서 오른쪽으로 정렬되므로 중요한 내용은 일반적으로 페이지 위쪽에 정렬되고 보조 내용은 오른쪽 아래에 정렬됩니다. 원발행인: 멘와이 2018 전자상거래 홈페이지 홈페이지 홈페이지 콘텐츠 레이아웃 교육: 화효진의 일반적인 웹 페이지 레이아웃 구조인 중국어 글꼴 레이아웃은 같은 글꼴 레이아웃에서 진화해 레이아웃 구조가 한자 국가와 비슷하기 때문에 붙여진 이름이다. 사이트의 로고와 탐색 표시줄 또는 Banner 광고는 일반적으로 페이지 맨 위에 있고, 사이트의 주요 내용은 주로 페이지 중간에 있으며, 사이트의 저작권 정보와 연락처는 일반적으로 맨 아래에 있습니다. T 자 레이아웃, 일반적인 웹 페이지 레이아웃 구조, 영문 대문자 T 와 유사한 이름, 일반 가로방향 사이트의 logo 또는 Banner 광고는 페이지 맨 위에, 탐색 표시줄 메뉴는 왼쪽 아래, 웹 본문 등 주요 내용은 오른쪽 아래에 있습니다. 웹 페이지의 일반적인 레이아웃 구조는 제목 텍스트 유형입니다. 제목 텍스트 레이아웃의 레이아웃 구조는 일반적으로 문장 페이지, 뉴스 페이지 및 일부 등록 페이지를 표시하는 데 사용됩니다. 일반적인 웹 페이지 레이아웃 구조인 왼쪽 및 오른쪽 프레임 레이아웃 구조는 일부 대형 포럼과 기업에서 자주 사용하는 레이아웃 구조입니다. 레이아웃 구조는 주로 좌우 두 페이지로 나뉜다. 왼쪽은 일반적으로 탐색 표시줄 링크이고 오른쪽은 사이트의 주요 내용입니다. 일반적인 페이지 레이아웃 구조는 위쪽 및 아래쪽 프레임입니다. 위쪽 및 아래쪽 프레임 레이아웃은 이전 왼쪽 및 오른쪽 프레임 레이아웃과 유사합니다. 유일한 차이점은 두 페이지로 나누어진 프레임이라는 것입니다. 일반적인 웹 레이아웃 구조 통합 프레임-통합 프레임 레이아웃은 왼쪽 및 오른쪽 프레임 레이아웃과 위쪽 및 아래쪽 프레임 레이아웃의 페이지 레이아웃 기술을 결합한 일반적인 웹 페이지 레이아웃 구조 POP 레이아웃입니다. Pop 레이아웃은 예술적이고 스타일리시한 웹 배치 방식이다. 페이지 디자인은 보통 정교한 포스터 사진을 레이아웃의 주체로 삼는다. 일반적인 웹 레이아웃 구조 플래시 레이아웃-플래시 레이아웃은 하나 이상의 플래시 페이지를 주체로 웹 페이지 프런트엔드를 배우는 첫 번째 단계입니다. 웹 구조 구분, 웹 구조 분할은 어떤 원칙을 따라야 하며, 웹 구조는 어떻게 분할해야 합니까?
프런트 엔드 초보자에게 첫 번째 단계는 웹 페이지의 구조를 나누는 방법을 배우는 것이다. 디자이너가 설계도를 줄 때, 너는 이 그림에 근거하여 표준 페이지를 만들어야 한다. 여기서 말하는 표준인 W3C 표준은 w3school 온라인 자습서를 가리킨다. 그런 다음 완전한 표준 웹 페이지를 만드는 첫 번째 단계는 웹 페이지의 구조를 나누는 것입니다. 일반적으로 웹 구조의 분할은 다음과 같은 몇 가지 원칙을 따라야 합니다.
첫째, 하향식 원칙
브라우저가 하향식 순서로 웹 페이지를 렌더링하기 때문이다. 여기에 렌더링이라는 단어가 언급되어 있다. 렌더링이란 브라우저에서 코드를 페이지 표시 내용으로 변환하는 프로세스입니다. 브라우저는 위에서 아래로 코드를 읽고 위에서 아래로 표시합니다.
둘째, 왼쪽에서 오른쪽으로
동시에 같은 행의 내용은 왼쪽에서 오른쪽으로 렌더링되므로 구조를 나눌 때 왼쪽에서 오른쪽으로 순서가 있습니다.
셋째, 한 픽셀의 원리는
이 원칙은 초보자에게는 반드시 견지해야 하지만, 그렇다고 네가 계속 견지해야 한다는 뜻은 아니다. 선행 기간은 반드시 홈페이지를 정확하게 나누어야 한다, 특히 가로로 나누어야 한다. 외부 상자의 폭이 1200 픽셀이고, 내부 두 상자의 합계가 600 픽셀이고, 다른 하나는 60 1 픽셀이며, 상위 상자의 폭을 초과하는 경우 다음 줄에는 두 번째 상자가 표시되어야 한다고 상상해 보십시오.
이 세 가지 원칙을 이야기하면, 어떤 사람들은 맹목적으로 이 원칙들을 따를 것이다. 예를 들어, 구조를 나눌 때, 반드시 그것들을 상하 두 부분으로 나누어야 한다. 하지만 예를 들어, 저는 아래에서 이 웹페이지의 일부를 가로챘습니다. 그림과 문자는 사실 하나의 전체에 속하며, 문자는 그림에 대한 설명이므로 상하 두 부분으로 나누어서는 안 되며 가로로 나누어야 한다. 내용의 일환으로, 각 사진과 문자는 가로로 네 부분으로 나뉜다.
일반 웹 페이지에는 헤더 (헤더 영역), 배너 영역 (광고 배너 영역), 메인 (주요 콘텐츠 영역), 포터 (하단 영역) 가 포함된다고 합니다. 한 페이지의 모든 페이지가 이와 같은 것은 아닙니다. 일부 웹 페이지에는 배너가 없지만 초보자는 헤더 아래 부분을 배너로 쉽게 나눌 수 있습니다. 이러한 부분 외에도 일부 웹 페이지에는 아이콘 등의 영역이 있어 주 () 로 나눕니다.
주요 분야에 대해 말하자면, 이런 구조적 구분은 다양하다. 일부 웹 페이지에는 왼쪽에서 오른쪽으로 배경색과 배경도가 있습니다. 그러면 우리 구조사들도 칸이 달린 외부 상자가 있어야 합니다. 이 상자는 배경 색상이나 배경도를 주고, 안에 내부 상자를 중첩시켜 가시 영역에 너비를 고정시키고 중심을 맞춰야 합니다. Banner 의 배경이 없다면 이번에는 banner 의 상자를 줄 필요가 없습니다. 바디 영역을 고정 너비의 중심에 두면 됩니다.
그렇다면 구조를 나눌 때 상자 영역 사이의 틈을 어떻게 나누느냐도 초보자에게 가장 골치 아픈 문제다. 사실, 엄밀히 말하면, 이러한 공백은 구조적 구분에 영향을 미치지 않습니다. 왜냐하면 빈 영역은 이제 코드로 구현될 수 있기 때문입니다. 그러나 일부 문자 영역은 문자 위 아래로 나눌 수 없습니다. 문자에 자체 행 높이가 있기 때문입니다.
또한 일부 지역에서는 작은 그림이나 내용이 외부에 있는 큰 상자 위에 덮여 있을 수 있습니다. 구조를 나눌 때 무시할 수 있습니다. 코드를 구현할 때 위치 지정 기술을 사용하여 뒤에서 구현할 수 있기 때문입니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 코드명언)