《网站前台设计》实训指导书.doc

网站前台设计实训指导书 1网站前台设计实训指导书(第二版)实训指导书(第二版)主编苏绍培李娟四川科技职业学院自编自用2网站前台设计实训指导书网站前台设计实训指导书 一、实训目的与要求网站前台设计是实践性很强的课程，学生必须通过不断上机实习以及使用它来解决实际的问题，才能更好地掌握。 因此，在本学期特设置此课程设计，使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识在动手实践能力方面有很大的提升，并按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。 二、实训内容1.实例实训以组建静态网站设计的相关实例指导学生如何独立完成静态站点的设计和制作。 让学生在机房实际操作，按照给定的实例完成实例中站点的创建和设计制作。 2.自建站点实训让学生自行选择站点的主题，从规划站点到上传文件一步一步完成整个站点的创建、调试和上传工作。 3.总结对学生的全部作品进行考核，并选择典型的案例对实训的结果进行考核。 三、参考课时标题实训内容实训课时实训一网页设计基础1实训二网站站点规划及创建2实训三常见的HTML标签应用2实训四HTML表格布局应用2实训五网站案例制作43实训六超级链接应用2实训七网站表单应用3实训八DIV+CSS样式设计3实训九网页界面设计与制作3实训十网页动画制作2实训十一网页脚本编程应用3实训十二网页框架技术应用2实训十三测试和上传作品1附录1网站规划书书写格式1附录2CuteFTP使用说明1机动8总计40 四、实训材料准备1.软件准备Dreamweaver CS6中文版、PhotoShop CS6以上版本、Flash CS6以上的中文版。 2.硬件准备网络条件与因特网连接的局域网。 教师用机Windows XP或WindowsxxServer版。 学生用机Windows XP或WindowsxxProfessional版。 五、考核办法1.考核分为三个部分平时实训考核、作品实训考核和综合实训考核。 平时实训考核按照每一实训课程的考核办法进行考核。 作品实训考核按照实训结束后的作品综合考核办法进行考核。 综合实训考核按照平时成绩考核的30与作品实训考核的70的和进行考核。 2.综合实训考核办法1)系统文档20分42)编写代码30分3)程序调试10分4)实训出勤20分5)技术含量10分6)美工设计10分3.将综合实训考核的分数作为期末考试考核的一部分，期末考试考核中，综合实训考核占505目录目录实训一网页基础知识1任务一网站、网页和主页1任务二网站设计与制作工具使用2任务三网站策划方案的编写6实训二网站站点规划及创建10任务一站点规划创建10任务二在远程服务器上创建站点11实训三常见的HTML标签应用14任务一HTML语法使用申明与练习14用任务二常用HTML标签的认识与练习14任务三在网页中添加图片、动画元素16任务四制作网页的背景图像18任务五制作网页滚动字幕18实训四HTML表格布局应用20格任务一表格HTML标签练习20任务二制作一个最简单表格21任务三表格嵌套的应用22任务四制作细线条表格24任务五利用表格制作课程表26任务六圆角表格的制作31实训五网站案例制作34任务一素材准备及站点创建34任务二表格布局网页应用34任务三填充网页中的内容35实训六超级链接应用41的任务一超链接的HTML语法练习41任务二文本与图像超链接应用41任务三电子邮件链接应用42任务四创建声音、视频文件链接42任务五超链接样式设置42任务六超链接综合应用43实训七网站表单应用45单任务一表单HTML标签及控件练习45任务二搜索表单制作应用46任务三登录表单页面制作应用486任务四QQ靓号申请注册页面51实训八DIV+CSS样式设计58任务一初识DIV与CSS错误!未定义书签。 任务二最简单的DIV+CSS布局错误!未定义书签。 任务三DIV+CSS布局上-中-下网页结构错误!未定义书签。 任务四DIV+CSS布局上-中(左-中-右)-下网页结构错误!未定义书签。 任务五DIV+CSS综合案例应用错误!未定义书签。 实训九网页界面设计与制作59任务一PS图像合成的应用59任务二制作留言簿效果图错误!未定义书签。 任务三制作网站后台登录界面错误!未定义书签。 任务四制作企业网站首页效果图错误!未定义书签。 实训十网页动画制作60作任务一制作G IF文字交替显示动画60作任务二制作F LASH图片交替显示动画64实训十一网页脚本编程应用69任务一禁止使用鼠标右键编程应用69任务二关闭网页编程应用70任务三选择头像编程应用70任务四登录验证编程应用71任务五无接缝图片滚动程序应用73任务六漂浮广告程序应用75任务七网页图片幻灯轮换播放器程序应用77任务八目录展开程序应用79实训十二网页框架技术应用83任务一框架及框架集应用83任务二浮动框架技术87实训十三测试和上传作品89附录一网站策划书书写格式90附录二CUTEFTP使用说明1001实训一网页基础知识 一、实训目的和要求实训一网页基础知识 一、实训目的和要求通过理论知识的学习，温习并深刻理解何为网站、网页设计基本理念、确定网页整体风格、网页色彩的搭配、绘制设计草图以及对网站制作的工具的初步应用。 二、实训内容任务1网站、网页和主页。 任务2网站制作工具使用任务3网站策划方案的编写 三、实训准备Dreamweaver中文版、Photoshop中文版、Flash中文、ASPWEB服务器。 四、实训步骤任务一网站、网页和主页1.网站（Website）是指在因特网上根据一定的规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。 人们可以通过网站来发布（或浏览）想要公开的资讯，或者利用网站来提供相关的网络服务。 一个网站中可以包含几十至几百个网页。 现在的许多公司都拥有自己的网站，他们利用网站来进行宣传、产品资讯发布和招聘等。 如图1-1所示即为中央电视台的门户网站。 2.网页（Web Page）是构成网站的基本元素，是承载各种网站应用的平台。 网页实际上是一个文件，存放在某一台计算机中，而这台计算机必须是与互联网相连的。 网页经由网址（URL）来识别与存取，当用户在浏览器地址栏中输入网址之后，经过一段复杂而又快速的程序运作，网页文件就会被传送到用户的计算机中，再通过浏览器解释网页的内容，最终展示到用户的眼前。 网页的分类，笼统意义上的分类是动态页面和静态页面。 静态页面多通过网站设计软件来进行重新设计和更改，技术实现上相对比较滞后。 当然，现在的某些网站管理系统也可以直接生成静态页面，这种静态页面通常可称为伪静态。 静态页面内容是固定的，其后缀名通常为.htm、.html、.shtml等，如图1-2所示。 2动态页面是通过执行ASP、ASP.NET、PHP、JSP等程序生成客户端网页代码的网页，通常可通过网站后台管理系统对网站的内容进行更新和管理，如发布新闻、发布公司产品、交流互动、微博和网上调查等，都是动态网站功能的一些具体表现。 图1-1中央电视台主页图1-2静态页面动态页面的常见扩展名通常有.asp、.aspx、.php、.jsp、.cgi等，如图1-3所示。 小小技巧静态网页与动态网页的区分方法主要通过文件的扩展名来判定是静态还是动态网页。 而静态网站与动态网站的区分方法，主要通过网站的功能性、是否应用了数据库等方法来判定。 3.网站主页（Home Page）也被称为首页，它是整个网站的主索引页。 网站首页名称是特定的，一般为index.htm、index.html、default.htm、default.html、default.asp或index.asp等。 如图1-4所示即为新起点工作室的网站主页。 图1-3动态页面图1-4新起点工作室网站首页简而言之，网站、网页和主页是3个功能不同但又紧密联系的概念，一个网站由多个网页元素构成，若干个网页又通过主页链接成一个完整的网站系统。 任务二网站设计与制作工具使用31网页工具网页工具主要分为标记型和所见即所得型。 所见即所得型的软件主要有微软的Frontpage和Dreamweaver。 其中Frontpage继承了OFFICE系列软件的界面通用、操作简单的特点，十分适合初学者使用。 但Frontpage与MacroMedia公司的Dreamweaver相比，在HTML源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，本教材主要介绍的网页工具是Dreamweaver。 2图形和图像处理工具目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件Photoshop和MacroMedia公司推出的Fireworks（MacroMedia公司也已被Adobe公司收购）。 Photoshop的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了Image Ready，能够实现各种专业化的图像处理、动画的制作等。 Fireworks是由MacroMedia公司出品的首选WEB图形图像处理软件。 它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成Fireworks HTML，直接导入到网页中，使用非常方便。 3动画制作工具Flash是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。 Flash所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，Flash已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。 例实例1认识Dreamweaver工作界面下图1-5为首次打开Dreamweaver软件时“选项”选择，与图1-6Dreamweaver“启动界面”，图1-7Dreamweaver软件的“欢迎屏幕”，图1-8为软件的“工作窗口”。 4图1-5设置器选项图1-6Dreamweaver cs6启动界面5图1-7Dreamweaver欢迎屏幕图1-8Dreamweaver工作窗口例实例2采用Word文字处理工具或者Photoshop图片处理软件绘制以下个人网站栏6目草图。 图1-9个人网站栏目草图练习根据上图所提供的网页栏目名称，在Dreamweaver中创建相应的网页文档（注意名称不用汉字）。 任务三网站策划方案的编写网站策划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出策划。 网站策划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。 网站策划书出应该尽可能涵盖网站策划中的各个方面，网站策划书的写作要科学、认真、实事求是。 网站策划书包含的内容如下 一、建设网站前的市场分析 1、相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网上开展公司业务。 2、市场主要竞争者分析，竞争对手上网情况及其网站策划、功能作用。 3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。 二、建设网站目的及功能定位 1、为什么要建立网站，是为了树立企业形象，宣传产品，进行电子商务，还是建立行业性网站？是企业的基本需要还是市场开拓的延伸？ 2、整合公司资源，确定网站功能。 根据公司的需要和计划，确定网站的功能类7型企业型网站、应用型网站、商业型网站（行业型网站）、电子商务型网站；企业网站又分为企业形象型、产品宣传型、网上营销型、客户服务型、电子商务型等。 3、根据网站功能，确定网站应达到的目的作用。 4、企业内部网（Intra）的建设情况和网站的可扩展性。 三、网站技术解决方案（与专业公司商议）根据网站的功能确定网站技术解决方案。 1、采用自建服务器，还是租用虚拟主机。 2、选择操作系统，用Windowxx/NT还是Unix、Linux。 分析投入成本、功能、开发、稳定性和安全性等。 3、采用模板自助建站、建站套餐还是个性化开发。 4、网站安全性措施，防黑、防病毒方案（如果采用虚拟主机，则该项由专业公司代劳）。 5、选择什么样的动态程序及相应数据库。 如程序ASP、JSP、PHP；数据库SQL、ACCESS、ORACLE等。 四、网站内容及实现方式（与专业公司商议） 1、根据网站的目的确定网站的结构导航。 一般企业型网站应包括公司简介、企业动态、产品介绍、客户服务、联系方式、在线留言等基本内容。 更多内容如常见问题、营销网络、招贤纳士、在线论坛、英文版等等。 2、根据网站的目的及内容确定网站整合功能。 如FLASH引导页、会员系统、网上购物系统、在线支付、问卷调查系统、在线支付、信息搜索查询系统、流量统计系统等。 3、确定网站的结构导航中的每个频道的子栏目。 如公司简介中可以包括总裁致词、发展历程、企业文化、核心优势、生产基地、科技研发、合作伙伴、主要客户、客户评价等；客户服务可以包括服务热线、服务宗旨、服务项目等。 4、确定网站内容的实现方式。 如产品中心使用动态程序数据库还是静态页面；营销网络是采用列表方式还是地8图展示。 五、网页设计 1、网页设计美术设计要求，网页美术设计一般要与企业整体形象一致，要符合企业CI规范。 要注意网页色彩、图片的应用及版面策划，保持网页的整体一致性。 2、在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。 3、制定网页改版计划，如半年到一年时间进行较大规模改版等。 六、费用预算、费用支付 1、企业建站费用的初步预算一般根据企业的规模、建站的目的、上级的批准而定。 专业建站公司提供详细的功能描述及报价，网站的价格从几千元到十几万元不等，网站建设的费用一般与功能要求是成正比的。 2、费用支付支付标准与支付方式网站建设业内一般采用按制作量记费的方式。 网站建设收费项一般可以包括以下一些素材阶段的文字录入费，翻译费、图片处理费、页面风格设计费用（一般指主页和栏目首页）页面特效制作费用（譬如功能性程序开发费用（如调查系统，会员注册系统等）数据库数据录入费用空间租用费用等。 其次，确定每个收费项的单位价格。 七、项目时间和进度包括网站开始和结束的时间，以及项目预计的进度，都应该在网站建设方案书中予以体现。 八、网站维护 1、服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。 2、数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。 3、内容的更新、调整等。 4、制定相关网站维护的规定，将网站维护制度化、规范化。 5、说明动态信息的维护通常由企业安排相应人员进行在线的更新管理；静态信息（即没用动态程序数据库支持）可由专业公司进行维护。 九、网站测试网站发布前要进行细致周密的测试，以保证正常浏览和使用。 主要测试内容 91、文字、图片是否有错误。 2、程序及数据库测试。 3、链接是否有错误。 十、网站推广 1、在公共场所发布广告，增加网站曝光。 这种推广需要一些资金投入，企业可根据自身情况选择。 2、在各大网站发布软文，发帖吸引流量。 3、选择搜索引擎竞价排名。 目前国内主流的搜索引擎是百度，可以选择百度竞价排名。 4、聘请专业seo人员或公司做好优化，提高网站搜索引擎排名。 练习见附录 五、实训方法在机房进行讲解演示，并抽样进行检查。 六、考核办法此部分实训内容采用抽样考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。 七、思考和练习1.参考本节内容使用Word文字处理工具绘制一个“XX班级网站”的栏目草图。 *2.参考附录中的范文，尝试设计本班班级网站并编写出网站建设的方案书。 10实训二网站站点规划及创建 一、实训目的和要求通过理论知识的学习，温习并深刻理解网页设计基本理念、确定网页整体风格、网页色彩的搭配、绘制设计草图、创建网站站点以及对网站制作的工具的初步应用。 二、实训内容任务1站点规划创建。 任务2在远程服务器上创建站点 三、实训准备Dreamweaver中文版、Photoshop中文版、Flash中文、IIS、ASPWEB服务器。 四、实训步骤任务一站点规划创建根据实训一中的个人站点草图完成以下站点结构规划1.创建站点并规划该网站中的文件目录结构，该网站文件分类有网页文件、图片文件(名为images)、声音文件(名为sound)、动画文件(名为donghua)、脚本文件(名为jscript)、CSS样式文件(名为style)等。 2.打开Dreamweaver软件，分别创建首页（要求名称要么为index或者default）、个人简介文学作品、绘画作品、动画作品、视频作品、学习心得、给我留言、等网页文件。 注意网页名称用英文。 3.由于本网站是小型个人网站，因此修改网站首页文件的标题(亲，我今天开始学做网页了哦浏览网页效果如图3-116图3-1浏览页面效果任务三在网页中添加图片、动画元素1.在网页中添加图片（包含GIF图片）步骤在DreamWeaver中新建一个普通网页命名为“tu_donghua.html”,点击菜单栏“插入”菜单下的“图像”命令选择所要添加到网页中的图片，如图3-2，图3-3图3-2添加图像的菜单与工具栏操作17图3-3选择图像对话框在网页中添加图像后的HTML代码如下图3-4图3-4图像HTML标签2.在网页中添加flash动画步骤在“tu_donghua.html”网页中,点击菜单栏“插入”菜单下的“媒体”子菜单下的“SWF”命令，选择所要添加到网页中的flash动画文件即可，如图3-5。 图3-5插入flash动画操作在网页中添加flash后的HTML参数代码如下图3-6图3-6网页中添加flash动画后的HTML参数18任务四制作网页的背景图像步骤1利用photoshop软件制作一个2x500像素大小的上下渐变（任意颜色至白色），并保存为gif或jpeg格式；2在DreamWeaver网页中点击“修改”菜单下的“页面属性”，在弹出的对话框中选择图片以及设置图片的重复性及重复方向，如下图3-7图3-7设置网页背景图像HTML参照代码如下任务五制作网页滚动字幕步骤在DreamWeaver中新建一个普通网页命名为FontMove.html,并将以下代码添加到网页中，代码如下欢迎访问。 今天是xx年8月20日星期二,天气:晴逆水行舟，不进则退19忧郁徘徊，飘忽不定公司最新产品公告栏向上走公司最新产品公告栏向下 五、实训方法在机房进行讲解演示，并抽样进行检查。 六、考核办法此部分实训内容采用抽样考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。 七、思考和练习1.网站搜索关键字添加在代码的什么位置？2.如何设置网页每3秒后刷新一次本页面？3.制作一个“成都立方科技”文字平铺网页的背景图20实训四HTML表格布局应用 一、实训目的和要求实训四HTML表格布局应用 一、实训目的和要求了解并熟悉表格的HTML标签代码，并熟练表格中的行、列、单元格以及对其相关属性的应用。 必须掌握文字表格与图像嵌套的表格制作技术。 二、实训内容任务一表格HTML标签练习任务二制作最简单表格任务