您的位置：360文档中心› 网页设计课程设计报告

网页设计课程设计报告

网页设计课程设计报告
网页设计课程设计报告

课程设计

课程名称：HTML5开发技术课程设计

专业班级：计科1201

学生姓名：伍志强

学号： 201216010506

指导教师：刘宏月

学期：2013-2014学年第一学期

HTML5开发技术专业课程设计任务书

说明：本表由指导教师填写，由教研室主任审核后下达给选题学生，装订在设计（论文）首页

1 需求分析

本课程设计为一个商业网站，大的框架为整个网站分为5个页面，分别为：主页面、公司的业务面，公司产品问题咨询面，公司产品的技术支持面，校园招聘界面。各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。在每个界面拥有的公司logo ，登陆界面，和一些视频的宣传和校园招聘网页的背景音乐，友情链接，插入的各种静动态图片，搜索栏。每个界面链接的公司的最新各种动态，和基本的各种文字说明，采用的是中英双板模式书写。

网站的目录结构如下：

伍志强------网站根目录

Css ------存放外置CSS文件

Images ------存放图片文件

Music ------存放背景音乐

ＪＳ------存放的ｊａｖａｓｃｒｉｐｔ代码

．ｐｒｏｊｅｃｔ------编译时建立的一个工程

Index系列------存放的网站的各个网页

2 概要设计

3 详细设计

页面的布局和风格

DIV+CSS的基本过程是先布局，对网页进行总体设计，再设计内容，对布局的每一部分进行设计。

DIV+CSS对内容的设计也体现内容和表现相分离的思想。对内容的表现的描述都在CSS中，内容可以应用CSS样式，不需要额外的HTML标签进行内容的修饰。

CSS网页布局的原理，就是按照HTML5代码中对象声明的

body {

background:#131b20;

font-family:Arial, Helvetica, sans-serif;

font-size:100%;

line-height:1.5em;

color:#f1fefd;

}

html { min-width:980px;} html, body { height:100%;} container {

margin: 0 auto;

position: relative;

width: 980px;

font-size:.75em;

}……

各个网页之间的链接：

media="all">

LOGO 插入：

登陆注册界面：

type="checkbox" name="checkbox" id="checkbox">

class="submit">

网页部分图片的插入：

视频的使用：

src="https://www.360docs.net/doc/2215745036.html,/player.php/sid/XNTY4MjcwMzI0/v.swf" allowFullScreen="true" quality="high" width="200" height="200" align="left" allowScriptAccess="always" type="application/x-shockwave-flash">

背景音乐：

.vlinks{

position:relative;

padding:0 0 0 800px;}

#apDiv2{

position:absolute;

left:660px;

top:29px;

width;301px;

height:25px;

z-index:1;

border:#B0B82C 1px solid;

background-color:#FFFFCC;

提交的信息栏：

友情链接：

Collect from 友情链接

动态信息栏：

搜索栏：

部分页面展示：

4 调试分析

出现的错误

.1网页背景色的设置

2重复使用实现相同功能的代码、或杂七杂八的乱套代码.

3.在HTML5中，我们并不需要给 (3)单击“文件”→“选择”→“保存”菜单项，选择文件类型为“所有文件”，文件名输入“index.html”并选择文件保存地址（记住一定要把文件的后缀存为.html或.htm，否则网页无法显示）。 （4）用浏览器打开这个文件，看看效果吧！ 二．用HTML语言编写符合以下要求的文档：标题为“班级主页”，在浏览器窗口用户区显示“欢迎来到我们的班级主页”，完成后效果如图： 代码： 班级主页 欢迎来到我们的班级主页

网页设计心得体会报告

网页设计心得体会报告 初期的网站都是由静态网页组成，网页中只有文字、图形、图像等，用户只能被动的接受这些信息。那时的web页面的核心是HTML，它编写很方便，不要求有特定的语言环境，可以有任何一种编辑器写好（如word、写字板、记事本），然后可以放到浏览器观看结果。现在HTML已经有很多专门的编辑软件，如Frontpage、Hotdog、Dreamweaver等。 HTML的历史最早可以追溯到20世纪40年代。在1945年，Vannevar Bush 在一篇文章中阐述了文本和文本之间通过超级链接相互关联的思想，并在文中给出了一种能实现信息关联的计算机Memex的设计方案。随后经过一系列的发展研究，1989年Tim Berners_Lee对SGML做了大刀阔斧的简化和完善，穿凿了最初的HTML，并用它在自己编写的图形化Web浏览器上看得到最早的web页面。 网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常重要。生活中我每天上网都要接触到网页，原来没有留意过网页的设计，但是经过这段时间的学习了解，现在我打开一个网页都会习惯性的先看看排版、布局和色彩运用。 通过老师的讲解和对课本的翻阅，我学习到了一些关于建设网站和制作网页的知识，对网页制作的基础知识也有了一定的掌握。通过Dreamweaver 制作网页，我用到了一些基本的功能：图片插入和对齐设置；文字的格式、颜色、背景颜色的设置等。但是在自己尝试着做的时候，总是出现这里那里的问题。不是图片不能固定在自己想要的位置，就是滚动文本的显示区域不知道为什么撑过了页面，还有就是不同分辨率、不同浏览器都会对浏览网页产生影响。而且在CSS方面，我总是不太熟悉各种代码是控制哪些东西的。除了查找解决问题我还总结了经验。例如：1、命名站点或者文件夹的的时候一定要注意，最好用相应的英语或者汉语拼音，要见名知意，如图片文件夹用image或者tu，这样可以避免页面调用时不正确的现象发生。2、调用Style 时可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。在这个过程中，我同样认识到网页设计不是一门学科的独秀，而是多种课程的综合，它是Flash、Photoshop 等网页软件的综合应用。例如Flash提供了功能齐全的绘图和编辑图形工具。可以直接在编辑区里绘画，编辑修改非常灵活，它的另一大特点是“交互性”强。在动画播放时，可以用鼠标或键盘对动画的播放进行控制，可以很直观的反映出效果。 页面设计应以美观、大方、简洁为原则，保持一致的风格。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。网页最主要的功能就是给每个上网者提供一种形式，让他们能够了解网站提供的信息。要研究网页设计，就需要站在用户的角度来看。用户是一个网站成败的关键。如果用户要花很多时间进入网站，很有可能他会立即关掉网站，或者网站操作很不方便用户也会马上离开，这种网站是很失败的设计，只会让用户失望的离去。所以网页容量即包括图像在内的网页字节数最好不要超过50K。 还涉及到界面弱化的问题。一个好的界面设计它的界面是弱化的，它突

网页设计课程设计报告

钦州学院 C语言课程设计报告 学生选修课管理系统 院系物理和材料科学学院专业自动化 学生班级 2008级1班 姓名李美月 学号 0805404134 指导教师单位钦州学院 指导教师姓名陶卫平 指导教师职称讲师 2011年6月 学生选修课管理系统 自动化专业2008级李美月 指导教师陶卫平 摘要:当今时代是飞速发展的信息时代,在各行个业中离不开信息处理,这正是计算机被广泛使用于信息系统环境。计算机的最到好处的利用它能够进行信息管理,使计算机进行信息控制,不仅提高了工作效率,而且大大提高了其安全性。 尤其对复查的信息管理,计算机能够充分发挥它的优越性。计算机进行信息管理和信息管理系统的开发密切相关,系统的开发是系统管理的前提。本系统就是为了管理好学生选课信息而设计的。

数据处理手工操作,工作量大,出错率高,出错后不易更改,造成了时间上的浪费。 基于这个问题,有必要建立一个学生选修课系统,使学生选课信息管理工作规范化、系统化、程序化、避免学生选课管理随意性,提高信息处理的速度和准确性,能够及时、准确、有效的查询和修改选课情况。 【关键词】管理员管理;课程查询;学生选课;系统框图;程序;C++ 设计目的: (1根据C语言课程设计来设计一个实用的系统即学生选课系统。 (2设计该系统能够实现选课信息管理工作规范化、系统化、程序化、避免选课管理随意性,提高信息处理的速度和准确性,能够及时、准确、有效的查询和修改选课情况。 (3通过实践,更进一步掌握C语言课程设计理论知识,做到从理论到实践。 设计技术指标和要求: 由于C语言是面对过程的语言,故我的设计思路是根据目标程序运行的过程来编写,尽量要求做到: (1设计界面要求尽量美观简洁; (2管理员能够对课程信息和用户的管理,以及学生对课程信息的查看和选课。 (3用户能够根据提示,输入操作项,调用系统提供的管理功能。 (4完成学生选课管理的开发。 目录 前言 (3

网页设计课程设计心得

网页设计课程设计心得 网页设计，是根据企业希望向浏览者传递的信息，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。下面是的网页设计课程设计心得，希望对你有所帮助！ 21世纪的时期，中国的网络正在实飞猛进，大多的企业都是通过建立网站来进入企业宣传，通过企业网站来打广告，宣传产品、品牌推广，促进销售等方法来实现企业营利的目的。所以，中国的互联网在中国的近几年来，有了非常大的发展空间，如“网上商店”“网上服务”“网络资源”非常的流行。所以网页设计师中一个紧缺的人才。对一个企业来说，做好一个网站是必不可少的。我们现在做为电子商务专业的，我们的最终目标是针对全球这个大的市场，还有这个网络市场。作为一个企业的管理者，应当为自己设计一个能够促进销而且能够代表我们企业的形象、宣传我们企业最新出来的产品的这么一个网站。 我们学了一个学期的网页设计，这周我们开始实践我们专用的计划如下： 第一天：网页设计与布局。网页的题材自己定，可以任选。 第二天：准备材料。建立站点，将所有的题材放到自己所建立好的站点里去，以便在做的可以更方便、快捷的应用到网页中，提高速率。

第三天：将所在准备的材料一起联接起来，放到自己的所设计的布局结构中。再做二级网页，建立超链接，把一级和二级网页连接起来。 第四天：将所做的网页进行、调试、发布。在网站上申请一个空间，将自己做的网页传到网上去。 第五天：写实习报告。将写好的实习报告打成电子文档，传到老师处，审查。 网页的布局： 网页的布局指的是网页的整体架构，也就是排版。在一个被别人打开网页之后，如何才能突出里面最重要的内容，即让用户第一眼就看到这个网页所想要传达的信息和内容。这首先就要从网页布局做起.我觉得网页布局应当注意以下几点：1、整个网页的长和宽的比例，2、导航条的设置，3、正文的框架结构。我的这个上网页中，我的大体布局就是“F“型的。从我的首页上看上去虽然有点乱的感觉，但整个的布局是清楚的，乱而有型。在大多数企业网站中的布局都是大同小异，但是它们做出来的效果显得非常的完美，所也是他们企业的成功之处所在。因此，一个网页布局是一个非常重要的一个工作。 网页的设计： 网页的设计不仅需要学好网页设计软件的方法，还需要和其它的软件一起使用，如动画设计软件，静态图像处理软件，等等。所以学习起来的确有点困难，所以需要有有点耐心去学习，不要是因为一时的好奇而去做网站，那肯定是不得行的。当我们遇到问题的时候要

相关主题