网页设计与制作实训指导书_第1页
网页设计与制作实训指导书_第2页
网页设计与制作实训指导书_第3页
网页设计与制作实训指导书_第4页
网页设计与制作实训指导书_第5页
已阅读5页，还剩70页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作》实训指导书目录第一部分实训概述 1一、实训环境 1二、实训内容和时间安排 1三、实训报告要求 2四、实训成绩评定、考核办法 2第二部分单元实训 3实训一唐诗网页制作 3一、实训目的 3二、知识要点 3三、素材准备 4四、实训内容 4五、实训步骤 4六、注意事项 6七、参考效果 7八、拓展训练 7实训二林书豪个人网页制作 8一、实训目的 8二、知识要点 8三、素材准备 8四、实训内容 9五、实训步骤 9六、注意事项 10七、拓展训练 10实训三桂林旅游网首页制作 11一、实训目的 11二、知识要点 11三、素材准备 11四、实训内容 11五、实训步骤 11六、注意事项 13七、参考效果 13实训四易购网CSS的应用 14一、实训目的 14二、知识要点 14三、素材准备 14四、实训内容 14五、实训步骤 14六、拓展训练与思考 15实训五百度搜索结果网页制作 16一、实训目的 16二、知识要点 16三、素材准备 16四、实训内容 16五、实训步骤 16六、参考效果 18实训六导航菜单制作 19一、实训目的 19二、知识要点 19三、素材准备 19四、实训内容 19五、实训步骤 20六、拓展训练 21实训七中国音乐榜网页制作 24一、实训目的 24二、知识要点 24三、素材准备 24四、实训内容 24五、实训步骤 25六、注意事项 27七、拓展训练 28实训八注册会员网页制作 32一、实训目的 32二、知识要点 32三、素材准备 32四、实训内容 32五、实训步骤 32六、拓展训练 35实训九互通ICP设备管理系统内容页制作 39一、实训目的 39二、知识要点 39三、素材准备 40四、实训内容 40五、实训步骤 41实训十桂林概况网页制作 44一、实训目的 44二、知识要点 44三、素材准备 44四、实训内容 44五、实训步骤 44六、拓展训练 48实训十一互通ICP设备管理系统首页制作 50一、实训目的 50二、知识要点 50三、素材准备 50四、实训内容 50五、实训步骤 50六、注意事项 55实训十二网页特效-网页中显示当前日期 56一、实训目的 56二、知识要点 56三、素材准备 56四、实训内容 56五、实训步骤 56七、拓展训练 58实训十三风景相册网页 59一、实训目的 59二、知识要点 59三、素材准备 59四、实训内容 59五、实训步骤 59六、注意事项 62七、拓展训练 62实训十四页签效果网页 63一、实训目的 63二、知识要点 63三、素材准备 63四、实训内容 63五、实训步骤 63实训十五下拉菜单制作 66一、实训目的 66二、知识要点 66三、素材准备 66四、实训内容 66五、实训步骤 66六、注意事项 68第三部分综合实训 69一、实训目的 69二、知识目标 69三、能力目标 69四、实训内容与步骤 69五、实训要求 70六、拓展思考 70PAGE71第一部分实训概述《网页设计与制作》课程是信息科学与工程学院计算机应用技术、计算机网络技术等专业开设的一门专业必修课程，是为满足行业企业进行网站建设对网页设计制作人员的需求而开设。本课程主要培养学生具有网页设计与制作的基本技能：懂网页制作的基本语言html，熟练应用CSS设置网页样式，能运用DIV+CSS进行网页布局，会在网页中嵌入JavaScript代码制作简单的网页特效，能够使用专业的网页制作工具Dreamweaver设计制作常见网页的静态网页，为后续课程《动态网站开发》的学习打下良好的基础。一、实训环境电脑需安装有Dreamweaver软件，最好与互联网相连，以便学生能够浏览借鉴优秀网站，搜集相关素材等。二、实训内容和时间安排序号实训内容学时备注1实训一唐诗页面制作22实训二林书豪个人网页制作23实训三桂林旅游网首页制作24实训四易购网CSS的应用15实训五百度搜索结果网页制作26实训六导航菜单制作27实训七中国音乐榜网页制作18实训八注册会员网页制作29实训九互通ICP设备管理系统内容页制作210实训十桂林概况网页制作411实训十一互通ICP设备管理系统首页制作412实训十二网页中显示当前日期113实训十三风景相册网页114实训十四页签效果网页215实训十五下拉菜单页面制作216综合实训30三、实训报告要求实训报告格式参照《网页设计与制作》课程设计报告模板，主要包括网站名称、网站主题与栏目设计、网站首页设计、网站其他页面的设计、实训总结等内容，排版按照模板格式要求做。四、实训成绩评定、考核办法序号考核项目评分比例1网站效果（1）内容方面：主题明确，内容健康、具体，各个页面的文字、图像、动画能够清晰地表达主题。70%（2）版面结构：版面结构合理，每个页面都有返回上一级或链接到其他页面的文字或按钮。（3）视觉感受：色彩搭配协调、美观，页面设计规范，没有出现乱码、空链接和错误链接。（4）网站风格：网站具有特色，主题、文字、图像、动画有创新。2纪律考核实训期间组织纪律性强，无迟到、早退、缺课现象10%3创新情况制作的网页具有独创性，构思巧妙、有新意5%4成员协作所有的成员在规定时间内完成实训任务，无雷同或抄袭现象。5%5实训报告实训报告格式规范，重点突出，内容充实，实训收获较大10%合计100%五、参考资料1.DIV+CSS网页样式与布局，何丽编著，清华大学出版社2.网页设计与制作实用教程（第2版），陈承欢编著，人民邮电出版社3.DreamweaverCS3网页制作案例教程，陈承欢编著，高等教育出版社4.网页设计与制作，陈旭东编著，北京大学出版社5.w3school/6.网页设计师联盟/7.网页教学网/8.标准之路/index.shtml9.网页设计与制作精品课程网站

第二部分单元实训实训一唐诗网页制作一、实训目的1.熟悉html文档的基本结构2.熟悉Dreamweaver的安装、启动与退出方法3.熟悉Dreamweaver的工作界面4.学会创建与管理本地站点5.熟悉对网页文档的基本操作新建、打开、保存、关闭6.熟悉html常见文本标签<p>…</p>、<br/>、<hr/>等7.掌握常见的图像格式及图像的插入方法8.掌握特殊符号的输入二、知识要点1.html文件的基本结构：<html><head><title>网页标题</title></head><body>网页内容</body></html>2.html的版本信息<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">…</html>3.XHTML语法规范（1）标记和属性名必须使用小写。（2）标记之间无交叉嵌套。<ul><li>正确的无序列表</li></ul>（3）标记必须要封闭。<imgsrc="*.gif"/>或<imgsrc="*.gif"></img>（4）属性值必须用引号包括。<tablewidth="500"border="0">（5）属性不可缩写。<inputname="rb_weather"type="radio"value="rain"checked="checked"/>（6）利用ID属性取代name属性<imgsrc=“pic01.gif"id="pic01"name="pic01"/>4.标题标记<hn>…</hn>,n取值范围1-65．分段标记<p>…</p>非空元素标记，在XHTML1.0中必须成对使用。语法格式：<palign="center">段落内容</p>属性说明：align（对齐）属性的属性值有三个参数：left（左对齐，默认）、center（居中对齐）和right（右对齐）。6．换行标记<br/>空元素标记，能够使文档强制换行，与p标记分段不同，<br/>只是在该段内进行换行。7.区块标记<div>…</div>div标记是为HTML文档内大块内容提供结构的容器。在div中可以包含各种网页元素，如文字、图片、动画、表格、表单等等。语法格式：<divid=“top”>文本内容</div>。8.水平线标记<hr/>9.图片标记<imgsrc="wangzhihuan.jpg"width="158"height="200"align="right"/>8.特殊字符输入，&开始，；结束。三、素材准备网页制作所需素材见“唐诗素材”文件夹。四、实训内容创建一个如唐诗素材文件夹下“唐诗.jpg”所示的网页，网页文件名为tangshi.htm,要求网页的标题是“唐诗”，保存到E盘webpage文件夹中。五、实训步骤（一）使用Windows操作系统自带的记事本程序编写一个网页。1.在E盘下建立一个以webpage命名的文件夹，在webpage文件夹下建立子文件夹tangshi；将唐诗素材中的images文件夹拷贝到tangshi文件夹下。2.在E:\webpage\tangshi文件夹下右击鼠标，新建一个文本文档，输入以下代码：<html><head><title>唐诗</title></head><body><h2>登鹳雀楼</h2><h4>唐王之涣</h4><p>白日依山尽，</p><p>黄河入海流。</p><p>欲穷千里目，</p><p>更上一层楼。</p></body></html>3.保存该文档为tangshi.html4.用浏览器打开预览网页效果（二）使用Dreamweaver创建与管理站点1.创建站点：在Dreamweaver文档窗口中，依次单击“站点”菜单→“新建站点”命令，打开“站点定义”对话框。将站点命名为唐诗，点击“下一步”；选择“否，我不想使用服务器技术”，点击“下一步”；把文件存储在“E:\webpage\tangshi\”，点击“下一步”；如何连接到远程服务器，选“无”；点击完成站点创建。2.管理本地站点选择“站点”面板“文件”菜单中对应命令，即可对选取文件进行编辑操作。例如，选择文件后，在“站点”面板中选择“文件”菜单中的“打开”命令，则Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。在对站点中的文件或文件夹进行操作时，合理地使用右键快捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标右键，然后选择“新建文件夹”命令，可以在相应文件夹中新建一个文件夹。3、管理站点具体操作步骤如下：在站点菜单中单击“管理站点”，打开“管理站点”对话框，如图所示。选中站点后，点击“编辑”，即可对站点进行修改。图1-1管理站点对话框（三）继续编辑制作tangshi.html1.在Dreamweaver下打开tangshi.html,切换到设计视图，从“唐诗文字.txt”中将注释、作者简介等文字拷贝到网页文件中。2.将“注释”、“作者简介”设为标题4，在“注释”、“作者简介”前插入水平线，按照效果图在1-8注释后按Shift+Enter换行；3.在“王之涣（688─742），盛唐诗人。”后插入图片；方法“插入”菜单—>“图像”命令，找到要插入的图片wangzhihuan.jpg,设置图像居右显示。代码为：<imgsrc="images/wangzhihuan.jpg"width="158"height="200"align="right"/>4.特殊符号的输入：唐王之涣之间的黑色圆点，输入方法：“插入”菜单—>HTML—>特殊字符—>其他字符，切换到代码视图下，其对应的html代码为·空格的html代码为 5.<div>标记，将古诗设为水平居中，代码如下：<divid="poem"align="center"><h2>登鹳雀楼</h2><h4>唐·王之涣</h4><p>白日依山尽，</p><p>黄河入海流。</p><p>欲穷千里目，</p><p>更上一层楼。</p></div>六、注意事项1.标记之间无交叉嵌套。2.图片标记的路径要准确3.按Shift+Enter换行，直接按Enter生成段落4.设置文字、图片格式时应先选中该元素5.属性值的引号、html标记符号为英文状态下的符号七、参考效果图1-2唐诗网页效果图八、拓展训练在唐诗网页制作完成的基础上，同学们可以进一步进行以下拓展练习：1.水平线颜色、粗细、宽度的设置2.图片居左、居中、居右的设置，设置图片的大小3.网页文字字体、大小、颜色的设置4.网页背景色、背景图片的设置5.版权符号、小于号、大于号等特殊字符的输入

实训二林书豪个人网页制作一、实训目的1.掌握超链接标记<a>…</a>2.掌握网页中设置文本超级连接的方法；掌握设置图片超级连接的方法；锚点超链接的实现3.熟悉列表标记<ul>…</ul>，掌握列表的建立方法.列表标记可以将网页中相关的信息有条不紊地组织起来。作为块级元素，在DIV+CSS的网页设计中列表标记的使用非常普遍。二、知识要点1.超链接标记<a>...</a>，语法格式：<ahref="/"

target="_blank"title="百度百科">百度百科</a>2.锚记链接，用于页面内跳转：<aname="锚记名称"></a><ahref="#锚记名称">链接文字</a>3.邮件链接<ahref="mailto:rizhaoxinxi@163.com">联系我们</a>4.无序列表标记<ul>…</ul>语法格式：<ul><litype="circle">列表项1</li><litype="square">列表项2</li>

…

</ul>5.有序列表标记<ol>…</ol>语法格式：<ol><li>列表项1</li><li>列表项2</li>…</ol>三、素材准备网页制作所需素材见“林书豪”文件夹。四、实训内容根据已经提供的素材制作网页linshuhao.htm,为网页添加相应的超链接，保存到E盘下webpage文件夹中。要求：1.点击“首页”二字时，可以访问百度百科首页。百度百科网址为：2.点击图片“百度百科”时，可以访问百度百科首页。3.点击“联系我们”能启动电脑上相应的邮件程序给rizhaoxinxi@163.com写信4.个人简介、早年经历、高中生涯、大学生涯、职业生涯制作成列表5.点击“个人简介”，跳转到当前页面个人简介处；点击“早年经历”，跳转到早年经历内容处，其他项目类推。在每个项目后面输入“返回”，当点击返回时，能够返回到页面顶端。五、实训步骤1.启动Dreamweaver，按照实训一的方法新建站点“林书豪”，打开网页文件linshuhao.html2.选中“百度百科”图片，在属性面板中的“链接”框内输入网址，在“目标”下拉菜单中选择“_blank”,超链接即可在新开窗口中打开；选择“_self”,在当前窗口中打开网页。代码为：<ahref=""target="_blank"><imgsrc="images/logo-baike.png"width="137"height="46"/></a>3.选中“首页”二字，在属性面板中的“链接”框内输入网址；在“标题”框内输入“百度百科”，代码如下：<ahref=""title="百度百科">首页</a>4.选中“联系我们”四字，在属性面板中的“链接”框内输入mailto:rizhaoxinxi@163.com，即可制作电子邮件超链接。5.保存所做网页，按F12键预览网页，点击相应的超链接查看效果。6.无序列表的制作：选中“个人简介、早年经历、高中生涯、…国际赛场”，单击“格式”菜单->“列表”->“项目列表”命令，将选中的文本设置为项目列表。代码变为：<ul><li>个人简介</li><li>早年经历</li><li>高中生涯</li><li>大学生涯</li><li>职业生涯</li><li>国际赛场</li></ul>7.制作指向本页内的超级链接,即锚点链接，分两步：首先，将光标定位到第二个“个人简介”前，单击“插入”菜单->“命名锚记”，弹出“命名锚记”对话框，输入锚记名称“jianjie”。代码如下：<aname="jianjie"id="jianjie"></a><h4>个人简介</h4>然后，选中列表部分的“个人简介”四个字，在属性面板中的“链接”框内输入“#jianjie”，保存后按F12键预览，点击个人简介，即可跳转到个人简介的内容介绍处。代码如下：<ul><li><ahref="#jianjie">个人简介</a></li><li>早年经历</li><li>高中生涯</li><li>大学生涯</li><li>职业生涯</li><li>国际赛场</li></ul>同理，将光标定位到“首页”的前面，单击“插入”菜单->“命名锚记”，弹出“命名锚记”对话框，输入锚记名称“top0”；选中“返回”二字，在属性面板中的“链接”框内输入“#top0”，保存后按F12键预览，点击返回，即可跳回到页面顶端。六、注意事项1.要制作超链接，首先要选中要实现超链接的文本或图片。2.要实现在同一个页面内的跳转，前提是网页超过一屏。3.命名锚记的时候，要注意一个页面内名称的唯一性，不能重名。七、拓展训练1.整合以前做的各种网页，创建一个主页index.html，将上述各网页链接起来。2.完成早年经历、高中生涯、大学生涯等项目的页面内前后跳转。3.选中相应的文本，将项目列表设置成“编号列表”；尝试制作嵌套列表实训三桂林旅游网首页制作一、实训目的1．掌握表格标记<table>…</table>、<th>…</th>、<td>…</td>2.学会正确地插入表格，并合理地设置表格的属性3.学会正确地设置表格中行和列的属性4．学会正确地设置表格、单元格的背景图像和背景颜色5．学会在表格中正确地输入文字、插入图像6．了解网页文件头内容的设置方法二、知识要点1．插入表格、设置表格的属性2．设置表格、单元格的背景图像和背景颜色3．在表格中输入文字、插入图像三、素材准备网页制作所需素材见“桂林旅游网首页制作-表格布局练习”文件夹四、实训内容根据已经提供的素材制作网页guilin.html,效果图如guilin.jpg所示五、实训步骤1．启动Dreamweaver,创建名为“桂林旅游”的本地站点，存储路径为E:\webpage文件夹；2．新建一个网页文档，保存名称为guilin.html3．设置网页的标题为“桂林旅游网”4．观察网页效果图可以发现桂林旅游网距离网页顶端有一定距离，可以通过以下方式实现：点击属性面板上的页面属性，打开页面属性对话框，设置网页上边距为40px;5．单击插入菜单->表格命令，在网页中插入一个1行1列的表格，设置表格宽度343px，高度83px，表格属性如图所示：图表格属性对话框6.在设计视图下，选中<table>标签，设置表格居中对齐；将光标定位到表格中，在表格中插入图像logo.gif，第一个表格制作完成；7.将光标移至表格外，按回车键，形成一个空段落，在网页中插入一个1行3列的表格，设置表格的宽度为400px，将光标定位到第一个单元格中，设置第一个单元格的属性宽度190px，高度为25px，背景颜色为红色，将光标定位到第三个单元格中，进行同样的设置，属性面板如图所示：图单元格属性面板8.将光标定位到相应单元格中，输入文字“官方咨讯网”、“政务网”，设置文本颜色为白色。代码如下：<fontcolor="#ffffff">官方咨讯网</font>9.将光标移至表格外，插入第三个表格，1行1列，表格宽420px，居中对齐，设置表格背景色为#00aaff，代码如下：<tablealign="center"width="420"height="25"bgcolor="#00aaff"><tr><tdalign="center"><fontcolor="#ffffff"size="2">中文繁體|English|Korean|Japanese|French|German</font></td></tr></table>10.将光标移至表格外，按回车键，形成一个空段落，在网页中插入一个3行1列的表格，表格宽400px，居中对齐，表格行高20px，最后的代码如下所示：<tablealign="center"width="400"><trheight="20"><tdalign="center"><fontcolor="#555555"size="2">桂林市旅游局版权所有桂林旅游</font></td></tr><trheight="20"><tdalign="center"><fontcolor="#555555"size="2">Copyright2008AllRightsReserved.</font></td></tr><trheight="20"><tdalign="center"><fontcolor="#555555"size="2">桂ICP备05007831号</font></td></tr></table>六、注意事项1.背景颜色为六位十六进制，不要遗漏#；2.<table></table>、<font></font>标记成对出现，不要遗漏结束标记；3.属性和属性值之间用空格分开，属性值的引号为英文状态下的引号。七、参考效果 实训四易购网CSS的应用一、实训目的1.熟悉CSS的基本语法2.熟悉CSS选择器的概念3.掌握网页中引入CSS的三种常用方式二、知识要点1.样式规则组成如下：选择器{属性:值}2.三种类型选择器：HTML标记做选择器类class选择器ID选择器3.网页中引入CSS的三种方式：直接把CSS代码添加到html的标记里把CSS代码添加到HTML的头信息<head>部分的<style></style>里链接样式表，在头信息<head>部分通过<linkrel="stylesheet"href="*.css"type="text/css"media="screen"/>语句引入CSS文件三、素材准备所需素材见易购网文件夹四、实训内容通过学习易购网帮助页面中CSS的应用，体会CSS的作用，并仿照易购网中CSS的应用在实训一中制作的网页tangshi.html中用三种方式、三种选择器类型分别定义CSS样式。五、实训步骤1.在Dreamweaver中打开易购.html,切换到代码视图，观察其CSS的引入方式；2.打开易购网/CSS文件夹下的global.css文件3.找出其中的HTML标记做选择器,分析其作用。如h1{font-size:18px;}、h2{font-size:16px;}、h3{font-size:14px;}等。4.找出其中的Id选择器，如#header{ width:990px; margin:0auto;}5.找出应用类选择器的CSS样式，并分析其作用。六、拓展训练与思考1.在tangshi.html网页中尝试使用CSS来改变网页中字体、背景等属性。2．ID选择器和类选择器有什么区别？3．用CSS设置网页样式有什么优势？实训五百度搜索结果网页制作一、实训目的1.学会用CSS设置丰富的文字效果2.掌握CSS控制文字样式的方法3.学会CSS控制边距与段落的方法二、知识要点1.字体.f1{ font-family:"宋体",Verdana,Arial,sans-serif;}2.文字大小：P,.f1,h2{font-size:16px;}3.文字颜色span.search{color:#c60a00;}4.文字粗细h2{font-weight:700;}5.文字下划线span.quick{text-decoration:underline;}三、素材准备所需素材见百度搜索文件夹四、实训内容制作类似百度搜索页面效果的网页五、实训步骤1.在Dreamweaver下新建网页，将素材中提供的文字拷贝到网页中，并保存网页2.首先建立段落的html结构，考虑到标题、正文、百度快照在不同的行，因此每个显示结果分为3段，title标题、content内容、link链接，并分别加上CSS标记。如下所示：<pclass="title">中国春节网</p> <pclass="content">欢迎光临中国春节网,您现在的位置是中国春节网首页!"年"兽的传说熬年的传说万年创建历法说中国古代历法发展春节:传统和现代元宵灯节源于何时?猜灯谜的来由十二生肖的源流、排列与信仰祭灶扫尘贴春联年画倒贴福字除夕夜...</p> <pclass="link">/46K2011-12-10-百度快照</p>3.考虑到标题部分有超链接，百度快照部分有超链接，因此需要超链接标记<a>，并且关键字的样式必须区别于其他文字，因此“春节”单独用<span>标记分离，如下所示：<pclass="title"><ahref="#">中国<spanclass="search">春节</span>网</a></p><pclass="content">欢迎光临中国<spanclass="search">春节</span>网,您现在的位置是中国<spanclass="search">春节</span>网首页!"年"兽的传说熬年的传说万年创建历法说中国古代历法发展<spanclass="search">春节</span>:传统和现代元宵灯节源于何时?猜灯谜的来由十二生肖的源流、排列与信仰祭灶扫尘贴春联年画倒贴福字除夕夜...</p><pclass="link">/46K2011-12-10-<ahref="#"class="quick">百度快照</a></p>4.下面陆续加入CSS对各个段落进行样式控制p{ margin:0px; font-family:"宋体",Verdana,Arial,sans-serif; }p.title{ padding-bottom:0px; font-size:16px;}p.content{ padding-top:3px; /*标题与内容的距离*/ font-size:14px; /*内容的字体大小*/ line-height:1.5;}p.link{ font-size:13px; color:#008000; /*网址颜色*/ margin-bottom:20px;/*与下一段之间保持一定的间距*?}5.在调整好段落内部的结构以及段落与段落之间的距离后，下面设置文字的颜色，主要是关键字春节与百度快照链接的颜色span.search{ color:#c60a00; /*关键字颜色*/}a.quick{ color:#666666; /*快照颜色*/}6.这时再仔细观察，标题处关键字下划线的颜色还是蓝色，而不是真实百度页面中的红色，这主要是由于超链接标记导致，因此对标题处的关键字单独设置下划线，如下所示：p.titlespan.search{ text-decoration:underline; /*标题处关键字的下划线*/}7.保存网页，在浏览器中预览效果六、参考效果百度搜索页面效果图实训六导航菜单制作一、实训目的1.熟悉超链接的四种状态2.学会用CSS设置丰富的超链接效果二、知识要点1.超链接的四种状态：a:link是超级链接的初始状态a:hover是把鼠标放上去时的状况a:active是鼠标点击时a:visited是访问过后的情况。CSS通过上面4个伪类别，再配合各种属性风格制作出千变万化的动态超链接。2.去掉超链接默认的下划线，代码如下：a{text-decoration:none;}3.鼠标移过时文字变色a:link,a:visited{ color:#FFFFFF; }a:hover{ color:#FF0000; }4.鼠标移过时背景色变化a:link,a:visited{background-color:#99CC66; }a:hover{ background-color:#CCCC00;}5.超链接变为块状元素a:link,a:visited{ display:block;}三、素材准备所需素材见“用CSS美化超链接”文件夹四、实训内容1.制作网页，超链接具有以下效果：鼠标移到超链接上时，出现下划线；鼠标离开时，下划线消失；访问前的超链接颜色为黑色，访问后颜色变为灰色。2.制作导航菜单，超链接具有以下效果：超链接无下划线，鼠标移到超链接上时，超链接字体由白色变为红色，鼠标离开时，字体恢复白色；3.制作导航菜单，超链接具有以下效果：超链接无下划线，鼠标移到超链接上时，背景色由绿色（#99CC66）变为黄绿色（#CCCC00）五、实训步骤1.新建网页，在网页中输入文本：首页、国内新闻、体育新闻、国际新闻、娱乐新闻、财经新闻，将其制作成项目列表，并将列表项分别添加超链接，代码如下：<ul> <li><ahref="#">首页</a></li><li><ahref="#">国内新闻</a></li><li><ahref="#">体育新闻</a></li><li><ahref="#">国际新闻</a></li><li><ahref="#">娱乐新闻</a></li><li><ahref="#">财经新闻</a></li></ul>此时，效果如图所示：2.为了将导航条能够在水平方向显示，通过以下CSS属性进行控制：ul{ list-style-type:none; text-align:center; }li{ float:left; margin-left:3px; }此时效果如图所示：3.为超链接设置以下CSS属性：body{ font-size:12px; font-family:"宋体";}a:link,a:visited{ display:block; width:100px; height:30px; line-height:30px; border:1px#3333FFsolid; background-color:#99CC66; text-decoration:none; color:#FFFFFF; }a:hover{ color:#FF0000; background-color:#CCCC00; }效果如图：4.保存网页，在浏览器中预览效果六、拓展训练1.在一个网页中，经常有多处超链接，不同区域的超链接往往具有不同的效果，制作一个网页，使导航条处的超链接、正文处的超链接具有不同的效果。参考代码如下：区域一结构代码<divclass="soTab"> <ahref="#">网页</a> <ahref="#">图片</a> <ahref="#">视频</a><ahref="#">资讯</a> <ahref="#">地图</a><ahref="#">黄页</a> <ahref="#">更多</a> </div>区域一超链接css代码.soTaba:link,.soTaba:visited{ float:left; line-height:30px; width:100px; background-image:url(nav02.jpg); background-repeat:no-repeat; color:#FFFFFF; text-decoration:none; border-left:1pxsolid#FFFFFF; }.soTaba:hover{ background-image:url(nav01.jpg); }区域二结构代码<divclass="soHot"><p>热门搜索<ahref="#">:</a></p><p><ahref="#">最新电影《龙门飞甲》</a></p><p><ahref="#">央行一个月内连续两次降息</a></p><p><ahref="#">房价假摔</a></p><p><ahref="#">国土部展开试点清理小产权房</a><ahref="#"target="_blank">>></a></p></div>区域二超链接css代码.soHota,.soHota:visited{ color:#000; text-decoration:none; margin-left:3px;}.soHota:hover{ color:#0000FF; text-decoration:underline; }区域三结构代码<divclass="soGuide"><ul><liclass="g1"><ahref="#">购物</a></li><liclass="g2"><ahref="#">分类</a></li><liclass="g3"><ahref="#"target="_blank">机票</a></li><liclass="g4"><ahref="#"target="_blank">世博游</a></li><liclass="g5"><ahref="#"target="_blank">生活</a></li><liclass="g6"><ahref="#">游戏</a></li><liclass="g7"><ahref="#"target="_blank">餐馆</a></li><liclass="g8"><ahref="#"target="_blank">网站导航</a></li></ul></div>区域三超链接css代码.soGuideli{ display:inline; float:left; margin:4px15px; background-image:url(guide.gif); background-repeat:no-repeat; line-height:20px}.soGuidelia{ display:block; width:70px; height:20px;padding-left:20px;}.soGuidelia,.soGuidelia:visited{ color:#666}2.为网页中的Flash添加超链接，方法为：<buttononclick="window.open('网址')"style="border:0px;width:300px;height:240px;background:background-color;cursor:hand"><object>Flash</object></button>按钮的宽度高度由flash确定，需将flash设为透明wmode="transparent"实训七中国音乐榜网页制作一、实训目的1.学会用CSS设置表格样式2.在实际应用中用CSS美化表格二、知识要点1.设置表格背景色table{ background-color:#00FF00;}2.细线表格制作的关键代码：table{ border-collapse:collapse;border:1pxsolid#ff0000;}td,th{ border:1pxsolid#ff0000;}3.表格水平居中的css代码：table{margin:0auto;}4.鼠标移到某行时，该行变色，代码如下：tr:hovertd{ background-color:#FF9900;}三、素材准备所需素材见“中国音乐榜”文件夹。四、实训内容1.制作中国音乐榜网页，效果如图所示：五、实训步骤1.新建网页，在网页中插入一个12行3列的表格，属性设置如下图所示：2.在表格中输入相应文字，并合并最后一行最后2列单元格。定义以下CSS代码：table{ width:600px; text-align:center; font-size:12px;margin:0auto;border:1pxsolid#ff0000;}caption{ font-size:36px; font-family:"黑体","宋体"; padding-bottom:15px;}<tdcolspan="2"style="text-align:right;">上海音乐台</td>此时效果如图所示：3.此时表格只有外边框，要显示内部边框，需定义以下CSS代码：th,td{ border:1pxsolid#ff0000;}另外，为使表格行距高度适中，还需设置单元格的高度，代码如下：th,td{ border:1pxsolid#ff0000; height:30px; line-height:30px;}此时效果如图所示：由图可见，此时的表格是双线效果，不是细线效果，为了达到细线效果，table标记需增加以下css代码table{border-collapse:collapse;}4.保存网页，按F12键在浏览器中预览效果。5.定义th{font-size：16px;}使表头的文字变大；6.为了使表格隔行变色，还需定义样式.hui{background-color:#CCCCCC;}然后在表格的偶数行使用这一样式，<trclass="hui">7.当鼠标移到某行时，当前行变色，代码如下：tr:hover{background-color:#FF9900;}8.保存网页，在浏览器中预览网页效果六、注意事项1.当使用table{margin:0auto;}时，若表格未居中，原因在于文件头部少了以下内容：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.IE6浏览器不支持tr:hovertd{background-color:#FF9900;}七、拓展训练一个网页中含有两个或多个表格，效果如图所示。参考代码如下：<style><!--.tableBlue{width:520px;border-collapse:collapse;border:1pxsolid#a2c6e8;font-size:12px;}.tableBlueth,.tableBluetd{border:1pxsolid#a2c6e8;text-align:center;height:30px;width:33.3%;}.tableBlueth{background-color:#e0f0f0;color:#3399CB;font-size:14px;}.tableBluea{text-decoration:none;color:#3399CB;}.tableOrange{width:520px;border-collapse:collapse;border:1pxsolid#ffd46b;}.tableOrangeth,.tableOrangetd{border:1pxsolid#ffd46b;text-align:center;vertical-align:middle;height:30px;width:33.3%;}.tableOrangeth{background-color:#FCF9EA;font-size:14px;color:#F77900;}.tableOrangea{text-decoration:none;color:#f77900;font-size:12px;}--></style><tableclass="tableBlue"> <tr><thcolspan="3">主资费套餐</th></tr><tr><td><ahref="2.html"target="_blank">齐鲁漫游卡</a></td><td><ahref="5.html"target="_blank">全球通漫游卡</a></td><td><ahref="11.html"target="_blank">全球通商务卡</a></td></tr><tr><td><ahref="68.html"target="_blank">全球通新88套餐</a></td><td><ahref="97.html"target="_blank">省内商旅套餐</a></td><td><ahref="66.html"target="_blank">全球通新全国商旅套餐</a></td></tr><tr><td><ahref="88.html"target="_blank">全球通88套餐</a></td> <td> </td><td> </td></tr></table><tableclass="tableOrange"><tr><thcolspan="3">主资费套餐</th></tr><tr><td><ahref="16829.html"target="_blank">动感地带网聊套餐2011版</a></td><td><ahref="16828.html"target="_blank">动感地带上网套餐</a></td><td><ahref="13452.html"target="_blank">神侃6+1</a></td></tr><tr><td><ahref="13085.html"target="_blank">动感新E代</a></td> <td><ahref="13084.html"target="_blank">动感地带音乐套餐</a></td> <td><ahref="13082.html"target="_blank">动感地带校园通</a></td> </tr><tr><td><ahref="13081.html"target="_blank">动感地带网聊套餐09版</a></td><td><ahref="13080.html"target="_blank">动感地带可选业务包</a></td><td><ahref="13078.html"target="_blank">动感地带基本卡</a></td></tr><tr><td><ahref="13077.html"target="_blank">动感地带创业卡</a></td><td><ahref="13075.html"target="_blank">动感地带长途</a></td><td><ahref="13074.html"target="_blank">动感地带09版</a></td></tr></table>

实训八注册会员网页制作一、实训目的1.熟悉表单元素2．学会制作用户注册网页和用户登录网页3.学会美化用户注册网页和用户登录网页二、知识要点1.表单标记<form>…</form>2.文本框标记<inputtype="text"id="textfield"/>3.密码框标记<inputtype="password"id="textfield"/>4.单选按钮标记<inputtype="radio"id=""/>5.复选框标记<inputtype="checkbox"id=""/>6.提交按钮标记<inputtype="submit"id=""value="提交"/>7.重置按钮标记<inputtype="reset"id=""value="重置"/>8.“插入”菜单—>表单三、素材准备所需素材见“注册会员网页制作”文件夹。四、实训内容制作注册会员网页，效果如图所示：五、实训步骤1.新建网页，用DIV将整个页面分块，第一块为标题部分，第二块为表格部分，第三块为按钮部分2.引入CSS样式，标题<h1>会员注册</h1>部分的样式如下：h1{ font-size:14px; color:#FF3333; }3.开发正文部分的代码和样式：插入一个7行2列的表格，在第1行第2列插入文本域并设置其属性，代码如下：<tdstyle="text-align:left;"><inputtype="text"value="请输入邮箱/手机号"/></td>在第2行第2列插入文本域并设置其属性，代码如下：<tdstyle="text-align:left;"><inputtype="text""value="请输入用户名"/></td>在第3行、第4行插入文本域，在属性面板设置其类型为密码，代码如下：<inputname=""type="password"/>在第5行插入三个单选按钮，设置其属性，注意同一组的单选按钮name属性须保持一致；在第6行插入下拉菜单，设置其项目和项目值，代码如下：<selectname="select"id="select"> <optionselected="selected">请选择</option> <option>宝山区</option> <option>虹口区</option><option>杨浦区</option><option>徐汇区</option> <option>长宁区</option></select>在第7行插入复选框，在表格下方插入确定、取消按钮。<inputtype="submit"value="确定"/>    <inputtype="reset"value="取消"/>下面设置表单的样式：.txt{ width:300px; height:25px; background-color:#99CCCC; color:#663366;}在文本框、密码框中使用定义的txt样式，<inputtype="text"class="txt"value="请输入邮箱/手机号"/>定义其他表单元素的样式：.dian{ background-color:#CC3366;}/*单选按钮的样式*/select{ background-color:#009966; color:#FFF; width:100px; height:20px;}/*下拉菜单的样式*/.gray{ ba

人人文库> 全部分类> 专业文献 > 建筑环境

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论