Tôi hoàn toàn nghĩ rằng các nhà thiết kế web mới bắt đầu nên sử dụng các mẫu. Và theo các mẫu, ý tôi là thứ mà bạn có thể mua từ ThemeForest hoặc dịch vụ bán mẫu khác. Dưới đây là một vài lý do tại sao
- Tinh chỉnh = học tập. Mẫu cần được thay đổi/thay đổi/tinh chỉnh. Đó là toàn bộ ý tưởng của một mẫu. Khi một nhà thiết kế mới bắt đầu làm những việc đó, họ đang học cách mã hoạt động. Tinh chỉnh các chủ đề WordPress chính xác là cách tôi bắt đầu thiết kế web
- Phẩm chất. Khi trang web được "hoàn thành", một người mới bắt đầu sẽ có thứ gì đó mà họ có thể rất tự hào. Có lẽ sẽ tự hào hơn là nếu họ bắt đầu từ đầu và kết thúc với một thứ gì đó rất cơ bản [hoặc hết sức xấu xí]. Điều đó sẽ cung cấp động lực tốt để gắn bó với nó
- "Thế giới thực. ” Giả sử mẫu được mã hóa tốt, người mới bắt đầu sẽ xem xét một lượng đánh dấu chất lượng tốt và CSS hiệu quả được tổ chức tốt. Điều đó thật tuyệt khi đi sâu vào thiết kế giao diện người dùng trong thế giới thực, trái ngược với việc bắt đầu với kiểu đánh dấu mà một cuốn sách giới thiệu về HTML có thể giúp bạn bắt đầu với
Nhưng nếu bạn không phải là người mới bắt đầu thì sao?
Nếu bạn là một nhà thiết kế chuyên nghiệp [ví dụ, một khách hàng đến gặp bạn với nhu cầu về web và bạn sẽ xây dựng một trang web tùy chỉnh cho họ và bạn sẽ tính phí họ hơn vài trăm đô la] thì việc sử dụng một mẫu là,
Công việc của một nhà thiết kế là xem xét cẩn thận các nhu cầu của khách hàng và các khó khăn hiện có và tạo ra một giải pháp. Theo tôi, điều đó bao gồm mọi pixel trên trang web đó. Nếu một số pixel đó được tái chế từ nơi khác, thì chúng không được tạo ra với mục đích giải quyết nhu cầu của khách hàng. Tôi không nói rằng bạn không thể sử dụng tìm/tái sử dụng/tái chế những thứ bạn tìm thấy ở nơi khác, tôi đang nói rằng khi bạn làm như vậy, bạn nên thao túng chúng và xem xét kỹ lưỡng cách chúng tích hợp vào tầm nhìn của trang web
Bạn nghĩ sao?
Đối với các nhà phát triển ngoài kia, bạn có cảm thấy tương tự không?
Trong các tin tức liên quan gần đây, tôi đã đặt một mục vào danh mục CodeCanyon CSS mới được phát hành. Thẻ CSS3. Gần đây, tôi đã có một số cuộc trò chuyện thú vị với mọi người về ý tưởng bán mã và thiết kế. Phần thú vị là cách bán các mẫu thiết kế phần lớn được tán thành trong khi việc bán mã phần lớn được đưa ra không thích. Tôi hoàn toàn có thể đồng cảm với những cảm xúc đó, nhưng tôi đã quyết định rằng nếu việc các nhà thiết kế được trả tiền để bán sản phẩm của họ là điều tuyệt vời, thì việc các nhà phát triển được trả tiền để bán sản phẩm của họ cũng là điều tuyệt vời [bất chấp vấn đề cấp phép]
Phần tử HTML
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
5 là cơ chế giữ HTML không được hiển thị ngay lập tức khi trang được tải nhưng có thể được khởi tạo sau đó trong thời gian chạy bằng JavaScriptHãy nghĩ về một mẫu như một đoạn nội dung đang được lưu trữ để sử dụng sau này trong tài liệu. Mặc dù trình phân tích cú pháp xử lý nội dung của phần tử
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
5 trong khi tải trang, nhưng nó chỉ làm như vậy để đảm bảo rằng những nội dung đó hợp lệ; Các thuộc tính tiêu chuẩn duy nhất mà phần tử
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
7 hỗ trợ là các thuộc tính toàn cụcTrong các trình duyệt dựa trên Chromium, phần tử
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
7 cũng hỗ trợ một , như một phần của đề xuất "Declarative Shadow DOM" thử nghiệm. Trong các trình duyệt đó, phần tử // Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
7 có thuộc tính // Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
0 được trình phân tích cú pháp HTML phát hiện và ngay lập tức được áp dụng làm gốc bóng tối của phần tử cha của nóNgoài ra,
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
2 có thuộc tính tiêu chuẩn // Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
3 [không có thuộc tính đánh dấu/nội dung tương ứng], là một // Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
4 chỉ đọc chứa cây con DOM mà mẫu đại diện. Lưu ý rằng việc sử dụng trực tiếp giá trị của thuộc tính // Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
3 có thể dẫn đến hành vi không mong muốn; Đầu tiên chúng ta bắt đầu với phần HTML của ví dụ
UPC_Code
Product_Name
Đầu tiên, chúng tôi có một bảng mà sau này chúng tôi sẽ chèn nội dung bằng mã JavaScript. Sau đó, đến mẫu, mô tả cấu trúc của một đoạn HTML đại diện cho một hàng của bảng
Bây giờ bảng đã được tạo và mẫu được xác định, chúng tôi sử dụng JavaScript để chèn các hàng vào bảng, với mỗi hàng được tạo bằng cách sử dụng mẫu làm cơ sở
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
Kết quả là bảng HTML gốc, với hai hàng mới được thêm vào bảng thông qua JavaScript
table {
background: #000;
}
table td {
background: #fff;
}
Một
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
4 không phải là mục tiêu hợp lệ cho các sự kiện khác nhau, do đó, thường tốt hơn là sao chép hoặc tham chiếu đến các phần tử bên trong nóHãy xem xét HTML và JavaScript sau
________số 8
const container = document.getElementById["container"];
const template = document.getElementById["template"];
function clickHandler[event] {
event.target.append[" — Clicked this div"];
}
const firstClone = template.content.cloneNode[true];
firstClone.addEventListener["click", clickHandler];
container.appendChild[firstClone];
const secondClone = template.content.firstElementChild.cloneNode[true];
secondClone.addEventListener["click", clickHandler];
container.appendChild[secondClone];
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
7 là một phiên bản DocumentFragment, vì vậy mặc dù nó được thêm vào bên trong vùng chứa như mong đợi, nhưng việc nhấp vào nó sẽ không kích hoạt sự kiện nhấp chuột. // Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
8 là một phiên bản HTMLDivElement, nhấp vào nó sẽ hoạt động như mong đợiDanh mục nội dung, , , Nội dung được phépKhông hạn chế Bỏ thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận , hoặc. Cũng được phép là phần tử con của phần tử
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
9 không có thuộc tính. Vai trò ARIA ngầm định Vai trò ARIA được phép Không có table {
background: #000;
}
table td {
background: #fff;
}
1 được phép Giao diện DOM// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ['content' in document.createElement['template']] {
// Instantiate the table with the existing HTML tbody
// and the row with the template
const tbody = document.querySelector["tbody"];
const template = document.querySelector['#productrow'];
// Clone the new row and insert it into the table
const clone = template.content.cloneNode[true];
let td = clone.querySelectorAll["td"];
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild[clone];
// Clone the new row and insert it into the table
const clone2 = template.content.cloneNode[true];
td = clone2.querySelectorAll["td"];
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild[clone2];
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
2