CSS 웹 페이지 레이아웃도 체계적인 작업으로 간주할 수 있습니다. DIVCSS 웹 사이트의 개발은 여러 사람이 협력하여 완료할 수 있으며, 이는 한 사람이 개발하더라도 많은 규범적인 운영 문제를 수반합니다. 체계적이고 표준화된 글을 Blue에서 재출판한 글인데, 저자가 많은 실무 경험을 정리하여 누구나 참고하고 배울 수 있어 매우 효과적입니다. 요약 이 사양은 개발 사양이자 스크립팅 언어 참조입니다. 이 사양은 엄격하게 준수해야 하는 불변의 조항이 아니며 특수한 상황에서는 특정 수정이 이루어져야 합니다. 그러나 임의로 사양을 변경하지 마십시오. 질문이 있는 경우 제 시간에 저에게 연락해 주시면 이 사양의 관련 코드 샘플과 문서를 즉시 변경해 드리겠습니다. 기본 요구 사항 1. 웹 사이트의 루트 디렉터리에 있는 이미지 공통 임시 디렉터리 3개를 연 다음 필요에 따라 미디어 하위 디렉터리를 엽니다. 이미지 디렉터리에는 회사 로고, 배너, 메뉴 등 다양한 열의 페이지에서 사용되는 공개 이미지가 포함되어 있습니다. 및 버튼 등, 공통 하위 디렉토리에는 CSS, js, php, include 등과 같은 공개 파일이 포함되어 있으며, 임시 하위 디렉토리에는 고객이 제공한 다양한 텍스트, 그림 및 기타 원본 자료가 포함되어 있습니다. 플래시, AVI, 퀵타임 등. 2. 홈페이지의 컬럼 구조에 따라 루트 디렉토리에 컬럼별로 디렉토리를 오픈하는 것을 원칙으로 하며, 필요에 따라 각 컬럼의 디렉토리에 이미지와 미디어의 하위 디렉토리를 오픈하여 사진과 미디어를 배치하여야 한다. 멀티미디어 파일의 경우 이 열에 내용이 많고 여러 개의 하위 열로 나누어져 있으면 그에 따라 다른 디렉터리를 열 수 있습니다. 3. 임시 디렉토리에는 파일이 많은 경우가 많으며, 고객이 제공하는 정보를 차례대로 분류하고 정리하기 위해 시간별로 이름이 지정된 디렉토리를 여는 것이 좋습니다. 4. 디렉토리 및 파일명은 특별한 경우가 아닌 이상 영문 소문자, 숫자, 밑줄을 조합하여 사용하여야 하며, 이름 지정 시에는 영문을 기준으로 하여 주시기 바랍니다. 디렉토리. 꼭 필요한 경우가 아니면 병음을 사용하지 마십시오. 경험에 따르면 병음으로 명명된 디렉토리는 한 달이 지나도 이해하기 어려운 경우가 많습니다. 스크립팅 대본의 전반적인 스타일에 대한 일관된 개념을 가지고 있어야 하는데, 이는 한 달 후에 쓴 대본의 스타일이 한 달 전에 쓴 대본의 스타일과 일치하고, 동일한 작업 그룹의 여러 개발자가 일관성을 유지합니다. 왜냐하면 우리는 영원히 고립되어 개발할 수 없기 때문입니다. 3개월 전에는 언제든지 자신과 공동 작업을 할 수 있으며(고객이 수정을 요구함) 같은 작업 그룹의 다른 동료와 함께 프로젝트를 개발해야 하는 경우가 많습니다. 스튜디오, 사임한 사람에게 수정을 요청하는 경우도 있습니다. 물론 스크립트 개발은 후속 동료에게 맡길 수도 있습니다. 1. HTML 파일용 범용 템플릿: div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 기타 메타 태그 div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 스타일 시트는 클라이언트 측 Javascript 기능 정의 및 초기화 작업을 정의합니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 다시 채우다: 2. 전체 텍스트 검색이 가능한 페이지의 경우, 인터넷 검색 엔진의 효율적인 검색을 위해 채널 홈페이지 HTML의 <head></head> 사이에 키워드 및 설명 메타태그를 추가해야 합니다. , 예를 들어: div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 3. CSS 파일 형식 샘플 코드: div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 여기서 특별한 주의가 필요한 점은 a:link a:visited a:hover a:actived의 순서가 위의 샘플 코드를 엄격하게 준수해야 한다는 것입니다. 그렇지 않으면 어느 정도 문제가 발생할 것입니다. 또한 우리는 재정의가 먼저이고 의사 클래스가 그 다음이고 사용자 정의가 마지막이라고 규정하여 자신과 다른 사람이 더 쉽게 읽을 수 있도록 합니다! 다양한 브라우저에서 글꼴 크기를 일관되게 유지하려면 글꼴 크기를 포인트 pt와 픽셀 px로 정의하는 것이 좋습니다. pt는 일반적으로 중국 송나라에서 9pt와 11pt를 사용하고 중국어에서는 px는 일반적으로 12px와 14.7px를 사용합니다. Songti. 최적화된 글꼴 크기입니다. 굵은 글꼴이나 Song 글꼴을 굵은 글꼴로 사용할 경우 일반적으로 글꼴 크기는 11pt와 14.7px가 더 적합합니다. <table>을 중첩하여 작성할 때는 <table>이 하나인 경우 <table><tr>을 정렬하고, <td>는 반각 공백 두 개로 들여쓰기해야 하며, 공백이 있는 경우에는 반드시 표준을 따릅니다. other 중첩된 테이블의 경우 <table>도 두 개의 반자 공백으로 들여쓰기됩니다. <td>에 중첩된 테이블이 없으면 </td>의 닫는 태그는 줄 없이 <td>와 같은 줄에 있어야 합니다. 휴식. 앞서 언급했듯이 소스 코드에는 이러한 코드가 없어야 합니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 대신 다음과 같아야 합니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 이는 브라우저가 줄 바꿈을 반자 공백과 동일하다고 생각하기 때문입니다. 위의 불규칙한 쓰기 방법은 의도치 않게 반자 공백을 추가하는 것과 동일합니다. 다음과 같이 작성되었습니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com] 동일한 레벨에 속하는 <table>은 반드시 왼쪽 정렬되어야 합니다. 또한, <td>와 </td> 사이에는 높이가 12px 이상인 빈 셀이 존재할 수 없습니다. 높이가 12px 미만인 경우 <td>와 </td> 사이에 1*1 투명 gif 이미지를 삽입해야 합니다. 이는 일부 브라우저에서 빈 셀을 불법으로 간주하여 해석하지 않기 때문입니다. 코드 순서가 혼란스러우면 명령->DW3에서 소스 서식 적용을 통해 다시 정렬할 수 있습니다! 5. 너비와 높이를 쓰는 방법에 대한 통일된 기준도 있습니다. 일반적으로 열이 1개인 테이블은 너비를 <table> 태그에 쓰고, 행이 1개인 테이블은 높이를 <table> 태그에 씁니다. ; 여러 행과 여러 열이 있는 테이블의 경우 테이블, 너비 및 높이는 첫 번째 행 또는 열의 <td> 태그에 기록됩니다. 즉, 동일한 셀의 크기를 제어하는 높이와 너비는 하나만 있어야 합니다. 즉, 너비와 높이의 값을 변경하는 경우에는 다음과 같습니다. 코드가 있어야 합니다. 변경 사항이 브라우저에 표시됩니다. 이렇게 하는 것은 쉽지 않으며 오랜 시간의 연습과 사고가 필요합니다. 일반 원칙 1. 테이블을 정렬하기 전에 세 가지 수준 내에서 테이블 중첩을 제어하고 <colspan> <rowspan> 두 개의 태그를 사용하지 않는 것이 가장 좋은 솔루션인지 신중하게 생각해 보십시오. 많은 문제. 2. 웹페이지는 전체 큰 테이블을 사용하지 않도록 해야 합니다. 브라우저가 페이지의 요소를 해석할 때 웹페이지에 포함된 경우 하나씩 표시하기 때문입니다. 큰 테이블에 배치하면 방문자가 URL을 입력할 때 처음에는 오랫동안 공백이 표시되고 모든 웹 콘텐츠가 동시에 나타날 수 있습니다. 꼭 해야 한다면 큰 테이블을 덩어리로 표시할 수 있도록 <tbody> 태그를 사용하세요. 3. 조판 시 첫 번째 줄을 들여쓰기해야 하는 경우가 많습니다. 효과를 얻으려면 전체 너비 공백을 사용하지 마세요. 표준 접근 방식은 스타일 시트에 p { text-indent: 2em } 을 정의하는 것입니다. 각 단락에 <p> 태그를 추가하세요. 일반적인 상황에서는 </p> 닫는 태그를 생략하지 마세요. 4. 이미지 표시 크기를 인위적으로 방해하는 <img width=? height=?> 사용을 원칙적으로 금지하며, <img> 태그에는 너비와 높이를 포함하지 않는 것이 좋습니다. 두 가지 속성은 제작 과정에서 사진을 반복적으로 수정해야 하는 경우가 많기 때문입니다. 이렇게 하면 사진 표시 크기에 대한 사람의 개입을 피할 수 있고 브라우저 자체 기능을 최대화할 수 있습니다. 페이지에서 사진이 로드되지 않았습니다. 이미지를 추가할 때 이미지의 사이트 크기가 빠지지 않아 웹페이지가 표시되지 않을 수 있습니다. 로딩 중 지터(그림을 고정된 크기의 테이블에 삽입하면 이 현상이 발생하지 않음), 특히 그림의 크기가 큰 경우 이러한 현상이 눈에 띄게 나타나므로 이것이 눈에 띄게 나타날 것으로 예상되는 경우 웹 페이지가 흔들리는 상황이 발생하는 경우, 마지막에 <img>에 너비를 꼭 붙여주세요. 및 높이 속성. 5. 브라우저의 자동 조판 기능을 극대화하려면 <br>을 사용하여 전체 텍스트 분할에 수동으로 개입하지 마십시오. 6. 각 언어별 단어 사이에는 머리글 기호 앞과 뒤 기호를 제외하고 반각 띄어쓰기를 해야 합니다. 한자 사이의 구두점은 전자 구두점으로 하고, 영문자와 숫자 주위의 괄호는 반각 문자를 사용합니다. -너비 괄호. 7. 모든 글꼴 크기는 스타일 시트를 사용하여 구현해야 하며, <font size=?> 태그는 페이지에 표시되는 것을 금지합니다. 8. 웹 페이지에 연속된 공백을 1개 이상 사용하지 말고 전각 공백을 최대한 적게 사용하십시오. (영문 문자 세트에서는 전각 공백이 깨져서 문자가 됩니다.) 텍스트 들여쓰기, 패딩, 여백을 사용하십시오. , hspace, vspace 및 공백을 위한 투명도. 9. 중국어와 영어를 혼합할 때 영어와 숫자를 verdana 및 arial 글꼴로 정의하도록 최선을 다합니다. 10. 줄 간격을 백분율로 정의하는 것이 좋습니다. 일반적으로 사용되는 두 줄 간격 값은 line-height:120%/150%입니다. 11. 웹 사이트의 모든 경로는 상대 경로를 사용합니다. 일반적으로 특정 디렉터리의 기본 파일에 대한 링크 경로는 전체 이름으로 작성할 필요가 없습니다. <a href= ”aboutus/index.htm”> 다음과 같아야 합니다:<a href=”aboutus/”> 12. 그래픽에 텍스트를 삽입할 때는 더 큰 글꼴을 사용하십시오. 그래픽에 텍스트를 포함하지 않는 것이 좋습니다. 13. "웹페이지 크기"란 HTML 파일과 모든 내장 개체를 포함한 모든 웹페이지의 파일 크기의 합으로 정의됩니다. 사용자는 참신한 사이트보다는 빠른 사이트를 선호합니다. 모뎀 사용자의 경우 페이지 크기를 34K 미만으로 유지하는 것이 적절합니다. 파일 명명 규칙 1. 각 디렉터리에는 기본 html 파일이 포함되어야 하며 파일 이름은 index.htm이어야 합니다. 2. 파일명은 영문소문자, 숫자, 밑줄을 조합하여 사용하여야 합니다. 3. 명명 원칙의 기본 이념은 자신과 작업 그룹의 모든 구성원이 각 파일의 의미를 쉽게 이해할 수 있도록 하는 것입니다. 두 번째는 폴더에서 "이름별 정렬" 명령을 사용할 때 동일한 큰 파일이 생성된다는 것입니다. 파일 카테고리를 함께 정렬하여 검색, 수정, 교체, 로드 계산 등을 수행할 수 있습니다. 4. 다음은 "뉴스" 열("국내 뉴스" 및 "국제 뉴스" 포함)을 사용하여 html 파일의 명명 원칙을 설명합니다. 5. 사진의 명명 원칙은 다음 기준을 따릅니다. ☆꼬리 부분은 그림의 구체적인 의미를 표현하기 위해 사용되었습니다. ☆ 다음은 그림의 의미를 한눈에 이해할 수 있는 몇 가지 예입니다. div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com]
<html>
<!–
생성기: 하위 디자인 스튜디오( www.eastline.net.cn )
생성 데이터: 2000-8-1
원작자: eastline
–>
<머리>
<title>문서 제목</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body bgcolor="#ffffff">
… …
</body>
웹사이트가 차세대 웹 언어 XML 표준과 호환되도록 하려면 모든 HTML 태그 속성을 작은따옴표나 큰따옴표로 묶어야 합니다. 즉, < 대신 <a href="url">을 써야 합니다. a href=url >.
<meta name=”keywords” content=”동양신칸센, 자동차, 자동차 구매”/>
<meta name=”description” content=”중국 자동차 정보의 세계 최초 정류장, 동양신간진선”/>
<스타일 유형="텍스트/css">
<!—
p { 텍스트 들여쓰기: 2em }
body { 글꼴 계열: "宋体"; 색상: #000000; 여백-오른쪽: 0px;
테이블 { 글꼴 계열: "宋体"; 글꼴 크기: 9pt; 색상: #000000}
a:link { 글꼴 크기: 9pt; 색상: #FFFFFF;
a:visited { 글꼴 크기: 9pt; 색상: #99FFFF;
a:hover { 글꼴 크기: 9pt; 색상: #FF9900; 텍스트 장식: 없음}
a:active { 글꼴 크기: 9pt; 색상: #FF9900; 없음}
a.1:link { 글꼴 크기: 9pt; 색상: #3366cc;
a.1:visited { 글꼴 크기: 9pt; 색상: #3366cc;
a.1:hover { 글꼴 크기: 9pt; 색상: #FF9900; 텍스트 장식: 없음}
a.1:활성 { 글꼴 크기: 9pt; 색상: #FF9922;
.blue { 글꼴 계열: "宋体"; 글꼴 크기: 10.5pt; 줄 높이: 20px; 문자 간격: 5em}
–>
</style>
<td><img src=”../images/sample.gif”>
</td>
<td><img src=”../images/sample.gif”></td>
<td><img src=”../images/sample.gif”> </td>
☆ 루트 디렉터리에 뉴스 디렉터리를 만듭니다. ☆ 첫 번째 기본 뉴스 항목의 이름은 index.htm입니다.
☆ "국내뉴스"에 속하는 모든 뉴스는 china_1.htm, china_2.htm, …
☆ "국제뉴스"에 속한 모든 뉴스는 순서대로 이름이 지정됩니다: internation_1.htm, internation _2.htm, …
☆ 파일 개수가 두 자리인 경우 모든 파일이 폴더에 올바르게 정렬될 수 있도록 처음 9개 파일의 이름을 china_01.htm, china_02.htm으로 지정하십시오.
☆ 이름은 밑줄로 구분하여 첫 번째 부분과 마지막 부분, 두 부분으로 구분됩니다.
☆ 헤더 부분은 광고, 로고, 메뉴, 버튼 등 이미지의 전반적인 성격을 나타냅니다.
☆ 일반적으로 말하자면:
페이지 상단에 배치된 광고, 장식 패턴 등 직사각형 그림을 배너라고 부릅니다.
우리는 상징적인 그림에 로고라는 이름을 붙였습니다.
페이지 버튼에 고정되지 않은 링크로 작은 그림에 이름을 붙입니다
페이지의 특정 위치에 연속적으로 나타나며 동일한 성격을 갖는 링크 열의 그림을 메뉴라고 명명합니다.
장식용으로 사진 이름을 지정했습니다. pic
제목을 나타내는 링크 없이 이미지 이름을 지정합니다.
이 원칙 등을 따르십시오.
배너_소후.gif
배너_시나.gif
메뉴_aboutus.gif
메뉴_작업.gif
제목_뉴스.gif
로고_경찰.gif
로고_국가.gif
pic_people.jpg
pic_hill.jpg