https://docs.kentico.com/k10tutorial
主面板按照功能分成两行排版
https://docs.kentico.com/k10tutorial/getting-started-with-kentico
Tutorial sequence
To get the best experience out of this short tutorial, follow the sequence of the pages in the specified order:
- Learn how to work with the system interface.
- Get familiar with site development models.
- Create a new website.
- Add CSS styles to the website.
- Learn how to work with the Pages application.
- Design a master page.
- Create a new page.
- Make a page template.
- See the next steps.
Using the Kentico interface
If you have just installed Kentico, you can access the administration interface by:
- Typing /Admin after your site's domain into the browser address bar (for example, http://mysite.com/admin). http://localhost/Kentico10/Admin/CMSAdministration.aspx
A sign-in page appears:
- The default user name is administrator.
- The default password is blank (no password).
Once you sign in, the Kentico administration interface opens.
首先完成安装，需要通过custom installation进行安装，指定sql server的登录名和密码，并且指定数据库名字。
安装完成后，进入administration管理界面。默认的登录名是administrator，默认密码是空.
The interface is separated into applications.
Each application represents a group of related functions that allow you to perform various types of tasks, configure the system, and view information.
Administration interface
All parts of the administration interface share the same header with the following elements:
Site development overview
Kentico provides the following development models:
Portal engine
Recommended for most projects.
You can build websites using page templates and web parts in a browser-based user interface.
This model does not require programming and using Visual Studio, but you can use it to create custom components.
ASPX templates
Can be used by experienced ASP.NET developers who prefer to create websites using standard ASP.NET Web Forms architecture and standard development tools, such as Visual Studio.
You must be familiar with ASP.NET development and have at least basic programming knowledge of C#.
MVC
It is also possible to create websites or specific pages using the Model-View-Controller architectural pattern (based on the ASP.NET MVC framework).
This model should only be used by experienced ASP.NET developers.
The rest of this tutorial uses the Portal engine approach.
If you're not sure which development model is best for you, see Choosing the right development model.
Creating a new website
When you want to begin developing a website in Kentico, we recommend installing a blank new site.
You could also use one of our sample sites, for example the Dancing Goat site, but then you should make sure to delete all the sample objects you do not need.
See Creating new sites from templates for instructions on how to install a sample site.
For the purpose of this tutorial, install a blank new site:
1.In the Kentico administration interface, open the Sites application
2.Click New site wizard.
3.Select Create a new site using a wizard and click Next.
4.Type the details for the new website:
- Site display name: MEDIO clinic
- Domain name: do not change the value in this field
- Site culture: (default)
5.Click Next.
6.In Step 3, do not change anything and click Next.
- This step allows you to select the objects which the system imports to the new site.
7.If you encounter the following warning, click Next.
- Warning: Failed to start site 'MEDIO clinic', there is already a site running under this domain alias. You first need to stop the existing site and then start the new site manually.
- Two sites cannot run under one domain simultaneously. For the purpose of this tutorial, we will stop the previously installed site (usually Dancing Goat site) after the site creation is finished.
-
This is the master page template for the website.
-
You can change it later at any time.
9.Click Next.
10.Click Finish.
The system creates the new blank website and displays it in the Sites application.
If you have previously installed a different site, stop it now, so that you can run the new one:
- Stop (
) the website which is running on the domain that you want to use (localhost in our case). - Run (
) the MEDIO clinic website.
Adding styles to the website
https://docs.kentico.com/k10tutorial/adding-styles-to-the-website
When you have a website created, it is a good practice to first define its appearance and design.
This is achieved by using CSS styles, which can be managed in the CSS stylesheets application in Kentico.
Download the code files
You can copy the code blocks required for the Tutorial from this and the following pages.
Another option is to download the HTML and CSS code of the tutorial website here: TutorialWebsite.zip.
添加css
To define the styles for the website in this tutorial:
Switch to the Sites tab and ensure that the stylesheet is available for MEDIO clinic.
If not, click Add sites and select MEDIO clinic.
You have imported the stylesheet to the system and made it available for the website.
Now you need to assign the stylesheet to the website so that all pages use it by default.
将css绑定到站点
Add the stylesheet to the website:
1.Open the Sites application.
2.Edit MEDIO clinic.
3.On the General tab, in the Site CSS stylesheet drop-down list, select MEDIO clinic - MEDIO stylesheet.
4.Click Save.
This ensures that all pages of MEDIO clinic load the prepared stylesheet.
Working with the Pages application
The Pages application allows you to add and modify the content of your website.
This is where you begin building your website.
The basic interface you will need in this tutorial:
- Edit mode – edit pages
- Page tab – edit the content of pages
- Design tab – edit the components (web parts) of pages
- Preview mode – see how the page appears to visitors
How to work with pages
See more details in Working with pages.
Creating the master page
The master page allows you to define content that will be shared by all pages on the website, such as a header, navigation menu or footer.
A master page does not represent a physical page on the website, but rather a design component that is added to other pages to ensure a uniform look.
Define the master page at the beginning of your website development to know what all the pages will look like with the uniform elements.
You can define the master page through the following steps:
- Copy and paste the HTML code from the sample files into the master page layout.
- Replace parts of the HTML code with web part zones.
- Add web parts to the web part zones.
Paste the HTML code
Insert the HTML code of the shared parts of the website into the master page:
1.In the Pages application, select the root page of the website's content tree.
2.In Edit mode, switch to the Master page tab.
3.Click Edit layout.
4.Delete the default layout content.
5.Open the Index.html file from the tutorial pack in a text editor.
6.Copy the HTML code inside the <body>...</body> tags and paste it into the page layout editor.
7.Click Save & Close.
8.Copy the stylesheet and font lines of code from the Index.html file and paste them into the <head> section of the master page.
9.Make sure the doctype definition is HTML 5 – <!DOCTYPE html>.
10.Click Save to save the master page.
You have just copied the HTML code from the sample website to Kentico.
Because we have already defined the CSS code and the CSS stylesheet is linked to the website, the styles are automatically applied to the master page.
You can see that the master page now looks exactly the same as the sample website – switch to Preview mode:
The website design is the same as in the sample website:
Add web part zones
Web part zones are elements of the website that allow you to define the layout of pages.
Web part zones represent containers, into which the website content can be easily placed and then edited.
1.In the Pages application, switch to Edit mode.
2.Select the Design tab.
3.Click the menu in the green page template header and select Edit layout.
4.Locate the navigational part of the layout code and remove everything inside the <nav> element.
- The HTML code is static, but we want to make the menu dynamic – so that it automatically updates according to the pages we create.
5.Place the cursor鼠标光标 inside the <nav> element and click Insert above the editor.
- This adds a web part zone control into the layout.
6.Change the value of the web part zone’s ZoneID property to ZoneMenu.
- The ZoneID values of web part zones must be unique on each page template's layout.
7.Locate and delete both <section> elements. 定义到section元素并删除
- These sections with text represent content of the website, which we do not want to include in the master page.
8.Place the cursor between the </header> and <footer> tags and click Insert above the editor.
- This web part zone represents a place where the page content will be located on the master page.
9.Set this web part zone’s ZoneID to ZoneContent.
When you now switch to the Design tab, you can see the website layout with two web part zones.
Add the navigation menu
Add a dynamic web part that will represent the website menu.
The web part ensures that the pages in the website are reflected in the menu.
1.In the Pages application, switch to the Design tab. 在pages的design界面，右侧有web parts的搜索框
2.In the web part toolbar on the right, search for the CSS list menu web part.
3.Drag and drop the web part into the orange ZoneMenu web part zone.
Alternatively, click the menu icon of the orange ZoneMenu, select Add new web part, select the CSS list menu web part from the Navigation category and click Select.
4.Type Main menu (CSSListMenu) as the Web part title.
5.Click Save & Close.
The web part appears in the ZoneMenu web part zone. It does not display any page links now, as we have not created any pages yet.
The page placeholder
The Page placeholder web part ensures that the child pages of the website master page (such as Home or News pages) are loaded inside of the master page template exactly where you want them to be loaded.
Make sure that the green pageplaceholder web part is located properly in the ZoneContent web part zone.
If you have not named the web part zone ZoneContent, then the pageplaceholder web part will be located in a separate web part zone: Use drag & drop to move the web part into the proper web part zone.
You have created the master page and thus defined a uniform look for your website.
Creating website pages
When the master page is finished, it is time to create the first page that will display content. This is usually the home page.
1.In the Pages application while in Edit mode, click New (+) above the content tree.
2.Select the Page (menu item) page type.
3.Type Home as the Page name and select the Create a blank page option.
4.Click Save to create the page.
- The system creates the Home page under the root of the website.
5.On the Design tab, click the page template menu and select Edit layout.
6.Delete the original layout and replace it with the two <section> elements from the index.html file.
7.Replace the two <p> elements with web part zones. Rename the second web part zone so that the ZoneID values are unique.
8.Click Save & Close.
The system displays two web part zones and applies styles around them as defined by the HTML code and CSS code from the stylesheet.
As you can see, the master page design envelops the green page template area that is unique for the Home page.
You can now add web parts to the created web part zones to create some website content.
Add a text web part
In this example, we will add textual web parts to prepare editable text regions for content editors.
1.Make sure you are on the Design tab.
2.Find the Editable text web part in the right toolbar and drag it to the ZoneA zone.
3.Configure (double-click) the web part and set the following properties:
- Web part title: Teaser (Editable text)
- Editable region type: HTML Editor
4.Click Save & Close.
5.Drag another Editable text web part into the ZoneB zone.
6.Configure (double-click) the web part and set the following properties:
- Web part title: Description (Editable text)
- Editable region type: HTML Editor
7.Click Save & Close.
You have configured two editable text web parts, which represent the text on the home page.
Editing the text of the web parts
If you switch to the Page tab, you can see that it is now possible to add text on the page.
Creating page templates
After creating the Home page, imagine that you would like to create more pages that look exactly the same, only with different text.
For this purpose, you can turn the Home page into a page template, which you will be able to reuse for creating other pages.
Templates define the basic structure and components of pages without the content added by editors (i.e., content that can be added in the Pages application on the Page or Form tab).
To create a page template out of an existing page:
1.In the Pages application while in Edit mode, select the Home page.
2.Open the Properties -> Template tab.
3.Click Save as new template.
4.Fill in the following values:
- Template display name: MEDIO clinic - Home
- Template category: Home pages
- Normally, you would create a new template category for the Medio clinic. We skipped this step in this tutorial.
- Normally, you would create a new template category for the Medio clinic. We skipped this step in this tutorial.
- Assign to the current page: Yes (selected)
5.Click Save & Close.
6.Click Save on the Template tab.
The system creates a page template with the design of the Home page.
This means that the page template contains two web part zones and two Editable text web parts.
The text entered into the web parts on the Page tab is not saved in the template.
Creating pages using saved templates
To create new pages using the previously saved page template:
1.In the Pages application while in Edit mode, select the root page.
2.Click the New (+) icon above the content tree to create a new page.
3.Select the Page (menu item) page type.
4.Type Medical centers as the Page name.
5.Select the Use existing page template option.
6.Find and select the MEDIO clinic - Home page template (under the Home pages category).
7.Click Save.
The system creates the new page with the web part zones and web parts defined by the page template.
If you now switch to the Page tab, you can add text specifically for this page.
View the live site
To see the website live:
1.Open the application list and click Live site at the bottom.
The system opens the site in a new browser tab. This is the final look of the tutorial website.