中級網(wǎng)頁設計之網(wǎng)頁布局

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

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

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

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

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

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

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

8、_main”div標簽內(nèi)嵌套一個2行1列寬度為100%的表格。c）為“message_main”div標簽在css.css中定義一個css類。要求：文本屬性為：宋體、12像素、1.5倍行高、深綠色（#287700）；背景顏色為：淺綠色（#DEF1B1）；邊框樣式從效果圖判斷，粗細為1像素，深綠色（#287700）。d）在嵌套表格的第1行輸入文本“請在此留言”，居中顯示。e）在嵌套表格的第2行，再嵌套一個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）“來自”表單域名稱：fromcity，類型：text；e）“郵箱地址”表單域名稱：mailbox，類型：text；f）“性別”表單域名稱：sex，類型：select，選項：保密、男、女；g）“主頁”表單域名稱：webpage，類型：text；h)“內(nèi)容”表單域名稱：messageinfo,類型：textarea；1.1.3=1、操作內(nèi)容：利用素材庫文件夾“網(wǎng)頁設計制作員素材1.1.3”內(nèi)的“1.1.3.2文件夾”中的網(wǎng)頁文件，參照樣張“1.1.3.1.bmp”，完

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

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

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

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

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

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

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

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

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

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