客户端页面设计.docVIP

吉林工程技术师范学院 信息工程学院 —2013.12.06 摘 要 中国的网络市场存在着巨大的潜力。在互联网越来越深入到生活中每一个角落的年代，网页的表现形式更加多样化。网页设计师是现代社会不可或缺的职业，是未来非常有发展前景的工作。目前互联网的形势是遍地开花 关键字： 网页制作 加工整理 编辑 设计 目 录课程设计的目的 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中各种对网页中各类因素的调整方式以及布局排版。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。 图2.1 网页的结构图 三 设计实现过程 1、站点建立 打开Dreamweaver8.0选择菜单栏中的“站点”“新建站点”命令出现“站点”“自定义”窗口 2 网页中的图像 图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。 在网页中插入图像 利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单： 1.新建一个空白网页，把光标定位在网页的开始位置。 2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。 3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 3.2.2图像的各种属性设置 1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框. 2.打开“外观”选项卡 (1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。 (2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种： ①左环绕：图像在左边，文本在图像的右边进行环绕。 ②右环绕：图像在右边，文本在图像的左边进行环绕。 在“外观”选项卡的“布局”栏中打