이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오.-CSS 튜토리얼-php.cn

1. 제목과 헤더 편집 okno는 많은 HTML 디자인 코드를 제공하지만이 튜토리얼에서 index-onepage-page-personal.html

파일에서 작업하고 있습니다. 초보자가 작업 할 수있는 간단한 웹 사이트 디자인 코드 템플릿입니다. 이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오. Zip 폴더를 추출한 후 숭고한 텍스트와 브라우저로 열립니다. Sublime Text는 웹 사이트 디자인을위한 샘플 HTML 코드를 편집 할 수 있으며 브라우저를 사용하면 실시간 변경 사항을 볼 수 있습니다. > html 디자인 코드 의이 줄을 찾아 편집합니다. 상단 라인은 어두운 배경에 대한 가벼운 로고를위한 것입니다. 결론은 가벼운 배경에 대한 어두운 로고를위한 것입니다. 이는 img 폴더 내부에있는 img 폴더에 로고의 사본을 배치하는 페이지에서 브랜딩이 표시되는지 확인하기위한 것입니다. 웹 사이트 디자인 코드에서 파일 이름을 변경하십시오 ( logo-light.png.png 및 ) 로고의 파일 이름과 일치하려면 로고는 <br> <a class="logo-wrapper" href="index.html"><br> <img class="logo logo-light lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-light.png" alt="이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오."><br> <img class="logo logo-dark lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-dark.png" alt="이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오."><br> </a><br> 주석 아래에있는

태그가있는 PNG 파일 형식에 있어야합니다. 여기서 무엇을 변경할 수 있습니까? 배경 이미지와 아바타를 교체 할 수 있습니다. 또한 이름, 직무 제목, 전문 지식 영역 및 기타 정보를 추가 할 수 있습니다.

이미지를 변경하여 시작하겠습니다. 소스 속성을 통해 컨테이너 v-center

img 태그 자체 내의 img 태그에서 배경 사진을 편집 할 수 있습니다. SRC 속성 배경 사진의 속성은 이미지를 어디에서 찾을 수 있는지 알 수 있습니다. 파인더 또는 파일 탐색기에서 자산으로 가십시오. img & gt; 사진 이미지 파일을 직접 찾으려면 간단한 웹 사이트 HTML 코드에서 배경 이미지를 변경하려면 원본 파일의 정확한 크기로 대체품 JPG를 준비하십시오. 사진에 간단한 이름을주고 사진 col-md-9 섹션 / home

주석 내에서 h1

태그에서 이름을 변경하십시오. 그것들은 자산/cv/cv-file.extension 속성 내의 각 dt 태그 내의 dd

태그에 의해 정의됩니다. CV를 다운로드 할 수 있도록 href 이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오.

속성을 추가하십시오. 웹 사이트 디자인을위한 샘플 HTML 코드의 라인은 다음과 같습니다.

이 웹 디자인 프로젝트의 HTML 코드를 저장하고 브라우저에서 테스트하십시오. 지금은 버튼에서 파일 만 열 수 있습니다. 그러나 웹 사이트가 실시되면 방문자는 이력서를 다운로드 할 수 있습니다.

3. 서비스 섹션

웹 사이트 디자인을위한 샘플 HTML 코드에 제공하는 서비스를 추가하겠습니다. 이 섹션의 이름 또는 다른 섹션의 이름을 변경 한 경우 1 단계에서 나머지 튜토리얼을 따라갈 수 있습니다. h5
태그를 변경하십시오. 이것은 당신이 제공하는 모든 서비스 일 수 있습니다. 다음 줄에서 i 태그로 서비스에 대한 간단한 설명을 제공하십시오. 이 예에서는 div 아래에 Strong 태그를 사용합니다. aria-valuenow 속성과 div 내에서. 첫 번째 줄을 사용하면 날짜를 편집 할 수 있으며 다음 줄은 교육 또는 업무 경험의 제목이며 최종 줄은 위치입니다. NASA에서 3 개월간 로켓 과학 과정을 공유하고 싶다면 코드를 다음과 같이 보이게하겠습니다. 다른 두 클래스 섹션 / 평가 댓글에 대해이 단계를 반복 할 수 있습니다. 이 인용문에는 우리가 그대로 떠날 특별한 형식이 있습니다. 우리가해야 할 일은 강한 태그로 찾은 텍스트를 편집하여 간증의 일부를 대담한 텍스트로 돋보이게하도록합니다. 증언을하는 사람의 헤드 샷이 있으면
주석에 추가하십시오. 친숙한 코드로 사진을 변경할 수 있습니다. 이 라인을 읽으면
<br> <a class="logo-wrapper" href="index.html"><br> <img class="logo logo-light lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-light.png" alt="이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오."><br> <img class="logo logo-dark lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-dark.png" alt="이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오."><br> </a><br>
로그인 후 복사
로그인 후 복사
img works 폴더 내에 사진이 필요하다는 것을 알 수 있습니다. 또한 웹 사이트에서 사용할 사진을 알 수 있도록 파일 이름을 변경해야합니다. 이러한 변경을하고 저장하겠습니다. 브라우저를 새로 고침하여 사진을 볼 수 있습니다.

사진 위에 호버링하면 특별한 효과가 있음을 알 수 있습니다. 사진에 표시된 프로젝트에 대한 간단한 설명을 남길 수있는 것처럼 보입니다. 이 HTML 웹 페이지 템플릿을 최대한 활용하고 간단한 설명을 추가해 봅시다.

프로젝트가 포함 된 웹 페이지에 대한 링크와 함께 href 속성 아래에서 태그로 백 트랙을 백 트랙하십시오. Google에 연결하여 이것이 어떻게 작동하는지 확인하십시오. 이 섹션에서는 최대 6 개의 프로젝트를 공유 할 수 있습니다. 공유하려는 각 작품에 대해 위의 단계를 따르십시오. 문의 섹션 이제이 웹 디자인 프로젝트의 HTML 코드에서 연락처 정보를 설정할 시간입니다. 이것은 웹 디자인 코드에서 쉽게 수행 할 수있는 단계입니다. 섹션 / 컨텐츠 주석에 헤드 샷을 추가하여 시작합니다. 이것은이 웹 디자인 코드 자습서의 두 번째 단계에서 우리가 이야기 한 것과 동일한 프로세스를 따릅니다. 섹션 / 내용 주석 내에서 주소, 전화 번호 및 이메일 주소를 추가합니다. 자리 표시 자의 내용의 내용을 편집하여 공유하는 연락처 정보 유형을 자유롭게 변경하십시오. 아직 아님! PHP 파일을 매우 빠르게 편집해야합니다. Finder 또는 File Explorer에서

자산으로 이동 & gt; OKNO 폴더 내에서 php . 그런 다음 Sublime Text에서 contact-form.php 파일을 열면 다음 코드 라인이 표시됩니다.

    	<!-- Logo --><br>		<a class="logo-wrapper" href="index.html"><br>			<img class="logo logo-light lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-light.png" alt="이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오."><br>			<img class="logo logo-dark lazy" src="/static/imghw/default1.png" data-src="assets/img/logo-dark.png" alt="이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오."><br>		</a><br>

로그인 후 복사

자신의 이메일 주소로 예제 이메일을 바꾸고 웹 디자인 코드 파일을 저장합니다. 이제 방문자가 연락처 양식을 작성하면 그들이 말한 내용을 알려주는 이메일을 받게됩니다. 바닥 글

편집 웹 사이트를 코딩하는 마지막 단계입니다. 이 일 페이지 웹 사이트의 바닥 글에는 이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오. 웹 템플릿 제작자와 3 개의 링크에 대한 저작권 크레딧이 있습니다. 바닥 글을 완전히 제거하거나 일부 요소를 제거하거나 링크를 편집 할 수 있습니다. 링크를 편집하려면 그 방법을 안내해 보겠습니다. href 속성 아래에서 # 기호를 공유하려는 웹 사이트 링크로 바꾸십시오. 이 변경을 통해 방문자는 가입 를 클릭하여 해당 웹 사이트로 이동할 수 있습니다. 이 텍스트를 원하는 것으로 변경할 수 있습니다. 다음 두 목록 항목에 대해이 프로세스를 반복하십시오. 우리는 완료되었습니다!

축하합니다. 웹 템플릿으로 웹 사이트를 코딩하는 단계를 성공적으로 따랐습니다! 이 프로세스를 사용하면 자신이나 고객을위한 사이트를 작성하는 경우 많은 시간을 절약 할 수 있습니다. 보시다시피 웹 사이트를 구축하는 가장 쉬운 방법 중 하나입니다. 멋진 HTML 웹 페이지 템플릿을 찾으십시오. Envato 요소에서

이 튜토리얼에서 사용한 웹 템플릿이 마음에 들면 Envato 요소에서 더 많은 다양성을 찾을 수 있습니다. 당신을위한 많은 현대적인 선택이 있으며, 당신은 그것들을 이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오.만큼 쉽게 편집 할 수 있습니다. 다음은 Envato 요소에서 찾을 수있는 몇 가지 옵션입니다. ASTER : Creative Portfolio & Agency HTML Template

    					<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div><br>

로그인 후 복사

웹 디자인 코딩을 너무 많이 모르는 경우 Aster를 사용하면 여전히 멋진 웹 사이트를 만들 수 있습니다. 이 HTML 템플릿은 웹 디자인 코딩의 훌륭한 예입니다. 디지털 포트폴리오 및 크리에이티브 에이전시를 위해 만들어졌습니다. 선택할 수있는 홈페이지 샘플은 5 개 이상 있으며 17 개가 넘는 내부 페이지가 있습니다. 코드는 깨끗하고 댓글을 달아 Aster를 웹 사이트를 코딩하는 가장 쉬운 방법 중 하나입니다.

2. AppStorm : 앱 시작 템플릿

웹 디자인 코딩 학습? 기술 시작을위한 완벽한 HTML 웹 페이지 템플릿은 다음과 같습니다. AppStorm은 홍보 소프트웨어를 염두에두고 설계되었습니다. 레이아웃은 엄청나게 현대적이고 기능적이며 모바일 용으로 만들어졌습니다. 완벽한 모양을 위해 세 가지 홈페이지 디자인 및 사용자 정의 옵션 중에서 선택하십시오. AppStorm은 새로운 앱 또는 SaaS 제품을위한 웹 사이트를 코딩하는 가장 쉬운 방법입니다. Jadusona : Ecommerce Baby Shop Bootstrap4 Template

Jadusona는 최소하고 사용하기 쉬운 전자 상거래 웹 사이트입니다. 아기와 어린이 제품을 과시하는 데 사용할 다양한 페이지 데모가 있습니다. Jadusona의 기능 덕분에 다음과 같은 Jadusona의 기능 덕분에 다음과 같은 Jadusona의 기능 덕분에 다음과 같은 완전 반응 형 디자인 이해하기 쉬운 9 단계로 첫 번째 웹 사이트를 디자인하고 코딩하십시오.

클린 코드

포함 Google Fonts 포함

ajax 연락 양식
초보자를위한 웹 디자인 검사를 찾고 있다면 Jadusona를 사용해보십시오. 웹 사이트를 시작하기위한 좋은 웹 디자인 코딩 예입니다. Erika : 포트폴리오, 이력서 및 이력서 html 템플릿
물리적 이력서를 보완하거나 Erika로 이력서를 보완합니다. 이 온라인 방문 페이지는 방문자에게 귀하와 귀하의 기술에 대한 모든 것을 알려주는 완벽한 장소입니다. Erika와 함께 서비스, 포트폴리오 등을 과시하십시오. 망막 준비, 크로스 브라우저 호환 및 반응이 좋으므로 방문자는 모든 장치에서 탐색 할 수 있습니다. 기본적으로 Erika는 개인 웹 템플릿 다운로드에서 필요한 모든 것입니다. 이 템플릿을 사용하여 웹 디자인 코딩을 시작하십시오! 5. Emily : 개인 블로그 html 템플릿

더 많은 HTML 웹 페이지 템플릿