网站前台设计综合实训[韩宝玉]项目三-旅游休闲类网站的设计与制作
(完整)《旅游网》网页设计 实训报告
武汉交通职业学院《网页设计（二）综合实训报告》设计题目：“旅游网”制作系部: 电子信息工程息专业班级：计算机应用技术（1）班指导教师： *＊学生姓名： **学号：使用学期:2015年 6月~ 2016 年 1 月旅游网实训报告一.实训意义：网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据专业教学计划的要求。
在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程。
因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标，提高学生的综合素质有着重要的作用。
二.实训目的:1. 通过综合实训进一步巩固，深化和加强学生的理论知识于专业技能.（1）掌握规划网站的内容结构，目录结构，链接结构的方法.（2)掌握表单网页制作方法。
(3)掌握网页特效制作方法。
（4）掌握js基本语法。
（5)掌握获取元素，元素值,子元素,父元素的方法。
（6)掌握表单的验证方法,计算等。
2。
训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、Flash动画和网页特效等。
3。
培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及基本工作素质。
4. 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
三．实验步骤1。
网站主题我的网站的主题在于从各个方面全面的介绍网络游戏专题，包括每个页面都有介绍不同的游戏资料，、心得、图片等内容.同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅蓝色,给人带来一种温和舒适的感觉。
最重要给浏览者好的欣赏感受。
2．网站材料网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的资料。
同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料，图像资料,网页特效等，用以得来更加具有说服力的页面。
web前端实训报告总结
web前端实训报告总结（文章一）：Web前端技术课程实训报告《Web前端技术课程设计》报告（一）、实训课题名称（二）、课题设计目的通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。
培养学生动手能力，将PS制作效果图、、CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。
为以后学xx站打下基础。
（三）、实现功能：用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。
在编写文档时，必须严格遵照要求，最后提交文档。
功能要求：该网站首页必须包括网站logo、导航条（带有鼠标事件变化效果）、banner（简单flash动画）、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。
各页面之间通过超链接切换。
最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。
（四）、课题设计内容：（1）开发背景（2）网站分析设计部分1）客户需求分析? 网站栏目划分? 栏目内容介绍? 网站拓扑图? 网页风格创意设计2）网站风格定位3）网站建设方案4）网站效果图（3）网站制作部分1）效果图制作2）网页素材及网站架构制作3）首页制作页面设计4）子页面制作（五）、体会及下一步学习方向教师评语参考方案：目录开发背景 (4)前期准备 (4)客户需求分析..............................................................................4 网站风格定位..............................................................................5 色彩..........................................................................................5 排版..........................................................................................5 特效...........................................................................................6 网站建设方案..............................................................................6 网页风格创意设计........................................................................7 网站栏目划分 (7)栏目内容介绍..............................................................................8 网站拓扑图 (9)实训目的 (1)0 实训任务 (1)0 实训项目 (1)1 网站基本介绍..............................................................................11 报名界面 (1)0 保存的文件位置…………………………………………………………………11 首页展示效果图…………………………………………………………………12 导航条展示效果图………………………………………………………………13 留言板表格布局…………………………………………………………………14 网站版权的展示图........................................................................14 国内黑客网站界面展示图...............................................................15 黑客新闻界面展示图.....................................................................16 电影展示图 (18)黑客简介界面展示图.....................................................................20 黑客区别界面展示图 (21)黑客分类界面展示图.....................................................................22 实训中的问题和解决办法 (23)实训体会 (2)4（一）、开发背景如今已是信息化时代，很多网络中的强盗已经将魔爪伸向我们每一个网民。
《网页设计与制作》综合实训指导书
《网页设计与制作》综合实训指导书1.1 实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。
因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。
1.2 实训目的1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
1)掌握规划网站的内容结构、目录结构、链接结构的方法。
2)熟练掌握网页制作软件Dreamweaver CS4的基本操作和使用技能。
3)掌握页面的整体控制和头部内容设置的方法。
4)熟练掌握网页页面布局的各种方法。
5)熟练掌握在网页中输入、设置标题和正文文字的方法。
6)熟练掌握用Photoshop制作和处理网页的图片素材，用Flash制作动画的方法。
7)熟练掌握在网页中插入图像、flash动画、背景音乐的方法。
8)掌握建立各种形式超级链接的方法。
9)掌握表单网页制作方法。
10)掌握网页特效的制作方法。
11)掌握网站测试的方法。
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
5．训练和培养团队协作精神和共同开发网站的综合能力。
1.3 实训要求1．动手制作网页之前：1)必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
2)规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
网站网页前台设计课程设计报告书
一、网站规划、风格及功能设计此旅游网站主要以蓝色和白色两种颜色搭配而成，网站的主要以全国各地及国外的一些旅游胜点为主线，各个页面都的格式是用DIV+CSS中的语法设置出来的，利用语法设计框架，之后在框架中设计自己所需的素材样式等。
网站的总体主要以单色调为主，没有过多华丽的装饰，而显得整体页面干净清爽，使游览者在浏览网页时能体会到网站的简洁而不会觉得过多繁杂，页面中的字体也以灰色调为主，在鼠标滑过时呈现红色，整体相近的的颜色能让页面看起来更加舒适。
该网站还设计了一个用户登录和旅游酒店查询，让游客可以随时随地了解到需要去得地方的一些酒店概况以便提前做好准备，用户登录成会员后可以享受到与普通用户不同的待遇。
在其中一张子页面中还设计了鼠标滑过功能，使得图片边框发生了颜色的改变，增加了网站的趣味性，不至于过于死板。
在所有页面的banner处还增添了一个FLASH动画，让页面富有了一定的灵动性。
并且各个导航的链接也能如实实现其功能。
二、网站结构图三、网站中主要页面的架构分析及模块的设计思路韩家秀（主页、旅游风光）主页：Logo banner导航旅游风光：闫海侠（国内旅游、出境旅游）国内旅游：出境旅游：庄亚君（旅游简介、旅游地图）旅游简介：旅游地图：李玉玲（北海道、巴厘岛）北海道：巴厘岛：该网站的主页面各个模块的设计思路如下：Logo处为自己设计的旅游网logo，名为“爱ly”，颜色是以蓝色为主，目的是为了与整体页面的色调进行搭配。
Banner：背景为白色，字体颜色为红色，另外在右边添加了一个简单的flash动画，为banner增加效果。
导航：背景为深蓝色，字体颜色用白色搭配，并且设置了数遍滑过字体的时候颜色变为红色，并且在与背景的配合下颜色显得协调。
主体：左边的模块插入了图片，并且在鼠标滑过时出现不同的图片。
中间是旅游网站的一些主打旅游地点介绍，并且设置了链接功能。
最右边的模块设置的是“旅游热点”，基本是为国内外的一些著名景点推荐。
旅游网站网页设计与制作
编辑区域。 ▪ 选择“文件”→“保存”选项，保存编辑好的模板。 ▪ 若未编辑任何可编辑区域，就会弹出警告对话框。
相关知识—模板
❖ 重命名模板
▪ 在“资源”面板中选 择模板。
▪ 单击右键，在弹出的 快捷菜单中选择“重 命名”选项。
任务 3 CSS样式定义背景
❖ 在右下单元格设置水平对齐方式为居中对齐，插入一个5 行1列表格，宽度为250（图4-22），设置每行的行高 为100
任务 3 CSS样式定义背景
4.3.1 定义CSS规则 ❖ 在窗口菜单点击“CSS样式”，打开CSS样式面板，点击
“新建CSS规则”
任务 3 CSS样式定义背景
❖ 将模板应用到文档
▪ 打开一个文档，在 “资源”面板中选择 一个相应的模板。
▪ 单击“资源”面板下 的“应用”按钮，就 可以将模板应用。
重命名模板
应用模板
相关知识—模板
❖ 定义模板可编辑区域
▪ 每一个模板都有可编辑区域和不可编辑区域两部分。 ▪ 可编辑区域指的是页面可进行修改； ▪ 不可编辑区域只有在模板编辑区域才可编辑。
任务 4 模板操作
4.4.2 单元格设置可编辑区域
❖ 选中左下单元格，点击“插入对象”—“模板对象”—“可 编辑区域”，将单元格设置为可编辑区域
任务 4 模板操作
❖ 4.4.3 更新模板
❖ 在右侧5个单元格设置水平居中，分别输入“首页”、“阳朔”， “张家界”、“九寨沟”、“丽江”，分别设置各文字的链接：
图片为blue-diary-page.jpg，右下单元格设置背景图片为 kuma-house.gif
中国旅游网实训报告
一、摘要本次实训是在中国旅游网进行的，旨在通过实际操作，了解旅游行业的运作模式，掌握旅游网站运营的基本技能，提升自己的综合素质。
在实训期间，我参与了网站内容的编辑、旅游线路的策划、客户服务的处理等工作，对旅游行业有了更深入的认识。
以下是对本次实训的详细总结。
二、实训背景随着互联网的快速发展，旅游业也逐步走向线上化。
中国旅游网作为国内知名的旅游服务平台，为广大游客提供全面的旅游信息、便捷的预订服务以及丰富的旅游产品。
本次实训旨在通过实际操作，提升自己在旅游行业的工作能力，为将来的职业发展打下坚实基础。
三、实训内容1. 网站内容编辑在实训期间，我主要负责网站内容的编辑工作。
这包括撰写旅游攻略、发布旅游资讯、更新景点介绍等。
在编辑过程中，我深入了解了各个旅游景点的特色，学会了如何用生动的语言描述旅游体验，使文章更具吸引力。
2. 旅游线路策划在实训期间，我还参与了旅游线路的策划工作。
这包括对旅游目的地的调研、线路的编排、价格的制定等。
通过这项工作，我学会了如何根据游客的需求，设计出具有特色的旅游线路，同时确保线路的合理性和可行性。
3. 客户服务处理客户服务是旅游行业的重要组成部分。
在实训期间，我参与了客户服务的工作，包括解答游客的疑问、处理投诉、提供咨询服务等。
通过这项工作，我了解了客户服务的重要性，学会了如何与游客沟通，提高客户满意度。
四、实训成果1. 提升了专业技能通过本次实训，我掌握了网站内容编辑、旅游线路策划、客户服务处理等专业技能，为将来的职业发展打下了坚实基础。
2. 拓宽了知识面在实训过程中，我了解了旅游行业的最新动态，拓宽了知识面，为今后的工作提供了有益的借鉴。
3. 增强了团队协作能力在实训期间，我与同事们共同完成了各项工作任务，学会了与他人沟通、协作，提高了团队协作能力。
五、实训体会1. 严谨的工作态度在实训过程中，我深刻体会到严谨的工作态度的重要性。
只有对工作认真负责，才能确保提供优质的服务。
网页设计制作实训报告
网页设计制作实训报告1. 引言本报告旨在总结和展示网页设计制作实训的过程和结果。
实训的目标是根据给定的要求和要求，设计和制作一个符合规范和用户需求的网页。
本报告将按照以下步骤进行介绍和分析。
2. 需求分析在实训开始之前，首先对需求进行详细分析是非常重要的。
从客户或主管那里获取详细的需求说明，并进行讨论，以确保我们准确理解他们的期望和目标。
需求分析包括确定网页的目标受众、功能要求、内容要素等。
3. 原型设计在开始实际制作网页之前，制作一个原型设计是非常有帮助的。
原型设计可以帮助我们更好地理解网页的布局和结构，并为后续的开发工作提供指导。
原型设计可以使用工具如Axure RP、Sketch等进行制作。
4. 页面设计根据原型设计，开始进行页面设计。
页面设计包括选择合适的颜色、字体、图标等视觉元素，并将其应用到实际的网页设计中。
同时，还需要考虑网页的排版、导航、响应式设计等方面。
5. 内容制作在页面设计完成后，开始准备网页的内容。
根据需求和目标受众，撰写和整理网页所需的文本、图像、视频等内容元素。
确保内容的质量和完整性，以满足用户的期望和需求。
6. 页面制作根据设计和内容准备的结果，开始进行网页的实际制作。
根据需求选择合适的前端技术和工具，如HTML、CSS、JavaScript等，编写和调整网页的代码和样式。
确保网页在不同浏览器和设备上的兼容性。
7. 测试和优化在网页制作完成后，进行测试和优化是非常重要的。
通过在不同浏览器和设备上的测试，确保网页的功能和显示效果正常。
同时，还可以通过用户反馈和调查，对网页进行优化和改进。
8. 发布和维护在经过测试和优化后，将网页发布到服务器上，并确保网页的可访问性和安全性。
同时，定期进行维护和更新，以保持网页的有效性和吸引力。
9. 结论通过本次网页设计制作实训，我深入了解了网页设计和制作的整个流程。
从需求分析到最终的发布和维护，每个步骤都需要仔细思考和执行。
通过实践和反思，我不断提升了我的设计和技术能力。
《Web前端综合实战》实训-课程标准
《Web前端综合实战》实训课程标准一、课程性质与任务本课程是软件技术专业的一门专业实践教学模块课程，为期一周。
是在学生学习了《网页设计与制作技术（HTML+CSS+Javascript）》及《Web前端综合实践》课程以后，通过项目开发的实战训练，要求学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript和JQuery控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。
课程采用任务驱动，让学生在完成任务的基础上，进一步掌握动态网页设计的基本流程及方法。
二、课程教学目标1.知识目标能制作包含客户端验证、具有常见动态效果、界面美观大方的商业网站，但不包含任何服务器端脚本。
包含的知识点如下：（1） CSS3布局及美化；（2）会使用JavaScript美化网页；（3）会使用jQuery美化网页；（4）实现客户端表单校验。
2.能力目标（1）掌握在网页中添加CSS的方法。
掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式；（2）掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法；（3）掌握与图像布局和位置相关的标记的概念和用法；（4）熟练掌握表格的使用方法，会用表格布局并设计网页；（5）掌握框架制作网页的方法，会使用框架设计网页；（6）掌握制作表单的方法，会利用表单建立交互式页面；（7）掌握JavaScript语言的语法；（8）掌握在HTML语言代码中嵌入JavaScript代码的方法，能看懂JavaScript特效网页源代码；（9）学会修改JavaScript代码，实现不同的特效网页效果；（10）学会使用JavaScript语言实现网页特效。
（11）会使用JavaScript+JQuery设置网页动画效果；（12）会使用JavaScript+JQuery设置网页验证效果；（13）会使用JavaScript+JQuery设置表单特效。
3.素质目标（1）培养学生的网页设计创意思维、艺术设计素质；（2）培养学生的团队协作精神和创新精神、交流与沟通能力；（3）培养学生科学研究、专业设计和撰写实训报告的基本技能；（4）主动学习的能力、分析问题的能力。
《网页设计与制作综合实训》实训指导书
武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室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个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。
《网页设计与制作综合实训》实训指导书
武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室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.1 规划网站1．策划网站主题我们网站是德阳嘉兴别墅设计公司．公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念，坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨，追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格，以新颖时尚的设计、规范精致的施工和热情人性的服务，为业主构筑温馨、舒适、精美、典雅的家园。
2．确定网站风格确定好站点主题后，根据该主题选择站点的风格。
所以本案例所建立的网站是别墅设计类网站。
本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格或层实现效果。
（2）背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。
（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。
3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。
本案例的“别墅设计网”的栏目结构如表17-1所示。
表17-1 “别墅设计网”的栏目结构为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展示，公司简介。
4．规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。
“别墅设计网”的目录结构，各文件夹的所存放文件类型如表17-3所示。
表17-3 网站的目录结构及其存放的文件类型网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。
本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。
图17-2“网页教学网”中的链接结构5．主要页面布局设计使用表格对首页与其他几个主面导航页面的布局结构草图进行设计，主页布局结构草图如图17-3所示，两种形式的导航页面布局结构草图如图17-4和图17-5所示。
旅游网页设计实习报告
一、实习背景随着互联网技术的飞速发展，旅游行业逐渐成为我国国民经济的重要组成部分。
为了满足游客对旅游信息获取和预订的需求，越来越多的旅游企业开始重视旅游网页的设计与建设。
为了提升自身在旅游行业的竞争力，本人于2021年7月至9月在某知名旅游公司进行为期三个月的网页设计实习。
二、实习目的1. 掌握旅游网页设计的基本原理和方法；2. 熟悉旅游网页的布局、色彩、字体等设计元素；3. 提高实际操作能力，为今后从事相关工作奠定基础；4. 了解旅游行业发展趋势，为旅游企业网页设计提供参考。
三、实习内容1. 市场调研与分析在实习期间，我首先对旅游行业进行了市场调研，分析了当前旅游网页设计的发展趋势。
通过查阅相关资料、访问竞争对手网站以及与业内人士交流，我了解到以下内容：（1）用户需求：游客对旅游网页设计的要求越来越高，追求个性化、美观、易用性；（2）行业趋势：旅游企业逐渐重视用户体验，注重网站性能优化；（3）设计风格：简约、大气、国际化成为主流。
2. 网页设计根据市场调研结果，我参与了以下旅游网页设计工作：（1）界面设计：结合旅游企业品牌形象，设计符合用户需求的界面布局，包括头部、导航、内容区域、尾部等；（2）色彩搭配：选择与品牌形象相符的色彩，营造舒适、愉悦的视觉体验；（3）字体设计：选用易于阅读的字体，提升网页的可读性；（4）图片处理：对图片进行优化，提高网页加载速度；（5）交互设计：设计符合用户习惯的交互元素，提高用户体验。
3. 网页开发在网页设计完成后，我参与了网页的前端开发工作，包括以下内容：（1）HTML/CSS：编写网页结构代码，实现界面布局；（2）JavaScript：编写交互脚本，实现网页动态效果；（3）响应式设计：使网页在不同设备上都能正常显示。
4. 网页测试与优化在网页开发完成后，我对网页进行了测试与优化，包括以下内容：（1）功能测试：确保网页各项功能正常运行；（2）性能优化：提高网页加载速度，提升用户体验；（3）兼容性测试：确保网页在不同浏览器和设备上都能正常显示。
旅游网页设计实训报告书
一、实训背景随着互联网技术的飞速发展，旅游行业与互联网的融合日益紧密。
旅游网页作为展示旅游资源、提供在线服务的重要平台，其设计质量直接影响着用户的浏览体验和旅游企业的品牌形象。
为了提升我的网页设计能力，我参加了本次旅游网页设计实训，通过实践学习，对旅游网页设计有了更深入的理解。
二、实训目的1. 熟悉旅游网页设计的基本流程和原则。
2. 掌握HTML、CSS、JavaScript等前端技术，实现旅游网页的基本功能。
3. 提升审美能力和创意设计能力，设计出具有吸引力的旅游网页。
4. 培养团队协作能力和沟通能力，完成实训项目。
三、实训内容本次实训主要分为以下几个阶段：1. 需求分析首先，我查阅了大量关于旅游行业的资料，了解了旅游市场的现状和用户需求。
通过与团队成员讨论，确定了以下设计目标：（1）展示丰富的旅游资源和景点信息。
（2）提供便捷的在线预订服务。
（3）增强用户互动体验。
（4）提升旅游企业的品牌形象。
2. 网页设计根据需求分析，我进行了以下设计工作：（1）确定网页风格：结合旅游行业的特点，我选择了清新、简洁的网页风格，以突出旅游资源的自然美和人文特色。
（2）页面布局：采用响应式设计，确保网页在不同设备上都能良好展示。
主要分为头部、导航栏、内容区、侧边栏和底部五个部分。
（3）色彩搭配：以绿色、蓝色为主色调，营造舒适、自然的氛围。
（4）图片素材：收集了大量的旅游风景图片，并通过Photoshop进行后期处理，提升图片质量。
3. 前端开发使用HTML、CSS、JavaScript等技术实现网页功能：（1）HTML：搭建网页结构，包括头部、导航栏、内容区、侧边栏和底部等。
（2）CSS：美化网页样式，包括字体、颜色、间距、布局等。
（3）JavaScript：实现动态效果，如轮播图、下拉菜单、表单验证等。
4. 网页测试在开发过程中，我进行了多次测试，确保网页的兼容性和稳定性。
主要测试内容包括：（1）浏览器兼容性：在主流浏览器（Chrome、Firefox、Safari、Edge等）上进行测试。
《网站前台设计综合实训》课程项目教学设计及案例
《 网站 前 台设计综 合实训 》 课程项 目教学设 计及案 例
刘 改
（ 长春职业技 术学院 ， 吉林 长春 １０３ ） ３ １３
摘 要： 笔者主要 阐述 了在示范校建设过程 中， 网站前台设计综合 实训 ” 程依据职业 岗位工作过程 的需求， “ 课 积极 开展 符
合职业教育特点的项 目教学法， 即在课堂教 学中， 完全再现企业 的实际工作任务 、 工作过程和 工作情境 ， 充分体现“ 工学结合 ，
引产入教” 的教 学特 色， 有效地培养了学生的职业综合能力。
关键词 ： 综合实训 ； 目教 学法； 项 工作过程； 工作情境 中图分类号： ６２ Ｇ ４ 文献标识码： Ａ 文章编号 ：６ １ １８ （０ ０ ｏ —０４ —０ １７— ５ ０ ２ １ ）４ １０ ３
背景分析 １学 情分析 ．
一
、
高职院校的生源主要来自 参加高考并在本科线外 录取的普通高中 毕业生和参加 口 对 升学考试的中等职业 学 佼毕业生。对 口升学的学生有着较好的实践能力 ， 但 基础相对高中生源有差距 ； 另外， 高职院校学生的 自 学能 力和 自 控能力都停留在相对 比较低的层次 ２ 课 程分析 ． 《 网站前 台设计 综合实训》 程是基 于 Ｐｏ ． 课 ｈｔ ｏ ｓｏ 、 ｌ ｈ和 Ｄｅｍ ｅｖｒ 门课 程 已经开 设 过 的 ｈ ｐ Ｆａ ｓ ｒａ ｗ ａｅ 三 基 础上 的一 门综合实训 课程 。按照 当前市场的人才 需求， 我们 的学生毕 业后 就应 该 能在 网站前 台设 计 这一 岗位顶 岗工作 了， 而实践证 明， 我们 的学生做不 到这一 点 。经过 反复地走访 、 调研和研究 ， 我们发 现 其主要 原因是我们 的实训 课教 学存 在 问题 ： 一是 教 学 内容 ， 教 学方法 。我 们选 用 的市场 上 的综合 二是 实训教材 ， 本上 都缺 乏 高职特 色 、 基 内容 陈 旧、 形式 单一、 脱离行业和职业发展实际 ， 也正是 由于教学内 容严重与行业企业脱轨 ， 才导致了我们 的案例教学 法 、 务驱动等教 学方法也 只是 形势上 的摆设 罢了 ， 任 虽然学 生通过完成具 体任务 ， 了知识点与技 能 ， 掌握 较好地培养了学生的应用能力 ， 但对就业 岗位的工 作任务还是不能胜任。 基于以上两种情况的分析， 并结合高职教育的 主要任务是根据市场需求， 培养专业对 口的高级技 术应用性人才。我们发现 ， 现有的教学模式根本不 适 应学生 自身 的条 件 ， 能很好 地满 足 培养应 用 性 不
以企业工作过程系统化为指导思想开展网站前台设计综合实训精品课程建设
能力和综合职业能力一体化培养 ，以此带 动教学模式 、教学方法 、教学手段的改革 ，促进 “ 双师型 ”教师 队伍 的陕速成长 关键词 网站前 台设计综合实训 ；课程建设 中圈分类号 Ｇ 文献标识码 Ａ ４ 文章 编号 １ ７ — ６ １ （０ ９ １ １ ０ ９ — １ ６ ３ ９ ７ 一２ ０ ） １ — ０ ２ ０
以企业 工作过程 系统化 为指 导思想开展 网站前 台设计综 合 实训精 品课程建设
韩 宝 玉 沙 继 东
（ 长春职业技术学院 吉林 长春 １０ ３ ） ３０ ３ 摘 要 在 网站前 台设计综 合文训课程建设 中，以就业为导 向，以能力 为本位 ，以岗位需求和职业标 为依据 ，通过综合实训项 目的开发 与实施 ，力 图实现学生专业
２３专 项研 究 ． 本课 程 的教学 资 源开 发遵 循新 的课 程理念 ，坚持 科学 性 、规 范性 、实 用 性 、发 展性 原则 。 ２３１ 发课程 标 准 ． 开 ． 课程 标 准是 规范 专业 建 设 、专业 教 学 、专业 管理 、专业 评估 的指 导性
（ 建 立一 个实 训 课程 动态 教材体 系 架构 ３） 在 整 合 课程框 架下 ，实 训 课程 教材 统一 规 划 ，统 一 管理 ，知 识点 模块 结 构 ，任 务驱 动 内容 。教 材 内容实 行 动态更 新 ，跟 随最 新 的岗位 需求 而变 化。
（ ４）课程 开发 团队 多元 化
文件 ，是 教材 编写 、教学 、评 价和 考核 的依 据 。 本 课程 的课 程 标准 开 发 的 基 本理 念 ： 以职业 岗位 需 求 一 确 定 课 程设 置 ； 以职 业 能力 为 依据 ～ 组 织课 程 内容 ；以企 业 项 目为 载 体～ 设 计 教学 活动 ；以职业 技能 鉴定 为参 照 一 强化 技 能训『 。 练 具体 内容包 括 ：课程 名 称 、适用 专 业 、谋程 性 质 、课程 目标 、课 程 内 容 和要求 、教材 编写 、教 学建 议 、教 学评 价 、课程 资源 的开 发 与利用 等 。 ２３２ 发实 训教 材 ．． 开 综 合实 训教 材 建设要 围绕 职业 能力 的形 成 来组织 课 程 内容 ，以工作 任 务 为 中心来 整合 相应 的知识 、技 能 ，实 现理 论 与实践 的统一 。 《网站 前 台 设计 综合 实 训 》教材 的编写 打破 了传 统 的学 科体 系教 学 模式 ，以职业 岗位 能 力分 析 为指 导 ，以课 程标 准 为依 据 ，以 企业 真实 的生 产项 目为载 体 ，以
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图
步骤一 网站首页效果图的制作
6．云南气候栏目的制作
7.版权部分的制作
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图
步骤二 网站子 页“景点大全” 效果图的制作
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图
栏目。
●走进云南
●云南风情
●景点大全
●旅游游记
●旅游快讯
●旅游须知
●昆明一地
●地理概况
●云南美食
●联系我们
●精品图库
●机票查询
●近期特价线路
●各种旅游线路
●旅游常识
●知名旅游企业
●云南气候
●友情链接
●特价机票推荐
●出游工具
项目三 旅游休闲类网站的设计与制作
三、网站建设方案 3．网站栏目内容简介 4．网站建设拓扑图
职业教育教学改革系列教材（项目实战类）
网站前台设计综合实训
韩宝玉 刘 改 主编 祝海英 雷亚玲 李东生 副主编
电子工业出版社
Publishing House of Electronics Industry 北京·BEIJING
项目三 旅游休闲类网站的设计与制作
教学内容 • 客户需求分析 • 网站风格定位 • 网站建设方案 • 网站设计方案报价明细 • 任务一 制作云南旅游网站效果图 • 任务二 制作云南旅游网站的横幅广告动画 • 任务三 云南旅游网站的搭建 • 征求客户意见，修改完善 • 项目实训 • 项目小结
调，在此色调的基础上对绿色系和蓝色系中的不同 颜色进行有机搭配，同时还适当地辅以红橙色，使 网站产生一种优雅，舒适的气氛。同时，该网站在 栏目的造型设计上采用了别具一格的造型，该创意 设计使网页看上去更加生动、活泼。
项目三 旅游休闲类网站的设计与制作
三、网站建设方案
2．网站栏目划分
根据我们对旅游服务类网站的了解及客户的特殊要求，建立了以下
项目三 旅游休闲类网站的设计与制作
一、客户需求分析
通过对旅游服务类网站建站目的及客户对网站的特殊要求， 拟定本网站具有如下功能：
（1）宣传云南省的锦秀景区、民俗风情、云南美食等，提 高云南省旅游业在国内外的知名度。
（2）适时发布云南精品旅游线路、洒店推荐等信息，为旅 游者提供最佳服务。
（3）在网上适时发布旅游游记，通过真实的旅游者的体会， 吸引国内外的旅游者，为云南省旅游业的发展做出一份微薄之 力。
四、网站设计方案报价明细 五、任务一 制作云南旅游网站效果图
云南旅游网站包含了走进云南、云南风情、景点 大全、旅游游记、旅游快讯、旅游须知、昆明一地、 地理概况、云南美食等内容，在设计上选用优雅、 舒适的风格，页面布局上也尽量不落俗套，采用了 别具一格的栏目造型，颜色设置上更突出了该类网 站的特点。
步骤二 网站子页“景点大全”效果图的制作 依据网站风格定位及客户栏目设置要求，子页
“景点大全”效果图图像文件规格设置为，宽度1009 像素，高度1573像素，分辨率300像素/英寸。
该子页的框架与首页基本相同，子页各个栏目制 作用到的知识首页中均已介绍过，故这里不再进行详 细阐述。
项目三 旅游休闲类网站的设计与制作
1．网站Logo和Banner的制作
2．导航栏的制作
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图
步骤一 网站首页效果图的制作
3．近期特价线路 栏目的制作
4. 各种旅游线路 栏目的制作
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图 步骤一 网站首页效果图的制作 5．云南风情栏目和知名旅游企业栏目的制作
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图
步骤一 网站首 页效果 图的制 作
项目三 旅游休闲类网站的设计与制作
五、任务一 制作云南旅游网网站效果图 步骤一 网站首页效果图的制作
依据网站风格定位及客户栏目设置要求，首页效果图图像文件规 格设置为，宽度1009像素，高度1575像素，分辨率300像素/英寸。
五、任务一 制作云南旅游网网站效果图
步骤三 网站 子页“云南美 食”效果作
五、任务一 制作云南旅游网网站效果图
步骤三 网站子页“云南美食”效果图的制作 依据网站风格定位及客户栏目设置要求，子页
项目三 旅游休闲类网站的设计与制作
二、网站风格定位
2．排版 云南旅游网站采用的是“T”字型排版形式，这是网页
设计中常用的一种布局方式。该网站最上面是网站的站标 以及横幅广告条，接下来就是网站的主要内容，右面为几 个主要栏目，左面显示该页主要内容。左右一起罗列到底， 最下面是网站的一些基本信息、联系方式、版权声明等。 这种版式的优点是页面结构清晰，主次分明，信息量大。 弱点是规矩呆板，如果细节色彩上不注意，很容易让人"看 之无味"。针对这个弱点，该网站在细节上做了一些处理， 例如页面栏目的造型设计别具一格，并在栏目中适当地添 加了动画效果，使整个页面显得更加生动、活泼。
项目三 旅游休闲类网站的设计与制作
二、网站风格定位
3．特效 本项目在网站广告条部分利用ImageReady制作了横幅
广告动画效果；在近期特价线路栏目中设置了多张图片 自动交换效果，使整个页面动静结合，视觉清晰。
项目三 旅游休闲类网站的设计与制作
三、网站建设方案
1．页面风格创意设计 该网站页面颜色初步拟定采用绿色和蓝色为主色
（4）网站上要设有联系我们等栏目或子页，用户可以对旅 游线路等进行评论，也可以说说自己旅游的感受，这对网站的 改进和更新很有帮助。
项目三 旅游休闲类网站的设计与制作
二、网站风格定位
1．色彩 云南旅游网站选定主色调为绿色和浅蓝色，绿色所传递
的是清爽、理想、希望和生长的意象，较符合旅游服务业。 绿色与人类息息相关，是自然之色，代表了生命与希望， 也充满了青春与活力。绿色在黄色和蓝色之间，属于较中 庸的颜色，是和平色，偏向自然美，宁静、生机勃勃、宽 容，可与多种颜色搭配而达到和谐的效果。浅蓝色具有淡 雅、清新、浪漫和高贵的特性，它也是最具凉爽、清新特 征的色彩。网站中采用浅蓝色和绿色、白色的搭配使页面 看起来非常干净清澈，能体现出柔顺淡雅和浪漫的气氛。 使人可以长时间驻留其间，也不会觉得疲劳。