第一篇:網頁設計與制作實訓十二
《網頁設計與制作》實訓
表單設計
實訓內容:用戶注冊界面設計
操作提示:
第一步:制作“用戶注冊”界面
1)在Dreamweaver CS4中新建一個網頁文件,將網頁標題設置為“用戶注冊”。2)選擇“插入→表單→表單”命令在文檔中插入一個表單,如圖12-1所示。
圖12-1 插入表單
3)將光標置于創建的表單內,插入一個12行2列的表格,并設置表格的寬度為530像素、間距為0像素、邊框為0像素。
4)選中第一行的兩個單元格,單擊“修改→表格→合并單元格”命令,將它們合并為一個單元格。用同樣的方法將最后一行的單元格合并為一個單元格,如圖12-2所示。
圖12-2
插入的表格 5)將光標置于第一行的單元格中,輸入“用戶注冊”,在單元格“屬性”面板中設置文本居中對齊。
6)根據圖12-3提供的界面內容,分別在表格第1列的其它單元格中輸入昵稱、真實姓名、密碼等文本。選中輸入的文本,并將它們設置為粗體、右對齊方式。
圖12-3
輸入文本
7)選中表格中所有的單元格,在單元格“屬性”面板中設置單元格的高為30。第二步:插入文本域
1)在圖12-2所顯示的表格中,將光標置于“昵稱:”后面的單元格中,單擊“表單”標簽中的“文本字段”按鈕,或者選擇“插入→表單→文本域”命令,均將打開“輸入標簽輔助功能屬性”對話框,如圖12-4所示。
圖12-4
“輸入標簽輔助功能屬性”對話框
2)單擊【確定】按鈕,在光標處插入了一個單行的文本域。3)選中插入的文本域,其對應的“屬性”面板如圖12-5所示。
圖12-5
文本域“屬性”面板
文本域“屬性”面板中各選項含義如下:
文本域:用于標志該文本域的名稱。每個文本域的名稱都不能相同,它相當于表單中的一個變量名,服務器通過這個變量名來處理用戶在該文本域中輸入的值。
字符寬度:設置文本域中最多可顯示的字符數。當設置該選項后,若是多行文本域,標簽中增加cols屬性,否則標簽增加size屬性。如果用戶的輸入超過字符寬度,則超出的字條將不被表單指定的處理程序接收。
最多字符數:設置單行、密碼文本域中最多可輸入的字符數。當設置該項后,標簽增加maxlength屬性,如果用戶的輸入超過最大字符數,則表單產生警告聲。
類型:設置文本域的類型,可在單行、多行或密碼3個類型中任選一個。“單行”類型將產生一個標簽,它的type屬性為text,這表示此文本域為單行文本域。“多行”類型將產生一個
初始值:設置文本域的初始值,即在首次載入表單時文本域中顯示的值。類:將CSS規則應用于文本域對象。
4)本例設置文本域的“字符寬度”為14,“類型”為單行。5)用同樣的方法,分別在“真實姓名:”、“輸入密碼:”、“再次輸入密碼:”、“聯系電話:”、“E-mail:”后面的單元格中插入單行文本域。
6)分別選中“輸入密碼:”、“再次輸入密碼:”后面的文本域,在其“屬性”面板中設置“字符寬度”為8,“最多字符數”為8,“類型”為密碼。
7)將光標置于“說明:”后面的單元格中,單擊“表單”標簽中的“文本區域”按鈕,在光標處插入一個文本區域。
選中插入的文本區域,其對應的“屬性”面板和圖12-4不同的是“行數”。“行數”用于設置文本域的高度,設置后標簽會增加rows屬性。本例設置“行數”為4,“類型”為多行,如圖12-6所示。選項的值可由用戶根據需要自行確定,這里不做統一要求。
圖12-6
文本區域“屬性”面板
創建文本域后的“用戶注冊”頁面效果如圖12-7所示。
圖12-7
插入的文本域
第三步:插入單選按鈕
1)將光標置于“性別:”后面的單元格中,單擊“表單”標簽中的“單選按鈕”按鈕,或者選擇“插入→表單→單選按鈕”命令,將打開“輸入標簽輔助功能屬性”對話框,如圖12-8所示。
12-8 “輸入標簽輔助功能屬性”對話框
2)在“標簽”后面的文本框中輸入“男”,“位置”選擇“在表單項后”,單擊【確定】按鈕,將在光標處創建一個帶有“男”標識文字的單選按鈕,如圖12-9所示。
圖12-9 插入的單選按鈕圖
3)用同樣的方法,在插入的單選按鈕后面,再插入一個標識“女”的單選按鈕。4)選中插入的單選按鈕,其對應的“屬性”面板如圖12-10所示。
圖12-10
單選按鈕“屬性”面板
單選按鈕“屬性”面板中各選項含義如下: 單選按鈕:用于輸入該單選按鈕的名稱。
選定值:設置此單選按鈕代表的值,一般為字符型數據,即當選定該單選按鈕時,表單指定的處理程序獲得的值。
初始狀態:設置該單選按鈕的初始狀態。即當瀏覽器中載入表單時,該單選按鈕是否處于被選中狀態。一組單選按鈕中只能有一個按鈕的初始狀態被選中。
類:將CSS規則應用于單選按鈕。
5)分別設置兩個單選按鈕的“單選按鈕”為“radio”,“初始狀態”為“未選中”。到此為止,單選按鈕創建完畢。
提示:在同一組中的兩個或多個單選按鈕的名稱必須相同。
6)按下〈Ctrl+S〉組合鍵保存網頁文件。按下〈F12〉鍵,在打開的網頁中測試單選按鈕效果。提示:可以在表單中插入單選按鈕組。具體方法:選擇“插入→表單→單選按鈕組”命令,打開“單選按鈕組”對話框,如圖圖12-11所示。點擊“單選按鈕”右側的按鈕或按鈕,來添加一個或刪除一個單選按鈕。點擊“標簽”下側的“單選”,可以修改單選按鈕的標識內容。插入的帶有標識內容的單選按鈕組如圖12-12所示。
圖12-11 “單選按鈕組”對話框
圖12-12 單選按鈕組
第四步:插入復選框
1)將光標置于“興趣愛好:”后面的單元格中,單擊“表單”標簽中的“復選框”按鈕,或者選擇“插入→表單→復選框”命令,打開“輸入標簽輔助功能屬性”對話框,在“標簽”后面的文本框中輸入“美術”,單擊【確定】按鈕,將在光標處創建一個帶有“美術”標識文字的復選框。
2)用同樣的方法,再創建3個復選框,并分別為它們添加標識文字,如圖12-13所示。
圖12-13
插入的復選框
3)選中創建的復選按鈕,其對應的“屬性”面板如圖12-14所示。復選框“屬性”面板與前面介紹的單選按鈕“屬性”面板基本相同,這里不再一一介紹。需要注意的是,與單選框名稱不同的是,各個復選框名稱不應該相同。
圖12-14
復選框“屬性”面板
保存網頁文件。按下〈F12〉鍵在打開的網頁中測試復選框效果。
第五步:插入列表/菜單
1)將光標置于“出生年月:”后面的單元格中,單擊“表單”標簽中的“列表/菜單”按鈕,或者選擇“插入→表單→列表/菜單”命令,打開“輸入標簽輔助功能屬性”對話框,在“標簽”后面的文本框中輸入“年”,“位置”選擇“在表單項后”,單擊【確定】按鈕,將在光標處創建一個帶有“年”標識文字的“列表/菜單”對象。
2)用同樣的方法,在創建的“列表/菜單”對象后面,再創建一個帶有“月”標識文字的“列表/菜單”對象,如圖12-15所示。
圖12-15 插入的“列表/菜單”對象
3)選中圖12-14左側的“列表/菜單”對象,列表/菜單“屬性”面板如圖12-16所示。
圖12-16 列表/菜單“屬性”面板 列表/菜單“屬性”面板中各選項含義如下: 列表/菜單:用于輸入滾動列表的名稱。
類型:設置菜單的類型。選擇“菜單”選項,將添加下拉菜單;選擇“列表”選項,將添加滾動列表。
高度:設置滾動列表的高度,即列表中一次最多可以顯示的項目數。選定范圍:設置用戶是否可以從列表中選擇多個項目。初始化時選定:設置可滾動列表中默認選擇的菜單項。
【列表值】按鈕:單擊該按鈕,將彈出一個“列表值”對話框,如圖12-17所示。在該對話框中,單擊加號按鈕
或減號按鈕
,可在下拉列表中添加或刪除列表項。
在本例中,為左側的“列表/菜單”對象設置列表值如圖11-18所示。
圖12-17 “列表值”對話框
圖12-18 設置列表值
選中插入的“列表/菜單”對象,在其“屬性”面板中設置“列表”的“高度”為1。用同樣的方法,為右側的“列表/菜單”對象設置列表值為1。效果如圖12-19所示。
圖12-19
設置“列表/菜單”對象的屬性值
第六步:插入按鈕
1)將光標置于表格的最后一行內,單擊“插入→表單→按鈕”命令,或者單擊“表單”標簽中的“按鈕”按鈕,均可打開“輸入標簽輔助功能屬性”對話框,直接單擊對話框中的【確定】按鈕,即可在光標處插入一個“提交”按鈕。
2)用同樣的方法,在“提交”按鈕的后面再插入一個新的按鈕。
3)選中插入的第2個按鈕,其對應的“屬性”面板如圖12-20所示。從中設置“動作”為“重設表單”,此時“值”后面顯示“重置”。
圖12-20
按鈕“屬性”面板
按鈕“屬性”面板中各選項含義如下:
按鈕名稱:用于輸入該按鈕的名稱,每個按鈕的名稱不能相同。值:設置按鈕上顯示的文本。
動作:設置用戶單擊按鈕時將發生的操作。包括3個選項:“提交表單”單擊按鈕時,將表單數據提交到表單指定的處理程序處理;“重設表單”單擊按鈕時,將表單域內的各對象值還原為初始值;“無”單擊按鈕時,選擇為該按鈕附加的行為或腳本。
4)選中插入的按鈕,在“屬性”面板中設置對齊方式為“居中對齊”,如圖12-21所示。
圖12-21
插入并設置屬性后的按鈕
5)到此為止,“用戶注冊”頁面制作完成。用戶可根據自己的喜好進一步美化表單。6)按下〈Ctrl+S〉組合鍵保存文件。按下〈F12〉鍵預覽“用戶注冊”頁面效果。
第二篇:網頁設計與制作實訓報告
《網頁設計與制作》課程設計報告書
設計題目:起止日期: 工作室或公司網站設計
2013.12.23-2013.12.27
目錄
一、關于網站 ···························· 3
1、網站的主題 ·························· 3 2.網站材料 ··························· 4
二、網站的規劃設計 ························· 5 1.網站的功能定位 ························2.站點的內容 ··························3.站點的風格 ··························4.網站功能模塊圖 ························三.網站技術解決方案 ························
1、網站的制作工具 ························
2、所用技術 ···························四.網頁介紹 ····························
1、制作網站的網頁 ························2.第二層展示 ··························3.動漫排行榜展示 ························4.第三層展示 ··························5.關于短片的插入: ·······················五.關于我們: ···························六.實訓總結: ··························· 2 5 5 6 6 7 7 8 9
13 14 14
一、關于網站
1、網站的主題
我的網站的主旨在于從各個方面全面的介紹動漫,展示動漫產品以及漫畫,包括有動漫排行榜,小短片,另外,網站里還有漫畫,以及周邊產品。建立一個展示動漫的平臺。同時,網站里的每一個網頁都有統一的風格,每一個網頁的主題都是圖片加上文字介紹,用以展示自己性格的效果。最重要的是做出自己的風格,給瀏覽者好的欣賞感受。
動漫,是動畫和漫畫的合稱與縮寫,取這兩個詞的第一個字合二為一稱之為“動漫”。
現可考證,該詞語出處為1993年創辦的動漫出版同業協進會與1998年創刊的動漫資訊類類月刊《動漫時代(Anime Comic Time)》,后經由漫友雜志傳開,因概括性強在大陸地區的使用開始普及起來。在中國以外,并沒有此種說法。國外習慣性將動畫(anime)、漫畫(comic)、游戲(game)三者合稱作ACG,或加上輕小說(novel)合稱為ACGN。
由于漫畫本身的發展形成了現代故事漫畫的表現形式,將影視藝術融入漫畫之中,使得漫畫與動畫更容易結合,影視藝術獨特的地方在于它能通過鏡頭的推拉搖移和片段剪輯的蒙太奇技巧來表達想法和感受。
漫畫正是吸收了影視藝術的這兩個特點。當要講述的故事越發復雜、人物越發豐富的時候,用傳統單線式敘事的方法就越行不通,蒙太奇的介入就成為一種需要了; 當漫畫家在傳統表現手段中無法找到更合適的抒發感情的方法的時候;當讀者需要作品有更強的沖擊力和表現力的時候,各種鏡頭的靈活運用就成為一種必需了。一部現代故事漫畫往往集遠、中、近、特四種鏡頭于一身,漫畫家往往能熟練地運用鏡頭的移動和各種蒙太奇剪接,對故事特定部分的情緒和氛圍進行渲染。這就是現代故事漫畫容易和動畫結合的一個原因,因為它天生就像動畫的分鏡頭劇本,讀者在看漫畫時仿佛就是在看一部電影。正是有著這樣的相似性,所以如今將動畫和漫畫合稱為“動漫”。
動漫領域衍生出的許多術語均已經被廣泛應用,例如:正太,蘿莉,御姐,百合,BL等。
動漫產業日益與游戲產業結合緊密,在日本已經形成一個成熟的產業鏈,動漫已經 3 從單單的平面媒體和電視媒體擴展到游戲,書籍,網絡,玩具等眾多領域。許多動漫游戲應運而生,例如《死神bleach》PSP平臺的游戲,也有許多GALGAME被改編成動漫作品。
Manga(まんが,manga)為日語“漫畫”的羅馬字注音。另外,英文詞cartoon的中文音譯“卡通”,也是漫畫與動畫的合稱,但被用來特指美國動畫。版面有限,相關詞條,詳見:“動漫概論” 按類型分類:
情感;推理;動作;戰爭;后宮;寵物;歷史;搞笑;機戰;少年;冒險;治愈;童話;格斗;
少女;懸疑;科幻;競技;社會;神魔;熱血;校園;耽美;原創;魔法;教育;恐怖;驚悚;
政治;哲理;經典;勵志;倫理;惡搞;血腥;言情;暴力。按版本分類: 電視動畫(TV):
電視頻道上播映的動畫作品。
劇場動畫(MOV):影院公映的動畫作品,是日本動畫按傳播方式分類的一種,在中國又被稱為劇場版。
OVA(OAD):原創動畫錄影帶,其中OVA是單獨發售,OAD是隨書發售的。網絡動畫(NET):以網絡為播放平臺的動畫。
動畫音樂:一部動漫作品中的音樂,包括主題音樂和背景音樂(BGM)。
動畫原創:依漫畫改編的動畫,由于動畫的更新速度比漫畫快的關系,當動畫的劇集快趕上漫畫時,動畫的劇情就要脫離漫畫劇情,開始動畫原創。
同人:也叫二次創作,由漫畫、動畫、游戲、小說、影視等作品甚至現實里已知的人物、設定衍生出來的文章及其他如圖片影音游戲等等,或“自主”的創作。COS:全稱COSPLAY,裝扮成漫畫、動畫、游戲、小說等中的人物,也可以是原創。
2.網站材料
主要在網站上搜集所要的網頁信息,包括圖片、文字、相關的產品。同時,查詢相關的動漫、百度等方式收集所需的文字資料,圖象資料,網頁特效等,用以得來更加具有說服力的頁面。要想做好自己的網站,能夠給瀏覽者好的欣賞感受,就要盡量搜集材料,搜集得材料越多,以后制作網站就越容易。精選自己收集的材料,作為自己制作網頁的素材,這樣就可以做好一個好的網站。
二、網站的規劃設計
1.網站的功能定位
我的網站共有5個主頁面:首頁、動漫之家、動漫排行榜、動漫連載、周邊產品。每一個頁面用圖片來做。
我是用素材拼音命名網站名,用以方便存儲和轉發。網站主頁整體色調為梅紅色,配上深沉的背景圖,搭配出一種層次感。然后點綴其他不同的顏色相配,突出主題,顏色沒有過多,過雜,用以避免給人一種雜亂的感覺。版面設計十分靈活,根據各部分內容的不同適當的自由設計。網頁布局主要用框架和表格,用框架定位內容的大體結構,再用表格具體定位。位子的設計也是重要的一個部分,根據具體內容決定字體風格,相同的風格多次調用是用css設計一個樣式,以保證隨時、準確的調用。
2.站點的內容
我們動漫匯主要是要向客戶介紹動漫,包括動漫的介紹,動漫的周邊產品,動漫的圖片及動漫的漫畫或是動漫片段。站點里面包括:
首頁:第一層網頁,畫面主要有動漫匯的logo,logo下方是一個橫幅,鼠標經過會有光亮,點擊仍將是動漫的主頁。左邊是一個動態動漫圖,顯得主頁可愛又有動漫氣息等。下方是會員登錄,點擊登陸跳轉至輸入賬號及密碼界面,如不是會員,點擊注冊跳轉個人用戶注冊界面。主頁的背景圖是動漫海報,由兩層疊加。主圖是6幅動漫圖,6種動漫的介紹。鼠標進過動漫圖時,會有相應的動漫簡介。
跳轉頁:第二層和第三層,主要的主頁的過渡。里面有動漫的詳細介紹,有動態圖欣賞左側是關于動漫的周邊產品。點擊看漫畫或動漫,即可欣賞相關動漫。
3.站點的風格
整個網頁色彩明顯,我們添加了gif圖,這樣網頁稍微有活力,背景都是用動漫海報。其中使用翻看圖片的特效,使得看漫畫不那么單挑。同時也插入視頻,使得網站有活力一些。
首頁的標題插入閃光效果,鼠標經過時能出現,不容易產生無趣感。首頁的圖片不只有圖片,鼠標放至圖片上會有文字出現,是動漫的簡介。使得網頁有活力。
4.網站功能模塊圖
三.網站技術解決方案
1、網站的制作工具
做網頁時主要使用的是Dreamweaver CS3另外,為了處理網頁中的其他元素,還使用了Photoshop、FLASH等軟件。
2、所用技術
動漫匯需要大量的圖片及相關的話題。我們需要插入圖片,大小要適合,以動漫海報為網頁的背景,則設置好頁面設置,選好準備好的海報圖。插入gif圖片,需要時在ps中做gif圖。插入視頻時需要設置好相關的,視頻名稱中不能有中文,是flv格式的。圖文介紹的需要經過ps的加工,使得首頁的圖片有生機活力。插入表單,是關于用戶的登錄,點擊跳轉至登錄或是注冊界面。首頁標題都有鏈接,點擊進入相應的網站。首頁下方是關于動漫匯,為了突出字,用ps進行加工。
四.網頁介紹
1、制作網站的網頁
素材、風格、模板都設計好以后,下一步就是具體的制作網頁。制作網站時,首先要做的就是站點的規劃,建立一個本地站點“web”,建立的各個頁面都應該放在本地站點中,在網頁制作時所需的各個元素都進行了統一的管理,建立統一的文件夾放同一類型的文件,我在制作時建立了各類動漫的文件夾來存放圖片。同時,由于漫畫頁面中的信息太多,于是建立了一個專門的文件夾存放相冊信息,網頁中的css 樣式文件也應統一管理,做到有條不紊,我設計的網站的首頁如下圖:
根據自己的網頁風格,在網上搜集合適的圖片,另外網頁的頁寬一般沒有超過900像素,以保證左右不出現滾動條。右下邊插入的是表格,表格中添加了淺紅色的背景圖片。用以體現網站的主題色彩,表格還定位了網頁特效、系統時間和flash動畫。
2.第二層展示
頁面中,中間的頁面主要包含動漫介紹,周邊產品,但瀏覽者有了新的認識后,可以點擊下方的“點擊看漫畫”按鈕來進入第三層頁面(漫畫頁面)。而背景圖必須選擇橫圖,而且兩邊的位置要有良好的視覺效果,我們的排版雖然精簡,但是非常有視覺效果,使頁面的整體布局合理,既突出網站的主色調,又給人以凝重的感覺,同時增加頁面的可看性。
動漫介紹頁面
3.動漫排行榜展示
動漫排行榜是為了讓瀏覽者更方便更快更準確地了解到動漫的最新信息而制作的,紅色的為最熱門的TOP5,分別有:總排行、日本漫畫排行、香港漫畫排行、大陸漫畫排行等排行榜榜單。我們也會定時更新榜單,為了讓廣大讀者更快更直接地了解最新的動漫信息。
4.第三層展示
看漫畫頁面,是我們制作的重點,并且為了讓大家能看漫畫,我們專門找了類似翻頁的網頁特效,方便讀者的翻閱,而且讓網站更炫,也不容易覺得無趣及疲勞。第三層部門動漫是漫畫欣賞,有的是動漫觀看。主要是看我們更新的是什么哦~ 也可以讓各位動漫迷提前看到劇情的發展,好看又過癮啊!親。定時進入查看最新動漫吧~注冊用戶賬號,方便隨時進入看哦 送上一幅漫畫圖: 第三層頁面的設計代碼如下:
第三篇:網頁設計與制作實訓報告
《Dreamweaver網頁設計與制作案例教程》
實訓報告
專 業: 計算機網絡技術 年 級: 2013級 姓 名: 學 號: 輔導老師:
制作電子商務類網站首頁
一、網站建設的前期準備工作
1、網站整體需求分析
網站整體需求主要包括以下幾個方面: 1)網站建設背景及目標 2)網站建設現狀分析 3)網站建設目標分解
4)網站建設資金及人員投入情況分析
2、確定網站風格
根據電子商務網站的特點,確定網站的整體風格,即網站的色彩和版式。網站風格是在網站整體需求分析的基礎上,通過明確網站設計的目的和用戶需求、訪問者的特點等得出的結論。本實例是針對一個工業產品交易平臺的網站,網站與用戶交互性強,因此確定其主色調為暖色系的橘黃色給人以輕松愉快的瀏覽環境。如圖是電子商務網站的LOGO。
3、網站素材搜集
明確網站主題和劃分板塊后,接著要為后續的網站建設搜集素材。若想讓網站有聲有色,能夠吸引客戶注意,就要盡量搜集文字、圖片、音頻、視頻、動畫等多媒體素材。對于一些通用素材,可以從網上搜集得到,也可以根據需求自行制作素材,比如,通過Photoshop圖像處理軟件對圖像進行優化處理,使用Flash制作動畫等。如圖所示。
二、創建站點
1、網站建設的第一步是創建本地站點。
2、創建的站點信息將顯示在“文件”面板中。如果需要對站點參數進行修改,可以單擊“站點→管理站點”對站點進行重新設置。
三、網站主頁制作
1.使用Div+CSS布局頁面
使用Div+CSS實現頁面布局,具體操作如下:
4)為AP Div元素設置CSS樣式。由于網站首頁和子頁面采取相同的布局風格,因此樣式表采用外部鏈接樣式表。
5)選中創建的AP元素“container”,在右側的“CSS樣式”面板中單擊鼠標右鍵,選擇“新建”命令,打開“新建CSS規則”對話框,并作相應設置,如圖所示。
6)單擊確定按鈕,彈出“#container的CSS規則定義”對話框,選擇分類列表框下的“背景”選項卡,設置文檔的“背景顏色”為#FFF;在分類列表框中,切換到“區塊”選項卡,設置“文本對齊”屬性為左對齊;在分類列表框中,切換到“方框”選項卡,設置Ap Div的“寬”為960 px,“上邊界”為1 px,“下邊界”為0 px;“邊框”和“列表”選項卡的屬性保持默認設置;切換到“定位”選項卡,單擊確定按鈕,完成對“#container”元素樣式的定義。設置后的“CSS樣式”面板如圖所示。
/* ==整體布局定義開始== */ #Container { width:960px;/*定義頁面寬度*/ visibility:visible;/*設置可見度*/ margin:1px auto 0;/*設置外邊距*/ background-color: #FFF;/*定義背景顏色*/ } 2.設置頁面屬性
在style.css樣式表文件內部設置網頁的頁面屬性。頁面屬性是對
標簽屬性的設置。代碼如下所示: body{ font-size:12px;/*定義字號*/ color:#666;/*定義字體顏色*/ background:#FFF;/*定義背景顏色*/ text-align:center;/*定義文本位置*/ margin:0;/*定義外邊距*/ padding:0;/*定義外邊距*/ border:0;/*定義邊框粗細*/ background: transparent;/*定義背景透明*/ } 也可以打開index.html,選擇“修改→頁面屬性”菜單命令,在打開的“頁面屬性”對話框中進行相應設置。3.插入圖片
在頂部的“top”元素中插入一幅圖像。如圖所示。
4.添加導航條
網頁導航條是非常重要的網頁元素,網頁間的跳轉,需要通過導航條來完成。
1)將光標定位在“nav” Div元素中,在其內部輸入列表項,并為列表項的各個單元設置超鏈接。設置情況如圖所示。
2)添加CSS樣式,需要在style.css文件中輸入相關代碼。#nav { height:30px;/*定義高度*/ width:100%;/*定義寬度*/ background-color:#c00;/*定義背景顏色*/ overflow: hidden;/*定義溢出效果*/ } #nav ul { font-size:12px;/*定義字號*/ color:#FFF;/*定義字體顏色*/ line-height:30px;/*定義字體行高*/ white-space:nowrap;/*定義區塊空格*/ margin:0 0 0 30px;/*定義外邊距*/ padding:0;/*定義內邊距*/ } #nav li { list-style-type:none;/*定義列表類型*/ display:inline;/*定義區塊顯示效果*/ } #nav li a { text-decoration:none;/*定義字體修飾*/ font-family:Arial, Helvetica, sans-serif;/*定義字體*/ color:#FFF;/*定義字體顏色*/ padding:7px 10px;/*定義內邊距*/ } #nav li a:hover { color:#ff0;/*定義字體顏色*/ background-color:red;/*定義背景顏色*/ 該樣式表使用列表項實現導航菜單功能。效果如圖所示。
5.推薦廠家
1)把光標置于DIV元素“left”中,創建新的DIV元素 sideBarLefta1,并定義相關樣式
2)在DIV元素“sideBarLefta1”的內部插入推薦廠家標志及說明文字等信息,定義相關樣式如圖所示。
3)在style.css樣式表中插入下面的代碼,#left { float:left;/*定義浮動位置 */ width:640px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarLeftb1 { width:238px;/*定義寬度 */ height:240px;/*定義高度*/ border:#ebcbb4 solid 1px;/*定義邊框的顏色、粗細、樣式*/ } 6.網頁廣告設計制作
1)將光標置于div元素“#left”中,插入一個嵌套的div元素#sideBarLefta2,2)將光標置于DIV元素“banner”中,插入一個已經準備好的SWF元素。
3)選中“banner”下面DIV元素,并定義類為“hot”,在4個小DIV元素中分別插入準備好的廣告圖,效果如圖所示
style.css樣式表中插入的代碼如下: #sideBarLefta2 {
float:left;/*定義浮動位置 */ width:390px;/*定義寬度 */ height:268px;/*定義高度*/ overflow: hidden;/*定義溢出效果*/ } #banner { margin-top:5px;/*定義頂端外邊距*/ border:#999 solid 1px;/*定義邊框的顏色、粗細、樣式*/ width:390px;/*定義寬度 */ }.hot{ display:inline;/*定義區塊顯示效果*/ border:#999 1px solid;/*定義邊框的顏色、粗細、樣式*/ width:91px;/*定義寬度 */ height:70px;/*定義高度*/ float:left;/*定義浮動位置 */ margin:2px;/*定義外邊距*/ } 7.頁面右側欄目設計
1)將光標置于DIV元素“right”中,插入已經準備好的圖片service.jpg。如圖所示。
2)在service.jpg下面插入兩個div,分別定義為.sideBarRightb3和.sideBarRightb4,在新建的div中插入準備好的廣告圖像ad1.jpg和ad2.jpg并在屬性面板中定義超鏈接,效果如圖所示。
在style.css中添加的代碼如下: #right { float:left;/*定義浮動位置 */ width:320px;/*定義寬度 */ height:832px;/*定義高度 */ }.sideBarRightb3 { height:60px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/ border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細、樣式*/ }.sideBarRightb4 { height:93px;/*定義高度*/ margin-top:5px;/*定義頂端外邊距*/
border:#ebcbb4 1px solid;/*定義邊框的顏色、粗細、樣式*/ margin-bottom:5px;/*定義底端外邊距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定義文本位置 */ padding:5px;/*定義內邊距*/ } 8.行業欄目設計
1)將光標置于DIV元素“left”中,在其下側插入一個嵌套的DIV元素“sideBarLeftb2”。
2)選中Div元素“sideBarLeftb2”,將光標定位在其內部,創建多個新Div,為了方便日后的維護我們將新建Div單獨定義為.sideBarLeftb3。
3)選中DIV元素“sideBarLeftb3”,在style.css中添加的代碼如下:
sideBarLeftb3 { text-align:left;/*定義文本位置 */ float:left;/*定義浮動位置 */ height:150px;/*定義高度*/ width:280px;/*定義寬度 */ padding:4px;/*定義內邊距*/ } 4)將光標移到sideBarLeftb3的DIV元素中,插入兩行列表并對列表設置相關CSS參數。在style.css中添加的代碼如下:.sideBarLeftb3 ul { font-size:12px;/*定義字號*/ line-height:6px;/*定義字體行高*/ float:left;/*定義浮動位置 */ width:270px;/*定義寬度 */ margin:0 0 0 5px;/*定義外邊距*/ padding:0;/*定義內邊距*/ } 5)在列表中添加列表內容,代碼如下:
- 密封件
- 粉碎機
- 壓縮機
- 減速機
- 機械加工
- 焊機
- 風機
- 機床
- 彈簧
- 齒輪
- 鍋爐
- 更多
第四篇:《網頁設計與制作》綜合實訓
《網頁制作》期末大作業
一、概述:
要求設計并制作一個表達某個主題的網站,通過網站的制作,綜合運用本課程各單元所學的知識。網站的內容不能是一些素材如圖片、音樂等的堆積,必須有鮮明的主題。可以從網上下載部分資料,但不能超過整個內容的30%,更不要指望從網上下一個完整的網站應付老師。總的頁數應超過10頁(一個包含主題內容的htm文件算一頁)。請同學們注意不要下載相同的資料,如果出現網頁內容雷同,雙方都要扣分,嚴重的必須重做。
二、網站內容:
自行選擇如下內容:科普、科幻知識;公益形象宣傳;大、中、小學教學用動畫形象;奧林匹克體育;環境保護;戰爭與和平;求職;校園生活;誠信、傳統美德;交通安全;衛生與健康;愛心;教育;新青年;管理;實用工具等。自己確定一個主題,整個網站要突出主題,信息分類合理,導航清晰。要求必須有自己創作的內容,這些原創內容可以是文字、圖片、動畫等。
三、版面及格式:
l、要求圖文并茂,顏色搭配合理,但是圖片及聲音文件不要太大。如果能加入自己創作的動態元素(如Flash,Gif動畫等)將獲得加分。希望充分發揮自己的創作能力。
2、要求每個網頁都使用表格布局。
3、要求網頁中插入有Web組件,包括懸停按鈕、滾動字幕、橫幅廣告管理器等。
4、導航設計簡潔明了,不能有“死鏈接”,要保證能夠在網絡上瀏覽。
5、自創內容越多越好,得分越高。
四、遞交方式:
1、每個同學以自己的學號姓名建一個文件夾,上交時間為18周2、所做網頁的首頁文件名必須為index.htm3、所有文件名和目錄名全部使用英文字母和數字,不得使用漢字或全角符號,否則,網絡將出現死鏈接。
4、遞交時必須把網頁中所有用到的圖片、聲音、動畫等都一起上傳到服務器。網頁的總容量一般不要大于3MB5、建議將網頁中的素材分類,建立不同的子目錄存放。
五、網頁評分標準:
整個網頁的評分強調“自己的創意”,不管主題是什么,也不論是哪一個欄目的內容,如果創意獨特,有自己鮮明的個性、觀點,得分較高。
1、主題鮮明,有關主題的內容豐富(30分)
2、原創內容豐富,能體現自己的想法,文字流利通順(30分)
3、版面布局合理,整理效果美觀(20分)
4、其他內容如友情鏈接、相關資料等(5分)
5、插入的圖片等素材恰當、美觀(5分)
6、技術含量(使用了各種效果、技術等)(10分)
六、網頁制作特別注意事項:
1、網頁文件名最好全部用英文字母或數字(不能包含漢字);
2、整理圖片和其他素材;
3、在與網頁主文件(index.htm)同級的目錄中建立子目錄image(圖片)、wave(聲音)、?等,將取得的素材按類保存好,在制作網頁(即編輯HTM文件)時,必須從這些目錄中插入素材,以保證顯示正確,不能從其他目錄插入,提示另外保存圖片時,不要改變保存目錄,直接按[確定]即可。同學們要改變那種在編輯網頁時到處找圖片,找到了就往HTML文件中插的壞習慣(也不管這個文件在哪里);
4、作好筆記將對后期調試非常有利,從開始規劃起就記錄目錄名、文件名的分配,以便調試時節省時間。
第五篇:網頁與制作實訓論文范文
網頁實訓報告
新聞系統前后臺交互
組長:
組員:
指導老師:
實訓目的………………………………………………………………………2 項目思路………………………………………………………………………3 項目準備………………………………………………..…………………….4 前臺頁面主要代碼……………………………………………………………5 數據庫連接,確保登錄代碼…………………………………………………6 后臺頁面主要代碼…………………………………………….………………7 項目亮點………………………………………………………………….…..13 優點和不足之處……………………………………………………………...13 實訓總結…………………………………………………………………......14
實訓報告
實訓目的:
這次網頁與制作的實訓是鍛煉我們實踐能力重要環節,是對我們實踐工作能力的具體訓練和考察過程。隨著科學技術發展的日新月異,網頁設計制作已經成為當今計算機應用中空前活躍的領域,在生活中可以說是無處不在。因此作為二十一世紀大學生來說掌握網頁設計制作的技術能力是十分重要的。
1.進一步熟悉和掌握網站建設的基本流程和技術規范;
2.鞏固運用sublime, Dreamweaver,PhotoShop網頁制作軟件制作網頁 3.鞏固運用NatBeans,wampmanager動態網頁制作軟件制作動態網頁
4.用sublime,NetBeans,wampmanager三個軟件完成網站建設登錄前后臺任務的方法,能獨立設計一個內容完整,圖文并茂,技術運用得當的網站;
5.具備獨立撰寫實訓報告等科技文件的基本能力;
6.在網頁設計的實踐中培養分析問題,解決問題的能力,培養協作,交流的能力,培養創新和團隊意識;
7.為今后從事網站開發,維護和管理奠定基礎。通過實訓,掌握網頁設計系列軟件sublime, wampmanager軟件的使用方法,達到全面理解,運用網頁制作的知識,并使之得以融會貫通,在掌握理論知識的基礎上再加以實踐,進一步提高,加強設計,制作網站的綜合能力。
項目思路:
首先我們分為兩大塊,前臺頁面和后臺頁面。分別建文件夾web和admin。前臺:先利用我們學習的div+css布局方法+JavaScripte做好靜態頁面。接下來利用from表單+簡單的CSS樣式做好登錄頁面。然后利用fromeset分幀做好后臺框架。框架左列表為后臺首頁,用戶列表,新增用戶,新聞列表,新增新聞。接下來要完成的就是在每個列表中實現頁面效果。點擊列表能夠出現每個列表的頁面。然而要實現這個效果是要先建數據庫,再在數據庫中建表,在表中插入我們要的數據。我們要建三張表,分別為admin,user,news。再就是連接數據庫。admin表是要通過數據庫連接在后臺實現管理員登錄頁面。news表是要通過數據庫連接實現新聞增加,修改,刪除。user表是要通過數據庫連接實現用戶信息,添加用戶顯示在后臺。
項目準備:
news-info:
數據庫名
admin:
管理員登錄表名
user:
用戶注冊信息表名
news:
新聞信息表名
前臺(web):
images:
js播放圖片;
img:
登錄頁面背景圖
ht.php:
前臺靜態頁面效果圖
Style:
前臺靜態頁面樣式
config.php:
連接數據庫
conn.php:
確保登錄成功
login.php:
登錄頁面
jQuery.js:
js代碼 后臺(admin):
登錄頁面(dl):
img:
背景圖 config.php
確保登錄成功 login.php
登錄頁面
admin:
conn.php
連接數據庫
htsy.php
后臺首頁
index.php
后臺界面
left.php
框架左列表選項
news.add.php
添加新聞
news-del.php
news-upd.php
news-list.php
zcye.php
zcye-del.php
zcye-list.php
zcye-upd.php
1.前臺頁面主要代碼:
刪除新聞 新聞修改 新聞列表
添加用戶
刪除用戶 用戶列表 修改用戶
2.登錄頁面代碼:
3.連接數據庫:
4.確保登錄:
5.后臺界面代碼:
6.框架左列表代碼:
7.后臺首頁:
8.新聞列表代碼:
9.添加新聞:
10.刪除新聞:
11.修改新聞:
12.用戶列表:
13.添加用戶:
14.修改用戶:
15.刪除用戶:
16.前臺顯示后臺數據代碼:
項目亮點:
運用了兩次js代碼來實現效果,使頁面更加生動。同時也運用了驗證碼等一些小亮點。
優點:
思路清晰,充分增強了動手能力,創作能力,更加懂得團隊協作能力,對網頁設計軟件DreamWeaver,Sublime,WampServer,NetBeans,PhotoShop,JavaScript的強大運用有了很大提高。也大大提高了自己分析問題,解決問題的能力。
不足之處:
充分體現出老師教的知識并沒有完全掌握,也是根本沒有真正理解老師上課教的內容。尤其是對PHP,數據庫知識了解,懂的太少,以至于在做項目后臺過程中遇到很多問題,大大影響了整個項目的進度。
總結:
通過本次實訓我們基本掌握了制作簡單網頁,完善登陸前后臺,相互連接的過程。基本熟悉了各種軟件的綜合使用方法。實踐出真理,實訓的日子快要結束,感覺還是學到了很多,從理論和操作中融合了我們平時所學的知識,也為我們今后的學習和工作鋪墊了精彩的一幕。因此,我們堅信,只要用心去學,沒有什么是學不會的。希望今后的我們更加努力的開拓我們的極限,我們也要更加努力。通過這兩周的學習,我們也更加明白平時學習的重要性,平時認真學習的同學,經常做網頁項目的同學,明顯做整個項目很輕松,整個項目做得也非常好。所以,我們平時的學習是不能馬虎的,一分耕耘一分收獲。當然,在制作過程中也出現了很多問題,我們小組先一起討論,一起查找問題,研究問題,最后也能發現出問題我們會一起解決。我明白這就是團隊的力量,不可小覷。當然也有解決不了的問題,我們會請教他人大家互相幫助,共同進步。有時候解決不了問題的時候,一次又一次在修改代碼,運行不出來時,我們會很著急失去耐心,也想放棄。可還是咬牙堅持下來了,堅持就是勝利。做項目真的需要更多的耐心和能力。我們還有很多能力需要提高,還有很多不足需要在今后生活中慢慢改進。這次實訓也收獲了很多,和我們的組員學到了很多,我們一起學習,一起進步。最大的收獲還是覺得老師講課很幽默,知識點講解的很透徹,讓我們能很容易去理解。遇到不理解的問題老師會很耐心的跟我們講解,還用起了畫圖方法,真的很形象生動。這次實訓真的很充實。在這,我表示深深的感謝!感謝我的小組成員,感謝幫助過我的同學,感謝我們的老師!


文檔為doc格式
聲明:本文內容由互聯網用戶自發貢獻自行上傳,本網站不擁有所有權,未作人工編輯處理,也不承擔相關法律責任。如果您發現有涉嫌版權的內容,歡迎發送郵件至:645879355@qq.com 進行舉報,并提供相關證據,工作人員會在5個工作日內聯系你,一經查實,本站將立刻刪除涉嫌侵權內容。
網頁設計與制作實訓報告要求
《網頁設計與制作》實訓報告要求 一、實訓報告寫作內容 (一)實訓題目 (二)實訓目的:說明這門課程實訓的目的是什么 (三)實訓思想:靜態網站設計制作中用了哪些所學的知識點 (四)網站設......
網頁設計與制作實訓報告[范文]
《網頁設計與制作》 實習報告指導老師: 實習地點: 實習時間: 實習班級: 學生姓名: 一、實習目的 ① 學會制作新聞發布系統。 ② 學會制作在線調查系統。 ③ 熟悉購物網站的主要功......
靜態網頁設計與制作 實訓報告
靜態網頁設計與制作 實訓報告這一周我們進行了為期一周的靜態網頁設計與制作的實訓。在這一個星期中我感觸很多,無論是從網站的剛開始的主題的確定設計還是后期的網站的發布......
網頁制作實訓報告
《網站設計與制作》實訓報告 X學院XX班XXX號 一.實訓時間: 2010年6月7日到2010年6月13日 二.實訓地點: XXX學院XXX班級 三.實訓組員: XXX、XXX 四.實訓目標: 運用網頁設計方法,設計一......
網頁設計與制作實訓計劃和考核.
網頁設計實訓方案 一、實訓的和要求: (1掌握一般網站設計的基本思路和流程。 (2培養學生獨立創作網頁、建設網站的能力。 (3要求學生獨立制作網頁,在網頁中要融入 Flash 動......
《網頁設計與制作綜合實訓》實訓指導書5篇
武漢商貿職業學院 信息工程學院 《網頁設計與制作綜合實訓》實訓指導書 軟件教研室 2013年9月 《網頁設計與制作綜合實訓》實訓指導書 目錄 實訓目的 ...........................
網頁設計與制作實訓報告(推薦閱讀)
學生姓名:實習班級:指導老師:實習地點:實習時間:一、實習目的 1. 掌握企業網站主要功能欄目 2. 掌握企業網站色彩搭配和風格創意 3. 掌握網站設計的首頁 4. 掌握模板的創建 5. 熟悉系......
網頁設計實訓
網站名稱:微言微語個人主頁 班級:J09301班,J09302班 學生姓名: 指導老師:李向 實訓時間:2010.12.6—2010.12.22 2010年下期網頁設計課程實訓報告 一、實習目的: 通過教學實習掌握站......