Pjblog 템플릿 만들기 튜토리얼 강력 추천_체험 교류
- WBOY원래의
- 2016-05-16 12:09:132039검색
2007.1.30에 업데이트...http://www.dnxh.cn/blog/article.asp?id=155에서 재인쇄
Pjblog의 사용자층은 점점 더 커지면서 블로그는 Blogger의 온라인 홈과 같습니다. 개성을 추구하는 오늘날의 시대에 자신의 특성에 맞는 블로그용 스킨을 만드는 것은 모두의 바램입니다. 그러나 결국 여기에는 지식이 필요하므로 우리는 우리의 소원을 이루기 위해 열심히 공부해야 합니다. 처음부터 시작하겠습니다. 준비 → 스킨 개념 → 그리기 → 슬라이싱 → CSS 작성 → 미리보기 → 디버깅 호환성 → 세부 사항 다듬기 의 과정입니다. 스킨을 만드는 방법을 모든 사람이 이해할 수 있도록 이 튜토리얼을 사용하고 싶습니다. 다른 사람이 만든 스킨을 사용할 필요는 없으며 자신의 노력에 의지하여 블로그를 아름답고 개성 있게 꾸밀 수 있습니다. 매우 흥미롭습니다...
1. 준비
1.1 필요한 기초
당신 지식을 배우고자 하는 욕구가 있어야 하며, 이것이 모든 것의 전제조건입니다. 당신은 Pjblog의 사용에 대해 어느 정도 이해하고 있습니다(Skin이 무엇인지, 설치 방법을 모른다면 읽지 않는 것이 좋습니다). 스킨을 할 때는 조심해야 하고, 자신에게 엄격해야 하며, 어느 정도 미적 감각이 있어야 합니다. 일부 그리기 소프트웨어(Adobe Potoshop, Fireworks 등)에 익숙해지는 것이 가장 좋습니다. Tomato는 CSS에 대해 매우 훌륭한 튜토리얼을 제공했습니다(등록 필요).
2.2 관련 도구
우선 컴퓨터가 있어야 하고, 모니터의 색상도 그다지 나쁘지 않습니다(제 노트북의 LCD 모니터는 멍하니...) . 그리기 소프트웨어 Adobe Potoshop, Fireworks 등. CSS 작성 도구는 물론 메모장을 사용해 작성할 수도 있습니다. 컬러 매칭 소프트웨어, 스크린샷 소프트웨어. 이 사이트에서는 기본적으로 다운로드가 가능합니다. 과도한 트래픽으로 인해 사이트가 차단되는 것을 방지하기 위해 다운로드 수준을 높이고 다운로드 주소를 임의로 변경할 수 있습니다. 등록 및 다운로드를 부탁드립니다. 협조해 주셔서 감사합니다!
Macromedia Studio 8.0 공식 중국어 간체 버전
Emule 다운로드 주소: http://lib.verycd.com/2005/10/14/0000069569.html
동의하는 웹페이지 프로덕션 소프트웨어의 경우 여기서는 주로 제품군의 Fireworks를 사용합니다(자습서에서 사용됨). 물론 Adobe Photoshop을 사용할 수도 있습니다.
CSS 작성 도구 EditPlus V2.1.2 Build 147 중국어 버전
다운로드 주소:
파일을 다운로드하려면 클릭
물론 어떤 사람들은 그렇지 않다고 말합니다. Dreamweaver를 사용하는 것이 더 낫지 않나요? 여기서는 손글씨로 코드의 의미를 기억하는 것이 더 쉽지 않습니다. 게다가 CSS 시각적 글쓰기는 그리 이상적이지 않습니다. 원래 TopStyle3은 CSS를 시각적으로 작성하는 데 가장 좋은 도구이지만, Pjblog 사이의 CSS는 여러 파일로 나누어져 있어 사용 시 효과가 그다지 뚜렷하지 않습니다.
Color Schemer Studio1.5 컬러 매칭 도구
다운로드 주소: 파일을 다운로드하려면 클릭하세요
컬러 매칭은 임신의 첫 번째 단계입니다. 피부. 이 도구는 색상 일치에 있어 더욱 전문적입니다.
Su Yu Style Sheet Chinese Manual 2.0(이하 "설명서")
다운로드 주소: 파일을 다운로드하려면 클릭하세요
디버깅 소프트웨어 Firefox
다운로드 주소: 파일을 다운로드하려면 클릭하세요
현재 94%의 사람들이 IE를 사용하고 있지만 Firefox 사용자도 증가하고 있습니다. Firefox가 얼마나 좋은지에 대해서는 자세히 설명하지 않겠습니다. 하지만 두 브라우저 사이에는 CSS 호환성 문제가 있을 것입니다.
스크린샷 도구 HyperSnap5
다운로드 주소: 클릭하여 파일을 다운로드하세요
이것도 스크린샷 소프트웨어인데 사용해본 결과 비교적 강력하다고 생각합니다 .
졸았으면 푹 쉬세요...
2. 피부를 디자인하세요
2.1 컬러 매치
블로그의 첫인상은 시각적이기 때문에 색상이 매우 중요합니다.
Di sini kami menggunakan putih, kelabu dan merah. Secara amnya kelabu adalah universal, sama seperti golongan darah O dalam jenis darah.
2.2 Reka Letak
Susun atur halaman tidak terlalu rumit Selepas anda memahami strukturnya, anda boleh menggunakan imaginasi anda. Apa yang saya ingin bincangkan di sini ialah CSS (Cascading Style Sheets) Fokus di sini ialah cascading. Jika kita mengatakan bahawa reka bentuk Kulit adalah reka bentuk grafik, saya fikir ia adalah salah. Dari sudut apresiasi, ini adalah karya dua dimensi, tetapi dari sudut reka bentuk, ia adalah tiga dimensi. Bagaimana lagi boleh ada atribut seperti z-index? Tambahan pula, kita boleh membuat perbandingan Lapisan CSS adalah serupa dengan lapisan dalam PS atau FW Satu-satunya perbezaan terletak pada: susunan pertukaran lapisan - PS boleh tetapi DIV+CSS tidak boleh; (sesetengah pelayar boleh). Seperti yang ditunjukkan dalam gambar di atas, kita dapat melihat struktur Pjblog dan susunan DIV yang pertama meliputi yang kedua (tentunya juga boleh telus). Jangan kita bermegah-megah dulu, susun atur blog secara umumnya begini.
Tajuk di sini ialah kepala, yang mengandungi nama blog, sari kata, dan menu mendatar
Tbody ialah kandungan tengah, yang mengandungi kandungan utama (Kandungan utama ialah log yang kami tulis, sama seperti tempat tutorial ini; ), bar sisi;
kaki adalah bahagian bawah, yang mengandungi beberapa maklumat hak cipta kami, pemfailan, dll.; menjadi hubungan antara Box dan Box. Dan bagaimanakah Box digubah? Pakar Douglas telah pun membuat model Flash di sini, yang menerangkan dengan jelas margin, warna latar belakang, imej latar belakang, padding, sempadan dan hubungan antara mereka.
Sudah tentu ini adalah bahagian utama Pjblog, setiap bahagian juga mengandungi beberapa DIV lain, dan butiran ini (seperti menu mendatar, panel kandungan bar sisi, modul kandungan utama, dll.) juga mencantikkan kami blog Perkara utama, tetapi mari kita lakukan ini perlahan-lahan. Lihat badan utama dahulu supaya anda boleh mempunyai gambaran kasar tentang kulit dalam fikiran anda dan bersedia sepenuhnya untuk lukisan kami yang seterusnya.
Saya membuat model struktur Pjblog di bawah.
3. Melukis
3.1 Memahami latar belakang
Mengapa terdapat bahagian khas tentang latar belakang? Kerana imej yang digunakan dalam CSS semuanya wujud dalam bentuk latar belakang. Kita tidak sepatutnya melupakan perkara ini dalam proses melukis dan memotong gambar Kita harus mengurangkan saiz gambar sebanyak mungkin (banyak Skin yang mudah kini tidak menggunakan gambar atau menggunakan kurang gambar), untuk mengurangkan bilangan muat turun dan menambah baik. Kelajuan menyemak imbas halaman. Kemudian mari kita lihat latar belakang:
Atributnya termasuk warna latar belakang
warna
imej latar belakang imej Pjblog ke menggunakan ciri ini secara menyeluruh dan memupuk pemikiran 3D kita sendiri.
3.2 Penghasilan badan utama
Mari kita ambil Kulit yang saya gunakan sekarang sebagai contoh untuk menerangkan secara ringkas proses lukisan. Mari kita lihat dahulu jenis subjek yang ingin kita lakukan (ini sepatutnya sudah terbentuk dalam fikiran anda sendiri, atau anda mungkin mempunyai idea yang samar-samar).
Nada utama berwarna putih dengan sedikit bayang pada kedua-dua belah dan bahagian tepi berwarna kelabu (#EEEEEE) selebar 230px.
Buka Fireworks dan buat fail 1000px×768px baharu dengan latar belakang putih (kerana latar belakang utama Skin ini berwarna putih). Pastikan kandungan utama kami adalah 800px lebar, lukis segi empat tepat dengan lebar 800px dan ketinggian lebih besar daripada kanvas dan tambahkan 1px lebar sempadan kelabu (#999999). Gunakan cahaya penapis untuk menambah beberapa bayang-bayang Parameter penapis ditetapkan kepada lebar 5, pelembutan 10, ketelusan 15, warna hitam dan mengimbangi 0. Tambah bar sisi dan lukis segi empat tepat dengan lebar 230px dan ketinggian lebih besar daripada kanvas, dan letakkannya di sebelah kiri. Dengan cara ini bahagian utama kita dilukis. Apakah yang perlu kita perhatikan semasa membuat bahagian utama?우리가 고려해야 할 가장 중요한 것은 페이지의 높이입니다. 페이지의 높이는 콘텐츠에 따라 변경되므로 유연한 높이를 만들어야 합니다. Background-repeat를 사용하여 값을 y로 설정할 수 있습니다. 그런 다음 배경이 수직으로 반복됩니다.
3.2 헤드 제작
마찬가지로 먼저 어떤 탑을 만들고 싶은지 살펴보겠습니다.
이렇게 하면 우리 탑이 완성됩니다.
3.3 하의 제작
하의의 제작은 대체적으로 비교적 간단하며, 여기에 상하의 대응을 위한 가로바도 추가되지 않습니다. 여기에서 적응형 너비(물론 수행할 수도 있습니다. 간단하게 시작하겠습니다). 아래에는 상단에 가로 막대가 있는 회색 직사각형이 있습니다. 이제 기본적으로 다이어그램이 그려졌습니다. 잠시 동안만 볼 수도 있지만 때로는 구상부터 완성까지 며칠이 걸릴 수도 있습니다. 효과를 일치시키려면 일부 콘텐츠를 추가하는 것이 가장 좋습니다. 최상의 효과를 얻으려면 링크 색상을 사용하고 반복적으로 수정하십시오.
3.4 슬라이싱
슬라이싱은 이름 그대로 완성된 그림을 필요한 부분으로 자르는 작업입니다. 많은 친구들이 여기에 갇혀서 제대로 자르는 방법을 모릅니다. 여기서 말씀드리고 싶은 것은 효과를 보여줄 수 있다는 전제하에 사진은 작을수록 좋고, 적을수록 좋다는 것입니다. 그러면 무엇을 잘라야 합니까? 자르는 방법? 실제로 CSS 요구 사항에 따라 잘립니다. 먼저 이 부분은 건너뛰셔도 되고, CSS를 익힌 후 특정 Box에 배경을 설정하고 싶을 때, 그림을 떠올리시면 됩니다. 그런 다음 준비된 그림을 잘라서 사용하시면 됩니다. 천천히 그림을 자르는 방법을 이해하게 될 것입니다. 아래 그림은 머리 배경 이미지의 일부입니다. 이미지를 자르는 데 어떤 도구가 사용되는지 확인할 수도 있습니다. (내 생각에는 Fireworks의 이미지 자르기 기능이 더 나은 것 같습니다.) Fireworks에서 슬라이스는 웹 페이지 레이어에 배치되며, 슬라이스에 이름을 지정할 수 있고 이 슬라이스가 필요할 때 이미지를 내보낼 수 있습니다. 여기서도 이야기하고 싶은 것은 최적화 열의 속성인 내보낸 이미지의 형식입니다. 개인적으로 저는 알파 채널(향후 추세)을 지원하는 PNG32 형식을 선호합니다. 불투명한 이미지를 원한다면 JPG(크기가 작음)를 선택하는 것도 좋습니다. 누구나 공부할 수 있도록 레이어드된 전체 PNG 파일을 제공합니다.
이 파일을 다운로드하려면 클릭하세요
이 파일을 열면 볼 수 있습니다. 예를 들어 헤더, 메인 배경, 하단의 너비가 처음에 말한 것처럼 800px이 아닌 것은 외부에 그림자를 추가했기 때문입니다. 이 크기를 꼭 고려하세요.(일반적으로 이렇게 해야 하지만, 그림자색과 배경색이 크게 다르지 않으면 실수하기 쉬우므로 주의하세요.) 글로벌 배경은 너무 높게 만들 필요가 없습니다. CSS를 사용하여 아래의 흰색 색상을 만들 수 있기 때문입니다. 너무 크면 낭비됩니다. 버튼 배경 이미지도 있습니다. 마우스 접촉 모드가 있는 경우 두 개의 이미지로 나누지 않는 것이 좋습니다. 하나의 이미지로 만들고 다른 배경을 구현하기 위해 CSS를 통해 이미지의 위치를 제어합니다. CSS에 대해 더 자세히 이야기할 때까지 기다리겠습니다.4. 코드 작성
4.1 글로벌 스타일
드디어 핵심 부분에 들어갔습니다. CSS+DIV를 사용하여 블로그를 아름답게 꾸며보세요. 많은 친구들이 늘 이런 질문을 합니다. 스킨은 어떻게 해야 하나요? 여기서 제가 말씀드리고 싶은 것은 먼저 CSS와 DIV의 관계를 이해해야 한다는 것입니다. DIV는 집의 뼈대(벽돌벽 등)와 같고 CSS는 실내 및 실외 장식입니다. 뼈대가 어떻게 구성되어 있는지 이해하지 못한다면 어떻게 장식할 수 있을까요? 또 하나 언급해야 할 중요한 점은 CSS의 특징 중 하나가 나중에 정의된 내용이 이전에 정의된 내용을 대체한다는 것입니다. 예를 들어 전역 스타일에서 글꼴 색상을 빨간색으로 정의하고 나중에 본문에서 파란색으로 정의하면 우리가 보는 것은 파란색이 됩니다. 본점으로 가서 먼저 전역 스타일에 대해 이야기해 보겠습니다(Pjblog에서 Skin 폴더 아래에 global.css 파일이 있음). 여기에서 페이지 전체에 걸쳐 특정 태그의 모양을 정의할 수 있습니다.
body, img, select, th
등 특정 태그가 내장 태그입니다. 여기 스타일은 내부의 콘텐츠와 DIV에 유효합니다.Lihat kod ( ialah kod CSS, dianggap sebagai reka letak DIV dan akan diwakili oleh kod boleh jalan ini dalam masa depan. Tiada ulangan lagi)
Pjblog의 사용자층은 점점 더 커지면서 블로그는 Blogger의 온라인 홈과 같습니다. 개성을 추구하는 오늘날의 시대에 자신의 특성에 맞는 블로그용 스킨을 만드는 것은 모두의 바램입니다. 그러나 결국 여기에는 지식이 필요하므로 우리는 우리의 소원을 이루기 위해 열심히 공부해야 합니다. 처음부터 시작하겠습니다. 준비 → 스킨 개념 → 그리기 → 슬라이싱 → CSS 작성 → 미리보기 → 디버깅 호환성 → 세부 사항 다듬기 의 과정입니다. 스킨을 만드는 방법을 모든 사람이 이해할 수 있도록 이 튜토리얼을 사용하고 싶습니다. 다른 사람이 만든 스킨을 사용할 필요는 없으며 자신의 노력에 의지하여 블로그를 아름답고 개성 있게 꾸밀 수 있습니다. 매우 흥미롭습니다...
1. 준비
1.1 필요한 기초
당신 지식을 배우고자 하는 욕구가 있어야 하며, 이것이 모든 것의 전제조건입니다. 당신은 Pjblog의 사용에 대해 어느 정도 이해하고 있습니다(Skin이 무엇인지, 설치 방법을 모른다면 읽지 않는 것이 좋습니다). 스킨을 할 때는 조심해야 하고, 자신에게 엄격해야 하며, 어느 정도 미적 감각이 있어야 합니다. 일부 그리기 소프트웨어(Adobe Potoshop, Fireworks 등)에 익숙해지는 것이 가장 좋습니다. Tomato는 CSS에 대해 매우 훌륭한 튜토리얼을 제공했습니다(등록 필요).
2.2 관련 도구
우선 컴퓨터가 있어야 하고, 모니터의 색상도 그다지 나쁘지 않습니다(제 노트북의 LCD 모니터는 멍하니...) . 그리기 소프트웨어 Adobe Potoshop, Fireworks 등. CSS 작성 도구는 물론 메모장을 사용해 작성할 수도 있습니다. 컬러 매칭 소프트웨어, 스크린샷 소프트웨어. 이 사이트에서는 기본적으로 다운로드가 가능합니다. 과도한 트래픽으로 인해 사이트가 차단되는 것을 방지하기 위해 다운로드 수준을 높이고 다운로드 주소를 임의로 변경할 수 있습니다. 등록 및 다운로드를 부탁드립니다. 협조해 주셔서 감사합니다!
Macromedia Studio 8.0 공식 중국어 간체 버전
Emule 다운로드 주소: http://lib.verycd.com/2005/10/14/0000069569.html
동의하는 웹페이지 프로덕션 소프트웨어의 경우 여기서는 주로 제품군의 Fireworks를 사용합니다(자습서에서 사용됨). 물론 Adobe Photoshop을 사용할 수도 있습니다.
CSS 작성 도구 EditPlus V2.1.2 Build 147 중국어 버전
다운로드 주소:
파일을 다운로드하려면 클릭물론 어떤 사람들은 그렇지 않다고 말합니다. Dreamweaver를 사용하는 것이 더 낫지 않나요? 여기서는 손글씨로 코드의 의미를 기억하는 것이 더 쉽지 않습니다. 게다가 CSS 시각적 글쓰기는 그리 이상적이지 않습니다. 원래 TopStyle3은 CSS를 시각적으로 작성하는 데 가장 좋은 도구이지만, Pjblog 사이의 CSS는 여러 파일로 나누어져 있어 사용 시 효과가 그다지 뚜렷하지 않습니다.
Color Schemer Studio1.5 컬러 매칭 도구
다운로드 주소:
파일을 다운로드하려면 클릭하세요컬러 매칭은 임신의 첫 번째 단계입니다. 피부. 이 도구는 색상 일치에 있어 더욱 전문적입니다.
Su Yu Style Sheet Chinese Manual 2.0(이하 "설명서")
다운로드 주소:
파일을 다운로드하려면 클릭하세요디버깅 소프트웨어 Firefox
다운로드 주소:
파일을 다운로드하려면 클릭하세요현재 94%의 사람들이 IE를 사용하고 있지만 Firefox 사용자도 증가하고 있습니다. Firefox가 얼마나 좋은지에 대해서는 자세히 설명하지 않겠습니다. 하지만 두 브라우저 사이에는 CSS 호환성 문제가 있을 것입니다.
스크린샷 도구 HyperSnap5
다운로드 주소:
클릭하여 파일을 다운로드하세요이것도 스크린샷 소프트웨어인데 사용해본 결과 비교적 강력하다고 생각합니다 .
졸았으면 푹 쉬세요...
2. 피부를 디자인하세요
2.1 컬러 매치
블로그의 첫인상은 시각적이기 때문에 색상이 매우 중요합니다.
Di sini kami menggunakan putih, kelabu dan merah. Secara amnya kelabu adalah universal, sama seperti golongan darah O dalam jenis darah.
2.2 Reka Letak
Susun atur halaman tidak terlalu rumit Selepas anda memahami strukturnya, anda boleh menggunakan imaginasi anda. Apa yang saya ingin bincangkan di sini ialah CSS (Cascading Style Sheets) Fokus di sini ialah cascading. Jika kita mengatakan bahawa reka bentuk Kulit adalah reka bentuk grafik, saya fikir ia adalah salah. Dari sudut apresiasi, ini adalah karya dua dimensi, tetapi dari sudut reka bentuk, ia adalah tiga dimensi. Bagaimana lagi boleh ada atribut seperti z-index? Tambahan pula, kita boleh membuat perbandingan Lapisan CSS adalah serupa dengan lapisan dalam PS atau FW Satu-satunya perbezaan terletak pada: susunan pertukaran lapisan - PS boleh tetapi DIV+CSS tidak boleh; (sesetengah pelayar boleh). Seperti yang ditunjukkan dalam gambar di atas, kita dapat melihat struktur Pjblog dan susunan DIV yang pertama meliputi yang kedua (tentunya juga boleh telus). Jangan kita bermegah-megah dulu, susun atur blog secara umumnya begini.
Tajuk di sini ialah kepala, yang mengandungi nama blog, sari kata, dan menu mendatar
Tbody ialah kandungan tengah, yang mengandungi kandungan utama (Kandungan utama ialah log yang kami tulis, sama seperti tempat tutorial ini; ), bar sisi;
kaki adalah bahagian bawah, yang mengandungi beberapa maklumat hak cipta kami, pemfailan, dll.; menjadi hubungan antara Box dan Box. Dan bagaimanakah Box digubah? Pakar Douglas telah pun membuat model Flash di sini, yang menerangkan dengan jelas margin, warna latar belakang, imej latar belakang, padding, sempadan dan hubungan antara mereka.
Sudah tentu ini adalah bahagian utama Pjblog, setiap bahagian juga mengandungi beberapa DIV lain, dan butiran ini (seperti menu mendatar, panel kandungan bar sisi, modul kandungan utama, dll.) juga mencantikkan kami blog Perkara utama, tetapi mari kita lakukan ini perlahan-lahan. Lihat badan utama dahulu supaya anda boleh mempunyai gambaran kasar tentang kulit dalam fikiran anda dan bersedia sepenuhnya untuk lukisan kami yang seterusnya.
Saya membuat model struktur Pjblog di bawah.
3. Melukis
3.1 Memahami latar belakang
Mengapa terdapat bahagian khas tentang latar belakang? Kerana imej yang digunakan dalam CSS semuanya wujud dalam bentuk latar belakang. Kita tidak sepatutnya melupakan perkara ini dalam proses melukis dan memotong gambar Kita harus mengurangkan saiz gambar sebanyak mungkin (banyak Skin yang mudah kini tidak menggunakan gambar atau menggunakan kurang gambar), untuk mengurangkan bilangan muat turun dan menambah baik. Kelajuan menyemak imbas halaman. Kemudian mari kita lihat latar belakang:
Atributnya termasuk warna latar belakang
warna
imej latar belakang imej Pjblog ke menggunakan ciri ini secara menyeluruh dan memupuk pemikiran 3D kita sendiri.
3.2 Penghasilan badan utama
Mari kita ambil Kulit yang saya gunakan sekarang sebagai contoh untuk menerangkan secara ringkas proses lukisan. Mari kita lihat dahulu jenis subjek yang ingin kita lakukan (ini sepatutnya sudah terbentuk dalam fikiran anda sendiri, atau anda mungkin mempunyai idea yang samar-samar).
Nada utama berwarna putih dengan sedikit bayang pada kedua-dua belah dan bahagian tepi berwarna kelabu (#EEEEEE) selebar 230px.
Buka Fireworks dan buat fail 1000px×768px baharu dengan latar belakang putih (kerana latar belakang utama Skin ini berwarna putih). Pastikan kandungan utama kami adalah 800px lebar, lukis segi empat tepat dengan lebar 800px dan ketinggian lebih besar daripada kanvas dan tambahkan 1px lebar sempadan kelabu (#999999). Gunakan cahaya penapis untuk menambah beberapa bayang-bayang Parameter penapis ditetapkan kepada lebar 5, pelembutan 10, ketelusan 15, warna hitam dan mengimbangi 0. Tambah bar sisi dan lukis segi empat tepat dengan lebar 230px dan ketinggian lebih besar daripada kanvas, dan letakkannya di sebelah kiri. Dengan cara ini bahagian utama kita dilukis. Apakah yang perlu kita perhatikan semasa membuat bahagian utama?우리가 고려해야 할 가장 중요한 것은 페이지의 높이입니다. 페이지의 높이는 콘텐츠에 따라 변경되므로 유연한 높이를 만들어야 합니다. Background-repeat를 사용하여 값을 y로 설정할 수 있습니다. 그런 다음 배경이 수직으로 반복됩니다.
3.2 헤드 제작
마찬가지로 먼저 어떤 탑을 만들고 싶은지 살펴보겠습니다.
이렇게 하면 우리 탑이 완성됩니다.
3.3 하의 제작 하의의 제작은 대체적으로 비교적 간단하며, 여기에 상하의 대응을 위한 가로바도 추가되지 않습니다. 여기에서 적응형 너비(물론 수행할 수도 있습니다. 간단하게 시작하겠습니다). 아래에는 상단에 가로 막대가 있는 회색 직사각형이 있습니다. 이제 기본적으로 다이어그램이 그려졌습니다. 잠시 동안만 볼 수도 있지만 때로는 구상부터 완성까지 며칠이 걸릴 수도 있습니다. 효과를 일치시키려면 일부 콘텐츠를 추가하는 것이 가장 좋습니다. 최상의 효과를 얻으려면 링크 색상을 사용하고 반복적으로 수정하십시오.
3.4 슬라이싱슬라이싱은 이름 그대로 완성된 그림을 필요한 부분으로 자르는 작업입니다. 많은 친구들이 여기에 갇혀서 제대로 자르는 방법을 모릅니다. 여기서 말씀드리고 싶은 것은 효과를 보여줄 수 있다는 전제하에 사진은 작을수록 좋고, 적을수록 좋다는 것입니다. 그러면 무엇을 잘라야 합니까? 자르는 방법? 실제로 CSS 요구 사항에 따라 잘립니다. 먼저 이 부분은 건너뛰셔도 되고, CSS를 익힌 후 특정 Box에 배경을 설정하고 싶을 때, 그림을 떠올리시면 됩니다. 그런 다음 준비된 그림을 잘라서 사용하시면 됩니다. 천천히 그림을 자르는 방법을 이해하게 될 것입니다. 아래 그림은 머리 배경 이미지의 일부입니다. 이미지를 자르는 데 어떤 도구가 사용되는지 확인할 수도 있습니다. (내 생각에는 Fireworks의 이미지 자르기 기능이 더 나은 것 같습니다.) Fireworks에서 슬라이스는 웹 페이지 레이어에 배치되며, 슬라이스에 이름을 지정할 수 있고 이 슬라이스가 필요할 때 이미지를 내보낼 수 있습니다. 여기서도 이야기하고 싶은 것은 최적화 열의 속성인 내보낸 이미지의 형식입니다. 개인적으로 저는 알파 채널(향후 추세)을 지원하는 PNG32 형식을 선호합니다. 불투명한 이미지를 원한다면 JPG(크기가 작음)를 선택하는 것도 좋습니다. 누구나 공부할 수 있도록 레이어드된 전체 PNG 파일을 제공합니다.
이 파일을 다운로드하려면 클릭하세요
이 파일을 열면 볼 수 있습니다. 예를 들어 헤더, 메인 배경, 하단의 너비가 처음에 말한 것처럼 800px이 아닌 것은 외부에 그림자를 추가했기 때문입니다. 이 크기를 꼭 고려하세요.(일반적으로 이렇게 해야 하지만, 그림자색과 배경색이 크게 다르지 않으면 실수하기 쉬우므로 주의하세요.) 글로벌 배경은 너무 높게 만들 필요가 없습니다. CSS를 사용하여 아래의 흰색 색상을 만들 수 있기 때문입니다. 너무 크면 낭비됩니다. 버튼 배경 이미지도 있습니다. 마우스 접촉 모드가 있는 경우 두 개의 이미지로 나누지 않는 것이 좋습니다. 하나의 이미지로 만들고 다른 배경을 구현하기 위해 CSS를 통해 이미지의 위치를 제어합니다. CSS에 대해 더 자세히 이야기할 때까지 기다리겠습니다.
4. 코드 작성4.1 글로벌 스타일
드디어 핵심 부분에 들어갔습니다. CSS+DIV를 사용하여 블로그를 아름답게 꾸며보세요. 많은 친구들이 늘 이런 질문을 합니다. 스킨은 어떻게 해야 하나요? 여기서 제가 말씀드리고 싶은 것은 먼저 CSS와 DIV의 관계를 이해해야 한다는 것입니다. DIV는 집의 뼈대(벽돌벽 등)와 같고 CSS는 실내 및 실외 장식입니다. 뼈대가 어떻게 구성되어 있는지 이해하지 못한다면 어떻게 장식할 수 있을까요? 또 하나 언급해야 할 중요한 점은 CSS의 특징 중 하나가 나중에 정의된 내용이 이전에 정의된 내용을 대체한다는 것입니다. 예를 들어 전역 스타일에서 글꼴 색상을 빨간색으로 정의하고 나중에 본문에서 파란색으로 정의하면 우리가 보는 것은 파란색이 됩니다. 본점으로 가서 먼저 전역 스타일에 대해 이야기해 보겠습니다(Pjblog에서 Skin 폴더 아래에 global.css 파일이 있음). 여기에서 페이지 전체에 걸쳐 특정 태그의 모양을 정의할 수 있습니다.
body, img, select, th
등 특정 태그가 내장 태그입니다. 여기 스타일은 내부의 콘텐츠와 DIV에 유효합니다.Lihat kod ( ialah kod CSS, dianggap sebagai reka letak DIV dan akan diwakili oleh kod boleh jalan ini dalam masa depan. Tiada ulangan lagi)
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.