이 문서에서는 개발자가 수동으로 만드는 사이트, 즉 구성하는 사이트에 중점을 둡니다.

이 문서는 HTML 그리고 CSS . 또한 최소한 기본 사항을 아는 것이 바람직합니다. 어도비 포토샵

실제 사이트를 만드는 단계 중 하나는 PSD 템플릿을 만드는 것입니다. 레이아웃, 디자인 또는 소스 코드와 같은 이름도 찾을 수 있습니다.

템플릿은 디자이너에게 주문됩니다. 디자이너는 Adobe Photoshop에서 레이아웃을 그리고 PSD 형식으로 저장합니다.

뭐 PSD 형식?

더 나은 이해를 위해 간단한 삶의 예를 들 수 있습니다. 어린 시절에는 모든 사람들이 응용 프로그램을 붙였습니다. 그들은 종이에서 집을 잘라서 붙였습니다. 그들은 크리스마스 트리를 잘라내어 붙여 넣었습니다. 그리고 작업이 완료될 때까지 계속됩니다.

그리고 이제 숫자가 잘려서 시트에 배치 된 상황을 상상할 수 있습니다. 올바른 장소그러나 아직 접착되지 않았습니다. 따라서 PSD 파일 형식은 그림이 아직 접착되지 않았지만 올바른 순서로 정렬된 응용 프로그램과 비교할 수 있습니다.

덕분에 이러한 각 "입상" 또는 템플릿의 각 개별 조각을 별도의 그림으로 저장한 다음 사이트에서 사용할 수 있습니다.

다음은 생성될 페이지의 레이아웃입니다.

우리가 준비된 템플릿 PSD 형식의 경우 레이아웃으로 직접 이동할 수 있습니다.

  1. 레이아웃이 저장될 폴더를 생성합니다(예: "사이트").
  2. "사이트" 폴더에서 이미지 폴더를 만듭니다(예: img).
  3. "사이트" 폴더에서 스타일 폴더를 만듭니다(예: css).
  4. 이제 Adobe Photoshop을 실행하고 그 안에 있는 psd 파일을 열어야 합니다. 여기에서 사이트에서 사용할 모든 이미지를 "제거"해야 합니다.

여기서 "레이어"버튼에주의를 기울여야합니다. 그림에서 빨간색 타원으로 강조 표시됩니다.

이 버튼은 레이어 창을 켜고 끕니다. 레이어는 아플리케의 접착되지 않은 부분입니다. 편의를 위해 레이어는 축소 및 확장할 수 있는 폴더에 배포됩니다. 작동 원리는 Windows 탐색기와 거의 동일합니다.

첫 번째 단계는 모든 폴더를 축소하는 것입니다. 필요에 따라 확장합니다.

이제 사진을 꺼내기 시작할 수 있습니다.

첫 번째 단계는 프레임 도구를 선택하는 것입니다. 그런 다음 사이트 로고를 제한하는 부분만 선택합니다.

그런 다음 Enter 키를 누릅니다. 선택한 영역을 제외한 모든 부분이 잘립니다.

이제 배경을 제거할 수 있습니다. 이렇게 하려면 배경 레이어를 끕니다.

필요한 레이어를 빠르게 찾으려면 다음을 수행할 수 있습니다.

여기서 레이어의 이름은 "그림 2"입니다. 눈의 이미지를 클릭하면 레이어가 보이지 않게 됩니다.

그러나 꺼야 할 레이어가 두 개 더 있습니다. 동작은 비슷합니다.

이제 저장할 수 있습니다. 이렇게 하려면 다음 단계를 따르세요.

4개의 제안된 옵션 중에서 선택하고 제안된 두 번째 옵션에서 선택합니다. gif 확장자를 선택하십시오.

파일 이름 로고.gif . 폴더에 파일 저장 이미지 . 나머지 이미지도 거기에 저장해야 합니다.

다음 원칙을 따를 수 있습니다.

  • 사진 품질 - jpg
  • 투명한 배경의 사진 품질– png-8 , 품질에 만족하지 않음 - png-24
  • 이미지의 몇 가지 색상 - GIF

자르기 전에 원래 버전으로 돌아가려면 기록 창을 열어야 합니다.

파일 이름을 클릭하고 적절한 축척을 설정합니다.

다른 이미지도 같은 방식으로 저장됩니다.

메뉴 항목 위로 마우스를 가져갈 때 나타나는 발 이미지도 마찬가지입니다.

다른 이미지는 선택 사항입니다. 흰색일 수도 있고 투명할 수도 있습니다.

여기에서 저장 옵션을 매우 신중하게 선택해야 합니다. 왜냐하면 psd 소스에서는 가장자리가 제대로 처리되지 않은 이미지가 드물지 않기 때문입니다. 다음은 예입니다.

이미지가 저장되었습니다. 투명한 배경. 그러나 검은색으로 볼 때 처리가 제대로 되지 않은 가장자리가 보입니다. 그러나 밝은 배경을 사용하는 경우 이 결함이 눈에 띄지 않을 수 있습니다.

배경의 경우 타일처럼 페이지를 채울 작은 그림을 잘라야 합니다. 그러나 이 예에서는 배경이 반복되지 않습니다. 따라서 비슷한 그림을 찾는 것이 좋습니다. 그리고 배경에서 다양한 조각을 잘라내어 픽업을 시도할 수 있습니다.

레이아웃 시작. 싸개. 사이트 헤더.

레이아웃은 HTML5와 CSS3를 사용하여 다룰 것입니다.

사이트 폴더에 다음을 만들어야 합니다. HTML 파일. 예를 들어 index.html

폴더에 CSS 파일을 생성 스타일.css .

또한 폴더에서 CSS 파일을 넣어야 합니다 재설정.css 다음 코드로

/* v2.0 | 20110126 라이선스: 없음(공개 도메인) */ html, body, div, span, 애플릿, 객체, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 두문자어, 주소, 큰, 인용, 코드, del, dfn, em, img, ins, kbd, q, s, samp, 작은, 스트라이크, 강한, 하위, sup, tt, var, b, u, i, 센터, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 기사, 옆으로, 캔버스, 세부 정보, 삽입, 그림, figcaption, 바닥글, 머리글, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* 이전 브라우저를 위한 HTML5 표시 역할 재설정 */ 기사, 제쳐두고, 세부 정보, figcaption, 그림, 바닥글, 헤더, hgroup, 메뉴, 탐색, 섹션( display: block; ) body( line-height: 1; ) ol, ul ( 목록 스타일: 없음; ) blockquote, q ( 따옴표: 없음; ) blockquote:before, blockquote:after, q:before, q:after ( 내용: ""; 내용: 없음; ) 테이블( 테두리- 접다: 접다; 경계 r-간격: 0; )

사실은 다른 브라우저동일한 태그에 대해 다양한 설정. 브라우저 간 호환성을 보장하려면 재설정해야 합니다. 위의 코드는 Eric Mayer가 작성한 것입니다.

먼저 index.html 주요 태그를 작성해야 합니다.

구아비 내츄럴

스타일의 태그용 배경을 설정해야 합니다.

이미 언급했듯이 여기의 배경은 반복되지 않습니다. 따라서 유사한 것을 선택하는 것이 더 합리적입니다.

본문( 배경 이미지: url(../img/bg.gif); )

이제 사이트에 대한 래퍼(모든 콘텐츠가 배치될 블록)를 만들어야 합니다.

싸개

폐쇄에 가깝다

블록 식별자는 주석에 기록됩니다. 태그 시간 포함
많아지고 혼란이 생길 ​​수 있습니다. 어느 div가 닫히는지 명확하지 않습니다.

또한 블록 내부에는 단어 래퍼가 있습니다. 일시적으로 있습니다. 목표는 레이아웃 중에 블록을 보고 나머지 블록과 구별하는 것입니다. 같은 이유로 블록의 스타일에 일시적으로 약간의 밝은 배경이 주어집니다.

스타일을 설정하려면 상단과 하단의 너비와 들여쓰기를 알아야 합니다. 측정을 위해 다음을 수행할 수 있습니다. 어도비 포토샵 직사각형 선택 윤곽 도구를 사용하여 오른쪽에서 왼쪽 가장자리로 사이트 이미지를 선택합니다. 높이는 중요하지 않습니다.

너비는 "정보" 창에서 볼 수 있습니다.

그것은 964px로 밝혀졌습니다.

마찬가지로 선택 항목의 높이만 이미 중요하고 너비가 아니라 들여쓰기가 위와 아래에서 측정됩니다.

그것은 상단에 100px, 하단에 85px로 밝혀졌습니다.

이러한 방식으로 소스의 모든 거리가 결정됩니다.

#wrapper (폭: 964px; 여백-상단: 100px; 여백-오른쪽: 자동; 여백-하단: 85px; 여백-왼쪽: 자동; 배경-색상: #FF9; )

왼쪽 및 오른쪽 여백이 자동으로 설정됩니다. 이렇게 하면 블록이 중앙에 정렬됩니다.

페이지:

작성자:오늘은 웹사이트를 빠르게 변경하기에 좋은 날입니다! 온라인에서 비즈니스를 구축할 준비가 되셨습니까? 로 새 웹사이트를 만드시겠습니까? 최신 디자인, 픽셀 대 픽셀? 아니면 새로운 트렌드를 위해 기존 사이트를 재작업하시겠습니까? 이렇게 하려면 진정으로 창의적인 사람이어야 하며 Photoshop으로 작업하여 최고 수준의 웹 사이트를 만들 수 있어야 합니다. 적절한 기술을 갖춘 전문 웹 디자이너라 할지라도 모든 픽셀을 사용자 정의하는 데 시간이 걸리고 클라이언트 사이트의 모든 페이지를 만들고 모든 UI 요소, 영역 및 작은 세부 사항에 주의를 기울입니다. 이 모든 것은 시간이 걸립니다.

이미 모든 픽셀에 대해 신중하게 디자인된 고품질 PSD 사이트 템플릿을 사용하는 것이 훨씬 빠릅니다. 다양한 Photoshop 파일이 있습니다. 한 번 또는 월간 구독으로 사용할 수 있습니다.

Envato Elements에 대한 최고의 PSD 웹 사이트 템플릿(무제한 사용)

2016년에 Envato Elements 웹사이트가 출시되었고 즉시 엄청난 인기를 얻기 시작했습니다. 사이트에는 하나의 제안만 있습니다(모두 포함):

Envato Elements에 등록하면 psd 웹사이트 템플릿, 테마, 글꼴, 그래픽 세트 등을 무제한으로 다운로드할 수 있습니다. 1개월 요금으로 모든 것이 가능합니다. 모든 것이 정확합니다! 다운로드 전문 템플릿및 그래픽을 마음껏 사용하고 프로젝트에 맞게 모든 것을 사용자 정의하십시오.

아래는 Envato Elements, Elementy 다목적 PSD에서 가장 많이 사용되는 템플릿입니다. 19와 함께 제공 PSD 파일 s, 매장 레이아웃, 블로그 디자인, 포트폴리오 페이지 등

Envato Elements에 가입하면 월 $29로 파일을 무제한으로 다운로드하고 무제한으로 사용할 수 있습니다. 월 정상 가격은 $49입니다. 지금이 큰 할인을 받을 때입니다.

요구 사항이 제한적이거나 그래픽과 웹 콘텐츠를 별도로 구매하려는 경우 ThemeForest에 수천 개의 기성 템플릿이 있습니다.

ThemeForest의 PSD 사이트 템플릿

아래는 TOP PSD 템플릿구매하거나 다운로드할 수 있는 2016년 사이트. 이것은 전문 웹 디자이너가 매주 ThemeForest에 업로드하는 볼륨의 한 방울에 불과합니다. 2016년 최고의 Photoshop 웹사이트 템플릿을 살펴보세요.

올바른 디자인은 평범한 사이트를 예술 작품으로 바꿀 수 있습니다.

귀하의 사이트에서 판매가 급증할 수 있으며 잠재 구매자에게 지속적인 인상을 남길 수 있습니다. 최저 가격.

당신은 당신의 정체성을 바꿀 수 있습니다 - 평범한 브랜드를 사탕으로 바꾸십시오.

귀하의 비즈니스(또는 귀하의 고객)는 자신의 계획과 잠재력을 온라인으로 실현할 수 있습니다!

TOP 10 PSD 웹사이트 템플릿(ThemeForest 2016에서)

아래는 ThemeForest의 TOP 10 PSD 웹사이트 템플릿입니다. 모든 템플릿은 이러한 PSD 파일의 모든 세부 사항에 시간과 주의를 기울이는 재능 있는 웹 디자이너가 만듭니다.

1. Cesis - 종합적인 다목적 PSD 웹사이트 템플릿

다양한 기능을 갖춘 2016년 최고의 PSD 템플릿 세트. Photoshop의 100개 이상의 디자인 세트로 레이아웃이 깨끗하고 매우 유연합니다. 1170px 그리드 시스템을 기반으로 모든 픽셀이 맞는 놀라운 템플릿. 모형을 사용하여 패션 블로그에서 아트 포트폴리오 또는 크리에이티브 비즈니스에 이르기까지 모든 유형의 회사를 위한 웹사이트를 만드십시오.

2. OnePro - 크리에이티브 PSD 웹사이트 템플릿

One pro는 인기있는 디자인의 순수한 SPD 웹 사이트 템플릿입니다. 템플릿 사용 좋은 시스템개인 페이지, 상점 또는 기업 블로그가 있는 다양한 사이트를 만드는 데 사용할 수 있는 그리드입니다. 이 템플릿에는 논리적으로 정렬된 PSD 파일이 최소 55개 있습니다. 이 테마를 사용하세요. 빠른 생성아름다운 사이트.

3. 전기 — 전자 제품 온라인 스토어 PSD 템플릿

Electro는 36개의 PSD 템플릿으로 구성된 고기능성 세트입니다. 템플릿은 깨끗하고 가벼운 디자인으로 멋진 온라인 전자 제품 매장을 만들 수 있습니다. 템플릿 파일은 사용하기 쉽도록 전문적으로 구성되고 그룹으로 계층화됩니다. 또한 서로 결합할 수 있는 3개의 고유한 홈페이지와 5개의 헤더가 포함되어 있습니다.

현대 경향웹 개발에 대한 접근 방식

웹사이트 구축의 빠른 성장을 위한 알고리즘을 처음부터 배우십시오.

4. 서클 - 독특한 PSD 웹사이트 템플릿

Circle은 놀라운 디자인과 함께 제공되는 PSD 웹 사이트 템플릿입니다. 173개의 레이어가 있는 PSD 파일과 많은 디자인을 얻을 수 있습니다. 이것은 다른 회사에 맞게 사용자 정의할 수 있는 현대적이고 깨끗하며 전문적인 웹 페이지 세트입니다. 디자인은 그리드 시스템을 기반으로 하므로 Photoshop 파일을 CMS로 쉽게 변환할 수 있습니다.

5. 아고라 - 놀라운 전자 상거래 PSD 템플릿

Agora는 현대적이고 가볍고 창의적인 전자 상거래 템플릿입니다. 이 디자인 세트를 선택하면 사용자가 사이트를 좋아할 것입니다. 사이트는 사용자에게 아름답고 독특한 경험을 제공할 것입니다. PSD 템플릿은 스포츠 스타일로 만들어졌지만 무엇이든 판매할 수 있습니다. 14개의 멋진 디자인과 6개의 그래픽 슬라이더가 포함되어 있습니다!

6. 스펙터 - 에이전시 웹사이트 템플릿

Spectre는 대행사를 위한 현대적이고 평면적인 템플릿입니다. 12개의 반응형 페이지와 원하는 대로 믹스매치할 수 있는 테마 블록으로 디자인이 깔끔합니다. 다양한 디자인 기능, 세련된 선 아이콘, 벡터 모양, 프로필, 눈에 띄는 인용문 및 디스플레이 이미지와 같은 눈길을 끄는 UI 요소. 템플릿은 12개의 열과 1170px 너비의 Bootstrap용으로 사용자 지정됩니다. 이것은 다음 디자인에서 사용할 준비가 된 잘 디자인된 매력적인 PSD 파일 세트입니다.

7. 전문가 — 비즈니스 및 금융 PSD 템플릿

새로운 금융 웹사이트를 위한 최고의 템플릿 중 하나를 찾고 있다면 Experts가 탁월한 선택입니다. 55개의 PSD 파일, 다양한 디자인 포함 홈페이지, 가격, 리뷰, 서비스 등을 배치할 수 있는 고유한 페이지

이 템플릿은 귀하의 비즈니스를 위한 양복과 넥타이입니다. 템플릿은 법률, 금융 회사, 투자 회사, 회계사 및 기타 모든 종류를 위해 설계되었습니다. 전문적인 활동. 선택할 수 있는 21개의 머리글, 많은 바닥글, 완벽하게 일치하는 구성 요소, 사용자 지정 가능한 섹션이 있습니다.

8. Begge - 현대 패션 매장 PSD 템플릿

올해 패션 의류 분야에서 특히 온라인 상점을 시작하는 목표를 설정했다면 이 템플릿은 특별히 당신을 위해 만들어졌습니다. 제품과 이미지를 가장 먼저 보여주는 최적의 디자인.

매우 명확한 구조로 깨끗한 레이아웃. 디자인은 매력적이며 방문자의 관심을 끌기 위해 겹치는 블록 인서트로 구성됩니다. PSD 파일이 구성되어 웹 사이트에 맞게 빠르게 사용자 지정할 수 있습니다!

9. 디지털 에이전시 – SEO/마케팅 템플릿

디지털 에이전시 - SEO 및 다양한 에이전시를 위한 PSD 웹사이트 템플릿입니다. 머티리얼 디자인을 기반으로 깨끗한 UI 요소와 밝은 색상을 혼합합니다. 사이트에 업로드하기 전에 사진과 그래픽을 추가하기를 기다리고 있습니다. PSD 파일을 구입하거나 코드, 내장 Bootstrap 3 및 다양한 기능이 포함된 WordPress 버전을 구입할 수 있습니다.

10. Volter - 크리에이티브 웹사이트 템플릿(PSD)

특이한 디자인 스타일의 크리에이티브 PSD 웹 사이트 템플릿입니다. Volter는 포트폴리오를 선보이고 아름다운 이미지를 선보이며 기발한 글꼴로 새로운 방문자를 유치하도록 설계되었습니다. 여기에서 귀하의 작업을 소개하고 서비스를 설명하고 신규 고객에게 귀하를 고용해야 하는 이유를 설명할 수 있습니다.

PSD 파일에는 고해상도 Bootstrap 1170px 그리드를 기반으로 작업하기가 매우 쉽습니다. 최고의 템플릿작업할 준비가 완전히 완료되어 고유한 사이트를 가져오고 디자인할 수 있습니다!

새로운 웹사이트 템플릿(PSD)을 받으세요!

ThemeForest에서 재능 있는 웹 디자이너가 만든 수백 가지의 전문 PSD 템플릿을 찾아보세요. 또는 많은 다운로드를 원하시면 포토샵 템플릿, 테마 및 그래픽 세트를 보다 정기적으로 사용하려면 Envato Elements를 확인하십시오. Envato Elements에서 월 1회 요금으로 제한 없이 수많은 고품질 파일을 다운로드하고 사용할 수 있습니다.

이전 글에서 Photoshop에서 웹사이트 레이아웃을 만드는 방법을 명확하게 보여 주었고 결과는 간단하지만 눈길을 끌지 않는 템플릿이었습니다.

이 기사에서는 HTML 마크업 도구와 CSS(Cascading Style Sheets)를 사용하여 PSD 레이아웃에서 완성된 웹 페이지로 변환하는 방법을 보여 드리겠습니다.

일반적으로 템플릿을 준비하는 방법에는 여러 가지가 있습니다. 누군가는 먼저 템플릿을 철저히 그린 다음 레이아웃을 수행하고 누군가는 대략적인 디자인을 그리고 레이아웃 중에 획을 추가합니다. 일부는 먼저 그린 다음 자르고, 다른 일부(지난 기사에서 했던 것처럼)는 디자인을 만드는 과정에서 직접 그래픽 개체를 저장합니다. 레이아웃 및 그리기 도구도 사람마다 다릅니다. 일부는 플러그인을 설치하고 비주얼 에디터, 다른 사람들이 사용 표준 세트간단한 편집기에서 기회와 조판 ... 일반적으로 아래는 여러 가지 방법 중 하나입니다.

준비 단계

따라서 파일을 어디에서나 생성하십시오(적어도 바탕 화면에서, 최소한 별도의 폴더에서). index.html. 동일한 디렉토리에 디렉토리를 추가하십시오. 이미지. 여기에는 템플릿과 페이지에 사용된 모든 그림이 포함됩니다. 그래픽 요소를 미리 잘라내었으므로 즉시 이미지 폴더에 복사하고 다음 이름을 지정합니다.

  • back_all- 웹사이트 배경.
  • header_top- 헤더 배경.
  • 빅픽- 로고.
  • 제목- 왼쪽 패널 제목의 배경.
  • 보행인- 사이트 하단 채우기.
  • 1미니- 페이지의 주요 부분에 대한 첫 번째 사진.
  • 2미니- 두 번째 사진.

index.html 페이지가 있는 폴더에서 파일을 만듭니다. 스타일.css- 템플릿의 스타일 시트를 포함합니다.

메모장은 코드 편집에 권장되지 않습니다. 이 목적을 위해 훨씬 더 나은 메모장 편집기++. 구문 형광펜입니다 다른 언어들(HTML 및 CSS 포함) 간단한 편집기텍스트 문서.

문서를 블록으로 나누기

문서 열기 index.html다음 코드를 입력하십시오.

사이트 템플릿

파일을 저장합니다. 우리는 이미 이 모든 태그를 오랫동안 연구했으며 설명이 필요하지 않습니다. 위의 코드를 사용하여 HTML 페이지의 기초를 만들었습니다. 이제 이를 블록으로 나누어 문서의 구조와 그 안에 포함될 내용을 지정해야 합니다.

7개의 블록이 있으며 식별자(속성 값 ID):

1. 콘텐츠- 나머지 블록이 저장될 블록입니다.

2. 헤더- 헤더 블록, 내부:

2.1. 메뉴- 상단 탐색.

2.2. 심벌 마크- 텍스트가 있는 그림.

3. 오른쪽- 페이지의 주요 부분.

4. 왼쪽- 왼쪽 패널.

5. 보행인- 사이트 하단.

그래서 우리는 (컨테이너에 다음 코드 붙여넣기):

브라우저에서 페이지는 여전히 비어 있지만 문서의 구조는 이미 이해할 수 있으며 준비가 된 것입니다.

기본 서식 설정

이제 문서에 초기 모양을 제공하기 위해 CSS 스타일로 이동해 보겠습니다.

열려 있는 스타일.css아래에 보이는 코드 줄을 추가하십시오.

기본적으로 페이지의 패딩 및 여백 제거:

* ( 여백: 0px; 패딩: 0px; )

사용자의 행동(호버링, 마우스 오버하지 않음, 방문)에 따라 링크 색상을 설정하고 마우스 포인터가 위치한 링크에서 밑줄을 제거합니다.

A:link ( color: #D72020; ) a:hover ( text-decoration: none; color: #FF0000; ) a:visited ( color: #D72020; )

페이지의 기본 디자인을 설정합니다. 배경색과 배경 이미지를 지정하고(그림의 가로 채우기 설정) 색상, 스타일 및 글꼴 크기를 설정합니다.

본문( 배경: #FFD723 url(images/back_all.jpg) repeat-x; 글꼴: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; 색상: #333333; )

콘텐츠 블록 정의:

# 내용 ( 여백: 0 자동; 배경: #ffffff; 너비: 786px; 텍스트 정렬: 왼쪽; )

이제 페이지를 새로 고칠 수 있습니다. 뒷면 패턴으로 채워져 있습니다. 지금까지 속성이 책임지고 있는 유일한 눈에 보이는 변경 사항 배경수업 신체.

가로 메뉴 만들기

시작이 있으며 이제 주요 블록 배치를 직접 시작할 수 있습니다.

물론 모자부터 시작하겠습니다. 차례로 가로 메뉴 블록과 로고로 구성됩니다.

먼저 두 헤더 요소의 일반적인 모양을 설정해 보겠습니다. 왼쪽에 텍스트 정렬, 흰색 배경 및 306px 높이:

#header(배경: #ffffff; 높이: 306px; 텍스트 정렬: 왼쪽; )

그래서 우리는 헤더 공간을 얻었습니다. 요소가 위치할 흰색 직사각형입니다.

지금 하는 것이 논리적일 것이다. 가로 메뉴. 이것이 우리가 할 일이지만 HTML에 삽입하기 전에만 CSS 규칙을 준비해야 합니다. 그렇지 않으면 브라우저에서 끔찍하게 보일 것입니다.

첫 번째 조정을 해봅시다. 왼쪽 테두리를 2픽셀 두께로 설정하고 메뉴의 너비와 높이를 설정하고 X축을 따라 반복되는 배경 이미지를 설정합니다.

#메뉴(왼쪽 테두리: 2px 솔리드 #ffffff; 너비: 779px; 높이: 80px; 배경: url(images/header_top.gif) repeat-x; )

브라우저의 페이지는 즉시 변경되며 다음과 같이 표시됩니다.

이제 메뉴 자체를 파일에 추가할 수 있습니다. index.html:

페이지를 새로고침하면 실제로 나타난 것을 볼 수 있습니다.

여기에서만 링크 유형이 많이 남아 있습니다. 이에 대한 자체 규칙(정렬, 너비, 색상, 굵기 등)을 설정하고 마우스 오버 시 링크에 대해 색상 변경을 설정하고 템플릿 전체에서 제거된 밑줄을 반환합니다.

#menu a ( float: left; width: 99px; height: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding -top: 35px; ) #menu a:hover ( color: #D72020; text-decoration: underline; )

이제 메뉴 형식을 PSD 템플릿에 매핑할 수 있습니다.

포인터를 이동하면 항목의 디자인이 어떻게 변경되는지 주의하십시오(규칙이 이에 대한 책임이 있음). #메뉴 a:호버).

로고 사용자 정의

우리는 이미 로고를 가지고 있으며 폴더에 있습니다. 페이지에 로고를 추가하고 규칙에 따라 형식을 지정해야 합니다. 둘 다 할 수 있습니다 CSS 사용우리는 실패하지 않을 것입니다.

#logo ( 배경: #ffffff url(images/big_pic.jpg) 반복 없음; 너비: 738px; 높이: 146px; 텍스트 정렬: 왼쪽; 패딩 상단: 80픽셀; 패딩 왼쪽: 40픽셀; 테두리 왼쪽: 4픽셀 솔리드 #ffffff; )

로고가 정확한 크기로 삽입됩니다.

부족한 것은 텍스트뿐입니다. 누락된 부분을 블록에 삽입 심벌 마크파일 index.html얻을:

텍스트가 표시되지만 서식을 지정해야 합니다.

로고가 거의 항상 링크라는 사실을 기반으로 해당 클래스에 대한 디자인을 설정합니다.

#logo a ( 텍스트 장식: 없음; 텍스트 변환: 소문자; 글꼴 스타일: 기울임꼴; 글꼴 크기: 36px; 색상: #FFFFFF; ) #logo h2 a ( 글꼴 크기: 24px; )

여기에는 아무 것도 설명할 필요가 없으며 CSS 수업의 모든 속성에 익숙합니다. 하지만 모습텍스트가 변경되었으며 일반적으로 헤더가 이제 PSD 레이아웃보다 훨씬 좋아 보입니다.

페이지의 주요 부분 조판

다음으로 모든 고유 콘텐츠가 배치될 가장 큰 블록을 설정합니다. 500px를 차지하며 사이트 오른쪽에 위치합니다. 위치 지정, 제목, 단락 및 링크 디자인에 대한 규칙을 설정해 보겠습니다(CSS에 대한 기사에서 모든 속성에 대해 이미 이야기했습니다).

#right ( float: right; width: 500px; padding-right: 10px; ) #right h4 ( margin: 0; padding: 0px; font-size: 12px; color: #D72020; ) #right a ( color: #D72020 ; 텍스트 장식: 없음; ) #오른쪽 p ( 여백: 0; 패딩: 0; 패딩 하단: 10px; ) #오른쪽 h2 ( 여백: 0; 패딩: 0; 패딩 상단: 10px; 색상: #D72020; )

블록의 너비만 고정했기 때문에 콘텐츠로 채울 때까지 눈에 보이는 변경 사항이 없습니다. 페이지 높이는 콘텐츠에 따라 변경됩니다.

용기를 채우자 오른쪽. 이미지는 간단한 테이블에 배치됩니다.

갤러리


주방


콘텐츠가 마크업을 받았지만 분명히 충분하지 않습니다. 흰 바탕, 곧 완전히 나타나지 않을 것입니다.

왼쪽 패널 만들기

레이아웃 중이지만 레이아웃을 그린 후에는 사이드바하위 항목도 있으며 기본 항목 위로 마우스를 가져가면 표시되고 포인터가 없으면 사라집니다.

"이동 중에" 디자인을 수정해야 하는 상황은 매우 일반적입니다. 메뉴와 메인 콘텐츠 사이의 간격으로 하위 항목을 삽입할 수 있지만 흥미로운 것은 하위 메뉴의 소실 및 출현 트릭입니다.

CSS 파일에 다음 코드를 입력합니다.

#left ( padding: 10px; width: 237px; padding-right: 1em; ) #left h3 ( width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding- top: 15px; text-transform: 대문자; color: #ffffff; background: url(images/title.gif) no-repeat ) #left ul ( margin: 0; padding: 10px; list-style: none; width: 100px ; 글꼴 크기: 18px; ) #left li ul ( 위치: 절대; 왼쪽: 90px; 상단: 0; 표시: 없음; ) #left ul li ( 위치: 상대; margin-bottom:20px; ) #left ul li a ( display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; ) #left li:hover ul ( display: block; ) #left li li ( margin-bottom:0px; width: 150px; ) #left p ( padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-right: 1px solid # D72020;)

수업 규칙에주의하십시오 울그리고 리- 메뉴 실종의 비밀이 거기에 있다, 직접 밝혀라.

먼저 HTML 문서의 왼쪽 컨테이너에 메뉴가 없는 정보 블록을 추가해 보겠습니다.

정보

휴일 할인을 제공합니다. 더 나아가...


메뉴

흰색 배경이 페이지 아래로 더 확장되었습니다.

이제 왼쪽 패널 메뉴 코드를 HTML 파일에 붙여넣을 시간입니다. 상단 탐색과 달리 CSS 규칙에서 볼 수 있는 목록으로 구현됩니다.

웹 사이트를 개발할 때 클릭 몇 번으로 기성품 템플릿을 설치하고 작업을 시작할 수 있는 기회를 통해 가능한 한 모든 것을 단순화하는 것이 가장 좋습니다. 이것은 프로그래밍에 강하지 않거나 시간이 제한된 사람들에게 특히 해당됩니다. 그러나 목표가 사이트를 더 독특하게 만드는 것이라면 레이아웃에 대한 특정 기술이 있지만 여전히 시간을 절약하고 싶다면 레이아웃을 위한 기성품 사이트 레이아웃이라는 훌륭한 솔루션이 있습니다.

이러한 레이아웃은 Photoshop에서 디자이너에 의해 만들어지며 실제로는 일반 페이지 그래픽 파일입니다. 그들은 잘리지 않지만 단일 파일로 제공됩니다. 그들의 장점은 레이아웃 디자이너가 클라이언트의 개별 요구에 맞게 디자인을 독립적으로 조정할 수 있다는 것입니다. 예, PSD 템플릿은 매우 저렴합니다. 주요 템플릿 사이트인 Themeforest에서 레이아웃 가격은 $3부터 시작합니다.

일반 사용자의 경우 사이트 레이아웃이 특히 유용하지 않으므로 추가 시간과 신경을 낭비하지 말고 기성품 사이트 템플릿을 즉시 선택하는 것이 좋습니다. 예, PSD 템플릿보다 비용이 많이 들지만 이 차이는 시간을 절약하고 추가 레이아웃이 필요하지 않고 특정 시스템에 적응하기 위해 전문가가 개입할 필요가 없다는 점에서 그 이상의 가치가 있습니다. 우리 사이트에는 모든 목적을 위해 수천 명의 전용 섹션이 있습니다. 템플릿 및 기타 CMS도 있습니다. 그들과 함께, 당신은 웹사이트 개발이 사실 매우 간단하다는 것을 이해할 수 있을 것입니다!

전문 사용자를 위해 비즈니스, 창의성, 블로그 및 전자 상거래와 같은 다양한 목적을 위한 상위 20개의 PSD 레이아웃을 제공합니다. 거의 모든 PSD 레이아웃에는 WordPress 버전이 있으므로 초보자에게는 이 리뷰도 읽는 것이 좋습니다.

초보자와 숙련된 사용자를 위한 레이아웃을 위한 웹사이트 레이아웃

TheFox - 다목적 웹사이트 레이아웃

이 가장 인기 있는 레이아웃에는 블로그, 상점, 랜딩 페이지, 포트폴리오 및 기업 웹사이트에 대한 구성 요소가 있습니다. 모두 맛과 스타일의 감각으로 만들어집니다. 세트에는 280개의 PSD 파일이 포함되어 있습니다. WordPress 애호가를 위해 이 CMS에 대한 기성 버전을 사용할 수 있습니다.

Avada - 범용 PSD 모형

이 레이아웃에는 온라인 상점, 포트폴리오 및 블로그를 포함한 다양한 유형의 사이트를 위한 고유한 디자인의 59개의 PSD 파일이 포함되어 있습니다. 박스형 및 와이드 버전을 사용할 수 있습니다. 또한 세계에서 가장 인기 있는 WordPress 솔루션인 Avada 템플릿의 전체 WordPress 버전이 있습니다(36만 고객 만족).

AdelFox - 다목적 PSD 템플릿

수십 개의 홈페이지, 온라인 스토어, 포트폴리오, 블로그 및 기타 페이지 옵션을 숨기는 150개의 Photoshop 파일. 모두 단축 코드 작업을 지원하므로 콘텐츠 추가가 매우 간단합니다. 응용 프로그램: 크리에이티브 블로그, 뉴스 사이트, 개인 포트폴리오 및 회사 사이트.

Black + White - 미니멀한 디자인의 심플한 레이아웃

사이트를 더 독특하게 만들고자 하는 사람들을 위한 깨끗하고 우아한 옵션입니다. 아름다운 사진이 있는 사이트에 이상적입니다. 추가 사항은 없습니다. 필수품만 있습니다.

HUGE - 완벽한 웹사이트를 위한 범용 PSD 모형

레이아웃은 매우 세련되고 모든 작업에 대한 다양한 옵션을 제공합니다. Photoshop의 기술을 사용하면 디자인의 독창성을 얻을 수 있습니다. 전각 섹션, 아코디언 및 드롭다운 메뉴를 지원합니다.

개발을 쉽게 하기 위해 이 레이아웃에 대한 WordPress 및 Joomla용 버전이 있습니다.

Enfold - PSD 형식의 레이아웃을 위한 인기 있는 웹사이트 레이아웃

이것은 모든 활동 분야에서 운영되는 모든 회사를 위한 보편적인 레이아웃입니다. 31개의 잘 구성된 Photoshop 파일을 사용하면 설정을 약간 조정할 수 있어 독특한 디자인을 얻을 수 있습니다. 레이아웃의 모든 아이콘과 글꼴은 무료입니다. 땀 흘리고 싶지 않은 사람들을 위한 Enfold WordPress 테마도 있습니다.

Waxom - 순수 범용 Photoshop 레이아웃

238개 파일, 깔끔한 디자인, Google 글꼴 및 부트스트랩 그리드. 응용 프로그램: 포트폴리오, 호스팅, 의학, 여행, 교회, 부동산, 자동차, 온라인 상거래 및 비즈니스. 단 $59에 모바일 레이아웃과 WordPress 테마도 있습니다.

Circles - 완벽한 디자인의 멋진 웹사이트 레이아웃

이 레이아웃은 놀라운 디자인과 강력한 기능 및 유용성을 결합합니다. 부트스트랩 그리드 작업을 지원합니다. 모든 14개의 PSD 파일은 모든 형식으로 열립니다. 포토샵 버전. 작업하기 쉽도록 레이어로 매우 편리하게 구성되어 있습니다.

Travelo - 여행사 레이아웃 키트

이 레이아웃에는 여행사 및 여행사를 위한 세련된 디자인이 포함되어 있습니다. Revolution 및 Layer Slider를 지원하는 21개의 슬라이더 옵션. 12 홈페이지 레이아웃. 워드프레스 버전도 있습니다.

Delimondo - 반응형 레스토랑 웹사이트 레이아웃

이 레이아웃에는 각각 10페이지의 5가지 디자인 스타일이 있습니다. 철저한 디자인 커스터마이징을 위한 총 50개의 PSD 파일이 있습니다. 슬라이더, 예약 양식 및 무료 Google 글꼴을 지원합니다.

이것은 러시아 사용자에게 특히 인기 있는 특별한 디자인 레이아웃입니다. 레이아웃은 변형을 지원합니다. 홈페이지, 카테고리 페이지, 상품 비교, 장바구니, 결제, 로그인/등록, 계정, 블로그 및 기타.

여행 예약 - 여행사 레이아웃을 위한 사이트 레이아웃

이 PSD 템플릿은 예약 서비스, 여행사, 호텔 및 여행 블로그를 위한 WordPress 템플릿 덕분에 이미 독자들에게 친숙합니다. 디자인된 파일에는 검색 표시줄이 있는 홈 페이지, 검색 결과 페이지 및 모든 정보가 포함된 호텔 페이지가 있습니다. 총 16개의 PSD 파일이 있습니다.

여행사 - 멀티태스킹 여행 PSD 웹사이트 레이아웃

여행 및 부동산 중개업체를 위한 예약 기능을 갖춘 깔끔한 디자인. 파란색, 녹색 및 주황색의 세 가지 색상 스타일로 제공됩니다. 총 59개의 PSD 파일이 있습니다!

관광 부문을 위해 기성품 WordPress 사이트에 대한 리뷰를 참조하십시오.

Super Duper - 모든 비즈니스를 위한 세련된 레이아웃

이 레이아웃에서 150 포토샵 파일 21개의 홈 페이지 레이아웃, 50개 이상의 온라인 상점 옵션, 10개의 블로그 페이지 및 2개의 단일 페이지 웹 사이트 디자인을 찾을 수 있습니다. 모바일 레이아웃이 제공됩니다.

캐리힐 - 학교 홈페이지 PSD 레이아웃

이 레이아웃의 독특한 디자인은 학교와 창의적인 웹사이트 모두에 적합합니다. 메인 페이지, 블로그, 갤러리, 연락처 정보 및 기타 페이지 디자인이 포함된 8개의 간단한 PSD 파일. 기념일 로고가 지원됩니다.

교육적인 워드프레스 테마우리는 여러 리뷰에서 고려했습니다.