第1章

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

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

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