網(wǎng)頁(yè)制作基礎(chǔ)教程(Dreamweaver_CS3.ppt_第1頁(yè)
網(wǎng)頁(yè)制作基礎(chǔ)教程(Dreamweaver_CS3.ppt_第2頁(yè)
網(wǎng)頁(yè)制作基礎(chǔ)教程(Dreamweaver_CS3.ppt_第3頁(yè)
網(wǎng)頁(yè)制作基礎(chǔ)教程(Dreamweaver_CS3.ppt_第4頁(yè)
網(wǎng)頁(yè)制作基礎(chǔ)教程(Dreamweaver_CS3.ppt_第5頁(yè)
已閱讀5頁(yè),還剩70頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、、預(yù)備知識(shí)、學(xué)習(xí)的主要內(nèi)容、web文件的網(wǎng)頁(yè)通常也稱為HTML文件。大多數(shù)常見的網(wǎng)頁(yè)都是HTM或HTML后面的文件,也以CGI、ASP、PHP、JSP的后綴結(jié)尾。 學(xué)習(xí)的主要內(nèi)容、網(wǎng)頁(yè)分類根據(jù)生成方式,網(wǎng)頁(yè)可以大致分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)2種。 靜態(tài)網(wǎng)頁(yè)是網(wǎng)站建設(shè)初期常采用的形式,網(wǎng)站建設(shè)者將內(nèi)容設(shè)定為靜態(tài)網(wǎng)頁(yè),訪問者只能被動(dòng)閱覽網(wǎng)站建設(shè)者提供的網(wǎng)頁(yè)內(nèi)容。 學(xué)習(xí)的主要內(nèi)容,靜態(tài)網(wǎng)頁(yè)的特點(diǎn)網(wǎng)頁(yè)的內(nèi)容只有網(wǎng)頁(yè)設(shè)計(jì)師修改網(wǎng)頁(yè)的內(nèi)容才會(huì)變化。 無法與瀏覽網(wǎng)頁(yè)的用戶進(jìn)行交互。 學(xué)習(xí)的主要內(nèi)容是,動(dòng)態(tài)頁(yè)面網(wǎng)絡(luò)技術(shù)日新月異,很多頁(yè)面文件的擴(kuò)展名不再是. htm,而是. php、 asp等,這些都是使用動(dòng)態(tài)頁(yè)面

2、技術(shù)創(chuàng)建的。 特點(diǎn)動(dòng)態(tài)網(wǎng)頁(yè)基于數(shù)據(jù)庫(kù)技術(shù),可以大幅減少網(wǎng)站的維護(hù)工作量。 采用動(dòng)態(tài)web技術(shù)的網(wǎng)站提供更多功能,如用戶注冊(cè)、用戶登錄、搜索查詢、用戶管理、訂單管理等。 學(xué)習(xí)的主要內(nèi)容有: 1、html標(biāo)記語言2、網(wǎng)頁(yè)制作工具M(jìn)icrosoft FrontPage Netscape編輯器Dreamweaver、網(wǎng)站和網(wǎng)站設(shè)計(jì)基礎(chǔ)知識(shí)1、互聯(lián)網(wǎng)簡(jiǎn)介2、網(wǎng)頁(yè)資料那個(gè)縮短了人們之間的距離。 1、用戶可以通過互聯(lián)網(wǎng)概述、互聯(lián)網(wǎng)與訪問互聯(lián)網(wǎng)的任何計(jì)算機(jī)(郵件、聊天、通話等)進(jìn)行交流。 本節(jié)主要介紹互聯(lián)網(wǎng)的工作原理、互聯(lián)網(wǎng)開發(fā)的簡(jiǎn)單歷史以及提供的主要服務(wù)等基礎(chǔ)知識(shí),使用戶能夠大致理解互聯(lián)網(wǎng)。 1、互聯(lián)網(wǎng)概述

3、、互聯(lián)網(wǎng)機(jī)制互聯(lián)網(wǎng)是一種全球性的分組交換原理和基于TCP/IP的計(jì)算機(jī)網(wǎng)絡(luò)。 將信息分組化(分割成多個(gè)小數(shù)據(jù)包),以數(shù)據(jù)包為單位傳送。 互聯(lián)網(wǎng)進(jìn)行信息傳輸時(shí),主要有兩項(xiàng)任務(wù)。 一個(gè)是正確分割源文件,另一個(gè)是在目標(biāo)位置正確重新組織同一源文件的包。 第二,準(zhǔn)確地將分組發(fā)送到目的地。 1、互聯(lián)網(wǎng)概況、互聯(lián)網(wǎng)發(fā)展簡(jiǎn)史互聯(lián)網(wǎng)始于20世紀(jì)60年代。 1968年,基于分組交換原理的計(jì)算機(jī)網(wǎng)絡(luò)ARPANET。 1983年建立了TCP/IP協(xié)議,計(jì)算機(jī)通信有統(tǒng)一的標(biāo)準(zhǔn)。 這是計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展史上的里程碑,網(wǎng)絡(luò)從此進(jìn)入高速發(fā)展的時(shí)代。 1、因特網(wǎng)概述,因特網(wǎng)提供的主要服務(wù)1下載和上傳電子郵件2文件3信息查詢4文件傳

4、輸5聊天6BBS電子公告板7在線游戲8個(gè)人主頁(yè)空間9電子商務(wù),1、因特網(wǎng)概述、IP地址和域IP地址在因特網(wǎng)上的IP地址總共占32比特,通常用4個(gè)十進(jìn)制表示,各數(shù)字用小的點(diǎn)(.)分隔,例如“05”,這種記錄方法稱為“點(diǎn)數(shù)”符號(hào)法。 通常,網(wǎng)絡(luò)和連接到網(wǎng)絡(luò)的主機(jī)由IP地址標(biāo)識(shí)。1、互聯(lián)網(wǎng)概要、IP地址和域名2、域名將與網(wǎng)絡(luò)上的數(shù)字型IP地址對(duì)應(yīng)的文字型地址稱為域名。 TCP/IP包括域名服務(wù)(DNS )。 DNS通過“解析”過程將域名轉(zhuǎn)換為IP地址,或?qū)P地址轉(zhuǎn)換為域名。 名字比用點(diǎn)分隔的十進(jìn)制IP地址更容易記住。 計(jì)算機(jī)仍然使用IP地址,因此需要一種轉(zhuǎn)換兩者的方法。 D

5、NS使用查找表的方法將兩個(gè)值相關(guān)聯(lián)。、1、互聯(lián)網(wǎng)概述、IP地址和域名2、域名下表1-1列出了某些組織的域名命名規(guī)則和某些國(guó)家的域名命名規(guī)則。 1、互聯(lián)網(wǎng)概要1、互聯(lián)網(wǎng)概要、萬維網(wǎng)WWW WWW和瀏覽器的基本概念WWW是萬維網(wǎng)的縮寫,也稱為3W或者Web,中文名稱也稱為“萬維網(wǎng)”。 瀏覽器實(shí)際上是互聯(lián)網(wǎng)閱覽用的應(yīng)用程序,其主要作用是網(wǎng)頁(yè)的顯示和腳本的解釋。 1、網(wǎng)絡(luò)概要、萬維網(wǎng)WWW WWW和閱覽器的基本概念閱覽器種類很多,現(xiàn)在常用的有internet explorer (簡(jiǎn)稱ie )和Netscape兩種。 下面的圖1-2顯示了IE瀏覽器的工作界面。 1、互聯(lián)網(wǎng)概述1、互聯(lián)網(wǎng)提供的服務(wù)在互聯(lián)網(wǎng)

6、上理解并具體實(shí)現(xiàn)。 2 .瀏覽熟悉的網(wǎng)站,根據(jù)域名區(qū)分網(wǎng)站所屬的類型。2、網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)頁(yè)基本元素中常見的網(wǎng)頁(yè)元素包括文本、圖像、超鏈接、表格、導(dǎo)航欄、動(dòng)畫和交互表格。 2、網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)頁(yè)基本要素1文本2圖像和動(dòng)畫3聲音和動(dòng)畫4超鏈接5導(dǎo)航條6表7表8其他常見要素,2、網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)頁(yè)布局網(wǎng)頁(yè)是否精彩,查閱者2、對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)布局的基本概念初學(xué)者,首先要了解網(wǎng)頁(yè)布局的基本概念。 頁(yè)面大小分辨率為800600 :頁(yè)面顯示大小為780428像素分辨率為1024768 :頁(yè)面顯示大小為1007600像素。 2、網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)頁(yè)布局整體形式這里指的是整個(gè)網(wǎng)頁(yè)的圖像。 這個(gè)圖像應(yīng)該是整體,圖形和文字的結(jié)合

7、應(yīng)該是層疊的。 顯示屏和瀏覽器都是矩形的,但是對(duì)于頁(yè)面的形狀,設(shè)計(jì)者可以利用自然界的各種形狀和它們的組合(矩形、圓形、三角形、菱形等)。 2、網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)頁(yè)布局的一般步驟(1)基于創(chuàng)意網(wǎng)站內(nèi)容的整體風(fēng)格設(shè)計(jì)布局。 不要在意細(xì)節(jié),有輪廓就好。 (2)首先輸入內(nèi)容的步驟是在網(wǎng)頁(yè)上配置網(wǎng)站的標(biāo)志、廣告條、菜單、導(dǎo)航條、柜臺(tái)等主要內(nèi)容。 (3)細(xì)分在該步驟中,設(shè)定修正者能夠利用網(wǎng)頁(yè)編輯工具將草案制成簡(jiǎn)單的網(wǎng)頁(yè),但當(dāng)然對(duì)于各要素所占的比例也需要詳細(xì)的數(shù)字,以后能夠進(jìn)行修正。 2、在網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)布局原則構(gòu)想和設(shè)計(jì)過程中,設(shè)計(jì)師必須掌握以下幾個(gè)原則。 (1)平衡(2)對(duì)稱性(3)稀疏密度、2 .網(wǎng)頁(yè)設(shè)計(jì)、

8、網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局大致分為“國(guó)家”字體、角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、表紙型最上面:網(wǎng)站標(biāo)題和標(biāo)題廣告條,其次是網(wǎng)站主要內(nèi)容的左右:一些小內(nèi)容,中間:主要內(nèi)容,左右一起排到最后,最下面:網(wǎng)站基本信息,聯(lián)系方式,著作權(quán)表示等。 此布局是網(wǎng)絡(luò)上最常見的布局類型。 2、網(wǎng)頁(yè)設(shè)計(jì)、角型布局角型布局與上一個(gè)布局只是形式上的差異,其實(shí)很相似。 在這個(gè)布局上面有標(biāo)題和廣告橫幅,下面的左側(cè)有窄列的鏈接等內(nèi)容,右側(cè)有寬的正文,最下面也有幾個(gè)站點(diǎn)的輔助信息。 在這種布局中,左側(cè)通常是導(dǎo)航鏈接。 2、網(wǎng)頁(yè)的設(shè)計(jì),標(biāo)題正文型布局標(biāo)題正文型布局的最上面是標(biāo)題等,下面一般是正文,例如,一部分文章

9、頁(yè)和登錄頁(yè)等屬于這種類型。采用左右框架型布局左右框架型布局的網(wǎng)頁(yè)分為左、右2個(gè)部分,一般左邊是導(dǎo)航鏈接,有時(shí)在最上面有小的標(biāo)題和標(biāo)記,右邊是正文。 大多數(shù)大型論壇和網(wǎng)站教程都使用這種布局,并且有些個(gè)人和公司網(wǎng)站也喜歡這種布局。 2、網(wǎng)頁(yè)的設(shè)計(jì)、上下框架型布局上下框架型布局與左右框架型布局類似,不同之處僅在于該布局分為上下兩部分。 綜合框架型布局綜合框架型布局是左右框架型布局和上下框架型布局的結(jié)合,比較復(fù)雜,類似于角型布局,但只采用框架結(jié)構(gòu)。 紙型布局紙型布局一般出現(xiàn)在部分網(wǎng)站的主頁(yè)上,由幾個(gè)美麗的平面設(shè)計(jì)和幾個(gè)小動(dòng)畫組合而成,在頁(yè)面上放置幾個(gè)簡(jiǎn)單的鏈接或者只是“進(jìn)入”的鏈接,直接在照片上附加鏈

10、接2、網(wǎng)頁(yè)設(shè)計(jì)、配色原則網(wǎng)站給人的第一印象來自視覺,因此決定網(wǎng)站的顏色很重要。 不同的顏色組合有不同的效果,網(wǎng)站可以用不同的視覺效果吸引訪問者的注意力。 2、網(wǎng)頁(yè)設(shè)計(jì),一種顏色的形成,簡(jiǎn)單來說,顏色是視覺,是光線作用于眼睛的結(jié)果。 紅、綠、藍(lán)的光稱為三原色光。 2色特征色的基本特征主要有色相、亮度、彩度3種。 色調(diào)表示色彩的種類,亮度表示色彩的明亮度,彩度表示色彩的鮮明度。 2、網(wǎng)頁(yè)設(shè)計(jì)、配色原則3色的心理感覺自然界的顏色給人心留下不同的印象,產(chǎn)生不同的心理感覺。 例如,紅色是刺激性的顏色,有刺激效果,產(chǎn)生沖動(dòng)、憤怒、熱情、活力的感覺,2,網(wǎng)頁(yè)的設(shè)計(jì),配色原則4色的分類,可以根據(jù)顏色對(duì)人的心理

11、的影響分類如下。 暖色系:紅、橙、橙、黃等顏色使人感覺溫暖、和分、熱情。 中性系:黃綠色、綠色等顏色舒適和諧。 冷色系:青綠、青綠、藍(lán)等顏色使人感到安靜、涼爽、高雅。 2、網(wǎng)頁(yè)設(shè)計(jì),例如設(shè)計(jì)銷售冷食的虛擬商店,應(yīng)該使用消極沉著的顏色,心理上感到?jīng)鏊?制作休閑主題的個(gè)人網(wǎng)站時(shí),以海水為背景組合魚等,將網(wǎng)站的顏色設(shè)計(jì)成天藍(lán)色比較有效。 2、網(wǎng)頁(yè)設(shè)計(jì)、配色原則5色選擇與搭配,在網(wǎng)站制作時(shí),顏色選擇與搭配很重要。 一個(gè)網(wǎng)站的格調(diào)確實(shí),多取決于顏色的選擇和組合是否合適。 2、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)布局的常用技術(shù)(1) CSS (堆疊樣式表)布局CSS對(duì)初學(xué)者來說顯得有些復(fù)雜,但其確實(shí)是一種好的布局方法。 (2

12、)顯示布局的優(yōu)點(diǎn):可以處理不同對(duì)象而不用擔(dān)心不同對(duì)象之間的影響。 缺點(diǎn):使用過多的修訂者表會(huì)影響頁(yè)面的下載速度。 2、網(wǎng)頁(yè)設(shè)計(jì),(3)由于框架布局框架技術(shù)的兼容性問題,框架結(jié)構(gòu)的網(wǎng)頁(yè)不太受歡迎。 但是,在布局上,框架結(jié)構(gòu)是很好的布局方法。 (4)div css布局div css是階段性的,分布模式是任意的,2,網(wǎng)頁(yè)的設(shè)計(jì),1,在互聯(lián)網(wǎng)上看不同的網(wǎng)頁(yè),分析該網(wǎng)頁(yè)的構(gòu)成要素是什么。 2 .打開熟悉的網(wǎng)站,瀏覽網(wǎng)頁(yè),分析屬于哪種布局和顏色組合。 3 .根據(jù)自己的經(jīng)驗(yàn)和體會(huì),討論對(duì)網(wǎng)頁(yè)配色的看法。 3、網(wǎng)站設(shè)置修訂、網(wǎng)站設(shè)置修訂的主要任務(wù)以網(wǎng)站結(jié)構(gòu)設(shè)置修訂瀏覽器為客戶端的Web應(yīng)用開發(fā)系統(tǒng)測(cè)試和網(wǎng)站公

13、開。 3、站點(diǎn)設(shè)置修訂、站點(diǎn)類型確定門戶站點(diǎn)匯集大量?jī)?nèi)容,提供多種服務(wù)。比較有名的中文門戶網(wǎng)站有三種。 一種是像新浪、搜狐、互聯(lián)網(wǎng)交易那樣完全由國(guó)內(nèi)互聯(lián)網(wǎng)公司運(yùn)營(yíng)的網(wǎng)站,網(wǎng)站內(nèi)容除搜索引擎外,還有新聞、娛樂、游戲、文化、體育、健康、科技、財(cái)經(jīng)、教育等幾個(gè)版本,以及網(wǎng)上的郵件門戶第二類是國(guó)外投資的網(wǎng)站,如中文雅虎、美國(guó)在線等,網(wǎng)站內(nèi)容以新聞和娛樂為主的第三類是國(guó)內(nèi)傳統(tǒng)媒體經(jīng)營(yíng)的網(wǎng)站,以人民網(wǎng)、新華網(wǎng)、中央電視國(guó)際為代表,提供新聞和時(shí)事評(píng)論3、網(wǎng)站設(shè)置修訂、普及型網(wǎng)站這種網(wǎng)站包括企業(yè)網(wǎng)站、大學(xué)網(wǎng)站、政府網(wǎng)站和許多個(gè)人網(wǎng)站。 3、網(wǎng)站設(shè)計(jì)、電子商務(wù)系網(wǎng)站電子商務(wù)系網(wǎng)站分為B2B (業(yè)者對(duì)業(yè)者)和B2

14、C (業(yè)者對(duì)個(gè)人客戶) 2種,根據(jù)交易過程分為商品檢索、商品購(gòu)買、訂單支付3個(gè)階段。 3、網(wǎng)站設(shè)置修訂、電子商務(wù)類網(wǎng)站具有以下功能:商品選購(gòu)車在線交易功能商品交接、資金結(jié)算功能。 3、網(wǎng)站設(shè)計(jì)、媒體信息服務(wù)系網(wǎng)站媒體信息服務(wù)系網(wǎng)站是報(bào)社、雜志社、廣播電臺(tái)、電視臺(tái)等傳統(tǒng)媒體為確立自己的網(wǎng)絡(luò)形象,使服務(wù)對(duì)象更加容易設(shè)立的網(wǎng)站,主要功能是信息發(fā)布、電子出版、客戶在線事務(wù)管理站點(diǎn)事務(wù)管理站點(diǎn)是企業(yè)事業(yè)單位為了實(shí)現(xiàn)事務(wù)自動(dòng)化而設(shè)立的內(nèi)部站點(diǎn),包括以下主要功能模塊:事務(wù)管理、人力資源管理、財(cái)務(wù)資產(chǎn)管理和站點(diǎn)管理。 商業(yè)管理站點(diǎn)商業(yè)管理站點(diǎn)是在企業(yè)內(nèi)為了廣告和商品管理、顧客管理、合同管理、營(yíng)銷管理等目的而設(shè)

15、立的在線辦公平臺(tái)。 3、網(wǎng)站設(shè)計(jì)、網(wǎng)站主題確定網(wǎng)站使用的主要題材有:在線求職、在線聊天/ICQ、在線社區(qū)/討論/郵件列表、計(jì)算機(jī)技術(shù)、web/網(wǎng)站開發(fā)、娛樂網(wǎng)站、旅行、參考/信息、家庭/網(wǎng)站的主題小內(nèi)容漂亮的題材是自己擅長(zhǎng)的內(nèi)容,3、網(wǎng)站設(shè)計(jì)、網(wǎng)站名稱的確定網(wǎng)站名稱也是網(wǎng)站設(shè)計(jì)的一部分,是重要的要素。 例如,“計(jì)算機(jī)學(xué)習(xí)室”與“計(jì)算機(jī)之家”相比,后者更簡(jiǎn)潔。 “迷笛樂園”與“MIDI樂園”相比,后者的意思更加明確。 在選擇站點(diǎn)名稱時(shí),請(qǐng)注意以下三點(diǎn): 名稱的特色在于使名稱記得清楚,3、網(wǎng)站設(shè)計(jì)、CI(Corporate Identity )是指通過強(qiáng)化視覺效果的手段加深用戶對(duì)企業(yè)形象的印象。 例如,可口可樂擁有全球統(tǒng)一的標(biāo)志、顏色和產(chǎn)品包裝,令人印象深刻。 3、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)標(biāo)志(Logo ),首先需要設(shè)計(jì)師設(shè)計(jì)網(wǎng)站標(biāo)志(Logo )。 像商標(biāo)一樣,Logo是網(wǎng)站特色和內(nèi)涵的集中表現(xiàn)。 Logo可以是中文、字母、符號(hào)或圖案,也可以是動(dòng)物或人物等。 例如,新浪網(wǎng)作為L(zhǎng)ogo注重文字sina,體現(xiàn)了網(wǎng)站的敏銳和動(dòng)態(tài)特色。 3、網(wǎng)站設(shè)計(jì)、設(shè)計(jì)網(wǎng)站標(biāo)準(zhǔn)顏

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論