今天給各位分享web網(wǎng)頁(yè)模板簡(jiǎn)單的知識(shí)，其中也會(huì)對(duì)web頁(yè)面模板進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、簡(jiǎn)單網(wǎng)頁(yè)制作
• 2、如何寫(xiě)第一個(gè)屬于自己的Web頁(yè)面（Django）
• 3、一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)要怎么制作啊???
• 4、求一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)頁(yè)html模板
• 5、如何用 Dreamweaver 批量做web網(wǎng)頁(yè)

簡(jiǎn)單網(wǎng)頁(yè)制作

一、FrontPage 2003簡(jiǎn)介

FrontPage 2003是由Microsoft公司推出的Office 2003組件之一。FrontPage 2003的啟動(dòng)與退出、文件的打開(kāi)與保存與Office系列中其他軟件相同。FrontPage 2003啟動(dòng)后，主窗口如圖6-61所示，菜單部分外貌與Office中的其他軟件相似。

與以往的版本相比，F(xiàn)rontPage 2003有以下幾個(gè)新功能：

（1）自定義瀏覽器分辨率預(yù)覽檢查；

（2）描摹圖像；

（3）層功能；

（4）插入交互式按鈕；

（5）行為的應(yīng)用；

（6）使用網(wǎng)頁(yè)重定向；

圖6-61 FrontPage 2003啟動(dòng)界面

圖6-62“新建”任務(wù)窗格

（7）檢查網(wǎng)頁(yè)錯(cuò)誤；

（8）優(yōu)化HTML代碼；

（9）規(guī)劃頁(yè)面布局。

二、制作簡(jiǎn)單網(wǎng)頁(yè)

我們?cè)谇懊嬉呀?jīng)學(xué)會(huì)了用Word進(jìn)行排版，其實(shí)你已經(jīng)會(huì)制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè)了，只需將原來(lái)排好的Word文檔，另存時(shí)選擇保存類型為“Web頁(yè)（*.htm；*.html）”就可保存為一個(gè)網(wǎng)頁(yè)文件。

下面我們用FrontPage 2003制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè)。步驟如下：

1.啟動(dòng)FrontPage 2003

選擇“開(kāi)始”/“所有程序”/“Microsoft Office”/“FrontPage 2003”命令，打開(kāi)如圖6-61所示的界面。

圖6-63 新的空白的網(wǎng)頁(yè)

圖6-64“網(wǎng)頁(yè)模板”對(duì)話框

2.建立新網(wǎng)頁(yè)

選擇“文件”/“新建…”菜單命令，打開(kāi)“新建”任務(wù)窗格，如圖6-62所示。單擊“空白網(wǎng)頁(yè)”，也可以通過(guò)工具欄上的“新建”按鈕建立一個(gè)新的空白的網(wǎng)頁(yè)。如圖6-63所示。

如果要根據(jù) Microsoft FrontPage 的模板創(chuàng)建網(wǎng)頁(yè)，單擊“其他網(wǎng)頁(yè)模板”，打開(kāi)如圖6-64所示的“網(wǎng)頁(yè)模板”對(duì)話框，再單擊所需模板類型的選項(xiàng)卡，然后單擊某個(gè)模板。

3.輸入如下內(nèi)容

圖6-65

4.編輯操作

網(wǎng)頁(yè)中的文本編輯操作與Word的編輯操作類似。

本例中，將“我的第一個(gè)網(wǎng)頁(yè)”應(yīng)用“標(biāo)題一”樣式，并設(shè)為隸書(shū)，水平居中；將“你好！歡迎光臨”應(yīng)用“標(biāo)題二”樣式，將其余內(nèi)容應(yīng)用“普通”樣式，并將行距設(shè)為“1.5倍行距”，設(shè)置完成后效果如圖6-65所示。

5.保存網(wǎng)頁(yè)文件

選擇“文件”/“保存”命令，彈出“另存為”對(duì)話框，指定保存位置和文件名，然后單擊“保存”按鈕即可完成操作。

三、制作多媒體個(gè)人主頁(yè)

我們以制作一個(gè)簡(jiǎn)易的個(gè)人網(wǎng)站為例，進(jìn)一步學(xué)習(xí)使用FrontPage 2003。

1.規(guī)劃

網(wǎng)站規(guī)劃包括規(guī)劃網(wǎng)站的風(fēng)格、網(wǎng)站的結(jié)構(gòu)和網(wǎng)站的配色等，是對(duì)網(wǎng)站的整體定位。本例設(shè)置了6個(gè)欄目，包括首頁(yè)、自薦信、個(gè)人簡(jiǎn)歷、榮譽(yù)證書(shū)、才藝展示、聯(lián)系方式，鏈接的文件名分別為index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。當(dāng)然也可以結(jié)合自己情況進(jìn)行修改。頁(yè)面布局如圖6-66所示。

2.建立網(wǎng)站

在FrontPage 2003中，所謂網(wǎng)站，就是一些網(wǎng)頁(yè)和程序的集合，各個(gè)網(wǎng)頁(yè)之間通過(guò)超鏈接聯(lián)系在一起，所有的網(wǎng)頁(yè)和文件保存在一個(gè)文件夾中，通過(guò)網(wǎng)站把這些文件和網(wǎng)頁(yè)統(tǒng)一起來(lái)。本地網(wǎng)站是指本地硬盤上用來(lái)存放整個(gè)網(wǎng)站的所有文檔的文件夾。遠(yuǎn)程網(wǎng)站是指網(wǎng)絡(luò)服務(wù)器上的網(wǎng)站，供用戶瀏覽。

建立一個(gè)新網(wǎng)站，事實(shí)上就是建立一個(gè)單獨(dú)的文件夾，然后在這個(gè)文件夾中建立各個(gè)網(wǎng)頁(yè)文件，并且把它們鏈接在一起。

網(wǎng)頁(yè)制作可以在新建網(wǎng)站中完成，也可以像前面那樣單獨(dú)新建一個(gè)網(wǎng)頁(yè)。建議用新建網(wǎng)站的方法來(lái)制作網(wǎng)頁(yè)。

下面我們首先創(chuàng)建新的FrontPage網(wǎng)站：

（1）在“文件”菜單上，單擊“新建”，出現(xiàn)如圖 6-66 所示的“新建”任務(wù)窗格。

圖6-66

（2）在“新建”任務(wù)窗格中，單擊“由一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站”。

（3）在“網(wǎng)站模板”對(duì)話框中，在“常規(guī)”選項(xiàng)卡下，單擊需要的網(wǎng)站模板，本例選擇“只有一個(gè)網(wǎng)頁(yè)的網(wǎng)站”，并在指定新網(wǎng)的位置欄中，鍵入或選擇新網(wǎng)的路徑及名稱，這里我們將默認(rèn)的mysite改為myhome，如圖6-67所示，然后單擊“確定”按鈕，出現(xiàn)創(chuàng)建新網(wǎng)站對(duì)話框，完成站點(diǎn)創(chuàng)建，完成后如圖6-68所示。左邊一列是文件夾列表，可以通過(guò)右鍵快捷菜單新建文件夾，對(duì)文件或文件夾進(jìn)行復(fù)制、刪除、重命名等操作。

圖6-67“網(wǎng)站模板”對(duì)話框

圖6-68

3.準(zhǔn)備素材

將本例所需的圖片動(dòng)畫(huà)素材復(fù)制到網(wǎng)站內(nèi)的images文件夾下。

4.制作主頁(yè)頁(yè)眉

在“網(wǎng)頁(yè)”視圖中的文檔窗口底部，單擊“設(shè)計(jì)”

。

在文件夾列表中雙擊index.htm，打開(kāi)該網(wǎng)頁(yè)并進(jìn)入編輯狀態(tài)，開(kāi)始首頁(yè)制作。

（1）設(shè)置網(wǎng)頁(yè)大小 在“視圖”菜單上，指向“網(wǎng)頁(yè)大小”，單擊

設(shè)置網(wǎng)頁(yè)大小。

（2）設(shè)置網(wǎng)頁(yè)背景在“網(wǎng)頁(yè)”視圖中的文檔窗口底部，單擊“設(shè)計(jì)”

，右擊網(wǎng)頁(yè)編輯區(qū)，在彈出菜單中單擊“網(wǎng)頁(yè)屬性”項(xiàng)，彈出“網(wǎng)頁(yè)屬性”對(duì)話框，在標(biāo)題框內(nèi)輸入“歡迎訪問(wèn)小慧的個(gè)人電子簡(jiǎn)歷”；單擊“格式”選中格式選項(xiàng)卡，選中背景欄下的“背景圖片”，并單擊“瀏覽”按鈕選擇背景圖片。如圖6-69所示。單擊“確定”按鈕完成網(wǎng)頁(yè)背景設(shè)置。也可在“格式”菜單上單擊“背景”來(lái)設(shè)置。

（3）插入一個(gè)一行兩列的表格 方法與在Word中插入表格相同。

在顯示設(shè)計(jì)視圖模式下，通過(guò)常用工具欄的“插入表格”按鈕，或在“插入”菜單上，指向“插入”，在級(jí)聯(lián)菜單中單擊“表格”；右擊插入的表格，在彈出菜單中單擊“表格屬性”，并將單元格襯距、單元格間距和粗細(xì)欄均設(shè)為0，如圖6-70所示，單擊“確定”按鈕。

圖6-69 網(wǎng)頁(yè)屬性

圖6-70 表格屬性

（4）在第一個(gè)單元格內(nèi)插入圖片 將插入點(diǎn)放在第一個(gè)單元格，在“插入”菜單上，指向“圖片”，再單擊“來(lái)自文件”。找到要添加的文件（網(wǎng)站下images文件夾下的logo.gif），如圖6-71所示，然后單擊“插入”。

更簡(jiǎn)單的方法是從文件夾列表拖動(dòng)圖片文件到編輯區(qū)指定的位置即可。

（5）在第二個(gè)單元格內(nèi)插入Flash動(dòng)畫(huà) 單擊第二個(gè)單元格，在“插入”菜單上，指向“圖片”，再單擊“Flash影片”。彈出與圖6-71相似的“選擇文件”對(duì)話框，找到要添加的文件（網(wǎng)站下images文件夾下的banner_007.swf），然后單擊“插入”。

（6）在第一個(gè)表格下插入一個(gè)1行1列的表格 同樣將單元格襯距、單元格間距和粗細(xì)欄均設(shè)為0，設(shè)置好背景顏色，本例是選的其他顏色，如圖6-72所示，在“值”文本框中輸入Hex={C1，E8，C9}。

（7）制作滾動(dòng)字幕 在第二個(gè)表格的單元格內(nèi)單擊，在“插入”菜單上，單擊“Web組件”，彈出插入Web組件對(duì)話框，默認(rèn)選中的是字幕，因此單擊“完成”按鈕，彈出字幕屬性對(duì)話框，在“文本”框內(nèi)輸入：衷心感謝您垂閱我的簡(jiǎn)歷，單擊“確定”按鈕。如圖6-73所示。

圖6-71 插入圖片對(duì)話框

圖6-72“其他顏色”對(duì)話框

5.制作正文和頁(yè)腳

（1）在第二個(gè)表格下插入一個(gè)1行2列的表格，同樣將單元格襯距、單元格間距設(shè)為0，但粗細(xì)設(shè)為1，暗邊框設(shè)為白色，亮邊框則設(shè)為其他顏色，在如圖6-72所示的“值”文本框中輸入Hex={99，CC，F(xiàn)F}。

（2）設(shè)置單元格背色。右擊此表格的第一個(gè)單元格，在彈出菜單中單擊“單元格屬性”，彈出如圖6-74所示的對(duì)話框，背景設(shè)為其他顏色，在如圖6-72所示的“值”文本框中輸入Hex={F1，F(xiàn)5，F(xiàn)C}。同樣方法將第二個(gè)單元格設(shè)為白色。

圖6-73 字幕屬性對(duì)話框

圖6-74 單元格屬性

（3）調(diào)整單元格寬度，使之與第一個(gè)表格相同。

（4）在第一個(gè)單元格內(nèi)插入一個(gè)8行1列的表格，并將單元格襯距、單元格間距和粗細(xì)欄均設(shè)為0。在單元格屬性中將單元格對(duì)齊屬性設(shè)為水平居中，垂直居中，行高調(diào)整為40。

在剛插入的表格第二行內(nèi)插入圖片homepage.gif，并在其后輸入“首 頁(yè)”；在第三行內(nèi)插入圖片sub_dot.gif，并在其后輸入“自 薦信”，后面四行插入的圖片均為sub_dot.gif，輸入的文字依次為“個(gè)人簡(jiǎn)歷”、“榮譽(yù)證書(shū)”、“才藝展示”、“聯(lián)系方式”。

（5）在表格三的第二個(gè)單元格內(nèi)插入一個(gè)3行3列的表格，并將單元格襯距、單元格間距和粗細(xì)欄均設(shè)為0。將中間一列調(diào)寬一些。

在該表格第一行第二列中輸入“自薦信”，在第二行第二列輸入自薦信的內(nèi)容。設(shè)為1.5倍行距。

（6）在表格三后面插入一個(gè)2行1列的表格，并將單元格襯距、單元格間距和粗細(xì)欄均設(shè)為0；并且第一個(gè)單元格背景色設(shè)為與表格二背景色相同，在第二個(gè)單元格內(nèi)輸入“聯(lián)系電話：023-683568XX E-mail：xiaohui＠163.com”并設(shè)為居中。

6.鏈接網(wǎng)站文件

選中要建立超鏈接的文字或圖像，單擊常用工具欄中的“插入超鏈接”按鈕或在“插入”菜單上單擊“超鏈接”，或者是右擊選中區(qū)域并單擊“超鏈接”，均可打開(kāi)“插入超鏈接”對(duì)話框。如圖6-75所示。

圖6-75“插入超鏈接”對(duì)話框

（1）選中“首頁(yè)”，單擊常用工具欄中的

按鈕，在打開(kāi)的如圖6-75所示的“插入超鏈接”對(duì)話框中，在“地址”框內(nèi)輸入index.htm，并單擊“確定”按鈕。

（2）用同樣的方法將“自薦信”鏈接到zijian.htm、“個(gè)人簡(jiǎn)歷”鏈接到j(luò)ianli.htm、“榮譽(yù)證書(shū)”鏈接到zhengshu.htm、“才藝展示”鏈接到zhanshi.htm、“聯(lián)系方式”鏈接到lianxi.htm。

7.保存文件，按F12鍵預(yù)覽網(wǎng)頁(yè)

四、制作本網(wǎng)站內(nèi)其他頁(yè)面

首先在文件夾列表中將 index.htm 復(fù)制 5個(gè)，分別重命名為 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。只需將每個(gè)文件中自薦信部分修改為相應(yīng)內(nèi)容即可，頁(yè)眉、超鏈接欄和頁(yè)腳均不變。

五、網(wǎng)站發(fā)布

當(dāng)我們完成上述內(nèi)容后，需將制作的網(wǎng)頁(yè)發(fā)布到Internet上的Web服務(wù)器中，才能供網(wǎng)上的訪問(wèn)者瀏覽。首先要到Internet服務(wù)提供商（ISP）那里申請(qǐng)購(gòu)買存放網(wǎng)頁(yè)的空間和域名，以前有很多網(wǎng)站（如網(wǎng)易等）都提供免費(fèi)的個(gè)人主頁(yè)存放空間，現(xiàn)在相對(duì)較少了，中國(guó)學(xué)生網(wǎng)仍在提供50M免費(fèi)空間服務(wù)，大家可到去申請(qǐng)一個(gè)免費(fèi)空間。

發(fā)布網(wǎng)站可以使用專門的FTP工具。但為了給用戶提供方便，F(xiàn)rontPage 2003內(nèi)置了網(wǎng)頁(yè)發(fā)布功能，利用它，只需進(jìn)行簡(jiǎn)單的設(shè)置，就可以輕松地完成網(wǎng)站發(fā)布任務(wù)。FrontPage 2003中的遠(yuǎn)程網(wǎng)站視圖可以幫助我們將整個(gè)網(wǎng)站或單獨(dú)的文件和文件夾發(fā)布到任何位置：擴(kuò)展的 Web 服務(wù)器、支持文件傳輸協(xié)議（FTP）或基于 Web 的分布式創(chuàng)作和版本控制（WebDAV）的Web服務(wù)器或文件系統(tǒng)中的某個(gè)位置。

下面我們利用FrontPage 2003及文件傳輸協(xié)議（FTP）發(fā)布網(wǎng)站，步驟如下：

1.打開(kāi)FrontPage網(wǎng)站

在“文件”菜單中單擊“打開(kāi)網(wǎng)站”或單擊工具欄上的“打開(kāi)”按鈕邊上的下拉標(biāo)志，從下拉菜單中選“打開(kāi)網(wǎng)站”，在彈出的“打開(kāi)網(wǎng)站”對(duì)話框中找到需要打開(kāi)的網(wǎng)站并單擊“打開(kāi)”按鈕。

2.轉(zhuǎn)至“遠(yuǎn)程網(wǎng)站”視圖

若要轉(zhuǎn)至該視圖，請(qǐng)單擊“網(wǎng)站”選項(xiàng)卡，然后單擊窗口底部的“遠(yuǎn)程網(wǎng)站”按鈕?；蛟凇耙晥D”菜單上，單擊“遠(yuǎn)程網(wǎng)站”。如圖6-76所示。

3.設(shè)置“遠(yuǎn)程網(wǎng)站屬性”

在文檔窗口頂部，單擊“遠(yuǎn)程網(wǎng)站屬性”。在彈出的對(duì)話框中，在“遠(yuǎn)程網(wǎng)站”選項(xiàng)卡上，在“遠(yuǎn)程 Web服務(wù)器類型”下，單擊“FTP”。在“遠(yuǎn)程網(wǎng)站位置”框中，鍵入自己所選定的遠(yuǎn)程網(wǎng)站的地址及 FTP 協(xié)議（本例中輸入“”），如圖6-77所示。單擊“確定”按鈕，在打開(kāi)的“要求提供用戶名和密碼”對(duì)話框中輸入ISP提供的用戶名和密碼，單擊“確定”按鈕。如圖6-78所示。

圖6-76

圖6-77

4.發(fā)布網(wǎng)站

通過(guò)單擊窗口右下角的“發(fā)布網(wǎng)站”按鈕即可發(fā)布所有文件。也可發(fā)布單個(gè)文件，在本地網(wǎng)站選擇一個(gè)文件，然后單擊“本地到遠(yuǎn)程”按鈕

。如圖6-79所示。

圖6-78

圖6-79

如何寫(xiě)第一個(gè)屬于自己的Web頁(yè)面（Django）

????????上期（超實(shí)用搭建個(gè)人開(kāi)發(fā)Web網(wǎng)頁(yè)的軟件及配置基礎(chǔ)）已經(jīng)詳細(xì)的介紹了基于Django+MySQL+PyCharm組合配置的Web開(kāi)發(fā)的基礎(chǔ)架構(gòu)。這期帶讀者跟著作者寫(xiě)第一個(gè)屬于自己的Web頁(yè)面，同時(shí)跟作者同一個(gè)局域網(wǎng)的其它用戶也可以訪問(wèn)。

首先輸入python manage.py startapp myFamilyWeb (表示創(chuàng)建一個(gè)自己的Web頁(yè)面項(xiàng)目)，如圖1。

生成的myFamilyWeb里的目錄結(jié)構(gòu)里的含義如下：

外層的_init_.py文件標(biāo)識(shí)myFamilyWeb是一個(gè)Python包。

admin.py 用于將Model定義注冊(cè)到管理后臺(tái)，是Django Admin 應(yīng)用的配置文件。

apps.py用于應(yīng)用程序本身的配置。

migrations目錄用于存儲(chǔ)models.py文件中Model的定義及修改。

migrations/_init_.py文件標(biāo)識(shí)migrations是一個(gè)Python包。

models.py用于定義應(yīng)用中所需要的數(shù)據(jù)表。

tests.py文件用于編寫(xiě)當(dāng)前應(yīng)用程序的單元測(cè)試。

views.py文件用于編寫(xiě)應(yīng)用程序的視圖。

以上的介紹都是myFamilyWeb應(yīng)用的全部?jī)?nèi)容，后續(xù)需要做的就是填充對(duì)應(yīng)的service邏輯對(duì)外提供服務(wù)。如果就這么啟動(dòng)，就會(huì)發(fā)現(xiàn)如圖2一樣訪問(wèn)不了。

想要實(shí)現(xiàn)訪問(wèn)自己第一個(gè)Web頁(yè)面（myFamilyWeb），第一步是設(shè)置路由和在views.py增加一個(gè)可以訪問(wèn)的函數(shù)（圖3-圖6）。

配置模板和html（圖7-圖13）

配置寫(xiě)好了第一個(gè)最簡(jiǎn)單的Web頁(yè)面，啟動(dòng)服務(wù)器。。。（圖14）

在開(kāi)發(fā)者電腦上的瀏覽器訪問(wèn) （圖15）

（配置防火墻端口）（圖16）

設(shè)置允許多個(gè)主機(jī)訪問(wèn) （圖17）

在終端輸入ipconfig

回車找到IPv4 的地址：192.168.0.102 （圖18）

python manage.py runserver 0.0.0.0:8000 （這次啟動(dòng)的時(shí)候在后面添加0.0.0.0:8000）。

然后本地網(wǎng)絡(luò)中的其它計(jì)算機(jī)就可以在瀏覽器中訪問(wèn)你的 IP 地址了， （這個(gè)網(wǎng)址只能同一個(gè)局域網(wǎng)的主機(jī)可以訪問(wèn)）

之后就是好好去學(xué)習(xí)如何寫(xiě)html文件了。。。

一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)要怎么制作啊???

你可以用Photoshop來(lái)制作網(wǎng)頁(yè)模板，然后用Photoshop的切片工具把模板分割好，點(diǎn)文件→另存為web格式文件就可以把其存儲(chǔ)為一個(gè)網(wǎng)頁(yè)，然后需要怎么樣加工就要利用到網(wǎng)頁(yè)設(shè)計(jì)軟件了，如：Dreamweaver

,

Front

page

求一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)頁(yè)html模板

這種模板很多的，百度打開(kāi)一個(gè)網(wǎng)頁(yè)右鍵源代碼就能找到了。

html xmlns=""headmeta http-equiv="Content-Type" content="text/html; charset=gb2312"

meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon"

link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon"

link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon"

title{dede:global.cfg_webname/}/title

meta name="keywords" content="{dede:global.cfg_keywords/}"

meta name="description" content="{dede:global.cfg_description/}"

link href="{dede:global.cfg_templets_skin/}/style/style.css" rel="stylesheet" type="text/css"

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery-1.9.1.js"/script

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/theme_trust.js"/script

style type="text/css"

html,

body {

margin: 0;

padding: 0;

}

.iw_poi_title {

color: #CC5522;

font-size: 14px;

font-weight: bold;

overflow: hidden;

padding-right: 13px;

white-space: nowrap

}

.iw_poi_content {

font: 12px arial, sans-serif;

overflow: visible;

padding-top: 4px;

white-space: -moz-pre-wrap;

word-wrap: break-word

}

/style

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/main.js"/script

script

jQuery(document).ready(function() {

jQuery('#openSidebar').click(function() {

jQuery('.wrapper').toggleClass('openNav');

});

jQuery('#menu a').click(function() {

jQuery('.wrapper').removeClass('openNav');

});

});

/script

script type="text/javascript" src="{dede:global.cfg_templets_skin/}/api"/scriptscript type="text/javascript" src="{dede:global.cfg_templets_skin/}/getscript"/scriptlink rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/bmap.css"

style type="text/css"

html,

body,

wrapper {

height: 100%;

}

/style

/head

body

div class="wrapper"

div class="sidebar"

div class="clearfix k1120"

div class="navBox" id="openSidebar"

a href="javascript:void(0)" class="navOpen"/a

/div

div id="menu"

ul class="clearfix"

lia href="#home" class="nav_home current"span首頁(yè)br /bHome/b/span/a

/li

lia href="#services" class="nav_services"span服務(wù)范圍br /bServices/b/span/a

/li

lia href="#case" class="nav_case"span案例展示br /bCase/b/span/a

/li

lia href="#about" class="nav_about"span關(guān)于我們br /bAbout us/b/span/a

/li

lia href="#news" class="nav_news"span新聞動(dòng)態(tài)br /bNews/b/span/a

/li

lia href="#contact" class="nav_contact"span聯(lián)系我們br /bContact us/b/span/a

/li

/ul

/div

/div

/div

div class="pageMain"

div id="header"

div class="k1120 clearfix"a href="{dede:global.cfg_basehost/}" id="logo"logo/a

/div

/div

div id="home" class="scrol-page"

div class="banner"

div class="b_1" style="background-position: 50% 0px;"

div class="k1120 clearfix"

div class="b_pic"

div class="mac" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/mac.png"

/div

div class="iphone" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/iphone.png"

/div

div class="ipad" style="margin-top: 0px; opacity: 1;"img src="{dede:global.cfg_templets_skin/}/images/ipad.png"

/div

/div

div class="b_text" style="margin-top: 0px; opacity: 1;"

{dede:global.cfg_ggg/}

/div

/div

/div

/div

div class="banner"

如何用 Dreamweaver 批量做web網(wǎng)頁(yè)

1、創(chuàng)建模板頁(yè)面

最簡(jiǎn)單的辦法是將一個(gè)網(wǎng)頁(yè)另存為模板文件，通過(guò)執(zhí)行命令：File→Save as Template，DreamWeaver會(huì)在網(wǎng)站根目錄中建立一個(gè)模板文件夾——Templates來(lái)保存該模板。

當(dāng)然，也可以新建一個(gè)模板：Window→Templates，會(huì)出現(xiàn)的Templates面板，單擊右下角的New Template按鈕，輸入文件名，就建立了一個(gè)空模板;再單擊Open Template按鈕打開(kāi)該模板，保存后自動(dòng)存放于網(wǎng)站模板文件夾Templates中。

新建、打開(kāi)的模板頁(yè)面和普通的網(wǎng)頁(yè)沒(méi)什么兩樣，同樣可以加入表格、層、圖片、動(dòng)畫(huà)、腳本，設(shè)置頁(yè)面屬性等。

舉例：這里以制作一個(gè)模板為例來(lái)說(shuō)明。在該頁(yè)面中，我們希望左側(cè)的網(wǎng)站標(biāo)識(shí)圖和底部的導(dǎo)航圖出現(xiàn)在每個(gè)頁(yè)面中。其中標(biāo)識(shí)圖由兩幅圖片疊加而成，導(dǎo)航圖上的文字“最近更新”、“在線閱讀”、“打包下載”等劃分成幾個(gè)熱區(qū)分別鏈接到不同的文件，它們?cè)诿總€(gè)頁(yè)面中都不變。右上部的主頁(yè)面區(qū)和左下角彈出式選單按鈕下面的頁(yè)面說(shuō)明則各不相同。為了保持頁(yè)面整潔，我們用表格來(lái)布置這些元素。

準(zhǔn)確地說(shuō)它只是一個(gè)沒(méi)有可編輯區(qū)域的“準(zhǔn)模板”，下面再設(shè)定可編輯區(qū)域。

2、設(shè)定可編輯區(qū)域

設(shè)定模板可編輯區(qū)域，一般來(lái)說(shuō)有兩種方法。

新建可編輯區(qū)域：選擇命令：Modify→Template→New Editable Region。在某一空白區(qū)域中單擊后執(zhí)行該命令即可將該區(qū)域變?yōu)榭删庉媴^(qū)域。

標(biāo)記某一區(qū)域?yàn)榭删庉媴^(qū)域：選擇命令：Modify→Template→Mark Selectin as Editable Region。如果某區(qū)域已經(jīng)有一些文字，并且希望在以后新建的超文本文件中部分保留其內(nèi)容，先選中該區(qū)域再執(zhí)行標(biāo)記命令即可。

取消可編輯狀態(tài)：選擇命令：Modify→Template→Unmark Editable Region。執(zhí)行該命令后會(huì)彈出一個(gè)對(duì)話框，其中有當(dāng)前已有的可編輯區(qū)域列表，選中要取消的區(qū)域名稱，確認(rèn)即可。

舉例：在大片空白區(qū)中隨便單擊一下，執(zhí)行Modify→Template→New Editable Region命令，在彈出對(duì)話框中輸入名稱：Main;選中左下角本頁(yè)說(shuō)明下面的文字，執(zhí)行Modify→Template→Mark Selectin as Editable Region命令，輸入名稱：exp?？梢钥吹娇删庉媴^(qū)顯示為淺藍(lán)色，保存即完成模板制作。

二、使用模板

1、根據(jù)模板新建頁(yè)面

命令：File→New From Template。彈出對(duì)話框，從模板列表中選取模板，出現(xiàn)的新頁(yè)面中除可編輯區(qū)外均有淡黃色背景，是不能進(jìn)行修改的部分?？瞻椎腗ain編輯區(qū)可直接進(jìn)行插入表格、文字、圖片等操作，Exp編輯區(qū)保留有原來(lái)的文字，修改或重新編輯均可。

2、對(duì)一個(gè)已經(jīng)有內(nèi)容的頁(yè)面應(yīng)用模板

命令：Modify→Template→Apply Template to Page。選擇模板后還會(huì)彈出一個(gè)對(duì)話框，讓您選擇現(xiàn)有的孤立內(nèi)容保存到哪個(gè)可編輯區(qū)域(Choose Editable Region for Orphaned Content)。要是不想保留則可以選擇“(none)”。

舉例：我們先新建一個(gè)普通頁(yè)面，輸入：“CIW電腦工作室”，執(zhí)行Modify→Template→Apply Template to Page命令，選擇模板test，現(xiàn)有內(nèi)容保存區(qū)域選擇Main，確認(rèn)后可看到頁(yè)面自動(dòng)變成了模板頁(yè)的形式，而“CIW電腦工作室”這一行字就出現(xiàn)在主編輯窗口中。

3、更新模板以全面更新站點(diǎn)

基于某一模板建立了一些頁(yè)面后，對(duì)模板進(jìn)行修改后保存時(shí)，就會(huì)自動(dòng)彈出一個(gè)對(duì)話框，列出所有使用了該模板的頁(yè)面，詢問(wèn)是否要更新。

另外一種方法是執(zhí)行Modify→Template→Update Pages命令。從Update Pages對(duì)話框中選擇一個(gè)站點(diǎn)或站點(diǎn)的某一種模板(同一站點(diǎn)中可以使用多個(gè)模板)，單擊右側(cè)的Start按鈕，軟件會(huì)自動(dòng)搜索與模板相關(guān)聯(lián)的網(wǎng)頁(yè)并進(jìn)行更新。非常方便!

舉例：Test模板左側(cè)圖形中的“讀書(shū)破萬(wàn)站”圖片是用一個(gè)圖層疊加在另一幅圖片之上的，現(xiàn)在不想要它，同時(shí)還想將所有頁(yè)面中的該圖片均刪除。就可以打開(kāi)模板test.dwt，刪除該圖層，保存模板，單擊右側(cè)的“Update”按鈕即可。

注意：新建和使用模板前需定義站點(diǎn)。方法是，執(zhí)行命令：Site→Define Sites;指定站點(diǎn)名稱和本地根目錄(Local Root)。模板使用的是相對(duì)路徑，如果沒(méi)有指定網(wǎng)站在本地的位置，軟件就不能準(zhǔn)確找到并保存模板文件;并且應(yīng)用模板新建和更新頁(yè)面時(shí)，頁(yè)面中的超鏈接也不能隨頁(yè)面文件保存位置的不同而相應(yīng)變化。

web網(wǎng)頁(yè)模板簡(jiǎn)單的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于web頁(yè)面模板、web網(wǎng)頁(yè)模板簡(jiǎn)單的信息別忘了在本站進(jìn)行查找喔。