網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

第1章

網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)單擊此處添加副標(biāo)題目錄網(wǎng)站概述01網(wǎng)站規(guī)劃與布局02站點(diǎn)的建立和訪問(wèn)03HTML頁(yè)面的建立041.1網(wǎng)站概述1.1.1WWW服務(wù)WWW(WorldWideWeb)，也稱(chēng)為萬(wàn)維網(wǎng)，是一個(gè)基于超文本（Hypertext）方式的信息檢索工具，通過(guò)超鏈接任何資源都可以實(shí)現(xiàn)相互訪問(wèn)。WWW服務(wù)是目前Internet上最熱門(mén)的服務(wù)之一，其以交互式圖形界面，為成千上萬(wàn)的用戶(hù)提供強(qiáng)大的信息連接功能。萬(wàn)維網(wǎng)（WWW）中的這些文本、圖片、視頻等資源以網(wǎng)站為單位存放。一個(gè)網(wǎng)站由多個(gè)頁(yè)面以及圖形、音頻、視頻等各種資源組成，這些頁(yè)面之間通過(guò)超鏈接建立關(guān)聯(lián)。要訪問(wèn)網(wǎng)絡(luò)上的任何一個(gè)資源，需要提供資源的地址，這個(gè)地址，通常稱(chēng)為統(tǒng)一資源定位器，URL(uniformresourcelocator)。URL用于完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址，其組成如圖1-2所示：1.1.2URL和域名1.1.2URL和域名域名：指的是Internet上某一臺(tái)計(jì)算機(jī)或計(jì)算機(jī)組的名稱(chēng)，是企業(yè)或機(jī)構(gòu)等在互聯(lián)網(wǎng)上注冊(cè)的名稱(chēng)，是互聯(lián)網(wǎng)上識(shí)別企業(yè)或機(jī)構(gòu)的網(wǎng)絡(luò)地址。域名由兩組或兩組以上的ASCII或各國(guó)語(yǔ)言字符構(gòu)成，各組字符間由點(diǎn)號(hào)分隔開(kāi)，最右邊的字符組稱(chēng)為頂級(jí)域名。例如中，cn是頂級(jí)域名，edu是二級(jí)域名,以此類(lèi)推。其中，www表示主機(jī)名。域名系統(tǒng)的結(jié)構(gòu)如圖所示：域名系統(tǒng)（DNS）用于提供名字和IP地址之間的映射關(guān)系，有了這個(gè)映射關(guān)系，用戶(hù)在上網(wǎng)時(shí)不需要記住長(zhǎng)長(zhǎng)的數(shù)字地址（IP地址），而只需記住容易記憶的有特定規(guī)律的字符串即可。1.1.2URL和域名1.1.2URL和域名頂級(jí)域名（一級(jí)域名）分為三類(lèi)。第一類(lèi)是按地理模式：例如中國(guó)是cn，美國(guó)是us，日本是jp等；第二類(lèi)是按組織模式：com代表公司，net代表網(wǎng)絡(luò)機(jī)構(gòu)，org代表非盈利組織，edu用于教育機(jī)構(gòu)，gov代表政府部門(mén)，mil代表軍事部門(mén)；第三類(lèi)是新頂級(jí)域名，如通用的.xyz、代表“高端”的.top、代表“紅色”的.red、代表“人”的.men等一千多種。

1.1.2URL和域名域名需要通過(guò)域名代理商去注冊(cè)并購(gòu)買(mǎi)后才能夠使用。一個(gè)站點(diǎn)建立好以后，需要把站點(diǎn)放到網(wǎng)絡(luò)上，即申請(qǐng)網(wǎng)絡(luò)空間來(lái)存放站點(diǎn)，然后注冊(cè)域名，就有了網(wǎng)站的名字，別人可以通過(guò)域名訪問(wèn)到這個(gè)站點(diǎn)。這是一個(gè)網(wǎng)站從設(shè)計(jì)到能夠被訪問(wèn)的流程。靜態(tài)頁(yè)頁(yè)面。靜態(tài)頁(yè)面是用html語(yǔ)言構(gòu)造的，無(wú)法與使用者產(chǎn)生互動(dòng)的網(wǎng)頁(yè)。靜態(tài)頁(yè)面只能夠單純的顯示網(wǎng)頁(yè)內(nèi)容，無(wú)法針對(duì)不同的網(wǎng)頁(yè)瀏覽狀況做出實(shí)時(shí)響應(yīng)。也就是頁(yè)面一旦做好以后，其內(nèi)容是不會(huì)發(fā)生變化的。靜態(tài)頁(yè)面的擴(kuò)展名為.htm或.html。1.1.3靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面動(dòng)態(tài)頁(yè)面指的是包含HTML標(biāo)記和程序語(yǔ)言(ASP,JSP,PHP)，是在得到頁(yè)面請(qǐng)求之后動(dòng)態(tài)生成的頁(yè)面。動(dòng)態(tài)頁(yè)面可以根據(jù)用戶(hù)的請(qǐng)求生成不同的內(nèi)容，以實(shí)現(xiàn)和用戶(hù)的交換。動(dòng)態(tài)頁(yè)面的擴(kuò)展名為.asp、.aspx、.jsp和.php等。1.1.3靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面1.1.4動(dòng)態(tài)頁(yè)面開(kāi)發(fā)技術(shù)ASP:是微軟公司推出的用于Web應(yīng)用服務(wù)的一種編程技術(shù)。利用它可以產(chǎn)生和運(yùn)行動(dòng)態(tài)的、交互的、高性能的Web服務(wù)應(yīng)用程序。ASP的特點(diǎn)是簡(jiǎn)單易用，ASP使用的腳本語(yǔ)言為VBScript，簡(jiǎn)單易學(xué)，另外在配置方面，在電腦中安裝了IIS以后，ASP就可以正常使用，無(wú)須復(fù)雜配置。PHP:是一種服務(wù)器端的編程語(yǔ)言，類(lèi)似C的語(yǔ)法，可運(yùn)行在多種服務(wù)器上，例如Apache,Netscape和Microsoft的IIS等。PHP能夠支持諸多數(shù)據(jù)庫(kù)，如MSSQL

Server,MySql,Sybase,Oracle等。是一種跨平臺(tái)的服務(wù)器端嵌入式腳本語(yǔ)言，并且是完全免費(fèi)的。1.1.4動(dòng)態(tài)頁(yè)面開(kāi)發(fā)技術(shù)JSP:開(kāi)放的，跨平臺(tái)的結(jié)構(gòu)，可以運(yùn)行在所有的服務(wù)器上，使用java編程語(yǔ)言。JSP頁(yè)面由HTML和嵌入其中的Java代碼所組成。服務(wù)器收到來(lái)自客戶(hù)端的頁(yè)面請(qǐng)求后，首先找到所需要的頁(yè)面，運(yùn)行頁(yè)面中的java代碼后重新生成新的HTML頁(yè)面，再返回給客戶(hù)端的瀏覽器。JSP具備了Java技術(shù)的簡(jiǎn)單易用，完全的面向?qū)ο?，具有平臺(tái)無(wú)關(guān)性且安全可靠的特點(diǎn)。1.2網(wǎng)站規(guī)劃及布局1.2.1網(wǎng)站的結(jié)構(gòu)規(guī)劃網(wǎng)站欄目規(guī)劃網(wǎng)站的欄目是一個(gè)網(wǎng)站的導(dǎo)航，好的欄目規(guī)劃不僅可以加快網(wǎng)站開(kāi)發(fā)進(jìn)程、方便網(wǎng)站后期維護(hù)和管理，同時(shí)還能提供有效、便捷的導(dǎo)航，這是一個(gè)站點(diǎn)吸引用戶(hù)并在諸多站點(diǎn)中勝出的必備條件。對(duì)網(wǎng)站欄目的規(guī)劃，要從網(wǎng)站的整體出發(fā)，對(duì)網(wǎng)站內(nèi)容進(jìn)行綜合的凝練和概述后，制定各級(jí)目錄，在規(guī)劃過(guò)程中，需要遵循以下幾個(gè)基本的原則:從用戶(hù)需求出發(fā)，主題突出?？梢詫⒅黝}按照一定的規(guī)則進(jìn)行分類(lèi)，設(shè)計(jì)出分層的欄目，注意主欄目的個(gè)數(shù)在整個(gè)欄目中應(yīng)占據(jù)較大的比重。1.2網(wǎng)站規(guī)劃及布局1.2.1網(wǎng)站的結(jié)構(gòu)規(guī)劃網(wǎng)站欄目規(guī)劃目錄結(jié)構(gòu)清晰，層次分明。要對(duì)各部分內(nèi)容進(jìn)行總結(jié)后，得到簡(jiǎn)潔語(yǔ)言表示的欄目?jī)?nèi)容。主次分明，主欄目中放置用戶(hù)經(jīng)常要訪問(wèn)的內(nèi)容，而對(duì)于站點(diǎn)說(shuō)明、版權(quán)信息等，可以放置在次欄目中。合理設(shè)計(jì)欄目層次。一般欄目的層次不應(yīng)超過(guò)3層，過(guò)深的層設(shè)計(jì)容易讓瀏覽者失去方向，從而影響站點(diǎn)的整體表達(dá)效果。網(wǎng)站目錄設(shè)計(jì)不要把所有內(nèi)容都放在根目錄下。應(yīng)該建立分層目錄，按欄目?jī)?nèi)容建立子目錄。目錄層次不要超過(guò)3層。不要使用中文目錄，以免影響網(wǎng)頁(yè)的正確顯示。使用意義明確的目錄名，例如建立images目錄存放圖片文件，建立css目錄存放css文件，建立js目錄存放js文件等。將首頁(yè)命名為index或者default，放在根目錄下。1）樹(shù)狀鏈接結(jié)構(gòu)。2）網(wǎng)狀鏈接結(jié)構(gòu)。3）混合鏈接結(jié)構(gòu)網(wǎng)站鏈接結(jié)構(gòu)1.2.2網(wǎng)頁(yè)布局一個(gè)好的網(wǎng)頁(yè)布局是吸引用戶(hù)的重要原因。各種風(fēng)格設(shè)計(jì)及不同類(lèi)型主題的網(wǎng)站非常多，總體來(lái)說(shuō)，網(wǎng)頁(yè)主要包含以下幾種布局模式：大圖橫幅廣告加?xùn)鸥癫季?、F式布局、單頁(yè)布局、自定義柵格布局。1.2.2網(wǎng)頁(yè)布局大圖橫幅廣告加?xùn)鸥癫季郑涸谶@種布局中，網(wǎng)頁(yè)元素由頂部導(dǎo)航、橫幅廣告大圖、3～5個(gè)分欄、主要內(nèi)容區(qū)域和底部組成。在該布局中，每個(gè)網(wǎng)頁(yè)元素都各司其職，起到相互凸顯的作用1.2.2網(wǎng)頁(yè)布局F式布局：在該布局模式下，頁(yè)面一般包含頁(yè)頭和導(dǎo)航，以及左欄、右欄、底部。左欄相對(duì)較寬，用于展示主要的內(nèi)容，右欄常為側(cè)邊欄，用于展示相關(guān)超鏈接等內(nèi)容。F式布局模式擁有良好的適用性，便于用戶(hù)理解和與網(wǎng)頁(yè)交互。1.2.2網(wǎng)頁(yè)布局單頁(yè)布局：?jiǎn)雾?yè)布局將網(wǎng)站的所有主要內(nèi)容都放在一個(gè)網(wǎng)頁(yè)上，通過(guò)滾動(dòng)完成導(dǎo)航，有時(shí)還使用視差滾動(dòng)效果。1.2.2網(wǎng)頁(yè)布局自定義柵格布局：使用自定義柵格布局能將網(wǎng)頁(yè)分成簡(jiǎn)單屬性的行和列，將內(nèi)容固定在其中，實(shí)現(xiàn)豐富的布局。1.3站點(diǎn)建立和訪問(wèn)1.3.1web服務(wù)器和本地站點(diǎn)web服務(wù)器：指的是用于提供網(wǎng)絡(luò)服務(wù)的，可以處理瀏覽器等Web客戶(hù)端的請(qǐng)求并返回相應(yīng)的響應(yīng)。對(duì)于WWW瀏覽服務(wù)，網(wǎng)站服務(wù)器主要用于存儲(chǔ)用戶(hù)所瀏覽的web站點(diǎn)。當(dāng)前主流的Web服務(wù)器主要包括Apache、Nginx、IIS等。本地站點(diǎn)：是在本地計(jì)算機(jī)上創(chuàng)建的站點(diǎn)，其內(nèi)容都保存在本地計(jì)算機(jī)上。本地站點(diǎn)上的內(nèi)容需發(fā)布到服務(wù)器上才能被他人訪問(wèn)。IIS：IIS(InternetInformationServer，互聯(lián)網(wǎng)信息服務(wù))是由微軟公司提供的基于運(yùn)行MicrosoftWindows的web服務(wù)，IIS提供了對(duì)站點(diǎn)的管理，在電腦中安裝了IIS以后，就可以對(duì)站點(diǎn)進(jìn)行管理。1.3.3常用網(wǎng)頁(yè)編輯工具Dreamweaver:包括可視化編輯、HTML代碼編輯。該軟件支持可視化操作，對(duì)初學(xué)者比較友好，不需要編寫(xiě)代碼，在圖形化界面中，通過(guò)鼠標(biāo)操作即可實(shí)現(xiàn)大部分網(wǎng)頁(yè)效果；1.3.3常用網(wǎng)頁(yè)編輯工具VsCode（VisualStudioCode）:是一款由微軟開(kāi)發(fā)且跨平臺(tái)的免費(fèi)源代碼編輯器。優(yōu)點(diǎn)是文件小，安裝方便,可根據(jù)需要隨時(shí)安裝插件，同時(shí)可以兼容其他編輯器常用的快捷鍵。支持javascript，php，python，java等多種語(yǔ)言；Hbuilder：DCloud（數(shù)字天堂）推出一款支持HTML5的Web開(kāi)發(fā)IDE。它的最大優(yōu)點(diǎn)是開(kāi)放速度快，通過(guò)完整的語(yǔ)法提示和代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML的開(kāi)放速度。HBuilder要求一定的編程基礎(chǔ)，初學(xué)者不容易上手。1.3.4建立本地站點(diǎn)新建站點(diǎn)新建文件夾（用于存放圖片的文件夾）建主頁(yè)面index.html編輯主