Hoe heeft het managementvak zich ontwikkeld in de 20e eeuw? Hoe moeten we management innoveren om het talent van medewerkers optimaal te ontplooien en benutten om concurrentievoordeel te creëren in de 21e eeuw?
Hoe heeft het managementvak zich ontwikkeld in de 20e eeuw? Hoe moeten we management innoveren om het talent van medewerkers optimaal te ontplooien en benutten om concurrentievoordeel te creëren in de 21e eeuw?
- Why are social media important?
- Social media & organisations: what's going wrong?
- Social media & organisations: how to do it right?
(presentation given by Davy Vandevinne during an AmCham Belgium workshop on 18 januay 2012)
Huong dan thiet ke website bang photoshop
Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường Line 1px để tạo chiều sâu một cách tinh tế cho website.
Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.
Hướng dẫn chỉnh sửa giao diện Dspace – P2Gari Dinh
Hướng dẫn chỉnh sửa giao diện Dspace – P2
Bài viết này sẽ hướng dẫn cách thay đổi màu sắc và thêm biểu tượng icon cho thanh menu Navbar, xem qua thông tin cơ bản trước khi thực hiện tại đây
Xem các hướng dẫn khác tại: https://www.blogitcode.com/search/label/Dspace
- Why are social media important?
- Social media & organisations: what's going wrong?
- Social media & organisations: how to do it right?
(presentation given by Davy Vandevinne during an AmCham Belgium workshop on 18 januay 2012)
Huong dan thiet ke website bang photoshop
Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường Line 1px để tạo chiều sâu một cách tinh tế cho website.
Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.
Hướng dẫn chỉnh sửa giao diện Dspace – P2Gari Dinh
Hướng dẫn chỉnh sửa giao diện Dspace – P2
Bài viết này sẽ hướng dẫn cách thay đổi màu sắc và thêm biểu tượng icon cho thanh menu Navbar, xem qua thông tin cơ bản trước khi thực hiện tại đây
Xem các hướng dẫn khác tại: https://www.blogitcode.com/search/label/Dspace
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...MasterCode.vn
Khái niệm hướng mắt của người duyệt web
Weight (trọng lượng)
Italic & oblique
Các style trang trí
Văn bản in hoa in thường
Màu sắc
Kiểu chữ
Khái niệm hướng mắt của người duyệt web
Weight (trọng lượng)
Italic & oblique
Các style trang trí
Văn bản in hoa in thường
Màu sắc
Kiểu chữ
1. Can Ban Ve CSS
CSS là t vi t t t c a Cascading Style Sheets : công d ng dùng trang trí trang web c a
b n, và thông th ng c g n v i các ngôn ng nh là HTML, PHP, dùng làm n i b c
trang web và hình nh trang web c a b n. M i khi b n b t u m t Style Sheets, thì b t
bu c m b ng <HEAD> và k t thúc b ng </HEAD> và ti p theo sau ó là khai báo
<STYLE TYPE="text/css"> và k t thúc b ng </STYLE>
và sau nh ng b c trên thì b n có th nhìn th y nguyên o n code nh sau
<head>
<style type="text.css">
và gi a này là n i b n thêm vào sau này
</style>
</head>
Và sau ây là c u trúc c a CSS:
Tag {definition1; definition2;.....; definition n}
ví d sau ây v dòng l nh c a CSS:
H2 {font-size: 16pt; font-style: italic; font-family: arial}
Và sau ây chúng ta tìm hi u v nh ng cách hàm trong CSS:
1. Tìm hi u v cách trang trí c a font ch :
a. font-family là dùng khai báo ki u lo i font nào b n s d ng
ví d : H2 {font-family: arial}
b. font-style: là dùng khai báo ki u ch b n dùng trong style, bình th ng hay nghiêng
ví d H3 {font-style: normal}
c. font-weight và font-variant: là dùng trang trí ki u font b n ang dùng nh là sáng
(light), m (bold)
ví d A:link {font-weight: demi-light}
d. text-align: là v trí n m c a font trong trang web, có 3 ki u là n m sang trái (left), ph i
(right) và gi a là (center)
ví d : H1 {text-align: center}
e. text-decoration: là dùng trang trí ki u font nh là italic, blink...
ví d : A:visited {text-decoration: blink}
f. text-indent: dùng size (kích c ) mà b n ang dùng, thông th ng dùng là <p> và
</p> và khai báo n v là in, cm, pixel
ví d : P {text-indent: 1in}
g. word-spacing: dùng kho ng cách gi a các t .
ví d : P {word-spacing: 10px}
h: letter-spacing: dùng kho ng cách gi a các ch
ví d : P {letter-spacing: 10px}
i. color: dùng hi n th màu cho ki u ch
ví d : H3 {color: #FFFFFF}
hi n th o n màu b n mu n, thì b n nên vào photoshop và ch n màu b n thích và s
hi n th ra mã s và b n ch n mã s ó.
2. 2.Chúng ta tìm hi u v Margin/Background: khi b n dùng thì nó s nh h ng n
toàn b trang web c a b n.
a. margin-left: o n canh l bên trái
b. margin-right: o n canh l bên ph i
c. margin-top: o nh canh l n trên cùng
ví d chúng ta có th dùng nh sau
BODY {margin-left: 2in}
P {margin-right: 12cm}
BODY {margin-top: 45px}
d. margin: có th khai báo chúng m t lúc cho top, right và left nh sau
P {margin: 3in 4cm 12px}
e. line-height: là kho ng cách gi a các dòng ch
ví d : TEXT {line-height: 10px}
f. background-color: là dùng hi n th màu n n c a trang web
ví d :
BODY {background-color: #ffffff}
g: background-image: b n có th dùng m t t m hình làm background cho trang web
b n
ví d :
BODY {background-image: http://www.page.com/dog.jpg}
h. background-repeat: là dùng l p l i hình n n theo tr c t a x và y.
Ví d :
BODY {background-repeat: repeat-y}
i. background-attachment: là dùng gán hình, hình nh n n c a trang web b n, nó ko có
th di chuy n.
ví d :
BODY{background-attachment: fixed}
3.Chúng ta tìm hi u v Position và Division:
a. Position: là dùng nh v m t ví trí xác nh nào ó
<IMG STYLE="position:absolute" src="joe.jpg">
b. left: là dùng hình nh n m v v trí bên trái bao nhiêu
<IMG STYLE="position:absolute; LEFT: 20px;" src="joe.jpg">
c. right: là dùng hình nh n m v v trí bên ph i bao nhiêu
<IMG STYLE="position:absolute; RIGHT: 20px;" src="joe.jpg">
d. Top: là dùng nh v trí trên top c a screen
<IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt" src="joe.jpg">
e. Width: là dùng xác nh chi u ngang c a t m hình c a b n là bao nhiêu
<IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt"
src="joe.jpg">
f. height: là dùng xác nh chi u cao c a t m hình
<IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP:
200pt" src="joe.jpg">
g. overflow: là khi t m hình c a b n quá kích c cho phép thì nó có th dùng nh ng ch!c
n"ng sau hidden, visible, scroll
<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP:
3. 200pt" src="joe.jpg">
và sau ây là o n code khi b n nhìn th y trong web:
<!--
BODY {background: #FFFFFF}
A:link {color: #80FF00}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font size:14pt; font-family: desdemona}
--> </STYLE>
Chúng ta s i tìm hi u t ng ph n, ph n th nh t chúng ta s tìm hi u v TEXT: ví
d dòng ch sau
<STYLE TYPE="text/css"> a:link { color: blue; text-decoration: none } a:active { color: red; text-decoration: none } a:visited { color:
blue; text-decoration: none } a:hover { color: green; text-decoration: underline } </STYLE>
a:link là hi n th khi b n nhìn th y màu ch là xanh
a:ative là hi n th màu # khi b n click vào dòng ch ó
a:visited là hi n th màu xanh khi b n nhìn th y
a:hover là hi n thì màu xanh lá cây khi b n dùng con chu t $t lên dòng ch ó
Text-decoration: là dùng trang trí dòng ch ví d underline là g ch d i
và sau ây là nh ng code có tác d ng t ng t% nh trên nh ng thay i màu:
a.tree:link { color: green; text-decoration: none }
a.tree:active { color: yellow; text-decoration: none }
a.tree:visited { color: red; text-decoration: none }
a.tree:hover { color: orange; text-decoration: underline }
a.dog:link { color: blue; text-decoration: none }
a.dog:active { color: red; text-decoration: none }
a.dog:visited { color: blue; text-decoration: none }
a.dog:hover { color: green; text-decoration: underline }
<a href="index.html" class="tree">Index</a>
B n có th dùng o n text trên link n m t trang web nào khác nh là nhothuong.html
và c u trúc luôn b t u b ng <a> và k t thúc </a> href=" là dùng link n trang web
mà b n mu n t i." Còn class="tree" là dùng khai báo tên c a class ó.
ây c&ng là o n code c&ng có tác d ng nh trên
<a href="index2.html" class="dog">Index2</a>
Và sau ây là nh ng o n code, b n có th trang trí thêm làm xung thêm ch!c n"ng
c a nó.
<STYLE TYPE="text/css"> a:link { color: green; text-decoration: none } a:active { color: yellow; text-decoration: none } a:visited {
color: green; text-decoration: none } a:hover { color: green; text-decoration: underline; background: #F9EDED } </STYLE>
<STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited {
color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-family : Verdana, Arial, Helvetica, sans-
serif; } </STYLE>
<STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited {
color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-size:40pt } </STYLE>
<STYLE TYPE="text/css"> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited {
4. color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-weight: bold} </STYLE>
<STYLE TYPE="text/css"> a.italic:link { color: green; text-decoration: none } a.italic:active { color: yellow; text-decoration: none }
a:italic:visited { color: green; text-decoration: none } a.italic:hover { color: orange; text-decoration: underline; font-style: italic}
</STYLE>
B n mu n a con tr c a b n vào CSS ch c n dùng dòng sau
CURSOR: url(tencontro.ani);
Ti p theo sau chúng ta tìm hi u v scroll bar trong CSS
ví d o n code sau:
<STYLE TYPE="text/css"> BODY { scrollbar-base-color: orange; scrollbar-arrow-color: green; scrollbar-DarkShadow-Color: blue;
} </STYLE>
scrollbar-base-color: orange; là hi n th màu cam, cho nguyên thanh bar t trên xu ng
d i
scrollbar-arrow-color: green; là hi n th màu xanh, cho 2 cái m&i tên lên và xu ng
scrollbar-DarkShadow-Color: blue; là hi n th bóng màu xanh c a thanh scroll
scrollbar-base-color: là hình hi n th toàn b màu c a thanh scroll
scrollbar-Face-Color: là hi n th màu trên b m$t c a thanh scroll
scrollbar-Highlight-Color: là hi n thì màu hightlight c a thanh scroll
Bài vi t v các tùy bi n trong giao di n ( r t t t cho b n nào mu n thay i màu s c c a
skin forum )
Chèn nh n n vào ph n nh p n i dung bài vi t:
Vào Style & Templates/ Manager Style/ Main CSS
T i ph n So n th o WYSIWYG ta thay ph n màu n n background thành
#F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center
Trong ó tên "anhnen_text_box.gif" là tên nh mà b n mu n chèn $t t i th m c
images/misc/
Th thui
Làm vi n cho nút
Ta t i ph n Nút (Button)
Thay vào giá tr màu n n là: #E4E7F5
Thêm vào ô thu c tính CSS $c bi t (phía bên ph i c a ô màu n n y):
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-
BOTTOM: #5182c2 1px dotted;
Trong ó tên "anhnen_text_box.gif" là tên nh mà b n mu n chèn $t t i th m c
images/misc/
Th thui
Làm vi n cho nút
5. Ta t i ph n Nút (Button)
Thay vào giá tr màu n n là: #E4E7F5
Thêm vào ô thu c tính CSS $c bi t (phía bên ph i c a ô màu n n y):
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-
BOTTOM: #5182c2 1px dotted;
Sau ó b n có th thay các thu c tính nh :
màu s c vi n (#5182c2)
dày vi n : 1px dotted
Chèn nh n n vào th Body c a trang ch . Cái này n u bi t cách s d ng thì s r t
h u ích
T i ph n Trang n n (Background page) ngay bên d i ph n Body ó ta nh p thu c
tính vào ô màu n n nh sau:
#FFFFFF url(images/misc/dot.gif)
Sau ó b n có th thay các thu c tính nh :
màu s c vi n (#5182c2)
dày vi n : 1px dotted
Chèn nh n n vào th Body c a trang ch . Cái này n u bi t cách s d ng thì s r t
h u ích
T i ph n Trang n n (Background page) ngay bên d i ph n Body ó ta nh p thu c
tính vào ô màu n n nh sau:
#FFFFFF url(images/misc/dot.gif)
Trong ó tên nh là "dot.gif" $t trong th m c "images/misc/"
Category Strips
'Category Strips' c dùng v i hai m c ích. Nó c dùng ch' ra m t 'Chuyên m c'
di(n àn, và nó c&ng c s d ng nh m t ki u giao di n cho n i dung thanh tiêu
c a h u h t các b ng.
N u ta mu n chèn nh vào ph n thanh tiêu c a "Chuyên m c" thì ta nh p vào ô màu
n n nh sau:
#FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left
Trong ó #FFFFFF (màu tr ng) là màu n n còn nh n n thì các b n c&ng ã hi u v i
ph n trên.
L u ý r ng các b n ph i chú tr ng c n màu nh n n và màu Font. cho 2 cái có
t ng ph n cho d( c
Màu u tiên (First color) và màu th hai (Second color)
Mô t :
H u h t các b ng trong di(n àn dùng màu u tiên ho$c th! hai cho màu n n. $t thu c
6. tính s d ng 'Màu u tiên' t i ây.
Màu u tiên là màu n n c a ph n n i dung bài vi t khi b n xem ch
Màu th! hai là màu n n c a ph n có ch!a tên s d ng, Avatar, danh hi u... c a ng i vi t
bài
Các b n nên s a cho phù h p v i tông màu c a màu n n di(n àn m t cách hài hoà.
Sau ây là thi t l p giao di n c a tôi ã th%c hi n. Tôi cho r ng giao di n này s a thêm
m t vài chi ti t n a thì ch)ng kém giao di n c a anh Admin bên này. Chú ý r ng giao
di n *p thì ph i i ôi v i b nút *p. Các b n nên s m cho mình m t b nút "n ý v i
giao di n. Còn bây gi ây là ph n giao di n c a tôi:
Body
Gi nguyên thi t l p g c
----------
Trang n n (Background page)
Màu n n: #FFFFFF url(images/misc/dot.gif)
Màu Font: #000000
------------------------------
<td>, <th>, <p>, <li>
Gi nguyên thi t l p g c
-------------------------
Vi n b ng
Gi nguyên thi t l p g c
-------------------------------
Category Strips
Màu n n: #FFFFFF url(images/misc/tm.gif) no-repeat center
Màu Font: #003366
Liên k t CSS bình th ng
Màu n n: transparent
Màu Font: #003366
Text decoration: None
Liên k t CSS ã vào:
Màu n n: transparent
Màu Font: #666666
Text decoration: None
Liên k t CSS Hover
Màu n n: transparent
Màu Font: #006699
Text decoration: underline
-----------------------------------------
Table Header
Màu n n: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left
Màu Font: #003366
Liên k t CSS bình th ng
Màu n n: transparent
Màu Font: #003366
7. Text decoration: None
Liên k t CSS ã vào:
Màu n n: transparent
Màu Font: #666666
Text decoration: None
Liên k t CSS Hover
Màu n n: transparent
Màu Font: #006699
Text decoration: underline
--------------------------------------
Table Footer
Màu n n: #FFFFFF
Màu Font: #003366
Liên k t CSS bình th ng
Màu n n: transparent
Màu Font: #003366
Text decoration: None
Liên k t CSS ã vào:
Màu n n: transparent
Màu Font: #666666
Text decoration: None
Liên k t CSS Hover
Màu n n: transparent
Màu Font: #006699
Text decoration: underline
----------------------------------
Màu u tiên Màu th hai
Màu n n: #FFFFFF
Màu Font: #003366
Thu c tính CSS $c bi t:
border: 1px solid #E5E5E5;
----------------------------------
So n th o WYSIWYG
Màu n n: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center
Màu Font: #003366
Thu c tính CSS $c bi t:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted;
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
-------------------------
Ô nh p li u
Thu c tính CSS $c bi t:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted;
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
----------------------------------
Nút (Button)
Màu n n: #E4E7F5
8. Thu c tính CSS $c bi t:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted;
BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
------------------------------------
Menu
Small Font
Time Color
c gi nguyên thi t l p g c
-------------------------------------
Navbar Text
Màu n n: #FFFFFF
Màu Font: #003366
-------------------------------------
Highlighted Font
Màu n n: #FFFFFF
Màu Font: #FF0000
------------------------------------
Panel Surround
Màu n n: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left
Màu font: #000000
---------------------------------
Panel (Forms)
Màu n n: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left
Màu font: #000000
--------------------------------
<legend>
Gi nguyên
--------------------------------
i u khi n menu Popup
Màu n n: #FFFFFF
Màu Font: #003366
Thu c tính CSS $c bi t:
padding: 3px 6px 3px 6px;
white-space: nowrap;
Liên k t CSS bình th ng
Màu n n: #FFFFFF
Màu Font: #003366
Text decoration: None
Liên k t CSS ã vào:
Màu n n: #FFFFFF
Màu Font: #666666
Text decoration: None
Liên k t CSS Hover
Màu n n: #FFFFFF
Màu Font: #006699
Text decoration: underline
9. -------------------------------
Popup Menu Body
Gi nguyên
-------------------------------
Tùy ch n dòng cho Menu Popup
Màu n n: #FFFFFF
Màu Font: #000000
Thu c tính CSS $c bi t
white-space: nowrap;
cursor: pointer;
Liên k t CSS bình th ng
Màu n n: #FFFFFF
Màu Font: #22229C
Text decoration: None
Liên k t CSS ã vào:
Màu n n: #FFFFFF
Màu Font: #22229C
Text decoration: None
Liên k t CSS Hover
Màu n n: #FFFFFF
Màu Font: #FFFFFF
Text decoration: None
---------------------------------
Menu chuy n nhanh
Item selected
Màu n n:#FFFFFF
Màu Font: #003366
---------------------------------