99网

全部频道

您的当前位置：首页网页设计阶段报告

网页设计阶段报告

来源：99网
天津电子信息职业技术学院

网页制作A阶段作业一

姓学系专班名：号：别：潘振华03网络技术业：计算机网络技术级：网络S14-3邵慧娟指导教师：完成时间：2015年5月15日1.设计题目

个人网站

2.设计目的

（1）进一步熟练掌握软件DreamweaverCS5，更一步提升网页的熟练设计；（2）由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。3.设计思路

通过参阅资料和近半学期自己对网页知识的学习，最后决定做一个关于90后追求个性和自由的个人网站.一个展示自己的平台,给大家带来乐的平台,它包括一个主页和若干分页，主页内要有导航栏目，每一个导航栏目都要有相应的链接，每一个链接的页面都要有不同的内容显示，用尽可能多的网页元素规划网页,并且具有文字、图像、声音等。

主页以展现个性为主，同时要不失美观典雅，而且要符合设计题目的要求，不是为了单纯的网页课程设计，而且要通过本次的练习使自己学到更多的东西，使自己在这方面也有所提高，就构成了现在的设计思路。4.设计模块

个人网站主页日志相册音乐说说留言板个人档联系我们更多5.设计过程5.1查阅相关资料

查阅网页制作三剑客（AdobeDreamweaverCS5的IFRAME布局、AdobeFirworksCS5、AdobeFlashCS5），流光字作等资料，决定做一个关于90后追求个性和自由的主页、其他分页为辅的个人网站。5.2相关的素材的收集与整理

通过上网和查阅书籍收集素材，主要包括音乐、图片、文字等。5.3框架和定义

-1-首先，我的思路是在同一个页面跳转部分内容，当时在课堂学习的框架布局知识，不能实现我想要的设计。然后我就在网上查阅相关资料，查到iframe框架布局可以实现。我就自学了iframe框架布局。

iframe就是我们常用的iframe标签：。以结尾，将需要的文本内容添加到两个标签之间即可。6.制作步骤6.1准备工作

在C盘或其他盘新建一个文件夹，作为站点文件夹。输入你想要的站点名称，这里输入mywebsite。在此文件夹中新建一个图像文件夹images、分页文件夹feils、音乐文件夹music、样式文件夹styles、文本文件夹text，并将所需素材复制到其中。6.2建立本地站点

打开AdobeDreamweaverCS5站点菜单下的管理站点，在打开的管理站点框中点击新建站点。在站点设置对象窗口选择“站点”选项卡，然后在站点名称里输入mywebsite，“本地站点文件夹”选择你站点的根目录,然后点击“确定”。6.3编辑网页首页

图1.首页部分效果预览-2-(1)新建一张网页，在Dreamweaver【窗口】|【插入】，调出【插入】面板，在”常用”下拉菜单选择“布局”，再点击“插入DIV标签”。在出现的对话框中，“类”的输入框中，输入head，点击“新建CSS样式规则”。在出现的“新建CSS规则”对话框中，选择器类型为“类”，名称为“.head”，规则定义为“新建样式表文件”，然后点击确定。弹出“将样式表另存为”对话框，选择站点下styles文件夹，文件名起名为“index.css”,然后确定。

在弹出的“Css规则定义”窗口中，分类列表选择“背景”设置背景图像，选择站点根目录下index文件夹中名为head.jpg图片素材，背景重复选择不重复，附加选择固定，水平位置选择居中，垂直位置选择顶端（这样设置是为了将图片居中）。“方框”中，设置宽为1920px，高为372px（设置大小），边界的“上”为0，右为“auto”，下为“0”，左为“auto”（这样设置是将DIV框居中于屏幕）。确定后，将Div框中“此处显示class\"head\"的内容”一行删除。

图2.headCSS规则设置（2）切换到“拆分”编辑下，代码之前，在最后一个

后面按一下回车，输入
，将光标定位在后面,点击Dreamweaver右侧CSS样式面板中的“新建CSS样式规则”，出现选择器名称为.nav的css规则对话框，点击确定。弹出“.nav规则定义”窗口，在分类列表选择“背景”，设置背景颜色为黑色。“方框”中，设置宽为980px，高为50px，浮动为左，边界的“上”为323，右为“auto”，下为“0”，左为“auto”单击确定。

（3）将Div框中“此处显示class\".nav\"的内容”一行删除，在【插入】面板的下拉菜单选择“文本”，下拉找到项目列表，单击项目列表。此时DIV框里已经插入一个圆点，在圆点后面输入文字“首页[回车]日志[回车]相册[回车]说说[回车]音乐盒[回车]个人档[回车]留言板[回车]联系我们[回车]更多”，

-3-（[回车]在每个词后面都要按一下回车。）全选所有字，点击【CSS样式】面板的“新建Css规则”，弹出选择器名称为.navulli的CSS规则对话框，单击确定。在弹出的“规则定义”窗口，选择“类型”，设置颜色为白色（颜色代码为＃FFF）；选择＂区块＂，设置文本对齐为居中，显示为列表项；选择“方框”，设置宽为100px，高为35px，浮动为left，填充的上为20px，选择“列表”，设置列表样式为无，项目符号图像为无，点击确定。再次单击【Css样式】面板的“新建CSS样式规则”，弹出选择器名称为.navulli的CSS规则对话框，在.navulli的后面加上:hover,点击确定。在弹出的“规则定义”窗口，选择“背景”，设置背景颜色为黄色（颜色代码为#0F0），点击确定。

（4）选中字体“首页”，单击【Css样式】面板的“新建CSS样式规则”，弹出选择器名称为.navullia的CSS规则对话框，点击确定。弹出的“规则定义”窗口，选择“类型”，设置文本修饰为无。再次单击【Css样式】面板的“新建CSS样式规则”，弹出选择器名称为.navullia的CSS规则对话框，在.navullia的后面加上:hover,点击确定。弹出的“规则定义”窗口,选择“类型”，设置粗细为粗体，颜色为黑色（颜色代码为#000），点击确定。如图3：

图3.Css编辑后预览（5）切换到“拆分”编辑下，代码之前，在最后一个

后面按一下回车，输入，将光标定位在后面点击Dreamweaver右侧CSS样式面板中的“新建CSS样式规则”，出现选择器名称为.index的css规则对话框，点击确定。弹出“.index规则定义”窗口，

-4-在分类列表选择“背景”设置背景颜色为白色（颜色代码为#FFF）;选择“方框”，设置宽为980px，高1288px(高自己随意设置)，边界的“上”为24，右为“auto”，下为“0”，左为“auto”，点击确定。切换到“拆分”编辑下，将光标定位在与之间，点击插入菜单选择HTML—框架下的Iframe,此时代码里插入了。之后我们要把代码补充完整（宽和高要和.indexDIV的大小一致）。代码如下：

name=\"main\"

scrolling=\"no\"

frameborder=\"0\"

marginheight=\"auto\"

src=\"feils/main.html\">

此时，网页中就出现了一个灰色的框。

（6）切换到“拆分”编辑下在最后一个后面回车，输入,将光标定位在后面点击Dreamweaver右侧CSS样式面板中的“新建CSS样式规则”，出现选择器名称为.feet的css规则对话框，点击确定。弹出“.feet规则定义”窗口，在分类列表选择“类型”设置字体颜色为白色，选择“背景”设置背景颜色为黑色，选择“区块”设置文本对齐为居中，选择“方框”设置宽为980px，高为100px，边界的“上”为0，右为“auto”，下为“0”，左为“auto”，点击确定。在DIV框中输入Copyright©2000-2015Panzhenhua.AllRightsReserved.潘振华工作室版权所有如图4：

图4.CSS编辑后预览-5-（7）切换到“拆分”编辑下，将光标定位在之后，输入输入,将光标定位在后面点击Dreamweaver右侧CSS样式面板中的“新建CSS样式规则”，出现选择器名称为.zdgg的css规则对话框，点击确定。弹出“.zdgg规则定义”窗口，选择“方框”设置宽为980px，高为20px，点击确定。再将光标定位在之后，插入代码：scrollAmount=3

width=1024

onmouseover=stop()

onmouseout=start()>,将光标定位在前面，在Dreamweaver【插入】|【时间】，这是有星期，有时间，勾选存储更新，点击确定。将光标定位在时间的代码的最后，输入文字“公告：从即日起，网站开始建立，之后会不定期更新内容，来到本站的访客，有几率得红包哦！”

（8）设置背景音乐。在Dreamweaver右侧【插入】面板，常用下拉菜单选择“布局”，点击绘制APDIv，在CSS样式面板，选中＃apDiv1,编辑Css样式规则，选择“类型”设置字体大小为10px，字体颜色为黑色；选择“背景”设置背景颜色代码为#FC9；选择“方框”设置宽为76px高为14px；选择“定位”设置位置为绝对，Z-轴为1，置入位置上为301px，左为939px，点击确定。在APDiv框输入关闭背景音乐，切换到拆分编辑下，在“关”字，前面插入如下代码：

classid=\"clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6\"

width=\"10\"height=\"10\"align=\"absmiddle\">

align=\"absmiddle\"type=\"application/x-mplayer2\">

（9）设置背景。在Dreamweaver【修改】|【页面属性】，设置背景图像为根目录下的index.jpg，单击确定。按F12预览一下，发现左和上有空隙，在回到【页面属性】设置上、下、左、右、边距全为0，点击确定。保存网页，名为index.html。

-6-6.4编辑iframe框架内容

(1)新建一张网页，在Dreamweaver【窗口】|【插入】，调出【插入】面板，在”常用”下拉菜单选择“布局”，再点击“插入DIV标签”。在出现的对话框中，“类”的输入框中，输入main，点击“新建CSS样式规则”。在出现的“新建CSS规则”对话框中，选择器类型为“类”，名称为“.main”，规则定义为“新建样式表文件”，然后点击确定。弹出“将样式表另存为”对话框，选择站点下styles文件夹，文件名起名为“main.css”,然后确定。在弹出的“Css规则定义”窗口中，分类列表选择“方框”设置宽为980px，高为1288px（要和首页的IFRAME框架大小一致），点击确定。插入根目录下的main.gif.如图5：

图5.IFRAME框架内容预览(2)最开头的图片用了鼠标经过图像，在Dreamweaver的【插入】下选择“图像对象—鼠标经过图像”设置原始图像为根目录下的11.gif，鼠标经过图像为根目录下的2.gif，点击确定。

(3)下面的流光字体是用PS软件制作而成的。打开PS软件新建一个宽为567像素，高为255像素，背景为透明的画布，在透明图层之上新建一个图层，再单击文字工具，在画布上输入图5上面那段文字。在文字图层之上新建一个图层，用渐变工具的七彩色在画布的左上角拉一道。在PS的菜单栏【窗口】|【动画】，调出【动画】面板，按住ALT键在文字图层和有渐变效果的图层之间点击左键，让渐变效果的图层成遮罩。此时，在【动画】面板上点击复制选择的帧，再点击渐变效果的图层，在画布上从左上角移动到右下角，再点击【动画】面板上的动

-7-画帧过渡，在弹出的对话框修改要添加的帧为21，点击确定。再将全部的帧选中，0.0改为0.1，一次改为永远。如图6：

图6.流光字体编辑预览（4）滚动字体。是利用代码设置的，外边是由APDiv控制，代码如下：

·重要的不是你从哪来，而是你能去哪里。

·重要的不是你毕业于什么大学，而是毕业后你能过什么样的生活。

·重要的不是你认识哪些大人物，而是那些人谁会认识你。

·重要的不是你现在多优秀，而是你还能优秀多久。

·重要的不是有多少人爱你，而是你和谁在一起最快乐。

--朋友是什么？是受伤时最想见的人，是打扰了不用说对不起的人，是帮助了

不用说谢谢的人，是步步高升也不用改称呼的人，是无论天涯海角都彼此牵挂的人。

（5）最后两张图，也使用了相同的方法，鼠标经过图像。友情链接：也是用PS制作的流光字体，和上面的方法一样。6.5、保存网页并预览

选择【文件】|【保存】命令，将此网页保存在站点中。按F12键在浏览器中预

-8-览，观察效果与样图是否一致。如图7：

图7.效果预览7.设计体会

在设计的过程，我了解了许多关于网站的知识，首先在设计之前需有方案，有整体的布局，流程分析，也懂得相关专业网站设计步骤。同时了解到自己在网页设计方面知识欠缺，许多知识点都还没有熟练运用，今后一定要在网页设计上多花点功夫，争取有进一步的提高，同时也很感谢老师的教导与支持。

-9-

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文