您現在的位置是:電腦技術吧?>? 基礎知識 ??>??HTML制作網頁,HTML5網頁制作??>??正文詳情

HTML制作網頁,HTML5網頁制作

弓書蝶2019-11-13 10:31:15 人圍觀
簡介HTML頁面制作眾所周知,網站制作涉及到知識的方方面面,包括圖形設計、HTML頁面制作、CSS樣式定義、客戶端腳本(JavaScript/VBScript)、服務器端腳本(ASHTML制作簡單網頁

眾所周知,網站制作涉及到了各個方面的知識,包括平面設計、HTML頁面制作、CSS樣式定義、客戶端腳本編寫(JavaScrfipt/VBScript)、服務器端腳本編寫(Asp/Asp.Net/PHP/JSP)等諸多內容。

本期筆者從最基礎的講起,著重介紹怎樣制作一個簡單的HTML網站,初步體會一下其中的樂趣。

  1.這里筆者使用的網頁制作工具是Dreamweaver。

首先運行Dreamweaver,選擇文件新建菜單,此時會彈出如圖1所示的窗口。

  圖1  2.在此窗口中的基本頁標簽下有七個選項,我們選擇HTML項后單擊創建按鈕,創建工作區就會變成空白,這說明HTML頁面已經創建成功,單擊代碼視圖就會出現如圖2所示的內容。

  圖2  3.先不要理會這些顯示出的HTML頁面代碼的具體含義,我們首先將Title無標題文檔改成網頁處女秀,然后再選擇設計視圖。

點擊菜單插入HTML框架上方,即在網頁的上方插入了一個框架。

此時網頁就分成了兩個框架,即上框架和下框架。

我們選擇下框架后,選擇菜單插入HTML框架左方命令,即在網頁的左邊插入了一個框架。

  4.單擊Ctrl S保存各個框架(top.htm,left.htm,right.htm)。

然后選擇左框架,點擊菜單插入超鏈接命令,會出現如圖3所示的對話框。

在該對話框中輸入各個項,其中文本是鏈接顯示的文字,鏈接是單擊之后跳轉到的頁面地址,目標是在哪個框架里顯示。

在此我們選擇目標為mainFrame(即左邊框架),并按照此步驟繼續插入超鏈接。

接下來進入右框架(right.htm)的代碼視圖,在里輸入歡迎光臨我的網站!!!,這是一個文字特效,可以讓文字左右上下移動,其中把direction換成(UP,DOWN,Left,Right)就可以改變文字的移動方向了。

  圖3  深入淺出 用HTML制作網頁體驗其中樂趣(2)  5.至此已經做出了一個帶框架的HTML頁面,下面我們要在上框架(top.htm)上加入一個Banner。

Banner可以做一些JavaScript動態效果,動態交換效果具體代碼可以去Top.Htm頁面的源碼里查看,筆者在此只給出關鍵代碼:  bannerAD[0]=pic173.gif;  bannerADlink[0]=bannerAD[1]=pic1732.gif;  bannerADlink[1]=http://www.sohu.com;  代碼解釋:如上給出的是一個JavaScript數組,bannerAD存放的是圖片,bannerADlink存放的是單擊圖片后的鏈接,可以根據自己的需要加減圖片。

  6.繼續為右框架的超鏈接做頁面,具體內容可以自己定。

選擇文件菜單,單擊新建,選擇HTML創建一系列頁面,頁面的名稱要與在插入鏈接時寫的名稱一致。

筆者在原文件里做了兩個例子(最新消息和人氣明星),讀者朋友們可以自己嘗試加入更多內容。

這樣,一個HTML網站的雛形就制作好了,如圖4所示是該頁面的最終效果。

  圖4  動態效果在截圖中體現不出來,讀者可以直接在IE打開源文件中的Index.htm,打開后會有提示,單擊右鍵就會彈出允許阻止內容的提示菜單(如圖5)。

  圖5  總結:本期我們介紹的是如何用Dreamweaver做一個簡單的HTML站點,里面用到了部分JavaScript、HTML框架、超鏈接等技術。

另外上面我們所看到的出現阻止內容的提示,是因為沒有把網頁發布到站點上。

在下期,筆者將帶給大家更精彩的內容。

版權聲明:本文由 弓書蝶 整理編輯。

原標題:HTML做網頁,如何用html制作網頁

轉載注明出處:http://www.dn9ww09s.icu/basics/11796.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 邁克菲殺毒軟件怎么樣,邁克菲殺毒軟件

    邁克菲殺毒軟件怎么樣,邁克菲殺毒軟件 相關圖片邁克菲殺毒軟件多少錢McAfee(McAfee)是世界著名的反病毒軟件。許多品牌計算機(包括筆記本電腦和臺式機)都預先安裝了McAfee(McAfee),但許多用戶不知道它的存在,怎么卸載邁克菲...

  • css元素,css第一個元素

    css元素,css第一個元素 相關圖片css元素選擇器你應該明白我為什么這么說。選擇適當且有意義的元素來描述內容,并確保選擇語義類和ID特征值。如果你是一個團隊的一員,做正確的事情會讓你的生活更輕松,團隊的其...

  • CPU占用過高,cpu占用過高怎么辦

    CPU占用過高,cpu占用過高怎么辦 相關圖片cpu使用率如果CPU太高,我該怎么辦?一旦打開電源,藍色屏幕就會出現。進去不容易。程序一運行,藍屏就會出現。有沒有好的方法來處理這些CPU占用太多的情況?高CPU使用率在電腦突...

  • 筆記本風扇噪音,筆記本風扇噪音大怎么處理

    筆記本風扇噪音,筆記本風扇噪音大怎么處理 相關圖片筆記本開機風扇聲音很大對于一般筆記本電腦,使用時會因不同程度產生一定的噪音。當筆記本負荷過高時,噪音會更大,不僅會影響電腦散熱,還會影響心情,讓人感到煩躁不安。那...

  • 去空格,空格

    去空格,空格 相關圖片替換空格剛才,我無意中檢查了由asp.net生成的代碼,我驚訝地發現,由asp.net輸出的代碼并不那么緊湊。標記之間有無數的空格和制表符,特別是在使用嵌套表之后。這是空格名...

  • 電腦本地連接受限制怎么辦,電腦本地連接受限制或

    電腦本地連接受限制怎么辦,電腦本地連接受限制或 相關圖片XP本地連接受限制或無連接有網友在網上問小編本地連接有什么限制,怎么辦?如果計算機的本地連接受到限制,則表示存在網絡,但與網絡的連接超時或無法連接到網絡。這可能是因為...

  • 上傳圖片,百度照片 上傳圖片

    上傳圖片,百度照片 上傳圖片 相關圖片照片現在,雖然手機的發展很快,但仍有一些用戶能夠從這些相對陳舊的手機中獲利。我們都知道舊手機的配置比較低,內存跟不上。如果經常不刪除就拍照,手機的內存會越來越少。...

  • 數據庫存儲的文件,數據庫如何存儲文件

    數據庫存儲的文件,數據庫如何存儲文件 相關圖片數據庫怎么存文件當Java編譯一些圖形化的小程序時,有時也需要存儲少量的數據。如果使用JDBC連接數據庫,則會降低程序的速度。此外,我們還可以使用Java中的文件替換數據庫來保數...

  • 打印機安裝好了無法打印,打印機無法打印

    打印機安裝好了無法打印,打印機無法打印 相關圖片電腦打印機無法打印打印機是計算機的輸出設備之一,用于在相關媒體上打印計算機處理的結果,但許多用戶在安裝打印機后無法打印,如何解決這個問題?也許很多用戶還是被這樣的...

  • 網頁布局代碼,html網頁布局代碼

    網頁布局代碼,html網頁布局代碼 相關圖片怎么布局網頁下面的單行列是引用片段:body{margin:0px;padding:0px;text align:Center;}{content{margin left:網頁布局...

熱評文章

  • 打印機錯誤0x000006d9,打印機錯誤0x00000bcb

    打印機錯誤0x000006d9,打印機錯誤0x00000bcb 相關圖片打印機錯誤0x0000070c在辦公區,我們經常看到設備“打印機”一般來說,我們共享打印機設置以方便操作和打印。但是,共享時會出現提示“無法保存打印機設置,無法完成操作(錯誤...

  • 數據,圖表怎么顯示數據

    數據,圖表怎么顯示數據 相關圖片打開移動數據為什么沒有網絡使用spry可以輕松地將XML數據顯示到HTML頁面。隨著對Dreamweave CS3中集成spry功能的深入研究,學習和掌握spry框架的一些功能模塊,包括數據漫游要不要打開...

  • visio激活密鑰,visio的密鑰

    visio激活密鑰,visio的密鑰 相關圖片visio2019激活密鑰Visio 2013是一款允許it和業務專業人員可視化、分析和交流復雜信息、系統和流程的軟件。使用Visio 2007圖表的專業外觀,我們知道在安裝Visio visio的產品密鑰...

  • 縮小,怎么把照片比例縮小

    縮小,怎么把照片比例縮小 相關圖片css 圖片等比縮放當然,生成縮略圖的效果要好得多,如果它被保留到程序中,但有時由于某些原因,例如服務器不支持GD,不可避免地會要求CSS幫助將大圖片縮小到一定的大小,對于現...

  • 一鍵還原精靈,一鍵還原精靈 進入不了

    一鍵還原精靈,一鍵還原精靈 進入不了 相關圖片一鍵還原精靈的熱鍵原理說到還原工具,我不禁想到了“冰點還原”、“小哨兵還原”、“鬼魂還原”等。有一段時間,我不知道選擇哪一個好用。我們必須考慮簡單的處理、使用和安...

  • 路由器關閉端口,路由器如何關閉端口

    路由器關閉端口,路由器如何關閉端口 相關圖片多端口路由器445港是一個聲譽參差不齊的港口。與端口139一起,端口445是IPC$入侵的主通道。有了它,我們可以方便地訪問局域網中的各種共享文件夾或打印機,但正是因為有了路由器端...

  • 數學算術技巧,算術

    數學算術技巧,算術 相關圖片口算技巧100內加法我們來談談calc()函數。此函數允許您執行簡單的算術計算,例如計算元素的長度和寬度,無需編寫難以維護的JavaScript代碼。此函數支持所有簡單的基本算術運乘法口...

  • 華碩筆記本怎么重裝系統,華碩筆記本裝系統

    華碩筆記本怎么重裝系統,華碩筆記本裝系統 相關圖片筆記本電腦重裝系統華碩電腦是世界知名品牌,很多用戶都會購買華碩筆記本。隨著計算機的不斷使用和使用,計算機不可避免地出現卡死、墜毀、運行越來越慢等問題。而一些有技術...

  • 怎么加快網頁打開速度,加快網頁加載速度

    怎么加快網頁打開速度,加快網頁加載速度 相關圖片網站速度慢怎么加快web開發人員是否必須掌握復雜的組件技術來加速HTML頁面的訪問?答案是:不一定!事實上,關于HTML和DHTML有很多技巧,這些技巧原則上很簡單,也很容易使用網頁加...

  • 筆記本本地連接沒了,筆記本本地連接沒有了怎么辦

    筆記本本地連接沒了,筆記本本地連接沒有了怎么辦 相關圖片筆記本怎么設置本地連接有很多筆記本電腦用戶向小編反映,他們經常發現筆記本電腦的本地連接丟失。但是,不同的是沒有本地連接,有時我們可以正常上網,有時我們不能上網。發...

關注微信

变脸官网查询