Giáo trình DreamWeaver 8

R FILES : Đồng Bộ Hóa các File theo cả 2 cách . Các File mới trên Site Cục Bộ sẽ chuyển đến Site Từ Xa và ngược lại. (Hình 1). 4. Nên nhấp vào DELETE REMOTE FILES NOT ON LOCAL DRIVER. 5. NHẤP PREVIEW . (Hình 2). ◦ Nhấp Preview , ra bảng Background File Activity (Hình 2) 98/146 ◦ Dreamweaver đã Đồng Bộ Hóa cho phép bạn xem trước các thay đổi vốn sẽ thực hiện trên Site. ◦ Dreamweaver chạy Update xong ra bảng Synchronize thông báo : ◦ Cột Action cho biết Dreamweaver đề nghị thực hiện đối với mỗi File. ◦ Có thể chọn : ▪ Get và đánh dấu các Files. ▪ Put và đánh dấu các File . ▪ Delete. ▪ Ignore : Yêu cầu Dreamweaver bỏ qua. ▪ Mark as Synchronize ( 2 mủi tên ) yêu cầu Dreamweaver xem các Files đã chọn là đã được đồng bộ hóa do đó không thực hiện Đồng bộ hóa nửa . ▪ Compare : Mở các phiên bản Cục bộ và Từ xa của File để bạn có thể so sánh các điểm khác biệt của chúng. ▪ Nhấp OK. Che dấu các Files • Không phải mọi Folder trong File Cục Bộ cần được Upload lên Site Từ Xa trên Web Server. 99/146 • Dreamweaver cho phép che giấu Folder để được miễn đồng bộ hóa . Điều nầy sẽ tiết kiệm thời gian cho bạn. • Thí dụ :Site chứa các Folder Movie lớn . Khi bạn sẵn sàng Upload các Files hãy Cloak nó . • Dreamweaver sẽ không tốn thời gian quét lên nó và UnCloak Folder Movie để Upload cùng các File khác lên Site Từ Xa . • Để che giấu ( CLOAK ) một Folder Site : 1. Nhấp Phải Folder trong vùng Files > Cloaking Cloak > Cloak . Dreamweaver hiển thị Folder nầy có dấu gạch chéo cắt qua nó cho biết nó được che giấu. 2. Bạn chỉ che giấu các Folders , không che giấu được các Files riêng lẻ. 3. Có thể che giấu Các Files có một kiểu cụ thể . Chọn Menu Site > Chọn Site mà bạn đang làm việc > Tab Advanced của HT Site Definition > CLOAKING . Chọn Hộp kiểm Cloak Files Ending With > Nhấp các phần mở rộng File của các kiểu File mà bạn muốn che giấu. Để hiễn thị lại (Uncloak) một Foler Site ( Folder WEB ) : Nhấp Phải Folder được che giấu > Uncloak. 100/146 Trang trang đầu tiên với DreamWeaver 8 Tạo một trang mới 1. Trang đầu Tiên trong 1 Site sẽ là Trang Index.html. 2. Sau đó tạo các Trang kế tiếp . Để tạo 1 Trang Mới , bạn sử dụng Start Page hay HT New Document. Sử dụng Start Page Trong phần Create New > Nhấp HTML .(Hình 1). • Bạn cũng có thể sử dung Start Page để mở các Trang mà bạn đã làm việc gần đây . Chỉ việc nhấp tên của Mục trong Phần Open a recent Item của Start Page. • Nhấp ColFusion hoặc PHP cũng tạo 1 Trang HTML . 101/146 • Nhấp CSS sẽ tạo 1 Style Sheet CSS Mới . (Hình 2). • Nhấp bất kỳ chọn lựa khác sẽ tạo các tài liệu được thiết kế cho ngôn ngữ lập trình Web khác nhau. 102/146 • Nếu nhấp bất kỳ Mục trong Phần Create From Samples của Start page , Dreamweaver mở HT New Document để bạn chọn Trang Mẫu.Các Bạn nên nhấp từng Mục để xem. • Có thể tắt Start page : Menu Edit > Preferences > Nhấp Hạng Mục General > Hủy chọn Show Start page. SỬ DỤNG HT NEW DOCUMENT : • Menu File >New ( Ctrl+N ). • HT New Document hiện ra > Đang mở Tab General.(Hình 3). • Chọn 1 Mục trong Cột Category > Cột Basic Page sẽ thay đổi tùy Mục bạn đã chọn. • Chọn Mục ở Cột Phải > Khung Preview có Ảnh xem trước ( Hầu như có sẵn khi chọn Trang Mẫu và Template với phần mô tả bên dưới ). • Bạn có thể tạo 1 số tài liệu trong HT nầy > Menu bật lên Document Type (DTD) sẽ có sẵn . Bạn có thể thay đổi DocType từ Menu bật lên. Thí dụ chọn Page Designs(CSS).(Hình 4). 103/146 • Nếu muốn thay đổi bất kỳ xác lập mặc định > Preference > HT Mới xuất hiện > bạn có thể thay đổi loại tài liệu. (Hình 5). 104/146 • Tab Templates sẽ đề cập sau. ĐẰNG SAU DOCTYPE : DocType là 1 phần khai báo ở đầu 1 Trang HTML nhằm xác định DTD ( Document Type Definition ) đang được sử dụng cho File . Các trình duyệt Web sử dụng phần khai báo DocType để xác định cách trang được kết xuất như thế nào . Mặc định Dreamweaver chèn Doctype XHTML 1.0Transitional và mã mà nó tạo nhất quán với chuẩn đó.(Hình 6). 105/146 SỬ DỤNG CÁC TRANG MẪU : • Mở HT New Document > Cột Category > Chọn Mục CSS Style Sheets là các tài liệu Style Sheet CSS > Chọn bất kỳ Style Sheet mẫu > Thấy Ảnh xem trước và phần Mô tả . (Hình 7). 106/146 • Mở HT New Document > Cột category > Chọn Frameset> Có 15 Frameset tạo sẵn với các kiể Khung khác nhau .(Hình 8). 107/146 • Hạng Mục Page Designs(CSS) cung cấp 6 mẫu tốt hoàn toàn dựa vào CSS cho kiểu trình bày của chúng.(Hình 9). 108/146 • Starter page cung cấp cho bạn hàng chục trang để bạn sử dụng để tạo toàn bộ các Site .(Hình 10). 109/146 ◦ Có một số Hạng Mục Site như : Entertaiment, Travel . Spa và nhiều hơn nửa. ◦ Mỗi loại Site có 1 Trang chủ - 1 Trang sản phẩm - 1 Trang văn bản -1 Trang Catalog – 1 Trang Calendar. Tất cả chia sẻ cùng 1 kiểu thiết kế cơ bản . Những loại nầy hữu dụng nhưng được tạo dựa vào các Table để trình bày.(Hình 11). 110/146 • Page Designs cho các kiểu trình bày (Layout) cơ bản : Một cửa sổ Đăng nhập – 1 Trang Catalog – 1 mẫu biểu chú giải . Những Layout nầy cũng được tạo bằng cách sử dụng các tables để trình bày .(Hình 12). 111/146 Tạo 1 trang từ 1 Trang Mẫu : • File > New .(Ctrl+N). • Chọn 1 Mục trong Cột Category > Cột Phải thay đổi theo . • Chọn Mục ở Cột Phải > Preview cho bạn xem Ảnh trước có phần mô tả bên dưới . • Nhấp Create.(Hình 13). 112/146 • Chỉnh sửa Trang Mẫu theo ý muốn. 113/146 114/146 Hyperlink - Siêu liên kết Tạo các Site cục bộ tại Desktop 1. Tạo Folder Web Site tại Desktop : Nhấp Phải Desktop > New > Folder > Gỏ : website11 > Enter. 2. Mở Dreamweaver > Menu Site > Manage Sites > New > Site > Cột Category chọn Local Info >> Cột Phải gỏ : website11 > Nhấp Biểu tượng Browse > Desktop > Nhấp Đúp website11 > Select > Ok> Ok > Done.(Hình 1). 3. Ra Bảng Manage Site có kê website11 hiện diện > Nhấp Edit .(Hình 2). 115/146 4. Cột Trái Category chọn Remote Info > Cột Phải Access chọn FTP > hàng FTP Host nhập : www.freewebtown.com > Login nhập : utbinh026 > Password nhập : ooo > Chọn Save > Nhấp Test để kiểm tra sự kết nối Dreamweaver và Host Freewebtown > Dreamweaver ra bảng Thông Báo kết nối hoàn tất > OK .OK > Done . (Hình 3). 116/146 5. Panel Files có website11. Tạo trang Web 1. Hàng Create New nhấp HTML > Ra Khung Stag để nhập nội dung vào > Trường Tittle nhập : Chào Mứng Các bạn đến website11 của UTBINH. 2. Nhấp Nút Menu ( Tam Giác Đen nhỏ ) của Common trong Thanh Insert > Text . Bạn sử dụng Thanh Insert nầy và Property Inspector để gỏ nhập Text.(Hình 4). 117/146 118/146 Tạo liên kết hyperlink Liên kết với 1 Trang WEB Bôi đen Số 1 Liến Kết với Báo Thanh Niên > Copy > Paste Link của Báo nầy vào Trường Link > Sau khi tạo liến kết Số 1 nầy có gạch đít báo cho biết đã có Liên Kết > F12 > Yes > Save > Hiện ra File nầy ở Desktop > Nhấp vô số 1 > Báo Thanh Niên hiện ra > Close .(Hình 5). 119/146 Liên kết với 1 Hình Bôi đen Số 2 Liên Kết với 1 Hình > Nhấp Nút Browse For File > Tìm đến Hình cần Liên kết > Ok .(Hinh 6). 120/146 Dreamweaver cho biết Hình nầy ở ngoài Folder Web Site Cục bộ và đề nghị chép vào > Yes > Save > F12 > Save > Nhấp lên số 2 Liên kết Hình > Hình hiện ra .> Close .(Hình 7). Liên Kết với 1 Bản Nhạc MP3 Bỏ dỉa Nhạc MP3 vào Ổ > Bôi đen Số 3 liên kết với 1 Bản Nhạc MP3 > Nhấp Biểu tượng Browse For File > Tím đến bản MP3 trong Ổ E > Chọn 1 bản > OK > Yes > Save >Test thử giống trên.(Hình 8). 121/146 Liên kết Hộp Thư của bạn Bôi đen Số 4 Send Me Email > Menu Insert > Email Link > Test đã có sẵn 4.Send Me Email > Hàng E- mail nhập địa chỉ Email của bạn > Ok.(Hình 9). Liên kết với Trang Web Cá Nhân Bôi đen Số 5 Liên Kết Trang Web của UTBINH > Copy > Paste Link của Trang Web vào Trường LINK.(Hình 10). 122/146 Các động tác khi bạn Test để xem kết quả của từng Link là bạn đồng thời Save các thay đổi các nội dung của Trang Web > Nhấp Phải Tab Untitled-1.html > Save As > Desktop > website11 > File name gỏ : index.html> Save. 123/146 Upload Chương Trình Thiết kế Web Dreamweaver có sẵn Upload bằng FTP. 1. Trong Panel Files bạn chọn tất cả Files và Folders của website11 > Chọn Remote View ( Đề làm động tác Upload lên Host ) > Nhấp Mủi tên PUT FILE chỉa lên . Bạn sẽ Upload các File và Folder trong Website 11 lên Host. (Hình 11). 124/146 Bảng Background File Activity – website11 chạy Upload . • Menu Site > Manage Site > Đã chọn website11 > Edit > Remote Info > Test > Ok > Done . 125/146 Kết quả 1. Mở Trình Duyệt nhập : index.html 2. Ra Trang Web website11 vừa tạo > Nhấp vào các hàng số 1-2-3- 4-5 lập tức liên kết đến các Trang mà bạn đã tạo Hyperlink.(12). 3. Mời các bạn nhấp vào Link nầy để xem website11 áp dụng bài học tạo HYPERLINK của Dreamwearver 8. 126/146 Insert Ảnh Tạo Folder Website mới Website12 trên Desktop 1. Mở Dreamweaver > Create From Samples> Hàng Create From Samples chọn Page Designs (CSS) > Ra bảng New Document> Bên Phải chọn Mẫu TWO-COLUMN LEFT NAV > Create .(Hình 1). 2. Ra Bảng Save As > Desktop > Create New Folder > Gỏ : website12 > Nhấp Đúp lên > File name gỏ : index.html > Ra Bảng Copy Dependent Files > Copy . Khung làm việc có Tab index.html.(Hình 2). 127/146 3. Nhấp chọn Khung 280x200 > Nhấp Nút Image (Hàng Thanh Insert ) > Image > Chọn 1 Hình > Ok.(Hình 3). 128/146 4. Nhấp Phải Tab index.html > Save As > Save > Yes. 5. Định Nghĩa Ổ Dỉa và Site : ◦ Menu Site > New > Site > Site Name gỏ : website12 > Nhấp Biểu tượng Browse> Desktop > Nhấp Đúp Folder website12 > Select > Ok > Ok > Done. 129/146 ◦ Menu Site > Manage Sites > Edit > Remote Info > Access chọn FTP > FTP gỏ : www.freewebtown.com > Login : utbinh 026 > Password : ooo > Chọn Save > Nhấp Test kiểm tra sự liên kết giữa Dreamweaver và Host > Ok > Ok > Done .(Hình 4). 6. Panel Files hiện ra website12 với các Files và Folders của nó . Nhấp lên Hình vừa Insert vào hiện ra các chi tiết liên quan đến Hình.(Hình 5). 130/146 131/146 Insert Ảnh Đặt con trỏ lên Hình hiện ra TEXT • Khi nhấp OK sẽ hiện ra HT Image Tag Accessibility Attributes > Hàng Alternate Text nhập Text thay thế Ảnh khi nhấp vào Ảnh > Hàng Long Description thêm URL dẫn đến 1 Trang có mô tả chi tiết về Ảnh > OK. • Muốn không hiện ra HT nầy > Menu Edit > Preferences > Accessibility > Hủy chọn Hộp kiểm Images. • Khi bạn nhập TEXT trong Hàng Alternate Text , Text được đính kèm vào Ảnh để người khiếm thị đọc . Họ đọc bằng cách sử dụng bộ đọc màn hình dành riêng cho họ hoặc dành cho những người duyệt xem ảnh được tắt không nhận ra. • HT nầy không hiển thị ra cho UTBINH ( Không biết tại sao – có thể phiên bản cài đặt nầy không FULL – Xin các bạn cho biết tại sao không hiện ra HT ? ). • Nhấp vào Ảnh > Trang Property Inspector gỏ nhập Text thay thế trong Hộp ALT : Claudia Schiffer > Enter . Ctrl+Z nhiều lần để Undo nhiều bậc . Ctrl+Y nhiều lần để REDO nhiều bậc. • Xóa 1 Ảnh : Nhấp lên Ảnh > Phím SpaceBar > Ctrl+z > Ảnh Hiện ra lại. • Ảnh có thể Cắt – Copy - Paste – như thường thực hiện với TEXT. Sử Dụng PANEL ASSET Các Ảnh đã sử dụng đều được liệt kê trong Panel Assets ( Tab Assets kế Tab Files trong Panel Files ) . Cột Trái Hạng Mục đầu tiên là : • Images > Nhấp lên > Hiện ra các ảnh trong Site của bạn . • Chọn 1 Folder ảnh > Tab Assets > Chọn 1 Ảnh > Nhấp Nút Insert đáy File ảnh > Insert .(Hình 6). 132/146 Đặt tên và lưu trang 1. Sau khi tạo xong Trang Web ( index,html chẳn hạn ) đặt tên cho trang và lưu trong Folder Web Site. 2. Nên tập thói quen nhấp Phải Tab và Save thường xuyên vì nếu bạn quên động tác nầy những gì bạn hiệu chỉnh trong Trang Web trở thành công cóc. 3. Cần phân biệt : ◦ Chào mừng các bạn viếng thăm Trang Web của UTBINH : là tiêu đề Trang . Nó hiển thị trên cùng của màn Hình . ◦ Index.html : Là tên của Trang. 4. Lưu Trang lần đầu tiên : ◦ File > Save As (Ctrl+S) > Desktop > Create New Folder , gỏ : website Enter > File name gỏ : index.html > Save. Như vậy là bạn đã tạo 1 Folder Web Site ở Desktop ( Dreamweaver gọi là Site Cục Bộ ) . Hiện Folder nầy ở trong ỔCứng của bạn ( Cục Bộ ) . Từ xa là Ở trên Host Server ( Dreamweaver gọi là Site Từ Xa ) . Trong Folder Web Site nầy chứa Index.html mà bạn vừa tạo . ◦ Dreamweaver cho tên trang mặc định là Unititled-x( x là số trang mà bạn đã tạo ). 133/146 Thuộc tính của Page (Page Properties) Mở một trang 1. Trong Panel Files > Tìm Trang muốn mở > Nhấp Đúp nó. 2. Hoặc Menu File > Open > ( Ctrl+O ) > HT Open hiện ra > Chọn File > Open. (Hình 1) 134/146 3. Nếu muốn mở một Trang mà bạn đã làm việc gần đây > Hạng Mục Open a Recent Item trong Start Page và nhấp nó. 135/146 Xem trước một trình duyệt 1. Phím F12 > Dreamweaver đòi hỏi bạn phải lưu Trang bạn vừa tạo trước khi mở xem trước bằng Trình Duyệt . Nó hiện ra HT > Yes. (Hình2+ Hình 3) . 136/146 2. Phím F12 > Mở Trình Duyệt xem trước mặc định . Hoặc : Menu File > Preview in Browse > Chọn 1 Trình Duyệt > Trang mở ra theo Trình Duyệt mà bạn đã chọn .(Hình 4). 137/146 Xác lập các trình duyệt trong danh sách Browser Menu File > Preview in Browse > Edit Browse List > HT Preferences hiện ra > Thực hiện 1 hoặc nhiều điều sau đây : 138/146 • Thêm 1 Trình Duyệt : Nhấp + > Điền Thông Tin vào HT Add Browse.(Hình 5). • Loại bỏ 1 Trình Duyệt : Chọn 1 Trình Duyệt > Nhấp - . • Chọn 1 Trình Duyệt ưu tiên xem trước > Chọn nó và nhấp Nút Primary Browse. • Chọn 1 Trình Duyệt ưu tiên 2 : Nhấp nút Secondary Browse. Xác lập các thuộc tính trang Menu Modify > Page Properties > HT page Properties hiện ra > Nhấp Hạng Mục mà bạn muốn. 1. Chọn mục Apperance Menu Modify > Page Properties > HT page Properties hiện ra > Mục Appearance : ◦ Page Font : Chọn 1 Font mặc định của D. 139/146 ◦ Size : Chọn kích cở Tuyệt đối là 9,10,12> Được phép chọn tiếp Đơn vị Tính – Chọn kích cở tương đối là Small , Medium , Large ◦ Text Color : Chọn màu cho Text. ◦ Background Color : Cho phép bạn Insert vào 1 Ảnh nằm dưới Text > Nhấp Nút Browse để tìm vị trí ảnh cần Insert vào > Ok. Khi bạn chọn Ảnh làm nền , nó sẽ thay thế màu nền . ◦ Repeat : Xác lập ảnh nền sẽ hiển thị như thế nào nếu nó không vừa toàn bộ trang. Chọn Repeat để xếp ngói ảnh theo chiều ngang ( Repeat –x ) và dọc ( Repeat-y ). ◦ Margin : Xác lập lề Phải – Trái – Trên – Dưới của Trang > Chọn Đơn vị Tính > Ok .(H6+7).( Hình MH số 7 chưa nhập TEXT nên chưa có tác dụng ). 140/146 2. Chọn hạng mục Link Menu Modify > Page Properties > HT page Properties hiện ra > Mục LINK . ◦ Link Font : Xác định Font mặc định ( D sẽ sử dụng Foont nầy trừ khi được ghi đề bởi 1 Style Sheet CSS ) – Xác định In đậm – In Nghiêng. 141/146 ◦ Size : Giống trên. ◦ Link Color : Xác lập màu. ◦ Visited Links : Màu cho Text liên kết được tham quan . Có nghĩa là sau khi Link được mở ra Text liên kết – Nhấp tiếp vào Liên kết trong Text nầy ,ra text kế tiếp được xác định sẵn màu . ◦ Rollover Links : Đổi màu khi đặt con trỏ lên. ◦ Active Links : Nhấp Text hiện màu . ◦ Underline Style : Sẽ được gạch dưới.(H8). 142/146 Tham gia đóng góp Tài liệu: Giáo trình DreamWeaver 8 Biên tập bởi: Trần Việt An URL: Giấy phép: Module: Start Page của DreamWeaver 8 Các tác giả: Trần Việt An URL: Giấy phép: Module: Cửa sổ tài liệu Các tác giả: Trần Việt An URL: Giấy phép: Module: DreamWeaver 8 Document Các tác giả: Trần Việt An URL: Giấy phép: Module: Status Bar , Property Inspector và Panel Các tác giả: Trần Việt An URL: Giấy phép: Module: Layout - Quản lý các cửa sổ Các tác giả: Trần Việt An URL: Giấy phép: Module: Site cục bộ Các tác giả: Trần Việt An URL: 143/146 Giấy phép: Module: Site từ xa Các tác giả: Trần Việt An URL: Giấy phép: Module: FTP , SFTP và Web DAV (1) Các tác giả: Trần Việt An URL: Giấy phép: Module: FTP , SFTP và Web DAV (2) Các tác giả: Trần Việt An URL: Giấy phép: Module: Hiệu chỉnh Site Các tác giả: Trần Việt An URL: Giấy phép: Module: Panel Files trong DreamWeaver 8 Các tác giả: Trần Việt An URL: Giấy phép: Module: Panel Files trong DreamWeaver 8 (2) Các tác giả: Trần Việt An URL: Giấy phép: Module: SYNCHRONIZE Đồng Bộ Hóa Các tác giả: Trần Việt An URL: Giấy phép: 144/146 Module: Trang trang đầu tiên với DreamWeaver 8 Các tác giả: Trần Việt An URL: Giấy phép: Module: Hyperlink - Siêu liên kết Các tác giả: Trần Việt An URL: Giấy phép: Module: Insert Ảnh Các tác giả: Trần Việt An URL: Giấy phép: Module: Thuộc tính của Page (Page Properties) Các tác giả: Trần Việt An URL: Giấy phép: 145/146 Chương trình Thư viện Học liệu Mở Việt Nam Chương trình Thư viện Học liệu Mở Việt Nam (Vietnam Open Educational Resources – VOER) được hỗ trợ bởi Quỹ Việt Nam. Mục tiêu của chương trình là xây dựng kho Tài nguyên giáo dục Mở miễn phí của người Việt và cho người Việt, có nội dung phong phú. Các nội dung đểu tuân thủ Giấy phép Creative Commons Attribution (CC-by) 4.0 do đó các nội dung đều có thể được sử dụng, tái sử dụng và truy nhập miễn phí trước hết trong trong môi trường giảng dạy, học tập và nghiên cứu sau đó cho toàn xã hội. Với sự hỗ trợ của Quỹ Việt Nam, Thư viện Học liệu Mở Việt Nam (VOER) đã trở thành một cổng thông tin chính cho các sinh viên và giảng viên trong và ngoài Việt Nam. Mỗi ngày có hàng chục nghìn lượt truy cập VOER (www.voer.edu.vn) để nghiên cứu, học tập và tải tài liệu giảng dạy về. Với hàng chục nghìn module kiến thức từ hàng nghìn tác giả khác nhau đóng góp, Thư Viện Học liệu Mở Việt Nam là một kho tàng tài liệu khổng lồ, nội dung phong phú phục vụ cho tất cả các nhu cầu học tập, nghiên cứu của độc giả. Nguồn tài liệu mở phong phú có trên VOER có được là do sự chia sẻ tự nguyện của các tác giả trong và ngoài nước. Quá trình chia sẻ tài liệu trên VOER trở lên dễ dàng như đếm 1, 2, 3 nhờ vào sức mạnh của nền tảng Hanoi Spring. Hanoi Spring là một nền tảng công nghệ tiên tiến được thiết kế cho phép công chúng dễ dàng chia sẻ tài liệu giảng dạy, học tập cũng như chủ động phát triển chương trình giảng dạy dựa trên khái niệm về học liệu mở (OCW) và tài nguyên giáo dục mở (OER) . Khái niệm chia sẻ tri thức có tính cách mạng đã được khởi xướng và phát triển tiên phong bởi Đại học MIT và Đại học Rice Hoa Kỳ trong vòng một thập kỷ qua. Kể từ đó, phong trào Tài nguyên Giáo dục Mở đã phát triển nhanh chóng, được UNESCO hỗ trợ và được chấp nhận như một chương trình chính thức ở nhiều nước trên thế giới. 146/146