網頁設計HTML_CSS_VB語言描述的網頁

2021-02-20 蜘蛛網計算機語言

WWW_WEB_入門實踐—網頁設計HTML_CSS_VB語言描述的網頁--VS平臺

網頁內容與表現形式

一般新聞或科技報導—文本與圖形

網頁描述語言—語言規則格式與例子。元素、標籤、屬性、標題、段落、樣式、引用、註解、連結、下劃線、字體、色彩、字號、……。紙介質或網頁版面涉及到的元素及其屬性。

使用WWW特有語言

HTML語言—基礎描述語言

後臺計算機語言描述—代碼

HTML

<html>

<bodystyle="background-color: #ffff00">

<p>

WWW_WEB_入門實踐—網頁設計HTML語言<br />

蜘蛛網計算機語言<br />

工程師基礎<br />

</p>

</body>

</html>

瀏覽器解釋輸出的前臺描述—表現形式

 

HTML-CSS

後臺計算機語言描述—代碼

<html>

<styletype="text/css">

body{background-color:yellow}

</style>

<body>

<p>

WWW_WEB_入門實踐—網頁設計HTML語言<br />

蜘蛛網計算機語言<br />

工程師基礎<br />

</p>

</body>

</html>

瀏覽器解釋輸出的前臺描述—表現形式

 

HTML-CSS-JavaScript

後臺計算機語言描述—代碼

<html>

<styletype="text/css">

body{background-color: yellow}

h2{background-color: #00ff00}

p{background-color: rgb(50,0,100);font-family:隸書;color:red;font-size:30px}

</style>

<body>

<h2 id="HButtonJavaScript">我的第一段HTML語言描述的網頁</h2>

<buttontype="button"

onclick='document.getElementById("HButtonJavaScript").innerHTML

="HTML語言描述的網頁-改變網頁內容,來自JavaScript語言描述的事件"'>

點擊按鈕-人機互動

</button>

<br />

<addressstyle="font-family:華文新魏;color:red;font-size:20px">

作者：工程師基礎</br>

發布者：訂閱號-蜘蛛網計算機語言

</address> <hr />

<p id="PButtonJavaScript">

WWW_WEB_入門實踐—網頁設計HTML語言<br />

蜘蛛網計算機語言<br />

工程師基礎<br />

</p>

<br />

<buttontype="button"onclick='document.getElementById("PButtonJavaScript").innerHTML

 ="Javascript語言可以改變網頁內容。<br />動態網頁與瀏覽者交互-WWW_WEB_入門實踐—網頁設計HTML_Javascript語言。<br />蜘蛛網計算機語言：工程師基礎"'>點擊按鈕-觀察改變

</button>      

<br />

<p1id="Pchange">JavaScript能夠改變 HTML 內容。</p1><br/>

<buttontype="button"onclick='document.getElementById("Pchange").innerHTML

= "button 按鈕事件可以改變用戶要求的響應，JavaScript描述實現!"'>點我再試一下</button>

</body>

</html>

瀏覽器解釋輸出的前臺描述—表現形式

 

HTML-CSS-VB

後臺計算機語言描述—代碼

網頁描述語言由HTML-CSS-VB組成，程序編輯平臺有記事本轉變為VS.net。微軟提供的一體化平臺—編輯、調試、發布等。當然就複雜了！不過，有了HTML-CSS-JavaScript的粗淺認知與體驗，尤其是有了HTML-CSS的基本常識概念與實踐，閱讀起來就方便了好多。

先看一下編輯工具的模樣：

新建一個項目—用於網頁製作。

編譯系統—平臺已經替我們做了許多許多事情---也就是必要的通用代碼和頁面布局、樣式等。用戶可以根據自己的需求改變代碼。

平臺及其一部分代碼是： 

<%@ PageTitle="主頁" Language="vb"MasterPageFile="~/Site.Master" AutoEventWireup="false"

    CodeBehind="Default.aspx.vb"Inherits="WebHTML_CSS_VB_1_._Default" %>

 

<asp:Content ID="HeaderContent"runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:ContentID="BodyContent" runat="server"ContentPlaceHolderID="MainContent">

    <h2>

        歡迎使用 ASP.NET!

    </h2>

    <p>

        若要了解關於 ASP.NET 的詳細信息，請訪問 <a href="http://www.asp.net/cn" title="ASP.NET 網站">www.asp.net/cn</a>。

    </p>

    <p>

        您還可以找到 <ahref="http://go.microsoft.com/fwlink/?LinkID=152368"

            title="MSDN ASP.NET 文檔">MSDN上有關 ASP.NET 的文檔</a>。

    </p>

</asp:Content>

 

瀏覽器解釋輸出的前臺描述—表現形式

編輯平臺及其代碼--自動生成的部分


 

改造為用戶的模樣。

只關注用戶需要的內容進行添加即可

瀏覽器解釋輸出的前臺描述—表現形式—看看用戶添加了什麼？

 

 

平臺中的一部分代碼是：

<%@ PageTitle="蜘蛛網計算機語言的主頁" Language="vb"MasterPageFile="~/Site.Master" AutoEventWireup="false"

    CodeBehind="Default.aspx.vb"Inherits="WebHTML_CSS_VB_1_._Default" %>

<asp:ContentID="HeaderContent" runat="server"ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:ContentID="BodyContent" runat="server"ContentPlaceHolderID="MainContent">

    <style type="text/css">

body{background-color: yellow}

h2{background-color: #00ff00}

p {background-color:rgb(50,0,100);font-family:隸書;color:red;font-size:30px}

</style>

 <h2>蜘蛛網計算機語言--歡迎使用 ASP.NET製作和發布基於HTML-CSS-VB的網頁製作! </h2>

    <p> 若要了解關於 ASP.NET 的詳細信息，請訪問 <a href="http://www.asp.net/cn" title="ASP.NET 網站">www.asp.net/cn</a>。

    </p>

        <p>

        若要了解關於 蜘蛛網計算機語言的詳細信息，請訪問 微信公眾號--訂閱號：《蜘蛛網計算機語言》。  </p>

    <p>您還可以找到<ahref="http://go.microsoft.com/fwlink/?LinkID=152368"            title="MSDN ASP.NET 文檔">MSDN 上有關 ASP.NET 的文檔</a>。</p>

    <p> 在微信訂閱號《蜘蛛網計算機語言》上，您還可以找到其它計算機語言基礎及其應用的文檔</a>。</p>

</asp:Content>

//////////////////////////////

<%@ MasterLanguage="VB" AutoEventWireup="false"CodeBehind="Site.master.vb" Inherits="WebHTML_CSS_VB_1_.Site"%>

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<headrunat="server">

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="~/Styles/Site.css"rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolderID="HeadContent" runat="server">

    </asp:ContentPlaceHolder>

</head>

<body>

    <form runat="server">

    <div>

       <div>

            <div>

                <h1>

                    《蜘蛛網計算機語言》基於 ASP.NET 平臺的應用程式--HTML-CSS-VB語言描述網頁

                </h1>

            </div>

            <divclass="loginDisplay">

                <asp:LoginViewID="HeadLoginView" runat="server"EnableViewState="false">

                    <AnonymousTemplate>

                        [ <ahref="~/Account/Login.aspx" ID="HeadLoginStatus"runat="server">登錄</a> ]

                    </AnonymousTemplate>

                    <LoggedInTemplate>

                        歡迎使用 <span><asp:LoginNameID="HeadLoginName" runat="server" /></span>!

                        [ <asp:LoginStatusID="HeadLoginStatus" runat="server"LogoutAction="Redirect" LogoutText="註銷"LogoutPageUrl="~/"/> ]

                    </LoggedInTemplate>

                </asp:LoginView>

            </div>

            <div>

                <asp:MenuID="NavigationMenu" runat="server"CssClass="menu" EnableViewState="false"IncludeStyleBlock="false" Orientation="Horizontal">

                    <Items>

                        <asp:MenuItemNavigateUrl="~/Default.aspx" Text="主頁"/>

                        <asp:MenuItemNavigateUrl="~/About.aspx" Text="關於"/>

                    </Items>

                </asp:Menu>

            </div>

        </div>

        <div>

            <asp:ContentPlaceHolderID="MainContent" runat="server"/>

        </div>

        <div>

        </div>

    </div>

    <div>

        </div>

    </form>

</body>

</html>

閱讀代碼也是不錯的學習方法。

請注意：

網頁設計模式—信息表達與表現形式—信息量與理解效率。

網頁描述需求與實現

 

相關焦點

  • 網頁設計_HTML_CSS語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS語言描述的網頁      網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 網頁設計HTML_CSS_VC#語言描述的網頁
    WWW_WEB_入門實踐—網頁設計HTML_CSS_VC#語言描述的網頁網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 網頁設計HTML_CSS_VB獨立文件描述-HTML修改
    —文本與圖形網頁描述語言—語言規則格式與例子。……從網頁設計-HTML語言描述的網頁，到網頁設計-HTML_CSS語言描述的網頁，到網頁設計HTML_CSS_JavaScript語言描述的網頁，到網頁設計HTML_CSS_JavaScript語言獨立文件描述的網頁，……可以體會到HTML_CSS_JavaScript各自的作用、相互關係及其引用等，了解、理解了獨立文件及其引用--HTML_CSS_JavaScript
  • 網頁設計HTML_CSS語言_外部樣式
    WWW_WEB_入門實踐—網頁設計HTML_CSS語言_外部樣式網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 網頁設計HTML_CSS_JavaScript語言_外部文件
    WWW_WEB_入門實踐—網頁設計HTML_CSS_JavaScript語言_外部文件網頁內容與表現形式。
  • 網頁性能之html css javascript
    前言html css javascript可以算是前端必須掌握的東西了，但是我們的瀏覽器是怎樣解析這些東西的呢 我們如何處理html css javascript這些東西來讓我們的網頁更加合理，在我這裡做了一些實驗，總結起來給大家看看。
  • HTML+CSS+JavaScript網頁設計課程的教與學
    課程涵蓋HTML基本元素、CSS樣式表和JavaScript腳本程式語言、頁面布局和整站建設三大內容，全面介紹了WEB站點設計與開發的基本操作技術和應用技巧。本課程採用課堂與實踐相結合講授、案例嚮導的教學方式。
  • 網頁設計基礎:Div+CSS布局入門教程
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 網頁設計基礎：Div+CSS布局入門教程
  • 網頁前端設計快速入門技巧
    Html是最基礎的，現在流行的是Html5設計，先學會網頁布局。CSS是用來美化html頁面的為頁面提供布局和格式。最後再學Javascript。如果你把每天看電影、看電視劇的時間用來學習，我想一個星期入門是沒有問題的。
  • HTML網頁製作技巧
    1.怎樣定義網頁語言(字符集)?　　 在製作網頁過程中,你首先要定義網頁語言,以便訪問者瀏覽器自動設置語言,而我們用所見即所得的HTML工具時,都沒有注意到這個問題,因為它是默認設置。要設置的語言可以在HTML代碼狀態下找到:　　<meta http－equiv="Content Type" content="text/html; charset=gb2312">　　　　 把charset=gb2312改換成其它語言代碼即可,比如英文harset=en.　　　　2.怎樣防止別人把你的網頁放到框架裡?
  • 網頁設計之css+div PK table+css
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 網頁設計之css+div PK table+css
  • 了解HTML基本結構元素對網頁進行SEO優化
    html元素html元素是網頁文件的根元素，所有網頁文件內容都要放置在html的起始標籤和結束標籤內，瀏覽器通過該標籤確認讀取的文檔是HTML文檔，並按照HTML規範解析並顯示HTML文件。例如網頁的背景顏色、段落的字體字號、網頁元素之間排版位置等內容。關於樣式文件後面CSS課程會討論。例如，下面的網頁文檔引入了theme.css文件。
  • 網頁設計:關於CSS框架網頁的設計!
    b) 布局 layout.css 　　定義頁面是二欄還是三欄，是全屏還是1024×768…… 　　一個網站的設計可能有很多種布局，但是大多數都是由幾個具有復用性的布局組成，選擇性的引入所需要的布局，可以很快地應用所期望的頁面布局。
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    在第二期中，我們對html做了入門，已經有了對網頁開發基本的了解。本節知識開始書寫html網頁結構。根節點：<html>兩個子節點：<head> <body>節點基本結構圖代碼結構圖二、網頁編碼格式
  • HTML|前端網頁的設計基礎知識
    1、關於html簡介html指的是超文本標記語言，是用來描述網頁的一種語言。且其並未為一種程式語言，而是一種標記語言（一套標記標籤），以此為基礎來描述網頁。2、html標籤html通常被尖括號包圍，例如<html>,以此為一個代碼的開始標籤以及終止標籤。圖 1 基本代碼另外，html標籤通常是成對存在的，比如<p>和</p>,一個為其實標籤，另一個為終止標籤，在兩個字符間的文本被現實為段落。
  • 《前端開發》第一節:10天教你學會用Html和CSS寫簡單網頁
    大家平時訪問的網頁表面看就是一些數據，文字，圖片等組成的一個頁面，其實一個頁面大致包括三個部分：第一是Html，第二是Css，第三是Javascript。咱不說其他框架，我們只說基礎。什麼是Html？Html稱為超文本標記語言，是一種標誌性的語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一，使分散的Internet資源連結為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、連結等。也就是能看到的一個網頁的布局都是Html的標籤實現的。
  • 用html和css怎麼製作一個簡單的網頁
    前面發的兩篇關於html和css的文章，不知道大家看會了沒有呢，私下有沒有操作呢。俗話說，學以致用，只學不用和沒學沒什麼區別。今天就用前兩節的知識教大家一個簡單的網頁製作，可能有些陌生的知識，自行百度哦。
  • 0060 PHP代碼嵌入到HTML網頁當中
    前面2節課全部都是之前寫過的程序重新用PHP程式語言來實現。這節課開始學習如何使用PHP結合HTML網頁來實現具體的動態數據網頁。學哥計劃做一個學生分數管理功能的網頁，首先來做一個一覽查詢頁面。>可以看到，雖然這個文件名最後保存為helloworld.php，但是其本質還是一個html規範格式文件，因為最終這個文件的內容是要顯示在瀏覽器當中的，所以起本質仍然是一個html規範文件。
  • 如何設計製作出網頁六步驟
    網頁的設計製作在網站製作中一直是重要的環節，網頁的設計製作所能起到的作用也很大，在很多企業或是個人都是需要網站製作的需求，單是怎麼做好網站的設計製作呢，首先要對每一個網頁的設計製作上下功夫，下面我們就討論一下如何設計製作出高大尚的網頁。
  • 贈書|《網頁設計與製作(HTML+CSS)》附視頻
    HTML與CSS是網頁製作技術的核心和基礎，也是每個網頁製作者必須要掌握的基本知識，兩者在網頁設計中不可或缺。本書從初學者的角度，以形象的比喻、實用的案例、通俗易懂的語言詳細介紹了使用HTML與CSS進行網頁設計與製作的各方面內容和技巧。