毕业论文设计后台主页面.docx

《毕业论文设计后台主页面.docx》由会员分享，可在线阅读，更多相关《毕业论文设计后台主页面.docx（8页珍藏版）》请在三一办公上搜索。

1、毕业论文 设计后台主页面毕业论文 设计后台主页面 对于经常需要更新的网站来说，建立后台管理系统可以方便管理员添加、管理和删除网站中的内容，包括文章、图片、视频和评论等。网站后台通常是由框架结构组成，通过单击左侧的导航菜单，可以在其右侧显示相应的管理页面。网站后台主页面如图5-70所示。 图5-70 网站后台主页面 1 设计思路 1网站后台页面分析 网站的前台页面是提供给访问者浏览的，而后台页面是专门提供给管理者的，在没有到得授权的情况下，任何访问者都是无法浏览的。因此可以这样理解，后台页面的设计、色彩和功能并不会影响访问者浏览和阅读网站页面。 从另一个角度来说，管理者也是一种“特殊”的访问者，

2、也会受到后台页面设计和色彩的影响。为了提高管理者的工作效率，整齐的版式布局、舒适的页面设计、合理的色彩搭配也是同等重要的。 在设计网站后台时，由于其相对于独立，因此页面的风格可以与前台页面相搭配，也可以具有自己独特的风格，这个比较灵活，但通常都设计得较为规整简单，只要管理者方便操作、感觉舒适即可，如图5-71所示。 图5-71 后台页面风格 网站后台页面通常只使用一种或两种颜色，但是会充分利用颜色的不同深浅度，来搭配页面中的元素，如页面背景、按钮、标题栏、文字等，这样做可以使页面看起来并不杂乱，如图5-72所示。 图5-72 后台页面的色彩搭配 就目前的网站管理后台来说，其结构大多数划分为上左

3、右三部分：上面为一个通栏，用于显示网站的基本信息和快捷功能按钮；左侧通常较窄，用于显示后台管理的导航菜单；而右侧则显示管理页面。后台页面结构如图5-73所示。 图5-73 后台主页面的结构 2本实例分析 本实例的后台页面采用了当前流行的Web 2.0风格，从页面中的多个元素都可以发现这一点，如Logo图像、标题背景图像以及采用渐变色的按钮等。后台页面以蓝色为主色调，并搭配了不同深浅的蓝色，使整个页面看起来比较舒服，如图5-74所示。 Logo图像 标题背景 渐变背景 图5-74 页面风格 后台主页面通过框架将其划分为上左右三部分，上面包括页面的logo图像、管理员登录信息和切换界面风格的按钮；

4、左侧为后台管理的导航菜单，总共分为一级和二级两个等级菜单，并应用了不同的文字样式；右侧显示为文章的管理页面，如图5-75所示。 图5-75 后台主页面结构 2 设计过程 在文档中首先插入一个上左右结构的框架集，然后根据页面的尺寸来设置各个框架的大小，最后为各个框架链接默认的页面即可。 新建文档，将光标置于文档中，在面板中切换至选项卡。然后，单击按钮插入一个框架集，如图5-76所示。 框架集 切换 单击 图5-76 插入框架集 插入框架集后，按Ctrl+S组合键将该页面在保存为index.html。 单击文档中的横向框架边框，在面板中设置为“74像素”，如图5-77所示。 单击 设置 图5-77

5、 设置框架的高 执行|命令，打开面板。然后，单击面板中的topFrame区域选择该框架，如图5-78所示。 选择 单击 图5-78 选择框架 打开面板，单击文本框右侧的按钮，在弹出的对话框中选择素材网页“top.html”，即可在topFrame框架中显示该页面，如图5-79所示。 top.html 选择 图5-79 选择页面 在文档中单击纵向框架边框，在面板中设置为“240像素”，如图5-80所示。 单击 设置 图5-80 设置框架的宽 设置框架集的为“240像素”，即表示设置左侧框架的宽度为“240 像素”。 在面板中单击leftFrame区域，在面板中选择为“left.html”，如图5

6、-81所示。 单击 选择 图5-81 选择左侧页面 单击面板中的mainFrame区域，在面板中选择为“main.html”，如图5-82所示。 main.html 选择 图5-77 选择主页面 3 知识点总结 框架和框架集 一个框架结构由两部分网页文件构成，即框架和框架集。框架是浏览器窗口中的一个区域，它可以显示显示与浏览器窗口中其他区域内容无关的XHTML文档。框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置以及默认在每个框架中显示的页面的URL。 1创建预定义框架集 选择预定义的框架集能够为页面布局创建所需的框架和框架集，它是迅速创建框架布局页面的最简单方法。

7、 在Dreamweaver中，执行|命令，在弹出的对话框中单击选项卡，在列表中选择选项，然后在列表中选择一种布局框架即可创建，如图5-78所示。 选择 单击 预定义框架集 图5-78 创建预定义框架页 除了可以直接创建基于框架布局的文档外，还可以在现有的文档中插入预定义框架集。将光标置于文档中的任意位置，单击面板中按钮右侧的小三角形图标所示。 顶部和嵌套的左侧框架 ，在弹出的菜单中即可创建所需的预定义框架集。例如创建顶部和嵌套的左侧框架，如图5-79单击 选择 图5-79 创建框架 2设置框架属性 在面板中单击某一个框架的区域，即可在面板中查看和设置该框架的属性，包括是否显示框架的边框和滚动条

8、、是否可以调整大小、定义边框的颜色以及边界的高度和宽度等，如图5-80所示。 框架属性 图5-80 框架属性 在框架面板中，各个选项的名称及说明如表5-1所示。 表5-1 框架面板中的各个选项 选项名称 框架名称 说明 链接的target属性或脚本在引用框架时所使用的名称。框架名称必须是一个以字母开头的单词，允许使用下划线(_)，但不允许使用连字符(-)，句点(.)和空格。框架名称区分大小写。 源文件 指定在中显示的源文件。可以直接输入源文件的路径或单击文件夹图标浏览并选择一个文件。 滚动 指定在框架中是否显示滚动条。将该选项设置为“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。大

9、多数浏览器默认为“自动”，表示只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才显示滚动条。 不能调整大小 边框 启用该复选框，可以防止用户通过拖动框架边框在浏览器中调整框架大小。 指定在浏览框架时显示或隐藏当前框架的边框。大多数浏览器默认为显示边框，除非父框架集已将选项设置为“否”。为框架选择选项将覆盖框架集的边框设置。 边框颜色 指定所有框架边框的颜色。该颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。 边界宽度 边界高度 以像素为单位设置左边距和右边距的宽度(框架边框与内容之间的距离) 以像素为单位设置上边距和下边距的高度(框架边框与内容之间的距离) 3框架集属性

10、使用面板可以查看和设置框架集的属性，如框架集标题、边框和框架大小等。在文档中选择整个框架集后，面板将会显示该框架集的各个选项，如图5-81所示。 选择框架集 框架集属性 图5-81 框架集属性 在框架集面板中，各个选项的名称及说明如表5-2所示。 表5-2 框架集面板的各个选项 选项名称 边框 边框宽度 边框颜色 行列选定范围 行/列 像素 设置行高或者列宽，单位可以选择像素、百分比和相对 将选择的列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架来说，该选项是最佳选择 百分比 相对 指定选择列或行就为相当于其框架集的总宽度或总高度的一个百分比。 指定在为像素和百分比框架分配空间后，为选择列或行分配其余可用空间。剩余空间在大小设置为“相对”的框架之间按比例划分。 说明 指定在浏览器中查看文档时是否显示框架周围的边框 指定框架集中所有边框的宽度。数字0表示无边框 设置边框的颜色。使用选择一种颜色，或者输入颜色的十六进制值 单击区域中的选项卡，可以选择文档中相应的框架