书签分享收藏举报版权申诉 / 19

立即下载加入VIP,免费下载

当前位置：首页 > 自然科学 > 客户端页面设计.docx

客户端页面设计.docx

文档编号：30378666
上传时间：2023-08-14
格式：DOCX
页数：19
大小：39.03KB

客户端页面设计.docx

《客户端页面设计.docx》由会员分享，可在线阅读，更多相关《客户端页面设计.docx（19页珍藏版）》请在冰豆网上搜索。

客户端页面设计.docx

客户端页面设计

吉林工程技术师范学院

信息工程学院

《网页制作》

课程设计报告

题目：

专业：

软件工程

班级：

R1142

姓名：

学号：

1101114202

指导教师：

高岚

时间：

2013.12.02—2013.12.06

摘要

中国的网络市场存在着巨大的潜力。

在互联网越来越深入到生活中每一个角落的年代，网页的表现形式更加多样化。

网页设计师是现代社会不可或缺的职业，是未来非常有发展前景的工作。

目前互联网的形势是遍地开花各种各样的网站数不胜数。

随着网站的增多和种类的多样化，出现在大众面前的一个紧迫的问题就是如何才能浏览到好的网站。

另外，通过网页设计与制作课程的学习，我们应当知道作为一个网页设计师应具有的技术和素质。

网页设计是成功网站平台建设成败的关键内容之一。

在中国真正普及全职的网站设计员严格讲是2002年，在之前更多是由技术性人才担任此项职位，随着中国互联网环境转晴，网站的高竞争使网站策划的地位突显。

我们可以看到，许多真正处于领军性地位的网站平台90%具有一个特点——网站策划思路清晰合理，界面友好，网站营销作用强；因此专业的网站设计是未来网站成功的重要条件之一。

关键字：

网页制作加工整理编辑设计

课程设计的目的1

1、课程设计的目的1

2、应达到的实践能力标准1

设计方案的论证2

设计实现过程3

1、站点建立3

2.打开“外观”选项卡4

3使用背景图像5

4插入音频文件6

5设置链接6

调试过程及结果分析7

测试及问题探讨7

课设总结及体会8

致谢9

参考文献10

附录11

一课程设计的目的

1、课程设计的目的

针对计算机各专业岗位技能要求，进行网页设计与制作项目工作，目的在于加深对网页设计与制作的基本知识的理解，网页设计与制作技能、综合运用和提高，培养学生计算机操作的能力，提高学生网页制作和网站建设，使学生具备分析问题、用编程思维解决问题的能力。

具体设计目的如下：

（l）明确设计基本流程。

（2）熟悉网页的基本元素。

（3）掌握图像的编辑处理方法；

（4）掌握音频、视频、动画的基本编辑方法；

（5）掌握网站制作。

2、应达到的实践能力标准

（l）自定义主题、自选素材进行个人站点设计，站点页面的层次不能少于两层；

（2）根据确定的网站主题，通过各种途径收集、整理、加工网站所需要的信息；

（3）自行确定网站的LOGO、自行设计各级网页的风格、网站的整体结构,并且利用DREAMWEAVER软件制作并完成报告。

二设计方案的论证

此次网页制作的课程设计，我将要设计一个韩国电视剧的详细资料介绍，包括了电视剧的发生背景部分剧照，演职员介绍，角色介绍，以及演员的图片欣赏，还有部分演员的职业生涯介绍。

在DREAMWEAVER8的软件条件下进行网页的编辑，加工以及其他操作。

熟练地使用DREAMWEAVER中各种对网页中各类因素的调整方式以及布局排版。

通过设计达到掌握网页设计、制作的技巧。

了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshopcs3、Dreamweavercs3等软件的的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

图2.1网页的结构图

三设计实现过程

1、站点建立

打开Dreamweaver8.0选择菜单栏中的“站点”“新建站点”命令出现“站点”“自定义”窗口

2网页中的图像

图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：

一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。

正是由于这些优点，所以在进行网页设计时图像很受欢迎。

如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。

图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。

在网页中插入图像

利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。

在网页中加入图像的操作非常简单：

1.新建一个空白网页，把光标定位在网页的开始位置。

2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。

3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。

4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。

在网页中插入图像后我们就可以对图像的各种属性进行设置了。

3.2.2图像的各种属性设置

1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.

2.打开“外观”选项卡

（1）设定图像边框粗细：

在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

（2）设置图像环绕方式：

一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。

比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。

在网页中图像的环绕方式有两种：

①左环绕：

图像在左边，文本在图像的右边进行环绕。

②右环绕：

图像在右边，文本在图像的左边进行环绕。

在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。

（3）编辑图像大小：

在Dreamweavercs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。

调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。

（4）设置图像缩放比例：

网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。

设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。

设置图像缩放比例的步骤如下：

1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.

2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。

外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。

3使用背景图像

使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。

这样做可以使制作的网页更美观好看。

网页中使用背景图像的具体步骤如下：

1.新建一个空白网页。

2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.

3.开“背景”选项卡。

4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。

5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。

6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。

这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。

4插入音频文件

声音在主页中常备有座背景音乐，也可以用于制作在单价或者其他特殊情况下的特效音，另外，声音文件也能够是在线广播功能。

利用插件功能，在网页文档中插入东莞明快的背景音乐：

（1）新建一个网页文档，并将其保存为XX。

Html

（2）单机“常用”工具栏中的“媒体”按钮，在弹出的下拉菜单中选择“插件”命令。

（3）出现“选择文件”对话框以后，在其中选择文件夹下的.mp3文件，并单机“确定”按钮。

（4）这样，网页文档中就出现一个插件图标，保持这个图标处在选中状态，在“属性”面板中，将他的“款”和“高”本别设置为400和50，在网页中将自动播放背景音乐。

5设置链接

选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。

我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。

也可以使用相对URL地址，链接到相同URL地址中的文件或者其他。

四调试过程及结果分析

在DREAMWEAVER8编辑之后，通过本地网页查看，网页能基本上满足当初设计的要求，能实现图片的清晰实现，文字的完整表达，和能完全实现二级页面的显示。

在调试过程中，往往牵一发而动全身，而且操作页面的显示和网页的具体呈现有一定的差距，这就要求我们对后台页面改动的时候，不能一次就进行较大的改动，应该每次调整较小的幅度，从而给我们更明确地了解到还应该调整哪些部分。

并且二级页面的相对URL地址一定要正确。

五测试及问题探讨

1.图片不能靠右对其而且文字不能和图片环绕

在对设计的网站进行测试时，发现图片不能靠右对其而且文字不能和图片环绕，通过查找资料，在代码行中补充html代码：

style=“float=right/left”,完成了对图片靠右而且图片和文字环绕的想过。

这时候，需要注意，文字段落会随着图片的大小改变而边行，所以也应调整文字的分段处。

2.音频文件不能自动播放

设置的为.MP3格式的背景音乐文件，当打开页面是不能进行自动播放，通过查找资料，了解到，可以用作网页文档的背景音乐的声音文件格式有mid、wav、MP3等。

但是采用MP3格式时，文件容量过大，并且要在本地计算机上安装另外的专用播放器，因此考虑到计算机配置机到底的用户，设计者最好选择符合相对较少的mid声音格式。

六课设总结及体会

通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。

总体来说，整个学期的学习过程，我学会了很多知识，

在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！

做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。

本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。

需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。

总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。

致谢

通过2周的课程设计让我学到了很多的知识，也大大锻炼了我动手实践的能力。

在设计中，我遇到了很多的困难，通过老师和同学们的帮助，让问题都迎刃而解，还有许多以前没有理解的问题，也通过老师的帮助和解答变得简单。

非常感谢高老师和王老师在这次课程设计中对我的帮助，让我很好的完成了这次课设。

参考文献

[1]赵丰年，网页制作教程（第3版）[M]人民邮电出版社，2006.

[2]张强，高建华，温谦网页制作与开发教程[M]人民邮电出版社，2008.

[3]耿跃鹰，网页制作与网站开发：

从入门到精通[M]清华大学出版社，2008.

附录

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

继承者们—欲戴王冠必承其重

.STYLE3{

color:

#FFFFFF;

font-family:

"宋体";

font-size:

14px;

}

.STYLE5{

font-family:

"宋体";

font-size:

14px;

}

.STYLE9{font-size:

14px}

.STYLE12{font-size:

16px}

.STYLE13{

font-family:

"宋体";

font-weight:

bold;

font-size:

14px;

}

.STYLE14{font-size:

24px;font-weight:

bold;}

.STYLE15{

font-size:

16;

color:

#663399;

}

.STYLE17{font-size:

24px}

.STYLE18{font-family:

"宋体";font-weight:

bold;font-size:

24px;}

.STYLE19{font-size:

16px;font-weight:

bold;}

.STYLE20{color:

#009999}

.STYLE21{font-size:

16px;color:

#009999;}

.STYLE22{color:

#CC6600}

.STYLE23{font-size:

16px;color:

#CC6600;}

.STYLE24{font-size:

16px;color:

#663399;}

-->

继承者们

讲述韩国上流0.1%继承者们围绕在极其平凡、现实的贫穷继承者女主人公身边所发生的一系列甜蜜

动人、横冲直撞的罗曼史。

主演：

李敏镐、朴信惠、金宇彬。

1、剧情介绍

由金恩淑作家打造的新剧《继承者们》以上层社会富二代的爱情和友情为主，在他华丽奢华的拍摄下却一点也不浪漫和明朗，和其他总是描写青春剧的风格和出发点全不一样。

是部描绘附加土豪高中生的友情和爱情的惊心动魄的青春浪漫轻喜剧。

李敏镐将恢复英俊本性，在剧中出演一位富子弟和朴信惠所饰演

的穷继承者展开恋爱。

金宇彬则在剧中饰演一个高智商的纨绔子弟与李敏镐展开激烈的神经战，形成了浪漫的三角关系。

在剧中崔振赫将扮演李敏镐的同父异母兄长，也是韩国最高企业帝国集团年轻有为的老板，将与李敏镐展开继承权的竞争。

2、主演职员表

角色

演员

备注

金叹

李敏镐

韩国首屈一指企业帝国集团继承人就读于帝国高喜欢车恩尚

车恩尚

客户端页面设计.docx

1、剧情介绍

热门标签