第一篇:HTML語言與網(wǎng)頁制作教案
HTML語言與網(wǎng)頁制作教案
城步職業(yè)中學:劉紅蘭
教學內(nèi)容:HTML語言與網(wǎng)頁制作
教學目的:
1、掌握輸入和運行HTML文件的方法
2、掌握HTML基本的結(jié)構(gòu)標記
3、掌握html在網(wǎng)頁特效中的簡單運用
教學重點:HTML基本的結(jié)構(gòu)標記 教學難點:html在網(wǎng)頁特效中的簡單運用 教學方法:演示法 教學地點:多媒體 教學課時:1課時 教學過程:
一、什么是HTML語言
網(wǎng)頁是由一種稱為HTML的語言來描述的,網(wǎng)站中的大多數(shù)網(wǎng)頁都以HTML文件的形式保存,HTML(HyperTextMark-upLanguage)即超文本標記語言,是WWW的描述語言。下面,讓我們來看一看下面這個例子吧!
如果我們要在網(wǎng)頁中顯示“城步職業(yè)中專計算機16班!”一行文字,可以用HTML 語句來描述:
第二篇:網(wǎng)頁制作HTML總結(jié)
美誠國際教育宿州二中網(wǎng)頁制作課程小結(jié) 田老師
第一講 HTML的基本結(jié)構(gòu)
-------根控制標記
-------頭控制標記-------網(wǎng)頁顯示區(qū)域
第三篇:html網(wǎng)頁畢業(yè)論文
畢業(yè)論文
網(wǎng)站設(shè)計與制作
所 屬 系:計算機
專業(yè):應用技術(shù)
學生姓名:***
學號:************
指導老師:****
二〇一一年五月
第1章網(wǎng)站總體分析及概要設(shè)計
1.1 模塊功能分析
1.1.1 引導首頁模塊
引導首頁使用整體顏色背景,配合圖片或Flash構(gòu)成,頂部為導航首頁鏈接。
1.1.2 班級形象模塊
該模塊功能主要是展示班級的形象,同時作為網(wǎng)站的導航首頁,在用戶登錄后就可以看到班級的整體形象,班級的展示及班級動態(tài),用戶還可以通過頂部和左側(cè)的導航欄進入網(wǎng)站,更深入的了解該班級。
1.1.3 用戶模塊
用戶注冊與登錄:網(wǎng)絡(luò)上的用戶通過填寫ID、密碼等信息可以注冊成為會員,并獲得相應的用戶權(quán)限。系統(tǒng)自動把用戶的注冊信息存儲到服務(wù)器端的數(shù)據(jù)庫中。如果用戶ID重復或者填寫錯誤,系統(tǒng)會給出提示信息,而通過用戶注冊與登錄、可以自由發(fā)布與查看各種信息。
用戶信息維護:系統(tǒng)的注冊用戶可以隨時修改自己的注冊信息,這些修改后的信息將自動更新到服務(wù)器端的數(shù)據(jù)庫中。
用戶登錄/退出:系統(tǒng)的注冊用戶可以登錄系統(tǒng)并且獲得相應的權(quán)限,登錄了的用戶也可以選擇退出登錄。
1.1.4 留言板模塊
該模塊功能主要是提供用戶與網(wǎng)站主之間的交流平臺及站長收集用戶反饋信息以改善站點。
1.2 網(wǎng)站導航功能結(jié)構(gòu)
網(wǎng)站主要實現(xiàn)的功能有:網(wǎng)站首頁導航,各頁面導航以及其他模塊。
1.3 論文可行性分析
1.3.1 社會可行性分析
可行性分析主要分析現(xiàn)有技術(shù)條件能否順利完成開發(fā)工作,軟硬件配置能否滿足開發(fā)者的需要等。隨著計算機硬件和軟件技術(shù)的飛速發(fā)展,為網(wǎng)站的建設(shè)提供了有利的技術(shù)條件,由此看來技術(shù)基礎(chǔ)也已非常成熟,因而技術(shù)上是可行的。
1.3.2 軟件可行性分析
1.3.2.1 ASP技術(shù)介紹
ASP(Active Server pages)即“動態(tài)服務(wù)器網(wǎng)頁”,ASP之所以能受到大家的重視與使用的原因,只要在于腳本在服務(wù)器上而不是在客戶端運行,傳送到瀏覽器上的Web頁是在Web服務(wù)器上生成的。所以不必擔心瀏覽器能否處理腳本,Web服務(wù)器已經(jīng)完成了所有腳本的處理,并肩標準的HTML傳輸?shù)綖g覽器。由于只有腳本的結(jié)果返回到瀏覽器,所有服務(wù)器端腳本不易復制。用戶看不到創(chuàng)建
他們正在瀏覽的頁的腳本命令。所以在客戶端看到的只能是經(jīng)過解析之后的數(shù)據(jù),而無法獲得源代碼,故編寫者不用擔心自己的代碼會被別人剽竊。
ASP的主要特點:容易產(chǎn)生,無需Compile變異或Link鏈接即可執(zhí)行,集成于HTML中,使用常規(guī)文本編輯器,如Windows的記書本,即可設(shè)計,用戶端只要使用常規(guī)的可執(zhí)行HTML碼的瀏覽器,即可瀏覽ASP所設(shè)計的主頁內(nèi)容,Script語言(Vbscript,Jscript)是在站點服務(wù)器執(zhí)行,用戶不需要執(zhí)行這些語言,可通過ActiveX服務(wù)器組件來擴充功能。ActiveX Server component,可使用visual Basic,Java,Visual C++,COBOL等語言來實現(xiàn),任何AcTiveX scripting語言兼容。可使用Vbscript或Jscript等語言來設(shè)計,一個應用程序,可以在多個主頁之間保留和使用一些共同的信息,也就是說一個用戶,可以在多個主頁之間保留和使用一些共同的信息,在多個主頁之間共享信息。
1.3.2.2 DREAMWEAVER
Dreamweaver、FLASH以及在DREAMWEAVER之后推出的針對專業(yè)網(wǎng)頁圖像設(shè)計的FIREWORKS,三者被MACROMEDIA公司稱為DREAMTEAM(夢之隊),足見市場的反響和MACROMEDIA公司對它們的自信。說到
DREAMWEAVER我們應該了解一下網(wǎng)頁編輯器的發(fā)展過程,隨著互聯(lián)網(wǎng)
(Internet)的家喻戶曉,HTML技術(shù)的不斷發(fā)展和完善,隨之而產(chǎn)生了眾多網(wǎng)頁編輯器,從網(wǎng)頁編輯器基本性質(zhì)可以分為所見即所得網(wǎng)頁編輯器和非所見即所得網(wǎng)頁編輯器(則原始代碼編輯器),兩者各有千秋。所見則所得網(wǎng)頁編輯器的優(yōu)點就是直觀性,使用方便,容易上手,您在所見即所得網(wǎng)頁編輯器進行網(wǎng)頁制作和在WORD中進行文本編輯不會感到有什么區(qū)別。
Dreamweaver可以用最快速的方式將Fireworks,F(xiàn)reeHand,或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。對于選單,快捷鍵與格式控制,都只要一個簡單步驟便可完成。Dremweaver能與您喜愛的設(shè)計工具,如Playback Flash,Shockwave和外掛模組等搭配,不需離開Dreamweaver便可完成,整體運用流程自然順暢。除此之外,只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設(shè)定圖檔的最佳化。
使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計、更新和重組網(wǎng)頁。改變網(wǎng)頁位置或檔案名稱,Dreamweaver 會自動更新所有連結(jié)。使用支援文字、HTML碼、HTML屬性標簽和一般語法的搜尋及置換功能使得復雜的網(wǎng)站更新變得迅速又簡單。Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組,Dreamweaver 支援精準定位,利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得 Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能,提供超強的支援能力給Third-party廠商,包含ASP,Apache,BroadVision,Cold Fusion,iCAT,Tango與自行發(fā)展的應用軟體。當您正使用Dreamweaver在設(shè)計動態(tài)網(wǎng)頁時,所見即所得的功能,讓您不需要透過瀏覽器就能預覽網(wǎng)頁。夢幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計分開,應用于快速網(wǎng)頁更新和團隊合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版,指定可編輯或不可編輯的部份,內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。
Dreamweaver還集成了程序開發(fā)語言,對ASP、.NET、PHP、JS的基本語言和連接操作數(shù)據(jù)庫,都是完全支持的。
1.3.2.3 SQL 2000
SQL Server 2000是為迅速提供可伸縮性電子商務(wù)、企業(yè)及數(shù)據(jù)倉庫解決方案而開發(fā)的完整數(shù)據(jù)庫與分析軟件產(chǎn)品。SQL SERVER 2000定位于Internet背景下的數(shù)據(jù)庫應用,它為用戶的Web應用提供了一款完善的數(shù)據(jù)管理和數(shù)據(jù)分析解決方案。同時SQL SERVER 2000還是Windows DNA(Distributed Internet Architecture)架構(gòu)的一個核心組件。它極大地縮短了用戶開發(fā)電子商務(wù)、數(shù)據(jù)倉庫應用的時間。SQL SERVER 2000還提供對XML(Extensible Markup Language擴展標示語言支持)和HTTP的全方位支持。
在高性能和企業(yè)級可伸縮性領(lǐng)域,SQL Server 2000 設(shè)計成利用 Windows 2000 對更多處理器、更大的系統(tǒng)內(nèi)存的支持,最終達到支持 64 位硬件平臺。在不斷提升可用性的努力過程中,SQL Server 2000 采用 Windows 2000 四路群集,提供了大大改進的群集支持。SQL Server 7.0 已經(jīng)在可管理性和易用性方面在行業(yè)內(nèi)領(lǐng)先,SQL Server 2000 通過與 Windows 2000 活動目錄緊密結(jié)合進一步改進了這些功能。而且,SQL Server 2000 還包含對現(xiàn)有管理工具和實用程序的重大改進,并引入更具自我調(diào)節(jié)和自我管理的引擎功能。
SQL Server 2000 按照設(shè)計可以為部署和維護強大的、易于管理、支持商務(wù)活動的 Web 站點提供最好的性能,這些站點可以從事商家和商家之間或商家與客戶之間的交易。在尋求一個支持您的電子商務(wù)解決方案的數(shù)據(jù)庫時,需要考慮的項目包括:可用性、性能、可管理性和價格。
1.3.2.4 PHOTOSHOP
Photoshop是Adobe公司推出的一款功能十分強大、使用范圍廣泛的平面圖像處理軟件。擁有多種選擇工具,極大地方便了用戶的不同需求。而且多種選擇工具還可以結(jié)合起來選擇較為復雜的圖像。它不僅擁有多種內(nèi)置濾鏡可供用戶選擇使用,而且還支持第三方的濾鏡。目前Photoshop是眾多平面設(shè)計師進行平面設(shè)計,圖形,圖像處理的首選軟件。
1.3.2.5 FLASH
Flash被大量應用于互聯(lián)網(wǎng)網(wǎng)頁的矢量動畫設(shè)計。因為使用向量運算﹙Vector Graphics﹚的方式,產(chǎn)生出來的影片占用存儲空間較小。使用Flash創(chuàng)作出的影片有自己的特殊檔案格式﹙SWF﹚,該公司聲稱全世界97%的網(wǎng)絡(luò)瀏覽器都內(nèi)建Flash播放器﹙Flash Player﹚。Flash是Macromedia提出的“富因特網(wǎng)應用”(RIA)概念的實現(xiàn)平臺。
1.4 開發(fā)環(huán)境介紹
操作系統(tǒng):Windows XP professional;
開發(fā)的軟件環(huán)境:IIS 5.1,Dreamweaver CS4,SQL server 2000,Photoshop CS5,F(xiàn)lash 8
開發(fā)的硬件環(huán)境:Pebtium(R)Dual-Core CPU T4200 @ 2.00GHZ 內(nèi)存:2 GB
參考文獻及引用內(nèi)容
網(wǎng)站建設(shè)教程(金旭亮、吳彬),高等教育出版社;
ASP動態(tài)網(wǎng)頁編程/工作過程導向新理念從事(叢林編委會),清華大學出版社; Flash ActionScript 3 殿堂之路(孫穎)電子工業(yè)出版社;
站長之家 :;
站長網(wǎng) : ;
結(jié)束語
在該網(wǎng)站制作的過程中利用了各種軟件或程序設(shè)計語言完成網(wǎng)站的設(shè)計,完成前臺基本操作與后臺的數(shù)據(jù)處理,瀏覽器向WEB服務(wù)器代理提出訪問請求,可以通過瀏覽器直接看到網(wǎng)站內(nèi)容,同時給班級在網(wǎng)絡(luò)上帶來了一個很好的宣傳窗口。本網(wǎng)站也方便了班級同學間的聯(lián)系及交流。上述就是我制作該網(wǎng)站所想要視線的目標。相信通過一個多月的畢業(yè)論文對該網(wǎng)站的制作完善,能使我對網(wǎng)站制作有了一個比較清楚的認識,也加深了對數(shù)據(jù)庫原理、程序設(shè)計的學習,能提高資深的程序設(shè)計能力,到那時我得到的將是終生的財富,必將給我今后的學習和工作帶來更多的收益。
致謝
大學生活進入尾期,即將離開美麗的校園,心中難免有著種種不舍,這里的三年生活,存在了我太多美好的回憶。
在這里,首先要感謝銀濤老師在我完成該畢業(yè)論文過程中給予的悉心指導。同時通過互聯(lián)網(wǎng)在網(wǎng)上收集大量的資料并且及時向指導老師、同學請教。在他們的幫助下,我順利的完成了此次畢業(yè)論文的任務(wù)。通過此次設(shè)計,使我學到了很多有使用價值的只是,開闊了知識面,積累了對網(wǎng)站制作的經(jīng)驗,在遇到困難時,去尋求解決的方法,去克服它,并學會自己找資料進行參考,直到問題最終得到解決。在制作學習中,我領(lǐng)悟到了很多道理——學習在于不斷探索、思考、質(zhì)疑,在舉一反三中創(chuàng)新。更重要的是要有持之以恒的毅力。
在為期1個多月的畢業(yè)設(shè)計過程中使自己真正的學習到很多的東西,無論是自己的動手能力是是心智的開發(fā)都是一個很大的提高。更重要的是學到了一種嚴謹?shù)膶W習態(tài)度。在整個畢業(yè)設(shè)計中三年的大學學習老師所教授的知識無疑是最大的幫助,指導老師細心的指導更加速了本人的提高。在此,我衷心的感謝及祝福老師們。
第四篇:網(wǎng)頁設(shè)計與制作教案
《網(wǎng)頁設(shè)計與制作教案》
教師:系部:信息技術(shù)工程系專業(yè):計算機應用班級:計機
湄洲灣職業(yè)技術(shù)學院
2008-2009學年第一學期
唐 俊 奇
電子信息
07(1)信息07(1)08(2)
1.3 網(wǎng)頁中所使用的技術(shù)
1.3.1 HTML語言和XML語言
1、HTML語言
?HTML只使用SGML中很小一部分標記
?HTML語言(Hyper Text Markup Language 超文本標記語言)
?HTML是純文本的語言,其源代碼可以用各種文本編輯工具進行編輯,常用的網(wǎng)頁制作軟件如FrontPage、Dreamweaver等實際上是自動生成HTML源代碼的工具
2、XML語言
XML(eXtensible Markup Language)1.3.2 動態(tài)網(wǎng)頁
1.3.3 多媒體技術(shù)的應用 1.3.4 Web服務(wù)器端程序
1.4 制作網(wǎng)頁的基本方法
1.4.1 制作網(wǎng)頁的基本步驟
1、確定網(wǎng)頁的內(nèi)容
2、設(shè)計網(wǎng)頁的組織結(jié)構(gòu)
3、資料的收集與整理
4、選擇網(wǎng)頁的設(shè)計方法
1.4.2 制作網(wǎng)頁時要注意的問題
1、網(wǎng)頁的標題要簡潔,明確。
2、在文本中要使用水平線,以分割不同部分。
3、對重點段落要強調(diào)顯示。
4、網(wǎng)頁中插入的圖片要盡量的小。
5、圖形要附加文字說明,以便關(guān)閉圖像時查看。
6、網(wǎng)頁中引用的資料及商標(或圖標),不能侵犯版權(quán)。【課后小結(jié)】
通過學習,認識網(wǎng)絡(luò)、網(wǎng)站、網(wǎng)頁及相關(guān)信息,理解網(wǎng)頁制作的流程及了解相應開發(fā)工具,為設(shè)計網(wǎng)頁做準備。
第二講 HTML的基本標志與格式標志
【教學內(nèi)容】
講解HTML基本標志對和格式標志。【教學目的】
使學生標志對與格式標志對的使用。【教學重點】
格式標志的使用。【教學難點】
* 使學生掌握超級鏈接標志的使用。【教學重點】
* 字體、圖片和超級鏈接標志的使用。* 網(wǎng)頁中特殊符號的輸入。【教學難點】
* 理解特殊符號對應的標志。* 理解img標志中屬性的意義。* 理解書簽超級鏈接的意義。【教學方式】
討論式、案例分析式、練習式。【教學參考】
1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。
2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。
3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社。【新課內(nèi)容】
2.2 插入文字
2.2.1 劃分段落 格式
段落內(nèi)容
2.2.2 插入標題文字 格式設(shè)置基準字號:
2.2.6
文本修飾
......,文字以粗體顯示。......,文字顯示為斜體。......,顯示下劃線。
...... STRIKE>,中心線貫穿文字。< EM>...... EM>,強調(diào)文字,通常用斜體。
< STRONG>...... STRONG >,特別強調(diào)的文字,通常用黑體。
2.3.2 圖片的屬性
2.4 建立超級鏈接
2.4.1 指向一個目標
1、建立超級鏈接
2、為圖片建立超級鏈接
3、鏈接到郵件和多媒體文件 鏈接到郵件
請與我聯(lián)系 2.4.2 使用錨點
?使用錨點可以使用戶在一個較長的文檔中跳轉(zhuǎn),方便地找到要閱讀的內(nèi)容。?建立錨點:
?錨點文字 ?使超級鏈接指向已定義的錨點。?文字 ?文字 2.4.3 新窗口和基準鏈接
1、打開新窗口 Target=“window-name”>開一個新窗口
2、基準鏈接
在
與 之間設(shè)定BorderColor=“#008000“ >
2.7.3 子窗口屬性設(shè)置
-2.7.4 常見的框架窗口劃分方法(1)標題和正文,分為上下兩部分(2)層次結(jié)構(gòu),分為上中下三部分
(3)目錄和標題,分為左上、左下、右三部分
(4)標題、目錄和正文,分為上、左下、右下三部分(5)嵌套目錄,分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁