Cùng học tạo Blogspot: XỬ LÝ VĂN BẢN TRONG DREAMWEAVER CS6

BÀI 7: XỬ LÝ VĂN BẢN

NGÀY 20.5.2014

Video hướng dẫn: http://goo.gl/BuenPN

Bạn tạo Folder 07 cho bài học hôm nay. Trong Folder này bạn tạo một File tên 01.html. Bạn bấm đúp lên File này. MỞ CS Design và Title đặt tên: Example 01. Bấm lên Vùng trắng và bấm Crtl+S lưu lại Page.

Danh sách các bài viết do Út Bỉnh

Soạn thảo theo video hướng dẫn

Bài 0: Download và cài đặt Dreamwaever CS6

Bài 1: Danh sách 15 video hướng dẫn thiết kế web:

Bài 2: Làm chủ giao diện Dreamweaver CS6

Bài 3: Quản Lý Site trong Dreamweaver

Bài 4: Tạo Page trong Dreamweaver:

Bài 5: Làm việc với Code

Bài 6: Làm quen với HTML và CSS

Bài 6B: Làm quen với HTML và CSS

Bài 7 : Xử lý văn bản

Nhập nội dung: Khóa học thiết kế web với Dreamweaver. Enter. Nhập tiếp: Khóa học này được cung cấp bởi ZendVN. Như vậy là bạn đã nhập xong nội dung cần hiển thị. Bạn mở CS Plit để quan sát phần Code và Design. (Để có phần Code trên và phần Design dưới dễ quan sát bạn vào View, xóa dấu chọn Split Vertical).

Thẻ <p> tạo ra nội dung của các đoạn văn bản khác nhau: Khi bạn Enter để xuống dòng thì lập tức các nội dung này được nằm trong Thẻ <p>. Đây là thẻ tạo ra nội dung của các đoạn khác nhau.

Cách tạo các phần xuống dòng trong các đoạn văn bản khác nhau: Bạn copy nội dung > Enter để xuống dòng > Paste nội dung vào. Bạn chọn đầu dòng của đoạn văn bản dưới cùng. Bấm phím Backspace để dòng này lên sát dòng trên nó. Bấm phím Shift+Enter. Bây giờ đã có phần xuống dòng và Dreamweaver tạo ra thè <br/>. Bạn Save As tên 02. Enter. Thay đổi Example tên Example 02. Bấm Ctrl+S để lưu lại File 02 này. Bấm CS Design.

Di chuyển một đoạn văn bản thụt vào một đoạn: Bạn phủ khối đoạn văn bản. Trong khung Properties/Thẻ HTML bấm Blockquote. Đoạn văn bản đã thụt vào trong một đoạn và nó nằm trong thẻ Blockquote. Bấm CS Code dễ quan sát hơn.

Lúc này Thẻ Blockquote đã được trưng ra và trong nó chứa nội dung: Khóa học này được cung cấp bởi ZendVN.

Bạn Preview và dùng thuộc tính Inpect Element để kiểm tra: Bạn thấy nội dung này nằm trong Thẻ Blockquote.

Định dạng lại cho Thẻ Blockquote này: Bấm nút New CSS Rule, Dòng Choose… chọn Tag …> Dòng Choose or enter a name for your selector chọn: blockquote > Dòng Choose where… chọn New Style Sheet File > Bấm ok.

o Ra CS kế tiếp, bạn tạo một folfer mới tên css > Bấm đúp lên folder vừa tạo > File name đặt tên: style và bấm Save.

o Định dạng cho phần Blockquote: Cột trái chọn Type > Font-Family chọn tahoma > Font Size chọn 16 px > Chọn màu đỏ. Chọn thuộc tính Background trong cột trái > Chọn màu vàng nhạt trong Backgroud-Color > Bấm Ok. Mở CS Design bạn thấy nội dung đã được định dạng.

· Save và hiển thị định dạng: Bạn copy nội dung > Shift+Enter để xuống dòng > Ctrl+V dán nội dung vào. Bạn có tất cả 3 dòng nội dung. Bấm Ctrl+S và bấm trình duyệt ở Taskbar lại. Preview vẫn chưa thấy hiển thị định dạng đã chọn do chưa Save lại File style.css này. Bấm vào và Ctrl+S và bấm trình duyệt lại. Nội dung định dạng đã được hiển thị. Bấm Inpect Element sẽ thấy các thuộc tính của Blockquote.

· Save As File 02 này và chọn thư mục 07, đặt tên file là 03. Bấm Save. Đổi Example thành Example 03.

· Xóa nhanh giá trị Blockquote: Phủ khối giá trị > Bấm phải Tag blockquote và chọn Remove Tag. Bạn đã xóa Thẻ HTML của blockquote.

· Bạn định dạng từng dòng theo thứ tự trong danh sách Format. Các bạn thường sử dụng các Thẻ H1,H2,H3. Cho phần Tiêu đề của các Website.

Định dạng cho các Thẻ H1-H2-H3-H4-H5: Bấm Page Properties trongKhung Properties > Chọn Heading CSS > Chọn theo hình

Bấm Apply, bạn thấy nội dung đã được định dạng theo tùy chọn. Bấm Ok.

Khi bạn tạo Thẻ H1 thì nó sẽ chịu tác động của phần cấu hình trước đó: Bạn nhập nội dung: Đây là Thẻ H1 > Phủ khối > Dòng Format chọn Heading 1 > Nội dung đã có định dạng theo cấu hình trước đó mà bạn đã tạo.

Khi bạn thực hiện cấu hình thì nó nằm trong style: Bấm dấu + trong style bạn đã thấy danh sách cấu hình trước đó.

Bạn bấm CS Code để kiểm tra: Di chuyển phần cấu hình vào File style.css, chọn hết và rê đè lên style.css. Phần <style> lúc này không cần thiết, bạn xóa nó đi, bấm phải > Chọn Delete. Save As thành File 04.

Chuyển đổi nội dung H2 thành nội dung H1: Mở CS Design. Phủ khối dòng H2 > Format chọn Heading 1.

o Cách khác: Phủ khối H2 > Bma61 phải lên <h2> Chọn Quick Tag Editor > Edit Tag sửa <h1> Nhấp lên vùng trắng. H2 thành H1.

Phần Quick Tag Editor giúp định dạng nhanh: Nhập: style=”font-size:50px;”> . Bạn thấy đã được thay đổi.

Như vậy với Quick Tag Editor bạn có thể thay đổi nhanh chóng Thẻ HTML một giá trị nào đó. Bạn Save As với tên 05. Đổi Example thành 05. Với File 04.html bạn sửa Example thành 04. Tắt các Files còn lại.

Tạo ký hiệu đặc biệt: Bạn vào Trang Web ZendVN phần Footer có ký hiệu đặc biệt. Bạn vào Insert > HTML > Special Characters > Chọn Copyright. Bạn Preview để kiểm tra.

Ngoài ký hiệu này Dreamweaver còn cung cấp cho bạn nhiều ký hiệu hoặc vào Others để chọn ký hiệu khác.

Bạn vào CS Code: Đối với các phần ký hiệu này nó sẽ có các mã HTML riêng và nếu bạn nào có khả năng nhớ được các mã này thì cũng rất tốt tuy nhiên bạn hoàn toàn có thể sử sử dụng Dreamweaver để tạo các ký hiệu này vì nó đã cung cấp sẵn cho bạn. Bạn cũng không cần nhớ làm gì.

COPY VÀ PASTE

Copy từ tài liệu khác đưa vào tài liệu Dreamweaver: Bạn vào Folder 07 và tạo File 06.html. Bấm đúp File 06.html. Bạn lấy nội dung trong Source/07/public/News > Copy và Paste Special > Chọn Text with structure with full vào Trang Soạn Thảo CS Design. Bạn Preview.

Copy và Paste nội dung không có định dạng: Mở NotePad > Copy vào đây và Copy Paste vào CS Design.

Tùy chọn Copy/Paste: Dreamweaver cung cấp cho bạn công cụ thay thế chuyện Copy vào NotePad : Bạn vào Edit > Preferences > Copy Paste. Bạn chọn Text Only và bấm Ok. (Xem kết quả đoạn 1).

Save As thành File 07. Đổi thành Example 07. Bạn Ctrl+A để chọn hết và bấm Delete để xóa chúng.

Bây giờ tôi Copy văn bản và Paste vào. Các định dạng về Font chữ- màu sắc đã không còn nửa. Ở đây chỉ có văn bản thuần.

Chọn tùy chọn Text with Structure ( Paragraph, Lists, table, etc..) và bấm Ok. Bạn copy và Paste vào Dream.(Xem kết quả Đoạn 2)

Chọn tùy chọn Text plus Basic Formatting (Bold, Italic) ) và bấm Ok. Bạn copy và Paste vào Dream.(Xem đoạn 3)

Chọn tùy chọn Text plus Full Formatting (Bold, Italic, Styles) và bấm Ok. Bạn copy và Paste vào Dream.(Xem đoạn 4).

Như vậy là bạn đã biết cách cấu hình các tài liệu. Bạn Save As tên 08. Bạn xóa tất cả nội dung. Đặt tên Example 08.

SỬ DỤNG CHỨC NĂNG IMPORT CỦA DREAMWEAVER

Vào Folder 07 tạo một Folder mới tên public. Copy File News trong Source và Pasate vào Folder public trong mã nguồn.(Mã nguồn của trang Web demo xem đường dẫn).

Bạn mở Panel Files, refresh Folder public đã có file News.

Để Import File bạn làm như sau : Vào File > Import > Chọn Word Documents > Vào Folder public và chọn News > Trong Formatting có 4 tùy chọn giống như trong phần Copy/Paste, bạn chọn giá trị cuối và bấm Open.