动态背景网页设计

动态背景网页设计 Web标准网页 Dreamweaver 是组建网站和设计网页的专业工具，以“所见即所得”的特点，使不同层次的用户都可以快速创建网页。Dreamweaver的每一次版本更新都会带来很多新功能和新特性。在Dreamweaver CS3基础上，Adobe公司又发布了最新版的网页制作和设计软件Dreamweaver CS4。Dreamweaver CS4新增了很多令人惊喜的新功能，在本章中通过个人主页、新闻查看页和博客首页3个实例详细介绍如何使用该软件设计符合Web标准的网页，以及使用CSS设计页面布局时的常用解决方案。 ? 了解网页制作流程 ? 了解Dreamweaver CS4新增功能 ? 熟悉CSS的基本语法和应用方法 ? 掌握CSS样式的创建方法 ? 掌握CSS样式的定义和基本作用 ? 掌握使用CSS进行简单页面布局 ? 熟悉CSS兼容性的解决方法 ? 了解常用的CSS技巧 个人网页如同个人简历或者个人的记事本一样，它可以显示用户的一些个人信息，也可以帮用户记录一些琐事。个人网页与企业类、门户类网页相比，比较随意、独特。它主要展现与个人相关的个性，如网上可看到很多名人的个人站点。 1.1.1 网页制作流程 为了加快网站建设的速度和减少失误，应该采用一定的制作流程来策划、设计、制作和发布网站。使用制作流程确定制作步骤，以确保每一步顺利完成，而不影响下一步的进行。理想的制作流程能帮助设计者解决策划网站的繁琐性问题，降低项目失败的风险。制作流程的第一阶段是规划项目和采集信息，接着是网站规划和设计网页阶段，最后是上传和维护网站阶段。 每个阶段都有独特的步骤，但相连的各阶段的界限并不明显。也就是说，每一阶段并不总是有一个固定的目标。有时候，某一阶段可能会因为项目中未曾预料的改变而更改。步骤的实际数目和名称因人而异，但是总体制作流程如图1-1所示。 图1-1 网站开发流程 实现可视化设计，并辅以通俗易懂的实用 1.1.2 网页制作工具 Dreamweaver是一个专业的HTML器，用于对Web站点、Web网页和Web应用程序进行设计、编码与开发。无论使用者喜欢直接编写HTML代码，还是偏爱在可视化环境中工作，Dreamweaver都会为使用者提供众多的帮助工具，丰富使用者的网页创作体验。 而作为该软件的最新版本Dreamweaver CS4，除了具有以前版本中的所有功能外，还增加了一些新功能，可以在可视化工作环境中可制作出更多的网页效果。主要体现在如下方面。 ? 支持领先Web技术 在支持大多数领先 Web开发技术的工具中进行设计和编码，这些技术包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、Adobe ColdFusion软件和ASP。 ? CSS最佳推荐新增功能 无须编写代码即可实施CSS最佳推荐。参考CSS最佳推荐 概念说明。用户可以在支持可访问性和最佳推荐的同时，创建基于Ajax的交互性 应用。 ? 全面的CSS支持增强功能 使用Dreamweaver CS4中增强的CSS实施工具可使用户的网站脱颖而出。借助“设计”和“实时视图”中的即时可视反馈，在“属性”面板中可快速定义和修改CSS规则。使用新增的“相关文件”和“代码导航器”功能可找到定义特定CSS规则的位置。 ? HTML数据集新增功能 无须掌握数据库或XML编码即可将动态数据的强大功能融入网页中。Spry数据集可以将简单的HTML表中的内容识别为交互式数据源。 ? 代码导航器新增功能 新增的“代码导航器”功能可显示影响当前选定内容的所有代码源，如CSS规则、服务器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。 1.1.3 制作个人主页 在设计个人站点时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。除此之外，还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并对一些文本可以突 出显示。 STEP|01 新建文档，在【标题】文本框中输入“欢 迎光临我的主页”，按CtrlS组合键保存文档。 在空白页面中右击，选择【页面属性】命令，在打开的【页面属性】对话框中设置【左边距】、【右边距】、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个单元格中分别输入“友情链接”、“百度”、“谷歌”、“新浪”、“网易”、“计算机教程网”，按照上一步骤的方法设 置字体的大小和颜色，并拖动表格边框调整到合适宽度，如图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 一、开发工具及环境搭建?5 1-1、开发工具?5 1-2、IIS环境搭建?6 二、个人网页设计及制作?9 2-1、设计个人网站首页及相关页面?9 2-2、个人网站网页制作? 16 2-2-1、html css 简介?16 2-2-1、网页制作?18 三、ASP简介及ASP技术工作原理?20 3-1、asp动态网站脚本语言? 20 3-2、Microsoft Office Aess简介?20 3-3、asp访问数据库?21 四、网站内容管理系统?23 4-1、数据表的设计?234-1-1、管理员登录表设计? 234-1-2、个人动态表设计?24 4-2、后台界面设计?24 4-3、后台功能简介?27 五、系统实现?285-1、个人首页?285-2、管理员登录?285-3、发布个人动态?315-4、打包文件说明?34 六、结束语?35 _? 35 致谢?36 个人动态网页的制作 摘 要 随着经济社会的发展，计算机已被应用到社会生活的各个领域。与此同时，互联网作为信息技术的通信桥梁连接着全球的计算机，而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在Inter上表现出其及其重要的地位，并发挥着其及其重要的作用。无论是在国内还是国外都得以迅速的发展和壮大，并被人们重视和关注。互联网已经 _的改变了世界，互联网的世界里蕴藏着无限的可能，在这种情况下，各行各业及其个人、单位、工厂、企事业等等在网上构筑属于自己的网络信息平台，保护自己的网络资源并在互联网上开辟自己的市场和消费群体，以及构造自己的数字化世界和加强全球范围内不同地域的人们联系交流等等活动也就显的日益重要。Inter的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决，小至个人网页开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题 关键词：html ；CSS；ASP；IIS；photoshop；dreamweaver；acess 绪 论 随着Inter的迅速普及，我们已经不再满足于仅仅浏览网页，而是希望更深入地参预到网络中去，Inter的开放性使个人建立自己的网站成为可能，拥有自己的网站也越来越成为一种时尚，同时创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。基于上述背景，根据自己在大学所学的知识，构建一个个人网站平台。从建站的实际情况出发，经过对相关网站的一番考察和分析，确定了采用asp和aess数据库技术，以Dreamweaver作为开发环境，综合运用photoshop和其他设计软件，最终实现个人网站的主要功能。通过设计一个个人网站，已达到个人推荐，展现自我的一个空间。网站主要有：个人动态、个人简介、个人随笔、个人相册和后台管理几个模块。其中，个人简介是，有与我相关的信息。个人相册则是用来展示我们平时旅游的照片和工作中的作品展示。个人动态和个人随笔是展示一些个人相关的学习、记事方面文章。后台管理是管理员进行登录进入的界面，可以对网站个人动态、个人随笔进行相应的管理功能。真正的做到“学以致用”，“把理论与实践相结合”。 一、开发工具及环境搭建 1-1、开发工具 1、 Adobe Dreamweaver CS6介绍 dreamweaver cs6是世界顶级软件厂商adobe推出的一套拥有可视化界面，用于制作并网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页（通常是标准通用标记语言下的一个应用HTML），对于初级人员，你可以无需编写任何代码就能快速创建web页面。 Dreamweaver现在最新版本已经更新到Adobe Dreamweave CC，对CSS3、html5、javascritp网页制作语言具有良好的支持。 JavaScript动态网页制作宝库 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 动态网页制作简介 动态HTML（即 DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。国内网络界也掀起了一股学习动态HTML的热潮。所谓动态网页就是采用动态HTML制作出来的具有动态效果的网页。 有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、Document Object Model（文件目标模块）、Layers和 Cascading Style Sheets（CSS）等。 那么，到底什么是动态HTML呢？简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。比如，当鼠标移至文章段落中，段落能够变成蓝 色，或者网页头部能够滑过电脑屏幕。这就是说，HTML中能够做的一切在网页下载后还能够做。动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。比较常用的技术有： （l）脚本编程语言（Javascript， VBScript） （2）文件目标模块（DOM） （3）层叠样式表（CSS） （4）动态图层（layers） Netscape Communicator 40以上版本和 Microsoft Inter Explorer（IE） 40以上版本，都宣称支持这种最新的动态HTML功能。但实际上，他们所支持的动态HTML内容并不完全相同。 IE 4.0所支持的动态 HTML包括以下几部分： （1）层叠样式表（CSS）：提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。在网页下载完毕后，可动态地改变页面元素的CSS属性。 （2）动态内容（ Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。 （3）动态图像：通过内建的 Animation可以实现动画的效果，另外配合 Javascript、VBScript或ActiVeX控件可以轻松地移动图像。 （4）数据库支持：通过动态HTML方便地实现对数据库中数据的访问。从而使网页设计者轻松地处理数据，实现更强大的交互功能。 Netscape 40所支持的动态 HTML包括以下几部分： （1）层叠样式表（CSS）。 （2）脚本排版样式（Javascript Style Sheets）：简称 JSS，这是 Netscape公司为该浏览器内建的一种排版样式，可以通过 Javascript来控制 Style Sheets。 （3）动态图层（Dynamic Layers)这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。 我们制作动态网页主要是利用CSS定义的属性可以动态改变、图层可以动态定位和 在客户端解释执行的Javascript 程序能够实时地操作HTML元素及其属性的特性，才使得网页动起来，与用户的实时交互得以实现。所以，要掌握动态网页制作技术，除了要熟悉CSS、图层应用技术外，还必须学好Javascript语言，并不要求达到熟练编程的水平，而是要达到基本能看懂程序。因为制作动态网页大多采用“拿来主义”，把别人的成果拿来后，不要生吞活咽，而是要细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样你的水平就会很快提高。 在制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML对持的程度是不同的，要使网页适应不同的浏览器，在程序中的一些具体操作上要分别设计。如：IE浏览器不支持Layers，但我们可以用DIV来代替，Dreamweaver3中图层给我们做了很好地示范。又如：NS不支持document.all和style则我们就要分别设计。如此等等，在本专题中将作详细描述。 网页中的最后修改日期 利用文档对象的一个属性la