《网页设计与制作》综合实训指南

XXX学院男生宿舍X号楼综合布线系统设计方案设计单位：设计指导：宿舍布线系统的设计一、综述A.布线系统将贯穿雨1~5楼的各个平面。

主要为语音、数据、图像等系统信号提供高性能传输路由。

B.作为一个综合性的线路平台，应具有一定的兼容性和开放性，可满足各类通讯及计算机等传输需要和网络结构，提供一个标准化、高带宽、低成本的网络环境。

C.系统应具有开放的模块化结构，可灵活地进行资源分配，线路管理、变更和扩展。

D.系统应提供一个安全、有序。

便于管理的设备安装及连接环境，可快捷简便地进行系统安装和运行。

E.在充分考虑目前应用情况下，以高起点和适度超前的原则来规划本系统。

为各种高性能应用踢狗充足的传输带宽，为日后系统的升级提供充足的空间。

F.宿舍楼基本情况：楼层面积约为16*9米，且已有中国移动和中国电信的无线网络热点分布。

二、具体布置系统包括工作区子系统、配线(水平)子系统、干线子系统、设备问子系统、管理子系统和建筑群子系统。

1.工作区子系统。

工作区子系统是由学生信息插座到计算机网络的连接线缆。

学生宿舍的房间设置一般为6人间其内部语音及网络数据点的位置不像大开问办公那样难以布置，因室内床位布置均已确定，很容易确定其数据端口的位置。

日前宿舍布置一般为上铺居住，床铺下设置学习书桌，因此数据端安装在书桌下，高度为0．3 m。

应根据校方的要求，选择数据端口的安装数量。

对于要求较高的，每个学生书桌下方设置一个数据端口，房间内公共部位设置一个电话端『_J。

要求较低的，可每两个同学共用一个数据端口，然后采用交换机分别接引至电脑。

其优点是减少了水平引来线路和保护管线(槽)，缺点是影响网络速度，需自加分配没备。

除考虑数据端r]的位置外，还需相应布置供电电源插座，间距应为0．2 m。

2.配线(水平)子系统配线(水平)子系统由楼层配线架(FD)至信息插座之间的线缆、信息插座(含转换点及配套设施)组成，它将偻层弱电竖井内配线架与每个宿舍室内的信息插座相连。

《网页设计与制作》综合实训第一篇：《网页设计与制作》综合实训《网页制作》期末大作业一、概述：要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。

网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。

可以从网上下载部分资料，但不能超过整个内容的30%，更不要指望从网上下一个完整的网站应付老师。

总的页数应超过10页（一个包含主题内容的htm文件算一页）。

请同学们注意不要下载相同的资料，如果出现网页内容雷同，双方都要扣分，严重的必须重做。

二、网站内容：自行选择如下内容：科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通安全；卫生与健康；爱心；教育；新青年；管理；实用工具等。

自己确定一个主题，整个网站要突出主题，信息分类合理，导航清晰。

要求必须有自己创作的内容，这些原创内容可以是文字、图片、动画等。

三、版面及格式：l、要求图文并茂，颜色搭配合理，但是图片及声音文件不要太大。

如果能加入自己创作的动态元素(如Flash，Gif动画等)将获得加分。

希望充分发挥自己的创作能力。

2、要求每个网页都使用表格布局。

3、要求网页中插入有Web组件，包括悬停按钮、滚动字幕、横幅广告管理器等。

4、导航设计简洁明了，不能有“死链接”，要保证能够在网络上浏览。

5、自创内容越多越好，得分越高。

四、递交方式：1、每个同学以自己的学号姓名建一个文件夹，上交时间为18周2、所做网页的首页文件名必须为index.htm3、所有文件名和目录名全部使用英文字母和数字，不得使用汉字或全角符号，否则，网络将出现死链接。

4、递交时必须把网页中所有用到的图片、声音、动画等都一起上传到服务器。

网页的总容量一般不要大于3MB5、建议将网页中的素材分类，建立不同的子目录存放。

五、网页评分标准:整个网页的评分强调“自己的创意”，不管主题是什么，也不论是哪一个栏目的内容，如果创意独特，有自己鲜明的个性、观点，得分较高。

《网页设计综合实训》实训指导方案一、实训目的与要求《网页设计综合实训》主要目的是让学生通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。

因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。

二、实训内容1.实例实训以一个电子商务静态网站设计的实例指导学生如何独立完成电子商务静态站点的设计和制作。

让学生在机房实际操作，按照给定的实例完成实例中站点的创建和设计制作。

2.自建站点实训让学生自行选择站点的主题，从规划站点到上传文件一步一步完成整个站点的创建、调试和上传工作。

3.总结对学生的全部作品进行考核，并选择典型的案例对实训的结果进行考核。

三、参考课时四、实训材料准备1.软件准备Dreamweaver 8中文版、PhotoShop7.0以上版本、Flash中文版（本实训对FLASH技术不做要求）。

2.硬件准备网络条件：与因特网连接的局域网。

教师用机：Windows2000 Server及以上版本。

学生用机：Windows2000 Professional及以上版本。

五、综合实训考核办法：1)系统文档 20分2)编写代码 30分3)程序调试 10分4)实训出勤 20分5)技术含量 10分6)美工设计 10分目录实训一基本知识回顾 (1)实训二实例一讲解 (4)实训三实例一操作 (6)实训四实训作品的站点规划 (8)实训五整体布局设计 (10)实训六搜集和创建资源 (13)实训七页面素材设计 (15)实训八样式设计 (17)实训九首页模板设计 (19)实训十二级页面模板设计 (20)实训十一各页面的细化、测试和上传作品 (21)实训十二总结 (23)附录一网站规划书书写格式 (25)附录二CUTEFTP使用说明 (27)实训一基本知识回顾一、实训目的和要求温习网页制作的课程重点难点，使学生对Dreamweaver 8各方面的操作知识系统的由“片”的认识转向“面”的认识。

《网页设计与制作》课程实训指导书一、实训目的本次实训给学生提供了深入学习的资料和信息，紧紧围绕网站设计流程：规划、设计、开发、发布、维护来进行网站的开发，模仿并设计制作出相关的网站。

以此作为学生学习这门课程的阶段性ao总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。

二、实训任务通过对网站的设计，使学生熟练应用网站设计软件，使学生网站建设有一个综合系统的掌握。

在制作过程中，主要完成对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成项目作品。

1．网站策划1）画出网站结构草图。

2）确定栏目。

3）进行版面设计。

分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容4）搜集素材。

如相关文字录入，图片素材，班级相片等等。

2．制作网页。

1）建立站点。

例如：命名为webfile,网站的结构如下：2）进行主页的设计。

要求主页中包含一个自己完成的Flash。

3）进行其他页面的设计。

4）建立几个页面间的链接关系。

3．测试网站4．作品提交与评分三、实训计划四、实训环境计算机上要求安装有Dreamweaver、Flash、photoshop等软件。

计算机与互联网相连，以便学生能够浏览优秀网站，搜集相关素材等。

五、实训过程（含步骤）1. 确定目标通过网络就某个专题搜索资料，题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？参考专题：对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。

也可以是其它的有兴趣的专题如：文学、历史、科技、体育、旅游、生活、时尚等。

参考选题：班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站……2. 选择目标用户确定了站点实现的目标之后，需要确定站点的浏览客户。

网页设计与制作实训报告网页设计实训报告篇1一、实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节、它是根据专业教学计划的要求、在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程、因此加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。

二、实训目的1、通过综合实训进一步巩固，深化和加强学生的理论知识于专业技能。

（1）掌握规划网站的内容结构，目录结构，链接结构的方法。

（2）熟练掌握网页制作软件Dreamweaver8和基本操作和使用技能。

（3）掌握页面的整体控制和头部内容设置的方法。

（4）熟练掌握网页页面布局的各种方法。

（5）熟练掌握在网页中输入，设置标题和正文文字的方法。

（6）熟练掌握在网页中插入图像，Flash动画和背景音乐的方法。

（7）熟练建立各种形式的超级链接的方法。

（8）掌握表单网页制作方法。

（9）掌握网页特效制作方法。

（10）掌握网站测试的方法。

2、训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。

3、培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。

4、培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力，树立自信心。

三、实训步骤1、定义站点2、设定网页属性和文本格式3、从大到小把结构设计好4、输入主要内容并进行排版5、检查并保存四、实训心得两周的实训转瞬即逝，在这短暂的时间里，我们在老师的指导和帮助下，对于网页设计与制作有了进一步的了解。

在这两周内，同学们每天都按时完成老师留下的作业，对于自己以前不理解的东西，通过老师的重新讲解、指导和自己的练习，对其有了很好的了解；对于我们看不懂的一些内容，通过与同学协商和听老师的讲解来理解并掌握它。

《网页设计与制作》综合实训指导书前言为了加强学生能力的培养，提高学生的实践操作技能，以适应社会、经济和科技的发展对职业人才的需求，向社会提供大批能够直接从事网站开发和技术服务的应用型操作人才。

特编写本指导书《网页设计与制作》是一门实践性很强的课程，网页设计与制作实训是学好网站开发、掌握网页制作基础知识的极为重要的环节，是培养学生动手能力的重要途径。

因此，加强网页设计与制作实验课程的教学具有十分重要的意义。

本指导书是在多年的教学实践经验的基础上，广泛听取了有关任课教师的意见，并结合我校网络专业实训设备的现状编写而成的。

编写中，精选实验项目与内容，力求简明扼要、通俗易懂、目的明确、原理简洁、步骤清晰、结论正确。

针对学生知识面及个人特长的不同，本指导书设计有选做内容，此部份内容主要为数据库开发及动态模块设计与程序编写等内容，以此拓展学生知识面与技能的全面性，学生可根据自身特点及时间来选择是否完成网站的动态开发部分。

本指导书适用于计算机网络三年制（或四年制、五年制）专业教学使用。

由于编者时间仓促，水平有限，对指导书中存在的缺点和错误，望大家给予指正，在此深表感谢！编者二零一一年五月十日目录实训课程概述 (4)项目一：设计与制作“博爱”助学网站。

(7)项目二：设计与制作“华医”中医健康网站。

(12)项目三：设计与制作世博会志愿者网站 (17)项目四：设计与制作传统节日网站 (22)项目五：设计与制作环保网站 (27)项目六：设计与制作音乐网站 (33)项目七：设计与制作台湾旅游网站 (38)项目八：设计与制作图书网站 (43)项目九：设计与制作军事新闻网站 (48)项目十：设计与制作科技公司网站 (53)项目十一：设计与制作健身俱乐部网站 (58)项目十二：设计与制作婚礼策划公司网站 (63)项目十三：设计与制作奶茶网站 (69)项目十四：设计与制作植物园网站 (75)项目十五：设计与制作快餐连锁店网站 (81)项目十六：设计与制作青年旅舍网站 (86)项目十七：设计与制作鞋业有限公司网站 (91)项目十八：设计与制作摄影公司网站 (96)项目十九：设计与制作中国杏仁网站 (102)项目二十：设计与制作李小龙截拳道网站 (108)实训课程概述项目一：设计与制作“博爱”助学网站。

学习指南《网页设计与制作》网络资源共享课程由网上学习、教学互动等部分组成，由于该课程是一门实践性和应用性很强的技术专门课程，因此还要求学习者参与每个任务所规定的实验及实训等实践性教学环节的训练。

网上学习部分的内容充分利用了计算机、INTERNET、多媒体等技术手段, 采用文本图片、音频、视频、动画、案例、网站等多种表现形式，全面系统介绍网页设计与制作的知识。

实践性教学环节含实验和实训等内容，由每个任务具体给出，学生应认真按照具体指导及要求完成实验和实训的训练，着重培养理论联系实际的能力，培养实际动手能力及实验技能，培养分析问题与解决问题的能力。

本课程是一门“教、学、做”一体化的学习领域课程，在学习本课程时，不仅要重视知识技能的学习，还应重视实践性教学环节、团队协作等，要完成一定数量的实践和实训课题，在反复运用中加深理解和巩固所学的知识。

经过与企业工程师反复讨论，根据网站的一般开发流程，我们设计四个真实的网站建设项目作为教学素材，根据教学规律进行优化，形成了本课程的教学项目。

这四个项目分别是：项目一：“银帝矿业”企业网站建设（第一版）。

这是一个导引项目，定位于“我教---你学”。

主要用于教师教学示范和学生技术体验，是“边学边做”的教学过程，项目二：“银帝矿业”企业网站建设（第二版）。

这是一个是训练项目，定位于“你做---我导”，主要用于巩固提高，训练学生操作能力，以学生自己动手做为主，教师的作用是解决学生在做的过程中出现的问题，是“做中学”的训练过程。

项目三：工学结合项目。

这是一个强化项目，定位于“你做---我评”，主要用于强化学生网页设计与制作的综合能力，教师的作用是从用户的角度对网页设计效果进行评价，是“技能提升”的过程。

项目四：岗位工作项目。

这是一个综合项目，定位于“你做---用户评”，这个项目安排在企业进行，由企业兼职指导教师带领学生参加真实项目的设计与制作，学生参与用户需求分析、项目规划、设计与制作全过程，作品将直接由用户评价，是“工学结合”的过程。

网页设计与制作实训实施方案一、实训目标本次网页设计与制作实训的主要目标是让学生掌握网页设计与制作的基本技能和流程，培养学生的创新思维和实践能力，提高学生的团队协作和沟通能力，为学生今后从事相关工作打下坚实的基础。

具体目标包括：1、让学生熟悉网页设计与制作的常用工具和技术，如 HTML、CSS、JavaScript 等。

2、培养学生的网页布局和色彩搭配能力，使学生能够设计出美观、实用的网页界面。

3、提高学生的网页交互设计能力，让学生能够实现网页的动态效果和用户交互功能。

4、培养学生的团队协作精神，让学生在团队中学会分工合作、相互沟通和协调。

5、增强学生的问题解决能力和自主学习能力，让学生能够独立解决在网页设计与制作过程中遇到的各种问题。

二、实训内容1、网页设计基础知识网页的基本概念和构成要素，如网页的结构、布局、色彩、字体等。

网页设计的原则和规范，如用户体验、可用性、可访问性等。

2、 HTML 与 CSS 基础HTML 标签的使用，如标题标签、段落标签、链接标签、图像标签等。

CSS 样式的应用，如字体样式、背景样式、边框样式、布局样式等。

3、网页布局设计常见的网页布局方式，如流式布局、固定布局、响应式布局等。

使用CSS 实现网页的布局，如浮动布局、定位布局、弹性布局等。

4、网页色彩搭配色彩的基本原理和搭配原则，如色相、饱和度、明度等。

运用色彩心理学知识，为网页选择合适的色彩方案。

5、网页图像处理图像的格式和优化，如 JPEG、PNG、GIF 等。

使用图像编辑工具，如 Photoshop，对网页图像进行处理和制作。

6、网页交互设计JavaScript 基础语法和常用函数，如变量、数据类型、控制结构等。

使用 JavaScript 实现网页的动态效果，如轮播图、下拉菜单、表单验证等。

7、网页项目实践学生分组完成一个完整的网页设计与制作项目，包括需求分析、设计规划、页面制作、测试发布等环节。

三、实训方法1、课堂讲授由教师讲解网页设计与制作的相关知识和技能，通过案例分析和演示，让学生直观地了解网页设计与制作的过程和方法。

武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013 年9月《网页设计与制作综合实训》实训指导书目录实训目的 (1)实训内容及要求 (1)实训性质、实训地点、实习时间安排，适用专业班级 (2)实训一站点的规划设计 (3)实训二设计案例网站LOGO (4)实训三设计案例网站BANNER (5)实训四设计案例网站导航条 (6)实训五设计案例网站网页内容和网页版权声明 (7)实训六对案例网站版面切图 (8)实训七制作完成案例网站首页 (9)实训八案例网站模板的制作 (10)实训九案例网页超级链接的添加 (11)实训十案例网站加入动态元素 (12)第2 页实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。

本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。

通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训内容及要求本实训的内容简述：1. 网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2. 专业概况点击项目概况，显示相关文本3. 专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书内容4. 专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容5. 专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6. 专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。

《网页设计与制作》课程实验实训指导书课程编码：060303 课程名称：网页设计与制作课程学分：4 计划课时：68，理论：26 实践： 42课程类别：理论课理论实践一体√实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制订人：审核人：批准人：负责人：7《网页设计与制作》课程实验实训指导书一、课程基本信息课程编码：060303 课程名称：网页设计与制作课程学分：4 计划课时：68，理论：26 实践： 42课程类别：理论课理论实践一体√实践适用专业：计算机网络技术、计算机应用技术、信息管理、动漫设计与制作先修课程：网页动画设计与制作、图形图像处理后继课程：程序设计制订人：审核人：批准人：负责人：二、课程任务和目的该课程是计算机网络技术、计算机应用技术专业的核心课程，也是动漫设计、信息管理专业的必修课程，它的目标是从职业技术教育的特点出发，培养学生实际动手制作网页与管理网站的能力，使学生具备网页设计与制作、网站规划与维护的实践技能，以便形成良好的计算机网页制作与网站管理职业素养。

学生毕业后可胜任网站管理员、网页设计师、网页美工师等工作岗位，并可不断提升岗位工作能力。

它要以计算机基础、网页动画设计与制作、图形图像处理课程的学习为基础，也是进一步学习程序设计课程的基础。

三、实验实训项目内容与学时分配（表格可根据内容调整宽度和增加行数）序号项目名称实验（实训）名称实验（实训）内容学时实验类型实验要求1 项目一个人网站的设计与制作实训一认识与策划个人网站1. 确定网站主题2．确定网站风格3．规划网站内容2设计型必修实训二创建站点并制作网页1．建立文件夹2．建设站点3. 制作子页4. 制作首页5. 制作网页图片素材4综合型必修实训三创建网站相册、创建超链接1. 创建网站相册2. 创建首页中的文字链接3. 创建电子邮件链接2综合型必修2 项目二电子商实训一认识与策划电子商务类策划电子商务类网站 1设计型必修务网站设计与制作网站实训二首页的布局设计1. 创建站点2. 绘制布局单元格3. 使用表格进行布局的细化1综合型必修实训三制作网站Logo与页面图片1. 制作网站Logo2. 制作顶部导航图片3. 制作菜单导航图片4. 制作顶部广告图片5. 制作左边小图标6. 制作书籍图片4综合型必修实训四制作首页制作首页 2综合型必修实训五添加CSS样式表添加CSS样式表 2综合型必修3 项目三学校类网站设计与制作实训一认识与策划学校类网站1. 确定网站风格特色2. 划分网站所要包含的项目3. 绘制网站的结构图4. 绘制首页布局草图2设计型必修实训二建立站点与布局首页1. 创建站点2. 首页整体布局3. 设置网页的页眉和导航栏4. 设置网页的连接区5. 设置网页的主内容区6. 设置网页的页脚7. 设置网页的CSS样式4综合型必修实训三使用库元素创建网页1. 库元素的创建2. 库元素的使用3. 库元素的编辑2综合型必修实训四制作导航栏所连接的网页1. 创建“本系介绍”网页2. 创建其他导航栏所要链接的网页3. 编辑库元素在导航栏部分的超链接2综合型必修实训五使用模板创建网页1. 模板的创建2. 设置可编辑区域3. 应用模板4. 更新模板内容2综合型必修4 项目四企业类网站设计与制作实训一认识与策划企业网站策划企业网站 1 实训二切割页面效果图1. 创建站点2. 页面布局3. 添加首页的部分元素1 实训三制作网页Banner1. 利用Flash制作网页Banner2. 在页面中插入Banner2 实训四制作留 1. 调整留言板页面 2言板 2. 利用表单制作留言板3. 利用表单制作首页部分内容实训五使用内嵌框架1. 制作新闻文本页面2. 制作新闻页面2实训六使用网页特效1. 将新闻制作成滚动字幕2. 以跟随滚动条滚动的对联广告形式显示联系方式3. 状态栏显示滚动欢迎词2实训七网站的测试与发布1. 申请域名2. 上传网站3. 维护网站4. 添加网页搜索关键字和说明信息5. 推广网站2合计学时42注：1.实验设置要注意内容更新，体系设计科学合理，实验项目名称要准确规范。

《网页设计与制作》综合实训指南网站开发的参考案例1.1 规划网站1．策划网站主题我们网站是德阳嘉兴别墅设计公司．公司遵循〝奉献精深技艺、铸造温馨家园、炼就英雄团队、创建百年老店〞的进展理念，坚持〝客户至上、重信守约、质优价平、热忱服务〞的经营宗旨，追求〝简约明快、美观时尚、突出个性、有用环保〞的装饰风格，以新颖时尚的设计、规范精巧的施工和热情人性的服务，为业主构筑温馨、舒服、精美、典雅的家园。

2．确定网站风格确定好站点主题后，依照该主题选择站点的风格。

因此本案例所建立的网站是别墅设计类网站。

本网站的要紧特点如下：〔1〕设计风格要大众化，为了提高扫瞄速度，尽量减少图片的使用，更多地使用表格或层实现成效。

〔2〕背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。

〔3〕文字内容丰富、知识性强，标题简洁明了，字体一样采纳宋体，大小一样为12像素。

3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，通过反复推敲，最后确定完整的栏目和内容的层次结构。

本案例的〝别墅设计网〞的栏目结构如表17-1所示。

表17-1 〝别墅设计网〞的栏目结构为了简化对网站的扫瞄过程，大部分网页通过二级栏目就能扫瞄内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展现，公司简介。

4．规划网站名目结构和链接结构依照网站策划确定的栏目结构，创建站点名目，一个网站的名目结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。

〝别墅设计网〞的名目结构，各文件夹的所存放文件类型如表17-3所示。

表17-3 网站的名目结构及其存放的文件类型index.html 主页网站的链接结构与名目结构不同，网站的名目结构指站点的文件存放结构，一样只有设计人员能够直截了当看到，而网站的链接结构指网站通过页面之间的联系表现的结构，扫瞄者扫瞄网站能够观看到这种结构。

本网站的链接结构采纳〝网状〞链接结构，结构图如图17-2所示。

网页设计与制作实训指导书网页设计与制作实训指导书目录实验1: 建立站点 (3)实验2：在网页中建立文本和段落.......... 错误！未定义书签。

实验1: 建立站点一、实验目的1．掌握在dreamweaver中建立站点和网页的方法二、实验环境1、一台裸机2、dreamweave网页设计软件三、实验内容在dreamweaver中建立站点和网页四、实验步骤、过程1、在菜单栏【站点】菜单中选择【管理站点】，在弹出的【管理站点】对话框中点击【新建】按钮，出现【站点】和【FTP】两个选项。

选择如图2.6所示。

2、选择【站点】弹出【未命名站点1的站点定义为】对话框，在【未命名站点1的站点定义为】中选择【基本】选项卡。

3、文本框中填写您站点的名字，它仅仅做为管理和识别用，单击【下一步】按钮，进入下一步。

如图2.7所示。

4、我们要建立的是静态网页，因此我们选择【不，我不想使用服务器技术】如图2.8 所示，单击【下一步】按钮，进入下一步。

5、选择第一项：编辑我计算机的本地副本，完成后再上传，也建议网络初学者也采用此项，选择要保存网站的物理路径名。

手工填写或者点击文件夹图标选择路径都可以，单击【下一步】按钮，进入下一步。

如图2.9所示。

6、\【您如何连接到远程服务器】现在，已经为您的站点定义了一个本地根文件夹。

暂时我们还不登陆远程服务器，因此选项中选择【无】。

单击【下一步】按钮，进入下一步。

7\、编辑站点站点的编辑其实很简单，选择【站点】菜单下的【管理站点】命令。

选中站点的名称，然后单击【编辑】按钮。

将会出现类似创建站点的内容，根据需要可以在相应的内容上进行修改。

实验2: 段落设置一、实验目的1．掌握利用记事本或者dreamweaver来创建段落二、实验环境1、dreamweave网页设计软件或者记事本三、实验内容在网页中建立文本与段落四、实验步骤、过程1、打开01文件夹下的01.htm网页，如图3.7所示2、选择布局工具栏的【绘制层】，放在如图3.8所示的位置，有关绘制层的更多内容参见后面的章节。

武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013年9月目录实训目的 (1)实训内容及要求 (1)实训性质、实训地点、实习时间安排，适用专业班级 (2)实训一站点的规划设计 (3)实训二设计案例网站LOGO (3)实训三设计案例网站BANNER (4)实训四设计案例网站导航条 (5)实训五设计案例网站网页内容和网页版权声明 (5)实训六对案例网站版面切图 (6)实训七制作完成案例网站首页 (7)实训八案例网站模板的制作 (8)实训九案例网页超级链接的添加 (9)实训十案例网站加入动态元素 (9)实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。

本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。

通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训内容及要求本实训的内容简述：1.网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况点击项目概况，显示相关文本3.专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书内容4.专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容5.专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6.专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。

本实训的要求：1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。

《网页设计与制作实训》指导书--以“五岳独尊泰山”为例一、规划网站1．策划网站主题在着手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。

本次所创建的网站是一个名山宣传类网站，主要以五岳独尊泰山为主题，包括泰山简介、泰山文化、泰山名吃、泰山地质、环境和神话传说等内容。

2．确定网站风格确定好站点主题后，就要根据该主题选择站点的风格。

由于本次所创建的网站是一个名山宣传类网站，要求结构清晰，能够展现出泰山的魅力所在。

本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，精选图片，同时尽量减少图片的使用，更多地使用层、表格实现效果。

（2）背景颜色以灰色和白色为主，文字颜色以黑色为主、蓝色和红色为辅。

（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为14像素。

（4）首页的版式结构采用典型的“三”字型结构，首页如图1-1所示。

图1-1 首页设计浏览效果二级页面采用与首页统一的风格设计。

该网站名称为“五岳独尊泰山”，所有网页的标题为“五岳独尊—泰山”，个人根据所定主题确定。

英文名称为“MountTai”。

3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。

“五岳独尊泰山”的栏目结构如表1-1所示。

表1-1“五岳独尊泰山”的栏目结构为了简化对网站的浏览过程，大部分网页通过栏目就能浏览内容页面，首页的主菜单包括9个菜单项：泰山简介、泰山文化、泰山名吃、泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。

4．规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。

“五岳独尊泰山”的目录结构，各文件夹的所存放文件类型如表1-2所示。

※注意※文件夹和文件的名称建议不要使用中文名，因为中文名在HTML 文档中容易生成乱码，导致链接产生错误。

本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。

实训学时数：125（5周）课外学时数：100适用方向：办公自动化、电子商务执笔者：王平露编写日期：2006年4月一、实训教学的目的与任务本实训项目的目的与任务是使学生根据问题的要求，构思一个主题，并运用网页制作工具，制作和发布网页，并对此进行更新和维护，掌握网站发布的工作流程，了解域名申请、空间申请的方法，能在校园网及英特网上发布网页。

通过设计、编辑和发布网页全过程的实际训练使学生对网页整体设计流程有一个深刻的认识，并且熟练掌握网页制作工具（Dreamweaver MX）的使用，初步掌握HTML、CSS语法格式，能借助手册看懂代码，能进行简单的代码改写工作，了解客户端脚本和服务端脚本区别，了解在网页上进行简单代码的嵌入与改写，会与其他工具结合使用以便实现更高效高质量的网页效果，进一步提高办公自动化效率和水平。

二、实训项目的基本要求及考核标准基本要求：（一）网页内容要求：1、主题内容：创意突出，体现校园园区精神文明建设体现本班级大学生风貌，学习气氛浓厚，作品内容健康。

严禁发布反对政府、宣传迷信、传播色情、系统破坏、黑客教程等违法信息。

2、具体内容：标徽、标题、各链接页具体内容，站内搜索、计数器、留言系统、电子邮件地址、弹出窗口、漂浮广告、背景音乐、网页特效、友情链接、版权信息等。

（二）制作基本要求：1、至少有10个页面，链接结构应有三层，下一层必须有返回上层的按钮或链接。

有整体框架结构，导航栏，表格定位，布局合理，色彩搭配协调统一。

2、主页的文件名为：index.htm。

文件名一般用英文小写字母。

3、网页中要有文本、图像、表格、交互与链接、层与动画、表单。

4、网页主要建立站内链接，尽量少建立外部链接，至少建立一个E-mail链接至你的邮箱。

《网页设计与制作》实践大纲《网页设计与制作》实习指导书【实验简介】掌握使用HTML 代码、熟练运用Dreamweaver 设计网页；利用Fireworks 图片处理；利用Flash 制作动画。

【实验目标】通过实验，使学生能进行WEB 站点网页的规划、设计、制作、管理与维护。

【学时数】32 学时【学时分配】实验项目一网页的创建及其基本结构【实验目的】使学生了解用HTML 创建网页的过程，掌握HTML 文档的结构及基本标记的使用。

【实验内容】1 ．使用文本编辑软件（如Window 的记事本）编辑、修改HTML 文件；2 ．利用IE 浏览器显示效果。

3 ．制作“个人简介”的简单网页；实验项目二HTML 的常用标签【实验目的】使学生掌握字体、字更进一步型、字号、颜色的设置，掌握段落的控制以及链接的标签和图像标签。

【实验内容】1 ．字体标志的使用2 ．理解书签超级链接的意义，target 属性不同取值对应的含义。

3 ．掌握图像的标签4 ．对“个人简介”的网页进行美化实验项目三HTML 常用标签2【实验目的】掌握表格的制作，掌握综合性表单的制作和跑马灯动态网页效果设计，掌握框架的使用【实验内容】1 ．使用表格组织数据2 ．使用表单标签建立注册信息3 ．用环绕标签制作跑马灯效果4 ．用框架标签布局网页5 ．使用内框架。

实验项目四Dreamweaver 站点管理和建立简单的网站【实验目的】使学生掌握Dreamweaver 的基本使用方法，并利用Dreamweaver 工具制作一个比较完整的网页。

【实验内容】1 ．建立本地站点，题材自选。

主页上要求有导航栏，文字、图像以及站点的广告图像（用鼠标经过图像来制作）。

2 ．主页下创建三个子页，要求子页上面有内容列表、水平线，日期，并利用属性页面设置这些对象的属性。

3 ．用多种超链接方式完成站点地图的创建。

4 ．利用页面属性对话框设置页面的背景颜色或背景图像，并更改超链接的颜色和样式。

商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013年9月目录实训目的 (1)实训容及要求 (1)实训性质、实训地点、实习时间安排，适用专业班级 (2)实训一站点的规划设计 (3)实训二设计案例LOGO (4)实训三设计案例BANNER (5)实训四设计案例导航条 (6)实训五设计案例网页容和网页声明 (7)实训六对案例版面切图 (8)实训七制作完成案例首页 (9)实训八案例模板的制作 (10)实训九案例网页超级的添加 (11)实训十案例加入动态元素 (12)实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。

本次综合实训基于学生的兴趣，选取专业建设开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成的前台设计。

通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训容及要求本实训的容简述：1.首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况点击项目概况，显示相关文本3.专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书容4.专业建设特色显示专业建设特色的文章标题列表，点击标题进入容5.专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6.专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。

本实训的要求：1.应用css和html（div+css）技术完成至少4个页面，其中必须包括主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。

目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级链接的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介"网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与网站管理实训17 网站开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建网站目录结构、栏目文件夹、网页文件的基本操作方法。

实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或128M ;硬盘不小于 500M ； VGA 彩显,带鼠标器。

操作系统：Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材.实训课时2学时实训内容创建站点：创建网站目录结构：创建栏目文件夹:创建网页文件：掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点，正确创建网站目录结构及栏目文件夹，创建主页文件index。

htm，并正确命名，掌握设置网页的页面属性的方法.实训步骤1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image 文件夹以存放网站中所要用到的图片。

2、定义站点：设置”站点名称”，命名为 "博客人";设置本地根文件夹，指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost.3、创建网站目录结构及栏目文件夹（如下图）：4、E盘下的bookman文件夹创建主页文件index。

htm5、设置网页的页面属性。