CSS 웹 페이지 레이아웃도 체계적인 작업으로 간주할 수 있습니다. DIVCSS 웹 사이트의 개발은 여러 사람이 협력하여 완료할 수 있으며, 이는 한 사람이 개발하더라도 많은 규범적인 운영 문제를 수반합니다. 체계적이고 표준화된 글을 Blue에서 재출판한 글인데, 저자가 많은 실무 경험을 정리하여 누구나 참고하고 배울 수 있어 매우 효과적입니다.
개요
이 사양은 개발 사양이자 스크립팅 언어 참조입니다. 이 사양은 엄격하게 준수해야 하는 불변의 조항이 아니며 특수한 상황에서는 특정 수정이 이루어져야 합니다. 그러나 임의로 사양을 변경하지 마십시오. 질문이 있는 경우 제 시간에 저에게 연락해 주시면 이 사양의 관련 코드 샘플과 문서를 즉시 변경해 드리겠습니다.
기본 요구 사항
1. 웹 사이트의 루트 디렉터리에 있는 이미지 공통 임시 디렉터리 3개를 열고 필요에 따라 미디어 하위 디렉터리를 엽니다. 이미지 디렉터리에는 회사 로고, 배너 및 기타 열의 페이지에서 사용되는 공개 이미지가 포함되어 있습니다. 메뉴, 버튼 등, 일반 하위 디렉토리에는 CSS, js, php, include 등과 같은 공개 파일이 포함되어 있으며, 임시 하위 디렉토리에는 고객이 제공한 다양한 원본 자료가 포함되어 있습니다. avi, Quick Time 등 멀티미디어 파일.
2. 홈페이지의 컬럼 구조에 따라 루트 디렉토리에 컬럼별로 디렉토리를 오픈하는 것을 원칙으로 하며, 필요에 따라 각 컬럼의 디렉토리에 이미지와 미디어의 하위 디렉토리를 오픈하여 사진과 미디어를 배치하여야 한다. 멀티미디어 파일의 경우 이 열에 내용이 많고 여러 개의 하위 열로 나누어져 있으면 그에 따라 다른 디렉터리를 열 수 있습니다.
3. 임시 디렉터리에는 많은 파일이 있는 경우가 많습니다. 고객이 제공하는 정보를 차례로 분류하고 정리하려면 시간 이름으로 디렉터리를 여는 것이 좋습니다.
4. 디렉토리 및 파일명은 특별한 경우가 아닌 이상 영문 소문자, 숫자, 밑줄을 조합하여 사용하여야 하며, 이름 지정 시에는 영문을 기준으로 하여 주시기 바랍니다.
디렉토리
. 꼭 필요한 경우가 아니면 병음을 사용하지 마십시오. 경험에 따르면 병음으로 명명된 디렉토리는 한 달 후에는 이해할 수 없는 경우가 많습니다
. 이는 귀하가 한 달 후와 한 달 전에 작성한 스크립팅 스타일은 물론 동일한 작업 그룹의 다른 개발자가 작성한 스크립팅 스타일도 일관되게 유지된다는 것을 의미합니다. 왜냐하면 우리는 영원히 독립적으로 개발할 수 없고 항상 작업 중일 수 있기 때문입니다. 3개월 전 자신의 경우(고객이 수정을 요청함) 스튜디오의 다른 동료와 함께 프로젝트를 공동 개발해야 하는 경우가 많으며, 사임한 사람들이 개발한 스크립트를 수정하라는 요청을 받을 수도 있습니다. 프로젝트를 후속 동료에게 맡기십시오.
1. Html 파일용 범용 템플릿:
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">
기타 메타 태그
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
스타일 시트 정의 클라이언트 Javascript 기능 정의 및 초기화 작업
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css com. ]
</head>
<body bgcolor="#ffffff">
… …
</body>
추가됨:
웹사이트가 차세대 웹 언어 XML 표준과 호환되도록 하려면 모든 HTML 태그 속성을 작은따옴표나 큰따옴표로 묶어야 합니다. 즉, < 대신 <a href="url">을 써야 합니다. a href=url >.
2. 전체 텍스트 검색을 허용하는 페이지의 경우 인터넷 검색 엔진에서 효과적으로 검색할 수 있도록 HTML의 <head></head> 사이에 키워드 및 설명 메타 태그를 추가해야 합니다. 채널 홈 페이지에 있습니다. 예:
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com]
<meta name=”keywords” content=”동양신칸센, 자동차, 자동차 구매”/>
<meta name=”description” content=”세계 최초의 중국 자동차 정보 정류장 동양신칸진선”/>
3. CSS 파일 형식 샘플 코드:
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css com. ]
<스타일 유형="텍스트/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>
여기서 특히 주목해야 할 점은 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]
에서 언급한 바와 같습니다.
<td><img src=”../images/sample.gif”>
</td>
다음과 같아야 합니다:
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com]
<td><img src=”../images/sample.gif”></td>
이는 브라우저가 줄 바꿈을 반자 공백과 동일하다고 생각하기 때문입니다. 위의 불규칙한 쓰기 방법은 의도하지 않게 추가하는 것과 동일합니다. 반각 공백을 추가해야 하는 경우 다음과 같이 작성해야 합니다.
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com]
<td><img src=”../images/sample.gif”> </td>
같은 레벨에 속하는 <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> 태그에 width 및 height 속성을 포함하지 않는 것이 좋습니다. 제작 과정에서 이미지 표시 크기에 대한 사람의 개입을 피하고 브라우저 자체 기능을 최대화할 수 있는 반복적인 수정이 필요한 경우가 많습니다. 그러나 이로 인해 웹 페이지에 이미지가 로드되지 않는 경우가 발생합니다. , 이미지의 사이트 크기는 예약되지 않습니다. 특히 이미지 크기가 큰 경우 로딩 중에 웹 페이지가 흔들리는 현상이 발생할 수 있습니다(이미지가 고정 크기 테이블에 삽입된 경우 이러한 현상이 발생하지 않음). 크면 이런 현상이 뚜렷하게 나타나므로 예상할 때 웹 페이지가 확실히 흔들리는 상황이 발생하는 경우 마지막에 <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”>은 다음과 같아야 합니다. href=”aboutus/”>
12. 그래픽 텍스트를 삽입할 때는 더 큰 글꼴을 사용하는 것이 좋습니다. 그래픽에 텍스트를 포함하지 마십시오.
13. "웹페이지 크기"란 HTML 파일과 모든 내장 개체를 포함한 모든 웹페이지의 파일 크기의 합으로 정의됩니다. 사용자는 참신한 사이트보다는 빠른 사이트를 선호합니다. 모뎀 사용자의 경우 페이지 크기를 34K 미만으로 유지하는 것이 적합합니다.
파일 명명 원칙
1. 각 디렉터리에는 기본 html 파일이 포함되어야 하며, 파일 이름은 index.htm이어야 합니다.
2. 파일 이름은 영문 소문자, 숫자, 밑줄의 조합이어야 합니다.
3. 명명 원칙의 기본 이념은 자신과 작업 그룹의 모든 구성원이 각 파일의 의미를 쉽게 이해할 수 있도록 하는 것입니다. 두 번째는 폴더에서 "이름별 정렬" 명령을 사용할 때 동일한 큰 파일이 생성된다는 것입니다. 파일 카테고리를 함께 정렬하여 검색, 수정, 교체, 로드 계산 등을 수행할 수 있습니다.
4. 다음은 "뉴스" 열("국내 뉴스" 및 "국제 뉴스" 포함)을 사용하여 html 파일의 명명 원칙을 설명합니다.
☆ 루트 디렉터리에 뉴스 디렉터리를 만듭니다. ☆ 첫 번째 기본 뉴스 항목의 이름은 index.htm입니다.
☆ "국내뉴스"에 속하는 모든 뉴스는 china_1.htm, china_2.htm, …
☆ "국제뉴스"에 속하는 모든 뉴스는 순서대로 이름이 지정됩니다: internation_1.htm, internation _2.htm, …
☆ 파일 개수가 두 자리인 경우 모든 파일이 폴더에 올바르게 정렬될 수 있도록 처음 9개 파일의 이름을 china_01.htm, china_02.htm으로 지정하십시오.
5. 사진의 명명 원칙은 다음 기준을 따릅니다.
☆ 이름은 밑줄로 구분하여 첫 번째 부분과 마지막 부분, 두 부분으로 구분됩니다.
☆ 헤더 부분은 광고, 로고, 메뉴, 버튼 등 이미지의 전반적인 성격을 나타냅니다.
☆ 일반적으로 말하자면:
페이지 상단에 배치된 광고, 장식 패턴 등 직사각형 그림을 배너라고 부릅니다.
우리는 상징적인 그림에 로고라는 이름을 붙였습니다.
페이지 버튼에 고정되지 않은 링크로 작은 그림에 이름을 붙입니다
페이지의 특정 위치에 연속적으로 나타나며 동일한 성격을 갖는 링크 열의 그림을 메뉴라고 명명합니다.
장식용으로 사진 이름을 지정했습니다. pic
제목을 나타내는 링크 없이 이미지 이름을 지정합니다.
이 원칙 등을 따르십시오.
☆꼬리 부분은 그림의 구체적인 의미를 표현하기 위해 사용되었습니다.
☆ 다음은 그림의 의미를 한눈에 이해할 수 있는 몇 가지 예입니다.
div css xhtml xml 예제 소스 코드 예제 소스 코드 [www.52css.com]
배너_소후.gif
배너_시나.gif
메뉴_aboutus.gif
메뉴_작업.gif
제목_뉴스.gif
로고_경찰.gif
로고_국가.gif
pic_people.jpg
pic_hill.jpg