Cùng học tạo Blogspot: LÀM QUEN VỚI HTML VÀ CSS (TIẾP THEO)

BÀI 6 B: LÀM QUEN VỚI HTML VÀ CSS

NGÀY 18.5.2014

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

Hướng dẫn sử dụng các công cụ của Dreamwaever để tạo ra các Thẻ HTML cũng như tạo ra các định dạng CSS cho các thẻ HTML này. Giúp các bạn tìm hiểu thành công cách định dạng cho các Thẻ HTML bằng cách sử dụng Mã nguồn và các công cụ của Dreamweaver.

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

1.NHẬP NỘI DUNG CHO FILE 01.htnl

Bạn tạo một File trong Thư mục tool có tên 01.html. Bấm đúp lên 01.html. Title đặt tên: Example 01. Trong Menu View xóa bỏ chọn Split để thấy Phần Code bên trên và phần Design bên dưới dễ quan sát trong lúc nhập Code.

Nhập nội dung cho phần Body: Khóa học Thiết kế Web với Dreamweaver > Ctrl+S.

Vậy khi bạn nhập các giá trị ở CS Design thì ở CS Code vẫn hiển thị giá trị giống vậy. Bạn Preview thì thấy vẫn hiển thị bình thường. Bấm phải lên nội dung chọn View page source. Bạn thấy nội dung vẫn nằm trong cặp thẻ body. Bạn Save As đặt tên 02.

2.TẠO THẺ DIV CHO PHẦN NỘI DUNG

Bạn vào Menu Insert > Layout Objects > Div tags > Bấm Ok. Lúc này bạn đã tạo ra một phần thẻ div với nội dung là: Content for New Div Tag Goes Here. Bạn thấy trong phần mã nguồn cũng đã xuất hiện thẻ div trong nội dung vừa tạo.

Bạn cắt nội dung:”Khóa học thiết kế web với Dreamweaver” và dán đè lên nội dung còn lại. Bạn Ctrl+S. Bây giờ bạn đã thấy bạn đã tạo thẻ div bao bọc nội dung Khóa học thiết kế web với Dreamweaver. Title nhập: Example 02. Bạn Save As thành File 03. Thay đổi Title thành Example 03.

Bạn cũng có thể truy cập chức năng tạo thẻ DIV bằng cách sử dụng các công cụ: Bấm Menu Layout > Insert Div Tag. Lúc này nội dung của bạn vẫn được hiển thị với div bao quanh.

3.THÊM THUỘC TÍNH CHO THẺ DIV

Bật CS Tad Inpector bằng cách vào Menu Window > Tag Inpector (F9). Bấm vào dấu + của CSS/Accessibility xuất hiện nội dung gồm các thuộc tính. Bạn nhập ZendVN trong thuộc tính Title. Bấm vào vùng trắng trong Design. Lúc này thẻ div đã được thêm thuộc tính Title là ZendVN. Bạn Preview vả đặt chuột lên nội dung bạn đã thấy thuộc tính Title ZendVN xuất hiện.

Bấm phải chọn View page source, bạn cũng thấy thuộc tính Title đó là ZendVN.

Tương tự như vậy, bạn vào Style nhập width: width:1000px;background:yellow. Phần Design đã áp dụng thuộc tính vừa tạo. Bạn Ctrl+S. Bạn Preview và bấm F5 đã thấy thuộc tính Style vừa tạo. Bãn Save As với tên 04. Nhập Example 04.

4.CÁCH XÓA THẺ DIV

Khi bạn bấm lên nội dung > Xuất hiện thẻ <div> Bấm phải lên > Chọn Remove Tag để xóa Thẻ Div.

Bây giờ bạn thấy nội dung chỉ còn là giá trị chứ không còn là thẻ HTML nửa.

5.BỔ SUNG 2 THUỘC TÍNH CLASS VÀ ID

Bạn vào Menu Layout > Bấm Insert Div Tag > CS xuất hiện, nhập content trong dòng Class và courde trong Dòng ID > Bấm Ok.

Lúc này bạn đã thấy bổ sung 2 thuộc tính: Class với giá trị là content và thuộc tính ID với giá trị là course.

Bạn cũng có thể thêm 2 thuộc tính này trong Tag Inpector (F9). Save As thành 05. Example thành 05. Bạn xóa các Files trước đó.

6.TẠO ĐỊNH DẠNG CHO CLASS CONTENT

Mở CS CSS Styles: Vào Window > Chọn CSS Styles > Bấm All. Bấm phải lên No styles defined > Chọn New. Xuất hiện CS New CSS Rule. Chọn giá trị mặc định là Class - Nhập content là nội dung của thuộc tính class - Chọn giá trị mặc định là This documents only. Bấm Ok.

Xuất hiện CS CSS Rule definition for content, bây giờ bạn sẽ tạo định dạng cho CSS . Bạn chọn Background trong cột trái và chọn màu xanh lá cây. Bạn chọn Box trong cột trái và chọn width 800 px. Bấm Ok. Bạn thấy hiển thị như bạn đã cấu hình. Bạn thấy thuộc tính style có nội dung content. Phần Design đã cấu tạo như bạn chỉ định và trong phần mã nguồn. Trong cs CSS Styles bạn đã thấy thuộc tính style có nội dung là content. Và phần này cũng đã thể hiện trong phần mã nguồn. Như vậy trong bài trước là bạn gỏ Code, bây giờ bạn sử dụng các công cụ của Dreanweaver để tạo Code.

7.TẠO MỘT CLASS KHÁC

Bấm phải lên style trong CS CSS Styles chọn New > Nhập content2 > Ô cuối chọn (New Style Sheet File) > Bấm Ok.

Tạo một file tên style trong tool /css: Xuất hiện CS mới, trong dong Save in bạn chọn tool > Bấm nút Create New Folder đặt tên css > Bấm đúp lên > Dòng File name đặt tên: style > Bấm Save.

Định dạng cho Class content2 như sau: Xuất hiện CS tiếp theo, phần Bacground chọn màu xanh dương, phần Box nhập giá trị width là 900 px. Bấm Ok.

8.NỘI DUNG TRONG CS CSS STYLES

Có 2 phần: Phần style: Đây là các định dạng CSS nằm trong File HTML. Phần style.css: Đây là các định dạng CSS nằm trong File style.css.

9.ÁP CÙNG LÚC CHO MỘT THẺ DIV HAY MỘT THẺ HTML NHIỀU CLASS

Không những trong Code bạn có thể tạo như thế mà bạn còn có thể sử dụng công cụ để tạo điều này dễ dàng.

Bấm lên nội dung > Bấm phải Thẻ Tag div # course content bên dưới > Chọn Set class > Chọn Apply Multiple Classes.

Check vào content 2 > Bấm Ok.

Bạn quan sát mã nguồn thấy Thẻ DIV đã có thuộc tính class có 2 nội dung là content và content 2. Bạn Ctrl+S và Preview.

Trong trình duyệt bấm phải lên giá trị > Chọn Inpect Element. Bạn thấy class content2 nằm sau content do đó giá trị của nó đã đè lên content. Bạn Save As đặt tên 06.

Bạn có thể di chuyển content vào Style.css bằng cách rê thả vào. Bạn Delete style bằng cách bấm phải > Chọn Delete. Vậy là bạn đã biết cách di chuyển từ File HTML sang File CSS. Bạn Save as đặt tên 07. Đặt tên Example 07.
Remove một class: Bấm chọn giá trị > Bấm Tag div bên dưới > Bấm phải chọn Set Class > Chọn content > Bạn thấy trong Code chỉ còn class content.
Định dạng phần ID: Bấm phải lên style.css > Chọn New > Dòng Choose or… nhập course > Bấm Ok.
Ra CS tiếp theo, bacground chọn màu vàng, box nhập 700 px > Bấm Ok. Bạn Ctrl+S và Preview. Bạn thấy nội dung đã hiển thị giống như phần bạn đã định dạng. Như vậy là bạn đã định dạng cho giá trị ID.

10.Import một File CSS vào phần tài liệu của bạn:

Bạn vào Thư mục CSS và tạo một File style2.css. File này chưa được nhúng vào tài liệu của bạn. Bạn bấm vào Icon Attach Style Sheet. Xuất hiện CS, Bấm nút Browse chọn css/style2.css > Dòng Media chọn Screen > Bấm Ok.

· Lúc này bên phần mã nguồn các bạn thấy ngoài phần File CSS với tên là style bạn còn Add thêm một File CSS có tên là style2.

Các bạn hoàn toàn không sử dụng gỏ mã nguồn mà chỉ sử dụng các công cụ để tạo ra các định dạng CSS và nhúng các Files CSS vào Web Page.

· Thay đổi giá trị Class content: Bấm đúp vào Class content > Ví dụ thay đồi phần Box, vào Width nhập 800 > Bấm Ok. Như vậy Class content của bạn đã được thay đổi.

· Bạn di chuyển Properties dễ quan sát hơn. Phẩn Properties của Class content là phần background và width. Bạn có thể Add thuộc tính cho content này bằng cách bấm lên Add Properties > Nhập: color và chọn màu đỏ > Ctrl+S để lưu và Preview. Bạn thấy nội dung phần Font đã có màu đỏ giống như bạn đã cấu hình.

Nếu bạn chọn nội dung > Thanh Tag bar cho bạn biết đang chọn với Thẻ Div với Id là course và với class là content. Các nội dung này bạn có thể xem trong phần Properties và HTML > Bạn có thể không cần ID course khi chọn None trong Css. Trong Code phần id đã biến mất.
Tương tự phần Class bạn cũng có thể chọn content – content2 – Apply Multiple Classes.

12.Cấu hình tùy chọn hiển thị Cửa Sổ mong muốn:

Khi bạn bấm đúp lên content thì một CS CSS Rule definition for content2 xuất hiện. Bạn có thể cấu hình không cho hiển thị cửa sổ này mà xuất hiện cửa sổ khác do bạn chỉ định thì bạn cấu hình như sau: Edit > Preferences > Chọn CSS Styles. Bạn tháy đang chọn Edit Using CSS dalog. Bạn chọn Edit using Properties Pane > Bấm Ok. Bạn bấm đúp vào content. Bạn đã thấy chuyển đến Properties của phần class content này.

13.Bạn có thể thêm thuộc tính cho content2:

Bấm Add Properties > Bấm xổ xuống chọn một thuộc tính trong danh sách xuất hiện. Khi bạn Ctrl+S nó chỉ lưu File 07 của bạn mà nó chưa lưu trong File style này mà bạn vừa nhập thuộc tính do đó khi Preview thì chưa thấy kết quả.

Định dạng cho File Style là các thuộc tính CSS. Do đó phải lưu xong trong Style CSS thì hiển thị kết quả.
Khi bạn cấu hình chọn: Edit Using code view > Bấm Ok: Nếu bạn không quen viết Code thì Dreamweaver cung cấp sẵn công cụ cho bạn.

Khi bấm đúp lên contents > Bạn đã được di chuyển trực tiếp đến phần mã nguồn CSS. Bạn trực tiếp gỏ mã vào.

· Bấm Source góc trái trên > Bấm lên nội dung > Kết hợp phiếm ALT+Click lên nội dung > Khi rê chuột vào các Class này sẽ xuất hiện các thuộc tính. Đây là một cách các bạn kiểm tra các phần định dạng CSS rất nhanh.