Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 29
BÀI 2: THIẾT KẾ TRANG WEB
I. Chuẩn bị nội dung đưa lên website
1. Biên tập nội dung
1.1 Nội dung dạng text
- Những nội dung khá dài hay cần biên tập kỹ nên lập thàng dạng file hoàn chỉnh
với font unicode ( Arial hay Times new roman) . Các file có sẵn từ font VNI phải được
convert qua unicode.
- Khi dán thông tin từ file phải gỡ bỏ các định dạng word .
- Khi thấy yêu cầu loại bỏ định dạng word thì chọn OK không chọn Cancel
- Dán thông tin vào hộp thoại “Dán với định dạng word” rồi click “ gỡ bỏ các định
dạng style “ và không chọn “chấp nhận các địng dạng font”, sau đó mới chọn Đồng ý.
- Biểu bảng nếu đơn giản nên lập ngay trong web bằng chức năng tạo table.
Trong trường hợp cần dán một biểu bảng excel, cần kiểm tra và chỉnh sửa kích
thước biểu bảng cho phù hợp. Biểu bảng word nên hạn chế dán vào vì dễ làm hư giao
diện ( khi dán một file word có biểu bảng, nếu thấy giao diện bị “banh “ rộng ra đó là
do biểu bảng, phải bỏ đi và tạo table ngay tại website hoặc excel).

1.2 Nội dung dạng hình ảnh
- Việc chuẩn bị hình ảnh rất cần phải lưu ý. Vì website thường chứa khá nhiều hình
ảnh, thậm chí cả film ngắn nên dung lượng rất lớn .
- Dung lượng của hình ảnh làm ảnh hưởng nhiều đến tốc độ truy cập, thậm chí phát
sinh lỗi.
- Hình ảnh phải được cắt chỉnh phù hợp về kích thước đưa lên, ngay cả khi đưa lên
ở cửa sổ mới cũng không nên rộng quá 800 pixel.
- Tùy theo vị trí muốn đưa lên mà hình ảnh cắt ra cho phù hợp.
- Sau khi chỉnh sửa vừa ý, lưu lại ở chế độ “save for web”, chất lượng “high” đuôi
.JPEG là tốt nhất.

2. Thời gian làm việc
Để đảm bảo an toàn cho website, hệ thống quy định thời gian làm việc cho mỗi
thao tác cập nhật của người admin là không quá 30 phút. Nếu sau 30 phút mới đặt lệnh
“cập nhật” cho thao tác thì sẽ không có kết quả. Đó là tình trạng “hết giờ” .
“Hết giờ” (timeout) thường xảy ra trong các trường hợp sau :
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 30
1. Do chưa chuẩn bị kỹ thông tin, nên khi muốn đăng tin tức hay cập nhật
sản phẩm, người admin quay ra tìm thêm thông tin, hình ảnh, chỉnh sửa hình
ảnh, đôi khi ngồi thiết kế mới, thậm chí đi chụp ảnh. Khi có thông tin, thấy
trang web vẫn còn trong tình trang đã login nên lại tiếp tục cập nhật thêm thông
tin vào đó rồi chọn update. Nếu bị timeout sẽ không có kết quả, mất luôn cả
phần phía trên, phải làm lại.
2. Cập nhật thông tin bằng cách soạn trực tiếp lên web, nhưng do thông tin
quá dài, phải tập trung suy nghĩ và tận tụy làm quá lâu (“không để ý”) đến khi
update thì mất tiêu luôn, làm lại cũng khó khăn vì đó là ý nghĩ bị trôi qua. Do
đó nên vừa làm vừa update, sau đó vào edit lại, làm tiếp.
3. Do bận đột xuất việc khác nên bỏ dở, sau đó quay lại làm tiếp, nhưng khi
update thì không được, phải làm lại.

3. Chỉnh sửa, bỏ thông tin
- Khi đưa thông tin sai hoặc thông tin test, sau đó muốn chỉnh sửa hay bỏ đi làm
lại, admin có thể chọn bỏ hay chỉnh sửa (edit) thông tin.
- Lưu ý bỏ thông tin không thực hiện bằng cách delete trang hay module. Trang có
thể còn liên kết với trang khác . Còn các module đã cài lên cho website thường có giá
trị sử dụng hợp lý và có khi liên kết rất phức tạp, nếu bỏ 1 cái có thể gây lỗi toàn hệ
thống.
- Cần phải tuân theo hướng dẫn sử dụng của từng module đã được hướng dẫn chi
tiết . Chỉnh sửa hay bỏ đi trực tiếp thông tin đó tại chỗ mà nó được đưa vào . Còn

module hay trang thể hiện thông tin đó có thể chỗ khác và còn dùng cho nhiều thông
tin khác nữa.

II. Trang và cách tạo trang
1. Tổng quan về trang
Trang web của bạn được tạo bởi các Trang có hiển thị thông tin cho những người
vào đó xem. Hầu hết những trang này thì đều có thể click những mục trên Menu giúp
cho người xem dễ dàng tìm kiếm.
Trợ giúp: Làm thế nào để tạo được một trang?
Trang được dẫn tới khi click vào những đường Link. Một ví dụ đơn giản của
đường link là mục Menu nó là một phần để tạo nên trang, đường link có thể được tạo
theo nhiều cách khác nhau. Dưới đây là một vài ví dụ minh họa về cách tạo đường
link.
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 31

Menu item


Child Menu item

Vertical Menu items
(Also called a "treeview")

Links Module items


Nội dung: Hiển thị những gì trên trang?
Trang bắt đầu từ những khoảng trống. Bạn đưa thông tin vào trang bằng cách đặt

chúng vào Module. Có rất nhiều dạng module có khả năng hiển thị những dạng nội
dung khác nhau. Một trong những cách thông thường nhất gọi là Module Text/HTML
là cái đơn giản nhất cho phép bạn đặt bất cứ đoạn HTML hay đoạn Text nào mà bạn
thích. Thông tin của bạn được hiển thị trong module Text/ HTML

Bảo mật: Ai có thể được nhìn thấy và thay đổi trang?
Việc bảo mật là rất quan trọng. Bạn có những thông tin trên trang web mà bạn
không muốn cho bất kì ai có thể nhìn thấy được. Nếu như website của bạn cho phép
người truy cập đăng ký vào, thì bạn cho họ những sự chấp nhận đặc biệt.
Có 2 dạng người cơ bạn đến truy cập trang web của bạn. Dạng người đầu tiên là họ
chỉ muốn nhìn lướt qua và không bao giờ đăng ký hoặc ít nhất là chưa bao giờ đăng
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 32
nhập, họ được gọi là những người sử dụng không xác thực. Những người sử dụng
không xác thực là những người ẩn danh.
Dạng người thứ 2 là người có đăng nhập. Để đăng nhập được họ phải đăng ký từ
trước và họ được xem như là những người sử dụng có đăng ký. Nét riêng của những
người sử dụng có đăng ký là họ được biết và bạn cho họ những sự chấp nhận đặc biệt
để họ xem hoặc có thể thay đổi trang mà những người sử dụng khác không làm được.

Hình thức: Trang của bạn nhìn như thế nào?
Mỗi trang đều phải giống nhau như kiểu Skin mặc định được xác lập trên website
của bạn. “Skin” là một phương thức dùng để mô tả hình thức bên ngoài hoặc cách bố
trí trang web của bạn. Skin có thể đơn giản hoặc phức tạp. Nó có thể cung cấp cho bạn
một Menu nằm dọc hay nằm ngang, cung cấp những dạng khác nhau của Containers(
giống như Module cho Skin), cung cấp cho bạn những cách bố trí cột khác nhau,
v…v. Có một vài skin được minh họa dưới đây.




Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 33



2. Tạo một trang mới (cơ bản)
Cách đơn giản nhất để tạo một trang mới trên website của bạn là dùng nút Add ở
những phần chức năng trang của Control Panel (nằm ở đầu trang).


Các bước tạo trang
1. Click chuột vào nút Add trên Control Panel. Trang tiếp theo nó sẽ chỉ rõ cho
bạn thấy cách thiết lập một trang mới mà bạn muốn tạo.

2. Đặt con trỏ chuột vào phần Page Name và đánh tên trang của bạn vào. Nó sẽ
cho người truy cập thấy trên Menu của website.
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 34

Your website Menu before adding
the page
Your website Menu after adding the
page
3. Đặt con trỏ ở phần Page title và đánh tiêu đề cho trang của bạn. Nó sẽ cho
người truy cập thấy trên thanh tiêu đề của phần duyệt web khi mà họ xem trang của
bạn


4. Chọn người có thể nhìn thấy trang của bạn và người có thể thay đổi phần
settings. Quản trị viên là người có thể nhìn thấy trang của bạn và có thể thay đổi
Settings. Nhưng bạn có thể chọn thêm người có thể thấy và thay đổi chúng. Nếu như
trang mới của bạn có những thông tin riêng, bạn chỉ muốn những người truy cập đã
đăng nhập vào website của bạn mới có thể nhìn thấy được. Bạn check vào những phần
chi danh cho những người xem hoặc sửa chữa (thay đổi setting) cho trang mới của
bạn.(Những người sử dụng không xác thực là những người truy cập vào mà không
đăng nhập)

5. Chọn nơi mà phần menu của trang web có thể liệt kê ra. Theo mặc định, trang
mới của bạn sẽ xuất hiện trên menu như trang “Home”. Nếu như bạn thích nó xuất
hiện ở hộp menu rơi xuống, bạn có thể chọn trang mà bạn muốn cho nó xuất hiện ở
dưới.


Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 35
6. Khi bạn hoàn thành xong những bước trên, bạn di chuyển đến phần giữa trang
và nhấp vào Update để lưu lại những thay đổi của bạn!
3. Tạo trang mới (nâng cao)
Thay vì chọn phần thiết lập cơ bản, thì bạn có thể chọn phần thiết lập nâng cao
mà bạn muốn sử dụng để tạo trang mới
In addition to the Basic Settings, there are a number of optional Advanced
Settings that you can use when creating a new page.
Tất cả những thiết lập này đều được chọn!
Sao chép trang

1. Click vào nút Add trên Control Panel. Định cấu hình như bạn đã làm đối với
các thiết lập cơ bản đã được hướng dẫn ở phẩn trước.


2. Nếu như bạn muốn trang mới của bạn có cùng module với trang khác ở trên
website, bạn có thể chỉ định trang muốn sao chép module ở phần Copy Module From.
Chọn trang từ hộp danh sách rơi xuống.

Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 36
3. Check vào nội dung cần sao chép nếu như bạn muốn Module ở trang mới cũng
“mirror” với module của trang mà bạn sao chép.
Có nghĩa là bất cứ thay đổi nào về nội dung của module thì một trong hai trang mà
bạn copy hoặc là trang mới của bạn sẽ bị hư!

Ngày bắt đầu và ngày kết thúc
4. Nhập vào ngày bắt đầu hoặc ngày kết thúc cho hoạt động của trang web của
bạn. Người truy cập vào website của bạn sẽ không nhìn thấy trang này hoặc Menu của
chúng cho đến một ngày trong tương lai. Nếu ngày kết thúc theo lý thuyết là ngày mà
trang web của bạn ngừng không cho người truy cập vào. Cả hai phần này thường để
trống (vì thế trang web luôn được hiển thi).

Dạng đường liên kết
5. Dạng đường link mặc định cho trang là None, những trang này thường không
có đường link. Nhưng bạn có thể chọn nhiều dạng đường liên kết khác nhau vì thế
mục menu của bạn cũng được chạy khác nhau. Chúng ta sẽ nhìn thấy các dạng ngắn
gọn ở bên dưới. Bạn có thể chọn lấy một kiểu.

Chỉ rõ dạng đường link URL. Thiết lập trang này sẽ cập nhât và kiếm cho ban
một vùng có dạng URL. Mục Menu được tạo bởi những trang settings sẽ mở
URL là điều mà bạn đánh vào vùng này (thay vì là mở với trang của module)


Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 37
Chỉ rõ dạng trang link. Thiết lập trang sẽ được cập nhật và sẽ cung cấp cho bạn
một một hộp danh sách các trang rơi xuống trong website của bạn. Menu được tạo bởi
các trang thiết lập sẽ mở ra ngay tại trang này thay vì mở sang trang mới. Bạn có hơn
một menu mở cùng trang thì có thể làm được điều đó.

Chỉ định rõ dạng đường link tập tin. Thiết lập trang sẽ được cập nhật và kiếm
cho bạn một hộp danh sách rơi xuống chỉ rõ danh mục và tên tập tin trên website của
bạn. Menu sẽ được tạo bởi các trang thiết lập sẽ mở ra tập tin này thay vì mở ra một
trang truyền thống. Có thể làm được điều đó khi bạn có menu mở ra được document
hoặc image..

6. Khi bạn hoàn thành xong các bước trên, thì di chuyển vào giữa trang click vào
nút Update để lưu lại những sự thay đổi của bạn.
6. When you have finished with these steps, scroll to the bottom of the page and
click Update to save your changes!

4. Xóa trang
Nếu như bạn quyết định là bạn không muốn bất cứ trang nào thì bạn có thể xóa
chúng. Có 2 cách xóa trang từ website của bạn và chúng ta có thể thấy cả hai cách.
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 38
Cách đơn giản nhất là để xóa trang là dùng nút Delete ở trên phần chức năng
trang của Control Panel (nằm ở đầu trang)

Khi bạn xóa trang thì nó sẽ mất luôn. Bạn không thể phục hồi lại trang đó nếu bạn
xóa chúng từ thùng rác (see Recover a Delete Page).

Các bước xóa trang
1. Bắt đầu từ trang bạn muốn xóa. Click vào nút Delete ở trên Control Panel.

2. Click vào OK để xác định trang mà lúc này bạn muốn xóa. Sau khi xóa trang
bạn sẽ được đưa tới trang chủ.
Các bước xóa trang trong Page settings
Nếu bạn đọc phần hướng dẫn tạo trang nâng cao, bạn biết có một vài dạng trang
mà bạn không thể điều hướng được (và vì thế bạn không thể dùng nút Delete trên
Control Panel). Một phần nữa ở bên ngoài website hoặc document hoặc có lẽ chúng
không có tất cả trong trang ( nhưng nó ở menu mà bạn không thể nhấp vào được).Tất
cả những điều đó yêu cầu bạn xóa trang từ Page Settings.
1. Đến phần Page Settings cho dạng trang, di chuyển xuống phần Menu
Admin và chọn mục Pages.

Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 39
2. Chọn mục Page từ danh sách và click vào nút Edit. Nút Edit này nhìn như cây
bút chì màu xanh. Bạn sẽ được đưa tới phần Page Settings cho trang mà bạn chọn.

3. Ở giữa phần Page Settings, click vào nút Delete.

4. Click OK xác định trang mà bạn muốn xóa. Sau khi xóa trang xong bạn sẽ
quay trở về danh sách Pages.



Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 40

5. Phục hồi trang bị xóa
Thùng rác là nơi chứa trang (và module) khi bạn xóa chúng. Bạn có thể phục hồi
lại chúng lại hết từ thùng rác.
Di chuyển xuống menu Admin và chọn vào Recycle Bin.

Các bước phục hồi lại trang
1. Chọn trang mà bạn muốn Restore. Trong thùng rác chúa danh sách bao gồm tất
cả những trang mà bạn đã xóa từ thời gian trước.

2. Click vào nút Restore. Trang của bạn sẽ được di chuyển từ danh sách các trang
ở thùng rác và mục menu sẽ hiển thị lại trên menu của bạn một lần nữa.

Các bước để xóa trang(vĩnh viễn)
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 41
1. Chọn trang mà bạn muốn xóa vĩnh viễn. Trong thùng rác sẽ có danh sách bao
gồm tất cả các trang mà bạn đã xóa từ trước.

2. Click nút Delete trên phần Pages.

3. Click OK để xác định là sẽ xóa. Trang của bạn sẽ di chuyển từ danh sách các
trang của thùng rác và sẽ bị xóa vĩnh viễn.

Các bước để làm thùng rác trống
Nếu như thùng rác có quá nhiều rác, bạn muốn thùng rác trống để sau này bạn dễ
dàng sử dụng. Làm trống thùng rác là bạn sẽ xóa vĩnh viễn các trang và Module ở
trong đó.
1. Click vào nút Empty Recycle Bin nằm ở giữa trang.


2. Click OK để xác định là bạn muốn xóa tất cả các trang và Module trong thùng
rác. Chúng sẽ di chuyển từ thùng rác và bị xóa vĩnh viễn.
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 42

Sau đó thì thùng rác sẽ trống rỗng.


6. Phân quyền sử dụng trên trang
Trên trang web của bạn có một hay nhiều trang mà bạn không muốn cho bất kì
người nào có thể thấy. Ví dụ, bạn có thông tin cá nhân hoặc hình ảnh mà bạn chỉ muốn
chỉa sẻ chúng cho gia đình của bạn. Bạn có những thông tin thống kê riêng mà bạn chỉ
định giá với khách hàng. Thật dễ dàng để giới hạn số lượt người xem truy cập vào
webiste.
Trang có thể có những người xem ẩn danh hoặc một nhóm người sử dụng có
đăng ký. Nếu như người truy cập không có sự chấp nhận để xem trang đó (hoặc không
đăng nhập vào được), thì nó sẽ không xuất hiện trên mục menu mà họ chọn. Nếu
người sử dụng thông qua được phân quyền sử dụng trang, họ sẽ được hỏi là phải đăng
nhập để sự chấp nhận xem trang được xác minh lại.

Các bước thực hiện: Chỉ dành cho người sử dụng có đăng ký
Thiết kế web với DotNetNuke 5.x Khoa CNTT - Trường Cao đẳng nghề Đà Lạt

Phạm Đình Nam Trang 43
Bắt đầu tạo một trang mới như bạn đã được hướng dẫn trong cách tạo trang cơ
bản. Tuy nhiên, thay vì cho phép mọi người đều được xem trang web kể cả người ẩn
danh, thì chúng ta sẽ thay đổi chỉ cho người sử dụng có đăng ký được thấy thôi.
1. Thông qua trang mới của bạn và Click vào Settings trong phần chức năng
trang của Control Panel (ở góc phải phía dưới của trang)


2. Di chuyển xuống phần Permissions

3. Check vào Resgister Users ở phía dưới của View Page permission. Không
check vào bất cứ nhóm nào khác (lưu ý là quan trị viên luôn luôn có View Page
permission).

Bây giờ, khi những người truy cập ẩn danh đến website của bạn họ sẽ thấy Menu
mà không bao gồm những trang đã được bạn đã phân quyền sử dụng trang! Người sử
dụng phải đăng ký và sau đó đăng nhập vào thì họ mới có thể thấy được Menu của
bạn và xem được những trang đó.
vs.