简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

黄舟
풀어 주다： 2016-12-26 16:21:34
원래의
1672명이 탐색했습니다.

소개: Microsoft WebMatrix는 인터넷에서 웹 사이트를 생성, 사용자 정의 및 게시하는 데 사용할 수 있는 무료 도구입니다.

WebMatrix를 사용하면 웹사이트를 쉽게 만들 수 있습니다. 오픈 소스 애플리케이션(예: WordPress, Joomla, DotNetNuke 또는 Orchard)으로 시작할 수 있으며 WebMatrix가 애플리케이션을 다운로드, 설치 및 구성하는 작업을 처리합니다. 또는 빠르게 시작하는 데 도움이 되는 다양한 내장 템플릿을 사용하여 직접 코드를 작성할 수도 있습니다. 무엇을 선택하든 WebMatrix는 웹 서버, 데이터베이스 및 프레임워크를 포함하여 웹 사이트를 실행하는 데 필요한 모든 것을 제공합니다. 웹 호스트에서 사용할 것과 동일한 스택을 개발 데스크탑에서 사용하면 웹 사이트를 온라인으로 전환하는 과정이 쉽고 원활해집니다.

http://web.ms/webmatrix에서 다운로드할 수 있습니다.

이제 단 몇 시간 만에 WebMatrix, CSS, HTML, HTML5, ASP.NET, SQL, 데이터베이스 등을 사용하는 방법과 간단한 웹 애플리케이션을 작성하는 방법을 배울 수 있습니다. 내용은 다음과 같습니다.


1부에서는 WebMatrix의 기본 개념을 익히고, 설치 및 실행 방법을 배웠습니다. 이 장에서는 이를 사용하여 첫 번째 웹 사이트를 만들고 첫 번째 웹 페이지로 채웁니다.


웹사이트 만들기

"템플릿에서 웹사이트" 옵션을 선택하면 아래 대화 상자가 표시됩니다. WebMatrix의 기능은 지속적으로 개선되고 있으므로 다양한 템플릿을 볼 수 있습니다. 사용해야 할 것은 빈 사이트 템플릿입니다. 이 템플릿을 선택하고 이름을 영화로 지정합니다.

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

확인을 누르면 WebMatrix가 새로운 빈 웹사이트를 생성합니다. 그러면 이 웹사이트가 WebMatrix 편집기에 로드됩니다. 여기에서 볼 수 있습니다:


WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

더 진행하기 전에 여기에 표시된 내용을 이해하는 것이 도움이 될 것입니다. 도움이됩니다. 첫 번째 요점은 WebMatrix가 단순한 코드 편집 도구 그 이상이라는 것입니다. IIS Express라는 웹 서버를 통합합니다. 웹 서버는 인터넷의 데이터 요청을 수신하고 해당 데이터를 (일반적으로 웹 브라우저로) 전송하여 요청에 응답하는 특별한 소프트웨어입니다.

브라우저를 열고 http://www.microsoft.com과 같이 입력하면 Microsoft의 웹 서버가 호출되어 HTML, JavaScript, CSS, 이미지 등과 같은 코드가 전송됩니다. 응답하기 위해. 그런 다음 브라우저는 이를 단일 웹 페이지로 결합합니다.

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

WebMatrix에는 서버가 내장되어 있어 인터넷상의 웹서버를 사용하는 것처럼 아주 쉽게 웹사이트를 개발할 수 있습니다. 화면을 보면 웹 사이트 이름(이 경우 "영화") 아래에서 서버가 http://localhost:8946 주소에서 웹 사이트를 제공하고 있음을 알 수 있습니다. 이는 서버 호스트가 로컬임을 나타냅니다. , 즉 개발 컴퓨터에 있습니다.

WebMatrix 내에서 해당 웹 서버를 시작하고 웹 사이트를 실행할 수 있지만 지금 이렇게 하면 아직 웹 사이트에 대한 콘텐츠를 만들지 않았기 때문에 오류가 발생합니다. 다음에는 이 작업을 완료하겠습니다.

첫 번째 웹 페이지 만들기

WebMatrix를 사용하면 왼쪽에 있는 버튼을 선택하여 다양한 작업 공간 간에 전환할 수 있습니다. 이제 사이트 버튼이 선택되었으므로 작업 공간에는 웹 사이트의 세부 정보(예: 웹 사이트 URL)와 사용할 수 있는 기타 도구(예: 웹 사이트 요청 모니터링)가 표시됩니다. 이 기사를 진행하면서 각 작업 공간을 심층적으로 분석할 것이지만 지금은 파일 버튼을 눌러 작업 공간을 선택하기만 하면 됩니다.

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

이제 WebMatrix는 파일 작업 공간을 엽니다. 웹 사이트에 아직 파일이 없기 때문에 비어 있는 것처럼 보입니다. 그러나 웹 사이트에 파일을 추가할 수 있는 매우 친숙한 버튼을 제공하거나 도구 모음의 새로 만들기 버튼을 사용하여 새 파일을 만들 수 있습니다.

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.


어떤 방법을 선택하든 일반적으로 사용되는 옵션을 제공하는 파일 형식 선택 대화 상자가 표시됩니다. 웹에서 다양한 파일 형식을 선택할 수 있습니다.

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

HTML 파일 형식을 선택하고 이름을 default.html로 지정한 다음 확인을 누릅니다. WebMatrix는 이제 간단한 HTML 파일을 생성하여 엽니다.

WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.


HTML(Hypertext Markup Language) 파일은 브라우저에 웹 페이지를 그리는 방법을 알려주는 일련의 지침입니다. 일반적으로 웹페이지 자체에 대한 지침이 포함된 헤더와 웹페이지의 콘텐츠인 본문이 포함됩니다. 콘텐츠는

와 같이 꺾쇠 괄호 안에 태그 이름으로 시작하고 와 같이 이름이 뒤에 오는 꺾쇠 괄호 안에 슬래시로 끝나는 태그를 사용하여 마크업됩니다. 따라서 이러한 태그 내의 모든 내용은 브라우저에서 웹 페이지의 본문으로 처리됩니다. w3cschools.com에서 HTML과 해당 마크업에 대해 자세히 알아볼 수 있습니다.

http://w3schools.com/html/default.asp.

다음과 같이 웹페이지를 편집하세요. 

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
  
<meta charset="utf-8" />  
  
<title>My Favorite Movies</title>  
  
</head>  
  
<body>  
  
<h1>A list of my Favorite Movies</h1>  
  
<ol>  
  
<li>It&#39;s a wonderful life</li>  
  
<li>Lord of the Rings</li>  
  
<li>The Fourth World</li>  
  
<li>The Lion King</li>  
  
</ol>  
  
</body>  
  
</html>
로그인 후 복사

태그에 일부 텍스트를 입력하고 태그 코드 사이에 일부 텍스트를 추가했습니다. 이 코드는

을 제목 스타일 텍스트로 사용하고,
    을 사용하여 목록을 렌더링하고 있음을 브라우저에 알리고, 일부
  1. 항목을 사용하여 일부 목록 항목을 렌더링하고 있음을 알려줍니다.

    WebMatrix 도구 모음에 "실행" 버튼이 표시됩니다.

    WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

    선택하면 WebMatrix가 브라우저를 시작하고 로컬 서버에서 실행되는 웹사이트를 엽니다.

    WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

    많은 일이 일어나고 있습니다. 자세히 분석해 보겠습니다.

    웹 서버

    브라우저에 주소 표시줄이 보이시나요? 하드 드라이브에 있는 파일을 열지는 않지만 웹 서버를 시작하고 브라우저에 웹 서버를 가리키며 default.html 파일을 요청합니다.

    WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

    PC의 시스템 트레이를 살펴보면 웹 서버 IIS Express가 실행 중임을 나타내는 작은 아이콘이 보일 것입니다.


    WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.

    마우스 오른쪽 버튼을 클릭하면 영화 웹사이트가 실행되는 것을 볼 수 있습니다.

    WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다.


    웹페이지 제목

    이제 브라우저 탭을 살펴보세요. 웹페이지. 여기에는 "My Favorite Movies"라는 텍스트가 포함되어야 합니다. 비교를 위해 Internet Explorer, Chrome, Safari, FireFox, Opera에서 동일한 웹사이트를 실행하고 있습니다. 이 텍스트는 페이지의

    에 있는 태그에 입력한 내용이므로 브라우저에 페이지 제목임을 알려줍니다. 브라우저마다 페이지 제목을 다르게 처리합니다. <p>인터넷 익스플로러: </p> <p><img src="https://img.php.cn//upload/image/915/447/252/1482740394715536.png" title="1482740394715536.png" alt="WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다."></p> <p><strong>크롬: <br></strong></p> <p><br></p> <p> <img src="https://img.php.cn//upload/image/301/695/811/1482740408680613.jpg" title="1482740408680613.jpg" alt="WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다."></p> <p><br></p> <p><strong>사파리: <br></strong></p> <p><img src="https://img.php.cn//upload/image/860/235/698/1482740425940973.png" title="1482740425940973.png" alt="WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다."></p> <p><br></p> <p><strong>Firefox: <br></strong></p> <p><img src="https://img.php.cn//upload/image/406/268/658/1482740440654102.jpg" title="1482740440654102.jpg" alt="WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다."></p> <p><strong>오페라: <br></strong></p> <p><img src="https://img.php.cn//upload/image/882/302/483/1482740453452250.png" title="1482740453452250.png" alt="WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다."></p> <p><br></p> <p>웹 개발자는 서로 다른 브라우저가 약간씩 다른 방식으로 작업을 수행한다는 점을 인식해야 합니다. 페이지가 예상대로 작동하는지 확인하려면 다양한 브라우저에서 페이지를 테스트하는 것이 좋습니다. </p> <p>참고: 다른 브라우저에서 웹사이트 실행 </p> <p>WebMatrix의 정말 좋은 점 중 하나는 개발 컴퓨터에서 실행되는 웹 서버를 제공하는 것이 아니라 빠르게 실행하는 기능입니다. 귀하가 설치한 모든 브라우저. WebMatrix 도구 리본의 실행 버튼 하단에 있는 아래쪽 화살표를 클릭하면 이를 경험할 수 있습니다. </p> <p><img src="https://img.php.cn//upload/image/400/118/699/1482740473997790.png" title="1482740473997790.png" alt="WebMatrix 고급 자습서(2): WebMatrix를 사용하여 첫 번째 웹 페이지를 만드는 방법을 알려줍니다."></p> <p>목록에는 설치한 브라우저만 표시됩니다. <br></p> <p><br></p> <p> 위는 WebMatrix 고급 튜토리얼(2)입니다. WebMatrix를 사용하여 첫 번째 웹 페이지의 콘텐츠를 만드는 방법을 알려줍니다. PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요! <br></p> <p><br></p>

관련 라벨：
WebMatrix
원천：php.cn
이전 기사：WebMatrix 고급 튜토리얼(1): Microsoft의 새로운 개발 도구 WebMatrix(그래픽 및 텍스트) 설치 및 사용 방법 다음 기사：WebMatrix 고급 튜토리얼(3): 특정 스타일을 구현하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1777
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
1919
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1633
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1541
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1578
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！