WebsitePainter là một công cụ đắc lực, giúp người dùng xây dựng các trang web có tính chuyên nghiệp cao mà không đòi hỏi bất kỳ kiến thức chuyên sâu về HTML hay kỹ năng lập trình nào.
Chỉ thông qua vài thao tác đơn giản, bạn hoàn toàn có thể tạo ra một trang web với nhiều tính năng hấp dẫn, bao gồm các nút Web 2.0, đường viền bo tròn, hiệu ứng hover sinh động, độ trong suốt tinh tế và văn bản liền mạch.
Phần mềm này còn cung cấp một loạt các template đa dạng, đồng thời tương thích hoàn toàn với các tiêu chuẩn web phổ biến như HTML, CSS, PHP và ASP.
Việc tiếp cận các yếu tố như Web 2.0 Buttons, Transparent Shapes và Gradients trong WebsitePainter trở nên dễ dàng chỉ với vài thao tác. Nhờ đó, bạn có thể tạo ra mọi hình dạng cần thiết cho trang web của mình.
Quá trình vẽ ảnh, chỉnh sửa CSS style và các thành phần HTML trở nên dư thừa khi sử dụng WebsitePainter.
WebsitePainter cho phép bạn định vị chính xác từng thành phần của trang web vào vị trí mong muốn chỉ bằng cách nhấp chuột và kéo thả.
Bạn không cần phải lo lắng về những quy tắc bố cục phức tạp, WebsitePainter sẽ tự động xử lý và tạo ra trang HTML theo yêu cầu của bạn. Mặc dù có vẻ đơn giản, nhưng việc bố cục trong HTML hiện đại lại là một thách thức lớn đối với các nhà thiết kế web.
WebsitePainter tích hợp khả năng hỗ trợ nội dung HTML động. Bạn có thể tạo các trình chiếu slide với danh sách hình ảnh hiển thị và hiệu ứng chuyển đổi mượt mà, tốc độ có thể điều chỉnh.
Công cụ này cho phép thêm các nút hoặc liên kết để tăng tính tương tác cho trình chiếu, cho phép người dùng chuyển đổi giữa các ảnh một cách dễ dàng. Bên cạnh đó, việc tạo menu và thư viện ảnh cũng trở nên đơn giản chỉ với vài cú nhấp chuột, không đòi hỏi kiến thức lập trình.
Khác với nhiều trình soạn thảo web khác, WebsitePainter không chỉ tập trung vào bố cục mà còn có thể tạo ra nhiều yếu tố khác.
Bạn cần một thanh bên mở rộng toàn bộ màn hình? Hoặc một khu vực menu ở phía dưới? Hay cả hai? WebsitePainter có thể đáp ứng mọi nhu cầu của bạn chỉ bằng cách sử dụng 'Layout Containers'.
WebsitePainter không giới hạn khả năng tạo trang chỉ ở định dạng HTML. Nó còn có thể tạo ra các trang PHP, ASP và nhiều loại trang khác.
Chỉ cần chọn phần mở rộng mong muốn cho trang, WebsitePainter sẽ tự động hoàn thành phần còn lại. Với thành phần HTML-Code, bạn có thể trực tiếp chỉnh sửa PHP, ASP hoặc bất kỳ đoạn mã nào khác ngay trong WebsitePainter.
Nếu bạn muốn kiểm soát mã HTML do WebsitePainter tạo ra, bạn có thể tự chỉnh sửa nó.
Chỉ cần nhấp chuột phải vào bất kỳ thành phần nào và chọn 'HTML Code...'. Tại đây , bạn có thể xem mã HTML đã tạo cho thành phần đó, hoặc thêm các thuộc tính HTML, bộ xử lý JavaScript,… theo ý muốn.
WebsitePainter hỗ trợ Unicode, cho phép bạn tạo trang web bằng bất kỳ ngôn ngữ nào, bao gồm tiếng Anh, tiếng Đức, tiếng Hàn Quốc, tiếng Trung Quốc, tiếng Nga, tiếng Nhật Bản,…
Nếu bạn chưa thực hiện việc này, hãy tải xuống và cài đặt chương trình ngay lập tức.
Khi khởi chạy WebsitePainter, chương trình sẽ yêu cầu bạn chọn một template để bắt đầu. Hãy chọn trang trắng, và giao diện trình soạn thảo sẽ hiển thị như hình dưới đây:
Khu vực màu trắng lớn ở trung tâm là trang đầu tiên của trang web. Ở phía bên phải, bạn sẽ thấy một loạt các thành phần có thể thêm vào trang, bao gồm hình ảnh, văn bản, nút,… Cửa sổ 'Documents' ở phía bên trái hiển thị tất cả các trang của trang web, hiện tại có một trang tên là 'index.html'. Bên cạnh đó, thành phần 'Properties' ở góc dưới bên trái cho phép bạn tùy chỉnh các thành phần đã chọn.
Tiếp theo, nhấp vào thành phần 'Text' ở phía bên phải để chọn nó, sau đó nhấp vào vị trí trên trang web nơi bạn muốn chèn văn bản. Một thành phần văn bản mới sẽ được tạo ra, và bạn có thể nhập nội dung vào đó. Hãy bắt đầu bằng cách đặt tên cho trang web, ví dụ: "This is my website".
Nếu bạn muốn thay đổi vị trí hoặc kích thước của thành phần văn bản, chỉ cần kéo hình chữ nhật màu trắng cùng với các mũi tên xung quanh nó.
Để làm cho thành phần văn bản trông giống tiêu đề hơn, hãy chọn một phông chữ đẹp hơn và điều chỉnh kích thước cho phù hợp.
Bây giờ bạn đã biết cách tạo văn bản tùy chỉnh trên trang web. Bạn có thể sử dụng các nút trên thanh công cụ phía trên để làm đậm, nghiêng hoặc gạch dưới văn bản. Ngoài ra, với nút có màu sắc hiển thị HTML color #000000 theo mặc định, bạn có thể chọn màu sắc khác cho văn bản.
Trang web sẽ trở nên vô nghĩa nếu không có các đường dẫn, vì vậy bạn nên tạo một trang khác và liên kết nó từ trang hiện có. Nhấp vào nút 'Add page' trên thanh công cụ, hoặc chọn menu 'Insert' -> 'Add Page'.
WebsitePainter sẽ hỏi bạn liệu bạn muốn tạo một trang trắng mới hay sao chép trang hiện có. Hãy chọn tạo một trang trắng mới. Sau đó, chương trình sẽ tạo và mở một trang mới có tên như 'UntitledPage1.html', bạn có thể chỉnh sửa trang này tương tự như trang đầu tiên. Thêm văn bản và chọn 'Web2.0 shape' ở phía bên phải, sau đó nhấp vào vị trí bạn muốn đặt nó trên trang.
Khi nhấp vào giữa hình dạng vừa tạo, bạn có thể bắt đầu nhập văn bản vào đó. Ví dụ, nhập từ 'Back'. Bạn cũng có thể điều chỉnh màu sắc và phông chữ của văn bản nếu muốn.
Để thay đổi màu sắc của nút, chỉ cần chọn hình dạng và tìm trong cửa sổ 'Properties' ở phía bên trái. Tại đó, bạn sẽ thấy một mục 'GradientBegin' với màu sắc hiện tại. Chọn mục này để thay đổi màu sắc.
Nếu bạn muốn hình dạng đó hoạt động như một nút, khi người dùng nhấp vào nó sẽ quay lại trang web chính 'index.html', bạn cần tạo một 'hyperlink' bằng cách nhấp chuột phải vào nút và chọn 'Insert Hyperlink'.
Ngoài ra, bạn có thể chọn nút và nhấp vào nút 'Insert Hyperlink' màu xanh lam trên thanh công cụ.
Một hộp thoại sẽ xuất hiện yêu cầu bạn chỉ định đích đến của đường dẫn. Chọn 'Page in this project' và 'index.html'.
Bây giờ các trang của bạn đã được liên kết. Để kiểm tra, hãy xem trước trang trong trình duyệt. Chọn Menu Command 'Publish' -> 'Preview' hoặc nhấp vào nút 'Preview' trên thanh công cụ. Trang sẽ mở trong trình duyệt cục bộ của bạn (Internet Explorer , Safari , Chrome , Opera hay Firefox ). Nếu bạn nhấp vào nút, trang 'index.html' sẽ mở ra.
Tương tự, bạn có thể thêm liên kết vào các phần của văn bản hoặc hình ảnh.
Để đăng tải trang web của bạn lên Internet, hãy chọn 'Publish -> Publish to the Internet' từ menu. Một hộp thoại sẽ xuất hiện yêu cầu bạn cung cấp địa chỉ và thông tin đăng nhập cho máy chủ. Với phần địa chỉ, bạn có thể nhập địa chỉ FTP server, ví dụ: ftp://ftp.yourhost.com. Thông tin này thường được cung cấp bởi nhà cung cấp dịch vụ của bạn. Khi nhấn 'ok', WebsitePainter sẽ cố gắng tải tất cả các tệp lên máy chủ. Ngoài ra, bạn có thể sử dụng FTP client bằng cách chọn 'Publish to local disk'.
Việc xây dựng một trang web bằng WebsitePainter là một quá trình tương đối dễ dàng. Tuy nhiên, việc tích hợp các tính năng nâng cao như mã PHP vào trang web có thể đặt ra thách thức đối với những người chưa quen thuộc với lập trình PHP. Bài hướng dẫn này sẽ cung cấp cho bạn các bước để tạo một form liên hệ có khả năng tự động gửi email thông qua PHP.
Trước khi bắt đầu, bạn cần tải và cài đặt phần mềm WebsitePainter nếu chưa thực hiện việc này.
Sau khi đã thiết lập trang web, bạn có thể tiến hành thêm trang liên hệ vào cấu trúc của nó. Nhấn vào nút 'Add page' trên thanh công cụ, hoặc chọn 'Insert' -> 'Add Page' từ menu.
Trang mới được tạo sẽ có tên mặc định là 'UntitledWebpage.html' hoặc tương tự. Bạn nên đổi tên trang này thành một tên phù hợp hơn, ví dụ như 'contact.php'. Điều quan trọng là tên file phải kết thúc bằng '.php' thay vì '.html' để đảm bảo form liên hệ hoạt động chính xác. Bạn có thể thay đổi tên file trong cửa sổ 'Properties' ở phía bên trái, thông qua mục 'Filename'.
Tiếp theo, bạn sẽ thiết kế giao diện của form liên hệ trên trang vừa tạo. Sử dụng thành phần webform để xác định khu vực hiển thị form.
Sử dụng các thành phần 'text', 'text edit field' và 'Web Form button' để xây dựng các trường nhập liệu và nút gửi của form.
Lưu ý rằng đường viền màu xám bao quanh form phải là thành phần 'Web Form'. Tất cả các trường văn bản và nút gửi cần được đặt bên trong form này để đảm bảo chức năng hoạt động.
Bây giờ, bạn cần cấu hình một số thuộc tính của các thành phần để chúng hoạt động. Chọn background màu xám của form ('Web Form') và thay đổi thuộc tính 'Action' trong cửa sổ thuộc tính thành tên trang liên hệ ('contact.php') mà bạn đã tạo.
Đảm bảo rằng 'Method' được đặt thành 'POST' và 'Encoding' được đặt thành 'application/x-www-form-urlencoded'.
Tiếp theo, đặt tên cho các trường văn bản để mô tả nội dung mà chúng yêu cầu, ví dụ: 'email' và 'text'.
Bạn cũng có thể chọn tùy chọn 'multiline' cho các trường văn bản lớn hơn để cho phép người dùng nhập nhiều dòng văn bản.
Đối với nút 'Send', bạn có thể tùy chỉnh thuộc tính 'label' thành bất kỳ văn bản nào bạn muốn. Quan trọng là phải đặt 'ButtonType' thành 'Submit'.
Sau khi hoàn tất thiết kế, bước tiếp theo là thêm code PHP để xử lý việc gửi email khi người dùng nhấp vào nút 'Send Button'. Tạo một thành phần code PHP và đặt nó vào bất kỳ vị trí nào trên trang của bạn. Bạn có thể tùy chỉnh màu sắc background và đường viền của thành phần này theo ý thích.
Nhấp đúp vào thành phần PHP mới tạo hoặc nhấp chuột phải và chọn 'Edit Code...', sau đó dán đoạn code sau vào hộp thoại:
$text = "";
foreach($_POST as $name => $value)
{
$text .= "$name : $value\n";
}
if ($text != "")
{
echo 'Thanks for contacting us.';
mail("youremail@example.com", "Contact form request", $text);
}
Đây là đoạn code PHP dùng để gửi nội dung form khi người dùng nhấp vào nút 'send'. Hãy nhớ thay thế địa chỉ email "youremail@example.com" bằng địa chỉ email thực của bạn để nhận được thông báo khi có người gửi form.
Bây giờ, form liên hệ của bạn đã hoàn thiện.
Khi xem trước form liên hệ bằng 'Publish -> Preview', bạn có thể thấy code PHP hiển thị trên trang. Đừng lo lắng, đây chỉ là hiện tượng xảy ra trong chế độ xem trước và không ảnh hưởng đến chức năng của form. Để form hoạt động như mong đợi, bạn cần tải nó lên một webserver hỗ trợ PHP. Sau khi tải lên và hoàn tất các thiết lập cần thiết, form liên hệ của bạn sẽ hoạt động bình thường.
3 nhận xét
Windows
Phần mềm lập trình
Thiết kế website
