thiết kế website với photoshop, css và vận hành với wordpress

MỤC LỤC
Lời mở đầu
Việc thiết kế và sở hữu riêng một Website tự tạo giờ đây đã trở nên đơn
giản hơn với nhiều công cụ cho phép bạn làm được điều đó. Vai trò của
Website ngày càng rõ nét trong bối cảnh bùng nổ công nghệ thông tin và nhu
cầu chia sẻ thông tin, tức dữ liệu của con người. Một doanh nghiệp đương
nhiên cần một Website riêng để có thể cung cấp thông tin về mình cho khách
hàng, giới thiệu sản phẩm của mình đến khách hàng theo cách nhanh nhất,
tiện nhất và công nghệ nhất mà họ có nhiều điều kiện để thực hiện. Bạn là
một cá nhân với mong muốn chia sẻ những thông tin tri thức của bạn cho bạn
bè, cộng đồng, hay chỉ đơn giản là muốn cho bạn bè hiểu hơn về mình qua
những gì bạn đăng tải trên Website riêng. Nhưng không dừng lại ở đó, với
những nhu cầu ngày càng cao hơn về tính riêng biệt và độc đáo, tính thẩm
mỹ, bộc lỗ rõ trong xu hướng Web 2.0 hiện nay thì một Website ra đời còn
phải đáp ứng nhiều hơn về tính thẩm mỹ và là hình ảnh của doanh nghiệp
cũng như cá nhân sở hữu Website. Điều đó đủ để thấy sự cần thiết và một nhu
cầu rất lớn về việc thiết kế và vận hành riêng một Website mà chúng ta có thể
tùy biến tất cả mọi thứ từ khâu thiết kế đến vận hành. Với lý do đó, trong Đề
án môn học này, tôi chọn đề tài “Thiết kế Website với Photoshop, CSS và vận
hành với WordPress”. Đề tài sẽ đi những bước cơ bản từ thiết giao diện trong
Photoshop, dựng code HTML, định dạng với CSS và cuối cùng là quản lý,
biên tập với WordPress, một CMS miễn phí và nhiều tính năng.
1
Thiết kế Website với Photoshop và CSS
I. Thiết kế Layout giao diện Web với Photoshop
1. Cơ bản về thiết kế
Sở hữu một Website không phải điều khó, có rất nhiều template hay các
Website cho phép bạn tạo nhanh một Website chỉ trong một vài phút với
những thiết đặt mặc định trước. Nhưng để có một giao diện Website đúng với
nhu cầu về hình thức cũng như tính thẩm mỹ ban đầu của người dùng, không
phụ thuộc vào những gì các template có sẵn thì Photoshop sẽ là sự lựa chọn

chủ động nhất để chúng ta làm điều này. Thiết kế bất kể điều gì bạn muốn với
các công cụ đồ họa trong Photoshop sẽ giúp bạn làm chủ giao diện của riêng
mình mà không trùng lặp với bất cứ website nào.
Photoshop CS5
Hiện có rất nhiều phiên bản Photoshop cho bạn lựa chọn. Với các hiệu
ứng đa dạng, Photoshop sẽ mang tới cho Website của bạn sự độc đáo riêng
biệt, không giới hạn, chỉ phụ thuộc vào khả năng đồ họa của bạn.
2
2. Xây dựng theo từng đối tượng
Giao diện Website Đội SVTN – ĐH Kinh tế Quốc dân

Để có giao diện như hình trên, phải đi qua từng bước chi tiết và căn
bản nhất sau:
− Tạo File mới đầu tiên với kích thước như Website thực mong
muốn. Lưu ý một điểm là chiều rộng (width) của file ảnh trong khi thiết kế là
chiều dài thực của Website, còn chiều cao (height) thì là chiều cao cơ bản
mong muốn. Vì khi Website hình thành rồi đi vào vận hành, chiều cao của nó
tùy thuộc vào nội dung đăng tải trên Web.
3
Cửa sổ làm việc với Photoshop
− Đổ mà nền mong muốn, không quá sặc sỡ và tạo những Layer đầu
tiên. Thiết kế trong Photoshop thực ra là làm việc với các Layer, thao tác và
tạo hiệu ứng trên từng Layer. Kết quả cuối cùng chính là sự kết hợp của các
Layer này. Và để thiết kế được bạn phải biết cơ bản về Layer và các tính năng
của Photoshop. Điều này bạn có thể tìm trong file Help của Photoshop hoặc
tài liệu Internet.
− Xu hướng Web 2.0 hiện nay đang đẩy các Website theo hướng đồ
họa, mỹ thuật cao, với các hiệu ứng 3D, đổ bóng và đổ màu Gradient theo các
đối tượng. Đây cũng chính là điều tạo nên sự độc đáo của các Website 2.0
− Tạo các Folder riêng cho Header, Primary, Sidebar, Header để tiện

quản lý. Tiến hành làm lần lượt từng thành phần của Website. Trong mỗi
folder này sẽ là các Layer khác nữa chi tiết đến từng thành phần của đối
tượng.
4
Lần lượt làm với từng phần, từng lớp của file
− Các thành phần trích xuất gồm: các mẩu màu background của các
đối tượng(màu nền, ảnh nền Body, nền banner, primary, sidebar, footer,
comment ), các hình ảnh, icon Sử dụng Slice Tool, Drop tool của
Photoshop chúng ta có thể lấy các đối tượng này chính xác đến từng pixel.
Folder chứa các mẩu ảnh đã cắt để chẩn bị cho khâu dựng code HTML
5
− Khi hoàn thành thiết kế, tiến hành cắt file theo từng đối tượng, chúng
được dùng làm “nguyên liệu” cho khâu tiếp theo là dựng code HTML. Lưu ý
khi cắt nên chính xác đến từng pixel, để khi style có thể đạt giống với file ảnh
nhất. Các thành
Phần cắt ra phải đầy đủ, chính xác, không quá to, quá nhỏ để thuận lợi
nhất cho khâu dựng code HTML.
II. Dựng Code HTML
1.
Công cụ code
Bước dựng code HTML là một khâu quan trọng bắt buộc để có thể tạo
nên cái khung chung cho Website. Để làm được điều này, có rất nhiều công
cụ hỗ trợ, gồm cả miễn phí và có phí. Một số công cụ tiêu biểu thường được
sử dụng như: DreamWeaver, PHP Designer, E-Text Editor
Nhưng hầu hết chúng là những công cụ thương mại. Những công cụ
miễn phí với tính năng chia sẻ và mở như hiện nay đã có rất nhiều và chúng
cũng hoàn toàn đủ cho nhu cầu sử dụng của bạn. Có thể kể đến như: NotePad,
NotePad ++, SetupEditPadLite, CoffeeFreeHTML
6
Những công cụ này sẵn có trên mạng và chúng đang được sủ dụng rất

nhiều với các tính năng ưu việt như Hightlight Code, Auto-define, FTP,
multi-tabs, PHP, CSS supported
2.
Sử dụng các thẻ Div thay cho các thiết kế Bảng trước đây
Theo cách thiết kế Web truyền thống, người ta hay dựng HTML thông
qua việc sử dụng bảng (Tabble). Cách làm này có thể dễ tiếp cận hơn, đặc biệt
với những người mới học code hoặc sử dụng các phần mềm WYSIWYG (what
you see is what you get). Nhưng về lâu dài và để thỏa mãn với việc thiết giao
diện phức tạp, hoặc thao tác hướng đối tượng, sử dụng CSS và các hiệu ứng …
thì cách thức bảng này không đáp ứng và không tỏ ra ưu việt được. Chính vì thế,
chúng ta nên tiếp cận cách sử dụng thẻ Div thay cho dùng bảng thuần túy, chúng
ta sẽ có nhiều lựa chọn và hỗ trợ hơn trong tùy biến gia diện.
7
Code sử dụng thẻ Tabble và thẻ Div
Cú pháp của thẻ Div được quản lý theo ID và Class. Mỗi ID là duy
nhất cho mỗi đối tượng, còn Class thì có thể đặt giống nhau hoặc khác
nhau tùy mục đích của người lập trình. Việc đặt tên cho ID và Class này có
ý nghĩa quyết định cho việc Style bằng CSS sau này. Và nhờ nó ta có thể
tùy biến, thay đổi giao diện nhanh chóng, thuận lợi mà không ảnh hưởng
các đối tượng khác.
Trong một tài liệu HTML không cần quá nhiều thẻ Div và vẫn có thể
bao và quản lý hết được các đối tượng. Thẻ Div cho chúng ta những dòng
code sáng sủa và dẽ quản lý hơn cả về hình thức lẫn cách thức.
3.
Dựng code HTML
Trong đề tài thiết kế Website cho Đội SVTN-ĐH Kinh tế Quốc dân
này, tôi đã sử dụng thẻ các thẻ Div với công cụ là Notepad++ và Text-editor.
Cấu trúc cơ bản của tài liệu HTML cần tạo sẽ như sau:
<html>
<head>

</head>
<body>
<div id="header-outer">
<div id="header">
<div id="banner">
<! Các đối tượng cho Banner >
8
</div>
<div id="menubar">
<ul>
<! Các thẻ <li> cho Menulist >
</ul>
</div>
</div><! End header >
</div><! End header-outer >
<div id="container">
<div id="content">
<div id="primary">
<div id="imageSlider">
<! Các đối tượng cho slide ảnh và tin ở Slide lớn >
</div><! End imageSlider >
<div class="post">
<! Các đối tượng cho bài viết mới nhất >
</div><! End post >
<div class="post">
< ! Các đối tượng cho bài viết trước >
</div><! End post >

<div class="post">
<! Các đối tượng cho bài viết trước nữa >

</div><! End post >

<div class="post-nav">
<! nút Next và Previous cho list dài >
</div>
</div><! End primary >
<div id="sidebar">
<div class="box">
9
<! Các đối tượng cho Box Hoạt động >
</div><! End box0 >
<div class="box">
<! Các đối tượng cho Box Bình luận mới
>
</div><! End box >
<div class="box2">
<! Các đối tượng cho Box Bài đã đăng >
</div><! End box2 >
<div class="box0">
<! Các đối tượng cho Box Liên kết Website >
</div><! End box0 >
</div><! End linkweb >
<div class="box0">
<! Các đối tượng cho Box Addvertising >
</div><! End Addvertising >
</div><! End sidebar >
<div class="clear"></div><! Thẻ Div trống quan trọng này dùng ngăn
chặn sự vỡ giao diện >
</div><! End content >
</div><! End container >

<div id="footer-outer">
<div id="footer">
<! Các đối tượng cho Footer >
</div><! End footer >
10
</div><! End footer-outer >
</body>
</html>
Những phần có Style giống nhau được đặt cho cùng 1 class, VD:
Class=”box”, “box2” Những phần chỉ xuất hiện duy nhất một lần chúng ta
đặt nó với ID. Việc đặt này phải ngắn gọn nhưng đầy đủ để có thể thuận tiện
nhất để định dạng sau này theo ID và Class.
Khi dựng HTML xong là lúc tiến hành một khâu quan trọng: Validate
code, để phát hiện sai sót trong quá trình code. Bộ công cụ “Toolbars for
Designer” với phần Validate Local và Validate qua Website của W3C sẽ tìm
ra tất cả các lỗi mà trong quá trình code mắc phải. Phải đảm bảo code đúng để
có thể bước vào Style với CSS.
III. Style với CSS
1. Giới thiệu CSS
- CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách
mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một
tài liệu Web, chỉ cần một file CSS có thể quản lí định dạng và layout trên nhiều trang
khác nhau.
- CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính
của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính
của thẻ vào trong một file riêng có phần mở rộng là ".css"
- Có thể khai báo CSS bằng nhiều cách khác nhau. Có thể đặt đoạn CSS
của phía trong thẻ <head> </head>, hoặc ghi ra file riêng với phần mở rộng
".css", ngoài ra, có thể đặt chúng trong từng thẻ HTML riêng biệt
- Ví dụ:

#box{
width: 400px; /* độ rộng */
11
height: 300px;/* độ cao */
background-color: #CC0000; /* màu nền */
}
2. Style với CSS
Khi đã nắm rõ những điều cơ bản về CSS, chúng ta bắt đầu khâu CSS,
căn chỉnh, style cho các đối tượng từ file HTML thô đến khi chúng giống với
ý đồ thiết kế ban đầu nhất. Trong sự giới hạn của bản báo cáo này, tôi không
trình bày chi tiết từng cú pháp cũng như code mà tôi đã làm. Mọi thông tin về
CSS trong Website này đều có đầy đủ trong file “style.css” trong thư mục
“svtnneu_viethung” của bản báo cáo.
Nhưng có một số điều đáng lưu ý mà tôi thu được trong quá trình làm
CSS như sau:
a. Độ lớn của Box (với tất cả các đối tượng :Div, p, img ). Khi khãi
báo các giá trị Margin, Padding thì các box này tự động mở rộng ra 2 chiều,
đó là nguyên nhâ gây ra vỡ giao diện. Khắc phục điều này chúng ta nên sử
dụng một thẻ Div bao quanh rồi style chúng trong thẻ Div đó.
b. Sử dụng Clear và Float để căn chỉnh ảnh và nội dung bài viết trên
Website. Có thể đặt một thẻ Div trống trong tài liệu HTML rồi “clear:both”
chúng trong file style.css để có thể ngăn cách các thành phần trong Website
không chiếm chỗ nhau khi kích thước thay đổi.
Float ảnh, đối là một cách làm để căn chỉnh hữu hiệu cho các bài viết
được ở vị trí như mong muốn và không dẫn tới vỡ giao diện.
c. Các thành phần Position Property
Position Property chi phối mối tương quan giữa các thành phần của
trang web. Có 4 giá trị cho Position property: Static, Absolute, Fixed và
Relative, trong đó Static là giá trị mặc định khi không có giá trị nào được gán.
12

Hiểu rõ cách thức hoạt động của 4 loại này là điều vô cùng quan trọng nhưng
hầu hết mọi người chưa đánh giá đúng vai trò của nó trong việc định vị các
thành phần linh động trên giao diện.
d. Trình bày CSS có hệ thống, không viết tắt nhiều, không phức tạp,
gộp các thành phần tương đương vào một nhóm là cách tốt nhất để style,
tùy biến và quản lý Website sau này. Những dòng code phức tạp sẽ khó để
quản lý và sửa đổi, đặc biệt với những trang web phức tạp.
3. CSS3
CSS3 vẫn đang trong giai đoạn phát triển và hoàn thiện trước khi được
chính thức đưa vào sử dụng. Hiện tại mới chỉ có Safari và Google Schrome
mới hỗ trợ đầy đủ tính năng của CSS3. Trong tương lai chúng ta sẽ có nhiều
tùy biến và tính năng cao cấp hơn cho việc thiết kế, đặc biệt với xu hướng
Web 2.0 ngày nay.
IV. Các công cụ hỗ trợ
Các công cụ hỗ trợ, hay rõ hơn là các Add ons cho trình duyệt (đặc biệt
với Firefox) là những công cụ thực sự đắc lực cho các desiger.
− Texter: công cụ hỗ trợ code cả với HTML và CSS. Những dòng
code dài nhưng là chung cho nhiều phần, nhiều trang Web thì việc gõ đi gõ lại
chúng là điều tốn thời gian. Texter sẽ tự động sinh code cho bạn để nâng cao
hiệu suất code trong khoảng thời gian ngắn. Những dòng code này người sử
dụng có thể tự đặt cho mình và dùng nó mỗi lần gọi chương trình.
− FireBurg: Đây là công cụ rất mạnh, một Addons của Firefox, hỗ trợ
trực quan soi cấu trúc của một tài liệu HTML hay CSS bất kỳ, các thông số
cảu tài liều HTML hiển thị ngay trên trình duyệt và bạn có thể edit nó ngay
chính trên trình duyệt, tìm cấu trúc, ID, Class của đối tượng muốn hướng tới.
Nó là công cụ vô cùng hữu dụng với những Designer chuyên nghiệp.
− Bộ công cụ “Toolbar for Designer”, bao gồm tất cả cá công cụ
13
thông dụng nhất cho một người làm web như: edit CSS, HTML, Validate,
Resize ảnh, Form, Cookies, Source View, Java Bộ công cụ này nằm ngay

trên Toolbar của trình duyệt và bạn có thể sử dụng rất tiện lợi. Tất cả các Add
ons này đều được cung cấp miễn phi trên trang của Firefox.
Vận hành với WordPress
14
Ι. Các CMS quản lý và biên tập Website
CMS (viết tắt của Content Management System) Hệ thống quản trị nội
dung, tạp mộ môi trường cho người dùng quản trị dữ liệu. Với Website thì
đây là nhữn hệ quản trị nội dung dành cho các Website, cập nhật, thay đổi
nội dung trên Website.
Các CMS phổ dụng nhất:
1. WordPress
2. Drupal
3. Joomla
4. DotNetNuke
Hầu hết các CMS này đều là một phần mềm mở và miễn phí để làm
15
blog cá nhân, trang web cá nhân nổi tiếng. WordPress được xây dựng trên sự
tiện dụng, cùng với các định dạng chuẩn của web và luôn miễn phí!
ΙΙ. WordPress
Khi đã hoàn tất một Website tĩnh, để website này có thể cập nhật và
đăng tải được chúng ta phải vận hành nó với các CMS. WordPress hỗ trợ
mạnh các công cụ cho người sử dụng để quản lý, biên tập nội dung Website
của mình.
Wordpress không chỉ dành cho những Blog, Website cá nhân mà kể cả
các doanh nghiệp lớn cũng có thể sử dụng Worspress đủ thấy tính đa dạng và
tiện ích của nó.
ΙΙΙ. Vận hành với WordPress
16
Wordpress cung cấp cho người dùng những Template sẵn có từ sự đóng
góp vô cùng lớn của người dùng toàn cầu và hơn thế nữa, nó cho phép người

dùng có thể tự dựng Template riêng cho mình rồi sử dụng mã nguồn của
Wordpress. Người dùng thiết kế ra giao diện của mình, gắn các đoạn mã PHP
và linnk các thành phần với nhau tạo nên một sự quản lý động trong toàn bộ
hệ thống Website. Wordpress cung cấp thiết lập và hiển thị các Pages,
Categories, khi vực Back-end viết bài, các Widgets cho SideBar, Search
Form, Loop, Comments Wordpress hỗ trợ gần như là hoàn chỉnh cho
taatscar các nhu cầu về Website của người dùng.
Trong Đề tài này, tôi dựng riêng một giao diện và sử dụng Source
Code miễn phí của WordPress.
1. Cấu trúc
Vòng lặp Loop là đặc trưng cơ bản nhất tạo nên những ưu việt của
WordPress:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
Sau vòng lặp này là tất cả những cài đặt cá nhân của người dùng cho
những gì họ muốn hiển thị:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="post"><a href="<?php the_permalink();?>"><img class="intro-img"
echo get_post_meta($post->ID, 'thumbnail', true);?> "alt="Ảnh minh
họa"/></a>
<h1 class="post-tit"><a href="<?php the_permalink();?>"><?php the_title();?
></a></h1>
<p class="info"><span class="poster">Bởi:</span><?php the_author();?> <span
class="in-cat"> trong </span><?php the_category(' ');?> <span class="on-date"> ngày
</span> <?php the_time('F j, Y') ;?> <a href="<?php comments_link();?>"><?php
comments_number('1 Bình luận', '2 Bình luận', '% Bình luận');?></a></p>
<p>
17
<?php the_content_rss('',false,'',45);?>
</p>
</div><! End post >

<?php endwhile ;?>
<?php else: ?>
<p class="nonep">
Phần này chưa có bài viết, bạn có thể đóng góp bài viết
qua mail củ BQT!
</p>
<?php endif ;?>
Để lấy Link trực tiếp cho mỗi cú click, có thể sử dụng câu lệnh PHP sau:
<?php the_permalink();?>">
<a href="<?php the_permalink();?>"><img class="intro-img" echo
get_post_meta($post->ID, 'thumbnail', true);?> "alt="Ảnh minh họa"/></a>
Câu lệnh sẽ lấy ra nội dung của Link liên quan trong Database. Và để
hiện được nội dung cụ thể này, Wordpress hỗ trợ một file PHP riêng là
“single.php”. Tất cả những nội dung chi tiết được hiển thị theo Style của trang
single này:
<?php get_header();?>
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="single">
<h1><?php the_title();?></h1>
<p class="info"><span class="poster">Bởi:</span><?php the_author();?>
<span class="in-cat"> trong </span><?php the_category(' ');?> <span class="on-date"> ngày
</span> <?php the_time('F j, Y') ;?> <a href="<?php comments_link();?>"><?php
comments_number('1 Bình luận', '2 Bình luận', '% Bình luận');?></a></p>
<p class="conte">
<?php the_content('');?>
</p>
</div><! End single >
18
<?php get_footer();?>

Tương tự với Pages và Categories, comments, Search, imageSlider cũng
đều có những trang riêng với những thiết lập riêng để hiện thị cho từng phần mỗi
như người dùng lựa chọn.
Các hàm sử dụng trong Website được lưu và 1 file là “function.php”
hàm này có thể có sẵn của Wordpress hoặc tùy người dùng thiết lập.
2. Biên tập bài trong WordPress
Đây là giao diện Back-en, nơi biên tập các Post cho Website của bạn.
Với trình biên tập đơn giản, thân thiện, nhưng đầy tính năng mạnh mẽ và trực
quan, Wordpress cho bạn giải pháp tốt và nhanh chóng trong quản lý, điều
hành nội dung Website của mình. Người dùng có thể soạn thảo dưới dạng
HTML hay trực quan (Visual) để định dạng bài viết. Worpress hỗ trợ Gallery
ảnh, video, các thẻ, tags. Các bài Post có thể Publish ngay hoặc dưới dạng
19
Draft, và có thể chọn Categories cho bài viết của bạn.
WordPress hỗ trợ nhiều hơn thế cho bạn với Các Link, Meta, Comment
management, thay đổi Themes, Tùy biến và kéo thả các Widgets vào Sidebar,
hỗ trợ Menus hoặc cả Menus Custome.
Khi bài đã được xuất bản, tất cả các thông tin thay đổi, cập nhật, phản
hồi qua Website của bạn sẽ được Wordpress lưu lại và quản lý chặt chẽ. Chỉ
người admin mới có quyền truy cập Database và biên tập nội dung.
20
Kết luận
Trong phạm vi đề tài này lượng kiến thức cũng như sự phức tạp của
việc thiết kế và vận hành hoàn chỉnh một Website chưa đạt sâu sắc. Nhưng
qua kết quả của đề tài, tôi muốn mọi người có được những giải pháp tốt và
tiện lợi, không quá phức tạp để có thể có cho riêng mình một Website tự tạo
và quản lý hoàn toàn, với sự trợ giúp của các công cụ thích hợp. Việc tự thiết
kế và quản lý này cho người dùng quyền tự quyết cho việc định hình cũng
như quản lý Website của mình. Phục vụ tốt cho cả nhu cầu cá nhân hay cả
thương mại. Đặc biệt, với sự hỗ trợ ngày càng tốt và hoàn thiện của các công

cụ miễn phí, được cung cấp bởi đông đảo cộng đồng người dùng, chúng ta
ngày càng có nhiều công cụ hơn để hoàn thành mục đích của mình. Đề tài
cũng muốn đề cao vai trò của các hệ CMS miễn phí, ngày càng thân thiện với
người dùng. Những công cụ này rất tốt cho mọi người, và điều đặc biệt là nó
hoàn toàn miễn phí, đó là mong muốn giới thiệu với mọi người sự tiện lợi của
nó. Xã hội công nghệ thông tin với vô cùng nhiều công cụ đã tạo điều kiện tốt
cho người dùng thực hiện được công việc của họ mà tốn ít công sức nhất, điều
quan trọng là chúng ta nên biết tận dụng và khai thác những thế mạnh này.
21