Peppubuild の使用例: 初めての Web サイトを構築する (1)

Peppubuild は、コードを書かずにウェブサイトを作成できるノーコード プラットフォームです。 Web サイトの作成は、特にコーディングや Web サイトのデザインに慣れていない場合には、気が遠くなることがあります。 Peppubuild はこの作業を簡素化し、基本的な Web 開発概念を習得しながら Web サイトを開発できるユーザーフレンドリーなプラットフォームを提供します。これは、創造性とテクノロジーが融合したものであり、教育とイノベーションが融合したものであると考えてください。

Peppubuild で Web サイトを構築する理由

Peppubuild は、Web 開発への低い障壁を提供します。その機能は次のとおりです:

• 既製のテンプレート: カスタマイズ可能な Web サイトのレイアウトをすぐに始められます。
• ビジュアル編集: コードを深く掘り下げることなく、リアルタイムで変更を確認できます。
• コード ビュー: HTML、CSS、JavaScript を学習したい人のために、実践的な学習を促進するコード エディターが統合されています。
• インタラクティブなチュートリアル: ステップバイステップのガイドにより、行き詰ることはありません。

初めてのウェブサイトを始める

プロジェクトを開始するには、まず認証を受ける必要があります。まだ認証されていない場合は、上のリンクをクリックしてください。次に、以下に示すように、[新しいプロジェクト] ボタンをクリックします。

「空のプロジェクト」をクリックし、指示に従ってプロジェクトに名前を付けます。次に、プロジェクトのワークスペースにリダイレクトされます。

ペップビルドのツールバー

まず、Peppubuild のインターフェースを調べます。これはエディターがどのように見えるかです。ツールバーのアイコンには左から右に番号を付けました。

アイコン 1: これはブロックアイコンです。 ブロックは、エディターにドラッグして Web サイトの一部を形成できる、事前に構築されたコンポーネントです。たとえば、エディターにドラッグできるテキスト ブロックとリンク ブロックがあります。ボタンをクリックすると、使用可能なさまざまなブロックが右側のパネルに開きます。

アイコン 2: このアイコンはすでにアクティブになっており、スタイル マネージャーです。エディターは空であるため、最初に要素を選択するように指示するテキストのみが表示されます。スタイル マネージャーから、色の追加、テキストの拡大、その他のアクションを実行できます。

アイコン 3: ルーラー アイコンは、ブロックをエディタ内の任意の位置にドラッグできるため、Web の応答性を気にしない専門家にとって便利です。これは要素とページの配置に影響します。したがって、技術開発者であり、ページを再調整できる場合にのみ、これを使用する必要があります。

アイコン 4: 削除 アイコンを使用すると、ページ上のすべてを削除できます。ページ上の個々のコンポーネントのみを削除したい場合は、コンポーネントをクリックし、コンポーネントの周囲に表示される削除ボタンを使用します。

アイコン 5: これは 元に戻すアイコン です。CTRL Z を使用して変更を元に戻すことができますが、[元に戻す] ボタンを使用することもできます。やり直しボタンはないので、CTRL Y を使用できます。

アイコン 6: これは コード ブロック アイコンで、ページのコードを HTML および CSS 形式で表示できます。新しいページに移動すると、各ページのコードがページのコンテンツに対応して変更されます。

アイコン 7: これは 全画面 アイコンで、エディターをページ全体に展開できます。

アイコン 8: プレビュー アイコンを使用すると、サイド パネルなしでエディターのコンテンツを表示できます。

アイコン 9: これは コンポーネントの表示 アイコンです。アクティブな場合、各コンポーネントの周囲にガイド点線が表示されます。

アイコン 10: ページ アイコンが右側のサイドバーに開きます。ページを管理したりプロジェクトを公開したりするためのさまざまなボタンが含まれています。ページの追加から、Web タイトルの追加、プロジェクトの公開まで。

各プロジェクトには、ホームページであるインデックス ページがあります。このページの名前を削除したり編集したりしないでください。 [ページを追加] ボタンを使用して新しいページを追加できます。

アイコン 11: デバイス アイコンは、デスクトップからモバイル デバイスまで、さまざまなデバイス間でプロジェクトを確認するのに役立ちます。

アイコン 12: レイヤー アイコンには、エディター内のすべてのコンポーネントとそれに含まれる要素のツリーが表示されます。

アイコン 13: ロゴ は、ブラウザの戻るボタンを使用する代わりに、ダッシュボードに移動します。

アイコン 14: [プロパティ] タブには、各要素のプロパティが表示されます。ブロックをエディターにドラッグすると、プロパティ タブでプロパティを確認および設定できます。たとえば、リンクには Href プロパティがあり、リンクの URL を受け入れて設定します。

アイコン 15: 「データの追加」ボタンは Web アプリケーション用です。これにより、外部データを追加できるようになります。

ペップビルドのブロック

Peppubuild には、ページの構築に役立つブロックが多数あり、さまざまなカテゴリに分類されています。

• ナビゲーション バー: これには、上部と下部のナビゲーションとサイドバーが含まれます。

• ページ: これには、既製のページ テンプレートのブロックが含まれています。ウェブサイトの設定にサポートが必要な場合は、このブロックから始める必要があります。

• 方向: コンテンツをページの中央に配置するフレックス センターなど、ページの方向とレイアウトを変更するブロック。

• セクション: ページのセクション全体を占めるヒーロー セクションなどのブロックが含まれます。

• 要素: Web サイトを構成する要素は、要素セクションにあります。

• フォーム: 完全なフォームを作成するためのブロックはここにあります。 Web 開発が初めての場合は、ブートストラップ フォームが最適です。

• アニメーション: Web サイトのカルーセルやその他のアニメーションは、アニメーション セクションにあります。

• 基本: 基本ブロックには、画像、リンク、テキストなどのサイトの基本要素が含まれます。

結論: 次は何ですか?

このシリーズの次のパートでは、Web サイトのスタイル設定、JavaScript との基本的なインタラクティブ性の統合、および世界に向けてサイトを公開する方法について詳しく説明します。

Peppubuild を使用すると、最初の Web サイトの構築はもはや難しいことではありません。デジタル世界へのエキサイティングな旅です。今日から構築を始めましょう!

私たちの作品が気に入ったら、Github でスターを付けてください。また、代理店向けに Peppubuild をセットアップしたい場合は、contact@peppubuild.com にメッセージを送信してください。ぜひご連絡をお待ちしております。

以上がPeppubuild の使用例: 初めての Web サイトを構築する (1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。