Tạo một trang web mà không có kiến thức HTML? Các trình biên tập trực tuyến để xây dựng trang web đang có được vị thế, thường là do các mẫu đẹp. Nếu bạn không muốn bắt đầu từ một thiết kế làm sẵn như vậy, thường kết thúc bằng một tùy chọn trả phí, thì RocketCake là một chương trình dành cho máy tính để bàn mà bạn có thể xây dựng một trang web đẹp từ con số không.
Chương trình tiếng Anh chỉ chứa mười lăm mẫu (template) để lấy cảm hứng. Ý tưởng là với RocketCake, bạn tạo trang web của riêng mình mà bạn có thể dễ dàng cập nhật sau này. RocketCake là một trình soạn thảo được gọi là WYSIWYG. Vì vậy, bạn không phải nhập bất kỳ mã HTML nào. Bạn kết hợp trang web của riêng mình bằng cách đặt các phần tử trên bề mặt làm việc và sau đó tải lên vỏ máy. Các phần tử bao gồm hộp văn bản, nút, hình ảnh, menu, trình chiếu, phim, đoạn âm thanh, v.v. Điều làm cho RocketCake trở nên đặc biệt là nó là một trình biên tập để xây dựng cái gọi là các trang web đáp ứng. Một trang web đáp ứng như vậy thân thiện với thiết bị di động, vì bố cục thích ứng với màn hình của thiết bị mà ai đó truy cập trang web.
Một trang web đáp ứng sẽ trông gọn gàng, cho dù bạn xem nó trên màn hình lớn hay màn hình điện thoại thông minh nhỏ. Đối với điều này, trang web sẽ điều chỉnh một số phần, chẳng hạn như kích thước phông chữ, sự sắp xếp của các yếu tố nhất định và cách trình đơn được hiển thị trên màn hình.
Tải về RocketCake tại đây. Có một phiên bản cho Windows và một cho macOS. Trong hội thảo này, chúng tôi sử dụng phiên bản miễn phí. Điều này giúp bạn dễ dàng tạo một trang web đáp ứng hoạt động trơn tru. Ngoài ra còn có một phiên bản chuyên nghiệp của RocketCake, có giá 39 euro. Phiên bản chuyên nghiệp cho phép bạn tạo không giới hạn số lượng trang web. Ngoài ra còn có hỗ trợ CSS, nhờ đó bạn có thể nhanh chóng điều chỉnh các kiểu bố cục trên toàn bộ trang web. Phiên bản 3.1 của RocketCake đã được cải thiện để trang web của bạn xếp hạng tốt hơn với Google và các công cụ tìm kiếm khác. Hơn nữa, phiên bản miễn phí bao gồm một số tính năng mà trước đây chỉ có trong phiên bản trả phí.
Môi trường làm việc và hiển thị
Ở trên cùng của không gian làm việc là thanh có các nút để thêm trang mới, xem trước bằng Internet Explorer và xuất bản trang web trên Internet. Ở bên phải, bạn sẽ tìm thấy bộ công cụ với tất cả các yếu tố bạn có thể đặt trên một trang web. Ở trên cùng bên trái, bạn sẽ thấy cấu trúc của tất cả các trang trên trang web của mình.
Dưới đây là Tính chất. Tại đây bạn thay đổi các thuộc tính của từng phần tử bạn chọn. Giả sử bạn muốn thêm hình ảnh vào một trang, sau đó bạn chọn tệp hình ảnh trong Thuộc tính và cho biết hình ảnh nên có góc tròn hay góc nhọn, v.v.
Ở phía dưới cùng, bạn xác định chiều rộng màn hình. Theo mặc định, đó là máy tính để bàn-trưng bày. Thông qua menu thả xuống nhỏ ở dưới cùng bên trái, bạn cũng có thể làm việc trong màn hình của một số thiết bị di động phổ biến, chẳng hạn như iPhone, iPad, Samsung Galaxy, LG ... Nếu bạn không tìm thấy chiều rộng mong muốn trong này , bạn cũng có thể chọn Tùy chỉnh và sử dụng thanh trượt chỉ định chiều rộng xuất hiện trên màn hình. Cài đặt chiều rộng đó rất quan trọng để xác định các điểm ngắt, chúng ta sẽ thảo luận sau.
Màu sắc và trang chủ
Hãy bắt đầu với trang chủ. Trong ví dụ này, chúng tôi đang tạo trang web của một ban nhạc rock đầy tham vọng. Thay vì bắt đầu với một mẫu, hãy chọn Trang trống. Phần Thuộc tính sẽ thích ứng với từng phần tử bạn chọn. Ví dụ: nhấp vào nền của trang đầu tiên, sau đó bạn có thể truy cập Màu nền chọn màu nền. Theo mặc định, có 000000, mã html cho màu trắng. Bằng cách nhấp vào hộp có ba dấu chấm, bạn sẽ hiển thị công cụ chọn màu. Trong Thuộc tính, bạn đặt tiêu đề cho trang web này. Nó sẽ sớm xuất hiện ở đầu cửa sổ trình duyệt. Để lại tên của trang chủ tại index.html. Trình duyệt luôn tìm kiếm trang chỉ mục để hiển thị làm trang chủ.
Bên dưới nó, bạn xác định màu của bốn loại siêu liên kết. Màu sắc liên kết xác định màu của các liên kết chưa được truy cập, LinkColorActive đề cập đến các liên kết mà ai đó hiện đang truy cập, LinkColorHover là màu của một liên kết mà con trỏ chuột đang trỏ vào và LinkColorVisited đề cập đến các liên kết mà ai đó đã truy cập.
Thanh điều hướng và hình ảnh giới thiệu
Để đặt thanh điều hướng, hãy chọn mục trong Bộ công cụ Chức năng điều hướng và sau đó nhấp vào không gian làm việc. Trong thanh điều hướng này, bạn nhập các mục menu mà bạn muốn tạo các trang web. Giữ cho tên của những mục đó ngắn gọn. Trong ví dụ của chúng tôi, đó là The band, Who, Where, When, Why và Media. Ở trên cùng là các nút để định dạng văn bản của các mục điều hướng đó. Nếu bạn nhấp vào chính thanh điều hướng, bạn sẽ điều chỉnh màu sắc và hình dạng của thanh trong Thuộc tính. Đó là cách bạn có thể BackGroundFashion chọn cho Màu sắc, Hình ảnh, Gradient và Nút tạo kiểu. Trong Gradient, bạn xác định tông màu của quá trình chuyển đổi và trong Styled Button, thanh menu sẽ có dạng hình cầu.
Chúng tôi cũng muốn thêm một biểu ngữ hoặc hình ảnh giới thiệu. Đối với điều đó, bạn đặt mục đầu tiên Thùng đựng hàng. Trong các thuộc tính tại Tên Hình ảnhbấm vào dấu ba chấm để chọn hình ảnh bạn đã chuẩn bị trước. Nếu nó quá lớn, RocketCake hỏi liệu nó có thể thay đổi kích thước hình ảnh hay không. Không sao đâu. Tiêu đề 'Mad Dog' mà bạn thấy trên biểu ngữ ở đầu bài viết này, chúng tôi đã tự thêm vào hình ảnh bằng một chương trình khác. Về cơ bản, bạn cũng có thể nhắn tin với mục Văn bản nổi đặt trên một hình ảnh. Thật không may, điều này mang lại một kết quả không thể đoán trước trên thiết bị di động.
Khi bạn hài lòng, hãy lưu tệp đang làm việc ở đâu đó trên đĩa cứng dưới dạng tệp .rcd.
Cột
Bên dưới biểu ngữ bạn muốn cung cấp cho trang chủ nội dung trong một, hai hoặc ba cột. Để làm điều này, hãy chọn mục trong Bộ công cụ Vùng chứa có cột. RocketCake hỏi bạn muốn có bao nhiêu cột. Ứng dụng cũng muốn biết chiều rộng tối thiểu của một cột. Ở đây chúng tôi chọn hai cột và cài đặt mặc định là 150. Điều này có nghĩa là các cột có thể được nhìn thấy gọn gàng cạnh nhau trên màn hình rộng. Nếu một cột trên màn hình nhỏ trở nên nhỏ hơn 150 pixel, thì cột đó sẽ không còn xuất hiện bên cạnh nữa mà ở bên dưới cột trước đó.
Trong ví dụ này, chúng tôi đặt cột bên trái thành Chiều rộng tối thiểu 500. 500 là điểm ngắt cho cột bên trái. Nếu chiều rộng màn hình trở nên quá nhỏ, khách truy cập sẽ đọc nội dung của cột bên phải bên dưới cột bên trái. Ngoài ra, chúng tôi đã đặt biểu ngữ thành Chiều rộng tối đa 1000.
Để làm cho cột bên phải hẹp hơn bên trái, trước tiên hãy nhấp vào cột bên trái. Các kích thước có mặc định không 50%, ô tô. Ví dụ: thay đổi thành 70%, xe hơi. Điều này làm cho cột thứ hai tạm thời nổi bên dưới cột đầu tiên. Bạn có thể giải quyết vấn đề này khi bạn nhấp vào cột thứ hai và tại Kích thước 30%, ô tô điền vào. Điều này sẽ cung cấp cho bạn một tỷ lệ 70/30. Sau đó, bạn điền vào các cột bằng văn bản, mà bạn cũng thiết kế giống như với trình xử lý văn bản. Trong một cột như vậy, bạn cũng có thể Đề mục (cốc). Tiêu đề 1, 2, 3 giữ cho các cốc trông đẹp mắt.
Để thêm hình ảnh, hãy đặt con trỏ vào văn bản và nhấp vào Bộ công cụ trên Hình ảnh. Sau đó điều hướng đến vị trí có hình ảnh đang chờ. Nhấp vào nút này thỉnh thoảng xem trước để xem công việc của bạn trong trình duyệt.
Nếu bạn nhấp vào cột văn bản như vậy, bạn sẽ thấy trong Thuộc tính đệm lót mặc định được đặt thành 10, 10, 10, 10. Phần đệm là khoảng cách từ văn bản đến đường viền cột. Số đầu tiên lưu trữ ở trên cùng, số thứ hai ở dưới cùng, số thứ ba ở bên phải và số thứ tư ở bên trái. Nếu bạn muốn thêm một số khoảng đệm ở phía bên phải trong hộp văn bản, bạn nên đặt giá trị thứ ba thành 20, chẳng hạn.
Do đó, phần đệm là khoảng cách ở bên trong hộp, lề là khoảng cách ở mặt ngoài. Nếu bạn muốn có thêm khoảng trống giữa phần dưới cùng của ảnh và phần trên của văn bản bên dưới ảnh, hãy thay đổi Lề từ 0, 0, 0, 0 thành, ví dụ: 0,10, 0, 0.
Các trang bổ sung
Bây giờ trang chủ đã sẵn sàng, tất nhiên bạn sẽ muốn tạo thêm các trang cho dự án của mình. Điều đó đi kèm với nút Thêm trang. Chương trình hỏi bạn muốn tạo một trang hoàn toàn mới hay một bản sao của một trang web đã tồn tại. Trong ví dụ này, chúng tôi sẽ sử dụng kiểu trang chủ của chúng tôi: nền đen, phông chữ, cỡ chữ, chiều rộng của vùng chứa… Vì vậy, chúng tôi đi cho tùy chọn thứ hai. Sau đó, chúng tôi xóa biểu ngữ và thay đổi nội dung của vùng chứa văn bản.
Nếu bạn muốn có chân trang ở cuối mỗi trang, hãy thêm cả chân trang vào đó Thùng đựng hàng hoặc Vùng chứa có cột và nhập, ví dụ, thông tin liên hệ hoặc thông tin bản quyền. Các ký tự đặc biệt như ký hiệu bản quyền không thể được nhập trực tiếp từ bàn phím. Trong RocketCake, bạn chọn các ký tự đặc biệt như vậy qua menu Chèn, Chèn ký hiệu văn bản.
Liên kết
Tất nhiên bạn muốn các nút trong menu điều hướng trỏ đến các trang chính xác. Để làm điều này, trước tiên hãy chọn nút trong menu điều hướng và sau đó nhấp vào nút có chuỗi. Hoặc bạn nhấp chuột phải và chọn Chèn siêu liên kết. Thao tác này sẽ mở ra một hộp lựa chọn nơi bạn phải chọn giữa việc liên kết đến một trang web bên ngoài, một địa chỉ e-mail, một trang của dự án này hoặc một tệp cụ thể. Chọn tùy chọn Trang trong dự án. Sau đó, bạn sẽ thấy danh sách các trang web đã tạo mà bạn chọn đúng.
Con ong Mục tiêu chọn mở trang web trong cửa sổ trình duyệt mới hoặc trong cửa sổ trình duyệt đang mở. Tùy chọn cuối cùng này là phổ biến. Nếu bạn giữ nút chuột trái trong khi trỏ vào một nút từ menu điều hướng, bạn sẽ thêm các menu con sau đó tham chiếu đến các trang web hiện có theo cách tương tự.
trang chủ
RocketCake cũng hoạt động với cái gọi là trang chủ. Nếu bạn đang tạo một trang web với nhiều trang, kỹ thuật này sẽ tăng tốc độ định dạng đáng kể. Trang chính là một mô hình được định dạng dùng làm mẫu cho các trang khác. Do đó, một trang chủ như vậy không phải là một trang web thông thường. Dưới đây là cách tạo một trang web: tạo một trang web mới, đặt menu thả xuống, đảm bảo menu hoạt động như bình thường và định dạng trang này không có nội dung văn bản thực. Sau đó, bạn thêm một. Từ Bộ công cụ Trình giữ chỗ nội dung hướng lên. Nếu không có phần tử này, trang chủ sẽ không hoạt động. Đặt tên có ý nghĩa cho trang đặc biệt này, ví dụ: masterpage.html. Sau đó, bạn tạo một hoặc nhiều trang web mà bạn không cung cấp bố cục.
Bạn gõ văn bản, thêm hình ảnh nếu cần và lưu trang này. Trên các trang có nội dung này, hãy nhìn vào Thuộc tính trong trường ở dưới cùng Trang chính. Ở đó bạn kích hoạt tùy chọn UseMasterPage. Nếu bạn đã chọn hộp này, một hộp mới sẽ xuất hiện trong đó bạn chọn tên của trang chủ dự định. Bạn có thể sử dụng nhiều trang chính. Hiện tại, bạn vẫn chưa thấy gì, nhưng nếu bạn nhấp vào nút xem trước nhấp chuột, bạn sẽ nhận thấy rằng nội dung của trang này được xuất bản gọn gàng trong Trình giữ chỗ nội dung của trang chính đã chọn.
Chèn nhạc
Với RocketCake, bạn thêm video YouTube bằng cách chọn mục trong Bộ công cụ Video YouTube chọn. Sau đó, nhập địa chỉ web của video vào Thuộc tính. Cũng dễ dàng như thêm một thư viện ảnh. sau bạn thư viện hình ảnh đã chọn từ Bộ công cụ, hãy chọn các ảnh khác nhau trong các hộp ImageFile1, ImageFile2 và kể từ đó trở đi. Có một số cách để phóng to ảnh trong thư viện. Ví dụ: bạn có thể mở chúng trong một cửa sổ mới, trong một cửa sổ bật lên, nhưng chúng tôi thích nhất là một hình ảnh lớn trên một lớp riêng biệt.
Xuất bản
Bạn xong việc rồi? Sau đó, bạn có thể xuất bản trang web trên internet hoặc trên đĩa cục bộ. RocketCake được trang bị chức năng ftp để đặt mọi thứ gọn gàng trên máy chủ trong thư mục mà nhà cung cấp của bạn cung cấp. Nhập địa chỉ ftp, tên người dùng và mật khẩu. Sử dụng tùy chọn Lưu mật khẩu để lưu mật khẩu. Khi bạn xuất bản trang web vào ổ cứng, bạn có thể truy cập trang chủ bằng cách mở tệp index.html bằng chương trình internet của bạn.
