8 bài hướng dẫn chuyển PSD sang HTML

Các bài hướng dẫn dưới đây dạy bạn cách chuyển các file thiết kế từ Photoshop sang HTML và CSS.

1. Từ PSD tới HTML, từng bước chuyển đổi một trang web

Bài hướng dẫn từ Net Tuts, bạn sẽ học cách chuyển một thiết kế đẹp (Creatif) thành HTML

2. Từ PSD tới XHTML / CSS

Bài hướng dẫn từ HV Designs sẽ dạy bạn cách viết mã HTML & CSS từ file photoshop. Bài viết đơn giản & dễ hiểu.

3. Làm thế nào để chuyển file PSD thành XHTML

Một seri video 3 phần từ Net Tuts, bạn sẽ học được rất nhiều từ đây, bài hướng dẫn nói đến cả việc xử lý lỗi với IE6

4. Chuyển đổi từ Photoshop lên web

(CSS Tricks) Làm thế nào chuyển từ file thiết kế lên website

5. Cắt file PSD

Sau khi hướng dẫn cách viết mã HTML, Net Tuts còn so sánh xem có sự khác nhau giữa file PSD và HTML

6. Bắt đầu xây dựng trang portfolio

Một bài hướng dẫn khác từ Net TutsView Tutorial

7. Lab TV Layout, PSD tới HTML

Bài viết từ PSDVibe hướng dẫn bạn chuyển từ layout photoshop sang HTML & CSS

8. Chuyển PSD thành HTML / CSS dễ dàng

Sau khi xem đủ 4 phần hướng dẫn, bạn có thể chắc chắn hơn về khả năng viết mã HTML của mình

Nguồn được lấy từ : http://ntuts.com/tong-hop/8-bai-huong-dan-chuyen-psd-sang-html

Artisteer: Tạo nhanh giao diện WordPress, Blogger

Với sự trợ giúp của Artisteer, thiết kế giao diện cho WordPress, Joomla, Blogger chỉ là “chuyện nhỏ”.
Điểm đặc biệt của Artisteer: hỗ trợ thiết kế giao diện cho dịch vụ Blogger, giao diện HTML và bốn CMS thông dụng hiện nay (Joomla, WordPress, Drupal, DotNetNuke).

Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 810x566.

Trong bài này, người viết xin hướng dẫn cách thiết kế giao diện cho WordPress. Với các mã nguồn khác, bạn thực hiện gần như tương tự, chỉ khác ở một vài thành phần đặc trưng.
Giao diện của Artisteer được thiết kế theo phong cách của Office 2007, với các thẻ sau:

Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 1024x739.

Layout

Để thay đổi cách bố trí giữa hai thành phần menu ngang và header, bạn bấm mục Page Layout và chọn lại cách sắp xếp lại vị trí của chúng. Mặc định, giao diện tạo ra chỉ có hai cột. Bạn bấm Columns để thay đổi số cột và vị trí sắp xếp của các cột (ví dụ kiểu theme ba cột với hai sidebar được bố trí hai bên,…). Để thay đổi kích thước của từng cột, bạn bấm chọn Width Options rồi tùy chính tỷ lệ cho phù hợp.

Đối với WordPress thì trong thẻ Layout sẽ có thêm các mục như Vertical Menu Position (vị trí đặt menu dọc), Search Position (vị trí khung tìm kiếm), Categories Position (bảng danh mục blog), Archive Position (vị trí hộp lưu trữ), Blogroll Position (vị trí khung liên kết website). Bạn bấm vào từng mục để thay đổi vị trí cho từng thành phần trên.
Background
Tại thẻ Background có nhiều tùy chọn để bạn trang trí cho ảnh nền như: Image or Texture (ảnh hoa văn), Gradient (cách phối màu nền),… Bạn bấm Fill Color để thay đổi màu sắc của nền, hoặc chọn From File và tìm chọn ảnh có sẵn máy tính làm hình nền cho web. Nếu muốn tùy chỉnh lại các thông số như độ trong suốt hay vị trí ảnh nền, bạn chọn Options.

Sheet

Sheet là khung chứa toàn bộ nội dung của website (đặt bên trên background). Bạn có thể thay đổi kích thước khung thông qua mục Width và độ bo tròn của sheet tại mục Radius, thiết lập độ trong suốt và màu sắc của sheet trong mục Transparency và Fill Color. Mục Top Offset quy định khoảng cách từ đầu website đến sheet. Sau mỗi lần thao tác, bạn có thể xem sự thay đổi của giao diện ngay trong màn hình làm việc của Artisteer.
Header

Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 1039x477.

Tại khung Background, bạn bấm nút để chọn một mẫu có sẵn làm banner cho web, hoặc chọn From File để sử dụng ảnh trong máy tính. Ngoài ra, bạn có thể chèn thêm hoa văn vào banner bằng cách bấm Effects > Texture. Để thêm màu sắc cho banner, bạn chọn thêm ảnh minh họa nhỏ đặt trên banner thông qua khung Foreground, rồi áp dụng hiệu ứng cho chúng tại mục Effects, bấm Position để thay đổi kích thước ảnh. Tại hai dòng Headline và Slogan, bạn điền mô tả và slogan của website. Đặc biệt, tại khung Flash, chương trình cung cấp thêm các mẫu banner dạng flash rất sinh động. Nếu không thích flash có sẵn, bạn bấm From File và tìm chọn file flash do bạn tự thiết kế.
Menu, Vertical Menu
Thẻ Menu giúp bạn thay đổi lại màu sắc, hình dáng của thanh menu nằm ngang. Bạn bấm vào mục Styling để chọn một kiểu cho menu, sau đó chuyển qua khung Menu Bar để thay đổi màu sắc cho toàn thanh menu. Tại khung Item, bạn chọn màu sắc cũng như hiệu ứng khi rê chuột vào từng mục trong menu. Tương tự, mục Subitem chứa các thiết lập cho các mục menu con. Bạn bấm vào biểu tượng Subitem > Levels và chọn No Subitems (menu không xổ xuống) tại khung hiện ra, hoặc Multilevel (khi rê chuột vào mục, các menu con sẽ xổ xuống từ menu lớn).

Tương tự, thẻ Vertical Menu hỗ trợ tạo thanh menu dọc cho web với nhiều mẫu và cách phân cấp menu con rất chuyên nghiệp.

Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 823x503.

Articles
Thẻ Articles cho phép bạn trang trí mọi thứ cho bài viết trên web, từ font, màu sắc chữ cho đến các chi tiết nhỏ như biểu tượng thẻ Quote, biểu tượng người viết bài, khung Comment,…

Hình này được thu nhỏ lại. Click vào đây để xem hình phóng lớn. Hình gốc có kích thước 881x542.

Sidebar
Tùy theo giao diện mà bạn chọn, một website sẽ có một đến hai thanh Sidebar. Trên sidebar chứa các thành phần nhỏ như menu, khung tìm kiếm, các khung cập nhật bài viết, nhận xét mới (các thành phần này được gọi chung là block). Bạn bấm mục Header để chỉnh lại màu sắc cho phần trên cùng của block, chèn thêm các Icon cũng như áp dụng các hiệu ứng màu sắc cho đẹp mắt hơn. Tương tự, bấm Content để chọn màu nền, các kiểu hoa văn trang trí cho block.

Buttons
Nút bấm cũng là một chi tiết khá quan trọng trên web, giúp người xem truy cập vào nhiều nội dung được cung cấp. Bạn chọn lựa mẫu nút bấm, rồi thay đổi màu sắc, kích thước sao cho phù hợp với tổng thể giao diện web.
Footer
Với thẻ Footer, bạn dễ dàng tùy biến phần thông tin ở cuối website gồm: màu sắc, hyperlink, biểu tượng RSS.

Colors & Fonts
Sau khi đã chọn các thành phần trên, bạn chuyển sang thẻ Colors & Fonts > chọn Color Themes. Tại đây, bạn chọn một mảng màu gồm ba màu chủ đạo cho website. Bạn cũng có thể tự chọn ba màu tại khung bên cạnh. Xong, bấm nút Adjust để xem các mảng màu tương tự.

Nếu không muốn chỉnh sửa nhiều, bạn chọn thẻ Ideas, rồi bấm Suggest Design. Chương trình sẽ tự động tạo cho bạn một theme đồng bộ về màu sắc.
Tương tự, bạn bấm Suggest Layout, Suggest Sheet,… để chương trình tự động tạo ra thành phần mình muốn.
Sau khi đã hoàn tất, tại thẻ Ideas, bạn chọn Export để xuất theme ra thành một thư mục, rồi chọn Export Options… để đặt tên cũng như mô tả về giao diện.
Lưu ý: Với dịch vụ Blogger, sau khi tạo xong giao diện, bạn chỉ cần nhập tên truy cập và mật khẩu, Artisteer sẽ tự động liên kết đến blog và thay đổi giao diện mới giúp bạn. Quá tiện!
P.T

Link Download

www.mediafire.com/?e448a5u58tn2xve

Hướng dẫn cài đặt forum phpbb từ A đến Z

Mã nguồn phpbb là mã nguồn miễn phí nhưng chức năng không thua kém gì vbb và vậy hiện nay rất nhiều người đang hướng tới sử dụng phpbb. hôm nay mình xin hướng dẫn các bạn tạo 1 diễn đàn cho riêng mình bằng phpbb.

Bước 1: đầu tiên các bạ cần tải về bản php tại đây. các bạn có thể tìm bản khác. bản này mình seach trên google.

Bước 2 bạn đăng ký 1 host ( có thể thuê hoặc dùng free cũng đựoc)

Bước 3: bạn giải nén và up toàn bộ lên host. có thể up trực tiếp host đã hỗ trợ hoặc bạn sử dụng phần mềm FTP để up lên. theo kinh nghiệm của mình thì up trực tiếp nhanh hơn (khoẳng 5 phút) còn up bằng fFtp thì bạn chờ khoảng 1h.

Bước 4 : Chuẩn bị cài đặt

Tiến hành CHMOD là 777 (bằng phần mềm FTP sẵn có hoặc từ công cụ File Manager trong Hosting Control Panel của bạn) cho các thư mục và tập tin sau:
config.php
cache/
files/
images/avatars/upload/
store/

Bước 5: bạn chạy link http://domain của bạn/install/. ví dụ của mình là http://dayhocdaknong.oni.cc/install/

hình

This image has been resized. Click this bar to view the full image. The original image is sized 993x501px.

bạn chọn ngôn ngữ nếu cần -> chon cài đặt
bạn chọn tiến hành bước kế tiếp bạn tiếp tực chọn “Bắt đầu cài đặt” màn hình hiện ra bạn điền thông tin tương tự như sau

chọn tiến hành bước kế tiếp.

nếu CSDL của bạn chưa được sử dụng thì nó sẽ báo kết nối thành công

Chọn tiến hành bước kế tiếp bạn điền thông tin tương tự như sau

Chọn tiến hành bước kế tiếp nó sẽ báo như sau

Bạn tiếp tục chọn tiến hành bước kế tiếp

This image has been resized. Click this bar to view the full image. The original image is sized 631x66px.

This image has been resized. Click this bar to view the full image. The original image is sized 608x350px.

Đến thiết lập nâng cao bạn có thể thay đổi tên miền. ví vụ như bạn có tên miền thuthuatso.com thì bạn điền vào là thuthuatso.com. còn mình sưửdụng tên miền của host nên mình để nguyên và chọn tiến hành bước kế tiếp.

ta đuợc

This image has been resized. Click this bar to view the full image. The original image is sized 734x94px.

Chọn “tiến hành bước kế tiếp” thành quả của ta là

This image has been resized. Click this bar to view the full image. The original image is sized 753x356px.

chọn đăng nhập ồ thành quả của mình đây rồi

This image has been resized. Click this bar to view the full image. The original image is sized 1002x461px.

sau khi tạô xong bạn vào trong cpanel xoá file “Install” hoặc sửa thành tên khác cúng được.

Nguồn được lấy bởi http://thuthuatso.com/2010/05/03/huong-dan-cai-dat-forum-phpbb-tu-a-den-z/

Hosting Free

1. EveryWebspace.com

* 2GB Disc Space
* 30GB Bandwidth
* Free Website Builder
* Cpanel 11
* Add-on Domains
* MySQL Databases
* Free SEO
* SSH
* And Much More Free!
Link đăng ký
Mình có thể giúp các bạn có nhu cầu nâng cấp thêm bandwidth và disc space. Các bạn hãy reply ngay tại topic này với nội dung:

Quotation

Free hosting đang dùng: Everywebspace.com
User: u....
Domain/ subdomain: ...
Bandwidth cần nâng cấp lên: ...
Disc space cần nâng cấp lên: ...
Tôi cam kết sử dụng host đúng mục đích và nâng cấp trên theo đúng nhu cầu sử dụng.

-------------------------------------------------------------

1. Byethost.com
5500 MB disk space
200 GB monthly transfer
* FTP account and File Manager
* Control Panel and Automatic Script Installer
* MySQL databases & PHP Support
* Free tech support
* Addon domain, Parked Domains, Sub-Domains
* Free Community Access (Forums)
* Clustered Servers
* No ads!
Link đăng ký
Hầu hết mọi người đều đánh giá cao host free này. Về tốc độ cũng như cách sử dụng, sự ổn định. Đây sẽ là sự lựa chọn sáng suốt cho bạn nếu muốn tìm host free tốt. Tuy nhiên host bị giới hạn dung lượng database (50MB) nên quá sẽ bị suspend.
-------------------------------------------------------------
1. megabyet.com Xếp đồng hạng 1 vì cũng là Server của Byethost nhưng còn có thêm Cpanel
1600 MB or 1.6 GB disk space
100 GB monthly transfer
Cpanel 11
Add-on Domains: 6
Có lẽ với host này, bạn không phải than phiền điều gì. Tốc độ duyệt tại VN luôn thuộc vào hạng top.
Link đăng ký

-------------------------------------------------------------

2.host1free.com
Host miễn phí hỗ trợ cài đặt magento, Jomla, Wordpress. (free hosting for magento, Jomla, Wordpress)
Cập nhật Ngày 24/10/2010:
Đánh giá: 10/10
Uy tín: được thành lập khoảng tháng 4 năm 2010. Host chỉ die khi công ty đóng cửa :). Hỗ trợ qua forum khá tốt.
Phù hợp: cài đặt code, làm website.
Mình bị suspend không rõ lý do. Nhưng khi vào forum yêu cầu thì họ mở lại ngay.

Disk Space 10GB
Bandwidth 150GB
Parked Domains 5
Domain Pointers 5
Sub Domains 5
Hỗ trợ đầy đủ cho website dùng code php. Có cpanel và Antivirus. Có nhiều server đặt ở những nơi khác nhau cho bạn lựa chọn, có forum cho cộng đồng người VN


-------------------------------------------------------------

Cập nhật Ngày 25/09/2007:
5. 000webhost.com
Đánh giá: 10/10
Uy tín: theo cam kết thì server host được mua đến 2012.
Phù hợp: upload code music hoặc những site cần băng thông lớn.
Nhược điểm: không hỗ trợ nhiều, tốc độ bình thường, độ ổn định không cao.


Link đăng ký

-------------------------------------------------------------

B. Host miễn phí Server Việt Nam (cập nhật ngày 06.10.2010)

-------------------------------------------------------------
1. DigiStar free hosting.
Dung lượng 100 MB
Băng thông 10000 MB
Tên miền hỗ trợ 1
Tên miền Parked
Bảng điều khiển DirectAdmin
Backup hàng ngày / hàng tuần
Hỗ trợ kỹ thuật 24x7
Link đăng ký: http://digistar.vn/free-web-hosting.php
Chú ý: Việc đăng ký được random. Có nghĩa là trong ngày sẽ có thời điểm nhất định website sẽ cho đăng ký. Các bạn hãy vào trang chủ để xem số lượng host được đăng ký còn không.
Cách đăng ký khác: Bạn có thể vào yêu cầu free hosting trong forum theo địa chỉ sau: http://congdongit.org/free-hosting-digistar/
Đánh giá:
Ưu điểm: host tại Việt Nam nên rất nhanh; hỗ trợ tốt; đăng ký được là có thông tin host ngay; không quảng cáo
Nhược điểm: Đăng ký phải chờ đúng thời điểm (tốt nhất bạn thường trực tại trang chủ và f5) ; dung lượng không nhiều (chắc cũng vẫn đủ các bạn nhỉ). :D
-------------------------------------------------------------

2. 4u-vn.com
Dung lượng: 100MB
Băng thông: 10GB
Hệ điều hành: Linux CentOS 5.4 và Windows Server 2003 R2 Enterprise
Tức là bạn có thể chọn loại host cho PHP hoặc ASP
Đăng ký: Viết đơn đăng ký qua forum.
Không quảng cáo, không post bài hàng tháng, và tất nhiên là free.
Link đăng ký: http://4u-vn.com
Ưu điểm: Server tại Việt Nam, Hỗ trợ cả PHP và ASP (rất hiếm).
Nhược điểm: Đăng ký qua forum sẽ hơi mất thời gian một chút.
Uy tín: Mình mới liên lạc với nhà cung cấp và được xác nhận thông tin: host chỉ ngừng free khi công ty ngừng hoạt động. Thế là các bạn cũng yên tâm phần nào rồi nhé.

Đăng ký và quản lý byethost.com

Byethost.com là một dịch vụ hosting miễn phí cung cấp đầy đủ các tính năng cần thiết của 1 webhosting chuyên nghiệp. Các bạn chỉ cần dùng byehost kết hợp với tên miền co.cc là có thể sở hữu 1 website mà không phải mất tiền.

Những tính năng chính và nổi bật của byethost:

- No Ads: không chèn quảng cáo vào website của bạn

- Disk Space 5500 MB, Bandwith 200 GB: với dung lượng và băng thông mỗi tháng như trên thì bạn hoàn toàn thoải mái viết bài, upload những file, thư mục cần thiết cho việc viết blog.

- 50 addon domains, 50 packed domains, 50 sub domains: cho phép bạn add thêm 50 domain nữa vào host ( quá hào phóng đối với free hosting đúng không :d )

- 50 MySQL databases: cho phép bạn tạo ra thêm 50 databases nữa, đặc biệt hỗ trợ PHP.

- FTP account, Online file manager: giúp bạn truy xuất file trên host bằng tài khoản FTP, bạn có thể dùng bất kỳ chương trình FTP miễn phí nào để làm việc đó.

- Unlimited POP email accounts, Web mail, Custom MX records: cho phép tạo web mail với chính domain của bạn và hổ trợ cả chức năng pop cho những account email trên.

-VistaPanel Control Panel: quản lý host bằng VistaPanel có hiển thị đầy đủ thông tin về Disk space và Bandwith mà bạn đã sử dụng.

1. Đăng ký byethost.com

Các bạn vào đây để đăng ký. Chỉ cần điền đầy đủ thông tin cần thiết rồi gửi đi. Lưu ý là byethost khuyến cáo dùng trình duyệt Firefox để đăng ký đươc thuận lợi.

Sau đó bạn vào email kích hoạt và bạn sẽ nhận được những thông tin tương tự dưới đây

Cpanel Username: b12_5414339
Cpanel Password: 123456

Your URL: http://ruabien.byethost12.com or http://www.ruabien.byethost12.com
FTP Server : ftp.byethost12.com
FTP Login : b12_5414339
FTP Password : 123456
MySQL Database Name: MUST CREATE IN CPANEL
MySQL Username : b12_5414339
MySQL Password : 123456
MySQL Server: SEE THE CPANEL
Cpanel URL: http://cpanel.byethost12.com

Như vậy là bạn đã đăng ký thành công 1 hosting miễn phí và sẵn sàng để sử dụng, cài đặt các ứng dụng cần thiết.

2. Quản lý byethost.com

Mình xin giới thiệu qua cpanel byethost để các bạn tiện quản lý và sử dụng hosting này. Khi đăng nhập bạn sẽ thấy màn hình chia làm 2 khu vực, bên trái màn hình và bên phài.
Phía bên trái màn hình chứa các thông tin về server, host bạn đang sử dụng. Và bên phải là các mục lục giúp bạn quản lý host của mình như hình dưới đây:








- Account manage: Nơi quản lý tài khoản của bạn
+ Update contact info: thay đổi thông tin liên hệ
+ Change password: đổi password
+ Using... là hướng dẫn
- Site management: Chứa các thứ liên quan back up, bạn tìm hiểu thêm ở bài viết khác trong phần down và upload, cái này hơi phức tạp, nhưng nếu bạn không có 1 dữ liệu khổng lồ, bạn có thể tìm hiểu nó sau:
- Email managemer : quản lý email, không quan trọng lắm,
- Statistics: hiện trạng acc của bạn, thông báo các thông tin chung.
- Acc upgrate: update cái acc của bạn lên premium, Nói chung up lên thành loại trả tiền, bỏ qua thôi, nếu muốn trả tiền bạn qua godady hay yahoo ... cho nó lành,
- Technical support: tên nói lên hết rồi, hỗ trợ kỹ thuật cho bạn,
- Software/Service: các phần mềm và dịch vụ

Các thành phần quan trọng, bạn cần chú ý:
- FPT manage:Quản lý các tài khoản ftp của bạn
+ View FPT setting: xem cấu hình các tài khoản ftp
+ File manage: Nơi chứa tất các file của bạn, click vào nó thế này

Dù bạn dùng trình FPT hay làm thủ công thì bạn vẫn phải click thêm lần nữa để vào htdoc. Bạn phải up tất cả vào trong mục này (htdocs) ,





+ Download FPT software: down phần mềm FPT dùng để upload các file lên host một cách nhanh chóng.
- Database: Chứa cơ sở dữ liệu của bạn,
+ Mysql database: dữ liệu của bạn quản lý bằng mysql

- Creat database tạo database : database bao gồm tên quản lý của bạn và tên do bạn đặt ra
- Nếu bạn muốn xóa 1 database nào đó, chọn 1 database ở cái ô dạng option đó, rồi click remove database
+ Php admin: công cụ phpadmin, bạn vào mục này để thực hiện các thao tác như tạo bảng, xóa, tra cứu , cái này tương tự như file manage nhưng là dành cho database, nếu bạn không hiểu gì về mysql, mà chỉ tìm hiểu panel byethosst để cài đặt wordpress hay cái gì tương tự, 1 công cụ mà người khác lập trình sẵn ra, tôi khuyên bạn không nên động đến nó
+ slow query statics: tình trạng truy vấn dữ liệu chậm, nơi chứa thông tin truy vấn, nó được sử dụng nhằm mục đích tối ưu hóa trang web của bạn, để tăng tốc độ truy vấn cho web site, còn tăng thế nào thì do hiểu biết của bạn về web.
- Domain name: chứa và thực hiện các thao tác cài đặt Tên miền của bạn
+ Subdomain: tên miền phụ. Giúp bạn có thể tạo tên miền phụ như: http://blog.ruabien.net hay http://music.ruabien.net chẳng hạn.

3. Hướng dẫn add domain co.cc vào byethost

Đầu tiên bạn truy cập vào co.cc để quản lý tên miền của bạn. Trong phần quản lý tên miền hãy trỏ tên miền về

ns1.byet.org và ns2.byet.org như hình dưới

(lưu ý phải chờ khoảng vài tiếng thì việc trỏ domain này mới có hiệu lực, nếu không một số trường hợp bạn không thể add domain ở bước tiếp theo)

Sau đó truy cập vào host, vào phần Addon domain để thêm domain mới.

Đánh tên miền mà bạn đã đăng ký rồi Click Create Domain .

Như vậy là bạn đã hoàn tất việc đăng ký một hosting miễn phí và cách thức add một tên miền. Bài viết sau mình tiếp tục hướng dẫn các bạn Cách cài đặt wordpress hay một ứng dụng web bất kỳ trên host byethost để có một blog, website hoàn thiện. Chúc tất cả thành công!