中級(jí)網(wǎng)頁(yè)設(shè)計(jì)之網(wǎng)頁(yè)布局

1、網(wǎng)頁(yè)布局1.1.1=1、操作內(nèi)容：利用素材庫(kù)文件夾“網(wǎng)頁(yè)設(shè)計(jì)制作員素材1.1.1”內(nèi)的“1.1.1.2文件夾”中的網(wǎng)頁(yè)文件，參照樣張“1.1.1.1.bmp”，完成論壇注冊(cè)頁(yè)面的制作，具體操作內(nèi)容如下：（1）編輯素材庫(kù)文件夾“1.1.1.2” 內(nèi)的“zc.html”，按照要求插入圖片并添加文字（2）為“zc.html”頁(yè)面的布局表格設(shè)置背景（3）為“zc.html”頁(yè)面設(shè)置統(tǒng)一的字體（4）制作“zc.html”頁(yè)面的“檢查用戶名”區(qū)域內(nèi)容（5）制作“zc.html”頁(yè)面的“填寫信息”區(qū)域內(nèi)容（6）保存操作結(jié)果操作要求（1）考生務(wù)必在指定位置建立考生文件夾，并在其下建立“1.1.1”子目錄，將所

2、有操作結(jié)果保存至該文件夾下。（2）用Dreamweaver編輯素材庫(kù)文件夾“1.1.1.2”的“zc.html”，參照效果圖樣張“1.1.1.1.bmp”，在布局表格內(nèi)適當(dāng)位置插入文件夾“1.1.1.2”中的圖片“imageszc-1.jpg”，并添加說(shuō)明文本“用戶注冊(cè)”（3）參照效果圖樣張“1.1.1.1.bmp”，用素材庫(kù)文件夾“1.1.1.2”中的圖片“imageszc-4.gif” 設(shè)置布局表格單元格背景（4）用CSS樣式表為“zc.html”整個(gè)頁(yè)面布局表格的單元格，設(shè)置統(tǒng)一的字體a)大?。?2像素；b)行高：2倍行高；c)CSS樣式采用內(nèi)部標(biāo)簽形式。（5）參照效果圖樣張“1.1.1

3、.1.bmp”，按以下要求制作“zc.html”頁(yè)面上的“檢查用戶名”區(qū)域內(nèi)容a)參照效果圖樣張“1.1.1.1.bmp”，為給定文本設(shè)定CSS樣式。b)參照效果圖樣張“1.1.1.1.bmp”，為布局表格特定位置設(shè)定CSS樣式，并應(yīng)用該樣式。c)參照效果圖樣張“1.1.1.1.bmp”，在布局表格內(nèi)適當(dāng)位置添加給定文本，并為文本內(nèi)容應(yīng)用CSS樣式。d) 參照效果圖樣張“1.1.1.1.bmp”，在布局表格內(nèi)適當(dāng)位置添置和制作表單以及表單對(duì)象，并設(shè)置表單對(duì)象的動(dòng)作屬性為無(wú)。（6）參照效果圖樣張“1.1.1.1.bmp”，按以下要求制作“zc.html”頁(yè)面上的“填寫信息”區(qū)域內(nèi)容a)在布局表格

4、適當(dāng)位置，按效果圖樣張，添加文本“（帶*的為必填項(xiàng)）”，按效果圖設(shè)置文本顏色和對(duì)齊方式。b)參照效果圖樣張，在布局表格適當(dāng)位置制作嵌套表格并在表格內(nèi)制作“提示問題”、“性別”、“電子郵件”表單項(xiàng)。c)為文本“推薦：QQ郵箱”設(shè)置鏈接“”，為“sogou郵箱”設(shè)置鏈接“”e)參照效果圖樣張，在布局表格的適當(dāng)位置插入相應(yīng)表單元素，表單對(duì)象的動(dòng)作屬性為“提交”。（7）將操作結(jié)果相關(guān)文件全部保存至考生文件夾下1.1.1目錄。（關(guān)鍵步驟，如未保存結(jié)果，整個(gè)題目都不得分）1.1.2=1、利用素材庫(kù)文件夾“網(wǎng)頁(yè)設(shè)計(jì)制作員素材1.1.2”內(nèi)的“1.1.2.2文件夾”中的網(wǎng)頁(yè)文件，參照樣張“1.1.2.1.bm

5、p”，完成頁(yè)面的制作，具體操作內(nèi)容如下：（1）使用Dreamweaver創(chuàng)建“留言板”站點(diǎn)（2）依據(jù)效果圖樣張1.1.2.1.bmp創(chuàng)建留言板網(wǎng)頁(yè)布局表格（3）參照效果圖樣張1.1.2.1.bmp，在表格第一行制作留言板頭部分（4）參照效果圖樣張1.1.2.1.bmp，編輯表格第二行（5）參照效果圖樣張1.1.2.1.bmp，在表格第三行制作“請(qǐng)?jiān)诖肆粞浴辈糠郑?）參照效果圖樣張1.1.2.1.bmp完成留言板的制作，并保存結(jié)果3、操作要求（1）考生務(wù)必在指定位置建立考生文件夾，并在其下建立1.1.2子目錄，將所有操作結(jié)果保存至該文件夾下。（2）使用Dreamweaver創(chuàng)建“留言板”站點(diǎn)，具

6、體要求如下：a）使用Dreamweaver在指定保存位置創(chuàng)建“message2.2”站點(diǎn)文件夾b）復(fù)制未全部完成的留言板網(wǎng)頁(yè)素材庫(kù)文件夾“1.1.2.2”內(nèi)的網(wǎng)頁(yè)html文件及圖片至“留言板”站點(diǎn)文件夾目錄；（3）依據(jù)效果圖樣張1.1.2.1.bmp創(chuàng)建留言板網(wǎng)頁(yè)布局表格，具體要求如下：a）用Dreamweaver編輯“message.html”，按效果圖樣張，在布局表格相應(yīng)單元格內(nèi)嵌套一個(gè)3行1列，寬度為640像素的表格；（4）參照效果圖樣張1.1.2.1.bmp，應(yīng)用CSS+DIV技術(shù)，在表格第一行制作留言板頭部分，具體要求如下:a）在相應(yīng)單元格內(nèi)嵌套一個(gè)id和名稱均為“message_t

7、op”的div標(biāo)簽。b）在css.css中為div標(biāo)簽“message_top”定義一個(gè)CSS樣式。要求設(shè)置字體屬性為：宋體、14像素、2倍行高、白色；背景顏色綠色（#64C31F）；邊框?yàn)?像素的深綠色（#287700）實(shí)線。c）在div標(biāo)簽內(nèi)輸入文本“留言板”，并居中對(duì)齊（5）參照效果圖樣張1.1.2.1.bmp，編輯表格第二行，具體要求如下:a）在表格第二行內(nèi)插入水平線（6）參照效果圖樣張1.1.2.1.bmp，應(yīng)用CSS+DIV技術(shù)，在表格第三行制作“請(qǐng)?jiān)诖肆粞浴辈糠?，具體要求如下:a）在相應(yīng)單元格內(nèi)嵌套一個(gè)id和名稱均為“message_main”的div標(biāo)簽。b）在“message

8、_main”div標(biāo)簽內(nèi)嵌套一個(gè)2行1列寬度為100%的表格。c）為“message_main”div標(biāo)簽在css.css中定義一個(gè)css類。要求：文本屬性為：宋體、12像素、1.5倍行高、深綠色（#287700）；背景顏色為：淺綠色（#DEF1B1）；邊框樣式從效果圖判斷，粗細(xì)為1像素，深綠色（#287700）。d）在嵌套表格的第1行輸入文本“請(qǐng)?jiān)诖肆粞浴?，居中顯示。e）在嵌套表格的第2行，再嵌套一個(gè)5行3列，寬度為100%的表格。（7）參照效果圖樣張1.1.2.1.bmp完成留言板的制作，并保存結(jié)果，具體要求如下：a）表單名：messageForm，表單操作：save.aspx，metho

9、d：post；b） “您的大名”表單域名稱：yourname，類型：text；c）“QQ”表單域名稱：qqno，類型：text；d）“來(lái)自”表單域名稱：fromcity，類型：text；e）“郵箱地址”表單域名稱：mailbox，類型：text；f）“性別”表單域名稱：sex，類型：select，選項(xiàng)：保密、男、女；g）“主頁(yè)”表單域名稱：webpage，類型：text；h)“內(nèi)容”表單域名稱：messageinfo,類型：textarea；1.1.3=1、操作內(nèi)容：利用素材庫(kù)文件夾“網(wǎng)頁(yè)設(shè)計(jì)制作員素材1.1.3”內(nèi)的“1.1.3.2文件夾”中的網(wǎng)頁(yè)文件，參照樣張“1.1.3.1.bmp”，完

10、成頁(yè)面的制作，具體操作內(nèi)容如下： （1）使用Dreamweaver創(chuàng)建“神話”站點(diǎn)，并導(dǎo)入素材庫(kù)文件夾“1.1.3.2”內(nèi)容；（2）編輯首頁(yè)“index.html”，創(chuàng)建login表單；（3）參照效果圖樣張1.1.3.1.bmp，在login表單中插入表單域； （4）使用代碼編輯方式，在插入的表單標(biāo)簽后添加代碼；（5）參照效果圖樣張1.1.3.1.bmp，在指定區(qū)域插入圖片。3、操作要求（1）考生務(wù)必在指定位置建立文件夾，并在其下建立“1.1.3”子目錄，將所有操作結(jié)果保存至該文件夾下。（2）使用Dreamweaver創(chuàng)建“神話”站點(diǎn)，并導(dǎo)入素材庫(kù)文件夾“1.1.3.2”內(nèi)容，具體要求如下：a

11、）使用Dreamweaver在指定保存位置創(chuàng)建“Shenhua1.1.3”站點(diǎn)文件夾b）復(fù)制素材庫(kù)文件夾“1.1.3.2”內(nèi)的網(wǎng)站首頁(yè)html文件及圖片文件夾至“Shenhua1.1.3”站點(diǎn)文件夾目錄；（3）編輯首頁(yè)“index.html”，創(chuàng)建login表單，具體要求如下：a）在id為“l(fā)ogin”的div標(biāo)簽區(qū)域內(nèi)，插入一個(gè)表單標(biāo)簽，id和表單名稱均為“form1”，方法為“post”；（4）參照效果圖樣張1.1.3.1.bmp，在login表單中插入表單域，具體要求如下:a）插入一個(gè)id和名稱均為“button”的圖像域，顯示圖片“images/808.jpg”，Tab鍵索引值為4b）

12、在div.css中為“button”圖像域新建一個(gè)css類，設(shè)置方框浮動(dòng)方式為右對(duì)齊，方框上邊界為5像素c）參照效果圖樣張1.1.3.1.bmp，輸入文本“用戶名：”，在文本后面，插入一個(gè)id和名稱均為“l(fā)ogin_name”，類型為“文本”的文本域，Tab鍵索引值為1d）參照效果圖樣張1.1.3.1.bmp，輸入文本“密碼：”，在文本后面，插入一個(gè)id和名稱均為“l(fā)ogin_pass”，類型為“密碼”的文本域，Tab鍵索引值為2e）參照效果圖樣張2.3.1.bmp，輸入文本“通行證：”，在文本后面，插入一個(gè)id和名稱均為“l(fā)ogin_number”，類型為“文本”的文本域，Tab鍵索引值為3

13、f）將“div.css”中修改相應(yīng)的CSS類，將插入的文本域的背景顏色修改為：#313131（5）使用代碼編輯方式，在插入的表單標(biāo)簽后添加如下代碼:<ul> <li><img src="images/809.jpg" width="87" height="23" /><img src="images/810.jpg" width="87" height="23" />注冊(cè)新的用戶名/通行證</li><li>

14、;找回用戶密碼</li></ul>（6）參照效果圖樣張1.1.3.1.bmp，在指定區(qū)域插入圖片，具體要求如下:a）參照效果圖樣張，在id為“pic”的div標(biāo)簽區(qū)域內(nèi)插入三張圖片“images/812.gif”、“images/813.gif”、“images/814.gif”。1.1.4=1、利用素材庫(kù)文件夾“網(wǎng)頁(yè)設(shè)計(jì)制作員素材1.1.4”內(nèi)的“1.1.4.2文件夾”中的未全部完成的留言板網(wǎng)頁(yè)素材庫(kù)文件，參照留言板”頁(yè)面效果圖樣張“1.1.4.1.bmp”，完成頁(yè)面的制作，具體操作內(nèi)容如下：（1）使用Dreamweaver創(chuàng)建“莘莘學(xué)子”站點(diǎn)，并導(dǎo)入素材庫(kù)文件夾“1

15、.1.4.2”內(nèi)容；（2）編輯導(dǎo)入素材庫(kù)文件內(nèi)的 “css.css”中的body類，修改body屬性；（3）參照效果圖樣張1.1.4.1.bmp，在留言板區(qū)域內(nèi)相應(yīng)單元格內(nèi)插入留言板頂部居中對(duì)齊的div標(biāo)簽； （4）參照效果圖樣張1.1.3.1.bmp，在留言板區(qū)域內(nèi)相應(yīng)單元格內(nèi)插入留言板留言信息居中對(duì)齊的div標(biāo)簽。3、操作要求（1）考生務(wù)必在指定位置建立考生文件夾，并在其下建立“1.1.4”子目錄，將所有操作結(jié)果保存至該文件夾下。（2）使用Dreamweaver創(chuàng)建“莘莘學(xué)子”站點(diǎn)，并導(dǎo)入素材庫(kù)文件夾“1.1.4.2”內(nèi)容，具體要求如下：a）使用Dreamweaver在指定保存位置創(chuàng)建“X

16、inxin1.1.4”站點(diǎn)文件夾b）復(fù)制素材庫(kù)文件夾“1.1.4.2”內(nèi)的網(wǎng)頁(yè)html文件及圖片文件夾至“Xinxin1.1.4”站點(diǎn)文件夾目錄；（3）編輯導(dǎo)入素材庫(kù)文件內(nèi)的 “css.css”中的body類，修改body屬性，具體要求如下：a）設(shè)置文本屬性為：宋體、12像素、1.3倍行高、深灰色（#666666）；（4）參照效果圖樣張1.1.4.1.bmp，在留言板區(qū)域內(nèi)相應(yīng)單元格內(nèi)插入留言板頂部居中對(duì)齊的div標(biāo)簽，具體要求如下:a）參照效果圖樣張，在留言板區(qū)域內(nèi)，在相應(yīng)單元格內(nèi)插入一個(gè)id為“message_top”，居中對(duì)齊的div標(biāo)簽，b）在“message_top”內(nèi)添加文本“請(qǐng)?jiān)?/p>

17、此留意”c）為div標(biāo)簽“message_top”，在css.css內(nèi)為“message_top” div標(biāo)簽設(shè)置css類。文本屬性為：宋體，14像素，加粗，黑色，1.5倍行高；背景顏色為：#C8EA9D；邊框樣式參照樣張，邊框顏色為：#006600，邊框粗細(xì)為1像素。（5）參照效果圖樣張1.1.4.1.bmp，在留言板區(qū)域內(nèi)相應(yīng)單元格內(nèi)插入留言板留言信息居中對(duì)齊的div標(biāo)簽，具體要求如下:a）參照效果圖樣張，在留言板區(qū)域內(nèi)，在相應(yīng)單元格內(nèi)插入一個(gè)id為“message_main”，居中對(duì)齊的div標(biāo)簽b）插入一個(gè)類型為“文本”，id和名稱均為“name”的文本字段，標(biāo)簽文字為“您的姓名：”；

18、Tab索引鍵為1；文本域字符寬度為10。c）插入一個(gè)id和名稱均為“sex”的列表/菜單，標(biāo)簽文字為“性別：”；Tab索引鍵為2；列表項(xiàng)為：男、女。d）插入一個(gè)類型為“文本”，id和名稱均為“age”的文本字段，標(biāo)簽文字為“年齡：”；Tab索引鍵為3；文本域字符寬度為10。e）插入一個(gè)id和名稱均為“content”的文本區(qū)域，標(biāo)簽文字為“內(nèi)容：”；Tab索引鍵為4；字符寬度為40，行數(shù)5。f）插入一個(gè)id和名稱均為“ok”的按鈕，按鈕文本為“提交內(nèi)容：”；Tab索引鍵為5，動(dòng)作為提交表單。g）為div標(biāo)簽“message_main”，在css.css內(nèi)為“message_main”div標(biāo)簽

19、設(shè)置css類。文本屬性為：宋體，12像素，黑色，1.5倍行高；背景顏色為：#EFF9E3；邊框樣式參照樣張，邊框顏色為：#006600，邊框粗細(xì)為1像素。1.1.5=1、利用素材庫(kù)文件夾“網(wǎng)頁(yè)設(shè)計(jì)制作員素材1.1.5”內(nèi)的未全部完成的網(wǎng)站首頁(yè)素材庫(kù)文件夾“1.1.5.2”，參照“翠海幼兒園”網(wǎng)站首頁(yè)效果圖樣張“1.1.5.1.bmp”，完成頁(yè)面的制作，具體操作內(nèi)容如下：（1）使用Dreamweaver創(chuàng)建“翠海幼兒園”站點(diǎn)，并導(dǎo)入素材庫(kù)文件夾“1.1.5.2”內(nèi)容；（2）編輯“index.html”文件，定義一個(gè)僅對(duì)文檔內(nèi)部起效名為“myfont”的CSS類；（3）參照效果圖樣張1.1.5.1.bmp中“登錄區(qū)域”，制作網(wǎng)頁(yè)。 3、操作要求（1）考生務(wù)必在指定位置建立考生文件夾，并在其下建立“1.1.5”子目錄，將所有操作結(jié)果保存至該文件夾下。（2）使用Dreamweaver創(chuàng)建“翠海幼兒園”站點(diǎn)，并導(dǎo)入素材庫(kù)文件夾“1.1.5.2”內(nèi)容