Cách thức
xây dựng một website từ một mẫu có sẵn có nhiều cách và nhiều phương hướng để triển khai. Bạn có thể dùng phần mềm hoặc dựa vào những kiến thức cơ bản về
lập trình của bạn. Đây là một cách không chuyên dành cho những người có kiến thức lập trình chưa vững.
Ngày nay các trang và blog cá nhân đã trở nên rất phổ biến. Thật
không mấy dễ thấy người nào không sở hữu trang web riêng cho mình. Vì nó
là một trong những kết nối thuận tiện, thậm chí còn là nơi để “ cảm
nhận” về cuộc sống hay tác phẩm nghệ thuật.
Trang cá nhân không chỉ là một cách thể hiện về bản thân tốt nhất mà
còn là nơi sẻ chia những suy nghĩ, ý tưởng, cảm xúc, tình cảm cũng như
mọi điều xảy ra xung quanh trong cuộc sống của bạn. Đó là tại sao mà
chúng ta lại cố gắng tạo trang riêng dựa trên template web miễn phí. Với
ngân quĩ thật ‘ thân thiện’ nên chỉ mất khoảng 2 giờ là bạn có thể dành
cho mình 1 trang riêng.
Vậy nên, bài báo này sẽ chỉ cho bạn cách tạo một trang và tiến hành
mọi tùy chỉnh cần thiết dựa trên web template. Sau đó bạn sẽ đọc thêm
phần giới thiệu về các nhà cung cấp tên miền và máy chủ của chúng tôi.
Hãy chọn một mẫu thiết kế.
Nếu bạn không phải là nhà thiết kế web, thì cách nhanh và đơn giản
nhất để có một website nhìn chuyên nghiệp là sử dụng các mẫu website
được làm trước. Bạn có thể tìm kiếm các mẫu web miễn phí từ rất nhiều
nguồn. Song Free Templates Online là nguồn khá tin cậy vì ở đó cung cấp
các mẫu web chất lượng phù hợp với các tiêu chuẩn web. Tôi đã chọn cho
mình mẫu
web template # 63 dưới đây:

Sau khi tải được mẫu web, hãy chọn thư mục fonts và files có dạng “.psd” và “html”.
Tùy chỉnh mẫu web
Đây là lúc cần tùy chỉnh mẫu web. Nếu bạn không có thời gian hay am
hiểu nhiều để triển khai toàn bộ quá trình này thì có thể sử dụng các
dịch vụ chỉnh sửa mẫu web. Tại đây bạn có thể có mức giá dịch vụ rất phù
hợp. Các nhà phát triển web của họ sẽ hoàn tất yêu cầu của bạn một cách
chính xác, dễ dàng và chuyên nghiệp. Nhưng nếu bạn không ngại khó khăn
thì cũng tự tùy chỉnh được và sẽ bắt đầu từ bản HTML.
Hãy dùng Adobe Photoshop CS+, Adobe Dreamweaver 8+ hoặc bất kỳ trình
soạn thảo HTML nào khác để tiến hành mọi tùy chỉnh cần thiết. Trước khi
bắt đầu bạn nên cài đặt các font chữ cần thiết ( chúng thường được thay
thế trong thư mục “các nguồn hoặc font” – Vào
this tutorial để có được chi tiết. Sau đó hãy mở file dạng “.psd” trong photoshop và học cách làm.
Trước hết, chúng ta sẽ tùy chỉnh phần đầu của mẫu web bằng công cụ
horizontal Type, hãy nhập tên công ty và thay đổi tagline. Đừng lo lắng
khi slice không đủ dài vì tiêu đề web của bạn có thể tự điều chỉnh được
trong giới hạn của nó. Bạn cũng dễ dàng tùy chỉnh kích thước của slice
bằng cách chọn Slice Select Tool và làm nổi logo (bằng kích chuột trái +
CTRL). Hãy kích chuột trái để kéo các border slice.

Sau khi xong những thay đổi này, hãy lưu lại logo đã chỉnh và thay
logo đó vào. Khi slice vẫn được chọn, hãy vào “ File” -> “save for
Web and Devices”. Bạn không nên điều chỉnh thiết lập bởi coder đã hoàn
tất công việc này. Hãy ấn nút Save vào save files tới Image directory và
thay tên file dạng .jpg.
Tiếp đến là chỉnh sửa tiêu đề các text. Nếu bạn thấy tất cả các tiêu đề text trên mẫu web này hợp lý thì hãy lưu chúng lại.
Hãy lưu lại các nút menu. Bạn có thể sử dụng Hirizontal Type Tool để
sửa tên của các nút. Tôi đã sửa nút chính và đổi tên nó là “My Gallery”.

Hãy lưu các nút menu này để thay thế những nút cũ trên web và các thư mục hình ảnh (Images folder).

Sau đó, hãy đổi ảnh ở phần trung tâm của mẫu web. Lưu ý rằng kích
thước của ảnh cần phù hợp với các mục riêng để tránh gây ảnh hưởng tới
bố cục. Hãy lưu ảnh mới thay hình cũ trên folder hình ảnh.
Bây giờ hãy chỉnh các ảnh từ hai phía. Photoshop vẫn giúp bạn thực
hiện điều đó. Trước tiên, hãy định rõ kích thước hình ảnh theo pixel.
188 x 187 px là kích thước ảnh phù hợp cho website. Sau đó, hãy tạo một
layer mới dưới layer có những mục tên được có sẵn và paste ảnh mới lên
nó. Bạn cũng có thể lặp lại bước này với hình ảnh thứ hai. Nếu bạn đã
thực hiện đúng tất cả các bước thì các ảnh mới này sẽ được hiển thị cùng
mũi tên ở trên chúng.
Mỗi ảnh được chia thành 4 slice (như đã hiển thị trên screenshot phía
dưới). Điều này có nghĩa là bạn nên lưu riêng lại từng slice, thay các
folder cũ bằng folder mới và lưu chúng vào từng folder một.

Tiếp đến, hãy mở file index.htm trong bộ trình biên tập HTML và bắt
đầu chỉnh text. Hãy viết về chính mình, gia đình, bạn bè cũng như những
sở thích của mình trên đó. Song đừng quên thay đổi phần cuối trang.

Trang đầu tiên của bản thiết kế đã hoàn chỉnh. Hãy nhìn xem:

Bạn phải nhớ rằng đặc trưng gói mẫu web miễn phí này không gồm các
trang nhỏ. Song cũng đừng quá lo lắng. Bởi bạn có thể tạo ra nó dễ dàng
bằng cách copy file index.htm và thay đổi tên thành index-1.htm – Đó là
bản thiết kế của bạn dùng cho trang liên hệ (Contacts page). Hãy soạn
thảo text trên trình soạn thảo HTML và đó là các text sử dụng trên
website của bạn.

Trang hình ảnh
Và giờ là phần thú vị nhất của quá trình tùy chỉnh. Trang web cá nhân
sẽ không đầy đủ nếu thiếu một trang ảnh. Hãy làm trang web của bạn rực
rỡ hơn bằng cách bổ sung thêm những bức ảnh màu chất lượng. Tôi muốn
giới thiệu với bạn một cách thuận lợi để quản lý và trình bày các ảnh
của bạn và chia sẻ hoặc in trực tuyến chúng – Slimbox 2 – tập lệnh
Javascript cho phép bạn che đi các ảnh trên trang hiện tại. Tập lệnh này
phù hợp với tất cả các trình duyệt phổ biến. Bạn có thể tải nó về từ
official site và giải nén thành mục template của bạn .
Hãy làm theo những chỉ dẫn tại
usage instructions
để tạo Slumbox 2. Sau khi tạo xong thư mục “photos” và đặt các ảnh vào 2
phần – cỡ ảnh gốc, ảnh sao cỡ nhỏ hơn, ví dụ như xem trước ảnh thu. Hãy
copy index.htm và đổi tên thành “photos.htm” rồi đặt những ảnh nhỏ như
dưới đây:

Sau đó bạn nên kích hoạt mục slimbox 2 bằng bổ sung mã rel = “lightbox-personal” vào các link của bạn như sau:
Hãy lặp lại bước này với tất cả các ảnh mà bạn có. Nếu thao tác đúng thì trang của bạn sẽ giống như sau:
Tất cả các ảnh sẽ mở trên splash window.
Hãy chọn một nhà cung cấp máy chủ
Trước hết bạn cần được tư vấn về chất lượng và giá cả trước khi lựa chọn dịch vụ hosting.
webhostingbuzz.com sẽ giúp bạn điều đó.
Nếu bạn đã từng gặp phải khó khăn nào trong việc đăng ký tên miền hoặc thuê máy chủ bạn có thể liên hệ với các chuyên gia trên
TemplateTuning.com.
Vậy đấy! Giờ bạn có thể nhận thấy rằng chỉ với một chút thay đổi
khiến mẫu web ban đầu đã trở nên thu hút và phong cách. Nhưng để làm
được điều đó cần phải có tính bền bỉ, sự nhẫn nại và lòng khát khao.
Chúc bạn thành công!
Hãy vào
sample website để xem kết quả cuối cùng hoặc so sánh với mã của mình
Nguồn: TemplatedBusiness.com