Cách tạo skin trong DotNetnuke – DotNetNuke Skinning – Phần 1: kiến thức cơ bản


Phần 1: kiến thức cơ bản skin dotnetnuke

trong loạt bài hướng dẫn tạo skin trong DotNetnuke chúng ta sẽ dựa vào skin Dreamy đây là một  template khá đơn giản để cho chúng ta bắt đầu tạo skin cho DNN. Trong bài viết gốc thực hiện trên phiên bản DNN 5.4. trong bài dịch của mình việc tạo skin được thực hiện trên phiên bản DNN 5.6.2. với vài thay đổi so với bài gốc để skin có thể phù hợp với DNN 5.6.2

Phần 1: kiến thức cơ bản
Phần 2: Xây dựng một skin
Phần 3: Xây dựng một Container
phần 4: đóng gói skin, containers

Tải bài viết này

http://www.ziddu.com/download/15759883/DNNskinning1.pdf.html

http://www.mediafire.com/view/?6150k1lhvn9bw5d

Link tải skin Dreamy:

http://www.oswd.org/design/information/id/3459

bài viết này được dịch từ (Translate from: 
http://blog.theaccidentalgeek.com/post/2010/06/28/DotNetNuke-Skinning-101-%28Part-1%29.aspx )

Kiến thức căn bản skin DNN

DotNetNuke skinning engine hỗ trợ 2 loại skin khác nhau: HTML Skins và ASCX Skins. HTML Skin là dạng skin căn bản cho phép các nhà thiết kế dùng các HTML editor để thiết kế. khi  HTML Skins được cài vào DotNetNuke thì nó sẽ được tự động chuyển thành  ASCX Skins . trong quá trình chuyển chỉ có 1 phần HTML skin được giữ lại, tất cả các phần trong HTML header sẽ bị bỏ đi.

The DotNetNuke skinning  gồm 2 phần là skins và containers. Hai phần này có thể được đóng gói và cài đặt chung hoặc là tách riêng biệt

Các thuật ngữ trong skin DNN

Một skin có thể gồm 1 hoặc nhiều layout template khác nhau. Mỏi skin cũng có thể có 1 CSS style sheet chính và mỏi file được đặt tên theo file template.  Khi một skin được gán cho 1 trang thì các file  style sheet sẽ được tự động thêm vào DotNetNuke skinning engine . Ví dụ bạn có 1 file index.html (index.ascx)  và  skin.css và index.css . khi bạn gán skin index cho 1 trang nào đó thì skinning engine sẽ tự động thêm skin.css và index.css vào trang. Bạn sẽ hiểu rõ hơn phần này ở các bài sau.

Khi bạn tạo 1 skin, bạn phải các định các vùng để đặt các phần tử của skin. Trong skin dreamy ta xác định các khu vực như hình, các khu vụ đó được gọi là các panes.

Dreamy template

Dreamy template

Ngoài pane thì trong 1 skin còn có các phần tử sau: menu bar, copyright notice, login/registration links, privacy link, terms of service link, search box ,… Trong DNN các phần tử này được thêm vào trang bằng cách sử dụng Skin Objects . để minh họa chúng ta sẽ định nghĩa 4 đối tượng trong dreamy teamplate .

Để tìm hiểu về skin object các bạn xem thêm tại đây:

http://www.ziddu.com/download/15746152/skinningguide.pdf.html

Các bước thực hiện cơ bản để tạo skin DNN

Bây giờ chúng ta sẽ tạo một skin đơn giản. trong mỏi skin DNN đều cần có ít nhất 1 pane chính gọi là ContentPane. Chúng ta sẽ tạo skin đầu tiên như sau:

mở Visual studio và mở thư mục chứa dotnetnuke. Tìm đến thứ mục Portal->_default ->Skins. Sau đó tạo thư mục tên Dreamy . sau đó tạo file  index.html

Visual studio

Visual studio

dán đoạn code sau vào file index.html. sau đó lưu lại

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Untitled 1</title>

</head>

<body>

<div id="ContentPane" runat="server"  ></div>

</body>

</html>

Mở trang DNN và đăng nhập bằng user HOST. Vào admin -> skin

quản lý skin dnn

quản lý skin dnn

Sau đó trong phần skin chúng ta chọn Dreamy. Sau đó click vào “Parse Skin Package”.  Nếu bạn làm đúng các bước thì sẽ có kết quả như sau:

Parse Skin Package

Parse Skin Package

Giờ chúng ta quay lại visual sudio các bạn sẽ thấy trong thư mục Dreamy có thêm 1 file index.ascx. mở file này ra chúng ta sẽ so sánh code html của 2 file index.html và index.ascx

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Untitled 1</title>

</head>

<body>

<div id="ContentPane" runat="server"  ></div>

</body>

</html>

Index.ascx

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

<div id="ContentPane" runat="server"  ></div>

Xem skin DNN vừa tạo
Mở 1 trang muốn thử. Chọn edit

edit page dnn

edit page dnn

Chọn Advanced Settings -> Page Skin. Chọn Dreamy – index . sau đó click update. Chúng ta sẽ có kết quả như hình:

chọn skin dreamy cho page

chọn skin dreamy cho page

Như  vậy việc tạo 1 skin DNN đầu tiên đã thành công. Trong phần 2 chúng ta sẽ bắt đầu xây dựng skin DNN dựa trên dreamy template

Bài viết ngẫu nhiên

 

 

About duyanhphamkiller

SEOer, developer

Posted on 27/06/2011, in DotNetNuke, Dotnetnuke skin, Tài liệu DotNetNuke and tagged . Bookmark the permalink. 13 phản hồi.

  1. Bạn ơi ở trên bạn đã hứơng dẫn cách tạo 1 skin đơn giản. Thế còn tạo một Containers đơn giản thì thế nào bạn nhỉ

  2. bạn này viết bài hướng dẫn DNN mà site của bạn lại dùng wordpress. Cũng thú vị.

  3. wordpress.com free, nên mình dùng

  4. anh ơi! hện tại e đang cần 2 module: module tin tức và module sản phẩm
    anh co thể cho e xin 2 cái module đó được không ạ!
    nếu được a gửi qua gmail: nguyenanh1707@gmail.com
    thank anh nhìu!

  5. Bạn ơi cho mình hỏi. Mình làm như bạn chỉ rồi, test thấy ok trừ phần menu không có backgournd và các text dính liền vào nhau.
    Nếu mình muốn chỉnh menu background theo ý mình thì làm như thế nào vậy.
    Thanks bạn nhiều

  1. Pingback: Cách tạo skin trong DotNetnuke – DotNetNuke Skinning – Phần 2: Xây dựng một skin « Phạm Duy Anh's page

  2. Pingback: Cách tạo skin trong DotNetnuke – DotNetNuke Skinning – Phần 3: Xây dựng một Container « Phạm Duy Anh's page

  3. Pingback: cách tạo skin trong dotnetnuke – phần 4: đóng gói skin « Phạm Duy Anh

  4. Pingback: Cách tạo skin trong dotnetnuke (DNN) 6 « Phạm Duy Anh

  5. Pingback: Tài liệu SharePoint 2010 Tiếng Việt | Phạm Duy Anh

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s