960 그리드 안에서 웹 사이트를 디자인하는 방법 - 인형

시작할 웹 페이지를 디자인 할 때의 한 가지 유용한 각도 왜 웹 페이지는 960 픽셀 너비입니까? 그러나 그들은 그렇습니까? 아니, 전부는 아니야. 그러나 웹 디자이너가 페이지를 960px의 표준 너비로 만들기 위해 몰두하는 강력한 이유가 있습니다. 기능 및 양식.

우선, 매우 광범위한 뷰포트가 960 픽셀 페이지를 표시 할 수 있습니다. 풀 사이즈 모니터와 iPhone 모두 960 픽셀 페이지를 어떻게 표시합니까? 이 질문에는 두 부분으로 된 대답이 있습니다.

• 960 픽셀 페이지는 풀 사이즈 모니터의 전체 너비를 채우지 않습니다.하지만 좋은 일입니다. 큰 화면 모니터의 전체 너비를 채우는 웹 페이지는 너무 소화하기 어려울 것입니다. 텍스트 줄은 너무 길어 읽을 수 없습니다. 방문자가 통일 된 전체로 흡수되기 위해서는 페이지 내용이 너무 길어질 것입니다. 모바일 장치는 풀 사이즈 모니터보다 인치당 픽셀 수가 많습니다. Androids, iPhones 및 기타 소형 장치에서도 960px 페이지를 표시 할 수 있습니다.

• 이 그림은 디자인과 같은 디자인을 보여줍니다. Adobe Illustrator를 디자인 도구로 사용하여 960 개의 그리드를 3 개의 동일한 너비 열로 나눈 것입니다. 이 그림에서는 머리글 (흰색)이 화면 상단을 채우고 세 개의 열이 머리글 아래에 배치됩니다.

또는 960 그리드를 8 열 (120 픽셀 너비) 또는 16 열 (60 픽셀 너비)로 쉽게 나눌 수 있습니다. 이 부동산 고장으로 인해 디자이너 (사용자 일 수도 있음)가 광고, 배너 및 기타 콘텐츠를위한 적절한 크기의 아트 워크를 쉽게 만들 수 있습니다. 사실, 기술적 인 문제가 유일한 문제라면 웹 디자이너는 960px보다 약간 큰 웹 페이지 크기를 표준화 할 수 있으며 컨테이너는 여전히 모바일 장치에 적합합니다. 모바일을 포함하여 대부분의 뷰포트는 최소 1024 픽셀 폭이라고 주장하지만 960을 사용하면 워크 플로에서 해당 숫자의 "분할 가능성"을 사용할 수 있습니다.

Adobe Illustrator, Adobe Photoshop 또는 심지어 그래프 용지와 같은 프로그램을 사용하는 디자이너는 16 개의 균등 한 크기의 열 (60 픽셀)을 만들 수 있다는 것이 핵심입니다.

그리고 16 열 그리드 위에 디자인을 생성 한 다음 아트웍을 웹 디자이너에게 넘겨 주어 960 픽셀 너비의 컨테이너를 사용하는 HTML 및 CSS로 페이지를 변환하는 웹 디자이너와 원래 삽화에서.