새로운 유동 격자 레이아웃 Dreamweaver CS6

• 할 수있다 3, 2024

간단한 웹 사이트 나 복잡한 CMS를 개발하는 경우 항상이 잔소리 질문이 떠 오릅니다. 모든 유형의 잠재 고객과 화면 해상도를 타겟팅하기 위해 최선을 다하고 있습니까? 글쎄, Dreamweaver^{아르 자형} CS6에는이 작업을보다 쉽게하는 새로운 기능이 있습니다.

과거에는 각기 다른 화면 해상도에 대해 서로 다른 CSS 파일을 생성하고 미디어 쿼리를 사용하여 필요한 CSS 파일을 할당해야했습니다. 이는 시간이 많이 걸리고 전체 사이트 개발 비용에 추가되었으며 이는 개발자와 클라이언트 모두에게 나쁜 소식이었습니다. Dreamweaver CS6는 적응 형 웹 사이트를 만드는 데 많은 노력을 기울였습니다.

이 새로운 워크 플로우 프로세스는 웹 사이트의 각 화면 해상도에 대한 기본 레이아웃 및 타이포그래피가있는 시작 템플릿과 비슷한 새로운 Fluid Grid 레이아웃에 따라 다릅니다.

1. 메뉴 바에서 File-New Fluid Grid Layout을 클릭하십시오.
   
   
2. 새 문서 대화 상자에이 새로운 적응 형 웹 페이지의 기본값이 표시됩니다. 너비는 각기 다른 화면 해상도에 맞게 고정됩니다.
   
   모바일 480px
   표 768px
   데스크톱 1232px
   
   
3. 각 화면 해상도에 대한 기본 열 수와 열 너비의 백분율을 변경하는 옵션이 있습니다. 기본값은 다음과 같습니다.
   
   모바일 5 열-91 %
   태블릿 8 컬럼-93 %
   데스크톱 10 열-90 %
   
   
4. 기본 작업 공간에는 코드 및 디자인보기가 표시 될 수 있습니다. 디자인보기에서 볼 수 있듯이 새 파일에는 이미 하나의 div 태그가 있습니다. 속성 패널에서 div의 기본 ID 및 클래스를 변경할 수 있습니다.
   
   물론 웹 페이지에는 둘 이상의 div가 필요합니다. 따라서 머리글, 탐색, 기본, 옆면 및 바닥 글에 div를 더 추가 할 수 있습니다.
   
   
5. 새 div를 추가하려면 삽입 패널에서 유동성 격자 레이아웃 div 태그 삽입을 선택하십시오.
   
   
6. 대화 상자에서 태그의 이름을 지정할 수 있습니다.
   
   
7. 페이지의 모든 주요 div를 추가했으면 클릭하고 드래그하여 그리드 내에서 위치를 조정할 수 있습니다.
   
   

우리는 우리 사이트의 모바일 버전을 구축하기 시작하고 더 큰 크기로 이동할 것을 제안합니다. 모바일, 태블릿 및 데스크탑 해상도 용 해상도 전환기를 사용하여 작업하는 동안 시각적 결과를 쉽게 비교할 수 있습니다.

레이아웃을 저장하면 세 가지 화면 해상도 모두에서 작동하는 하나의 HTML5 및 CSS3 파일이 생성됩니다. 이 파일들을 살펴보면, 파일이 어떻게 적응 형 웹 페이지를 만드는지에 대한 정보를 찾을 수 있습니다.

* Adobe는 검토 목적으로이 소프트웨어의 사본을 제공했습니다.

저작권 2018 Adobe Systems Incorporated. 판권 소유. Adobe 제품 스크린 샷은 Adobe Systems Incorporated의 허가하에 재 인쇄되었습니다. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, 플래시, ActionScript, 불꽃 놀이, 참여, 사로 잡기, 플래시 촉매 및 플래시 용지 는 미국 및 / 또는 기타 국가에서 사용되는 Adobe Systems Incorporated의 [a] 등록 상표 또는 상표입니다.

비디오 지침: [어도비] 드림위버 CS6에서 유동 격자 레이아웃으로 적응형 디자인 만들기 (할 수있다 2024).