Hướng dẫn tạo website bằng Dreamweaver CC – Phần 4: Thay đổi font chữ và tạo kiểu cơ bản

Trong phần thứ tư của loạt bài hướng dẫn tạo website bằng Dreamweaver này, hãy tìm hiểu cách tính kích thước các nhân tố web. Sau đó, sử dụng CSS để áp dụng bố cục và mẫu mã chung cho những phần tử và văn bản trên trang.

Giới thiệu

Chào mừng bạn đến với phần thứ tư của loạt bài chỉ dẫn xây dựng một trang web đơn giản, thích nghi trong Dreamweaver CC 2015. Ba phần trước các bạn đã được hướng dẫn thành lập trang web trong Dreamweaver và sau đó tạo hai trang sử dụng cấu trúc HTML. Hình dưới đây hiển thị trang web trong trình duyệt nếu bạn tải index.html.

Phần còn lại của loạt bài chỉ dẫn này trừ phần cuối cùng được sử dụng để biến “con vịt xấu xí” thành “con thiên nga” với thiết kế đơn giản nhưng thanh lịch bằng phương pháp sử dụng CSS và thêm hình ảnh. Trong phần này, bạn sẽ tìm hiểu cách dễ dàng để tính toán chiều cao, bề rộng trang, thay đổi font chữ và sử dụng CSS Designer để tạo kiểu cơ bản.

Tạo một quãng code để đơn giản hóa các tính toán bề rộng và chiều cao

Trong CSS, mọi phần tử được cho là một hộp. Trong mô hình hộp CSS mặc định, chiều rộng và chiều cao thành phần thường chỉ áp dụng cho chính thành phần đó. Nếu thêm khoảng đệm (padding) quanh nội dung của phần tử, nó sẽ không nằm trong tính toán và đường viền cũng vậy. Ví dụ, nếu bạn để chiều rộng của thành phần là 250px và chiều cao là 100px, sau đó thêm 20px cho khoảng đệm mỗi bên và cộng với 5px đường viền, chúng ta sẽ được bề rộng toàn trang là 300px và chiều cao là 150px.

Điều này khiến việc tính toán trở nên khó khăn hơn, đặc biệt khi muốn trộn kích cỡ phần trăm và pixel. Tuy nhiên sẽ đơn giản hơn khi nghĩ phần đệm và đường viền là phần nào của kích thước phần tử. Để đơn giản kiểm soát bố cục trang, đa số các nhà thiết kế web uy tín đều thêm hai quy tắc kiểu ngắn vào đoạn đầu style sheet để thêm phần đệm và đường viền vào chiều rộng và độ cao toàn trang của phần tử. Những quy tắc này rất hữu ích, bạn có thể lưu chúng trong bảng Snippets của Dreamweaver để có thể chèn vào kiểu của trang web khác.

Bước 1. Mở index.html trong cửa sổ Document , click vào responsive.css trong thanh công cụ Related Files để mở style sheet trong Split View .

Bước 2. Click vào bên trong code và tạo một dòng trống trên dòng 2 và nhập /* Simplify width and height calculations */ . Trong CSS, tất cả nằm giữa /* và */ được nghĩ là một nhận xét, vì vậy đây chỉ là một lời nhắc nhở về những gì code thực hiện.

Bước 3. Tạo một dòng mới và gõ html theo sau là một dấu ngoặc nhọn mở ({). Quy tắc kiểu bao gồm một bộ chọn theo sau là cặp thuộc tính/giá trị giữa các dấu ngoặc nhọn. Loại bộ chọn đơn giản nhất gồm thẻ HTML không có dấu ngoặc nhọn. Phần tử cao cấp nhất của mỗi trang web là , do đó html là bộ chọn CSS ảnh hưởng đến tất cả trong trang.

Bước 4. Nhấn Enter/Return ngay sau dấu ngoặc nhọn. Dreamweaver lùi dòng kế đến và ngay tức thì bật lên gợi ý code cho các tính chất CSS. Bạn sẽ thấy trong lúc gõ box , Dreamweaver lọc các gợi ý code, tìm kiếm văn bản thích hợp trong tất cả các tính chất hợp lệ ngay cả ở phần giữa tên thuộc tính.

Bước 5 . Ở đây thuộc tính bạn mong muốn sử dụng là box-sizing . Sử dụng các phím mũi tên hoặc con chuột để chọn nó từ gợi ý code và nhấn Enter/Return . Dreamweaver xong xuôi tên thuộc tính và theo sau nó bằng dấu hai chấm (:). Và gợi ý code bật lên một lần nữa, để khiến code dễ đọc hơn, hãy thêm 1 khoảng trắng, sau đó chọn border-box từ danh sách, và kết thúc dòng bằng dấu chấm phẩy (;).

Trên dòng tiếp theo, gõ dấu ngoặc nhọn đóng (}) để kết thúc khái niệm quy tắc kiểu.

Bước 6. Trên dòng tiếp theo, tạo quy tắc kiểu sau:

   *, *:before, *:after { box-sizing: inherit; }   

Đây được xem là bộ chọn kiểu. Nó kể cả ba bộ chọn được cách ly bằng dấu phẩy và sử dụng và một kiểu. Dấu hoa thị (*) là bộ chọn tổng quát, cho nên nó áp dụng cho mọi phần tử. Hai bộ chọn khác sử dụng phần tử giả (pseudo-element).

Một điều cần lưu ý là bạn phải phải gõ đúng code. Bạn có thể thêm 1 khoảng trắng sau dấu hai chấm sau tính chất box-sizing nhưng chưa được có bất kỳ khoảng trắng nào bao quanh dấu hai chấm trong *:before và *:after .

Bước 7. Mở bảng Snippets và chọn thư mục CSS_Snippets .

Bước 8. Trong Code View , chọn nhận xét và hai quy tắc kiểu bạn vừa tạo, nhấp chuột phải và chọn Create New Snippet từ menu ngữ cảnh.

Thao tác này sẽ mở hộp thoại Snippet với code đã được chọn trong 1 trường.

Bước 9 . Trong trường Name , gõ Box-sizing: border-box . Đối với Description, nhập Includes padding and borders in width and height . Trong trường Snippet , chọn Insert block . Giữ nguyên tùy chọn mặc định Code trong Preview type .

Bước 10. Click OK để lưu đoạn code. Vì bạn đã chọn thư mục CSS_Snippets trong tab Snippets, cho nên đoạn code mới sẽ tự động được lưu trong cùng thư mục.

Vì sử dụng đoạn code này trong style sheet nên bạn cũng có thể điều tiết khoảng đệm và đường viền của phần tử mà không ảnh hưởng đến kích cỡ tổng thể của nó.

Cài đặt font chữ Adobe Edge Web

Theo mặc định, các trình duyệt hiển thị văn bản sử dụng font chữ Times hoặc Times New Roman, một loại phông chữ serif (chữ có chân). Thuộc tính CSS font-family cho phép bạn chọn font chữ nhưng lựa chọn bị giới hạn trong những font chữ có sẵn trong thiết bị được dùng làm xem trang web. Tuy nhiên bạn có thể tải font chữ web khác và sử dụng nó cho trang web. Dreamweaver có quyền truy cập tích hợp vào nhiều font chữ web miễn phí được Adobe lưu trữ. Đầu tiên, bạn phải kích hoạt chúng trong Dreamweaver.

• 8 công cụ “nhận diện” font chữ sử dụng trên ứng dụng hoặc trang web

Bước 1 . Chọn Modify > Manage Fonts để mở bảng Manage Fonts .

Bước 2 . Ở đây chúng ta sẽ sử dụng font chữ Source Sans Pro. Tìm kiếm nó bằng phương pháp nhập tên trong trường tìm kiếm, bạn sẽ nhận được ba tùy chọn trong kết quả. Click vào tùy chọn ở chính giữa Source Sans Pro. Nếu thấy dấu vết màu xanh có nghĩa là bạn đã chọn font chữ đó.

Source Sans Pro là một font chữ sans-serif (chữ không chân). Bạn có thể thấy rõ sự khác biệt giữa các mẫu của Source Sans Pro và Source Serif Pro.

Bước 3 . Bạn cũng đều có thể sử dụng miễn phí Adobe Edge Web Font nhưng phải tuân theo thỏa thuận cấp phép. Xem Terms of Use bằng phương pháp click vào liên kết ở cuối bảng.

Bước 4 . Nếu chấp nhận điều khoản, click vào Done .

Dreamweaver cài đặt Edge Web Fonts trong thư mục cấu hình cá nhân của bạn, để tạo nên thể sử dụng trong mỗi thứ các trang web bạn tạo trong Dreamweaver.

Sử dụng CSS Designer để thêm các kiểu cơ bản vào trang

Như đã thấy trước đó, gợi ý code có thể tăng vận tốc tạo quy tắc kiểu trong Code View . Dreamweaver cũng có CSS Design, bảng điều khiển giúp bạn tạo kiểu trang web khi đang xem thay đổi trong Live View . Trong phần này, bạn sẽ sử dụng CSS Designer để thêm kiểu cơ bản cho responsive.css và xem cách chúng ảnh hưởng đến index.html.

Bước 1 . Mở index.html trong cửa sổ Document , click vào nút Live để Live View phóng to lấp đầy cửa sổ.

Bước 2 . Mở CSS Designer bằng phương pháp click vào tab của nó trong nhóm bảng bên phải màn hình (nó ở cùng bảng Snippet sử dụng ở phần trước). CSS Designer gồm 4 phần S ources, @Media, Selectors và Properties .

Theo mặc định, CSS Designer có bố cục hai cột với khung Properties ở bên phải trong không gian làm việc Design. Nếu máy tính bạn sử dụng có 1 màn hình nhỏ, bạn có thể chuyển đổi nó thành bố cục một cột bằng cách kéo cạnh của tập thể nhóm bảng vào bên trong. Khi tạo quy tắc kiểu mới, bạn nên đảm bảo nút All được chọn ở đầu bảng.

Vai trò của mỗi phần như sau:

• Sources : Phần này liệt kê nguồn của mọi thứ kiểu của trang hiện tại. Nó cũng có thể trong style sheet bên ngoài như responsive.css, trong 1 khối được nhúng trên trang hoặc liên kết động.
• @Media : Phần này liệt kê các truy vấn phương tiện được dùng trong số nguồn khác nhau.
• Selectors : Phần này liệt kê mọi thứ các bộ chọn CSS trong nguồn đã chọn. Có một trường kiếm tìm phía trên cùng để giúp tìm các công cụ chọn trong một style sheet lớn.
• Properties : Đây là nơi bạn xác định các thuộc tính và giá trị cho bộ chọn. Nếu chọn Show Set , phần này chỉ hiển thị các tính chất đã được đặt. Khi bỏ chọn tùy chọn này, nó liệt kê 50 thuộc tính được dùng phổ biến nhất cho bố cục, văn bản, đường viền và background.

Bước 3 . Chọn nút All phía trên đầu CSS Design.

Chọn responsive.css trong phần Sources . Hiện tại ở phần này bạn chưa cần dùng đến khung @Media cho đến Phần 7, vì vậy hãy đóng nó bằng phương pháp kéo cạnh trên của khung Selectors lên trên.

Khung Selectors liệt kê các bộ chọn được tạo. Bộ chọn cuối cùng (#wrapper) chưa xuất hiện bất kỳ kiểu nào. Khi tạo một bộ chọn mới, Dreamweaver luôn chèn nó ở dưới cùng của style sheet trừ khi một bộ chọn khác đã được chọn. Chọn *, *:before, *:after và bỏ chọn Show Set phía trên cùng bên phải khung Properties .

Bước 4. Click vào nút dấu cộng ở góc trên bên trái của khung Selectors để tạo bộ chọn mới. Dreamweaver gợi ý tên cho bộ chọn dựa trên những gì hiện được chọn trong Live View. Bạn có thể bỏ qua gợi ý và gõ body . Nhấn Enter/Return hai lần để xác nhận thay đổi. Với bộ chọn mới được chọn, bạn có thể tạo quy tắc kiểu ảnh hưởng đến mọi trang bằng cách thiết lập giá trị của tính chất trong khung Properties .

Bước 5 . Trong phần Layout phía trên cùng, có 1 công cụ thiết lập tính chất lề. Ở đây, bạn chưa cần sử dụng công cụ này, chỉ cần click vào Set Shorthand để mở trường cũng có thể có thể chỉnh sửa và gõ 0 , nhấn Enter/Return để xác nhận chỉnh sửa.

Bạn sẽ thấy nội dung trong Live View dịch chuyển một ít lên trên và sang trái khi xóa lề 8px mặc định khỏi phần tử.

Thuộc tính lề trong khung Properties giờ là kiểu bôi đậm để chỉ nó đã được thiết lập. Ngoài ra, bạn nên thiết lập giá trị mỗi bên trong công cụ là 0 .

Bước 6. Click vào tượng trưng văn bản (chữ T trong ô vuông) ở đầu khung Properties để chuyển đến phần dành riêng cho tính chất văn bản. Thuộc tính đầu tiên là màu cho văn bản. Tất cả những màu cho dự án này nằm trong CC Libraries mà bạn đã cài đặt trong Phần 1.

Bảng CC Libraries phía trên cùng với CSS Designer , vì thế hãy kéo tab CC Libraries để tách nó khỏi nhóm và nổi trên cửa sổ Document .

Bước 7 . Click vào sắc màu cho thuộc tính màu để mở bộ chọn màu.

Chọn Hex ở dưới cùng bên phải, thiết lập màu sử dụng ký tự thập lục phân (hexadecimal notation) hỗ trợ cho tất cả trình duyệt.

Chọn công cụ Eyedropper ở góc dưới bên phải đặt chọn màu xám nhạt trong bảng CC Libraries . Bạn nên lựa chọn màu có ký tự thập lục phân #4B4B4B để dễ nhìn hơn so với màu đen thuần.

Click rời khỏi bộ chọn màu để đóng nó.

Bước 8. Click vào bên phải font-family để mở menu các font thường sử dụng. Chọn Adobe Edge Web Font bạn đã cài đặt trước đấy nằm ở dưới cùng bảng.

Font stack liệt kê các font chữ có sẵn theo thứ tự ưu tiên. Nếu font chữ trước mắt không có trên thiết bị của người dùng, trình duyệt sẽ dùng font chữ thứ hai và tiếp tục cho đến khi tìm được font chữ thích hợp.

Việc chọn Edge Web Font sẽ tự động đặt các giá trị cho thuộc tính font-style và font-weight kế bên font-family. Ngoài ra còn có 1 file mới (source-sans-pro:n2,n4:default.js) trong thanh công cụ Related Files và nguồn chỉ đọc trong Sources (đôi khi bạn sẽ thấy nhiều nguồn hơn). File mới và (các) nguồn chỉ đọc tự động tải font chữ từ máy server Adobe. Bạn không thể chỉnh sửa chúng.

Bước 9 . Giá trị cho font-style (Normal) là OK, nhưng giá trị của font-weight (200) hơi nhạt một chút. Để làm chữ đậm hơn, click vào 200 để mở một menu độ đậm nhạt có sẵn của font chữ và chọn 400 .

Bạn có thể thiết lập tính chất font-weight với con số cụ thể từ 100 (nhạt) đến 900 (đậm) cao dần với giá trị 100 hoặc sử dụng một trong số từ khóa normal (tương đương 400), bold (700) bolder hoặc lighter . Edge Web Fonts luôn sử dụng giá trị số. Các giá trị không trùng lặp tùy thuộc vào mỗi loại font. Như hình trên, source-sans-pro không có giá trị 100, 500 và 800.

Bước 10 . Click vào cạnh bên font-size để mở một menu các cửa hàng đo và từ khóa cũng có thể được áp dụng cho các font chữ và chọn em .

Bạn sẽ thấy Live View trống không, nhưng chẳng cần hoảng quá vì khi chọn một trung tâm đo, Dreamweaver đặt giá trị thành 0 . Giá trị em là một dịch vụ đo dựa trên chiều cao của font hiện tại, do vậy khi đặt thành 0 sẽ khiến văn bản biến mất.

Chỉ cần gõ 1 và văn bản sẽ xuất hiện lại. Đặt giá trị thành 1em trong quy tắc kiểu body để chỉ định dùng mặc định trình duyệt cho những đoạn văn bản và bản kê (giá trị mặc định thường là 16px).

Bước 11. Click vào biểu trưng Background ở khung Properties để chuyển qua tính chất background.

Bước 12. Thay vì sử dụng bộ chọn màu để thiết lập thuộc tính background-color, lần này chúng ta chỉ cần click vào mẫu màu xanh nhạt trong bảng CC Libraries để sao chép màu theo ký tự thập lục phân vào bộ nhớ tạm.

Click vào bên phải của màu cho background-color để mở trường cũng đều có thể chỉnh sửa, dán giá trị và nhấn Enter/Return để xác nhận thay đổi. Background trang lúc này là màu xanh nhạt.

Bước 13 . Chọn Show Set ở phía trên bên phải của khung Properties để xem mọi thứ các tính chất CSS đã được đặt trên thân trang.

Thiết lập tính chất trực tiếp trong CSS Designer

Nếu đã thân thuộc với CSS, bạn có thể cài đặt các thuộc tính và giá trị trong phần More ở cuối khung Properties . Dreamweaver bức tốc quá trình bằng phương pháp dùng gợi ý code.

Bước 1 . Đảm bảo nút All ở trên cùng CSS Designer và responsive.css trong khung Sources đã được chọn. Nếu cần thiết, chọn Show Set ở góc trên bên phải của khung Properties .

Bước 2 . Trong khung Selectors , chọn #wrapper . Hàm băm đã cho thấy đây là bộ chọn ID, do đấy nó sẽ áp dụng quy tắc kiểu cho ID wrapper. Nếu chưa được liệt kê, bạn cũng có thể tạo nó bằng phương pháp click vào nút dấu cộng ở góc trên bên trái của khung Selectors và gõ #wrapper vào trường có thể chỉnh sửa.

Bởi vì không có kiểu nào được đặt cho bộ chọn này, nên khung Properties chỉ hiển thị More và hai trường có thể chỉnh sửa được để thêm thuộc tính và giá trị.

Bước 3 . Click vào bên trong trường tính chất và gõ width . Trong khi gõ, gợi ý code sẽ hiển thị thuộc tính phù hợp. Khi width được tô sáng, nhấn Tab hoặc Enter/Return để chọn nó.

Chuyển sang trường thứ hai và gõ 100% và nhấn Enter/Return để wrapper mở rộng bằng kích thước bề rộng màn hình.

Bước 4 . Để ngăn wrapper quá rộng so với màn hình, thêm thuộc tính max-width và đặt giá trị của nó là 1000px.

Bước 5 . Căn giữa wrapper bằng cách thêm tính chất lề và thiết lập giá trị của nó thành 0 auto để không đặt lề cho phần bên trên và dưới cùng nhưng lề tự động cho bên trái và bên phải. Khi cửa sổ Document mở rộng hơn 100px (giá trị của max-width), nội dung trang sẽ có chuyển đến công ty của Live View.

Bước 6. Thêm tính chất background-color và đặt giá trị của nó thành white . Đây là một từ khóa màu được tất cả những trình duyệt web chấp nhận. Khung Properties giờ đây sẽ liệt kê bốn định nghĩa kiểu cho bộ chọn #wrapper.

Bước 7 . Lưu công việc của bạn bằng phương pháp chọn File > Save All Related Files . Bạn nên tạo thói quen lưu công việc trong lúc tạo kiểu trang.

Nội dung văn bản sẽ có hiển thị trên nền trắng. Nếu cửa sổ Document rộng hơn 100px, nền màu xanh nhạt của phần thân sẽ hiển thị ở hai bên. Ngoài ra còn có 1 khoảng trống phía trên đầu trang và văn bản bị thừa ra ở hai bên của wrapper

Pixel và màn hình mật độ cao

Pixel là một trong số chấm nhỏ tạo ra màn hình máy tính. Trước đây, 1px có cùng kích thước với một trong các chấm đó. Qua nhiều năm, công nghệ đã được cải thiện, các chấm này trở nên ngày càng nhỏ hơn. CSS đã lường trước được tình huống này nên pixel được sử dụng làm mướn ty đo lường không lệ thuộc vào kích cỡ pixel vật lý sử dụng trong màn hình thiết bị. Do đó chiều rộng tối đa cho wrapper

Trang web dần bắt đầu tạo thành nhưng vẫn còn nhiều công việc cần làm. Phần kế đến là xử lý các vấn đề với không gian ngang và dọc, làm sáng trang với những hình ảnh phản hồi và những điều này sẽ có chỉ dẫn trong trong Phần 5 của loạt bài hướng dẫn nhé.

Chúc các bạn thực hiện thành công!

Xem các phần trước của loạt bài này:

• Hướng dẫn tạo website bằng Dreamweaver CC phần 1
• Hướng dẫn tạo website bằng Dreamweaver CC phần 2
• Hướng dẫn tạo website bằng Dreamweaver CC phần 3

tạo trang web bang dreamweaver cc,tạo website bang dreamweaver,thiết kế web bằng dreamweaver,thay đổi font chữ trang web,tạo kiểu trang web,xây dựng web bằng dreamweaver

Nội dung Hướng dẫn tạo website bằng Dreamweaver CC – Phần 4: Thay đổi font chữ và tạo kiểu cơ bản được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.