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

网页设计与制作的课程设计PAGE1信息学院课程设计题目：网页设计与制作姓名：_______学号：_______________班级：课程：网页设计与制作______任课教师：____网页设计与制作的课程设计全文共13页，当前为第1页。2012年7月网页设计与制作的课程设计全文共13页，当前为第1页。网页设计与制作的课程设计全文共13页，当前为第2页。课程设计任务书及成绩评定网页设计与制作的课程设计全文共13页，当前为第2页。题目网页设计与制作课程设计的任务及要求1.完成个人网页的制作。2.熟悉相关的网页制作软件Dreamweavercs4等。3.学会基本的Html文件编辑4.学会使用表格5.学会创建连接和站点结构课程设计所需的软件、硬件等Dreamweavercs4等相关软件课程设计进度计划2012年6月。了解相关课程设计，清楚设计题目与设计方向，准备动物网页的相关材料。2012年7月。制作关于动物的相关网站。2012年7月。总结之前所做网站，记录编写过程及结果、提交设计。PAGE10·目录·1.设计目的····································22.设计思想······························23.网页详细设计分析···························34.建立站点······························56.设计成果展示··················……···67.心得体会…………11网页设计与制作的课程设计全文共13页，当前为第3页。网页设计与制作的课程设计全文共13页，当前为第3页。课程设计1.课程设计目的一、设计目的本课程的设计目的是通过实践经历Dreamweavercs4开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweavercs4可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。二、熟练掌握Photoshopcs4、Dreamweavercs4等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的以动物”为主题的网页，针对本人的一些情况做了介绍。2.设计思想设计思想利用Dreamweavercs4制作一个关于网站，利用表格、行为、层和链接等网页设计技术设计页面。分步骤完成相关操作。1.基本Html文件的编辑网页设计与制作的课程设计全文共13页，当前为第4页。2.文本格式的设置网页设计与制作的课程设计全文共13页，当前为第4页。3.创建链接和建立站点结构4.使用表格5.利用css制作网页3.网页详细的设计网页详细设计分析3.1建立站点（1）打开站点管理→新建→站点→输入名称“动物”→下一步（2）单击“下一步”（3）选好存储位置→单击“下一步”（4）选好服务器文件夹→单击“下一步”（5）单击“下一步”（6）单击“完成”。3.2建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs4是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。网页设计与制作的课程设计全文共13页，当前为第5页。网页设计与制作的课程设计全文共13页，当前为第5页。3.3网页中的图像图像传输是Dreamweavercs4的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）图像文件的格式有几十种，如GIF、JPEG、BMP、。EPS、PCX、PNG、FAS、TGA、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。（1）在网页中插入图像利用Dreamweavercs4可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。（2）图像的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡网页设计与制作的课程设计全文共13页，当前为第6页。①设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。网页设计与制作的课程设计全文共13页，当前为第6页。②设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：a、左环绕：图像在左边，文本在图像的右边进行环绕。b、右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。③编辑图像大小：在Dreamweavercs4中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。网页设计与制作的课程设计全文共13页，当前为第7页。④设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1、选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2、在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。网页设计与制作的课程设计全文共13页，当前为第7页。（3）怎样编辑网页中的图像在Dreamweavercs4中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我们还在Photoshopcs4中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。（4）使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.3.开“背景”选项卡。4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览”按钮，出现一个“选择背景图片”对话框。5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。网页设计与制作的课程设计全文共13页，当前为第8页。6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透明层的效果，非常吸引人。网页设计与制作的课程设计全文共13页，当前为第8页。（5）插入flash动画关于Flash视频使用Dreamweavercs4中的“插入Flash视频”命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。该命令可以插入Flash组件；当您在浏览器中查看它时，它显示所选择的Flash视频内容以及一组播放控件。（6）设置鼠标经过图片，进行图片交互再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。4.建立站点建立站点（1）打开站点管理→新建→站点→输入名称“动物”→下一（2）单击“下一步”（3）选好存储位置→单击“下一步”（4）选好服务器文件夹→单击“下一步”（5）单击“下一步”（6）单击“完成”。网页设计与制作的课程设计全文共13页，当前为第9页。网页设计与制作的课程设计全文共13页，当前为第9页。5.设计成果展示网页设计与制作的课程设计全文共13页，当前为第10页。网页设计与制作的课程设计全文共13页，当前为第10页。网页设计与制作的课程设计全文共13页，当前为第11页。网页设计与制作的课程设计全文共13页，当前为第11页。网页设计与制作的课程设计全文共13页，当前为第12页。网页设计与制作的课程设计全文共13页，当前为第12页。6.设计心得网页设计与制作的课程设计全文共13页，当前为第13页。通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！做好页面，并不是一件容易的事，它包括个人主页的选题