网页 设计任务书1.docx

网页 设计任务书1.docx

《网页 设计任务书1.docx》由会员分享，可在线阅读，更多相关《网页 设计任务书1.docx（18页珍藏版）》请在冰豆网上搜索。

网页设计任务书1

1、具体内容

（1）、课程设计题目：

谢霆锋主页

（2）、课程设计目的：

通过课程设计巩固所学知识，把所学知识真正应用于网页制作实践中来，系统地整合所学内容，强化操作技能，提高网页制作能力。

（3）、课程设计内容（步骤）：

（一）、网站设计总体规划

1、定位网站的主题和名称

（1）题材：

谢霆锋相关资料

（2）网站名称：

锋行天下

2、网站的风格：

新潮

3、网站的形象

（1）

（2）网站的标志：

（3）设计网站的标准色彩

网站的标准色彩是：

褐色，黄色，蓝色

（4）设计网站的标准字体

标准字体为：

宋体

（5）设计网站的宣传标语：

音乐与我同在,霆锋无法取代

4、网站信息的收集

主要收集了哪些信息：

谢霆锋的资料，图片，事迹

5、画网站的设计草图

（二）、创建本地站点

定义本地站点就是在硬盘上建立一个目录，把所有的文件放在里面，由Dreamweaver统一管理。

1、站点/管理站点

2、展开“文件”面板组/单击“管理站点”/单击“新建”按钮/站点

3、单击[完成]按钮，完成Dreamweaver站点的创建。

4、站点创建完成后，站点会显示在[文件]面板中。

5、创建站点目录结构，包括空白的文件夹和空白页面

6、为网站中所有的文件夹、文件命名。

7、创建首页文件---“index.htm”

在站点名称上右击,在弹出的快捷菜单中选择[新建文件]命令,将文件命名为“index.htm”,然后按“回车”键。

8、站点目录结构草图

9、收集图片

将收集到的图片放入根文件夹下的“images”文件夹里。

（三）、设计和制作主页

对于一个网站来说，主页至关重要，主页的好坏，可以直接影响浏览者的情绪。

主页应包括网站的页眉、标志、广告条、导航栏、友情链接、文字、图片、页脚等一些基本的部件，根据部件的重要性要合理地摆放。

1、绘制主页草图

页眉

LOGO

网站的标语（动画条）

导航条

图片

文字

图片

页脚

2、制作主页

设置网页外观属性。

字体宋体，文本颜色黑色

设置链接文本属性：

默认

设置标题属性：

默认

设置标题/编码属性：

默认

将网站的标志、网站的标准色彩、网站的宣传标语应用于主页中。

3、主页效果图:

（四）、定义CSS样式

保证网站风格的一致，如定义链接的样式、网页的背景、字体、字号、字体颜色等。

写出定义CSS样式的具体方法及步骤：

首先单击文件→新建菜单，选择基本页、HTML文件，此时Dreamweaver处于编辑状态。

单击文本菜单，选择CSS样式

选择新建，弹出“新建CSS规则”对话框

选择附加样式表，弹出链接附加样式表界面

当Dreamweaver正处于编辑HTML包含样式表的时候，我们可以利用导出功能将其导出到一个文件中以备类似的其他HTML使用。

单击“导出”按钮后，将弹出文件对话框，提示将当前页面所包含的CSS导出到文件的位置，单击“确定”按钮后，Dreamweaver将保存成.css文件

（五）制作其它页面

其它页面的设计与制作和首页的设计方法一样。

1、利用表格规划页面布局

（1）在[文件]面板中，新建一个网页。

（2）、选择主菜单的[插入]/[表格]命令，打开[表格]对话框。

（3）、在表格中插入图像和文字。

（4）、细化表格，向每个单元格中都插入一个图像或文字。

（5）、保存网页。

选择[文件]/[另存为]菜单命令，打开[另存为]对话框。

（6）利用表格布局网页的效果图：

2、以框架为主制作网页。

（1）、双击站点中的一个空白文件,打开空文档。

（2）、单击[插入]工具栏中的[布局]选项组的[框架]按钮，从打开的菜单中选择[顶部和嵌套的左侧框架]命令。

（3）、向框架中添加内容。

（4）、保存网页。

（5）、利用框架制作网页的效果图：

3、利用层制作网页。

（1）具体步骤：

略

（2）网页的效果图：

4、使用库、模板制作其它子网页

（1）具体步骤：

准备好需要的网页，点击插入记录，模版，新建模版，保存，以后制作网页只要导入模版，修改里面的内容就行了

（2）网页的效果图：

5、制作表单页面

表单主要用来得到用户的反馈信息。

（1）具体步骤：

点击插入记录，在下拉列表里找到表单，插入文本域，插入按钮，相应位置输入文字

（2）网页的效果图：

6、在网页中适当的使用行为

（1）具体步骤：

打开网页，选择行为的对象，在行为面板上点击+按钮，在下拉列表里选择打开浏览器窗口设置对话框，单机确定按钮。

在行为面板里设置事件为onmouseover，

（2）网页的效果图：

7其它网页效果图：

（多张）

（六）、创建超链接

超链接能够实现页面与页面之间的跳转，从而有机地将网站中的每个页面联系起来，是网页中至关重要的元素。

通常将鼠标移至超链接处光标会显示为手形，此时单击鼠标即可转到超链接的对应页面。

（1）创建超链接的具体操作步骤如下：

1、在编辑页面中选择需要制作链接的文字，在[属性]面板中单击[浏览文件]按钮，选择需要链接的文件，单击[确定]按钮。

2、在[目标]下拉列表框中选择[-blank]一项，完成链接的制作，继续为其它文字制作链接。

（2）具体效果图：

（七）、课程设计总结（体会）:

网页制作”课程心得体会

现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。

这学期选择的这门课程让我学到了不少关于计算机和网络的知识。

老师把课程内容安排的很合理，讲的大都是很基础的知识，这对于像我这样对网络了解不多的学生来说很容易理解，接受。

在这门课上我学习到了一些关于建设网站和制作网页的知识，对flash也有所了解。

课上我还学到了一些基础的网络技术，用制作网络的工具做网页等。

通过对这门课的学习，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。

尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。

在具体的制作一个网页时我了解到一个优秀的网页设计应该具备以下一些基本原则

1 确定网页设计的内容

一个优秀的风站要有一个明确的主题,整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么，所有页面都是围绕着这个内容来制作，有了明确的内容对排名有很重要的作用。

2 了解你网站所在行业的客户

用户是一个网站成败的关键,如果用户要花很多时间进入你网站很有可能用户会立即关掉你网站,或者你网站操作很不方便用户也会马上离开,这种网站是很失败的设计,只会让用户失望的离去.

3、做一个典型用户

不以用户身份亲身体验网站你才能发现问题，才知道那些需要改进，尽量不要让客户去发现问题，在前期设计时就应该把这些问题解决。

4 优化内容 

内容是整个网站的核心。

在网站设计之前必须明确网站的内容安排。

优秀网页设计是要建立在平凡的基础上的。

然后在具体的规划一个网站时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站 （有很多页面） 的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很浪费时间和财力。

大纲列出来后，还必须考虑每个页面之间的链接关系。

是星形，树形，或是网形链接。

这也是判别一个网站优劣的重要标志。

链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。

框架定下来了，然后开始一步一步有条理，有次序地做来，就胸有成竹得多，也会为主页将来发展打下良好的基础。

下一步，就以动手制作具体内容了，题材选定，框架选定，接下来就开始往主页里面填内容。

我们称作资料收集 文章来自：

[&论文网%在线*]

如果是个人主页，有能力的人完全可以靠自己来创作所有的内容。

大部分人的方法是：

从报纸，杂志，光盘等媒体中把相关的资料收集整理，再加上一定的编辑后就可以了。

另外一个好的方法是从网络上收集，您只要到搜索引擎上查找相应的关键字，就可以找到一大堆的资料。

在准备材料的时候我们可以用到学习的Flash知识来制作一些小的动画和动态图片，Flash 提供了功能齐全的绘图和编辑图形工具。

可以直接在编辑区里绘画，编辑修改非常灵活，它的另一大特点是“交互性”强。

在动画播放时，可以用鼠标或键盘对动画的播放进行控制，效果可以很直观的反映出来。

然后是开始正式制作主页。

通过Dreamweaver作为制作软件，只需要用到软件中的一些基本的功能：

图片插入和对齐设置；文字的格式、颜色、背景颜色的设置等就可以制作出一个简单的网页。

通过个人网页的制作最终把自己的网页上传到互联网上，那种成就感是无法用语言形容的。

在今后的闲余时间，我将会学习制作网页的更多知识，使它成为自己的一项技能。