web开发技术课程设计报告
- 格式:doc
- 大小:1.67 MB
- 文档页数:15
课程设计报告javaweb一、教学目标本课程旨在通过JavaWeb的学习,让学生掌握JavaWeb的基本概念、技术和应用,培养学生具备JavaWeb程序设计的能力。
具体的教学目标如下:1.理解JavaWeb的基本概念和架构。
2.掌握JavaWeb的核心技术,如HTML、CSS、JavaScript、Servlet、JSP等。
3.了解JavaWeb的应用领域和前景。
4.能够使用HTML、CSS、JavaScript编写网页。
5.能够使用Servlet、JSP技术进行Web应用程序的开发。
6.能够运用JavaWeb技术解决实际问题。
情感态度价值观目标:1.培养学生对JavaWeb技术的兴趣和热情,提高学生的学习积极性。
2.培养学生具备良好的团队合作意识和能力,提高学生的沟通协作能力。
3.培养学生具备创新精神和责任感,提高学生对社会、环境的责任意识。
二、教学内容根据课程目标,本课程的教学内容主要包括以下几个部分:1.JavaWeb基本概念:介绍JavaWeb的定义、发展历程、应用领域和基本架构。
2.HTML、CSS、JavaScript技术:讲解HTML标签、CSS样式、JavaScript脚本的使用方法和应用实例。
3.Servlet技术:讲解Servlet的概念、生命周期、运行原理以及如何编写和部署Servlet。
4.JSP技术:讲解JSP的概念、原理、基本语法以及如何使用JSP实现动态网页。
5.JavaWeb应用实例:分析并实现一些典型的JavaWeb应用案例,如在线、博客系统等。
三、教学方法为了提高教学效果,本课程将采用多种教学方法相结合的方式进行教学:1.讲授法:通过讲解JavaWeb的基本概念、技术和应用,使学生掌握相关知识。
2.案例分析法:分析并实现一些典型的JavaWeb应用案例,让学生学会将理论知识应用于实际问题。
3.实验法:安排实验室实践环节,让学生动手编写代码,培养学生的实际操作能力。
课程设计报告(web前端开发)一、课程目标知识目标:1. 学生能理解并掌握HTML5、CSS3和JavaScript的基础知识,了解网页的基本结构和常见的前端开发技术。
2. 学生能了解并运用响应式设计原理,实现不同设备上的网页适配。
3. 学生掌握DOM操作,能实现动态交互效果和数据绑定。
4. 学生了解前端框架Vue.js的基本使用,能运用其进行组件化和模块化开发。
技能目标:1. 学生能运用所学知识独立完成静态网页的设计与制作,具备基本的网页布局能力。
2. 学生能通过JavaScript和框架实现简单的网页交互功能,提高用户体验。
3. 学生具备团队协作能力,能在项目中发挥自己的专长,与他人共同完成项目开发。
情感态度价值观目标:1. 培养学生对前端开发的兴趣和热情,激发其主动学习和探索的精神。
2. 培养学生具备良好的编程习惯,注重代码规范和性能优化。
3. 培养学生面对困难和挑战时,保持积极心态,善于寻求解决方案。
4. 培养学生具备合作精神,尊重他人意见,学会倾听和沟通。
课程性质:本课程为实践性较强的课程,注重培养学生的动手能力和实际项目经验。
学生特点:学生具备一定的计算机基础,对前端开发有一定了解,学习积极性较高。
教学要求:结合实际项目案例,以任务驱动的方式进行教学,注重理论与实践相结合,提高学生的实际操作能力。
同时,关注学生的个体差异,进行差异化教学,确保每个学生都能在课程中取得进步。
在教学过程中,及时评估学生的学习成果,调整教学策略,以达到课程目标。
二、教学内容1. 网页基础知识- HTML5基本标签、属性和文档结构- CSS3选择器、样式属性、盒模型和布局- 网页色彩、字体和图标设计2. 响应式设计- 媒体查询和设备适配- 弹性布局和网格布局- 移动端和桌面端页面优化3. JavaScript基础- 数据类型、运算符、流程控制- 函数、对象和数组- DOM操作、事件处理和表单验证4. 前端框架Vue.js- Vue.js基本概念、生命周期和指令- 组件化开发和模块化设计- 数据绑定、计算属性和侦听器5. 项目实战- 网页设计与制作:静态页面布局、样式设计、交互功能实现- 前端工程化:版本控制、构建工具、性能优化- 团队协作:项目分工、沟通与协作、代码审查教学内容安排与进度:第一周:网页基础知识学习第二周:响应式设计原理与实践第三周:JavaScript基础及DOM操作第四周:Vue.js框架学习第五周:项目实战与前端工程化第六周:团队协作与项目总结教材章节关联:《HTML5与CSS3权威指南》第1-5章、第7-9章《JavaScript高级程序设计》第1-6章、第13章《Vue.js实战》第1-7章教学内容确保科学性和系统性,结合实际案例,使学生掌握前端开发的核心知识,培养其解决实际问题的能力。
web技术课程设计报告一、课程目标知识目标:1. 让学生掌握Web技术的基本概念,包括HTML、CSS和JavaScript的使用。
2. 使学生了解Web开发的流程,理解网页的结构、样式和行为之间的相互关系。
3. 帮助学生掌握浏览器与服务器之间的通信原理,了解HTTP协议的基本概念。
技能目标:1. 培养学生运用HTML编写结构化网页的能力,能正确使用标签组织内容。
2. 培养学生运用CSS设计美观、兼容性强的网页样式,掌握基本的布局方法。
3. 培养学生运用JavaScript实现网页动态效果,能编写简单的交互功能。
4. 培养学生运用Web技术解决实际问题的能力,具备基本的网页制作与调试技能。
情感态度价值观目标:1. 激发学生对Web技术的兴趣,培养其主动探究、自主学习的精神。
2. 培养学生良好的团队协作意识,学会与他人分享、交流、合作解决问题。
3. 培养学生具备网络安全意识,了解网络道德规范,树立正确的网络价值观。
课程性质分析:本课程为信息技术课程,旨在帮助学生掌握Web技术的基本知识和技能,提高其信息技术素养。
学生特点分析:1. 学生具备一定的计算机操作能力,但对Web技术了解有限。
2. 学生好奇心强,对新事物充满兴趣,但注意力容易分散。
3. 学生在团队协作、沟通表达方面有待提高。
教学要求:1. 教师应以学生为主体,注重启发式教学,引导学生主动探究。
2. 教学内容要贴近实际,注重实践操作,提高学生的动手能力。
3. 教师应关注学生的个体差异,实施分层教学,使每位学生都能在课程中取得进步。
4. 教师要关注学生的情感态度价值观培养,将德育融入教学过程中。
二、教学内容根据课程目标,本课程教学内容主要包括以下几部分:1. Web技术基本概念- 网络基础知识- HTML、CSS、JavaScript简介- 网页的结构、样式和行为2. HTML- 标签及其属性- 网页结构化元素- 表单与表格- 多媒体与语义化标签3. CSS- 选择器- 文本与字体样式- 盒模型与布局- 响应式设计- CSS3新特性4. JavaScript- 基本语法与数据类型- 函数与对象- DOM操作- 事件处理- 常用库与框架简介5. 网络通信与HTTP协议- 请求与响应- 状态码与RESTful API - 数据提交方式- 网络安全与隐私6. 实践项目- 简单网页制作- 网站布局与样式设计- 动态交互效果实现- 前端工程化与模块化教学内容安排与进度:1. 第1周:Web技术基本概念2. 第2-3周:HTML3. 第4-6周:CSS4. 第7-9周:JavaScript5. 第10周:网络通信与HTTP协议6. 第11-12周:实践项目教材章节与内容对应:1. 教材第1章:Web技术基本概念2. 教材第2章:HTML3. 教材第3章:CSS4. 教材第4章:JavaScript5. 教材第5章:网络通信与HTTP协议6. 教材第6章:实践项目三、教学方法为了提高教学效果,激发学生的学习兴趣和主动性,本课程将采用以下多样化的教学方法:1. 讲授法:教师以讲解为主,系统地传授Web技术的基本知识和概念,如HTML、CSS、JavaScript等。
javaweb课程设计报告1.简介:本文主要是对于Java Web课程设计的报告,这是一项对于Java Web开发能力的考核,也是对于学生们在本门课程的学习成果的一次检验。
2.课程设计目标:本次课程设计是为了让学生们掌握Java Web开发的技术和能力,主要目标是:(1) 实现一个完整的Java Web应用程序,包括前端界面和后端的数据处理;(2) 学生们需要有自己的想象力和创造力,完成课程设计要求的同时,也应该将自己的创意和设计融入其中;(3) 学生们应该掌握Java Web相关技术的基本知识,比如Servlet、JSP、JDBC、Tomcat等;(4) 培养学生的学习能力和项目管理能力。
3.系统设计:(1)功能模块设计:根据需求设计功能模块,包括用户管理、订单管理、商品管理等。
(2)数据库设计:设计合理的数据库结构,包括数据表的设计、索引的设计等。
(3)页面设计:根据需求设计好看的、易用的页面,包括前端和后端页面。
(4)逻辑设计:编写合理的逻辑代码,包括业务逻辑和程序逻辑。
(5)安全设计:设计安全的程序架构,包括输入校验、权限管理等。
4.技术选型:(1)前端框架选择:Bootstrap、jQuery等。
(2)后端框架选择:Spring、Struts等。
(3)数据库选择:MySQL等。
(4)服务器选择:Tomcat等。
5.实现:(1)代码编写:根据设计,开始编写代码。
(2)功能集成:将各个模块整合到一起,形成一个完整的系统。
(3)测试调试:进行单元测试、集成测试、系统测试和压力测试,保证系统的正常运行。
6.课程设计总结:通过本次课程设计,学生们不仅能够掌握Java Web相关技术,还能够提高自己的编程能力和项目管理能力,同时也能够在未来的工作中为企业提供更好的服务和产品,在实际项目中得到更多的成功和荣誉。
7.难点和解决方案:在实现Java Web系统的过程中,会遇到一些技术难点,如并发处理、数据安全、性能优化等等。
简单web课程设计项目报告一、课程目标知识目标:1. 了解Web的基本概念,掌握HTML、CSS和JavaScript的基础知识;2. 学会使用Web技术进行页面布局和样式设计;3. 掌握基本的JavaScript编程,实现简单的交互功能;4. 了解网站开发的流程和规范。
技能目标:1. 能够运用HTML和CSS编写结构清晰、样式美观的网页;2. 能够使用JavaScript实现简单的前端交互功能;3. 能够运用Web技术进行项目实践,完成一个简单的Web页面设计;4. 能够遵循网站开发规范,进行团队协作和沟通。
情感态度价值观目标:1. 培养学生对Web技术的兴趣,激发学习热情;2. 培养学生的创新意识和审美观念,注重页面设计的美观与实用性;3. 培养学生团队协作精神,提高沟通与协作能力;4. 培养学生严谨、细致的学习态度,养成良好的编程习惯。
课程性质:本课程为信息技术课程,结合实际操作,注重理论与实践相结合。
学生特点:六年级学生,具备一定的计算机操作基础,对新鲜事物充满好奇,喜欢动手实践。
教学要求:教师应关注学生的个体差异,因材施教,注重培养学生的实际操作能力和团队协作精神。
教学过程中,以学生为主体,教师为主导,引导学生主动探究、积极实践,提高学生的综合素养。
通过本课程的学习,使学生能够掌握Web技术的基本知识,具备一定的网页设计与制作能力,为后续学习打下坚实基础。
二、教学内容1. Web基础知识:介绍Web的概念、发展历程和基本原理,引导学生了解互联网的基本构成和运行机制。
- 教材章节:第一章 Web概述2. HTML基础:讲解HTML的基本语法、常用标签及其作用,使学生能够编写结构清晰的网页。
- 教材章节:第二章 HTML基础3. CSS样式设计:介绍CSS的基本概念、选择器和属性,教授如何使用CSS 进行页面布局和样式设计。
- 教材章节:第三章 CSS样式设计4. JavaScript编程:讲解JavaScript的基本语法、函数、事件处理等,使学生能够实现简单的前端交互功能。
javaweb课程设计报告一、课程目标知识目标:1. 理解JavaWeb的基本概念,掌握Web应用的工作原理;2. 学会使用Java Servlet和JSP技术开发动态Web应用;3. 掌握HTML、CSS和JavaScript等前端技术,实现与后端的交互;4. 了解JavaWeb常用框架的作用及其使用方法。
技能目标:1. 能够独立搭建JavaWeb开发环境,完成基本Web应用配置;2. 熟练运用Java Servlet和JSP技术,实现Web应用的动态数据处理;3. 能够运用前端技术,设计美观、易用的Web页面;4. 学会使用常用框架,提高Web应用的开发效率。
情感态度价值观目标:1. 培养学生积极探索、主动学习的兴趣,提高自主解决问题的能力;2. 培养团队合作精神,让学生在项目实践中学会与他人协作;3. 引导学生关注Web技术发展趋势,激发创新意识,培养创新精神;4. 增强学生的网络安全意识,树立正确的网络价值观。
课程性质:本课程为实践性较强的课程,注重理论与实践相结合,通过项目驱动的方式,让学生在实际操作中掌握JavaWeb技术。
学生特点:学生具备一定的Java基础,对Web技术有一定了解,但实践经验不足。
教学要求:结合学生特点,课程设计应注重实用性,以项目为主线,引导学生主动探索,提高实践能力。
同时,注重分层教学,满足不同层次学生的学习需求。
在教学过程中,关注学生的情感态度价值观培养,全面提升综合素质。
通过课程学习,使学生能够独立完成中小型Web应用的开发。
二、教学内容1. JavaWeb基本概念与工作原理- Web应用发展历程- JavaWeb技术体系结构- HTTP协议基础2. Java Servlet技术- Servlet生命周期- Servlet配置与部署- Servlet API使用3. JSP技术- JSP页面基本结构- JSP内置对象- JSP标签库4. 前端技术- HTML基本语法- CSS样式表- JavaScript基础5. JavaWeb常用框架- Struts2框架- Spring框架- Hibernate框架6. 项目实践- 学生信息管理系统- 网上书店- 论坛系统教学内容安排与进度:第1周:JavaWeb基本概念与工作原理第2-3周:Java Servlet技术第4-5周:JSP技术第6-7周:前端技术第8-9周:JavaWeb常用框架第10-12周:项目实践教材章节关联:1. JavaWeb基本概念与工作原理:教材第1章2. Java Servlet技术:教材第2章3. JSP技术:教材第3章4. 前端技术:教材第4章5. JavaWeb常用框架:教材第5章6. 项目实践:教材实例及拓展内容教学内容的选择和组织注重科学性和系统性,以教材为基础,结合实际项目需求,合理安排教学进度,使学生能够循序渐进地掌握JavaWeb技术。
web课程设计报告附源码一、课程目标知识目标:1. 学生理解Web开发的基本概念,掌握HTML、CSS和JavaScript的基础知识;2. 学生能运用所学知识,设计并实现一个简单的静态网页;3. 学生了解Web前端框架的作用,学会使用至少一种常见框架进行页面布局和样式设计;4. 学生掌握基本的网站发布流程,了解网站优化的基本方法。
技能目标:1. 学生能够独立完成网页的编写和调试,具备基本的Web开发能力;2. 学生通过实践操作,提高问题解决能力和团队协作能力;3. 学生学会运用网络资源进行自主学习,提高学习效率。
情感态度价值观目标:1. 学生培养对Web开发的兴趣,激发学习编程的热情;2. 学生在团队合作中,学会相互尊重、沟通和协作,培养团队精神;3. 学生了解网络安全和知识产权的重要性,树立正确的网络道德观念。
课程性质:本课程为实践性较强的学科,注重培养学生的动手能力和实际问题解决能力。
学生特点:学生在本年级已具备一定的计算机操作能力,对新鲜事物充满好奇,但编程基础薄弱。
教学要求:结合学生特点,采用案例教学和项目驱动教学法,使学生在实践中掌握Web开发技术,提高实际操作能力。
同时,注重培养学生的自主学习能力和团队协作精神,提高学生的综合素质。
通过分解课程目标为具体的学习成果,为后续的教学设计和评估提供依据。
二、教学内容1. 基础知识模块:- HTML:文本、链接、图片、列表、表格、表单等基本标签的用法;- CSS:选择器、字体样式、文本样式、颜色、背景、盒模型、浮动、定位等基本属性;- JavaScript:变量、数据类型、运算符、流程控制、函数、事件处理、DOM 操作等基本概念。
2. 实践操作模块:- 使用HTML和CSS设计静态网页;- 应用JavaScript实现简单的交互效果;- 利用Web前端框架(如Bootstrap)进行页面布局和样式设计;- 网站发布和优化。
3. 教学内容安排与进度:- 第一周:HTML基础,完成基本页面结构设计;- 第二周:CSS基础,实现页面样式设计;- 第三周:JavaScript基础,实现简单的交互效果;- 第四周:Web前端框架的应用,进行页面布局和样式设计;- 第五周:网站发布和优化,总结与评价。
《web系统设计》课程设计学院:工学院专业:网络工程班级: 1401姓名:王乐学号: 2014011070指导教师:姬广永珊珊2016 年 7 月 1 日工学院课程设计评审表《web开发技术》课程设计任务书陆海石油响应式的设计目录陆海石油响应式的设计 (2)1 设计目的 (3)2 设计要求 (4)3 整体规划 (5)4 详细设计及实现 (6)4.1负责区域.................................................. 错误!未定义书签。
4.2负责区域网页代码 (6)4.3负责区域CSS代码 (7)1 设计目的熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足0.1平米的空间投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。
WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的,绕过主页而进入WEB的深层。
2 设计要求1.站点命名与结构站点文件夹为陆海。
站点文件夹中所包含文件夹:img(Images,存放图片文件),CSS(存放各部分的css文件)。
站点文件夹中所包含文件:index.html(首页)2. 制作技术要求页面布局合理,色彩和谐,正确,图文并茂,制作的和目标相似度在70% 以上,以完成各个方面的的训练。
3. 合作开发分为3到5人的小组,多人进行共同合作来完成此次实训的任务。
小组部分工合作,每个人都要有自己负责的板块。
在竞争与合作中完成此次实训的任务。
3 整体规划1.讨论主题本次实训要做的是陆海石油装备研究院的首页,其中的各种动画、过渡等都需要做出来。
2.确定栏目和板块1)首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2)其次就应该考虑导航条的设置了。
web前端开发的课程报告500字课程报告:Web前端开发我在这个学期里参加了一门关于Web前端开发的课程,这是一门非常有趣和实用的课程。
在这门课程中,我学到了很多关于网页设计和开发的知识和技能。
在课程的开始,我们学习了HTML和CSS这两门基础的网页开发语言。
通过学习这两门语言,我能够创建简单但功能强大的网页。
我学会了如何使用HTML来创建网页的结构和内容,并使用CSS来为网页添加样式和布局。
我还学会了如何使用CSS来创建响应式布局,使网页能够适应不同的屏幕尺寸和设备。
接着,我们学习了JavaScript这门强大的脚本语言。
我学会了如何使用JavaScript来为网页添加交互性和动态性。
我学会了如何使用JavaScript来处理用户的输入和操作,并根据用户的行为来改变网页的内容和样式。
我还学会了如何使用JavaScript来与后端服务器进行通信,从而实现更复杂的功能和交互。
在课程的后期,我们开始学习一些流行的前端框架和工具,如React和Vue.js。
通过学习这些框架和工具,我能够更高效地开发复杂的网页应用。
我学会了如何使用这些框架来组织和管理网页的组件,提高代码的可维护性和可重用性。
我还学会了如何使用一些前端工具来自动化构建和部署网页应用,提高开发效率。
除了理论知识和技能,这门课程还为我们提供了很多实践机会。
我们完成了一些小项目和实验,从而巩固和应用所学的知识。
我还参加了一个团队项目,与其他同学合作开发了一个完整的网页应用。
通过这个项目,我学会了如何与他人合作,如何有效地分工合作,以及如何解决项目中的问题和挑战。
通过这门课程,我不仅学到了很多关于Web前端开发的知识和技能,还培养了一些重要的软技能,如团队合作和问题解决能力。
我相信这些知识和技能将对我未来的职业发展产生积极的影响。
总的来说,这门Web前端开发课程是一门非常有价值的课程。
它帮助我打下了扎实的基础,使我能够进一步探索和发展自己在这个领域的兴趣和能力。
web课程设计报告Web课程设计报告。
一、引言。
随着互联网的普及和发展,网络课程已经成为学习的重要方式之一。
本报告旨在对Web课程设计进行全面的分析和总结,以期为今后的课程设计提供参考和借鉴。
二、课程背景。
随着互联网技术的飞速发展,Web课程已经成为教育教学的重要组成部分。
Web课程设计的质量直接影响着学生的学习效果和教师的教学质量。
因此,开展对Web课程设计的研究和总结显得尤为重要。
三、课程目标。
1. 提高学生的学习兴趣和积极性;2. 提高学生的学习效果和能力;3. 促进教师的教学创新和教学质量提升。
四、课程设计原则。
1. 学生为中心。
以学生的需求和特点为出发点,设计符合学生学习习惯和接受能力的课程内容和形式。
2. 多媒体融合。
充分利用多媒体技术,丰富课程内容,提高学生的学习体验。
3. 交互性设计。
注重课程的互动性,激发学生的学习兴趣,提高学习效果。
4. 灵活性和个性化。
满足不同学生的学习需求,提供个性化的学习空间和资源。
五、课程设计内容。
1. 课程结构设计。
包括课程的目标、内容、教学方法、评价方式等。
2. 多媒体资源整合。
整合各种多媒体资源,如视频、音频、图片等,丰富课程内容,提高学习效果。
3. 互动设计。
设计各种互动环节,如讨论、问答、小组活动等,促进学生之间的交流和合作。
4. 个性化学习空间设计。
为学生提供个性化的学习空间,满足不同学生的学习需求。
六、课程实施。
1. 教师培训。
对教师进行相关的培训,提高他们的多媒体教学和课程设计能力。
2. 学生辅导。
为学生提供相关的学习指导和技术支持,帮助他们更好地使用Web课程进行学习。
3. 效果评估。
对课程进行定期的评估和调查,收集学生和教师的反馈意见,及时调整和改进课程设计。
七、课程效果。
通过对Web课程的设计和实施,可以有效提高学生的学习兴趣和积极性,提高学生的学习效果和能力,促进教师的教学创新和教学质量提升。
八、结语。
Web课程设计是一项复杂而又重要的工作,需要教师和教育工作者的共同努力。
《web系统设计》课程设计学院:工学院专业:网络工程班级: 1401姓名:王乐学号: 2014011070指导教师:姬广永珊珊2016 年 7 月 1 日工学院课程设计评审表《web开发技术》课程设计任务书陆海石油响应式的设计目录陆海石油响应式的设计 (2)1 设计目的 (3)2 设计要求 (4)3 整体规划 (5)4 详细设计及实现 (6)4.1负责区域.................................................. 错误!未定义书签。
4.2负责区域网页代码 (6)4.3负责区域CSS代码 (7)1 设计目的熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足0.1平米的空间投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。
WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的,绕过主页而进入WEB的深层。
2 设计要求1.站点命名与结构站点文件夹为陆海。
站点文件夹中所包含文件夹:img(Images,存放图片文件),CSS(存放各部分的css文件)。
站点文件夹中所包含文件:index.html(首页)2. 制作技术要求页面布局合理,色彩和谐,正确,图文并茂,制作的和目标相似度在70% 以上,以完成各个方面的的训练。
3. 合作开发分为3到5人的小组,多人进行共同合作来完成此次实训的任务。
小组部分工合作,每个人都要有自己负责的板块。
在竞争与合作中完成此次实训的任务。
3 整体规划1.讨论主题本次实训要做的是陆海石油装备研究院的首页,其中的各种动画、过渡等都需要做出来。
2.确定栏目和板块1)首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2)其次就应该考虑导航条的设置了。
3)正文的框架设置(横向因素和纵向因素交错)在仔细研究过原版之后,再结合我们自己的想法,在草纸上画出了大体的栏目和板块。
3.小组分工合作将整个页面分为三部分,分别是头部(一人负责)、尾部(一人负责)和主体容(三人负责)。
我主要负责的是主题容中最新动态区域。
4.使用的工具HTML编辑软件:主要是HBuilder,DreamWeaver作辅助。
浏览器:以使用谷歌浏览器Chrome浏览为主。
辅助工具:屏幕截图工具FSCapture,CSS、w3c标准html5手册5.整体布局框图如下:4 详细设计及实现4.1负责区域代码4.1.1 HTML代码<section class="news"><div class="xin1">最新动态</div><div class="xin2">News</div><div class="dong"><ul><li class="kuai"><div class="pic"><img src="img/3b8ec93770744ff4ad12e25ec4a200b1.jpg" /></div><h4>伊朗石油公司代表前来我院参观洽谈</h4><p style="text-indent: 2em;">今日,伊朗石油公司的客人来到我院进行石油项目的洽谈合作,院长戴克文热情的接见</p><div class="read">Read More</div></li><li class="kuai" style="margin: 0 3%;"><div class="pic"><img src="img/a7bdec4def4146b88e1430bc7fc0ab72.jpg" /></div><h4>第三套甲板吊机完成起吊试验</h4><p style="text-indent: 2em;">2016年3月10日,虽然寒潮再度来袭,但依旧没有阻挡我院工作人员完成第三套甲板</p><div class="read">Read More</div></li><li class="kuai"><div class="pic"><img src="img/59e7aa4560b64d9eb50299e13c745f94.jpg" /></div><h4>第三套甲板吊机排线布绳工作顺利完成</h4><p style="text-indent: 2em;">2016年3月3日,第三套甲班吊机在总工程师晓军的带领下,上午顺利完成拼稀</p><div class="read">Read More</div></li></ul></div></section>4.1.2负责区域CSS代码.news{width: 100%;height: 550px;}.news .xin1{width: 136px;height: 50px;font-size: 32px;font-weight: 900;position: relative;top: 45px;left: 50%;margin-left: -78px; }.news .xin2{color: #2A7EDA;width: 70px;height: 15px;color:#1EA8EA;font-size: 28px;position: relative;left:50%;top: 30px;margin-left: -35px;}.news .dong{margin: 0 auto;position: relative;top: 40px;}.news > ul > li{width:100%;height: 200px;overflow: hidden;/*display: block;*/}.news > ul > li{list-style: none;float: left;}.news .dong .kuai{width: 28%;height: 350px;border: 1px solid #C3C3C3;padding: 10px;}.news .dong .kuai .pic{width: 100%;height: 50%;overflow: hidden;}.news .dong .pic img{width: 100%;height: 100%;transition: all 2s ease; }.news .dong li:hover img{transform: scale(1.3);}.read{width:38% ;height: 10%;margin: 0 auto;color: #F86C0F;border: 2px solid #F86C0F;font-size: 16px;text-align: center、padding-top: 4%;}.news .dong li:hover .read{ background-color:#F86C0F;color: white;}.news .dong li:hover{cursor: pointer;color: #2A7EDA;}4.2网页效果图5 设计总结1设计目的(一级标题:黑体小三,1.5倍行距,段后1行)××××××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),1.25倍行距)2设计要求×××××××××××××××××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),1.25倍行距)3整体规划×××××××……(正文:段落起始空两个字符,宋体,小四(英文、数字:Times New Roman,小四),1.25倍行距)4详细设计及实现4.1××(二级标题黑体四号,1.5倍行距,段前0.5行,独占行,左侧顶格书写)4.1.1 ××(三级标题:黑体小四,1.5倍行距,段前0.5行)4.2 ××(二级标题黑体四号,1.5倍行距,段前0.5行,独占行,左侧顶格书写)5设计总结对整个课程设计做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。