Thiết kế trang web

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. [...]... 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 Ph m ình Nam Trang 41 Thi t k web v i DotNetNuke 5.x Khoa CNTT - Trư ng Cao ng ngh àL t 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. .. Di chuy n trang Quan tr ng là b n ph i hi u trang không th di chuy n…nhưng b n có th di chuy n Menu i xung quanh Vì th di chuy n trang là b n ph i thay i nơi mà m c Menu xu t hi n trang c a b n Có 2 cách th c hi n và chúng ta s th y ư c c hai Menu Before Menu After Các bư c thi t l p trang Cách ơn gi n nh t là di chuy n t ng trang Ph m ình Nam thay i chúng t trang thi t l p Trang 44 Thi t k web v i DotNetNuke... ăng ký Ph m ình Nam Trang 42 Thi t k web v i DotNetNuke 5.x Khoa CNTT - Trư ng Cao ng ngh àL t 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... rơi xu ng và ch n trang mà m c menu s xu t hi n phía 4 Khi b n hoàn thành xong nh ng bư c trên, di chuy n vài gi a trang và click vào Update lưu l i s thay i c a b n! Các bư c th c hi n: trang trong Menu Admin ây là cách phù h p nh t khi ban mu n di chuy n nhi u trang Danh sách các trang th hi n h t t t c các trang c a b n thành m t danh sách, v i s th t dòng minh h a cho trang g c c a trang khác 1 Di... 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. .. Khoa CNTT - Trư ng Cao ng ngh àL t 1 B t u t trang mà b n mu n di chuy n Click vào nút Setting trên Control Panel Trang ti p theo b n s th y m t trang tương t như lúc b n i n vào khi t o trang m i, ngo i tr là nó s ưa ra t t c các thi t l p c a trang (thay vì tr ng) B n có th ki m tra l i ó có úng là trang c a b n ch n qua ghi nh Page Name trong ph n chi ti t trang 2 Trong Page Management page, di chuy... c a b n m t l n n a Các bư c Ph m ình Nam xóa trang( vĩnh vi n) Trang 40 Thi t k web v i DotNetNuke 5.x Khoa CNTT - Trư ng Cao ng ngh àL t 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... quan ho c URL tuy t i, cho nh ng file image không c n ph i trú ng trong trang web c a b n Links hi n th danh sách c a các ư ng siêu liên k t n b t c trang nào, image ho c là m t file nào trên website c a b n, ho c n m t t p tin, image ho c là m t trang c a website khác New Feed (RSS) hi n th nh ng thông tin m i ư c cung c p trên trang c a b n Nó cung c p cho ngư i truy c p c p nh t ư c nh ng thông tin... hi n vi c di chuy n sang trang khác Di chuy n Module t trang này sang trang khác thì ph i làm xong t các trang Module Settings 1 Tr con chu t vào Module Actions Menu và di chuy n vào m c thi t l p Như là m t s l a ch n, nh p vào Container có hi n th bi u tư ng cho Module Settings OR Ph m ình Nam Trang 55 Thi t k web v i DotNetNuke 5.x Khoa CNTT - Trư ng Cao ng ngh àL t 2 Trên trang Module Settings, di... tr viên: ch có ngư i s d ng này m i có quy n qu n lý website c a b n và có th th y nh ng trang ó ( ó cũng có nghĩa là b n)! ây là s thi t l p t t dành cho nh ng trang mà b n ang làm ho c là không mu n cho b t kỳ ngư i nào th y cho n khi ã làm xong ( ây là m t m c nh dành cho trang m i) (2) Ngư i s d ng không xác th t: t t c nh ng ngư i n xem trang web c a b n u là ngư i n danh “Không xác nh” có nghĩa . 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. 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