1. Khai báo Site mới
Tối thiểu cần khai báo 1 số thông tin sau:
2. Tạo template (khuôn mẫu)<img id="vnax0" alt="">
Sau khi xác định thành phần nào trong web là không thay đổi, ta sẽ tạo trang web với những thành phần đó, sau đó chọn, File > Save as Template. Tiếp sau ta sẽ đánh dấu các vùng thay đổi (còn gọi là editable): left_column và right_column.
Làm thế nào Vùng Thay Đổi ( Editable Regions):
Left Column:
Chọn cột trái, rồi chọn, Insert > Template Objects > Editable Region (Ctrl+Alt+V) và đặt tên là left_column.
Right Column
Chọn cột phải, rồi chọn, Insert > Template Objects > Editable Region (Ctrl+Alt+V) và đặt tên là right_column.
3. Tạo trang web mới từ Template vừa tạo ra.
Bay giờ ta tạo ra trang web đầu tiên từ Template vừa rồi, bằng cách Tạo 1 file HTML mới từ New from Template, sau đó lưu với tên là index.html trong thư mục gốc.
Nhớ rằng các file tạo ra từ Template sẽ chỉ có thể soạn thảo ở 2 vùng left_column và right_column, vì đó là editable region, các vùng khác sẽ bị khóa, không thể sửa được (vì nó là vùng cố định). Sửa các mục Subnav Item 1, Subnav Item 2, Subnav Item 3 thành: About Me, See My Portfolio, và Email Me. Đặt tất cả các đường link là rỗng (#) đối với menu vừa tạo, khi nào tạo xong toàn bộ các trang ta sẽ cập nhật các đường link đó sau.
4. Tạo thêm một Mục Thư Viện (Library Item)
Ta bôi đen menu, sau đó ta nhìn vào phần Assets, click vào mục Library và đó click dấu (+) để biến vùng chọn thành một Mục Thư Viện Library Item và đặt tên nó là “main_sidenav”. Lúc này, menu vừa chọn sẽ bị khóa lại và đặt trong Library Item. Khi bạn update (cập nhật) Library Item này, Dreamweaver sẽ cập nhật toàn bộ những trang sử dụng mục thư viên này. Rõ ràng các Mục Thư Viện rất tiện dụng cho các phần lặp đi lặp lại trên web như là menu, bản quyền, nội dung cột, vv.
5. Lưu file
Tạo một thư mục mới là ‘about’, lưu trang thành “about.html” trong thư mục ‘about’ vừa tạo. Chọn menu, trong phần Properties, chọn Detach from original để mở khóa vùng này nhằm sửa nó (lúc nãy nó đang là một Mục Thư Viện nên ta sẽ không sửa được). Sửa lại menu thành các mục: About Me, Biography, và Resume. Chúng ta lại chuyển 3 mục này thành một Mục Thư Viện và đặt một tên mới cho nó, ví dụ là: “about_subnav”.
Thế là chúng ta đã xong trang about, tương tự thế chúng ta sẽ lần lựot làm các trang còn lại:
Bây giờ ta lưu “about.html” thành “bio.html” và “resume.html” trong thư mục ‘about’.
Với các thư mục khác ta làm tương tự:
6. Cập nhật (Update) template
Bạn đã tạo xong tất cả mọi trang cần thiết, sau đây là bước tạo liên kết giữa các trang. Chọn các link cần tạo liên kết và chọn nút tạo link như hình dưới.
Khi bạn lưu thay đổi này, do còn nhiều file cũng trên cùng một template này, Dreamweaver sẽ hỏi bạn có muốn cập nhật sự thay đổi này với mọi file khác cùng dùng template này không, hiển nhiên bạn nên chọn Update. Lúc này bạn nên xem lại hệ thống site và xem sự cập nhật vừa rồi đã tác động đến toàn bộ các trang web của chúng ta thế nào. Đây là một cách làm tiết kiệm cho các bạn rất nhiều thời gian.
7. Cập nhật các Mục Thư Viện
Vào phần thư viện Library, mở riêng từng Library Item và chèn link vào. Sau đó click Update để cập nhật thư viện ở mọi file có sử dụng nó.
8. Đưa trang web lên mạng (hay còn gọi là synchronization - đồng bộ hóa)
Đây là bước cuối cùng và nó là một bước rất quan trọng. Nếu chúng ta đã đăng ký một host miễn phí hoặc có thu phí trên mạng, ta sẽ được cung cấp username/password để thực hiện bước này..
Đầu tiên bạn thiết lập thông số cho server tại Site Manager. Vào Site > Manage Sites, trong thẻ Advanced, chọn Remote Info, chọn FTP Access và điền các thông tin bạn được cung cấp. Bạn có thể kiểm tra thông tin vừa điền có đúng không bằng nút Test. Nhớ chọn nút check Maintain synchronization information.
Bẩm phải chuột vào thư mục trang web, chọn Synchronize.
Sau đó bấm Ok trong cửa sổ hiện ra để đưa các site vừa tạo ra lên server.
Một số mẹo hữu ích:
Tối thiểu cần khai báo 1 số thông tin sau:
- Site name (tên site)
- Local root folder (thư mục gốc trên máy)
- Default images folder (thư mục dành mặc định cho hình ảnh)
2. Tạo template (khuôn mẫu)<img id="vnax0" alt="">
Sau khi xác định thành phần nào trong web là không thay đổi, ta sẽ tạo trang web với những thành phần đó, sau đó chọn, File > Save as Template. Tiếp sau ta sẽ đánh dấu các vùng thay đổi (còn gọi là editable): left_column và right_column.
Làm thế nào Vùng Thay Đổi ( Editable Regions):
Left Column:
Chọn cột trái, rồi chọn, Insert > Template Objects > Editable Region (Ctrl+Alt+V) và đặt tên là left_column.
Right Column
Chọn cột phải, rồi chọn, Insert > Template Objects > Editable Region (Ctrl+Alt+V) và đặt tên là right_column.
3. Tạo trang web mới từ Template vừa tạo ra.
Bay giờ ta tạo ra trang web đầu tiên từ Template vừa rồi, bằng cách Tạo 1 file HTML mới từ New from Template, sau đó lưu với tên là index.html trong thư mục gốc.
Nhớ rằng các file tạo ra từ Template sẽ chỉ có thể soạn thảo ở 2 vùng left_column và right_column, vì đó là editable region, các vùng khác sẽ bị khóa, không thể sửa được (vì nó là vùng cố định). Sửa các mục Subnav Item 1, Subnav Item 2, Subnav Item 3 thành: About Me, See My Portfolio, và Email Me. Đặt tất cả các đường link là rỗng (#) đối với menu vừa tạo, khi nào tạo xong toàn bộ các trang ta sẽ cập nhật các đường link đó sau.
4. Tạo thêm một Mục Thư Viện (Library Item)
Ta bôi đen menu, sau đó ta nhìn vào phần Assets, click vào mục Library và đó click dấu (+) để biến vùng chọn thành một Mục Thư Viện Library Item và đặt tên nó là “main_sidenav”. Lúc này, menu vừa chọn sẽ bị khóa lại và đặt trong Library Item. Khi bạn update (cập nhật) Library Item này, Dreamweaver sẽ cập nhật toàn bộ những trang sử dụng mục thư viên này. Rõ ràng các Mục Thư Viện rất tiện dụng cho các phần lặp đi lặp lại trên web như là menu, bản quyền, nội dung cột, vv.
5. Lưu file
Tạo một thư mục mới là ‘about’, lưu trang thành “about.html” trong thư mục ‘about’ vừa tạo. Chọn menu, trong phần Properties, chọn Detach from original để mở khóa vùng này nhằm sửa nó (lúc nãy nó đang là một Mục Thư Viện nên ta sẽ không sửa được). Sửa lại menu thành các mục: About Me, Biography, và Resume. Chúng ta lại chuyển 3 mục này thành một Mục Thư Viện và đặt một tên mới cho nó, ví dụ là: “about_subnav”.
Thế là chúng ta đã xong trang about, tương tự thế chúng ta sẽ lần lựot làm các trang còn lại:
Bây giờ ta lưu “about.html” thành “bio.html” và “resume.html” trong thư mục ‘about’.
Với các thư mục khác ta làm tương tự:
6. Cập nhật (Update) template
Bạn đã tạo xong tất cả mọi trang cần thiết, sau đây là bước tạo liên kết giữa các trang. Chọn các link cần tạo liên kết và chọn nút tạo link như hình dưới.
Khi bạn lưu thay đổi này, do còn nhiều file cũng trên cùng một template này, Dreamweaver sẽ hỏi bạn có muốn cập nhật sự thay đổi này với mọi file khác cùng dùng template này không, hiển nhiên bạn nên chọn Update. Lúc này bạn nên xem lại hệ thống site và xem sự cập nhật vừa rồi đã tác động đến toàn bộ các trang web của chúng ta thế nào. Đây là một cách làm tiết kiệm cho các bạn rất nhiều thời gian.
7. Cập nhật các Mục Thư Viện
Vào phần thư viện Library, mở riêng từng Library Item và chèn link vào. Sau đó click Update để cập nhật thư viện ở mọi file có sử dụng nó.
8. Đưa trang web lên mạng (hay còn gọi là synchronization - đồng bộ hóa)
Đây là bước cuối cùng và nó là một bước rất quan trọng. Nếu chúng ta đã đăng ký một host miễn phí hoặc có thu phí trên mạng, ta sẽ được cung cấp username/password để thực hiện bước này..
Đầu tiên bạn thiết lập thông số cho server tại Site Manager. Vào Site > Manage Sites, trong thẻ Advanced, chọn Remote Info, chọn FTP Access và điền các thông tin bạn được cung cấp. Bạn có thể kiểm tra thông tin vừa điền có đúng không bằng nút Test. Nhớ chọn nút check Maintain synchronization information.
Bẩm phải chuột vào thư mục trang web, chọn Synchronize.
Sau đó bấm Ok trong cửa sổ hiện ra để đưa các site vừa tạo ra lên server.
Một số mẹo hữu ích:
- Khi đổi tên file, ví dụ “about.html” thành “about_me.html”, Dreamweaver sẽ hỏi có cập nhật link không, điều này tránh chúng tạo ra những link hỏng (do đổi tên file mà không đổi phần href trong thẻ a tương ứng).
- Khi bạn cố gắng Synchronize một lần nữa, lúc này trên server đã có files. Nên Dreamweaver sẽ so sánh các file trên máy với các file trên server để đưa chỉ các file có sự thay đổi lên server. Bằng công cụ Dreamweaver Synchronization, bạn không cần sử dụng thêm một phần mềm FTP nào nữa.
- Khi đưa thêm hình ảnh vào thư mục ‘image’ và upload lên server, Dreamweaver sẽ tự động hình ảnh nào là mới và chỉ đưa những hình ảnh đó.
- Sử dụng template để giữ sự nhất quán cho hệ thống các trang web của bạn.
- Phân làm các thư mục để tổ chức file
- Lưu toàn bộ các hình ảnh vào thư mục ‘images’ (các file css vào thư mục css, các file js vào thư mục javascript)
- Sử dụng các mục thư viện cho các phần lặp đi lặp lại.
Post a Comment
Trước khi comment mời bạn đăng ký theo dõi để chở thành thành viên của blog. Cám ơn bạn đã quan tâm và đã comment, Tôi sẻ reply... Chúc bạn ngày làm việc vui vẻ và thành công !