Tải bản đầy đủ (.doc) (15 trang)

Hướng dẫn các cách thiết kế web miễn phí

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (721.69 KB, 15 trang )

Tạo website trực tuyến, miễn phí nên chọn dịch vụ nào?
Bạn là một người đam mê thiết kế web nhưng chưa có dịp học ngôn ngữ lập trình đến nơi
đến chốn, nên bạn có nhu cầu tìm những dịch vụ giúp thiết kế Website trực tuyến, dễ dàng và
đặc biệt hơn là miễn phí. Để đáp ứng nhu cầu đó mà hàng loạt dịch vụ tạo web trực tuyến
được ra đời, mỗi dịch vụ điều có những thế mạnh riêng để thỏa mãn các nhu cầu đa dạng của
người dùng Internet. Bài viết sẽ giới thiệu những Website giúp thực hiện công việc này.
1. /> Easyvn là một công cụ tạo Website cá nhân ở Việt Nam không cần đòi hỏi bạn phải biết
nhiều về các kiến thức tin học. Website được thiết kế tại đây được cung cấp những đặc tính
miễn phí như: dung lượng lưu trữ 2MB, nhiều mẫu trang trí đặc sắc, không giới hạn thời gian.
Đặc biệt, với giao diện hoàn toàn tiếng Việt sẽ giúp bạn đưa những dữ liệu, hình ảnh, âm
thanh lên Website dễ dàng và nhanh chóng.
2. /> Weebly cung cấp cho bạn những công cụ thiết kế Website rất đơn giản như kéo thả
(Drag&Drog) các đối tượng hình ảnh (Picture), văn bản, tiêu đề, mã HTML,… vào khu vực
thiết kế. Dịch vụ mang lại rất nhiều mẫu Website được thiết kế sẵn rất chuyên nghiệp, bạn có
thể tùy thích thay đổi theo ý tưởng của mình. Với một tên miền dạng
http://‘tenwebsite’.weebly.com và một hosting miễn phí thì Weebly là một dịch vụ tạo web rất
cần thiết cho những ai mới làm quen với nó.

3.

Đây là một dịch vụ tạo web trực tuyến của Google mang tên là Google Sites, để đăng kí một
website tại đây thì bạn cần có một tài khoản của Google (ví dụ như tài khoản Gmail). Với một
giao diện thiết kế rất đơn giản và 100MB dung lượng lưu trữ miễn phí thì bạn có thể tạo một
Website rất nhanh chóng, đầy đủ nội dung, hình ảnh. Google Sites còn cho phép chèn các tiện
ích vào web giúp cho nó sinh động hơn, chẳng hạn: Google Calendar, Google NewsShow,
Clock & Date, Weather, Google Clock, Fish,….và nhiều hơn nữa là giúp chèn các đoạn Flash
động vào web thông qua tiện ích Include gadget (Iframe).

Ngoài ra, dịch vụ còn cung cấp tính năng HTML để bạn có thể chỉnh sửa web theo ý mình
nhưng tính năng này vẫn còn giới hạn, tức là không cho phép nhúng vào các đối tượng:
frame, embed, styles, scrip. Một kinh nghiệm giúp tăng dung lượng lưu trữ là bạn hãy đăng kí


nhiều tài khoản tại đây rồi tạo ra một mẫu web cho các tài khoản ấy và liên kết chúng với
nhau.

4.
Microsoft đang rất nổi tiếng về các bộ ứng dụng “trên mây” của mình, trong đó phải kể
đến dịch vụ tạo Website trực tuyến của bộ Office Live bởi vì trang web được tạo ra tại đây
mang phong cách rất chuyên nghiệp không thua kém gì một Website được lập trình bằng
HTML. Với một dung lượng lưu trữ miễn phí 500MB được xem là tương đối lớn đối với
người dùng bình thường thì Office Live là dịch vụ tạo Website “hào phóng” nhất hiện nay.

Việc đăng kí tài khoản cũng khá đơn giản, bạn chỉ cần có một địa chỉ email (không nhất thiết
phải là mail tại Hotmail) và biết được một số mã bưu điện của một số nơi là đăng kí được.
Giao diện của cửa số thiết kế rất giống với Microsoft Office 2007 gồm hai thẻ tính năng Page
Editor và Site Designer. Sau khi thiết kế xong, Website thành phẩm của bạn có dạng
http://‘tenwebsite’.‘kieuweb’.officelive.com.

5.

So với những dịch vụ trên thì đây là một dịch vụ đáp ứng được mọi nhu cầu của người dùng,
từ đối tượng người dùng web không chuyên đến các đối tượng chuyên nghiệp. Ucoz là một
dịch vụ tạo web trực tuyến hoạt động trên nền công nghệ Web 2.0, với rất nhiều công cụ
thông minh như: Control Panel, Site menu builder, Visual HTML editor,…Khi đăng kí một
tài khoản tại đây, bạn sẽ được cung cấp một hosting có dung lượng 300MB (dung lượng này
không ngừng tăng lên trong quá trình sử dụng dịch vụ), cho nên có thể upload dữ liệu lên
server trực tiếp hoặc thông qua giao thức FTP.

Ngoài ra, Ucoz sẽ cho một tên miền cấp 1 miễn phí (dạng http://‘tenwebsite’.ucoz.com) thì
sau khi đã thiết kế và hoạt động ổn định, bạn có thể nhúng các mã quảng cáo của các dịch vụ
quảng cáo danh tiếng vào web của mình (Google Asense, Adnet.vn,…). Một thế mạnh nữa
của dịch vụ này là các modules quản lí website: Page Editor-quản lí trang; Calendar-lịch

biểu; Search-tìm kiếm; Web Polls-bảng thăm dò ý kiến; Forum-diễn đàn; Statistics-thống kê
website; User-quản lí tài khoản thành viên; …
7
Hưng dn thit k web min ph vi mu website
(template) c sn
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.
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
Html của youtube, bạn muốn đưa đoạn phim nào lên web của mình, chỉ cần thay đổi đường link là ok
Youtude:
<object width="560" height="340"><param name="movie"
value="

name="allowFullScreen" value="true"></param><param name="allowscriptaccess"
value="always"></param><embed
type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560"
height="340"></embed></object>

×