자격을 갖춘 페이지 재구성자로서 "웹 페이지 디자인 초안을 복원"하는 능력은 매우 중요합니다. 페이지가 디자인 초안과 정확히 동일할 수 있는지 여부에 중점을 두어야 합니다. 때로는 세부 사항이 성공과 실패를 결정할 수 있으며, 성공과 실패의 차이는 수천 마일이라고 할 수 있습니다. 특히 부티크 프로젝트를 만들 때.
1. 시각적 사양
때로는 디자이너로부터 얻은 디자인 초안이 반드시 정확하지는 않습니다. 예를 들어 동일한 유형의 모듈 제목 텍스트가 한 곳에서는 13PX이고 다른 곳에서는 14PX입니다. 육안으로는 실제 색상 값이 다릅니다. 동일한 유형의 팝업 상자라도 여러 크기가 있으므로 각 단락의 줄 높이가 다릅니다. 이 경우 디자인 초안을 복원할 수 없습니다. 디자인 초안을 복원하는 것입니다.
디자이너와의 커뮤니케이션 비용을 줄이기 위해 리팩토링 엔지니어는 초기 단계에서 디자이너에게 전체 사이트에 대한 시각적 사양을 작성하도록 촉구하고, 공개적으로 합의된 일부 내용을 문서 형식으로 적고, 엄격하게 구현해야 했습니다. 나중 단계에서요.
디자이너는 페이지 생성을 시작하기 전에 시각적 사양을 설정하는 것이 가장 좋습니다. 이렇게 하면 페이지 제작 후 공동 디버깅 비용을 크게 줄일 수 있습니다. 또한, 페이지 제작 시 초기 단계에서 폰트, 아이콘, 테두리, 배경색, 간격 등 템플릿화된 것들에 대해 통일된 사양을 만들고, 이후 단계에서 디자인 사양이 확정되면 통일된 클래스 인터페이스를 생성할 수 있습니다. 변경 사항을 쉽게 조정할 수 있습니다.
2. 디자인 초안의 주석은
디자이너가 디자인 초안에 다양한 간격, 너비, 특수 글꼴, 특수 글꼴 색상, 특수 줄 높이 등을 표시하도록 요구해야 합니다. 이렇게 하면 페이지를 만들 때 다시 측정할 필요가 없습니다. 디자인 초안의 정확성도 향상되어 디자이너와의 커뮤니케이션 비용과 제작 후 공동 디버깅 비용도 절감됩니다. 예는 다음과 같습니다.
3. 웹 페이지 눈금자 도구(FastStone Capture)
탐색용 나침반, 의사용 온도계, 목수용 줄자... 많은 직업에는 고유한 특수 측정 도구가 있으므로 페이지를 만들 때 간격, 너비, 높이도 측정해야 합니다. 색상... 그리고 기타 데이터, 그렇다면 페이지 제작에도 정확한 페이지 측정을 위한 전문 도구가 있어야 할까요?
여기에 웹 페이지를 정확하게 측정할 수 있는 소프트웨어인 FastStone Capture가 있습니다. 소프트웨어는 작지만 모든 것을 갖추고 있다고 할 수 있습니다. 필수 사항.
4. FastStone Capture 간단한 튜토리얼
1. 측정 도구 열기
제어판 오른쪽 끝에 있는 아이콘을 클릭하세요.
, "화면 눈금자"를 열고 선택하면 아래와 같은 눈금자가 화면에 표시됩니다. 원근 측정을 용이하게 하기 위해 눈금자를 투명 또는 반투명으로 설정할 수 있습니다.
2.
수평 측정의 경우 기본 눈금자가 수평으로 배치됩니다. 키보드의 상하좌우 키를 누르면 눈금자의 눈금을 마우스로 클릭할 수 있습니다. 화면 오른쪽 상단에 돋보기가 나타나 측정 영역이 표시됩니다. 마우스를 드래그하면 레벨의 길이를 정확하게 측정할 수 있습니다. 눈금자의 두 수평 가장자리를 끌어서 늘리거나 줄입니다.
3. 세로로 측정하려면
눈금자에 표시된 버튼 아이콘을 클릭하세요.
눈금자를 세로로 만들려면: 또는 눈금자를 두 번 클릭하여 눈금자를 세로로 만듭니다.
수직 측정과 수평 측정 방법은 유사하므로 여기서는 반복하지 않겠습니다.
4. 점대점을 측정하려면
눈금자에 있는 아이콘을 클릭하십시오.
, 화면 오른쪽 상단의 돋보기에 선 길이가 표시됩니다.
마우스를 사용하여 A 지점에서 B 지점까지 직선을 드래그하고 두 지점 사이의 거리를 측정합니다.
5. 직사각형 측정
안타깝게도 소프트웨어에는 정사각형이나 나침반이 없어 직사각형을 측정하기가 어렵습니다. 걱정하지 마세요. 대신 다른 방법을 사용할 수 있습니다. 여기서는 스크린샷 기능을 사용합니다.
눈금자 아이콘을 클릭하세요
눈금자를 닫고 소프트웨어 제어판으로 돌아가서 세 번째 아이콘을 클릭하십시오.
(사각형 영역 캡처):
측정하려는 웹 페이지의 직사각형 모듈을 마우스로 드래그하여 측정합니다. 화면 왼쪽(또는 오른쪽) 상단의 돋보기에 w*h=value*value, w가 표시됩니다. 너비, h는 높이입니다.
6.
소프트웨어 제어판 오른쪽에 있는 아이콘을 클릭하여 웹페이지 색상을 선택합니다.
, 드롭다운 상자가 나타나고 "화면 색상 선택기"를 선택하면 스포이드 아이콘이 나타납니다. 스포이드로 표시된 좌표를 이동하고 클릭하여 화면의 어느 위치에서나 색상 값을 얻습니다.