版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
學(xué)海無涯苦作舟1書山有路勤為徑雪山高坡上才能找到雪蓮青藏高原上才能采挖蟲草才可能有豐厚寶藏等著你萬里外深海眾人難至的海島2藏寶圖?IT精英成長路線圖源頭:HTML手機(jī)移動(dòng)網(wǎng)頁H5(主要成分HTML5)3Web編程技術(shù)縱覽___前端(臺(tái))和后端(臺(tái))工程師CJ2EE—JavaEEJ2SEJava網(wǎng)絡(luò)基礎(chǔ)J2EEWeb開發(fā)JSP、ServletJavaBean、EJBJ2EE框架技術(shù)Struts、HibernateSpring、AjaxJSFhtml、CSS、JavaScript數(shù)據(jù)庫AccessSQLServerOracle、MySQLJDBC-ODBC數(shù)據(jù)庫SQLServerOracle、MySQLJDBCC/S編程B/S—Web編程ASPASP.NETC#PHP靜態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁4網(wǎng)絡(luò)編程C/S模式與
B/S模式5網(wǎng)頁制作2023/5/22網(wǎng)頁制作軟件的學(xué)習(xí)過程
1.網(wǎng)頁制作軟件的學(xué)習(xí)過程網(wǎng)頁的學(xué)習(xí)過程可以掌握一個(gè)從簡(jiǎn)單的HTML開始、從低級(jí)到高級(jí)、從局部到整體的原則:(1)從一個(gè)頁面開始,利用學(xué)習(xí)Office應(yīng)用軟件的經(jīng)驗(yàn),熟悉掌握一般頁面的排版布局。例如正常文字的修飾排版、表格的處理,圖形圖像的處理等。(2)進(jìn)一步學(xué)習(xí)超鏈接的各類方式,樣式表的使用,動(dòng)態(tài)網(wǎng)頁的制作,框架的設(shè)計(jì),表單的使用等。(3)進(jìn)一步學(xué)習(xí)網(wǎng)站的總體規(guī)劃與設(shè)計(jì)。7index索引Index.htm默認(rèn)首頁、目錄頁(主頁、封面)2023/5/222023/5/22新建立的網(wǎng)站文件夾
一般新建立的網(wǎng)站都有兩個(gè)文件夾:_private存放個(gè)私人的文件,其它用戶在瀏覽器不可訪問Image(影像;肖像)存放圖片文件2023/5/22網(wǎng)站的文件夾
網(wǎng)站還可以有更多文件夾:midi(迷笛,數(shù)碼音響)存放數(shù)碼音響文件video(錄像、視頻)存放視頻影片文件11最簡(jiǎn)單網(wǎng)頁Index.htm默認(rèn)首頁、目錄頁12HTMLHyperTextMarkupLanguage超文本鏈接標(biāo)示語言13最簡(jiǎn)單網(wǎng)頁<HTML><HEAD><TITLE>小伙伴們,歡迎光臨!</TITLE>
</HEAD><BODY>
<H1>小伙伴們,歡迎光臨!</H1></BODY>
</HTML>2023/5/22網(wǎng)頁設(shè)計(jì)軟件
直接利用HTML來進(jìn)行網(wǎng)頁的設(shè)計(jì),編寫的效率極低。而專業(yè)的網(wǎng)頁設(shè)計(jì)軟件提供了一個(gè)不用編寫代碼的所見之所得的網(wǎng)頁設(shè)計(jì)環(huán)境。1.網(wǎng)頁設(shè)計(jì)三劍客網(wǎng)頁設(shè)計(jì)軟件Dreamweaver、Flash、Fireworks合稱網(wǎng)頁三劍客,其中Dreamweaver主要是進(jìn)行網(wǎng)頁網(wǎng)站的設(shè)計(jì),F(xiàn)lash主要是進(jìn)行平面動(dòng)畫的處理,F(xiàn)ireworks主要是進(jìn)行圖像的處理,三者相互配合,相得益彰,是目前比較流行的功能強(qiáng)大的網(wǎng)頁設(shè)計(jì)軟件。2.FrontPageFrontPage是微軟公司(Microsoft)開發(fā)的網(wǎng)頁設(shè)計(jì)軟件,它擁有與微軟Office家族其它成員的完美接口以及相類似的界面,相對(duì)于初學(xué)者,F(xiàn)rontPage比Dreamweaver更容易學(xué)習(xí)和掌握。15網(wǎng)頁制作軟件
FrontPage200316網(wǎng)頁制作軟件FrontPage20031FrontPage2003概述2網(wǎng)頁基本元素編輯3網(wǎng)頁布局4表單應(yīng)用5網(wǎng)站發(fā)布及管理171FrontPage2003概述7.1.1功能特點(diǎn)7.1.2窗口界面7.1.3基本操作181.1功能特點(diǎn)FrontPage讓初學(xué)者無需掌握HTML語言或具備編程基礎(chǔ)知識(shí)便能夠編寫出界面優(yōu)美、功能完善的網(wǎng)站。下面簡(jiǎn)單介紹一下FrontPage的特點(diǎn)。“所見即所得”的網(wǎng)頁編輯環(huán)境,也就是說,用戶在網(wǎng)頁編輯窗口中看到的效果就是瀏覽器中顯示的效果。易學(xué)易用的操作界面,像其它Office套件一樣,在FrontPage中集成了大量的網(wǎng)頁模板和網(wǎng)站向?qū)В層脩艉芊奖憧旖莸刂谱鞒鰞?yōu)美的網(wǎng)頁。功能強(qiáng)大的新版本FrontPage融合了網(wǎng)頁管理、網(wǎng)頁編輯、網(wǎng)頁發(fā)布和網(wǎng)站維護(hù)等多種功能,利用FrontPage制作的網(wǎng)頁支持最新的網(wǎng)頁標(biāo)準(zhǔn),比如DHTML、XML、CSS2等等。191.2窗口界面FrontPage2003主界面主要由菜單欄、工具欄、視圖欄、狀態(tài)欄、主編輯窗口和任務(wù)窗格等6大部分組成。窗口介紹2023/5/22FrontPage2003的操作界面
啟動(dòng)FrontPage2003,就進(jìn)入如圖所示的界面。類似于Windows中的其它應(yīng)用程序,各部分的功能分別如下:
圖9-1FrontPage2003的操作界面221.“網(wǎng)頁”視圖選擇【視圖】【網(wǎng)頁】命令,打開網(wǎng)頁視圖。網(wǎng)頁視圖是FrontPage中最常用的工作界面,網(wǎng)頁的創(chuàng)建、編輯、預(yù)覽等基本操作都是在此視圖中進(jìn)行的。網(wǎng)頁視圖窗口底部有4個(gè)標(biāo)簽:“設(shè)計(jì)”、“拆分”、“代碼”和“預(yù)覽”,它們分別控制著網(wǎng)頁的4種顯示模式。在設(shè)計(jì)模式下,能夠以“所見即所得”的方式編輯網(wǎng)頁;在代碼模式下,可以查看或編輯網(wǎng)頁的HTML的源代碼;在預(yù)覽模式下,可以預(yù)覽網(wǎng)頁的效果;在拆分模式下,能夠同時(shí)編輯網(wǎng)頁和查看或編輯網(wǎng)頁的HTML的源代碼。2023/5/22圖9-2網(wǎng)頁視圖241.“網(wǎng)頁”視圖252.“文件夾”視圖單擊“視圖”欄中的“文件夾”圖標(biāo)或選擇【視圖】【文件夾】命令,打開文件夾視圖。在文件夾視圖下,網(wǎng)站顯示為一組文件和文件夾。在此視圖下可以對(duì)網(wǎng)站中的文件夾和各種文件進(jìn)行管理。263.“報(bào)表”視圖單擊“視圖”欄中的“報(bào)表”圖標(biāo)或選擇【視圖】【報(bào)表】命令,打開報(bào)表視圖。通過報(bào)表視圖,可以在運(yùn)行報(bào)表查詢后分析網(wǎng)站內(nèi)容。274.“導(dǎo)航”視圖單擊“視圖”欄中的“導(dǎo)航”圖標(biāo)或選擇【視圖】【導(dǎo)航】命令,打開導(dǎo)航視圖。導(dǎo)航視圖用于管理網(wǎng)站中各網(wǎng)頁的層次關(guān)系結(jié)構(gòu)圖??梢酝ㄟ^鼠標(biāo)將結(jié)構(gòu)圖中的網(wǎng)頁拖到新位置來改變鏈接結(jié)構(gòu)。285.“超鏈接”視圖單擊“視圖”欄中“超鏈接”圖標(biāo)或選擇【視圖】【超鏈接】命令。超鏈接視圖用于管理網(wǎng)站中網(wǎng)頁的超鏈接。296.“任務(wù)”視圖單擊“視圖”欄中的“任務(wù)”圖標(biāo)或選擇【視圖】【任務(wù)】命令,可打開任務(wù)視圖。任務(wù)視圖可以實(shí)現(xiàn)網(wǎng)站任務(wù)的管理。網(wǎng)站的任務(wù)是指網(wǎng)站管理人員維護(hù)網(wǎng)站的任務(wù),包括網(wǎng)頁的更新和網(wǎng)站的檢查等。307.“遠(yuǎn)程網(wǎng)站”視圖可以使用“遠(yuǎn)程網(wǎng)站”視圖發(fā)布整個(gè)網(wǎng)站,或有選擇地發(fā)布個(gè)別文件。還可以在兩個(gè)或多個(gè)位置之間同步文件,即確保包含相同內(nèi)容的網(wǎng)站都包含最新的更改。317.1.3基本操作1.網(wǎng)站的規(guī)劃2.網(wǎng)站的基本操作3.網(wǎng)頁的基本操作321.網(wǎng)站的規(guī)劃首先要明確建立網(wǎng)站的目的。其次要明確網(wǎng)站的瀏覽者群。最后要考慮到如何能夠便于網(wǎng)站的日常維護(hù)。332.網(wǎng)站的基本操作1)創(chuàng)建網(wǎng)站創(chuàng)建一個(gè)Web網(wǎng)站有兩種方法。第一種方法是利用FrontPage的Web網(wǎng)站模板和向?qū)?,這種方法操作簡(jiǎn)單、速度快,比較適合建立大、中型的Web網(wǎng)站。第二種方法是逐個(gè)地創(chuàng)建網(wǎng)頁文件,然后創(chuàng)建它們之間的鏈接關(guān)系,這種方法適合于網(wǎng)頁數(shù)量不多的小型網(wǎng)站。使用FrontPage模板創(chuàng)建網(wǎng)站的步驟:?jiǎn)?dòng)FrontPage應(yīng)用程序;選擇【文件】【新建…】命令,打開“新建”任務(wù)窗格;選擇網(wǎng)站模板,在“新建網(wǎng)站”欄選擇“由一個(gè)網(wǎng)頁組成的網(wǎng)站…”,打開“網(wǎng)站模板”對(duì)話框,在“指定新網(wǎng)站的位置”文本框中輸入新網(wǎng)站的位置及名稱,然后單擊“確定”按鈕。342)關(guān)閉網(wǎng)站選擇【文件】【關(guān)閉網(wǎng)站】命令。關(guān)閉網(wǎng)站即關(guān)閉網(wǎng)站及該網(wǎng)站下的所有網(wǎng)頁。3)打開網(wǎng)站選擇【文件】【打開網(wǎng)站】命令,“打開網(wǎng)站”對(duì)話框。選擇網(wǎng)站名稱,然后單擊“打開”按鈕。2.網(wǎng)站的基本操作353.網(wǎng)頁的基本操作1)新建網(wǎng)頁在FrontPage2003中可以直接創(chuàng)建一個(gè)空白網(wǎng)頁,也可以利用網(wǎng)頁模板和網(wǎng)頁向?qū)韯?chuàng)建。在某網(wǎng)站中創(chuàng)建新網(wǎng)頁,在此網(wǎng)站的文件夾視圖和導(dǎo)航視圖方式下單擊視圖窗口右上角的“新建網(wǎng)頁”按鈕。創(chuàng)建不屬于某網(wǎng)站的新網(wǎng)頁,在任何視圖方式下,選擇【文件】【新建…】命令,打開“新建”任務(wù)窗格,可在新建任務(wù)窗格中,選擇一種合適的模板新建網(wǎng)頁;或者單擊常用工具欄上的“新建”按鈕。362)打開網(wǎng)頁打開當(dāng)前網(wǎng)站中的網(wǎng)頁,在任何視圖中雙擊該網(wǎng)頁圖標(biāo)或文件名即可打開網(wǎng)頁。打開其它網(wǎng)站中的網(wǎng)頁,選擇【文件】【打開】命令,在“打開文件”對(duì)話框中選擇具體網(wǎng)頁文件打開。3)保存網(wǎng)頁保存當(dāng)前網(wǎng)站中的網(wǎng)頁,單擊工具欄中的保存按鈕,或【文件】【保存】命令即可。如果網(wǎng)頁中有圖片,則會(huì)彈出“保存嵌入式文件”對(duì)話框,提示保存圖片文件。保存不屬于當(dāng)前網(wǎng)站中的網(wǎng)頁,則需要指定保存路徑。4)關(guān)閉網(wǎng)頁選擇【文件】【關(guān)閉】命令。這種方式關(guān)閉的僅是當(dāng)前網(wǎng)頁,要注意與關(guān)閉網(wǎng)站的區(qū)別。3.網(wǎng)頁的基本操作2023/5/22圖9-5普通網(wǎng)頁2023/5/22選擇菜單【文件】→【保存】,將進(jìn)入網(wǎng)頁另存對(duì)話框,在相應(yīng)位置填上相應(yīng)的jys,然后單擊【保存】按鈕,一個(gè)名為jys.htm的網(wǎng)頁文件便設(shè)計(jì)完畢。設(shè)計(jì)過程中,請(qǐng)注意“保存類型”,通過選擇保存類型列表框中的類型,你可以將網(wǎng)頁文件轉(zhuǎn)換在其它各種類型的文件。2023/5/22網(wǎng)頁另存對(duì)話框40使用FrontPage,以鼠標(biāo)右鍵方式,打開老網(wǎng)頁進(jìn)行編輯
也可啟動(dòng)MicrosoftOfficeWord2007或者WPS2019來編輯網(wǎng)頁選菜單【文件】→【另存為】進(jìn)入另存對(duì)話框,填上相應(yīng)文件名注意“保存類型”必須要選*.html;*.htm最后單擊【保存】按鈕432網(wǎng)頁基本元素編輯7.2.1
文本編輯7.2.2圖像編輯7.2.3超鏈接創(chuàng)建7.2.4Web組件442.1文本編輯
1.文本添加2.設(shè)置段落和文本格式3.插入水平線4.設(shè)置網(wǎng)頁屬性451.文本添加在網(wǎng)頁中添加文本與在Word中添加文本的操作基本相同。此外,在網(wǎng)頁中輸入文本時(shí),如果已經(jīng)達(dá)到網(wǎng)頁邊界,則文本會(huì)自動(dòng)回滾到下一行繼續(xù)輸入,這種換行方式并不會(huì)產(chǎn)生新行或是一個(gè)新段落,隨著網(wǎng)頁邊界的變化或是編輯窗口的調(diào)整,F(xiàn)rontPage2003會(huì)自動(dòng)調(diào)整這個(gè)回滾位置。按下<Shift>+<Enter>鍵將產(chǎn)生新行,即換行,新行與上一行之間沒有回滾關(guān)系。按下<Enter>鍵產(chǎn)生一個(gè)新段落。462.設(shè)置段落和文本格式可以使用格式工具欄(如圖7.2.1所示)或“字體”和“段落”對(duì)話框?qū)ξ谋竞投温涞母袷竭M(jìn)行設(shè)置。其操作方法跟Word基本相同。473.插入水平線為了修飾頁面,明顯區(qū)分開標(biāo)題與正文,可選擇【插入】【水平線】命令在當(dāng)前光標(biāo)點(diǎn)插入一條水平線。雙擊水平線或選擇【格式】【屬性】命令彈出“水平線屬性”對(duì)話框,可對(duì)水平線的高度、寬度、顏色和對(duì)齊方式進(jìn)行設(shè)置。484.設(shè)置網(wǎng)頁屬性網(wǎng)頁屬性是一個(gè)網(wǎng)頁整體的屬性,記錄關(guān)于網(wǎng)頁的非頁面部分的相關(guān)信息。適當(dāng)?shù)脑O(shè)置可以達(dá)到增加網(wǎng)頁美觀和縮減網(wǎng)頁文件大小的效果。方法一:右擊頁面,從彈出的快捷菜單中選擇“網(wǎng)頁屬性”命令。方法二:選擇【格式】【背景】命令;方法三:選擇【文件】【屬性】命令;492.2圖像編輯1.插入圖像2.編輯圖像3.設(shè)置圖片屬性501.插入圖像插入一幅關(guān)于“背景”的剪貼畫的操作步驟:將插入點(diǎn)定位在需要插入圖片的位置;選擇【插入】【圖片】【剪貼畫】命令,打開“剪貼畫”任務(wù)窗格,如圖所示;在任務(wù)窗格中,用戶可在“搜索文字”文本框中輸入剪貼畫的關(guān)鍵字“背景”;單擊“搜索”按鈕開始搜索,在任務(wù)窗格下方列表框中列出了搜索到的剪貼畫;單擊剪貼畫右側(cè)的下三角按鈕,彈出剪貼畫的快捷菜單,單擊“插入”命令即可。51插入來自文件的圖片的操作步驟:將插入點(diǎn)定位在需要插入圖片的位置;選擇【插入】【圖片】【來自文件】命令,或單擊“常用”工具欄中“插入圖片”按鈕;打開“圖片”對(duì)話框,選擇所需文件,單擊“插入”按鈕。1.插入圖像522.編輯圖像在網(wǎng)頁中插入圖像后,還可對(duì)圖像進(jìn)行編輯。用鼠標(biāo)單擊選取圖像,在屏幕上就會(huì)出現(xiàn)“圖片”工具欄。利用“圖片”工具欄可對(duì)圖片進(jìn)行旋轉(zhuǎn)、剪裁、沖蝕,設(shè)置凹凸效果、透明背景色,調(diào)整亮度、對(duì)比度以及在圖片中加入文字等。選中圖片后,拖動(dòng)圖片周圍的控點(diǎn)可改變圖片大小。533.設(shè)置圖片屬性選定所需的圖片,單擊鼠標(biāo)右鍵,從快捷菜單中選擇“圖片屬性”命令,彈出“圖片屬性”對(duì)話框。在對(duì)話框的“常規(guī)”和“外觀”兩個(gè)選項(xiàng)卡中進(jìn)行設(shè)置,可以做出各種圖文混排的頁面效果。547.2.3超鏈接創(chuàng)建1.選擇鏈接的載體2.選擇鏈接的目標(biāo)3.指定目標(biāo)窗口4.驗(yàn)證超級(jí)鏈接5.設(shè)置超鏈接的狀態(tài)顏色6.圖像映射55超鏈接是從一個(gè)網(wǎng)頁指向另一個(gè)目的地的指針,這個(gè)目的地可以是另一個(gè)網(wǎng)頁或同一個(gè)網(wǎng)頁中的其他位置,也可以是一個(gè)電子郵件、一個(gè)Word文檔或者是一個(gè)應(yīng)用程序。創(chuàng)建超鏈接的步驟:選擇鏈接的載體;選擇鏈接的目標(biāo);指定目標(biāo)窗口。7.2.3超鏈接創(chuàng)建561.選擇鏈接的載體鏈接的載體是顯示鏈接的頁面元素。將鼠標(biāo)指針移到包含超鏈接的文字或圖像上時(shí),鼠標(biāo)指針就會(huì)變成形狀,當(dāng)瀏覽者單擊此文本串或圖像,瀏覽器將打開相應(yīng)地址的網(wǎng)頁。選定鏈接的載體后,單擊“常用”工具欄上“插入超鏈接”按鈕,或選擇【插入】【超級(jí)鏈】命令,打開“插入超鏈接”對(duì)話框。572.選擇鏈接的目標(biāo)鏈接的目標(biāo)包括原有文件或網(wǎng)頁、本文檔中的位置(書簽)、新建文檔、電子郵件等。根據(jù)跳轉(zhuǎn)目的地的不同,網(wǎng)頁中鏈接可分為4種類型。1)原有文件或網(wǎng)頁直接跳轉(zhuǎn)到已經(jīng)存在的某一網(wǎng)頁或文件。如果是本網(wǎng)站內(nèi)的網(wǎng)頁,可用光標(biāo)在“插入超鏈接”對(duì)話框列表文件中選擇。如果是本機(jī)上其它網(wǎng)站中的網(wǎng)頁,則選擇“插入超鏈接”對(duì)話框中的按鈕,或從“查找范圍”中選擇相應(yīng)的網(wǎng)站,再選擇所需網(wǎng)頁。如果是Internet上其它網(wǎng)站的某一網(wǎng)頁,可單擊按鈕打開瀏覽器找到該頁面后,該頁面的網(wǎng)址會(huì)自動(dòng)出現(xiàn)在“地址”欄;也可以直接在地址欄文本框中輸入該網(wǎng)頁的地址。582)本文檔中的位置是直接跳轉(zhuǎn)到本網(wǎng)頁中的某書簽標(biāo)志的位置。要進(jìn)行此鏈接操作,必須先用【插入】【書簽】命令在網(wǎng)頁中的某些位置插入書簽;在“插入超鏈接”對(duì)話框中單擊“本文檔中的位置”,然后選擇該網(wǎng)頁上的書簽,將會(huì)在書簽位置創(chuàng)建一超鏈接。2.選擇鏈接的目標(biāo)593)新建文檔可以將當(dāng)前選中的鏈接的載體鏈接到一個(gè)新建的頁面上。單擊“新建文檔”按鈕,在“新建文檔名稱”欄填寫該網(wǎng)頁的名稱。2.選擇鏈接的目標(biāo)604)單擊“電子郵件地址”按鈕,在“電子郵件地址”欄填寫目標(biāo)電子郵件地址,可創(chuàng)建一個(gè)到電子郵件的鏈接。2.選擇鏈接的目標(biāo)613.指定目標(biāo)窗口鏈接的目標(biāo)網(wǎng)頁選定后,可以指定目標(biāo)網(wǎng)頁是在本窗口中顯示還是在新打開的瀏覽器窗口中顯示。單擊“插入超鏈接”對(duì)話框中“目標(biāo)框架”按鈕,打開“目標(biāo)框架”對(duì)話框,。指定鏈接的目標(biāo)網(wǎng)頁的目標(biāo)窗口,默認(rèn)是在當(dāng)前窗口中打開目標(biāo)網(wǎng)頁?!肮玫哪繕?biāo)區(qū)”列表框選項(xiàng)含義如下:相同框架:鏈接的目標(biāo)網(wǎng)頁顯示在包含該超鏈接的同一個(gè)框架內(nèi)。整頁:將框架展開為全窗口后顯示鏈接的目標(biāo)網(wǎng)頁。新建窗口:另外打開一個(gè)瀏覽窗口顯示鏈接的目標(biāo)網(wǎng)頁。父框架:如果是一頁套一頁的框架網(wǎng)頁,選擇父框架可以回到上一層框架顯示鏈接的目標(biāo)網(wǎng)頁。624.驗(yàn)證超級(jí)鏈接上面的三個(gè)步驟設(shè)置完成后,超鏈接的創(chuàng)建便完成了。接下來有必要驗(yàn)證一下超鏈接是否正確,可用如下的方法來驗(yàn)證:網(wǎng)頁的設(shè)計(jì)視圖中,把鼠標(biāo)移到已經(jīng)創(chuàng)建了超鏈接的載體上(文字、圖像),鼠標(biāo)變成手狀,按下<Ctrl>鍵,然后單擊鼠標(biāo),便可驗(yàn)證鏈接目的地。在網(wǎng)頁的預(yù)覽視圖中,用鼠標(biāo)單擊創(chuàng)建了鏈接的載體,便可驗(yàn)證鏈接目的地。635.設(shè)置超鏈接的狀態(tài)顏色在瀏覽器中瀏覽網(wǎng)頁時(shí),已經(jīng)訪問過的超鏈接、尚未訪問過的超鏈接和正在訪問的超鏈接應(yīng)有不同的顏色顯示,使瀏覽者一目了然。設(shè)置超鏈接的狀態(tài)顏色方法:選擇【格式】【背景】命令,打開“網(wǎng)頁屬性”對(duì)話框。選中“背景”選項(xiàng)卡,對(duì)與超鏈接有關(guān)的部分進(jìn)行設(shè)置。646.圖像映射圖像映射也稱MAP技術(shù),是指在一幅圖像上建立不同形狀的熱點(diǎn)區(qū)域,每一個(gè)區(qū)域都是一個(gè)超鏈接。制作步驟如下:選定要制作圖像映射的圖片,此時(shí)屏幕會(huì)顯示出“圖片”工具欄,在“圖片”工具欄上有5個(gè)專門是為圖像映射功能設(shè)置的。單擊“圖片”工具欄中一種熱點(diǎn)形式,并將光標(biāo)移到要制作圖像映射的圖片中,光標(biāo)變成鉛筆形狀然后用鼠標(biāo)在圖片中拖動(dòng)出一個(gè)矩形區(qū)域。松開鼠標(biāo)后,出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框,從中可設(shè)置該熱點(diǎn)的鏈接目標(biāo)。2023/5/22使用圖像熱點(diǎn)圖像熱點(diǎn)可以使得超鏈接更加活潑和豐富。Frongpage2003的圖片工具欄中提供了橢圓形、矩形和多邊形三類熱點(diǎn)制作工具。實(shí)際上還可以利用圖片工具欄中的文本按鈕把文字插入到在圖片中,并建立相應(yīng)的超鏈接,形成文本熱點(diǎn)。2023/5/22圖9-15廬山旅游圖2023/5/22如圖所示的廬山旅游圖,可以按如下步驟操作:(1)利用橢圓形熱點(diǎn)工具在圖中錦銹谷周圍劃一橢圓形熱點(diǎn),并建立相應(yīng)的超鏈接;(2)在仙人洞周圍作一矩形熱點(diǎn),并建立相應(yīng)的超鏈接。其它的風(fēng)景點(diǎn)也可以作類似熱點(diǎn);(3)利用文本按鈕輸入“廬山風(fēng)景”,作建立相應(yīng)的超鏈接,形成文本熱點(diǎn)。當(dāng)熱點(diǎn)建立好以后,再瀏覽該網(wǎng)頁時(shí),單擊任何一個(gè)熱點(diǎn),都可以鏈接到相應(yīng)的網(wǎng)頁頁面。682.4Web組件1.字幕2.交互式按鈕3.橫幅廣告4.計(jì)數(shù)器691.字幕字幕是在瀏覽器中能夠水平滾動(dòng)的文字,其文字具有動(dòng)態(tài)特點(diǎn),可以用于發(fā)布網(wǎng)站的通知和提示信息。其操作步驟如下:選擇插入字幕的位置;選擇【插入】【W(wǎng)eb組件】命令;選擇“選擇一種效果”列表中的“字幕”選項(xiàng),然后單擊“完成”按鈕,打開“字幕屬性”對(duì)話框;設(shè)置字幕屬性,如在文本框中輸入滾動(dòng)的文字,選擇滾動(dòng)方向等,然后單擊“確定”按鈕,便完成滾動(dòng)字幕的插入;
切換到預(yù)覽視圖,觀看滾動(dòng)字幕的效果。更改字幕屬性,在網(wǎng)頁設(shè)計(jì)視圖下雙擊該字幕,或選中字幕單擊鼠標(biāo)右鍵,在彈出的快捷菜單中選擇“字幕屬性…”,便可彈出字幕屬性對(duì)話框。702.交互式按鈕交互式按鈕也稱懸停按鈕,是一種可以變化的按鈕。當(dāng)將鼠標(biāo)指針移到交互式按鈕上時(shí),它會(huì)變成新的樣子;當(dāng)鼠標(biāo)指針離開交互式按鈕時(shí),它又會(huì)自動(dòng)變回到原來的樣子。交互式按鈕一般用在導(dǎo)航條中。在網(wǎng)頁中插入交互式按鈕操作步驟如下:選擇插入交互式按鈕的位置;選擇【插入】【W(wǎng)eb組件】命令,打開如上圖所示的對(duì)話框;選擇“選擇一種效果”列表中的“交互式按鈕”選項(xiàng),然后單擊“完成”按鈕,打開“交互式按鈕”屬性對(duì)話框;設(shè)置交互式按鈕屬性,然后單擊“確定”按鈕,便完成交互式按鈕的插入;切換到預(yù)覽視圖,查看交互式按鈕的效果。71設(shè)置交互式按鈕的屬性:在按鈕選項(xiàng)卡下,在“文本”屬性框中輸入按鈕上顯示的文字;在“鏈接”屬性框中設(shè)置鏈接的目的地;按鈕列表框中選擇按鈕的樣式等。在字體選項(xiàng)卡下,可以設(shè)置按鈕上的文字的相關(guān)格式。在圖像選項(xiàng)卡下,可以設(shè)置按鈕上顯示的圖像及屬性。更改交互式按鈕屬性,在網(wǎng)頁設(shè)計(jì)視圖下雙擊該按鈕,或選中該按鈕右擊,在彈出的快捷菜單中選擇“按鈕屬性…”命令,便可彈出交互式按鈕屬性對(duì)話框。2.交互式按鈕723.橫幅廣告橫幅廣告的動(dòng)畫形式就像一幅不停變換著的廣告牌。在網(wǎng)頁中插入橫幅廣告的操作步驟:選擇插入位置;選擇【插入】【橫幅廣告管理器】命令,打開“橫幅廣告管理器屬性”對(duì)話框;選擇屬性對(duì)話框中的“添加…”按鈕,添加要顯示的圖片(至少要有兩幅圖片才能變換顯示);高度、寬度屬性設(shè)置圖片的顯示框的大?。贿^渡效果設(shè)置圖片的顯示效果。切換到預(yù)覽視圖,查看橫幅廣告的效果。734.計(jì)數(shù)器計(jì)數(shù)器可以統(tǒng)計(jì)并顯示網(wǎng)頁的訪問次數(shù)。你可以在網(wǎng)站的主頁上添加一個(gè)計(jì)數(shù)器,這樣就可以知道該網(wǎng)站的訪問次數(shù)。只有在發(fā)布網(wǎng)站之后,才可以對(duì)計(jì)數(shù)器進(jìn)行測(cè)試以確保它可以正確工作。提示:計(jì)數(shù)器要能正常工作,網(wǎng)站必須發(fā)布到安裝有FrontPageServerExtensions(支持在FrontPage中進(jìn)行創(chuàng)作并能擴(kuò)展Web服務(wù)器功能的程序和腳本的集合)、SharePointTeamServicesv1.0fromMicrosoft或MicrosoftWindowsSharePointServices2.0的Web服務(wù)器上。743網(wǎng)頁布局7.3.1表格布局7.3.2框架布局753.1表格布局1.創(chuàng)建表格
2.編輯表格3.設(shè)置表格和單元格的屬性4.實(shí)例76表格在網(wǎng)頁制作中的作用有以下兩個(gè)方面:用于顯示有一定格式的數(shù)據(jù)和信息。用于對(duì)整個(gè)網(wǎng)頁版面的控制,組織數(shù)據(jù)、排列網(wǎng)頁元素(文本、圖像、視頻等)的空間位置。表格在網(wǎng)頁中的使用比較多,表格的引入使網(wǎng)頁變得整齊美觀。許多漂亮的網(wǎng)頁都是利用表格實(shí)現(xiàn)布局的。3.1表格布局771.創(chuàng)建表格在FrontPage中表格的創(chuàng)建和編輯同在Word中相似。創(chuàng)建表格的基本方法:使用“常用”工具欄中的“插入表格”按鈕。選擇【表格】【插入】【表格】命令。選擇【表格】【繪制表格】命令。用鼠標(biāo)控制畫筆繪制任意表格。插入表格:選擇“表格”菜單中的“插入表格”命令,或者選擇“表格/手繪表格”命令,或者使用工具欄中的“插入表格”按鈕,在插入點(diǎn)處建立一個(gè)兩列多行的表格,以便下面使用表格定位文字和圖片。
返回792.編輯表格表格繪制好后,根據(jù)需要對(duì)表格中的文字進(jìn)行編輯,對(duì)行高列寬進(jìn)行調(diào)整,對(duì)表格的行、列、單元格可作增加或刪除操作。具體操作與在Word中一樣。繪制表格
-擦子-擦-表格線813.設(shè)置表格和單元格的屬性
在表格內(nèi)任意位置右擊,在出現(xiàn)快捷菜單中選擇“表格屬性”選項(xiàng),或選擇【表格】【表格屬性】【表格】命令,彈出“表格屬性”對(duì)話框,可對(duì)表格的布局、邊框和背景進(jìn)行設(shè)置。在某一單元格內(nèi)右擊,在彈出的快捷菜單中選擇“單元格屬性”命令,彈出“單元格屬性”對(duì)話框,可對(duì)該單元格的布局、邊框和背景進(jìn)行設(shè)置。2023/5/22圖9-37單元格屬性表格和單元格的屬性
833.2框架布局1.創(chuàng)建框架網(wǎng)頁2.框架的編輯3.框架屬性的設(shè)置84框架是一種特殊的網(wǎng)頁,它將瀏覽器窗口劃分成功能獨(dú)立的幾個(gè)部分,每部分是一個(gè)框架,每個(gè)框架分別對(duì)應(yīng)于一個(gè)獨(dú)立的網(wǎng)頁,這樣可以在一個(gè)窗口上同時(shí)觀看到多個(gè)頁面組成的信息界面。各個(gè)框架之間還可以設(shè)置超鏈接。很多網(wǎng)站都具有這樣的結(jié)構(gòu)。3.2框架布局2023/5/22嵌入式框架網(wǎng)頁861.創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁的步驟如下所示:選擇【文件】【新建…】命令,出現(xiàn)“新建網(wǎng)頁或網(wǎng)站”任務(wù)窗格;單擊“其他網(wǎng)頁模板”命令,彈出“網(wǎng)頁模板”對(duì)話框;選中“框架網(wǎng)頁”選項(xiàng)卡,在列表中選擇所需的模板。單擊“確定”按鈕,建立了一個(gè)新的框架網(wǎng)頁。87在框架網(wǎng)頁每一個(gè)子窗口中都有兩個(gè)按鈕,單擊“新建網(wǎng)頁”按鈕,一個(gè)新的空白網(wǎng)頁就會(huì)出現(xiàn)在框架中;單擊“設(shè)置初始網(wǎng)頁…”按鈕,彈出“插入超鏈接”對(duì)話框,在對(duì)話框中選擇某一目標(biāo)網(wǎng)頁作為此框架的初始網(wǎng)頁。1.創(chuàng)建框架網(wǎng)頁88框架網(wǎng)頁的保存。單擊“常用”工具欄上的“保存”按鈕,則會(huì)彈出“另存為”對(duì)話框。則依次把框架網(wǎng)頁中的“新建網(wǎng)頁”保存完后,再保存“框架集文件”。對(duì)話框右側(cè)為框架示意圖,深藍(lán)色框突出顯示表示正在保存的框架。1.創(chuàng)建框架網(wǎng)頁892.框架的編輯對(duì)于已經(jīng)建立好的框架網(wǎng)頁,可以再對(duì)它進(jìn)行編輯,比如對(duì)某個(gè)框架再拆分或刪除,重新進(jìn)行框架布局。
1)拆分框架單擊選定要拆分的框架,選擇【框架】【拆分框架】命令,打開“拆分框架”對(duì)話框,根據(jù)需要選擇“拆分為列”或“拆分成行”。2)刪除框架先單擊選定要?jiǎng)h除的框架,再選擇【框架】【刪除框架】命令。903.框架屬性的設(shè)置選中需要設(shè)置的框架,選擇【框架】【框架屬性】命令;或者單擊鼠標(biāo)右鍵,從快捷菜單中選擇“框架屬性”菜單項(xiàng),打開“框架屬性”對(duì)話框?!翱蚣艽笮 庇邪俜直?、相對(duì)大小、象素值三種設(shè)置方式?!斑吘唷笨梢栽O(shè)置框架內(nèi)容和框架邊框之間的距離?!帮@示滾動(dòng)條”列表中各個(gè)選項(xiàng)表示:“需要時(shí)顯示”選項(xiàng),當(dāng)瀏覽器窗口太小不能放下框架的全部內(nèi)容時(shí),滾動(dòng)條就會(huì)出現(xiàn);“不顯示”選項(xiàng),無論什么情況,滾動(dòng)條都不會(huì)出現(xiàn);“始終顯示”選項(xiàng),滾動(dòng)條自始至終都會(huì)出現(xiàn),即使它們不需要時(shí)也會(huì)出現(xiàn)。顯示或隱藏框架周圍的邊框:?jiǎn)螕簟斑x項(xiàng)”右邊的“框架網(wǎng)頁…”按鈕,選中或清除“顯示邊框”復(fù)選框。914表單應(yīng)用7.4.1創(chuàng)建表單網(wǎng)頁7.4.2發(fā)布表單網(wǎng)頁924.1創(chuàng)建表單網(wǎng)頁創(chuàng)建表單網(wǎng)頁有兩種方法,一種是利用FrontPage提供的模板或向?qū)Э梢钥焖賱?chuàng)建表單網(wǎng)頁;另一種是使用表單域來定制表單。下面以插入表單域來定制表單為例,說明創(chuàng)建表單的操作方法:插入表單。選擇【插入】【表單】【表單】命令;或用鼠標(biāo)拖動(dòng)子菜單頂部就會(huì)出現(xiàn)“表單”工具欄,再單擊“表單”工具欄中的“表單”按鈕。此時(shí),會(huì)出現(xiàn)一個(gè)由虛線框表示的表單框,表單內(nèi)只有“提交”按鈕和“重置”按鈕。插入表單域。為了使表單中的每個(gè)表單域?qū)R,在創(chuàng)建表單域之前在表單中插入表格。然后依次插入各表單域。設(shè)置表單域?qū)傩?。表單網(wǎng)頁布局設(shè)計(jì)好以后,還需要對(duì)表單域?qū)傩赃M(jìn)行設(shè)置,才能使表單正常工作。93下面分別介紹按鈕、單行文本框、復(fù)選框表單域的屬性設(shè)置。在頁面中雙擊相應(yīng)的表單域,或右擊此表單域,彈出快捷菜單,選擇“表單域?qū)傩浴泵睿涂纱蜷_其屬性對(duì)話框,對(duì)該表單域進(jìn)行屬性設(shè)置。1)“按鈕屬性”對(duì)話框如圖所示?!爸?標(biāo)簽”設(shè)置按鈕上顯示的文字。按鈕的類型可設(shè)置按鈕的功能?!爸刂谩鳖愋桶粹o,可以清除表單內(nèi)的所有內(nèi)容,所有表單域都恢復(fù)原始設(shè)置?!疤峤弧鳖愋桶粹o,可以把訪問者填寫的表單內(nèi)容發(fā)送到表單按鈕指定的網(wǎng)頁或相關(guān)程序?!捌胀ā鳖愋桶粹o,用戶可調(diào)用自己編寫的程序處理表單中的數(shù)據(jù),定制表單功能。4.1創(chuàng)建表單網(wǎng)頁942)單行文本框的表單域適合訪問者做簡(jiǎn)單回答,如姓名、密碼、電話號(hào)碼等?!懊Q”屬性:用于設(shè)置該表單域的名稱,通過這個(gè)名稱表單與Web服務(wù)器才能進(jìn)行交流?!俺跏贾怠睂傩裕涸O(shè)置文本框中顯示的默認(rèn)值?!皩挾取睂傩裕涸O(shè)置文本框的寬度,但不會(huì)影響瀏覽者在文本框中可以輸入的文本數(shù)量?!懊艽a域”屬性:如果選擇“是”選項(xiàng)時(shí)文本框信息內(nèi)容將會(huì)以“*”表示。4.1創(chuàng)建表單網(wǎng)頁953)復(fù)選框提供訪問者設(shè)置多個(gè)選項(xiàng)的功能?!爸怠睂傩裕河脕砻枋鲈搹?fù)選框選中后所表示的含義,這是一個(gè)“布爾”值,例如:ON/OFF,True/False等;“初始狀態(tài)”屬性:用于設(shè)置復(fù)選框的初始狀態(tài),即打開網(wǎng)頁時(shí),復(fù)選框是否被選中。4.1創(chuàng)建表單網(wǎng)頁964.2發(fā)布表單網(wǎng)頁1.保存表單信息2.創(chuàng)建確認(rèn)表單網(wǎng)頁971.保存表單信息表單作為網(wǎng)頁中一種最重要的信息收集和交流工具,能夠幫助網(wǎng)站管理員收集信息,但是只有瀏覽者提交了表單結(jié)果后網(wǎng)站管理員才能收到信息。對(duì)于瀏覽者提交的表單結(jié)果,F(xiàn)rontPage都會(huì)以某一種方式保存起來。設(shè)置保存表單結(jié)果的步驟:在表單內(nèi)單擊鼠標(biāo)右鍵,從快捷菜單中選擇“表單屬性…”命令,彈出“表單屬性”對(duì)話框。設(shè)置表單屬性。在“將結(jié)果保存到”區(qū)域中選擇“發(fā)送到”選項(xiàng)。在“文件名稱”框中指定保存表單結(jié)果的文件路徑及文件名稱,將表單結(jié)果保存到某一個(gè)文件中。在“電子郵件地址”框中輸入收集表單結(jié)果的網(wǎng)站管理員的電子郵件地址。這樣每當(dāng)網(wǎng)站訪問者提交表單時(shí),網(wǎng)站管理員就可以接收到—份電子郵件信息。982.創(chuàng)建確認(rèn)表單網(wǎng)頁確認(rèn)表單網(wǎng)頁用于給瀏覽者反饋信息。瀏覽者提交表單以后,并不知道是否發(fā)送成功,這時(shí)需要反饋給瀏覽者確認(rèn)信息。確認(rèn)表單網(wǎng)頁是一種已經(jīng)設(shè)置好了的網(wǎng)頁,它將會(huì)依據(jù)網(wǎng)頁瀏覽者所填寫表單內(nèi)容的不同,而反饋不同的結(jié)果。創(chuàng)建確認(rèn)表單網(wǎng)頁的步驟:新建一網(wǎng)頁,并輸入確認(rèn)信息。設(shè)置表單屬性。插入確認(rèn)域選擇【插入】【W(wǎng)eb組件…】命令,打開“插入Web組件”對(duì)話框。在對(duì)話框的組件類型列表中選擇“高級(jí)控件”選項(xiàng),在對(duì)話框右列表中選擇“確認(rèn)域”選項(xiàng),打開“確認(rèn)域?qū)傩浴睂?duì)話框,輸入要確認(rèn)的表單域名稱name(即提交網(wǎng)頁中的“姓名”表單域)。99保存表單確認(rèn)網(wǎng)頁。將提交網(wǎng)頁與確認(rèn)網(wǎng)頁關(guān)聯(lián)起來。打開提交網(wǎng)頁,在表單域內(nèi)單擊右鍵,從彈出的快捷菜單中選擇“表單屬性…”選項(xiàng),在打開的“表單屬性”對(duì)話框中單擊“選項(xiàng)”按鈕,打開“保存表單結(jié)果的選項(xiàng)”對(duì)話框,在“確認(rèn)網(wǎng)頁”選項(xiàng)卡的“確認(rèn)網(wǎng)頁的URL(可選)”框中輸入確認(rèn)網(wǎng)頁的地址。提示:提交表單頁面和確認(rèn)表單頁面在網(wǎng)站發(fā)布以后才能使用。2.創(chuàng)建確認(rèn)表單網(wǎng)頁1007.5網(wǎng)站發(fā)布及管理7.5.1發(fā)布網(wǎng)站7.5.2管理網(wǎng)站1015.1發(fā)布網(wǎng)站發(fā)布網(wǎng)站信息,就是將網(wǎng)站中的所有文件傳送到在Internet上申請(qǐng)的地址空間或Web服務(wù)器中去。發(fā)布個(gè)人網(wǎng)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024至2030年移動(dòng)噴霧機(jī)項(xiàng)目投資價(jià)值分析報(bào)告
- 2024至2030年特效暗瘡痘消膏項(xiàng)目投資價(jià)值分析報(bào)告
- 2024至2030年油炸青刀豆項(xiàng)目投資價(jià)值分析報(bào)告
- 2024至2030年多段式波段開關(guān)項(xiàng)目投資價(jià)值分析報(bào)告
- 2024年度外聘講師企業(yè)內(nèi)部講師培養(yǎng)與認(rèn)證合同3篇
- 2024至2030年P(guān)C/PVC防霧鏡項(xiàng)目投資價(jià)值分析報(bào)告
- 些是買賣合同范例
- 2024年鋁音響托盤項(xiàng)目可行性研究報(bào)告
- 名貴木材采購合同范例
- 2024年萊卡棉彈力型女士內(nèi)衣項(xiàng)目可行性研究報(bào)告
- 裝修公司客戶服務(wù)部 客服類流程結(jié)點(diǎn)說明
- 機(jī)電工程規(guī)范
- 攝影器材借還管理登記表Excel模板
- 中國風(fēng)兒童滿月紀(jì)念相冊(cè)PPT模板
- 楊柳煤礦“三量”動(dòng)態(tài)變化情況分析報(bào)告(3)
- 醫(yī)療垃圾收集辦法及流程圖
- 復(fù)古中古風(fēng)非遺之蘇繡文化介紹PPT模板
- 大氣課程設(shè)計(jì)-—袋式除塵器
- 手衛(wèi)生流程圖
- 叉車自檢報(bào)告模板(1)
- 水泥攪拌樁水灰比及漿液用量計(jì)算表(自動(dòng)計(jì)算)
評(píng)論
0/150
提交評(píng)論