Thiết kế web miễn phí - Web free
Bạn đang muốn thiết kế một web để kinh doanh, thiết kế web cho lớp, trường hay cho riêng mình bạn mà bạn không đủ tiền để thuê các dịch vụ thiết kế web chuyên nghiệp. Xin mời bạn hãy tham khảo tài liệu này. Đây là tập hợp những bài viết trong năm 2010 và 2011 về các trang web cho phép bạn thiết kế web free, trong bài hướng dẫn chi tiết cách thực hiện các bước thiết kế có hình ảnh minh họa một cách chi tiết. Giúp bạn dễ dàng thiết kế một web yêu thích của mình, mà không yêu cầu bạn có trình độ về lập trình. Có rất nhiều trang web và rất nhiều hướng dẫn thiết kế phù hợp cho bạn lựa chọn.
Chúc bạn thành công và cảm ơn bạn đã đọc tài liệu này
12 trang |
Chia sẻ: thanhnguyen | Lượt xem: 2577 | Lượt tải: 5
Bạn đang xem nội dung tài liệu Thiết kế web miễn phí - Web free, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
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:
Các file đính kèm theo tài liệu này:
- Thiết kế web miễn phí - web free.doc