《网页制作技术》实验指导书（Hy-上）.docVIP

《网页制作技术》实验指导 (自编) 绍兴元培学院信息与机电工程分院 目 录 前 言 - 3 - 第一部分 网站规划 - 4 - 第二部分 网页设计制作实验 - 8 - 实验一 在Dreamweaver中建立一个站点 - 8 - 实验二　在网页中使用文本 - 16 - 实验三　列表标签的应用 - 23 - 实验四　超级链接的建立 - 36 - 实验五 网页表格操作 - 47 - 实验六 交互式表单的应用 - 53 - 实验七 CSS样式表的创建及运用 - 67 - 实验八 Div+CSS网页布局 - 76 - 实验九 JavaScript基础 - 84 - 实验十 JavaScript综合运用 - 90 - 前 言 《网页制作技术》是一门实践性很强的课程，应使学生通过加深对理论的理解，，能较熟练地Dreamweaver平台下有效设计和制作网页，并对站规划、管理、发布 网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。 图1-1 规范的网站建设大致需要做如下工作： 1、网站规划 收集网站前期资料以及所需文档 在确定了制作哪方面的网站后，需收集和整理与网站内容相关的文字资料、图像、动画素材等。如想要制作影视网站就需收集大量中外电影的信息以及演员资料；要制作公司网站就需收集公司的介绍、产品信息和企业文化等。 收集好资料后还需对资料进行有效地管理，站点就是管理资料、素材的场所。在创建站点之前需对站点进行规划，站点的形式有并列、层次和网状等，用户需根据实际情况选择。 规划站点时应按素材的不同种类分为几个文件夹，再将收集好的素材分类放置在相应文件夹中，然后在不同文件夹中将不同的素材再进行细分。站点规划好后即可对其进行创建了。 注意：站点的主题与名称应易于记忆，要上传到网上的站点名称必须是英文。 2、网页设计 将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。 网站是由多个页面链接而成的。在制作网页时需注意以下几面的问题，以便浏览者轻松浏览网站。 a)页面框架的构建 页面框架的构建是指对网页的整体布局，针对网页中的内容应将网页有条理地划分为几部分。 b)导航条 导航条应出现在网站的各个页面中，提供各个站点的相关主题，引领浏览者有条理地浏览网站。导航条通常放置在页面的上部或左侧。 c)返回首页链接 在分页面中放置返回首页链接，以便浏览者在访问分页面后快速回到首页，以重新选择其他页面进行浏览。 d)添加网页元素,网页添加相应的内容，以传递网页信息给浏览者。 根据网站的模式和特点以及网站制作规范定制出最适当的标准样式。 设计人员进行二级页面设计工作。 制作人员开始制作工作。 程序开发阶段。 完成。 网站测试和改进 站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。 测试站点的过程中应注意以下几方面： a)监测页面的文件大小以及下载速度。 b)运行链接检查报告对链接进行测试。由于在网页制作中，各站点的重新设计、重新调整会使某些链接所指向的页面可能已被移动或删除，所以应检查站点是否有断开的链接，若有则自动重新修复断开的链接。 c)为了使页面不支持的样式、层、插件等在浏览器中能兼容且功能正常，可进行浏览器兼容性的检查。使用“检查浏览器”行为，可自动将访问者定向到另外的页面，这样就可解决在较早版本的浏览器中无法运行页面的问题。 d)网页布局、字体大小、颜色和默认浏览器窗口大小等区别是在目标浏览器检查中无法预见的，需在不同的浏览器和平台上预览页面进行查看。 3、网上安家 网上安家即将站点发布到互联网上。 发布站点之前需在Internet上申请一个主页空间，以指定网站或主页在Internet上的位置。网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。 4、网站维护与管理 (1)网站内容更新与沟通 站点上传到服务器后，还需对站点进行更新和维护，以保持站点内容的最新和页面元素的正常。 (2)合理运用新技术。 (3)推广你的Web地址。 二、网站设计技巧 1、网页风格要统一。 2、网站导航要清晰。 3、网页内容便于浏览。 4、网站Logo要有代表性。 5、设计网站的标准色彩。 6、页面容量越小越好，别超过75KB。 7、能适应不同浏览器及分辨率。 8、网页内容要精彩。 三、网页的基本组成 网页由网页标题、页眉、站标、导航栏、内容版块和页脚组成。 标题（说明网站的形式和类型） 站标即网