网页制作技术
2006-2
高等教育出版社
刘子轶
266
随着因特网的流行，很多个人、企事业单位和政府机关都创建了自己的网站，以发布单位新闻、产品信息、政策法规和进行信息交流等。网页制作与网站建设技术综合了策划创意、平面设计等多方面知识，重视设计理念和设计美学。无论是个人主页还是企业网站，都不能停留在内容发布的最基本层面上，因此网页要做到识别性强、形象品质好、设计理念清晰、色彩统一和谐、定位准确。Macromedia公司的Dreamweaver、Fireworks和Flash自问世以来备受网页设计专业人士青睐，被誉为“网页制作三剑客”。Dreamweaver主要用于制作网页和管理网站，Fireworks主要用于制作网页图像，Flash主要用于制作网页动画。使用这些软件可以让网页设计师们便捷地统一网站中所有元素的风格。 本教材是采用获得国家教学成果奖的“就业导向的职业能力系统化课程及开发方法”（简称VOCSCUM），对“计算机网络技术”专业进行职业能力课程开发的成果。根据“计算机网络技术”专业的三大职业核心能力，我们分别建构了“网络系统配置”、“网络程序设计和数据库开发”、“网页设计和网站建设”三条职业能力培养的链路课程。每个链路课程反映掌握专门技术的从易到难的训练过程，也是理论知识学习的从简到难的过程。 进行课程开发时，我们把每个链路看成一个整体工作任务，从问题中心课程开始，到任务中心课程结束，使学生通过链路课程完整体验实际完成任务的过程。链路课程共分为四个阶段，分别为Step 1、Step 2、Step 3、Step 4。在横向的链路课程形成递进的层次关系的同时，纵向的链路课程之间课程形成相关性。
《网页制作技术（三剑客）》是“网页设计与网站建设”职业能力课程的第二阶段课程，主要涉及DreamweaverMX2004、FireworksMX 2004和Flash MX 2004软件的应用。这三个软件是Macromedia公司的产品，自问世以来备受网页设计专业人士青睐，被誉为“网页制作三剑客”。Dreamweaver MX 2004主要用于制作网页和管理网站；Fireworks Mx2004主要用于制作和处理网页图像；Flash MX 2004主要用于制作Web动画。 《网页制作技术（三剑客）》适合于高等职业学校、高等专科学校、成人高等院校、本科院校举办的职业技术学院电子信息类专业教学使用，也可供示范性软件职业技术学院、继续教育学院、民办高校、技能型紧缺人才培养使用。
第1章 网站制作入门基础1.1 网络与网站之间的相互关系1.2 网站设计的总体认识”1.3 网页制作需注意的问题及一般流程小结课后习题第2章 网页设计2.1 制作网页中文本与图片的超链接2.1.1 效果图2.1.2 制作步骤2.1.3 技术要点2.2 制作特殊的一图多链2.2.1 效果图2.2.2 制作步骤2.2.3 技术要点2.3 制作锚点链接2.3.1 效果图2.3.2 制作步骤2.3.3 技术要点2.4 制作一个简单的表格布局网页2.4.1 效果图2.4.2 制作步骤2.4.3 技术要点2.5 利用表裆制作一个时间安排表2.5.1 效果图2.5.2 制作步骤2.5.3 技术要点2.6 对表格数据进行导入／导出2.7 表格排序2.8 使用布局表格制作一个简单的网页2.8.1 效果图2.8.2 制作步骤2.8.3 技术要点2.9 制作可根据浏览器窗口自动调整页面大小的网页2.9.1 效果图2.9.2 制作步骤2.9.3 技术要点2.1 0利用框架制作一个邮件收发界面2.1 0.1 效果图2.1 0.2 制作步骤2.1 0.3 技术要点2.1 1使用表单制作一个网上报名表2.1 1.1 效果图2.1 1.2 制作步骤2.1 1.3 技术要点2.1 2使用模板制作网页2.1 2.1 效果图2.1 2.2 制作步骤2.1 2.3 技术要点小结课后习题第3章 动态网页制作3.1 使用图层与行为实现网页中的拼图游戏3.1.1 效果图3.1.2 制作步骤3.1.3 技术要点3.2 使用图层与行为制作网页中的下拉菜单3.2.1 效果图3.2.2 制作步骤3.2.3 技术要点3.3 使用时间轴制作一个伸缩菜单3.3.1 效果图3.3.2 制作步骤3.3.3 技术要点3.4 制作一个应用于层的CSS样式3.4.1 效果图3.4.2 制作步骤3.4.3 技术要点3.5 网页中的滚动字幕效果3.5.1 效果图3.5.2 制作步骤3.5.3 技术要点小结课后习题第4章 FireworksMX2004的基本操作4.1 选择和变形对象4.1.1 选择对象4.1.2 选择像素4.1.3 变形和扭曲所选对象和选区4.2 图层与蒙版4.2.1 图层的使用4.2.2 蒙版的使用4.3 使用滤镜与效果4.3.1 使用滤镜4.3.2 使用效果4.3.3 样式与形状4.4 矢量编辑4.4.1 改变路径4.4.2 矢量对象的操作4.4.3 对象的变形4.4.4 对象的排列4.4.5 对象的对齐4.4.6 多个矢量对象的操作4.5 切片和热点4.5.1 使用切片4.5.2 使用热点小结课后习题第5章 Fireworks案例集锦5.1 制作动态椭圆形按钮5.1.1 效果图5.1.2 制作步骤5.1.3 技术要点5.2 制作羽毛5.2.1 效果图5.2.2 制作步骤5.2.3 技术要点5.3 制作动态分隔条5.3.1 效果图5.3.2 制作步骤5.3.3 技术要点5.4 制作翠玉小熊效果5.4.1 效果图5.4.2 制作步骤5.4.3 技术要点5.5 制作旋转文字特效5.5.1 效果图5.5.2 制作步骤5.5.3 技术要点5.6 制作关联翻转图5.6.1 效果图5.6.2 制作步骤5.6.3 技术要点5.7 制作弹出菜单5.7.1 效果图5.7.2 制作步骤5.7.3 技术要点小结课后习题第6章 制作网页中的特殊文字效果6.1 制作线框文字6.1.1 效果图6.1.2 制作步骤6.1.3 技术要点6.2 七彩文字制作6.2.1 效果图6.2.2 制作步骤6.2.3 技术要点6.3 制作网页中的图片文字6.3.1 效果图6.3.2 制作步骤6.3.3 技术要点6.4 制作网页中的光影变幻文字6.4.1 效果图6.4.2 制作步骤6.4.3 技术要点.小结课后习题第7章 网页中常用基本动画实例7.1 利用帧动画制作球的抛体运动动画7.1.1 效果图7.1.2 制作步骤.7.1.3 技术要点7.2 利用形变动画制作驴与狮子互变动画7.2.1 效果图7.2.2 制作步骤7.2.3 技术要点7.2.4 应用形状提示制作驴与狮子互变7.3 利用运动动画制作海中升明月动画7.3.1 效果图7.3.2 制作步骤7.3.3 技术要点7.4 利用遮罩层制作百叶窗动画7.4.1 效果图7.4.2 制作步骤7.4.3 技术要点7.5 利用引导层制作天体运动动画7.5.1 效果图7.5.2 制作步骤7.5.3 技术要点小结课后习题第8章 网页中的交互动画实例8.1 制作风景按钮8.1.1 效果图8.1.2 制作步骤8.1.3 技术要点8.2 利用按钮制作林中小猫动画8.2.1 效果图8.2.2 制作步骤8.2.3 技术要点8.3 制作探照灯动画效果8.3.1 效果图8.3.2 制作步骤8.3.3 技术要点8.4 制作变化的时钟动画8.4.1 效果图8.4.2 制作步骤8.4 3技术要点8.5 制作Music播放器动画8.5.1 效果图8.5.2 制作步骤8.5.3 技术要点8.6 制作MTV8.6.1 效果图8.6.2 制作步骤8.6.3 技术要点8.7 Flash的测试与发布第6章 制作网页中的特殊文字效果6.1 制作线框文字6.1.1 效果图6.1.2 制作步骤6.1.3 技术要点6.2 七彩文字制作6.2.1 效果图6.2.2 制作步骤6.2.3 技术要点6.3 制作网页中的图片文字6.3.1 效果图6.3.2 制作步骤6.3.3 技术要点6.4 制作网页中的光影变幻文字6.4.1 效果图6.4.2 制作步骤6.4.3 技术要点小结课后习题第7章 网页中常用基本动画实例7.1 利用帧动画制作球的抛体运动动画7.1.1 效果图7.1.2 制作步骤7.1.3 技术要点7.2 利用形变动画制作驴与狮子互变动画7.2.1 效果图7.2.2 制作步骤7.2.3 技术要点7.2.4 应用形状提示制作驴与狮子互变7.3 利用运动动画制作海中升明月动画7.3.1 效果图7.3.2 制作步骤7.3.3 技术要点7.4 利用遮罩层制作百叶窗动画7.4.1 效果图7.4.2 制作步骤7.4.3 技术要点7.5 利用引导层制作天体运动动画7.5.1 效果图7.5.2 制作步骤7.5.3 技术要点小结课后习题第8章 网页中的交互动画实例8.1 制作风景按钮8.1.1 效果图8.1.2 制作步骤8.1.3 技术要点8.2 利用按钮制作林中小猫动画8.2.1 效果图8.2.2 制作步骤8.2.3 技术要点8.3 制作探照灯动画效果8.3.1 效果图8.3.2 制作步骤8.3.3 技术要点8.4 制作变化的时钟动画8.4.1 效果图8.4.2 制作步骤8.4.3 技术要点8.5 制作Music播放器动画8.5.1 效果图8.5.2 制作步骤8.5.3 技术要点8.6 制作MTV8.6.1 效果图8.6.2 制作步骤8.6.3 技术要点8.7 Flash的测试与发布第9章 作一个网上个人工作室参考文献及地址
1．网站的形象设计 网站形象设计包括标准字、标志（LOGO）、导航条（BANNER）、标准色彩、广告语等。LOGO和BANNER是宣传网站最重要的部分，所以这两个部分一定要在页面上突显出来。怎样做到这一点呢？这就需要将LOGO和BANNER做得鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了更突出，也可以使用与主题色相反的颜色。网页中色彩的应用是网页设计中极为重要的一环，赏心悦目的网页，其色彩的搭配一定是和谐、优美的。在确定网站的主题后，就要了解哪些颜色适合该站点使用，哪些不适合，这主要根据人们的审美习惯和站点的风格来定，一般情况下要注意以下几点。 ①忌讳使用强烈对比的颜色搭配做主色； ②配色简洁，主色要尽量控制在3种以内； ③背景和内容的对比要明显，少用花纹复杂的背景图片，以便突出显示文字内容。 2．网站的目录结构 一个制作严谨的网站必须首先有一个层次清晰、分工明确的目录结构。首先是根目录，通常文件名都是网站的名称，其中子文件夹的设置一般为：图片文件夹（images）用来存放所有网页中要用到的图片；论坛文件夹（forum）存放论坛页面；数据库文件夹（database）存放网站数据库（PHP的数据库文件存放在专用文件夹中）；临时文件夹（templates）存放网页模板等。在实际制作中，根据内容的分类不同，可能会有不同的安排。 3．网站导航链接的设计艺术 导航栏在网站中相当于目录。它的存在是为了方便浏览者快速找到所需的内容，所以一个合理、完善的导航栏设置将给浏览者一个良好的印象，除此之外还可在页面中放置一些小标题，可以大大提高链接的灵活度。所以可以使用比较鲜明的色彩来标示重点栏目，吸引浏览者的视线，让他们感觉网站清晰明了、层次分明，不会迷失方向。 4．确定网站的主题以及根据主题发展优势 每个网站都必须有一个主题，并以此为根据来扩展网站的内容。主题可选择的范围是很广泛的，但通常还是选择自己比较擅长的或是非常喜欢的，这样可使制作过程更加得心应手。 由于网络上各种各样的信息很多，别人可以轻易地在知名站点查找几乎所有自己想要的信息，但这些信息可能并不完整，而且查找起来费时、费力，所以网站开发者要关注的是怎样节省网友的时间，让他能更快、更便捷地找到想要的信息，这就是要突出重点，而不是面面俱到，以提高网站的竞争力。
