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

第1章

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

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

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