客户端页面设计

1、吉林工程技术师范学院信息工程学院 网页制作课程设计报告题 目： 专 业： 软件工程 班 级： R1142 姓 名： 学 号： 1101114202 指导教师： 高岚 时 间： 2013.12.022013.12.06 摘 要中国的网络市场存在着巨大的潜力。在互联网越来越深入到生活中每一个角落的年代，网页的表现形式更加多样化。网页设计师是现代社会不可或缺的职业，是未来非常有发展前景的工作。目前互联网的形势是遍地开花各种各样的网站数不胜数。随着网站的增多和种类的多样化，出现在大众面前的一个紧迫的问题就是如何才能浏览到好的网站。另外，通过网页设计与制作课程的学习，我们应当知道作为一个网页设计师应具有

2、的技术和素质。网页设计是成功网站平台建设成败的关键内容之一。在中国真正普及全职的网站设计员严格讲是2002年，在之前更多是由技术性人才担任此项职位，随着中国互联网环境转晴，网站的高竞争使网站策划的地位突显。我们可以看到，许多真正处于领军性地位的网站平台90%具有一个特点网站策划思路清晰合理，界面友好，网站营销作用强；因此专业的网站设计是未来网站成功的重要条件之一。关键字： 网页制作 加工整理 编辑 设计目 录课程设计的目的11、课程设计的目的12、应达到的实践能力标准1设计方案的论证2设计实现过程31、站点建立32.打开“外观”选项卡43使用背景图像54 插入音频文件65设置链接6调试过程及结

3、果分析7测试及问题探讨7课设总结及体会8致谢9参考文献10附录11一 课程设计的目的1、课程设计的目的针对计算机各专业岗位技能要求，进行网页设计与制作项目工作，目的在于加深对网页设计与制作的基本知识的理解，网页设计与制作技能、综合运用和提高，培养学生计算机操作的能力，提高学生网页制作和网站建设，使学生具备分析问题、用编程思维解决问题的能力。具体设计目的如下：（l）明确设计基本流程。（2）熟悉网页的基本元素。（3）掌握图像的编辑处理方法；（4）掌握音频、视频、动画的基本编辑方法；（5）掌握网站制作。2、应达到的实践能力标准（l）自定义主题、自选素材进行个人站点设计，站点页面的层次不能少于两层；（

4、2）根据确定的网站主题，通过各种途径收集、整理、加工网站所需要的信息；（3）自行确定网站的LOGO、自行设计各级网页的风格、网站的整体结构,并且利用DREAMWEAVER软件制作并完成报告。二 设计方案的论证此次网页制作的课程设计，我将要设计一个韩国电视剧的详细资料介绍，包括了电视剧的发生背景部分剧照，演职员介绍，角色介绍，以及演员的图片欣赏，还有部分演员的职业生涯介绍。在DREAMWEAVER8的软件条件下进行网页的编辑，加工以及其他操作。熟练地使用DREAMWEAVER中各种对网页中各类因素的调整方式以及布局排版。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧

5、。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。首页剧情简介演职员表角色介绍演员图片欣赏演员经历介绍图2.1 网页的结构图三 设计实现过程1、站点建立打开Dreamweaver8.0选择菜单栏中的“站点”“新建站点”命令出现“站点”“自定义”窗口2 网页中的图像图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。

6、正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。在网页中插入图像利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“工具”菜单，选

7、择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。3.2.2图像的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以

8、定义边框值为“0”，即无边框。(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。(3)编辑图像大小：在Dreamweaver cs3中，当在网

9、页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右

10、键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。 3使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：

11、1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.3.开“背景”选项卡。4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。4 插入音频文件声音在主页中常备有

12、座背景音乐，也可以用于制作在单价或者其他特殊情况下的特效音，另外，声音文件也能够是在线广播功能。利用插件功能，在网页文档中插入东莞明快的背景音乐：（1） 新建一个网页文档，并将其保存为XX。Html（2） 单机“常用”工具栏中的“媒体”按钮，在弹出的下拉菜单中选择“插件”命令。（3） 出现“选择文件”对话框以后，在其中选择文件夹下的.mp3文件，并单机“确定”按钮。（4） 这样，网页文档中就出现一个插件图标，保持这个图标处在选中状态，在“属性”面板中，将他的“款”和“高”本别设置为400和50，在网页中将自动播放背景音乐。5设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时

13、，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。也可以使用相对URL地址，链接到相同URL地址中的文件或者其他。四 调试过程及结果分析在DREAMWEAVER8编辑之后，通过本地网页查看，网页能基本上满足当初设计的要求，能实现图片的清晰实现，文字的完整表达，和能完全实现二级页面的显示。在调试过程中，往往牵一发而动全身，而且操作页面的显示和网页的具体呈现有一定的差距，这就要求我们对后台页面改动的时候，不能一次就进行较大的改动，应该每次调整较小的幅度，从而给我们更明确地了解到还

14、应该调整哪些部分。并且二级页面的相对URL地址一定要正确。五 测试及问题探讨1.图片不能靠右对其而且文字不能和图片环绕在对设计的网站进行测试时，发现图片不能靠右对其而且文字不能和图片环绕，通过查找资料，在代码行中补充html代码：style=“float=right/left”,完成了对图片靠右而且图片和文字环绕的想过。这时候，需要注意，文字段落会随着图片的大小改变而边行，所以也应调整文字的分段处。2.音频文件不能自动播放设置的为.MP3格式的背景音乐文件，当打开页面是不能进行自动播放，通过查找资料，了解到，可以用作网页文档的背景音乐的声音文件格式有mid、wav、MP3等。但是采用MP3 格

15、式时，文件容量过大，并且要在本地计算机上安装另外的专用播放器，因此考虑到计算机配置机到底的用户，设计者最好选择符合相对较少的mid声音格式。六 课设总结及体会通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识， 在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集

16、整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。致谢通过2周的课程设计让我学到了很多的知识，也大大锻炼了我动手实践的能力。在设计中，我遇到了很多的困难，通过老师和同学们的帮助，让问题都迎刃而解，还有许多以前

17、没有理解的问题，也通过老师的帮助和解答变得简单。非常感谢高老师和王老师在这次课程设计中对我的帮助，让我很好的完成了这次课设。参考文献1赵丰年，网页制作教程(第3版) M人民邮电出版社，2006.2张强，高建华，温谦 网页制作与开发教程M人民邮电出版社，2008 .3耿跃鹰，网页制作与网站开发：从入门到精通M清华大学出版社，2008.附录继承者们欲戴王冠 必承其重继承者们讲述韩国上流0.1%继承者们围绕在极其平凡、现实的贫穷继承者女主人公身边所发生的一系列甜蜜动人、横冲直撞的罗曼史。 主演：李敏镐、朴信惠、金宇彬。1、剧情介绍 由金恩淑作家打造的新剧继承者们以上层社会富二代的爱情和友情为主，在他

18、华丽奢华的拍摄下却一点也不浪漫和明朗，和其他总是描写青春剧的风格和出发点全不一样。是部描绘附加土豪高中生的友情和爱情的惊心动魄的青春浪漫轻喜剧。李敏镐将恢复英俊本性，在剧中出演一位富子弟和朴信惠所饰演的穷继承者展开恋爱 。金宇彬则在剧中饰演一个高智商的纨绔子弟与李敏镐展开激烈的神经战，形成了浪漫的三角关系。在剧中崔振赫将扮演李敏镐的同父异母兄长，也是韩国最高企业帝国集团年轻有为的老板，将与李敏镐展开继承权的竞争。 2、主演职员表 角色 演员 备注 金叹 李敏镐 韩国首屈一指企业帝国集团继承人就读于帝国高喜欢车恩尚 车恩尚 朴信惠 女一号，贫穷的继承人，她的生活就是兼职的天堂，与尹灿荣是青梅竹马

19、 崔英道 金宇彬宙斯酒店继承人，与车恩尚、金叹形成三角关系 李宝娜 郑秀晶 女二号，MEGA娱乐公司继承人，金叹前女友，尹灿荣现女友 尹灿荣 姜敏赫 社会关爱者，父亲是帝国集团秘书长，车恩尚好朋友，李宝娜现男友 3、角色介绍 金叹/李敏镐饰 18岁，男，帝国集团继承者 英国有王族，韩国有财阀，英国有王子，韩国游财阀之子。 金叹正是财阀之子，根式一路伴随着光环。可是拥有的太多。即意味着那些本部应该有的也拥有了两个妈妈，同父异 母的哥哥，私生子的头衔，各种冰冷的视线，令人不能理解的家事。这一切摆在了金叹的面前。那个空荡荡的大房 子，从未有一刻让他有温暖家庭的归属感。于是叹变得乖张起来。用商界排名批

20、判伙伴，排名之外的人或无视或折磨。用傲慢和虚张声势武装自己，遇弱则强，遇强则更强。他的生 活没有一天风平浪静，处处惹是生非。小孩子的战争就是大人的战争，无人愿意与帝国集团为敌，叹懂得利用这一 点，并将之视为自己的影响力。然而就在他像是空的火车般乱窜时，同父异母的哥哥金元已经开辟了自己的疆土。 哥哥的履历表上填满了不同国籍的名门学府学位，恰逢爸爸卧病在床，一切就像季节交替那样自然而然，金元登上了 实质经营者的社长之位，拥有了自己势力。 直到这时，叹才了解到，真正的王子是金元，真正的王子把叹赶去美国留学。当然，这不是留学，而是流放。 在美国，叹自认幸福，没有什么事情好动气，笑容也变多，只是夜里会哭

21、泣。15到18岁一直陪在自己身边的朋友，只 有孤单。 在领悟到这点时，叹便盼望着回到韩国，但却没能有勇气，因为自己只会让哥哥变得不幸。不能回去也无法回去，而在这失去 出口的深渊中， 叹遇见了比这异国他乡还要更加陌生的恩尚。       车恩尚/朴信惠饰 18岁，女，贫穷继承者 灰姑娘的水晶鞋掉落在地上，然后和王子结婚，读到这里，七岁的车恩尚觉得，灰姑娘真是个不单纯的孩子。 坚信灰姑娘的玻璃鞋是故意的恩尚，因为不会说话的妈妈，相当早熟。从小时候就代替着妈妈处理各种大大小从缴纳税金开始熟 悉各种税金、年金、贷款，保险等相关知识。是个很会过日子的孩子。但是她在

22、人多的地方，也会因为和妈妈用手语交谈而感到 很丢脸，即时面对面还是要用简讯来对话，就这点看来她是个不折不扣的18岁少女。讨厌不会说话的妈妈，讨厌妈妈去有钱人家 做帮佣，也讨厌那些无视妈妈的人，但是真正让恩尚厌倦的，是她那卑劣的人生无论再怎么找也找不到出口的事实。 虽然看起来很坚强独立，但是在无可奈何的内心角落有着许多病痛。每到周末看着talkingbook上朋友们的日常生活, 总是在牛排馆和游戏馆进出，而自己却是白天礼场晚上便利商店，也就是所谓的打工天国。所以恩尚在其他同龄朋友梦想着要当 医生、老师、艺人的同时，自己却梦想着要当“月入200万，工作稳定的上班族“成为有钱的年轻人才能拥有野心”是

23、她主张 的。 在这过程中，恩尚接到了一通独自在美国留学的姐姐打来的电话，姐姐说自己遇到了富豪男人并且要结婚了。姐姐曾是恩尚的榜 样和骄傲。想着是人生仅有一次的机会，恩尚便以要将妈妈准备好的钱亲自转交给姐姐为借口，搭上了前往美国的飞机并带着再 也不要回来的想法。但是在美国见到的姐姐，根本别谈什么结婚，她只是个跟酒精中毒的美国人同居的服务生而已。那是个人生 榜样崩塌的瞬间。与背叛自己的姐姐大吵一架后回去的路上，无处可归的恩尚发生了令人哭笑不得的事情，而与叹相遇，并住进了叹的家。在进到叹家内玄关的那瞬间，灰姑娘第一次进到了宫殿的心情也不过如此吧？压倒性的坪数和高档的装饰，让人 到了呼吸困难的境界，而突然地闯进了一个女人，正是叹的未婚妻， 才18岁居然有未婚妻。 不知道是因为缘还是孽？ 等回到韩国，还是在转学的第一天，恩尚与叹再次重逢了。在帝国高中内无敌的继承者们之间，所能继承的就只有贫穷的恩尚，展开了不安的校园生活。    崔英道/金宇彬饰 18岁，男，宙斯酒店继承者 英道的头脑很好，IQ15