BÀI 7 B: XỬ LÝ VĂN BẢN
NGÀY 21.5.2014
Xem Video hướng dẫn: http://goo.gl/oKxSwW
Trong bài học này bạn hướng dẫn cách định dạng văn bản trong
Dreamweaver, xử dụng các văn bản có từ các nguồn tài liệu khác. Hướng dẫn Import
một tài liệu vào Trang Web, sử dụng Tag CSS STYLES và các cửa sổ định dạng cho
từng dòng chữ, từng nội dung của trang
Word.
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 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
Bài 7 B : Xử lý văn bản (Tiếp theo) :
IMPORT MỘT TÀI LIỆU KHÁC
Trong Folder public, bạn rê File News thả vào trong Vùng Soạn
Thảo. Một CS Insert Document hiện ra, có 2 phần, bạn chọn Insert the contents và
cấu hình con chọn Text with structure
plus full formatting (4 tùy chọn này
bạn đã học trong bài trước). Sau đó bấm Ok.
Như vậy nội dung bạn đã Import thành công vào Vùng Soạn Thảo
với đầy đủ các phần format. Bạn tạo Example 09. Bạn Preview. Với cách Import này
nội dung vẫn hiển thị bình thường.
IMPORT MỘT
TÀI LIỆU KHÁC
Rê File News vào Vùng Soạn Thảo và chọn Create a link. Bấm
Ok.
Bạn đã tạo ra một liên kết có tên là:
News giống tên File News. Bạn Save file này và Refresh lại (Mở trình duyệt
Chrome trong Task bar và bấm phím F5). Bạn bấm lên News này sẽ tự động tải về
thể hiện link góc đáy trái. Bấm Folder Download đã thấy File News này. Như vậy
với phần Insert Create a link thì chức năng này tạo ra các liên kết đến File mà
bạn đã di chuyển vào.
Bạn thay đổi tên News thành Download
tài liệu. (Cách gỏ như sau: Bạn gỏ chữ D đè lên chữ s). Sau cùng bỏ chữ New.
Sau đó Redresh lại.
Với tính năng này giúp Người Dùng download các bài viết, các
tài liệu trên Website của bạn về máy tính của họ. Bạn Save As tên 10
TÌM HIỂU
KHUNG PROPERTIES VÀ THÀNH PHẦN HTML VÀ CSS.
1.THẺ HTML: 6
- Mục Format – Class – ID bạn đã học xong. Mục Link sẽ học sau. Bây giờ bạn sẽ tìm hiểu các mục còn lại. Mục B và I giúp bạn định dạng văn bản chữ đậm và nghiêng giống như trong Word. Bạn đổi thành Example 10 và Preview.
- Bạn bôi đen văn bản này và bấm
phải chọn Inpect Elememnt. Bạn thấy giá trị này nằm trong cặp thẻ
<strong> và giá trị là Bold nên nó có in đậm.
- Khi các bạn đã chọn công cụ In đậm
và In nghiêng thì mã nguồn đã được tạo ra do đó bạn không cần quan tâm vấn
đề tạo ra mã nguồn.
UNORDERED LIST (Danh
sách không thứ tự):
Phủ khối văn bản và bấm nút Unorderd List. Văn bản đã được đánh dấu danh sách
không thứ tự. Thay đổi Example 11 và Preview. sử dụng công cụ Inpect Element để
kiểm tra.
Khi Preview bạn thấy thẻ UL và Thẻ LI. 2 Thẻ này thường được
sử dụng trong HTML để định dạng các danh sách hay các List. Bạn Save As thành
File 12.
ORDERED LIST (Danh sách
có số thứ tự): Phủ
khối văn bản và bấm nút Orderd List. Văn bản đã được đánh dấu số thứ tự. Bạn Enter và nhập ZendVN. Bạn đã thấy
số thứ tự tăng lên.
2.THẺ CSS
Định dạng danh sách: Vào Format > List >
Properties. Dòng List Type chọn Numbered List. Dòng Start count nhập 4 (Danh sách
khởi đầu bằng số thứ tự 4). Bấm Ok.
.Bạn đã có danh sách với các số thứ tự bắt đầu là 4.
OUTDENT và INDENT: Giúp bạn Thụt ra , Thụt vào văn bản.
Như vậy các thuộc tính HTML bạn đã tìm hiểu xong.
Trong Khung Properties, bấm Thẻ CSS. Giúp các bạn định dạng văn
bản cho các giá trị trên đây. Dòng Font chọn Times New Roman và chọn các công cụ
kế tiếp.
Sử dụng CS Edit Font
List: Bấm xổ xuống
trong Dòng Font > Chon Edit Font List > Một CS hiện ra, bạn muốn bổ sung
một Font: Chọn một Font trong danh sách Available fonts và bấm dấu < , đả xuất
hiện tên font vừa chọn trong Khung Choose fonts. Muốn thêm và xóa Font: Chọn tên
một font muốn xóa > Bấm dấu -.
Tạo chữ INTEL có kích cở Thẻ H1: Phủ khối Intel > Ctrl+T
> Nhập h1 > Chọn vùng trắng. Bạn đã thấy Intel nằm trong Thẻ H1. Bạn Save
As thành 13. Đổi Example 13. Dóng các Files khác chửa File 13 bằng cách là bấm
phải vào File 13 và chọn Close other files. Xóa hết các nội dung này.
Rê File Worde vào Vùng Soạn thào > Chọn Insert the
contents > Chọn Text only > Bấm Ok. Đóng các Tab khác bằng cách bấm phải
lên Tab đang mở > Chọn Close Other Tab. Khi
bạn vào View Page Source các giá trị trong cặp thẻ <body> đã hiển thị
không đúng. Rê file Worde vào Vùng Soạn Thảo.
Nó hiển thị bằng các ký hiệu HTML và điều này bạn không thể chấp
nhận được. Đây là một nhược điểm khi bạn Import trực tiếp vào.
Để khắc phục bạn vào Phần Code và Paste vào Body
> Bấm Tab Design. Bạn Preview và bạn thấy Source đã đúng. Đây là cách sữa chữa
các dữ liệu hiển thị sai trong phần view source.
Định dạng lại văn bản:
Bạn tách nội dung thành
3 phần: Tiêu e962 .
Thân và cuối như sau:
Bây giờ bạn thấy cả 3 phần đều nằm trong thẻ<p>. Bạn sẽ
định dạng cho thẻ này. Bạn vào CS Design
Bấm dòng đầu > Bấm Tag Inpector, Dòng Class nhập title. Bấm
lên nội dung > Class nhập: text. Bấm Pc World nhập Class là author. Bây giờ
bạn định dạng cho các Class này.
Bấm Tag CSS Styles. Bạn cần Import File style.css. Bấm Icon
Attach Style Sheet. Xuất hiện CS Attach. Bấm nút Browse > Đến file style.css
> Dòng Media chọn screen. Bấm Ok.
Bạn thấy các giá trị của file css đã được hiển thị. Bạn xóa các
files khác không cần thiết.
Bây giờ bạn tiến hành định dạng cho các Class. Bấm Dòng nội
dung Title. Bấm Phải lên style.css > Chọn New. Một CS xuất hiện, chọn theo hình.
Bấm Ok.
Bấm Type cột trái và chọn theo hình
Bấm Block cột trái và chọn theo hình.
Bấm Ok.
Bạn Preview. Bạn bấm Inpect Element để
kiểm tra. Bạn thấy phần định dạng CSS rất đơn giản.
Bấm Dòng nội dung Thân. Bấm Phải lên style.css > Chọn New.
Một CS xuất hiện, chọn theo hình (Nhập text). Bấm Ok. Trong Type bạn chọn 18 px
màu xanh dương. Trong Block chọn Justify. Bấm Apply và Ok.
Bấm Dòng nội dung Author. Bấm Phải lên style.css > Chọn
New. Một CS xuất hiện, chọn theo hình (Nhập text). Bấm Ok. Trong Type bạn chọn
16 px màu đen. Trong Block chọn Right. Bấm Apply và Ok.
Bạn Preview
Trong bài học này bạn đã biết cách định
dạng văn bản trong Dreamweaver, xử dụng các văn bản có từ các nguồn tài liệu khác.
LINKS DOWNLOAD CÁC BÀI VIẾT
CHUYÊN ĐỀ DREAMWEAVER CS6:
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 :
Bài
7 B: Xử lý văn bản (Tiếp theo):
No comments:
Post a Comment