WebMatrix Advanced Tutorials (2): teach you how to create the first page using WebMatrix

Guide: Microsoft WebMatrix is a free tool that you can use to create, customize, and publish Web sites on the Internet.

WebMatrix makes it easy for you to create sites. You can start with an open source application (such as WordPress, Joomla, DotNetNuke, or Orchard), and WebMatrix will handle the tasks of downloading, installing, and configuring these applications for you. Or you can use many of the built-in templates to write your own code that will help you get started quickly. Whatever your choice, WebMatrix provides everything you need to run your site, including Web servers, databases, and frameworks. By using the same stack that you will use on the web host on your development desktop, the process of getting your site online is easy and smooth.

You can download it from Http://web.ms/webmatrix.

Now you can learn to use WebMatrix, CSS, HTML, HTML5, ASP, SQL, database, and more, and how to write simple Web applications in just a few hours. The contents are as follows:

In part 1th you learned about the basic concepts of WebMatrix and how to install and run it. Use it in this chapter to create your first Web site and populate it with your first web page.

Create a Web site

Select the Web site from template option, and you will see the following dialog box. Please note that you may see many different templates because the WebMatrix features are constantly improving. You need to use the empty site template. Select this template and name it movies.

When OK is pressed, WebMatrix will create a new, empty site for you. The site will then be loaded into the WebMatrix editor. You can see this here:

Before further development, it would be helpful to understand some of the things you see here. The 1th is that WebMatrix is more than just a code editing tool. It integrates a Web server named IIS Express. A Web server is a special software that listens to data requests from the Internet and answers that request by transmitting it (usually to a Web browser).

Whenever you open a browser and type something like http://www.microsoft.com, you call Microsoft's Web server, which responds by sending code such as HTML, JavaScript, CSS, pictures, and so on. Your browser will then combine them into a Web page.

The built-in server in WebMatrix makes it easy to develop your Web site just as you would with a Web server on the Internet. If you look at the screen, under the site name (in this case, "Movies") you will see that the server provides the site on address http://localhost:8946, indicating that the server's host is on-premises, that is, on your development machine.

From within WebMatrix, you can start the Web server and run your Web site, but if you do this now, you'll get an error because you haven't created anything for the site yet. We will complete this task next.

Create your first page

You will notice that WebMatrix allows you to switch between different workspaces by selecting the buttons on the left. The site button is now selected, and the workspace shows you details about the website (such as the URL of the site) and other tools you can use (such as monitoring your site requests). Each workspace is analyzed in depth as you study this article, but now just press the Files button to select the workspace.

WebMatrix will now open the file workspace because it doesn't seem to have any files in your site, so it looks empty. However, it provides a very friendly button that allows you to add files to the Web site, or you can use the New button in the toolbar to create a new file.

Whichever method you choose, you will see the Choose a File Type dialog box, which provides many choices for many different file types that are commonly used on the network.

Select the HTML file type, name it default.html and press OK. WebMatrix will now create a simple HTML file and open it.

An HTML (Hypertext Markup Language) file is a set of instructions that tells the browser how to draw a Web page. It usually contains a header and a body, the header contains instructions about the Web page itself, the body is the content of the Web page. The content is tagged with tags, starting with the tag name in angle brackets, such as <body>, and a slash in the angle brackets followed by the name end, such as </body>. As a result, anything in these tags will be treated as the body of the Web page by the browser. You can learn more about HTML and its markup on w3cschools.com.

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

Edit the Web page so that it resembles the following form:

<! DOCTYPE html>    
You entered some text in the <title> tag and added some code between the <body> tags. This code will use 
In the WebMatrix toolbar, you will see a "Run" button.


Select it, WebMatrix will launch the browser and open the Web site running on your local server.


A lot of things have happened here. Let's examine it in detail.

Web server

Have you noticed the address bar on your browser? It does not open the file on your hard disk, but it launches the Web server and points the browser to the Web server, requiring it to provide file default.html.


Look at the system tray on your PC and you will see a small icon indicating that the Web server IIS Express is running.




Right-click on it and you will see that it is running your movies Web site.




Page title

Now look at the browser tab of the Web page. It should contain the text "My favorite Movies". For comparison, we run the same website in Internet Explorer, Chrome, Safari, Firefox, and opera. Notice that the text is the content in the <title> tag that you enter into the 
Internet Explorer:


Chrome:






Safari:




Firefox:


Opera:




What web developers need to be aware of is that different browsers perform operations in slightly different ways. It's a good idea to test your webpage on a different browser and check if it behaves as expected.

Note: Launch your site in a different browser

A really good aspect of WebMatrix is not to provide you with a Web server running on your development machine, but to quickly launch any browser you install. You can experience this by clicking the down arrow at the bottom of the Run button in the WebMatrix tool Ribbon.


The list will show only the browsers that you have installed.



The above is WebMatrix Advanced Tutorial (2): teach you how to use WebMatrix to create the content of the first page, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

