Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Hướng dẫn tạo Website dễ dàng với DropPages
Hướng dẫn tạo Website dễ dàng với DropPages
Nguyễn Trung Hiếu
Share Code Web Company 2014

Hướng dẫn tạo Website dễ dàng với DropPages

DropPages là một sản phẩm trong hệ thống của Dropbox, được ra mắt năm 2011 và cung cấp cho người dùng dịch vụ thiết kế và lưu trữ website trực tuyến một cách dễ dàng

Trong bài viết ngày hôm nay, tôi sẽ hướng dẫn các bạn cách sử dụng DropPages để tạo một website thật đơn giản. Và chúng ta sẽ thiết kế trên bộ template Cuda, bạn có thể download tại đây

Tạo tài khoản

Nếu bạn chưa có tài khoản, bạn có thể truy cập Dropbox, và đăng ký một account mới, sau đó bạn có thể download phần mềm để đồng bộ giữa máy tính và Dropbox một cách dễ dàng.
Sau khi có tài khoản, bạn truy cập vào http://my.droppages.com/ và đăng nhập với account trên Dropbox mà bạn vừa tạo, và chờ cho nó đồng bộ về máy hoàn tất, khi đó bạn kiểm tra trên máy tính mình sẽ thấy cấu trúc tập tin như sau
droppages

Tạo site mới

Sau khi login, bạn sẽ tự động được redirect tới đường dẫn http://my.droppages.com/account. Để tạo website mới, bạn click vào nút Create a new site màu xanh lục
create a new site
Chọn một domain mà bạn muốn, do tạo ngay trên host của dropbox, nên domain của chúng ta sẽ có dạng là sub domain, tại thời điểm này, chúng ta không thể có một domain riêng của mình được
set a domain for site
Sau khi click vào nút Create, bạn kiểm tra trong thư mục sẽ thấy cấu trúc mới được thêm như sau
folder structure

Vậy có gì trong các thư mục đó

  • Content: Có file .txt để chứa nội dung website của chúng ta
  • Public: Chứa các file stylesheet, images, PDF….Bạn có thể tham khảo thêm tại đây.
  • Templates: Chứa các file HTML.

Trong đó

  • index.txt trong thư mục “Content”
  • main.css trong thư mục “Public”
  • base.html trong thư mục “Templates”

Thử thay đổi nội dung xem thế nào
hello world

Chỉnh sửa website

Để phục vụ cho việc chỉnh sửa website sau này, bạn có thể truy cập vào Dropbox > Apps > My.DropPages > mysubdomain.droppages.com
Bạn có thể copy paste template vừa download bên trên vào trong từng file sao cho hợp lý, hoặc tự mình có thể edit theo ý thích đều được.

Custom CSS

Public > main.css

Custom HTML

Templates > base.html

Trong đoạn HTML trên, nếu tinh ý, bạn sẽ thấy có thêm vài thẻ mới như

  • {{PrimaryNavigation}} – Tạo ra dạng menu cho webstie
  • {{Body}} – Xuất ra nội dung chứa trong folder Content

Kết quả chúng ta được:
hello world

Thêm nội dung

Content > index.txt
Tất cả nội dung đều chứa trong file .txt, và bắt đầu bằng :base cho tất cả các file nội dung

home page

Tạo một page phụ

Cũng giống như vậy, để tạo một page phụ ta cũng làm tương tự như vậy, chỉ có điều chú ý rằng, tên file sẽ được dùng làm menu trên luôn.
Ví dụ, tôi muốn tạo thêm một menu có tên: About Our Studio.tx với nội dung như sau:

kết quả sẽ được là:
about

Vậy, để tạo một trang con trong page phụ thì làm như nào?

Chúng ta truy cập vào folder Tempaltes, và tạo một file có tên withsubpages.html với nội dung như sau:

Với nội dung như sau
Content > 3.Meet the Team > index.txt

Content > 3.Meet the Team > 2.Juniors and Sales.txt

withsubpages

Một số thẻ khác

  • {{Navigation}} – Sitemap
  • _sitemap.txt – Hidden Page
  • {{Breadcrumbs}} – Breadcrumbs
  • {{Mycustomtag}} – Custom tag

Vậy là xong, chúng ta đã có một website dạng tĩnh, bạn có thể sử dụng làm Landing Pages để PR cho một sản phẩm, công ty của bạn, chúc bạn thành công với sản phẩm đẹp.

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.761 hits
%d bloggers like this: