V 현대 세계때로는 자신의 웹사이트를 갖는 것이 전화번호나 이메일 주소를 갖는 것만큼 중요합니다. 불행히도 모든 사람이 독립적으로 아름다운 전문 웹 사이트를 만들 수 있는 것은 아니며 때로는 곡선이 제대로 작동하지 않는 경우도 있습니다. 모든 사람이 그것을 감당할 수 있는 것은 아니기 때문에 프로그래머로부터 주문하는 것도 이상적인 솔루션이 아닙니다.
무료는이 상황에서 벗어나는 데 도움이됩니다. HTML 템플릿사이트. HTML 사이트 템플릿은 특정 주제의 사이트에 대해 미리 만들어진 정적 페이지 집합입니다. 이러한 템플릿을 사용하면 HTML 마크업에 대한 기본 지식만 있으면 몇 시간 만에 간단한 웹사이트를 만들 수 있습니다. HTML 섹션에서 몇 시간 더 공부하면 이 지식을 얻을 수 있으며 CSS 섹션에서 시간을 보낸 것을 후회하지 않는다면 HTML 사이트 템플릿의 디자인을 완전히 제어하고 사용자 정의할 수 있습니다. 당신의 필요에 맞게.
웹 사이트 템플릿의 또 다른 확실한 장점은 일반적으로 전문가가 작성한다는 것입니다. 전문적인 웹사이트 템플릿은 아름답고 현대적인 디자인뿐만 아니라 코드 작성 방식도 의미합니다. 검색 엔진그들은 귀하의 웹사이트가 어떻게 작성되었는지, 코드가 SEO에 최적화되어 있는지 여부를 확인합니다. 이를 기반으로 검색 결과에서 귀하의 위치를 낮추거나 높입니다. 따라서 좋은 사이트는 아름답고 현대적이어야 하며 이는 중요할 뿐만 아니라 코드 측면에서도 올바르게 작성되어야 합니다.
무료 HTML 웹사이트 템플릿을 다운로드하고 즉시 프로젝트를 만드십시오.
사이트가 출시를 기다리고 있거나 공사 중인 경우 사이트 방문자에게 오픈이 임박했음을 알릴 필요가 있습니다. 그리고 이 문제에 대한 완벽한 해결책은 적절한 알림이 포함된 랜딩 페이지를 만드는 것입니다.
현대적인 웹 개발 도구의 발전으로 이러한 페이지는 단순한 텍스트 페이지에서 보다 흥미로운 솔루션으로 진화했습니다.
사이트에 이러한 자리 표시자를 만들면 방문자의 기대 수준이 높아져 방문자에 대한 관심이 높아집니다. 간단한 알림 외에도 가입신청서, 가입신청서 등을 삽입하여 관심있는 이용자의 정보를 수집하는 것도 가능합니다. 피드백.
이 튜토리얼에서는 Keith Wood의 jQuery 플러그인을 사용하여 구현된 가입 양식과 카운트다운 타이머가 포함된 사이트 스텁을 만들 것입니다.
수업에 필요한 재료:
- 모든 배경 이미지
- 시간과 인내.
index.html- 메인 프로젝트 파일
폴더 "제이스"- JavaScript/JQuery 스크립트가 있는 폴더
폴더 "임"- 프로젝트 이미지가 있는 폴더
폴더 "CSS"- 프로젝트 스타일시트가 있는 폴더(css 파일)
시작하기
작업의 첫 번째 단계는 스타일시트의 기본 html 파일과 jquery-library에 연결하는 것입니다.
head 태그 안에 파일을 포함합니다.
HTML
html 문서에 대한 마크업을 생성해 보겠습니다. 모든 페이지 요소는 "컨테이너" 식별자가 있는 div 태그 안에 있습니다. 이 블록 내부에는 헤더, 카운터, 피드백 양식 및 바닥글(하단 저작권 블록)이 있습니다.
우리 웹 사이트가 곧 출시됩니다
불편을 드려 죄송합니다.
당신은 기다려야합니다 ...
나에게 그것에 대한 세부 정보를 보내
ID가 "counter"인 빈 div를 남겨두었습니다. 나중에 이 식별자를 사용하여 jquery 플러그인과 연결하고 여기에 CSS 스타일을 추가합니다.
CSS
이제 모든 스타일이 위치할 프로젝트용 CSS 파일을 만들어 보겠습니다. 우선, 본문, h1, h2 및 "컨테이너" 식별자가 있는 블록과 같은 주요 요소에 대한 스타일을 추가해 보겠습니다. "컨테이너" 블록의 경우 브라우저 창의 크기에 따라 변경되도록 너비를 백분율로 지정합니다.
X축을 따라 360도 회전할 수 있는 h1 태그에 CSS3 변환을 적용해 보겠습니다. 이 속성에 대한 자세한 내용을 읽을 수 있습니다.
본문(색상: #dadada; 행 높이: 1.75; 너비: 100%; 배경: url(../ img / background.jpg) 중심; 글꼴 패밀리: "Open Sans";) h1, h2(색상: # fff; 라인 높이: 1.16667; 텍스트 정렬: 센터; 텍스트 변환: 대문자; 텍스트 그림자: 2px 2px 2px rgba(150,150,150,1);) h1(글꼴 크기: 43px; 글꼴 패밀리: 몬세라트, 글꼴 -weight: 700, 테두리: 2px 대시 #fff, margin-top: 50px, 패딩: 10px, 커서: 포인터, -webkit-transition: 모든 .8s 용이성, -moz-transition: 모든 .8s 용이성, -o-transition : 모든 .8s 용이함, 전환: 모든 .8s 용이함;) h1: hover(-webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg), -o -transform: rotateX(360deg); transform: rotateX(360deg);) h2(글꼴 크기: 30px, 글꼴 무게: 300, margin-top: 30px;) .container(너비: 58%, 여백: 40px 자동 0 ;).세부 정보(여백 상단: 30px, 색상: #fff, 텍스트 정렬: 가운데, 텍스트 그림자: 2px 2px 2px rgba(150,150,150,1);)
버튼, 입력, 텍스트 영역(글꼴 크기: 16px, 최대 너비: 100%, 여백: 0, 테두리 반경: 0, 세로 정렬: 기준선, -webkit-box-sizing: 테두리 상자, -moz-box -sizing: border-box; box-sizing: border-box;) textarea (overflow: auto; vertical-align: top;) input, textarea (background: # 6e6e6e; background: rgba (169,169,169,0.3); border: 1px solid # f4f4f4; color: #fff; font-weight: 700; letter-spacing: 1px; padding: 12px; text-transform: 대문자;) input: focus, textarea: focus (outline: 0;) button: hover, button : focus, input: focus, input: hover (background: # ff8721; color: #fff; outline: 0;) 버튼, input (-webkit-appearance: button; cursor: pointer;) 버튼, input (background: # ffab00 ; -webkit-transition: 모든 .5s; -moz-transition: 모든 .5s; 전환: 모든 .5s;) .form-field(위치: 상대;)
다음 단계는 텍스트 필드에 대한 브라우저 간 스타일을 만드는 것입니다.
:: - webkit-input-placeholder (색상: #fff;) :: - moz-placeholder (색상: #fff; 불투명도: 1;) :: - ms-input-placeholder (색상: #fff; 불투명도: 1; ) .자리 표시자(색상: #ff;)
이제 스피너의 스타일을 지정해 보겠습니다. html 문서에서 식별자가 "counter"인 div에 있음을 상기시켜 드리겠습니다.
#counter (margin-top: 28px;) .countdown_section (color: #dadada, display: inline-block, font-size: 12px, text-align: center, width: 25%, letter-spacing: 1px, border-left : 1px 파선 #dadada; border-color: rgba (218,218,218,0.8); 패딩: 42px 12px 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border -box, text-shadow: 2px 2px 2px rgba (150,150,150,1), text-transform: 대문자;) .countdown_section: first-child (border-left: 0;) .countdown_amount (color: #fff, display: block; font-family: "Open Sans", 글꼴 크기: 60px, 글꼴 두께: 700, 문자 간격: 일반, 줄 높이: 1;)
이제 연락처 양식에 몇 가지 스타일을 추가해 보겠습니다. 양식의 최대 너비는 610px이며 이 양식의 상대 위치를 설정합니다(위치: 상대). 텍스트 블록의 오른쪽에 메시지를 보내는 버튼을 놓고 절대 위치(position:절대값)를 설정해 봅시다.
#subscribe (최대 너비: 610px; 위치: 상대; 여백: 20px auto 0;) # subscribe-form .form-field (margin-right: 180px;) #subcribe_email (border-right: 0;) # subscribe-form .form-submit (높이: 50px; 위치: 절대; 오른쪽: 0; 상단: 0; 너비: 180px;) # subcribe_email, # subscribe_submit (폭: 100%; 디스플레이: 블록; 높이: 55px;)
마지막으로 바닥글 블록의 요소에 대한 속성을 추가합니다.
바닥글(글꼴 크기: 13px, 텍스트 정렬: 가운데, 여백 위쪽: 25픽셀, 텍스트 변환: 대문자, 텍스트 그림자: 2px 2px 2px rgba(150,150,150,1);) 바닥글 a(색상: #fff;)
페이지를 반응형으로 만들기 위해 미디어 쿼리를 추가해 보겠습니다. 이 속성에 대한 자세한 내용을 읽을 수 있습니다.
@미디어 전용 화면 및 (최대 너비: 720px) (바닥글(여백 하단: 40px;)) @미디어 전용 화면 및 (최대 너비: 680px) (.countdown_amount(글꼴 크기: 48px;)) @미디어 전용 screen and (max-width: 540px) (.one-half (width: 100%;) .countdown_section (padding: 28px 6px 20px;) #subcribe_email (border: 1px solid #fff;) # subscribe-form .form-submit (margin: 0 auto; right: auto; position: static;) # subscribe-form .form-field (margin: 0 0 14px;)) @media only screen and (max-width: 480px) (h1 (글꼴 크기) : 30px;) h2 (글꼴 크기: 25px;) .countdown_section (테두리: 없음; 패딩: 20px 20px; 글꼴 크기: 13px; 텍스트 정렬: 센터;) .countdown_amount (글꼴 크기: 40px; 패딩: 0 0 10px 0;) #counter (width: 30%; margin: 0 auto;)) @media only screen and (max-width: 360px) (h2 (font-size: 22px;) .countdown_section (padding: 21px 26px 21px) 15px;) .countdown_amount (글꼴 크기: 36px;))
브라우저에서 페이지 표시를 확인하면 다음과 같아야 합니다.
제이쿼리
카운터가 표시되지 않습니다. 표시되도록 하려면 닫는 본문 태그 앞에 다음 코드를 추가해야 합니다. 그러나 그 전에 파일 경로를 지정하여 플러그인 파일을 다운로드하십시오.
그런 다음 다음 코드를 추가하여 카운터를 표시합니다. 카운터에서 원하는 날짜를 변경할 수 있습니다. "launchdate" 매개변수 안에 원하는 날짜를 지정하는 것으로 충분합니다.
$(문서) .ready(함수()(var launchdate = new Date(2014, 6 - 1, 7); $("# 카운터").countdown((until: launchdate));))(jQuery);
결론
축하합니다! 멋진 카운트다운 타이머 페이지를 만들었습니다. 이 페이지방문자에게 사이트 시작 날짜를 알리고 잃지 않도록 할 수 있습니다.
당신이 좋아했기를 바랍니다 이 수업... 귀하의 의견과 질문을 남겨주세요. 항상 기꺼이 답변해 드리겠습니다.
사이트를 다시 디자인하거나 유지 관리 작업을 수행하거나 새 웹 리소스를 시작하려는 경우 방문자가 빈 페이지로 인사를 받지 않도록 하는 것이 매우 중요합니다. 사이트를 방문하는 사람들은 무슨 일이 일어나고 있는지 수수께끼에 빠질 것입니다. 이는 그다지 좋지 않습니다. 사용자를 돌보고 전용 HTML 페이지를 사용하여 사이트의 임박한 개설 또는 재개에 대해 알리는 것이 가장 좋습니다. 일반적으로 이러한 페이지를 "스텁"이라고 합니다. 그 중요성은 과대평가될 수 없습니다. 특히 귀하의 사이트에 대해 이야기하고 조금 홍보하려는 경우 더욱 그렇습니다. 스텁에는 두 가지 유형이 있습니다. 필요한 정보, 또는 호기심을 불러일으키고 방문자가 알림을 구독하도록 하는 페이지. FreelanceToday는 귀하의 웹사이트를 위한 매력적인 스텁을 만들기 위한 10가지 무료 HTML 템플릿을 제공합니다.
Heartbeat는 심플하고 세련된 HTML 템플릿입니다. 선명한 흑백 배경 이미지와 카운트다운 타이머는 이 스텁을 비즈니스 웹사이트에 이상적입니다.
Moon 템플릿은 웹사이트 PR에 적합합니다. 페이지에 여러 지점을 배치할 수 있습니다. 중요한 정보그리고 카운트다운 타이머. 페이지는 반응형이며 HTML5 및 CSS3를 사용하여 구축되었으며 대부분의 브라우저에서 렌더링되며 모바일 기기.
Layla는 세련된 스텁을 만들기 위한 최고의 무료 HTML 템플릿 중 하나입니다. 멋진 배색, 정확한 메쉬 및 우아함 모습이 템플릿을 패션 웹사이트에서 사용하기에 적합하도록 만드십시오.
강력한 스텁을 만들기 위한 훌륭한 크로스 브라우저 템플릿입니다. 사용자 정의가 쉽고 모바일 장치에 잘 표시됩니다. 카운트 다운 타이머와 멜로디를 연결하는 기능이 있습니다.
깔끔하고 모던한 디자인의 템플릿입니다. 전문가로부터: 적응형 디자인, 문의 양식, 브라우저 간 호환성. 템플릿은 리소스를 사용하여 생성되었으며 모든 이미지가 포함됩니다.
여행 사이트에 대한 나쁜 자리 표시자가 아닙니다. 템플릿 기능: 8 색 구성표, W3C HTML/CSS 유효성 검사, 카운트다운, 문의 양식 및 알림 구독, 시차 배경 효과, 탐색 모음.
심각한 기능을 가진 스텁. 템플릿은 사용자 정의가 가능하며 대부분의 브라우저와 호환됩니다. 장점: 구글지도, 카운트다운 타이머, 팀에 대한 정보를 게시할 수 있는 섹션, 연락처 정보가 있는 바닥글.
UX 템플릿은 대부분의 사이트에서 작동합니다. 플러그에는 애니메이션 타이머, 문의 양식, 아이콘이 있습니다. 소셜 네트워크... 템플릿은 사용자 정의가 가능하며 HTML/CSS에 대한 특별한 지식이 필요하지 않습니다. 템플릿은 반응형이며 크로스 브라우저입니다.
스타일리시함과 기능성을 동시에. 기능: 100% 반응형 디자인, 브라우저 간 호환성, 구글지도, Twitter 통합, 시차 효과 및 슬라이더가 있는 두 가지 헤더 스타일. 사이트의 시작 날짜를 빠르게 수정할 수 있는 카운트다운 타이머도 있습니다.
이 우아한 HTML 템플릿은 다양한 주제의 웹사이트에 적합합니다. 플러그에는 특별한 종소리와 휘파람이 없지만 필요한 모든 것이 있습니다. 타이머, 중앙 텍스트 블록 정보 메시지, 소셜 네트워킹 아이콘입니다. 템플릿은 반응형이며 모바일 장치에서 아름답게 렌더링됩니다.
웹 페이지를 직접 스크롤하여 가장 인기 있는 페이지를 엽니다. 빠르고 안정적인 인터넷 연결을 통해 모든 웹사이트를 즉시 열 수 있습니다. 그리고 갑자기 당신은 그와 부딪칩니다. 삭제가 필요한 기술적인 이유로 열리지 않는 사이트. 짜증나죠? 방문자/사용자 - 물론입니다. 그리고 이 웹사이트의 소유자에게는 상황이 훨씬 더 복잡합니다. 어떤 문제를 일으킬 수 있습니다. 가입자를 잃을 수 있으며 물론 리소스의 수익성이 감소할 수 있습니다. 이러한 사고는 피할 수 없고 예방하는 것도 불가능합니다. 그러나 방문자와 구독자가 사이트 복구 진행 상황에 대한 정보에 지속적으로 액세스할 수 있도록 웹 페이지 소유자가 취할 수 있는 몇 가지 사항이 있습니다.
시작 및 재건 중인 웹 사이트 템플릿은 기술적인 문제와 긴 복원 작업에도 불구하고 방문자와 구독자를 사이트에 유지하는 데 도움이 되는 매우 유용한 기능입니다. 또한 진정으로 독창적이거나 대담한 디자인 솔루션은 방문자의 인내심을 연장시킬 수도 있습니다.
오늘날 우리는 웹사이트 소유자와 디자이너에게 웹사이트 충돌 및 기타 잠재적인 중단을 방지할 수 있도록 시작 및 리노베이션을 위해 마감된 50가지 깔끔한 페이지 템플릿을 제공합니다. 위의 모든 템플릿 유급의, 그러나 그들은 매우 저렴합니다. 이 훌륭한 목록을 자유롭게 탐색하고 실제 샘플을 사용해 보십시오.
특징:
선택할 수 있는 6가지 색상 옵션
뉴스레터 구독 양식
jQuery 양식 레이블
형식이 잘 지정된 PSD 파일로 간편하게 편집할 수 있습니다.
특징:
선택할 수 있는 두 가지 색상 구성표
jQuery 시작 시간 카운터
FeedBurner 서비스를 통해 이메일 뉴스레터 구독
소셜 네트워크 연결
특징:
4가지 색상 옵션
확인 필드와 PHP가 있는 구독 양식
백분율로 표시하여 준비 정도를 애니메이션으로 표시
유효한 XHTML + CSS3 마크업
특징:
AJAX 이메일 구독 양식
6가지 색상 옵션
프레임 기반 모듈식 그리드 960 그리드 시스템
임시 버전 1.0 표준에 대한 XHTML 유효성 검사 통과
특징:
적응하기 쉬운 시작 시간 카운터
트위터 피드 연결
세 가지 색상 옵션
특징:
애니메이션 jQuery 시간 카운터 + 준비 점수판
준비 정도에 대한 텍스트 도움말 자동 표시(%)
구독자 데이터가 포함된 요약 텍스트 파일(DATABASE NOT NEEDED)
완전한 기능의 AJAX 피드백 양식 + 검증
특징:
호환되는 브라우저: FireFox 2, FireFox 3, IE6, IE7, IE8, Opera, Safari
고정 마크업
포함 파일: CSS 파일, HTML 파일, JPG 이미지, JS 파일, PSD(계층화), PHP 파일
PSD 파일 포함
특징:
스크롤 영역 구성 제이쿼리, 필요한 경우 큰 텍스트 배열을 추가하려면
편리한 문서 파일로 완성된 HTML 인코딩을 쉽게 편집할 수 있습니다.
PSD 파일 포함
프로젝트 진행 상황을 보여주는 깔끔한 애니메이션 슬라이더(예: 50% 완료)
특징:
고품질 XHTML 및 CSS 인코딩, IE6 및 7용으로 수정되어 모든 기능을 유지합니다. 최신 브라우저
3가지 색 구성표 - 회색/파랑/빨강
Ajax 양식 "이메일로 업데이트"
완전한 PDF 문서 및 지침 세트
특징:
안정적인 HTML 인코딩
포함된 파일: CSS 파일, HTML 파일, JS 파일, PSD(계층화), PHP 파일
PSD 파일 포함
특징:
테이블이 없는 CSS 레이아웃
브라우저 간 호환성 및 시각적 매력
속도와 설치 용이성
Ajax 기반 자동 응답기
특징:
6가지 색상 구성(클로브, 매트 블루, 옅은 녹색, 딥 오렌지, 퍼플 및 드라이 풀)
자세한 Photoshop 문서 계층화
웹 사이트 시작 전 시간의 범용 카운터
Twitter에 연결하여 최신 메모 보내기
특징:
주요 브라우저 지원: Firefox, IE6, 7, 8, Safari 3, 4, Chrome, Opera 9, 10
1.0 / CSS 임시 표준에 따른 고품질 XHTML 마크업
사용하기 쉬운 0~100% 값과 10% 눈금이 있는 원형 차트. 완전히 계층화된 PSD 파일이 포함되어 있습니다.
(무료 글꼴을 다운로드할 수 있는 링크는 설명서에 있습니다)
특징:
HTML 5 + CSS3
모든 기능을 갖춘 AJAX 이메일 가입 양식 - MySql 기반 데이터베이스가 필요하지 않음
CUFON 방식으로 글꼴 변경하기
다양한 인정 프로그램 모바일 브라우저선택에
특징:
호환되는 브라우저: FireFox 2, FireFox 3, IE6, IE7, IE8, Safari
디자인의 명확성
PSD 파일 포함
고정 마크업
특징:
계층화 된 PSD 파일
호환되는 브라우저: 크롬 4, 크롬 5, 파이어폭스 2, 파이어폭스 3, IE6, IE7, IE8, 오페라, 사파리
포함 파일: CSS 파일, HTML 파일, JPG 이미지, JS 파일, PNG(레이어별), PSD(레이어별), PHP 파일
PSD 파일 포함
특징:
고품질 XHTML 및 CSS 마크업, 확인정확성 및 W3C 검증 ...
jQuery 카운터
이메일 전송을 위한 내장 PHP 메일러
무료 Cufon 글꼴
특징:
7가지 색상 옵션: 파란색, 녹색, 노란색, 빨간색, 보라색, 회색, 무지개 빛깔의
jQuery 카운터(부드러운 전환 포함)
AJAX / PHP 문의 양식
뛰어난 내장 Twitter 게시 메커니즘
특징:
완전한 기능의 유효한 PHP/Ajax 문의 양식
4가지 색상 옵션
시작까지 남은 일, 시간, 분 및 초를 표시합니다.
특징:
XHTML 1.0 중간 버전
준비 정도의 척도 점수판
카운터 타이머
레이어드 PSD 파일 포함
특징:
자바스크립트 애니메이션이 포함된 준비 점수판
업데이트를 받기 위해 게시하기 위한 Ajax 양식(쉽게 제거할 수 있음)
템플릿은 XHTML 표준 버전 1.0에 따라 엄격하게 인증됩니다.
리소스 시작 날짜 표시
특징:
사용자 정의 가능한 jQuery 카운터 및 준비 상태 점수판
소셜 네트워크에 연결
데이터베이스에 이메일 주소 저장 MySQL 데이터그리고 XML 파일에서
제목 표시줄 및 콘텐츠 상자 사용자 지정
특징:
좋은 문서 패키지가 포함되어 있습니다.
PSD 파일 포함
애니메이션이 있는 카운터 프로그램
자신의 글꼴을 무료로 사용할 수 있습니다.
특징:
jQuery로 구동
뉴스레터 발송 신청 접수의 현재 기능
PHP/MySQL 파일 포함
원활한 전환으로 페이지 변경(홈페이지, "회사 소개", "피드백")
특징:
유효한 XHTML/CSS 템플릿
jQuery 카운터 빌드 소프트웨어로
모던하고 깔끔한 디자인
장 최신 업데이트대지
특징:
확인 필드가 있는 완전한 기능을 갖춘 PHP/Ajax 문의 양식 - 이메일 주소만 입력하면 됩니다!
개별 디자인 카운터
준비 정도의 이동식 눈금판
간편한 사용자 정의를 위해 Photoshop 파일을 빠르게 편집
특징:
입체감을 모방한 독특하고 현대적인 외관
확인 필드가 있는 양식을 통해 이메일로 업데이트를 보내기 위한 PHP/Ajax 요청을 수락하는 현재 기능
Photoshop 레이어 PSD 파일
고품질 XHTML 및 CSS 마크업
특징:
소셜 미디어 아이콘
표시된 최신 메모와 Twitter 연결
브라우저 간 HTML 마크업
레이어드 PSD 파일
특징:
Ajax 피드백 및 등록 양식
두 Ajax Forms 모두 개별적으로 $6의 비용이 드는 인기 있는 iPhorms입니다! 무료로 유효한 HTML 5 마크업이 포함되어 있습니다.
모든 주요 브라우저와 호환
UTF-8 텍스트의 다국어 서식 가능성
특징:
유효한 XHTML 및 CSS 마크업
스타일이 지정된 jQuery 카운터
Ajax/PHP 이메일 구독 양식(페이지를 다시 열지 않음)
IE6의 PNG 파일용 jQuery 해결사
특징:
모든 주요 브라우저 지원: Firefox, IE6/7/8, Safari 3/4, Chrome, Opera 9/10
스테이징 버전 1.0의 유효한 XHTML 마크업
CUFON 방식으로 글꼴 변경하기
테마에 소셜 미디어 아이콘을 결합하는 기능
특징:
유효한 AJAX 문의 양식
시뮬레이션하는 창에서 그림 시연 맥북 프로또는 아이맥
Macbook Pro 및 iMac 레이어별 - http://images.naldzgraphics.net/2011/01 - PSD 파일에 포함
적응하기 쉬운 카운터 타이머 - 어둡고 밝은 버전
특징:
정적 버전 및 플래시 버전
유효한 XHTML 마크업
간단한 카운터 프로그램
호환되는 브라우저: Chrome 4, Chrome 5, FireFox 2, FireFox 3, IE7, IE8, Opera, Safari
특징:
모든 기능을 갖춘 AJAX(jQuery) 뉴스레터 가입 양식
jQuery 카운터/타이머 및 준비 점수판
IE6용 PNG 파일 교정기
유효한(엄격히 4.01) 브라우저 간 HTML 및 CSS 마크업
특징:
모든 날짜로 설정된 jQuery 카운터
PHP/AJAX 양식 포함
소셜 미디어 아이콘의 jQuery 애니메이션
4가지 색상 옵션
특징:
HTML 및 WordPress 버전
WordPress 및 HTML 버전 모두에 대한 자세한 지원 문서
뉴스레터 구독 양식
적응하기 쉬운 레이어 레이블이 붙은 PSD 파일
특징:
적응하기 쉬운 jQuery 카운터/타이머
설명이 포함된 아름다운 텍스트 상자로 준비도를 표시하는 초박형 스케일 스코어보드
소셜 미디어 아이콘 세트가 포함되어 있습니다.
능숙하게 조립된 PSD 파일
JQuery 프로그래밍 카운터
특징:
고정 레이아웃 900픽셀
작업 문의 양식
호환되는 브라우저: 크롬 4, 크롬 5, 파이어폭스 2, 파이어폭스 3, IE7, IE8, 오페라
포함된 파일: CSS, HTML, JPG, JS, 레이어별로 정렬된 PSD, PHP
특징:
완성된 코드(HTML, CSS, jQUERY, PHP, AJAX)
완전히 작동하는 ajax 문의 양식
검은색과 밝은 배경에 최적화된 고유한 아이콘
작동하는 jQuery 카운트다운
특징:
제이쿼리 카운터
jQuery 콘텐츠 슬라이더
내장 작업 문의 양식
경량 HTML 버전
특징:
jQuery로 확장하기
카운트다운 플러그인
소셜 아이콘그리고 팁
PSD에서 레이어 분리
이 기사에서는 방법에 대한 정보를 찾을 수 있습니다. 모든 트래픽과 모든 사이트 방문자를 유지 관리 정보 페이지로 리디렉션사이트 업데이트 당시.
나는 당신에게 방법을 보여줄 것입니다 수행 중인 작업에 대한 정보가 포함된 스텁 페이지 만들기, 어떻게 사이트를 유지 관리 모드로 전환그리고 그것을 온라인으로 되돌리는 방법 아파치를 다시 시작하지 않고.
당신은 방법을 배울 것입니다 Apache 가상 호스트 트래픽을 스텁 페이지로 리디렉션구성으로 사용 가상호스트그리고 .HT액세스파일.
자리 표시자 페이지 만들기
먼저 사이트 루트(문서 루트)에 2개의 파일을 생성해야 합니다.
페이지 만들기 유지 보수.html, 방문자가 리디렉션되고 다음을 알립니다. 사이트 유지 보수 중.
예를 들어 다음 HTML 코드를 사용할 수 있습니다. 스텁 페이지(데모):
유지 보수를 위해 폐쇄된 사이트
이용에 불편을 드려 죄송합니다. 현재 사이트 점검이 진행 중입니다.
곧 온라인으로 돌아갑니다!
사이트 루트(문서 루트)에서 생성 빈 파일이름이 있는 유지 보수.
우리는 그것을 사용할 것입니다 Apache를 다시 시작하지 않고 스텁 활성화 및 비활성화.
파일을 찾았을 때 Apache를 구성할 것입니다. 유지 보수사이트의 루트에서 모드가 켜집니다. 유지모든 사이트 방문자는 스텁 페이지로 리디렉션됩니다. 그렇지 않으면(파일 유지 보수누락) 사이트가 정상적으로 작동합니다.
따라서 필요한 경우 서비스 기간 동안 사이트 리디렉션 활성화, 우리는 빈 파일을 만듭니다 유지 보수.
그리고 필요할 때 서비스 후 사이트를 온라인으로 반환, 우리는 단순히 파일을 삭제합니다 유지 보수.
Apache Vhost를 스텁 페이지로 리디렉션
Vhost 구성에 다음 규칙을 추가합니다( 아파치 가상호스트) 을위한 모든 사이트 방문자를 스텁 페이지로 리디렉션:
RewriteEngine On RewriteCond%(REMOTE_ADDR)! ^ 123 \ .456 \ .789 \ .000 RewriteCond%(DOCUMENT_ROOT) /maintenance.html -f RewriteCond%(DOCUMENT_ROOT) /maintenance.enable maintenance.html Rewrite_FILERNAME ^ !html 다시 쓰기 $ /Maintenance.html ErrorDocument 503 /maintenance.html 헤더 세트 캐시 제어 "최대 연령 = 0, 저장 없음"
변경 사항을 적용하려면 Apache를 다시 시작합니다.
# apachectl 우아한
이제 파일을 사용하여 사이트 유지 관리 모드를 켜고 끌 수 있습니다. 유지 보수매번 Apache를 다시 시작하지 않고.
HTAccess를 사용하여 스텁 페이지로 리디렉션
을위한 모든 방문자를 스텁 페이지로 리디렉션, 다음 코드를 .ht액세스사이트 루트에 있는 파일:
이 청크는 다른 모든 리디렉션 및 상태보다 먼저 삽입되어야 합니다.
설명
1. 다시 쓰기 엔진을 켭니다.
다시 쓰기 엔진 켜기
2. (선택 사항) IP 주소를 제외합니다. 이 지시문을 사용하여 지정된 IP 주소에서 maintenance.html로 트래픽을 리디렉션하지 않도록 합니다.
RewriteCond%(REMOTE_ADDR)! ^ 123 \ .456 \ .789 \ .000
여러 IP 주소를 지정할 수 있습니다.
RewriteCond% (REMOTE_ADDR)! ^ 192 \ .168 \ .0 \ .1 RewriteCond% (REMOTE_ADDR)! ^ 192 \ .168 \ .1 \ .100 RewriteCond% (REMOTE_ADDR)! ^ \ 172 \ .16 \ .10 15
3. maintenance.html이 존재하는지 확인하십시오.
RewriteCond% (DOCUMENT_ROOT) /maintenance.html -f
4. maintenance.enable 파일의 존재를 확인합니다(이 확인을 통해 유지 관리 모드를 활성화 및 비활성화합니다).
RewriteCond%(DOCUMENT_ROOT) /maintenance.enable -f
5. 루핑을 방지하기 위해 이 규칙이 필요합니다.
RewriteCond%(SCRIPT_FILENAME)! Maintenance.html
6. 실제로 503번째는 스텁 페이지로 자신을 리디렉션합니다.
RewriteRule ^. * $ /Maintenance.html ErrorDocument 503 /maintenance.html
503 서비스 이용 불가- HTTP 상태 코드, 이는 서버가 일시적으로 기술적인 이유로 요청을 처리할 수 없음을 의미합니다(유지보수, 과부하 등).
7. 캐싱을 끕니다.
헤더 세트 Cache-Control "max-age = 0, no-store"
