Tự tạo cho mình một trang bắt đầu tùy chỉnh, tối giản!: 10 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:30

Bạn đã phải chuyển sang làm việc chủ yếu từ xa kể từ khi COVID-19 trở thành một điều? Tương tự!

Làm việc tại nhà với máy tính của chúng tôi và qua Internet thường có nghĩa là chúng tôi phải theo dõi rất nhiều trang web cho cơ quan, cho trường học hoặc thậm chí… cho vui!

Dấu trang không phải lúc nào cũng đáp ứng được nhiệm vụ, vì vậy, làm thế nào về việc tạo cho chúng ta một trang bắt đầu tùy chỉnh được thiết kế riêng cho bạn, với tất cả các liên kết bạn cần và mở ra trong trình duyệt Web của bạn bất cứ khi nào bạn cần?

Đây là những gì bạn cần:

• Một máy tính (của chúng tôi đang chạy Windows, nhưng bất kỳ máy tính hiện đại nào cũng vậy).
• Kết nối với Internet.
• Một cài đặt mới của trình soạn thảo văn bản Notepad ++.

Khi bạn đã sẵn sàng, hãy để bạn bắt đầu sử dụng mẫu trang bắt đầu của riêng chúng tôi… Hoặc tạo của riêng bạn từ đầu!

Bước 1: Tạo Trang Bắt đầu HOẶC Tải xuống Mẫu Tùy chỉnh của Chúng tôi

Tại thời điểm này, bạn có hai lựa chọn:

1. Tải xuống mẫu tùy chỉnh của chúng tôi (hướng dẫn sau một chút trong bước này) hoặc,
2. Làm theo hướng dẫn cơ bản về trang bắt đầu này; nó sẽ hướng dẫn bạn từng bước xây dựng một trang bắt đầu đơn giản - và đó là hướng dẫn mà chúng tôi đã làm theo để xây dựng trang bắt đầu tùy chỉnh này!

Tại sao lại giới thiệu một hướng dẫn… trong một hướng dẫn? Công việc của chúng tôi với tư cách là người hỗ trợ MakerSpace không chỉ để chỉ cho bạn cách thực hiện mọi việc mà còn để kết nối bạn với văn hóa Maker và các nguồn lực sẵn có ở đó. Hướng dẫn này là một trong những nơi mà nhiều nhà thiết kế trang bắt đầu, vì vậy rất có ý nghĩa khi chia sẻ nó với bạn!

Nếu bạn có thời gian, hãy tiếp tục với tùy chọn số 2 nhưng nếu không, bạn luôn có thể tham khảo hướng dẫn bắt đầu cơ bản sau! Đối với hướng dẫn này, chúng tôi sẽ chỉ giả sử bạn đang tải xuống mẫu tùy chỉnh của chúng tôi! Để tải xuống:

1. Mở kho lưu trữ DIY_startpage của chúng tôi trên Github.
2. Nhấp vào nút Mã lớn màu xanh lục để mở menu thả xuống.
3. Nhấp vào Tải xuống ZIP để tải xuống tất cả các tệp cho dự án.
4. Giải nén tất cả các tệp từ tệp ZIP bạn vừa tải xuống đến một vị trí bạn chọn.

GitHub là một trang web nơi các lập trình viên và nhà thiết kế trên toàn thế giới chia sẻ mã và sáng tạo của họ với những người khác: nó cũng cho phép bạn cộng tác với những người khác trong các dự án thuộc mọi loại. Điểm mấu chốt là, đó là một công cụ tuyệt vời mà mọi Nhà sản xuất nên biết!

Bây giờ hãy bắt đầu trình duyệt bạn chọn: Tôi thực sự thích Firefox, nhưng mẫu của chúng tôi sẽ hoạt động trên bất kỳ trình duyệt Web nào gần đây, vì vậy hãy thoải mái sử dụng Edge, Chrome hoặc Safari!

Cuối cùng, mở tệp "DIY_startpage.html" trong trình duyệt của bạn VÀ trong Notepad ++ và bắt đầu tùy chỉnh nó!

Bước 2: Liệt kê các mục yêu thích của bạn

Có một trang bắt đầu là tuyệt vời. Có một trang khởi đầu hữu ích thậm chí còn tốt hơn và ngay bây giờ, trang của chúng tôi trông hơi trống rỗng!

Những điều bạn thường xuyên kiểm tra và cần theo dõi là gì? Bạn đọc truyện tranh web nào vào buổi sáng? Bạn muốn kiểm tra trang web tin tức nào? Đây là những thứ sẽ đến với trang khởi đầu của bạn.

Đối với hướng dẫn này, tôi sẽ chỉ sử dụng một số mục yêu thích của tôi. Cảnh báo spoiler, rất nhiều liên kết từ thư viện! Nhưng cũng có một số Nhà sản xuất yêu thích của tôi để lấy cảm hứng và một số trò giải trí yêu thích của tôi. Bạn có thể tìm thấy tất cả các mục này dưới đây với một liên kết, làm ví dụ!

Tin tức và Đọc

• Báo kỹ thuật số
• Sách kỹ thuật số
• Tạp chí kỹ thuật số

Học tập

• Trường W3C
• Udemy
• Ngôn ngữ Mango

Âm nhạc

• Nghe địa phương
• Trình giải thích bài hát
• Bộ đàm âm nhạc Jamendo

Văn hóa nhà sản xuất

• Core77
• Lumecluster
• Melapropisms

Tôi đã chọn ba mục yêu thích của mình cho mỗi danh mục, nhưng bạn có thể chọn nhiều hơn hoặc ít hơn mà không gặp vấn đề gì - bố cục trang bắt đầu của bạn sẽ tự động điều chỉnh theo số lượng hoặc tài nguyên!

Khi bạn đã liệt kê tất cả các mục yêu thích của mình, hãy để chúng sang một bên trong một phút và làm việc để làm cho mẫu trang bắt đầu chung của chúng tôi nhiều hơn một chút.

Bước 3: Tùy chỉnh phông chữ của bạn

Khởi động Notepad ++, nhấp vào Tệp> Mở để mở tệp "DIY_startpage.html" của bạn. Những gì bạn đang xem trông rất khác so với trang trong trình duyệt của bạn, phải không? Đó là mã của trang của bạn và các trình duyệt diễn giải mã đó để làm cho nó trông thân thiện hơn một chút và thực hiện tất cả những việc chúng ta cần nó làm.

Mã cho dự án trang bắt đầu của chúng tôi được viết bằng hai ngôn ngữ có liên quan: HTML và CSS. HTML thường phụ trách nội dung của một trang và CSS phụ trách giao diện của một trang.

Tìm phần đầu tiên này để tùy chỉnh trang bắt đầu của bạn:

html {

align-items: trung tâm; màu: # 313131; hiển thị: flex; font: 22px "Courier New", Chuyển phát nhanh, monospace; chiều cao: 100%; justify-content: trung tâm; lề: 0; }

Phần này của trang bắt đầu của chúng tôi tập trung vào giao diện chung của các mục trên trang của chúng tôi. Dòng:

font: 22px "Courier New", Chuyển phát nhanh, monospace;

cụ thể là về phông chữ chúng tôi đang sử dụng trên trang bắt đầu và có hai tham số xác định văn bản trên trang của bạn sẽ trông như thế nào: kích thước và họ phông chữ.

• kích thước - Đó là "22px". Kích thước văn bản của bạn trên màn hình được xác định bằng "px", viết tắt của pixel.
• họ phông chữ - Đó là nơi chúng tôi liệt kê các phông chữ chúng tôi muốn sử dụng. Thông thường, bạn nên liệt kê một số, từ phông chữ mà bạn thực sự muốn sử dụng thuộc họ chung nhất. Các phông chữ này phụ thuộc vào trình duyệt bạn đang sử dụng, vì vậy nếu phông chữ cụ thể nhất không khả dụng, trình duyệt sẽ thử phông chữ tiếp theo, v.v.

Trang CSS Web Safe Fonts từ w3schools có một danh sách tuyệt vời các tổ hợp phông chữ trông tuyệt vời, giữ đúng kiểu bạn đang tìm kiếm và sẽ hoạt động trên hầu hết các trình duyệt hiện đại.

Ví dụ: bạn có thể thay thế:

"Chuyển phát nhanh mới", Chuyển phát nhanh, monospace;

với:

"Palatino Linotype", "Book Antiqua", Palatino, serif;

hoặc:

"Comic Sans MS", chữ thảo, sans-serif;

Lưu tệp của bạn và làm mới trang trong trình duyệt của bạn để xem các thay đổi! Không thích nó? Không vấn đề gì! Hãy thử với Phông chữ An toàn trên Web CSS cho đến khi bạn tìm thấy sự kết hợp ưng ý.

Bước 4: Tùy chỉnh Báo giá Tiêu đề của bạn

Tìm phần này trong tệp HTML của bạn:

Đây là trang khởi đầu của bạn! Thưởng thức

Chọn một trích dẫn bạn thích và thay thế mã! Đối với riêng tôi, tôi đã chọn

Một lần nữa vào vi phạm

Bố cục trang bắt đầu của bạn phải nhanh chóng điều chỉnh để khớp với trích dẫn của bạn ngay khi bạn tải lại trang trong trình duyệt của mình: trong Firefox, điều đó có nghĩa là nhấn CTRL + R trên bàn phím hoặc nhấp vào biểu tượng Tải lại. Chọn một trích dẫn bạn thích ngay bây giờ (hoặc chọn một cái gì đó sau!) Và bắt đầu làm việc để tùy chỉnh các phần của trang bắt đầu của bạn!

Bước 5: Tùy chỉnh các phần của bạn

Bây giờ bạn đã tìm thấy sự kết hợp phông chữ mà bạn thích và bạn có một câu trích dẫn tuyệt vời để truyền cảm hứng cho bạn, hãy tiếp tục và tùy chỉnh các phần của bạn.

Nếu bạn tải xuống trang bắt đầu của chúng tôi từ Github, bạn có 6 phần có sẵn để tùy chỉnh: hướng dẫn ban đầu chỉ có 4 phần, nhưng vì ngày càng nhiều khía cạnh trong cuộc sống của chúng ta chuyển sang trực tuyến gần đây, tôi đã tiếp tục và bổ sung thêm phần khác để đề phòng.

Tìm phần đầu tiên và chỉ cần nhập những gì chúng ta cần. Xin nhắc lại, phần đầu tiên của tôi là "Tin tức và Đọc":

Với tệp của bạn vẫn đang mở trong Notepad ++, hãy tìm dòng mã sau:

Phần 1

và thay thế nó bằng danh mục trong danh sách mà bạn nghĩ rằng bạn sẽ sử dụng nhiều nhất.

Vì nhiều người trong chúng ta đã quen với việc bắt đầu đọc tài liệu từ phía trên bên trái, đó là nơi mắt bạn có thể tự nhiên đi đến - vì vậy hãy tận dụng lợi thế đó và giữ mục tiêu quan trọng nhất của chúng ta ở đó! Nhưng nếu bạn đến từ một nền văn hóa có hướng đọc khác hoặc nếu bạn chỉ làm việc khác, hãy tùy chỉnh điều này cho chính bạn. Dù gì thì đó cũng là trang bắt đầu của bạn: bạn biết điều gì tốt nhất cho mình!

Tiêu đề một phần xuống, còn năm phần nữa! Tìm dòng mã có nội dung:

Phần 2

Thay đổi nó, sau đó tiếp tục tìm kiếm các tiêu đề phần và thay đổi chúng cho đến khi bạn đến cuối danh sách của mình. Nếu bạn không sử dụng tất cả các phần, hãy để nguyên chúng! Chúng tôi cũng sẽ thực hiện một chút dọn dẹp ở cuối hướng dẫn này.

Khi bạn đã hoàn tất việc tùy chỉnh các phần, chỉ cần lưu các thay đổi của bạn trong Notepad ++ và tải lại trang trong trình duyệt của bạn. Tất cả các tiêu đề phần sẽ hiển thị ở nơi bạn đặt chúng: bây giờ chúng tôi có thể tùy chỉnh các liên kết trong mỗi phần!

Bước 6: Tùy chỉnh các liên kết của bạn

Tùy chỉnh các liên kết trong mỗi phần có liên quan nhiều hơn một chút nhưng chắc chắn không khó hơn nhiều!

Lần này, chúng tôi không chỉ thay đổi tên của các liên kết, chúng tôi còn thay đổi những gì bạn có thể làm với chúng! Mỗi mục trong mỗi phần sẽ trở nên có thể nhấp được, liên kết đến một trang web khác nhau. Phần thưởng, bạn cũng có thể quyết định xem bạn có muốn nó mở trong một cửa sổ mới hay không!

Đầu tiên, hãy tìm một dòng giống như sau:

link_one_name

Chọn bit "link_one_name" đó và thay thế nó bằng văn bản của riêng bạn. Ví dụ: liên kết đầu tiên trong phần đầu tiên dựa trên danh sách của tôi từ bước X là "Báo chí kỹ thuật số", vì vậy chúng tôi nhận được:

Báo kỹ thuật số

Tiếp theo, hãy làm việc tùy chỉnh liên kết! Thay thế bit "link.one" bằng liên kết đầu tiên của bạn. Đối với tôi, đó sẽ là liên kết đến các tờ báo kỹ thuật số của chúng tôi, vì vậy nó sẽ giống như sau:

Báo kỹ thuật số

Lưu công việc của bạn trong trình soạn thảo văn bản và tải lại trang trong trình duyệt của bạn

Bây giờ bạn có thể nhấp vào liên kết đầu tiên mà bạn đã tùy chỉnh. Nếu nó không mất, đó là OK! Bắt đầu lại từ đầu hoặc truy xuất lại các bước của bạn cho đến khi liên kết mở ra khi bạn nhấp vào nó.

Khi liên kết đầu tiên của bạn hoạt động… Chà, tất cả những gì bạn cần làm là lặp lại các bước này cho từng liên kết trong mỗi phần, cho đến khi bạn đã tùy chỉnh tất cả các tên và liên kết trên trang bắt đầu của mình! Tuy nhiên, chỉ có một điều duy nhất: rất có thể khi bạn nhấp vào một liên kết, trang bắt đầu của bạn sẽ biến mất khi liên kết mới mở ra trong cùng một tab hoặc cửa sổ.

Nó không thuận tiện cho lắm… Vậy làm thế nào về việc thay đổi cách các liên kết mở ra? Hãy sử dụng liên kết đầu tiên của chúng tôi làm ví dụ! Bạn có thể nhớ rằng đây là nơi chúng tôi yêu cầu trình duyệt của bạn mở một liên kết khi bạn nhấp vào nó:

Báo kỹ thuật số

Nhưng hãy đoán xem - đó cũng là nơi chúng tôi quyết định cách liên kết sẽ mở! Thay đổi nó thành:

Báo kỹ thuật số

Bây giờ hãy lưu công việc của bạn và tải lại trang trong trình duyệt của bạn: liên kết bây giờ sẽ mở trong một tab mới khi bạn nhấp vào nó! Bằng cách đó, bạn có thể giữ cho trang bắt đầu của mình luôn mở khi bạn cần.

Bước 7: Thêm hình ảnh vào trang bắt đầu của bạn

Bây giờ tất cả các liên kết của chúng tôi đã được thiết lập, đã đến lúc trang trí trang bắt đầu của chúng tôi! Mẫu này có chỗ cho một hình ảnh tùy chỉnh ở phía bên tay phải của màn hình. Bây giờ trở lại Notepad ++, hãy tìm dòng này:

tất cả các cách ở cuối mẫu. Chọn một bức ảnh bạn thích, di chuyển nó vào cùng thư mục với tệp trang bắt đầu của bạn và thay thế "library_picture.jpg" bằng tên tệp của bức ảnh của bạn. Ví dụ: nếu tên tệp của tôi là "your_picture.jpg" thì dòng sẽ trở thành:

Lưu các thay đổi của bạn và một lần nữa, tải lại trang bắt đầu trong trình duyệt của bạn.

Vì mã của trang bắt đầu và các tệp ảnh của bạn nằm trong cùng một thư mục, ảnh sẽ tự động tải khi bạn làm mới trang. Nếu không, hãy kiểm tra tên tệp của bạn - đó thường là chỗ tôi hiểu sai!

Hình nền điện thoại thông minh rất phù hợp cho dự án đó. Nói chung, bất kỳ hình ảnh dọc nào (hoặc như những người ưa thích nói "hình ảnh hướng dọc" với tỷ lệ 16: 9) cho vấn đề đó! Nhưng bố cục của trang bắt đầu của chúng tôi sẽ thích ứng cho dù bạn có ném vào nó điều gì đi nữa.

Nếu hình ảnh của bạn xuất hiện, xin chúc mừng, bạn đã hoàn thành khá nhiều việc!

Bước 8: Dọn dẹp một chút

Nếu bạn có phần bổ sung mà bạn không sử dụng tại thời điểm đó, hãy xóa chúng! Ví dụ: giả sử bạn không sử dụng Phần 6. Tìm:

• Phần 6
• Mục 1
• Mặt hàng 2
• Mặt hàng 3

Chọn và xóa những dòng này, lưu tệp của bạn và làm mới tệp trong trình duyệt của bạn để đảm bảo mọi thứ đã biến mất.

Đây thường là bước mà tôi phá vỡ mọi thứ vì tôi đi quá nhanh, vì vậy nếu điều gì đó đột nhiên không hoạt động, hãy nhớ: hít thở sâu và hoàn tác những gì bạn vừa làm bằng tổ hợp phím CTRL + Z trên bàn phím của bạn!

Bước 9: Biến nó thành một trang bắt đầu thực tế

Bây giờ trang bắt đầu mở tất cả các liên kết mà chúng tôi muốn và trông giống như cách chúng tôi muốn, đã đến lúc mở nó khi bạn khởi động trình duyệt của mình!

Tại thời điểm đó, tôi muốn tránh xa mọi thứ khỏi màn hình máy tính của mình bằng cách cắt và dán thư mục trang chủ của tôi vào thư mục Tài liệu của Windows. Vì vậy, nếu bạn đã hoàn thành công việc trên trang bắt đầu của mình, hãy làm điều đó!

Tiếp theo: rất có thể trình duyệt của bạn mở bằng công cụ tìm kiếm yêu thích của bạn hoặc thậm chí có thể là một trang trống.

Bạn có thể tìm thấy hướng dẫn để tùy chỉnh Firefox cũng như các trình duyệt khác bên dưới:

• Hướng dẫn Firefox
• Hướng dẫn của Google Chrome
• Hướng dẫn Safari
• Hướng dẫn về Microsoft Edge

Sau khi bạn thực hiện xong các hướng dẫn cho trình duyệt của mình, hãy đóng tất cả và mở lại. Nếu trang bắt đầu của bạn hiển thị khi trình duyệt của bạn đang khởi chạy, bạn đã thành công!

Nếu nó không thành công, hãy xem lại hướng dẫn cho trình duyệt của bạn và đảm bảo rằng bạn không bỏ lỡ bất kỳ điều gì. Tệ hơn nữa, hãy khởi động lại máy tính của bạn sau khi đã lưu tất cả công việc của bạn. 9 lần trong số 10, điều đó giải quyết được mọi thứ!

Bước 10: Tất cả đã hoàn tất! Và, bạn có muốn biết thêm không?

Chúc mừng bạn đã hoàn thành trang bắt đầu của mình! Nó có thể không giống nhiều, nhưng bạn vừa học cách viết mã một trong những khối xây dựng quan trọng nhất của một trang web theo cách tôi đã làm… Khoảng 20 năm trước!

Nếu bạn thích điều này và muốn tìm hiểu thêm về các trang bắt đầu, thì đó là một lỗ hổng sâu để theo dõi! Dưới đây là một số lựa chọn nhỏ để giúp bạn trong hành trình trang bắt đầu của mình:

• Bạn đã thử Hướng dẫn trang bắt đầu cơ bản chưa? Tin tốt là nó đến từ đâu! Hãy xem các hướng dẫn khác của / stpg / để có thêm cảm hứng và các tính năng nâng cao!
• Xem danh mục Thư viện Hạt Johnson để biết sách về HTML và CSS - và với thẻ thư viện hoặc thẻ điện tử, bạn cũng có quyền truy cập vào sách điện tử!
• Thẻ thư viện của bạn cũng cho phép bạn truy cập vào Udemy và nó có một số lớp rất hoàn chỉnh về HTML, CSS và thiết kế web.

Nếu bạn rất tự hào về sáng tạo của mình, tại sao bạn không chụp ảnh màn hình và chia sẻ nó với chúng tôi qua Twitter hoặc Instagram với thẻ bắt đầu bằng #jocomakes? Chúng tôi luôn vui mừng khi thấy những gì khách hàng quen của chúng tôi nghĩ ra!