基于Dreamweaver的高职教育网站设计.docx

基于Dreamweaver的高职教育网站设计.docx

《基于Dreamweaver的高职教育网站设计.docx》由会员分享，可在线阅读，更多相关《基于Dreamweaver的高职教育网站设计.docx（15页珍藏版）》请在冰豆网上搜索。

基于Dreamweaver的高职教育网站设计

基于Dreamweaver的高职教育网站设计

第一章Dreamweaver8简要概述

1.1熟悉Dreamweaver8的操作环境

首先是安装Dreamweaver8.在我们安装完成Dreamweaver8并且进入到它之后，我们看到的是它的起始页。

可以看到，在Dreamweaver8的起始页面我们可以创建新页面或者是打开我们近期制作过的或者是使用过的网页。

在我们点击起始页面的“创建新项目”一列中的HTML之后，我们将会看到从左到右、从上到下依次为：

标题栏、菜单栏、“插入”栏、文档工具栏、文档窗口、状态栏和属性面板，而右侧是面板组。

Dreamweaver8中，最重要的并且是使用最多的要数超链接了。

超链接是网站的灵魂，并且是网站中最重要的组成部分，它的功能是指向人们将要访问的目标文档或是网页的其他元素，从而可以使我们从当前页面跳转到另外一个页面，或者在当前页面执行某项操作。

在超链接之前，必须明确的一点是，无论是使用图像、动画，还是设置链接，如果目标文件位于站点内，都涉及到路径的使用。

在网页中，我们只能使用相对路径，即不包含站点根目录名称的的路径。

学习超链接需要解决3个问题，一是可以将哪些网页元素设置成超链接，二是如何设置超链接，三是可以设置哪些类型的超链接。

至于如何设置网页在何处打开，共有四个选项，其作用分别是：

*-blank表示的是在新窗口中打开链接目标。

*-parent表示的是在当前窗口的父窗口中打开链接目标（针对框架网页，指的是当前框架的框架集）。

*-self表示的是在当前窗口中打开链接目标，这是软件的默认选项。

*-top表示的是在当前整个窗口的顶层窗口打开链接目标（针对框架网页，表示的是指当前框架的顶层框架）。

1.2网站规划与管理

创建网站的第一步也是比较重要的一步是创建站点。

如果想要建立一个完整的网站，就必须要我们事先规划好整个网站的结构，然后再根据结构图设置网站栏目相关文件的存放目录并准备相应的素材和文件。

第一点：

根据要求确定网站内容。

第二点：

规划网站栏目。

第三点：

确定网页尺寸与版面布局。

第四点：

确定网站配色与风格。

第五点：

收集网页所用素材。

第六点：

利用软件制作网页。

第七点：

测试和发布网站。

下图是本论文网站的结构图，该图形象、直观地显示了整个网站的结构与分支。

网站结构图

通常情况下，一个网站的结构往往与该网站的导航菜单相对应。

拥有清晰的结构、完整的内容的网站结构，不但有利于设计和管理，而且还能提高浏览者的访问效率，使浏览者更容易更快速地找到所需要的信息。

同时，只有在我们创建了站点之后，我们做起网站来才更加有章可循，更加顺手。

我们在后期管理我们的网站时，文件的上传于取回也是非常的重要。

利用Dreamweaver8的新功能，我们可以在获取或者是上传文件期间执行其他与服务器不相干的活动，例如新建文件或是编辑文件等。

无论是从本地站点上传文件到远程服务器，还是从远程服务器上取回文件，都应首先建立本地站点和远程服务器之间的连接。

为此，可单击“站点”面板工具栏上的“连接到远程主机“按钮来连接本地站点与远程服务器。

如果与服务器的连接成功，该按钮左侧的绿灯会被点亮。

再次单击该按钮，则将断开与服务器的连接。

1.3div+CSS层叠技术

字体属性

字体属性主要包括：

字体族科、字体大小、字体样式和字体加粗。

文本属性

CSS文本属性主要包括字符间距、文字修饰、文本排列、文本缩进、行高等。

颜色和背景属性

CSS的颜色属性可以为元素指定一个颜色，背景属性可以控制元素的背景。

边框属性

边框属性用于设置元素边框的宽度、样式和颜色。

利用边框属性只能设置一组边框的宽度和样式。

为了给出一个元素4种边框的不同值，必须利用一个或更多的属性，如上边框、下边框、左边框、右边框、边框颜色和边框宽度等。

鼠标光标属性

网页中默认的鼠标指针只有两种，一个是最普通的箭头，另一个是指向链接时出现的“小手”。

使用CSS鼠标指针技术，当鼠标指向链接时，可以看到多种不同的效果。

CSS可以通过鼠标光标属性实现通过样式改变鼠标形状，鼠标放置于被此项设置修改的区域上时，形状会发生改变。

定位属性

定位技术是CSS的一个应用很广的知识点。

通过该技术不仅可以控制元素的颜色、边框等属性，还可以控制元素的平面或空间位置以及可见性。

CSS提供了两种定位方法，相对定位与绝对定位。

所谓相对定位是指让某元素在相对其他元素的位置上进行偏移。

而绝对定位是指让元素参照原始文件进行偏移。

区块属性

在格式化页面对象时，CSS将所有对象都放置在一个容器里面，这个容器成为区块。

列表属性

CSS中有关列表的设置极大地丰富了列表的外观。

第二章Dreamweaver8的发展前景

2.1网页三剑客

网页三剑客究竟指的是哪三剑客呢？

顾名思义，它是网页编辑工具，并且是非常强大的网页编辑工具，分别是：

Dreamweaver、fireworks、Flash。

其中使用最多的当然要数Dreamweaver。

上面我们已经介绍了Dreamweaver，下面我们分别对fireworks和Flash做简要介绍。

Flash是网页三剑客之一。

该软件主要用于制作矢量动画，如广告、网站片头动画、动画短片、MTV等等。

此外，利用该软件还可以制作交互性很强的游戏、网页、课件等等。

AdobeFireworks网页制作软件三剑客之一。

该软件主要用于制作网页图像、标志、GIF动画、图像按钮和导航栏等等。

现在我们也有必要讨论一下Photoshop软件。

该软件是Adobe公司出品的一个优秀而且具有强大功能的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求。

Dreamweaver8的发展前景

Dreamweaver是现在使用最多的网页编辑工具，它支持DHTML动态网页、Flash动画、插件，能实现很多FrontPage无法实现的功能，如动态按钮、下拉菜单等。

另外，它还可以用来作为动态网站的开发环境。

并且目前大部分网页都是利用HTML语言编写的。

因此，如果用户希望成为网页设计高手，最好系统学习一下该语言。

第三章网站系统分析与设计

3.1网站设计的思想

本网站的题目是高职教育网。

身为大学生的我们，面对教育这个话题，相信并不陌生。

现如今的教育存在着很多的不足，有老师的原因，也有学生的原因。

本论文从资格证书、教学案例等多个方面论述了高职教育的许多方面。

我觉得大学生在所有人群众中属于经常接触网络比较多的人群。

基于这个出发点，我设计了这个高职教育网网站，我觉得应该会引起大家比较大的兴趣。

首先，一个成功的网站不是说你的网页有多漂亮，内容有多少，关键的一点是要能说明问题。

大家感兴趣的是这个话题，而不是其他的内容，网站名起好了，激发了大家的兴趣，从而大家有目的的去访问你的网站，网站的访问量自然增加，网站的访问量越大，就说明你的网站制作的越成功。

3.2网站功能分析

打开网站的首页。

首先看到的是网站的大标题：

高职教育网。

此logo是用Photoshop制作的图片，然后使用灵活的超链接来制作的。

看到标题大家就会找到自己想要的：

恩，教育网站，这正是我要找的。

接下来会看到导航栏。

导航栏里的导航内容划分有层次，根据浏览者个人的需要和不同，大家可以用鼠标单击导航进入，相信里面的精彩内容也会是大家所希望看到的内容。

本网站的最强大功能就是就是使用户不仅可以找到自己需要的教育方面的内容，还可以动态的看到最新新闻。

第四章高职教育网网站的制作成果

4.1主页制作成果

主页也叫首页，每一个网站都有自己的主页，主页是浏览者登陆网站时首先看见的第一个网页，它是网站的入口。

通过主页，浏览者可以很快的了解到网站的性质和主要内容。

本网站的主页共分为四大块，分别为：

第一部分，网站logo。

网页标题是网站的指路灯，浏览者要在网页间跳转，要了解网站的组织结构，网站的内容，都必须通过导航或者页面中的一些小标题。

本网站首页标题非常醒目的五个大字，高职教育网，一目了然的告诉给浏览者我们的网站主题是高职教育。

没有复杂的图片背景，没有花哨的制作，但是却有非常简明清晰的主旨。

一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮、花哨。

一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不至于单调、乏味。

所以，确定网站的主题色是设计者必须考虑的问题之一。

下图就是本网站的大标题，logo。

第二部分，导航栏。

本网站的导航栏共分为八个部分，它们分别是网站首页、新闻资讯、职业素养、教学大纲、教学案例、教学改革、教学课件、资格证书。

新闻资讯对应下的目录主要是最新新闻，通过单击新闻资讯导航栏浏览者会跳转到凤凰新闻网，洞悉天下最新消息。

单击职业素养导航栏，浏览者会了解到作为一名合格的教师应该具备哪些素质，并且从自身出发，以身作则，检查自己是否符合以上标准。

教学大纲则是高职教育教科书所对应的大纲，可以帮助老师讲课的时候更加得心应手，同时也可以帮助学生把握侧重点，在整合复习时更加轻松。

教学案例是本人从网上搜集到的几位名师的教学案例。

通过教学案例，我么可以听到名师们的精彩课程，同时可以学习名师的讲课方法，为我们以后的教师生涯打下一个良好的基础。

教学改革、教学课件和资格证书则是我们大家都比较了解的，在此我就不一一介绍了。

第三部分，图片新闻。

这一部分的创建则主要是使用CSS层叠样式技术来制作的。

就保存位置而言，CSS样式表有内外之分，即CSS样式既可以保存在网页中，又可以保存在单独的样式表文件中。

如果按性质划分，CSS样式可分为类样式、标签样式和高级样式。

这些样式的创建方法基本相同，但使用方法有所区别。

第四部分，滚动新闻。

这部分则是利用div技术，

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

基于 Dreamweaver 高职 教育 网站 设计

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。