动态背景网页设计.docx

动态背景网页设计.docx

《动态背景网页设计.docx》由会员分享，可在线阅读，更多相关《动态背景网页设计.docx（13页珍藏版）》请在冰豆网上搜索。

动态背景网页设计

动态背景网页设计

篇一：

动态网站开发典型案例

设计Web标准网页

Dreamweaver

是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。

Dreamweaver的每一次版本更新都会带来很多新功能和新特性。

在DreamweaverCS3基础上，Adobe公司又发布了最新版的网页制作和设计软件DreamweaverCS4。

DreamweaverCS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。

了解网页制作流程

了解DreamweaverCS4新增功能熟悉CSS的基本语法和应用方法掌握CSS样式的创建方法掌握CSS样式的定义和基本作用掌握使用CSS进行简单页面布局熟悉CSS兼容性的解决方法

了解常用的CSS技巧

个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。

个人网页与企业类、门户类网页相比，比较随意、独特。

它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。

1.1.1网页制作流程

为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。

使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。

理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。

制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。

每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。

也就是说，每一阶段并不总是有一个固定的目标。

有时候，某一阶段可能会因为项目中未曾预料的改变而更改。

步骤的实际数目和名称因人而异，但是总体制作流程如图1-1所示。

图1-1网站开发流程

实现可视化设计，并辅以通俗易懂的实用

1.1.2网页制作工具

Dreamweaver是一个专业的HTML编辑器，用于对Web站点、Web网页和Web应用程序进行设计、编码与开发。

无论使用者喜欢直接编写HTML代码，还是偏爱在可视化编辑环境中工作，Dreamweaver都会为使用者提供众多的帮助工具，丰富使用者的网页创作体验。

而作为该软件的最新版本DreamweaverCS4，除了具有以前版本中的所有功能外，还增加了一些新功能，可以在可视化工作环境中可制作出更多的网页效果。

主要体现在如下方面。

支持领先Web技术在支持大多数领先

Web开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion软件和ASP。

CSS最佳推荐新增功能无须编写代码即可实施CSS最佳推荐。

参考CSS最佳推荐

概念说明。

用户可以在支持可访问性和最佳推荐的同时，创建基于Ajax的交互性应用。

全面的CSS支持增强功能使用DreamweaverCS4中增强的CSS实施工具可使用户的网站脱颖而出。

借助“设计”和“实时视图”中的即时可视反馈，在“属性”面板中可快速定义和修改CSS规则。

使用新增的“相关文件”和“代码导航器”功能可找到定义特定CSS规则的位置。

HTML数据集新增功能无须掌握数据库或XML编码即可将动态数据的强大功能融入网页中。

Spry数据集可以将简单的HTML表中的内容识别为交互式数据源。

代码导航器新增功能新增的“代码导航器”功能可显示影响当前选定内容的所有代码源，如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。

1.1.3制作个人主页

在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。

除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突

出显示。

STEP|01新建文档，在【标题】文本框中输入“欢

迎光临我的主页”，按Ctrl＋S组合键保存文档。

在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】、【右边距】、0，单击【确定】按钮，如图1-2所示。

图1-2设置页面属性和标题

STEP|02单击【常用】选项卡中的【表格】按钮

，打开【表格】对话框，设置【行数】和【列数】均为1，【表格宽度】为100%，【边框粗细】为0像素，单击【确定】按钮创建第一个表格，如图1-3所示。

图1-3插入1行1列表格

STEP|03单击选中这个单元格，在【属性】面板

上设置单元格的高度为100。

进入【拆分】视图，输入代码“background=“images/header.gif””为单

元格设置一张背景图片，如图1-4所示。

图1-4设置表格背景图片

注意利用表格可以控制文本、图像和

Flash在页

面上出现的位置，不必担心页面的整体结构

遭到破坏，或者在浏览时无法正常显示。

STEP|04在单元格中输入“我的个人主页”

，然后在【属性】面板中设置【字体】为“黑体”，【大小】为28，【文本颜色】为#FDFDE0，如图1-5所示。

图1-5设置标题文字的字体属性

STEP|05接下来制作导航栏目。

单击【常用】选

项卡中的【表格】按钮，创建第二个表格，设置为6列、间距为1。

选择表格，在【属性】面板中设

置表格的【行】、【列】、【宽】、【间距】、【边框】，并设置【背景颜色】为#006600，如图1-6所示。

注意当用户打开【表格】对话框时，看到上面的默认设置是上一次设置的参数。

每次对

【表格】对话框进行更改后，由于Dream-

weaver具有自动记忆功能，会记住用户这次的设置。

【上边距】和【下边距】都为

图1-6设置1行6列表格属性

STEP|06单击第二个表格，然后单击标签选

中该行，在【属性】面板中，设置【高】为18、【背景颜色】为#669900、【水平】对齐方式为“居中对

齐”、【垂直】为“底部”、字体【大小】为12、【文本颜色】为#EFF6D6，如图1-7所示。

图1-7设置单元格属性

STEP|07选中前5个单元格，设置它们的宽度为

120，分别输入文字“我的日记”、“我的收藏”、“我的相册”、“我的朋友”和“给我留言”，如图

1-8所示。

图1-8设置菜单文字

STEP|08打开【页面属性】对话框，设置页面的

【背景颜色】为#FDFDE0。

单击【常用】选项卡中的【表格】按钮

，设置参数为1

行2列，【边框

粗细】、【单元格边距】、【单元格间距】均为0，单

击【确定】按钮，创建第三个表格。

单击右边的单

元格，在【属性】面板中设置它的宽度和对齐方式，如图1-9所示。

图1-9调整单元格宽度和对齐方式

STEP|09将光标置于右边的单元格中，单击【常

用】选项卡中的【图像】按钮，在打开的【选择图

像源文件】对话框中选择图像tree.jpg，单击【确定】按钮返回，如图1-10所示。

图1-10插入图像

STEP|10将光标置于左边的单元格中，在【属性】

面板中设置它的【垂直】对齐方式为“顶端”。

单击【常用】选项卡中的【表格】按钮

，设置参数为4行1列，【表格宽度】为90%，【边框粗细】、【单元格边距】、【单元格间距】均为0，单击

中设置表格的【对齐】方式为“居中对齐”，如图1-11所示。

STEP|11将光标置于第一个单元格中，输入文章

标题，在【属性】面板中设置文字的大小、颜色、对齐方式以及单元格的高度、对齐方式等参数，如图1-12所示。

【确定】按钮，创建第四个表格。

在【属性】面板

图1-11设置表格对齐方式

图1-12设置文章标题属性

STEP|12在第二个单元格中输入文章的正文，在

1-13所示。

图1-13设置正文内容属性

STEP|13将光标置于第三个单元格中，设置它的

高度为50。

单击【常用】选项卡中的【表格】按钮

，设置参数为1行7列，

【边框粗细】、【单元格边距】、【单元格间距】均为0，单击【确定】按钮，创建一个嵌套表格。

在前7个单元格中分别输入“友情链接”、“XX”、“谷歌”、“新浪”、“网易”、“计算机教程网”，按照上一步骤的方法设

置字体的大小和颜色，并拖动表格边框调整到合适宽度，如图1-14所示。

图1-14设置表格属性

STEP|14将光标置于第四个单元格中，设置它的

高度为50，输入版权信息。

选中版权信息，在【属性】面板中设置【文本大小】为12，【文本颜色】

为#999999，如图1-15所示。

图1-15设置版权文字格式

STEP|15至此个人网站的首页制作完成，按

Ctrl

＋S组合键保存文档，再按F12键就可以在IE窗口中预览网页效果了。

最终效果如图1-16所示。

图1-16个人主页效果

【属性】面板中设置文字的大小和颜色，如图“搜狐”

篇二：

个人动态网页的制作

西南大学网络与继续教育学院

毕业论文

论文题目：

个人动态网页的制作

学生

学号

类型网络教育

专业计算机科学与技术

层次专升本

指导教师

日期

西南大学网络教育学院

毕业论文（设计）评定表

摘要4绪论5

一、开发工具及环境搭建51-1、开发工具51-2、IIS环境搭建6

二、个人网页设计及制作92-1、设计个人网站首页及相关页面92-2、个人网站网页制作162-2-1、htmlcss简介162-2-1、网页制作18

三、ASP简介及ASP技术工作原理203-1、asp动态网站脚本语言203-2、MicrosoftOfficeAccess简介203-3、asp访问数据库21

四、网站内容管理系统234-1、数据表的设计234-1-1、管理员登录表设计234-1-2、个人动态表设计244-2、后台界面设计244-3、后台功能简介27

五、系统实现285-1、个人首页285-2、管理员登录285-3、发布个人动态315-4、打包文件说明34

六、结束语35参考文献35致谢36

个人动态网页的制作

摘要

随着经济社会的发展，计算机已被应用到社会生活的各个领域。

与此同时，互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Internet上表现出其及其重要的地位，并发挥着其及其重要的作用。

无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。

互联网已经彻底的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的日益重要。

Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人网页开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题

关键词：

html；CSS；ASP；IIS；photoshop；dreamweaver；acess

绪论

随着Internet的迅速普及，我们已经不再满足于仅仅浏览网页，而是希望更深入地参预到网络中去，Internet的开放性使个人建立自己的网站成为可能，拥有自己的网站也越来越成为一种时尚，同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。

基于上述背景，根据自己在大学所学的知识，构建一个个人网站平台。

从建站的实际情况出发，经过对相关网站的一番考察和分析，确定了采用asp和access数据库技术，以Dreamweaver作为开发环境，综合运用photoshop和其他设计软件，最终实现个人网站的主要功能。

通过设计一个个人网站，已达到个人推荐，展现自我的一个空间。

网站主要有：

个人动态、个人简介、个人随笔、个人相册和后台管理几个模块。

其中，个人简介是自我介绍，有与我相关的信息。

个人相册则是用来展示我们平时旅游的照片和工作中的作品展示。

个人动态和个人随笔是展示一些个人相关的学习、记事方面文章。

后台管理是管理员进行登录进入的界面，可以对网站个人动态、个人随笔进行相应的管理功能。

真正的做到“学以致用”，“把理论与实践相结合”。

一、开发工具及环境搭建

1-1、开发工具

1、AdobeDreamweaverCS6介绍dreamweavercs6是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。

由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页（通常是标准通用标记语言下的一个应用HTML），对于初级人员，你可以无需编写任何代码就能快速创建web页面。

Dreamweaver现在最新版本已经更新到AdobeDreamweaveCC，对CSS3、html5、javascritp网页制作语言具有良好的支持。

篇三：

JavaScript动态网页制作

JavaScript动态网页制作宝库

动态网页制作简介

动态HTML（即DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。

国内网络界也掀起了一股学习动态HTML的热潮。

所谓动态网页就是采用动态HTML制作出来的具有动态效果的网页。

有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。

实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、DocumentObjectModel（文件目标模块）、Layers和CascadingStyleSheets（CSS）等。

那么，到底什么是动态HTML呢？

简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。

比如，当鼠标移至文章段落中，段落能够变成蓝

色，或者网页头部能够滑过电脑屏幕。

这就是说，HTML中能够做的一切在网页下载后还能够做。

动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。

比较常用的技术有：

（l）脚本编程语言（Javascript，VBScript）

（2）文件目标模块（DOM）

（3）层叠样式表（CSS）

（4）动态图层（layers）

NetscapeCommunicator4．0以上版本和MicrosoftInternetExplorer（IE）4．0以上版本，都宣称支持这种最新的动态HTML功能。

但实际上，他们所支持的动态HTML内容并不完全相同。

IE4.0所支持的动态HTML包括以下几部分：

（1）层叠样式表（CSS）：

提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。

在网页下载完毕后，可动态地改变页面元素的CSS属性。

（2）动态内容（DynamicContent）：

可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。

（3）动态图像：

通过内建的Animation可以实现动画的效果，另外配合Javascript、VBScript或ActiVeX控件可以轻松地移动图像。

（4）数据库支持：

通过动态HTML方便地实现对数据库中数据的访问。

从而使网页设计者轻松地处理数据，实现更强大的交互功能。

Netscape4．0所支持的动态HTML包括以下几部分：

（1）层叠样式表（CSS）。

（2）脚本排版样式（JavascriptStyleSheets）：

简称JSS，这是Netscape公司为该浏览器内建的一种排版样式，可以通过Javascript来控制StyleSheets。

（3）动态图层（DynamicLayers）这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。

我们制作动态网页主要是利用CSS定义的属性可以动态改变、图层可以动态定位和

在客户端解释执行的Javascript程序能够实时地操作HTML元素及其属性的特性，才使得网页动起来，与用户的实时交互得以实现。

所以，要掌握动态网页制作技术，除了要熟悉CSS、图层应用技术外，还必须学好Javascript语言，并不要求达到熟练编程的水平，而是要达到基本能看懂程序。

因为制作动态网页大多采用“拿来主义”，把别人的成果拿来后，不要生吞活咽，而是要细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样你的水平就会很快提高。

在制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML对持的程度是不同的，要使网页适应不同的浏览器，在程序中的一些具体操作上要分别设计。

如：

IE浏览器不支持Layers，但我们可以用DIV来代替，Dreamweaver3中图层给我们做了很好地示范。

又如：

NS不支持document.all和style则我们就要分别设计。

如此等等，在本专题中将作详细描述。

网页中的最后修改日期

利用文档对象的一个属性lastModified就可以显示网页最后日期，这一点对一个网站管理者来说是十分有用的。

可以在网页中加入相应的函数，自动显示文档的最后修改日期。

其实，很多网页都有这段程序，我在这里把这段大家都用的程序作为例子进行剖析，以说明如何对一个Javascript程序举一反三地应用。

一、最简单的用法

示例：

本页最后更新日期：

01/31/200116:

01:

24

这个例子只用了一条语句，请看源代码：

这里document.write（document.lastModified）的作用是用document对象的write

方法把document对象的lastModified属性值写到文档中。

在《Javascript基础》一文中已讲过，对象是一组含有数据的属性和对属性中数据进行操作的方法。

这里，document是一个对象，它包含了许多类似lastModified这样的属性，也包含了许多类似于write这样的方法，我想你现在应该对什么是对象、什么是对象的属性和方法有所理解了吧？

！

那么怎样知道有那些对象，一个对象又有那些属性和方法呢？

这只有去查看Javascript的教科书了。

二、显示我们习惯的日期

示例：

更新日期：

2001年1月31日

上例的日期表示方法是按西方人的习惯的，而本例这种写法就符合中国人的习惯了。

我们再来看看源代码：

本程序的思路：

把表示日期的数码从lastModified中分离出来，再加上中文年月日不就行了吗！

Javascript的Date类型有相应的方法把日期数码分离出来，所以第一步就声明了一个日期变量“lastdate”，并把document.lastModified作为一日期类型给lastdate赋值。

后面就是用相应的方法获取年月日数字了，最后，再用document的write方法把它写入网页文档。

在这段程序中加了一句：

if（Number（Y）

程序代码：

--

functionldate（）{

varlastdate=newDate（document.lastModified）;

Y=lastdate.getYear（）;

if（Number（Y）<100）Y=“20”+Y;

M=Number（lastdate.getMonth（））+1;

D=lastdate.getDate（）;

document.all[“lsdate”].value=“更新日期：

”+Y+”年”+M+”月”+D+”日”;

}