网页设计与制作的课程设计

《网页设计与制作的课程设计》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、信息学院课程设计题目：网页设计与制作姓名：学号：班级：课程：网页设计与制作任课教师：2012年7月课程设计任务书及成绩评定题目网页设计与制作课程设计的任务及要求1•完成个人网页的制作。2.熟悉相关的网页制作软件Dl&mweavercs4等。3.学会基本的Html文件编辑4.学会使用表格5.学会创建连接和站点结构课程设计所需的软件、硬件等Dleanweavercs4等相关软件课程设计进度计划2012年6月。了解相关课程设计，清楚设计题目与设计方向，准备动物网页的相关材料。2012年7月。制作关丁动物的相关网站。2012年7

2、月。总结之前所做网站，记录编写过程及结果、捉交设计。1•设计目的22.设计思想23.网页详细设计分析34.建立站点56.设计成果展示6117•心得体会课程设计1・课程设计目的一、设计目的本课程的设计目的是通过实践经历Dieanweavercs4^发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dieanweavercs4可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据

3、题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。二、熟练掌握Photoshopcs4Dreamweavercs4等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我木次主耍是设计的以动物”为主题的网页，针对本人的一些情况做了介绍。2.设计思想设计思想利用Dreamweavercs4制作一个关于网站，利用表格、行为、层和链接等网页设计技术设计页面。分步骤完成相关操作。1.基本Htn反件的编辑2.文本格式的设置3.创建链接和建立站点结构4•使用表格5•利用css制作网页

4、3.网页详细的设计网页详细设计分析3.1建立站点（1）打开站点管理-新建-站点-输入名称“动物”-下一步（刀单击“下一步”（、选好存储位置〜单击“下一步”（切选好服务器文件夹一单击“下一步”（、单击“下一步”（$单击“完成”。3.2建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dieamweavercs4是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。L点击“ALT+F6键，进入布局模式，插入布局表

5、格。建立一个大概的布局。2使用背景图片：选中该项，按浏览可以插入…幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。3.3网页中的图像图像传输是Dreamweavercs4的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计吋图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返(如果图片很大，效果会适得其反)图像文件的格式有几十种，如GI

6、F、JPEG、BMRoEPSPCX、PNG、FASTGATIFRWMF等，现在InternetExpbier和Netscape支持的、最常用的图像格式是GIRJPEG和BMR(1)在网页中插入图像利用Dleanweavercs4可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1新建一个空白网页，把光标定位在网页的开始位置。2打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框

7、。3在此对话框屮单击“浏览”按钮，出现一个“选择文件”对话框。4在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页屮。在网页屮插入图像后我们就可以对图像的各种属性进行设置了。(0图像的各种属性设置1选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单屮选择“图片属性”菜单项，出现一个“图片属性”对话框・2打开“外观”选项卡①设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需耍定义图像②设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度

8、，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像,要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页屮图像的环绕方式有两种：a左环绕：图像在左边，文本在图像的右边进行环绕。b右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏屮打开“对齐