오늘의 자습서는 Div+CSS를 사용하여 PSD 페이지를 HTML 페이지로 잘라내는 방법을 알려줍니다. 이러한 종류의 튜토리얼은이 사이트에서 거의 수행되지 않았으며 대부분은 비교적 단편적입니다. 앞으로 우리는 이러한 종류의 튜토리얼을 천천히 게시하고 번역 할 것입니다.
먼저 효과를보십시오
아래 그림은 렌더링입니다. 잘라낸 후 머리와 바닥이 더 넓을 수 있습니다 ...
새 폴더를 만듭니다
시작하려면 컴퓨터에서 폴더를 만듭니다. 나는 그것을 Zmool이라고 명명했습니다. 그런 다음 폴더에서 새 폴더 이미지를 만들고 웹 사이트의 모든 이미지를 배치하십시오. 다음으로 코드 편집기 (DreamWeaver)를 열고 홈페이지 템플릿 인 루트 디렉토리에서 index.html이라는 html 파일을 만듭니다. 이제 새 CSS 파일을 만들고 style.css 파일로 이름을 지정하십시오. 아래 그림과 같이 :
index.html 파일을 엽니 다. 헤드 태그 상단에서 스타일 시트 (Style.css)에 링크를 추가하십시오. 다음 코드를 사용할 수 있습니다.
<link href = style.css rel = 스타일 시트 유형 = 텍스트 /css />
헤더 코드는 다음과 같습니다.
<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> Modern Design Studio </title> <link href = style.css rel = 스타일 시트 유형 = 텍스트/css/> </head> <body> </body> </html>
HTML 구조를 만듭니다
이제 HTML 파일 구조를 설정합니다. 아래와 같이 3 개의 섹션 (제목, 내용, 바닥 글)을 세트하십시오.
<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> 제목없는 문서 </title> <link rel = 스타일 rel = stylesheet type = text/css href = style.css/> </head> <body> <div id = header> </div> <div id = content> </div id = footer> </body> </htmll>
절단 배경
PSD 파일에는 많은 텍스처 효과가 포함되어 있습니다. 이 모든 것을 잘라낸 다음 디자인 효과와 일치하는 DIV 페이지 효과를 만들기 위해 코드와 함께 웹 페이지에 추가해야합니다.
<body> <div id = header> <div id = container> </div> </div> <div id = content> <div id = container> </div> </div> <div id = buter> <div id = container> </div> </body>
이제 Photoshop에서 원래 디자인 된 레이어를 열고 배경 레이어를 제외하고 숨기십시오.
이제 슬라이싱 도구를 사용하여 배경을 선택하고 웹 페이지 웹 형식 (Alt + Shift + Ctrl + S)을 저장하십시오. 그런 다음 저장된 이미지 폴더 파일의 이름이 background.jpg입니다.
배경 스타일을 설정하십시오
style.css 파일을 열고 기본 스타일, 배경 스타일 및 기본 부분의 너비를 설정하십시오.
* {마진 : 0px; 패딩 : 0px;} body {background : url (images/background.jpg);}#컨테이너 {margin : auto; 너비 : 960px;}머리를 자릅니다
Photoshop으로 돌아가서 헤드 배경을 제외한 소위 레이어를 숨기고 동일한 방법을 사용하여 헤드 배경 이미지를 웹 형식으로 자르고 파일 이름을 head.jpg로 저장하십시오.
헤드 배경 코드를 편집합니다
style.css 파일에서 다음 코드를 편집하십시오.
#Header {배경 : URL (images/header.jpg); 높이 : 124px;}헤드 로고를 자릅니다
현재 로고 레이어를 자르고 배경 레이어를 포함한 모든 레이어를 숨 깁니다. 로고 레이어를 위와 동일한 방법으로 자르려면 logo.png로 저장하십시오. 참고 : PNG 형식 사진으로 저장하십시오.
페이지에 로고를 추가하도록 추가하십시오
이제 html로 돌아가 다음 코드를 추가하십시오 <div id = logo>…. </div> #header #container.
<div id = header> <div id = container> <div id = logo> <a href =#> <img src = images/logo.png> </a> </div> </div> </div>
이제 아래의 Style.css 파일로 전환하고 #Logo 스타일을 작성하십시오.
#Logo {마진-탑 : 20px; 국경 : 없음;}내비게이션 코드 편집
아래는 페이지의 코드입니다. 헤더에는 로고와 내비게이션의 두 부분이 포함되어 있습니다.
<div id = header> <div id = container> <div id = logo> <a href =#> <img src = images/logo.png> </a> </div> <ul> <li> <a href =#> home </a> </li> <li> <a href =#> inciet </a> </li> <li> <a href =#> blog </a> </li> <li> <a href =#> contact </a> </li> </div> </div>
내비게이션 스타일은 다음과 같습니다.
이제 CSS 테이블 ~, ul, li에 내비게이션 스타일을 추가하고 스타일을 연결하십시오.
#Header li {컬러 :#959595; 목록 스타일 : 없음; float : float : 왼쪽; 마진-오른쪽 : 20px; 글꼴-가족 : 무수한 프로, 아리얼; 글꼴 중량 : 대담한; 글꼴 크기 : 24px;}#a {color :#959595; text-decoration : 없음;}}#header; ul {float : right; margin-top : -40px;}#Header Li A : 호버 {배경 :#202020; 색상 :#d2d2d2; -moz-border-radius : 5px; -khtml-border-radius : 5px; -webkit-border-radius : 5px;}이제 중간 부분을 만드십시오
이제 아래 그림과 같이 페이지 내용의 중간 부분에 두 개의 div를 추가합니다.
<div id = content> <div id = container> <div id = feactured> </div> <div id = 단락> </div> </div> </div>
Photoshop PSD 페이지로 전환하고 중간 부분을 잘라 내고 이름이 포함되어 있습니다. 다음 그림 :
HTML 페이지에 다음 코드를 추가하고 일부 텍스트 소개를 추가하십시오.
<div id = content> <div id = container> <div id = feationured> <a href =#> 더 많은 프로젝트 </a> <p> <span> 포트폴리오 프로젝트, 2010 년 1 월 5 일 </span> 깨끗하고 멋진 포트폴리오 디자인을 만들고 싶었던 적이 있습니까? 이 튜토리얼에서는 깨끗한 파란색 포트폴리오 레이아웃을 디자인하는 방법을 보여 드리겠습니다. 깨끗하고 멋진 포트폴리오 디자인을 만들고 싶었던 적이 있습니까? 이 튜토리얼에서 Adobe Photoshop에서 깨끗한 파란색 포트폴리오 레이아웃을 설계하는 방법을 보여 드리겠습니다. </p> </div> <div id = 단락> </div> </div> </div>
PSD 파일에서 다른 소위 레이어를 숨기고 버튼 레이어 부품 만 남기고 버튼 부분을 자르고 PNG 형식을 저장 한 다음 it button.png 이름을 지정하십시오.
이제이 그림을 페이지에 추가하고 CSS 파일 페이지로 전환 한 다음 배경 스타일과 버튼 스타일이 포함 된 다음 코드를 추가하십시오.
#featured {배경 : url (images/featured.jpg) no-Repeat; 높이 : 381px; 마진-탑 : 30px; 마진-왼쪽 : 80px;}#feactured a {배경 : URL (images/button.png); 높이 : 30px; 너비 : 124px; 텍스트-안정 : -9999px; 위치 : 절대; 마진-탑 : 330px; 마진-왼쪽 : 180px;}#특집 a : 호버 {배경-위치 : 0px 30px;}.이제 더미 텍스트 스타일을 추가합시다.
.dummyText {컬러 :#d2d2d2; 너비 : 245px; 마진-탑 : 150px; 위치 : 절대-가족 : Arial, Helvetica, sans-serif; font-size : 12px; line-height : 180%; 마진-왼쪽 : 290px;} span {font-size : 16px; color :#191919; font-weight : bold;}다음 범주 소개 섹션을 표시하기 위해 그림을 추가하기 위해 다음이 추가됩니다.
페이지의 코드 부분은 다음과 같습니다.
<div id = 단락> <p> <span> Beautiful </span> WebDesignfan은 웹 디자인, Photoshop, Freebies 및 Tutorials에 대한 디자인 관련 블로그입니다. 우리는 웹 디자이너와 개발자 전용 유용한 정보를 게시합니다. 여기서는 벡터, WordPress 테마 및 많은 영감과 같은 무료 리소스를 찾을 수 있습니다. </p> <p> <span> 효과적인 </span> WebDesignfan은 웹 디자인, Photoshop, 공짜 및 튜토리얼에 대한 디자인 관련 블로그입니다. 우리는 웹 디자이너와 개발자 전용 유용한 정보를 게시합니다. 여기서는 벡터, WordPress 테마 및 많은 영감과 같은 무료 리소스를 찾을 수 있습니다. </p> <p> <span> 기능 </span> WebDesignfan은 웹 디자인, Photoshop, 공짜 및 튜토리얼에 대한 디자인 관련 블로그입니다. 우리는 웹 디자이너와 개발자 전용 유용한 정보를 게시합니다. 여기서는 벡터, WordPress 테마 및 많은 영감과 같은 무료 리소스를 찾을 수 있습니다. </p> </div>
중간 부분의 내용은 다음과 같습니다.
<div id = content> <div id = container> <div id = feationured> <a href =#> 더 많은 프로젝트 </a> <p> <span> 포트폴리오 프로젝트, 2010 년 1 월 5 일 </span> 깨끗하고 멋진 포트폴리오 디자인을 만들고 싶었던 적이 있습니까? 이 튜토리얼에서는 깨끗한 파란색 포트폴리오 레이아웃을 디자인하는 방법을 보여 드리겠습니다. 깨끗하고 멋진 포트폴리오 디자인을 만들고 싶었던 적이 있습니까? 이 튜토리얼에서는 Adobe Photoshop에서 깨끗한 파란색 포트폴리오 레이아웃을 설계하는 방법을 보여 드리겠습니다. </p> </div> <div id = 단락> <p> <p> <p> <p> <p> <p> </span> WebDesignfan은 웹 디자인, Photoshop, 공짜 및 자습서에 대한 디자인 관련 블로그입니다. 우리는 웹 디자이너와 개발자 전용 유용한 정보를 게시합니다. 여기서는 벡터, WordPress 테마 및 많은 영감과 같은 무료 리소스를 찾을 수 있습니다. </p> <p> <span> 효과적인 </span> WebDesignfan은 웹 디자인, Photoshop, 공짜 및 튜토리얼에 대한 디자인 관련 블로그입니다. 우리는 웹 디자이너와 개발자 전용 유용한 정보를 게시합니다. 여기서는 벡터, WordPress 테마 및 많은 영감과 같은 무료 리소스를 찾을 수 있습니다. </p> <p> <span> 기능 </span> WebDesignfan은 웹 디자인, Photoshop, 공짜 및 튜토리얼에 대한 디자인 관련 블로그입니다. 우리는 웹 디자이너와 개발자 전용 유용한 정보를 게시합니다. 여기서는 벡터, WordPress 테마 및 많은 영감과 같은 무료 리소스를 찾을 수 있습니다. </p> </div> </div> </div>
CSS 파일로 이동하여 다음 코드를 추가하십시오.
#Paragraphs Span {Font-Family : Myriad Pro, Helvetica, Sans-Serif; Font-Size : 22px; Font-Weight : 600; Letter-spacing : -2px;}#단락 {margin-left : 80px; font-family : arial, helvetica, sans-serif; 컬러 :#191919; font-size : 12px; 마진-탑 : 15px;}. 단락 {너비 : 250px; 마진-왼쪽 : 15px; 왼쪽;}이것이 우리가 지금까지 한 일입니다.
웹 사이트 하단은 아래에 처리됩니다
이제 우리는 그 부분을 완성 했으므로 바닥 글을 만들기 시작할 것입니다.
먼저 PSD 파일에서 바닥 글 및 바닥 글 텍스처 레이어를 제외한 다른 레이어를 숨기고 바닥 글 폴더를 바르고 폴더를 바르고 저장하십시오.
그런 다음 다시 자르고 버튼과 새 그래픽을 자릅니다. 이름을 따릅니다 .png 및 bird.jpg.
하단 코드를 편집하십시오
바닥 바닥 글에는 텍스트와 링크가있는 새 사진이 포함되어 있습니다.
따라서 다음 코드를 HTML 페이지에 추가하십시오.
<div id = booter> <div id = container> <p> 2010? 가상 디자인 스튜디오. WebDesignfan의 디자인.
이제 바닥의 바닥 글 스타일 코드를 다음과 같이 편집하십시오.
#footer {배경 : URL (images/footer.jpg); 높이 : 71px; 마진-탑 : 191px;}#Foot-Family : arial, helvetica, sans-serif; font-size : 12px; color :#959595; 위치 : 절대적인; margin-top : 30px;} uter A {배경 : URL (images/follow.png); 텍스트-안정 : -9999px; 위치 : 절대; 높이 : 27px; 너비 : 124px; 마진-왼쪽 : 730px; 마진-탑 : 30px;}#footer img {float : right; margin-top : 10px;}.우리는 바닥 글의 배경으로 room.jpg를 사용한 다음 텍스트 스타일을 추가합니다.
바닥의 새 그림에 대한 링크를 위해, 우리는 플로팅 효과를 사용하여 그것을 배치하기 전에 동일한 방법을 사용했습니다.
최종 효과
파일 다운로드 (0,7MB)
지금도 끝났습니다. 당신이 그것을 이해하는지 모르겠습니다. 이해하지 못하면 메시지를 남겨주세요. 이해하지 못하면 다시 추가하고 수정하겠습니다, 하하 ~