网站实现文档格式.docx
- 文档编号:22277377
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:26
- 大小:1.34MB
网站实现文档格式.docx
《网站实现文档格式.docx》由会员分享,可在线阅读,更多相关《网站实现文档格式.docx(26页珍藏版)》请在冰豆网上搜索。
SiteImplementation;
Dreamweaver;
ASP;
MySQL
3.4主页规划设计19
一、引言
在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,他在人们政治、经济、生活等各个方面发挥着重要的作用。
网站已成为政府、企事单位信息化建设中的重要组成部分,倍受人们的重视。
对于学校的而言,为了更好的提高办学质量和学校知名度,建立一个具有鲜明特点校园网站是十分必要的。
校园网站不仅是在校园内发布信息的通道与环境,也是对外联系和宣传自己的良好途径。
在校园网站逐步完善的同时,电子系为了适应学校需求,加快系部发展,决定建立电子信息与计算机学系网站,对系部进行全面、深入的介绍,发布系里的精彩活动,紧密系部与学生的联系,更好的完成教育教学工作。
我们采用了可视化网页设计软件DreamweaverMX来实现电子系的网站设计,使用的版本是DreamweaverMX2004,它能够实现动态网页编程,能够对ASP进行处理并能够实现与Access、Mysql、SQLserver或者Oracle等数据库的连接,功能强大。
在此选用了标准的SQL语句来调用数据库。
但是网站开发是一项很复杂的工作,下面详细讨论了该网站的开发、设计环境、实现方法及其具体的实现。
在信息和网络的时代,越来越多的人们每天都要依靠网络来发布信息和获取信息,从而更加有效地学习、工作和生活。
Internet使人们的距离无限缩小,成为有史以来覆盖领域最广的展示舞台。
从某种程度上来说,Internet上的各种应用都是依照现实生活中的需求来模拟设计实现的。
在信息化飞速发展的今天,互联网技术日趋成熟,在网络上及时的发布信息和获得信息,已经成为当今世界流行的快捷的途径。
政府,企业,学校已经纷纷接受了这种方便的途径来宣传自己,并已经可以直接在互联网上办理一些业务。
二、网站总体分析与设计
在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。
Internet上发布信息主要是通过网站来实现的,获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。
因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。
为了更好的办学,提高系部知名度,特构建电子信息与计算机科学系网站。
提高办公效率,向管理要效益成为组织发展的有效手段之一;
高效办公、科学管理与信息技术相结合成为提高办公效率和管理水平的主要方式。
因此院系的信息化建设即网站建设成为现代企事单位基础建设的一个重要方面。
对于建立电子信息与计算机科学系的网站,从教学的角度看,教学资料的积累查阅,课件和考试复习题的共享,及时的答疑解惑,各类活动的安排都可以网页的形式发布在电子系的网站上,使教育教学的信息及时流通并有了最佳保存信息的方式。
从学生的角度来看,教学资源的共享以及各种活动的发布,都促进了学生的学习,紧密了学生与系部之间的联系。
电子信息与计算机科学系网站的设计与实现是完善校园网也是教学工作必不可少的工作。
2.1设计思想
通过网站,全面宣传,展示电子信息与计算机科学系风采、优点与特色,发布系里的重大活动安排与招生政策,增强学生与系部之间的联系,在Internet上实现完成部分校务,提高办事效率。
2.2开发工具的介绍
Dreamweavar是一个可视化的网页设计和网站管理工具,支持最新的Web技术,包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等多媒体格式和动态HTML、基于团队的Web创作。
目前使用得最多的是DreamweaverMX2004和Dreamweaver8.0两个版本,前者在功能上比后者强大,能够实现动态网页编程,在此选用DreamweaverMX2004.
MacromediaDreamweaverMX2004是一款专业的HTML编辑器,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。
无论您愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作,Dreamweaver都会为您提供有用的工具,使您拥有更加完美的Web创作体验。
利用Dreamweaver中的可视化编辑功能,您可以快速地创建页面而无需编写任何代码。
您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。
您可以在MacromediaFireworks或其他图形应用程序中创建和编辑图像,然后将它们直接导入Dreamweaver,或者添加MacromediaFlash对象,从而优化您的开发工作流程。
Dreamweaver还提供了功能全面的编码环境,其中包括代码编辑工具(例如代码颜色和标签完成);
有关HTML、层叠样式表(CSS)、JavaScript、ColdFusion标记语言(CFML)、MicrosoftActiveServerPages(ASP)和JavaServerPages(JSP)的参考资料。
Macromedia的可自由导入导出HTML技术可导入您手工编码的HTML文档而不会重新设置代码的格式,您可以随后用您首选的格式设置样式来重新设置代码的格式。
Dreamweaver还使您可以使用服务器技术(例如CFML、ASP.NET、ASP、JSP和PHP)生成由动态数据库支持的Web应用程序。
Dreamweaver可以完全自定义。
您可以创建您自己的对象和命令,修改快捷键,甚至编写JavaScript代码,用新的行为、属性检查器和站点报告来扩展Dreamweaver的功能。
Dreamweaver的编辑环境
(1)工作区布局
在Windows中首次启动DreamweaverMX时,会出现“工作区设置”窗口,从中可以选择一种工作区布局,提供的三种不同的工作界面,分别是“DreamweaverMX工作区”“Dreamweaver4工作区”和“Homesite/Coder-Style代码编者样式”.
确定了工作区后,如果希望改为其它布局,可以选择“编辑”菜单中的“参数选择”命令,切换到不同的工作区。
(2)窗口和面版概述
应用DreamweaverMX时,首先出现的是DreamweaverMX的操作界面窗口
现将其组成部分说明如下。
插入栏:
包含用于将各种类型的对象(如图像、表格和层)插入到文档中的按钮。
每个对象都是一段HTML代码,允许您在插入它时设置不同的属性。
例如,您可以在“插入”栏中单击“图像”图标插入一个图像。
如果您愿意,可以不使用“插入”栏而使用“插入”菜单插入对象。
文档工具栏:
包含按钮和弹出式菜单,它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)、各种查看选项和一些普通操作(如在浏览器中预览)。
文档窗口:
显示您当前创建和编辑的文档。
属性检查器:
用于查看和更改所选对象或文本的各种属性。
每种对象都具有不同的属性。
面板组:
是一组停靠在某个标题下面的相关面板的集合。
若要展开一个面板组,请单击组名称左侧的展开箭头;
若要取消停靠一个面板组,请拖动该组标题条左边缘的手柄。
站点面板:
使您可以管理组成站点的文件和文件夹。
标题栏:
显示的是页面的目录文件夹名及打开的文件名,如果文件中包含未保存的修改部分,标题栏中将在显示文件名和星号(*)。
Dreamweaver提供了多种此处未说明的其他面板、检查器和窗口,例如“CSS样式”面板和“标记检查器”。
若要打开Dreamweaver面板、检查器和窗口,请使用“窗口”菜单。
菜单概述
“文件”菜单和“编辑”菜单包含“文件”菜单和“编辑”菜单的标准菜单项,例如“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。
“文件”菜单还包含各种其他命令,用于查看当前文档或对当前文档执行操作,例如“在浏览器中预览”和“打印代码”。
“编辑”菜单包含选择和搜索命令,例如“选择父标签”和“查找和替换”。
在Windows中,“编辑”菜单还提供对Dreamweaver菜单中“首选参数”的访问;
在Macintosh中,使用Dreamweaver菜单可以打开“首选参数”对话框。
“视图”菜单使您可以看到文档的各种视图(例如“设计”视图和“代码”视图),并且可以显示和隐藏不同类型的页面元素和Dreamweaver工具及工具栏。
“插入”菜单提供“插入”栏的替代项,用于将对象插入您的文档。
“修改”菜单使您可以更改选定页面元素或项的属性。
使用此菜单,您可以编辑标签属性,更改表格和表格元素,并且为库项和模板执行不同的操作。
“文本”菜单使您可以轻松地设置文本的格式。
“命令”菜单提供对各种命令的访问;
包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令,以及一个使用MacromediaFireworks优化图像的命令。
“站点”菜单提供用于管理站点以及上传和下载文件的菜单项。
提示:
以前版本的Dreamweaver中的“站点”菜单的部分功能现在可以在“文件”面板的“选项”菜单中找到。
“窗口”菜单提供对Dreamweaver中的所有面板、检查器和窗口的访问。
(要访问工具栏,请参见“视图”菜单。
)
“帮助”菜单提供对Dreamweaver文档的访问,包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统,还包括各种语言的参考材料。
除了菜单栏菜单外,Dreamweaver还提供多种上下文菜单,您可以利用它们方便地访问与当前选择或区域有关的有用命令。
若要显示上下文菜单,右击(Windows)或在按住Control键的同时单击(Macintosh)窗口中的某一项。
使用Fireworks
Dreamweaver和Fireworks识别并共享多种相同的文件编辑过程,其中包括对链接、图像映射、表切片等的更改。
这两种应用程序一起提供了在HTML页中编辑、优化和放置Web图形文件的简化工作流程。
在Dreamweaver中优化Web页中的图像
这次设计使用的是MacromediaFireworks优化图像。
若要优化图像,请执行以下操作:
1打开包含要优化的图像的页面,选择图像,并执行下列操作之一:
■单击图像属性检查器中的“在Fireworks中优化”按钮。
■选择“修改”>
“图像”>
“在Fireworks中优化图像”。
将显示“Fireworks优化图像”对话框。
2单击“确定”。
在Dreamweaver中打开Fireworks弹出菜单
Fireworks支持基于图像的弹出菜单和基于HTML的弹出菜单。
Dreamweaver仅支持基于HTML的弹出菜单。
在Dreamweaver中,您可以打开Fireworks弹出菜单并对所有菜单项属性(除了基于图像的弹出菜单的背景图像外)进行编辑。
若要编辑基于图像的弹出菜单中的背景图像,请选择Dreamweaver中要更新的图像,然后单击“编辑”。
有关编辑Fireworks图像的信息,请参见第313页的“从Dreamweaver编辑Fireworks图像或表”。
如果要编辑的弹出菜单是基于图像的弹出菜单,而您要保留基于图像的单元格背景,则应在Fireworks中(而不是在Dreamweaver中)编辑弹出菜单。
2.3网站系统分析
网站整体框架的设计:
网站框架的设计包括整个网站的导航栏与页面尾部信息,使用了DreamWeaver的模板功能。
设计方法:
1.确定整个网站的导航栏和页面尾部信息。
2.制作只包含这两个信息的网页
3.把这个网页另存为模板
4.以后每制作一个网页只要应用到这个模板即可
网站栏目的确定
建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确.层次清晰.如果网站结构不清晰,目录庞杂,内容东一块西一块.结果不但浏览者看得糊涂,自己扩充和维护网站也相当困难.网站的题材确定后,就开始组织和收集相关的资料内容.但如何组织内容才能吸引学生来浏览网站呢?
栏目的实质是—个网站的大纲索引,索引应该将网站的主体明确显示出来.一般的网站栏目安排要注意紧扣主题,我们要将主题按一定的方法分类并将他们作为网站的主栏目.主题栏目个数在主栏目中要占绝对优势,这样能使我们的网站显得更专业,主题突出,容易给人留下深刻印象.
网站的定位:
首先在网站建设之前要对网站进行准确的定位,作为电子信息与计算机科学系的网站,应该结合系部设置的专业体现出电子信息与计算机科学系本身的特点。
建站的目的是让网络更好地为电子系服务。
针对当前的本科和专科专业,网站要起到很好的宣传作用。
另外,网站能提供教学互动的全新的方式,实现资源的共享,包括本系工作的安排等。
2.4主页设计
网站建设的首要问题是制定网站建设规划。
要对系内师生员工和系外各界人士与普通浏览者的不同需求进行认真分析、调研,结合本系的教学、科研、管理作的职能分工确定网站主题和功能定位,并努力将电子系文化建设的思想贯穿于网站建设的各个阶段。
按照可实现的功能确定网站的主体框架,设计出层次分明的网站栏目结构,进而初步确定相应的目录结构。
要建立学院首页、单位概况、专业设置、师资队伍、教学文件、实践教学、考研在线、专升本、团总支工作、图片新闻和首页一级栏目,据此设定相应的二级栏目和三级栏目,此时要注意:
按照浏览习惯,原则上栏目层次设定不应超过三层。
目录名称应使用意义明确的英文或汉语拼音,最好与栏目层次形成对应关系,图片文件应放在专门的目录当中。
接着是确定网站域名,网站域名一般可采用英文缩写或者汉语拼音简写。
好的域名不仅要容易记忆而且便于理解,同时也能反映出网站的特色。
网站栏目结构被认为是网站优化的最基本要素,合理的网站栏目结构,无非是能正确表达网站的摹本内容及其内容之间的层次关系,站在用户的角度考虑,使得用户在网站中浏览时可以方便地获取信息,不至于迷失,做到这一点并不难,关键在于刘网站结构重要性有充分的认识。
归纳起来,合理的网站栏目结构土要表现在如下几个方面:
1通过主页可以到达任何一个一级栏目首页、二级栏口首页以及最终内容页面;
2通过任何一个网页可以返回上一级栏目页面并逐级返回主页;
3.主栏目清晰并且全站统一;
4通过任何一个网页可以进入任何一个一级栏目首页。
三、详细设计
3.1网站所实现的功能分析
在网站功能模块的分析基础之上,我们对网站作了进一步的分析。
本网站主要的功能模块有11个,其中,每一部分的介绍如下:
学院首页:
从电子信息与计算机科学系的网页链接到学院首页
单位概况:
设定一个二级目录——系简介,介绍电子信息与计算机科学系的总体概况
专业设置:
该目录下设有本科专业设置和专科专业设置,分别介绍我系各专业
师资队伍:
下设教师信息、主任寄语和首席教师三个二级目录,全面概括了我系师资力量
教学文件:
包括学科建设、科研成果和优秀课程三个二级目录,其中优秀课程——大学计算机基础又建立了系首页、首页、课程简介、课程负责人、教学文件和实践教学目录。
实践教学:
设定二级目录——系特色,介绍了展示我系风采的数学建模大赛、电子设计大赛和齐鲁软件大赛
考研在线:
该目录下有计算机应用技术专业培养方案、教学大纲和鸿雁传书三个目录,方便考研同学之间的交流
专升本:
专升本政策、教学大纲和专升本交流为专升本的同学做好铺垫
团总支工作:
学院党总支及各支部设置,介绍团总支的工作
图片新闻:
介绍我系的精彩活动及新闻
首页:
链接到电子信息与计算机科学系的网站首页
整体综合设计如图3.1所示:
首页
学院首页
图3.1
3.2系统文件部署
设计一个较大的系统时,文件部署的规范是比较重要的,这样便于维护。
文件部署如图3.2所示。
图3.2
3.3网站规划与分析
网站内容的布置
内容的布置是指网页文件的合理组织,一个好的站点应该是文件组织有序,分门别类的放置便于网站管理员今后对网站进行维护与更新。
网站外观的调整
网页外观的控制是通过CSS(层叠样式表)来实现的。
CSS,层叠样式表,“层叠”的意思,也就是说在同一个Web文档中可以有多个样式单存在,这些样式单根据所在的位置,拥有不同的悠闲级,优先级高的,就会在最后显示时采用。
从样式单插入的形式来看可以分为以下3中:
内联式样式单:
它利用现有的HTML标记,把特殊的样式加入到那些由标记控制的信息中。
嵌入式样式单:
它和Javascript一样,可以嵌入到HTML文件的头部中去(<
html>
和<
body>
标记之间),使用<
style>
/style>
容器装载,例如:
“<
p{color:
red;
font-weight:
bold}<
”,这样会对页面中所有<
p>
标记起作用。
外部式样式单:
它是一种保存在外部的样式单文件,外部文件以“css”为扩展名,例如“
<
linkrel=style=stylesheethref=”main-sheet.Css”type=”text/css”>
”。
层是被分配了绝对位置的HTML页面元素-具体地说,是div标签或任何其他标签。
层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。
“层”是dreamweaver中另处一种可以进行排版的工具。
它可以被定位在页面的任意位置,并且其中可以包含文本、图像等所有可直接插入至网页的对象。
3.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 实现
![提示](https://static.bdocx.com/images/bang_tan.gif)