新大html设计大作业.docx

《新大html设计大作业.docx》由会员分享，可在线阅读，更多相关《新大html设计大作业.docx（18页珍藏版）》请在冰点文库上搜索。

新大html设计大作业

学年论文

（课程论文、课程设计）

题　　目：

静态网页制作

作　　者：

李昂　

所在学院：

　　信息学院

专业年级：

　计算机10-1班

指导教师：

　孙晶

职　　称：

　　　　　讲师

2011年5月10日

新疆大学课程论文（设计）、学年论文评分表

题目

静态网页制作

作者

李昂

专业年级

计算机10-1

指导教师

孙晶

指导教师评语及

评分建议

李昂同学设计的“静态网页制作”，功能齐全，界面较友好，程序正确，结构妥当，思路相对清晰，但代码编写风格不够规整，态度认真。

从所设计的程序可以看出，已基本掌握了html语言的理论知识，以及运用html语言编程解决问题的基本技能。

建议成绩：

指导教师：

2011年5月10日

院

（部）

或

教

研

室

意

见

同意指导老师意见。

学院或教研室主任：

2011年月日

Html语言概述：

HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。

html是在sgml定义下的一个描述性语言，或可说html是sgml的一个应用程式，html不是程式语言，它只是标示语言。

编辑的基本概况：

HTML一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

HTML只是标示语言，基本上你只要明白了各种标记的用法便算学懂了html，html的格式非常简单，只是由文字及标记组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成ascii纯文字格式即可，当然以专业的网页编辑软件为佳。

编辑的主要特点：

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

　　另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。

它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

神奇吗?

一点都不神奇,因为现在你看到的就是这种语言写的页面。

　　也许你听说过许多可以编辑网页的软件，事实上，你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。

其实你很快就会发现,基础的HTML语言简直容易死了。

　　HTML只不过是组合成一个文本文件的一系列标签。

它们很像乐队的指挥，告诉乐手们哪里需要停顿，哪里需要激昂。

编辑的基本结构：

　　一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置，

　　HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

　　下面是一个最基本的html文档的代码:

1－1.html

　　----------------------------------------开始标签

　　--------------------------------------

　　|头部标签

　　--------------------------------------

　　----------------------------------------

　　---------------------------------------

　　---------------------------------------结尾标签

　　在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本编辑语言（HTML）编写的。

事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。

　　是HTML文档的头部标签,在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公共属性。

若不需头部信息则可省略此标记，良好的习惯是不省略。

　　是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

　　标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。

　　上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。

编辑的HTML的发布：

　　万维网主要由从服务器通过HTTP协议向浏览器发送的HTML文档组成。

但是，HTTP也可以被用于传输HTML之外的数据，例如图像、声音和其他内容。

为使浏览器了解如何处理接收到的文档，在传输文档时必须同时传递文件类型。

这种元件库包含MIME类型（对于HTML4.01或更早版本是text/html，而对于XHTML1.0或之后的版本是application/xhtml+xml），以及字符编码（参见HTML字符编码方式）。

　　在现在的浏览器中，和HTML文档一起发送的MIME类型影响文档的解读方式。

和XHTMLMIME类型一起发送的文档被认为是良构的XML，而语法错误会导致浏览器无法呈现文档。

完全相同的文档如果和HTMLMIME类型一起发送，则可能被正常显示，因为浏览器对HTML的语法检查更加松懈些。

如果MIME类型不被识别为HTML，那么浏览器不应该试图将文档呈现为HTML，即使文档以正确的文档类型声明开头也是这样；尽管如此，一些浏览器还是检查文档内容或其URL来判断其文件类型。

因为可能造成的安全性问题，这种行为不被提倡。

即使以不遵守标准著称的InternetExplorer也基本放弃了这种做法。

Dreamwever概述

Dreamweaver是由Macromedia公司开发的一款所见即所得的网页编辑器。

和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”；2005年4月18日，全球最大的图像编辑软件供应商Adobe宣布，以换股方式收购软件公司Macromedia，Macromedia是著名的网页设计软件Dreamweaver及Flash的供应商。

据悉，此项交易涉及金额高达34亿美元。

根据双方达成的协议，Macromedia股东将以1：

0.69的比例获得Adobe的普通股。

自此开始，Dreamweaver开始属于ADOBE设计软件系列。

　　Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针DREAMWEAVER

对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM（梦之队），足见市场的反响和MACROMEDIA公司对它们的自信。

说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网（Internet）的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

初识界面

　　安装后，它会自动在Windows的菜单中创建程序组。

与FrontPage有很大的不同，是的，它MacromediaDreamweaver

把工具栏省去了，然后增加了几个浮动的工具栏。

在Dreamwaver3.0中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。

在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是Dreamwaver3.0编辑网页中最值得人赞赏的特性。

通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。

但对于熟悉了微软的应用程序的用户来说，开始的时候可能很不习惯。

那好，就先来介绍它的三个最重要的浮动面板。

启动面板

　　启动面板主要用来快速启动相应的任务，或显示/隐藏相应的浮动面板。

如果启动面板是竖的，那么，可以点击它右下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所有选项。

这也就为网页制作者提供了方便。

可以直接从右下角点击相应的栏目进入想要进入的对话框。

对象面板

　　对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中，如图5。

　　每一个选项中都有若干个图标，只要在图表上单击一下，就可以插入想要插入的对象了。

属性面板

　　属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也列出来。

展开后，箭头会变成向上，单击它，又会使属性面板复原。

属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化，挺方便的。

用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可。

总体功能设计：

1.任务模块构成

1新疆大巴扎

2心理测试

3用户登录系统

2.完成的主要页面

详细代码设计：

1新疆大巴扎

//www.w3.org/1999/xhtml">

--

.STYLE2{

font-weight:

bold;

color:

#000000;

font-family:

Geneva,Arial,Helvetica,sans-serif;

font-size:

50px;

}

.STYLE3{font-size:

x-large}

.STYLE4{color:

#FF0000}

-->

新疆大巴扎