《web网页设计实验心得》由会员分享，可在线阅读，更多相关《web网页设计实验心得（17页珍藏版）》请在金锄头文库上搜索。
1、为了适应公司新战略的发展，保障停车场安保新项目的正常、顺利开展，特制定安保从业人员的业务技能及个人素质的培训计划web网页设计实验心得WEB系统开发综合实验报告题目红尘客栈网上订房页面专业计算机科学与技术班级学生重庆交通大学XX年目录一、设计目的.3二、设计题目.3三、结构设计.3四、技术分析.4五、设计过程.7六、实验心得.10七、实验总结.11一、设计目的在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分
2、，从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课,本课程的设计目的是通过实践使同学们经历网页制作的全过程.通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshopcs3、Dreamweavercs等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配合，逐渐培养做一个完整项目的能力。
3、二、设计题目红尘客栈三、结构设计选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。我们选做的主题是个人主页，并且选定题目为“红尘客栈”，其目的是做一个简单的网站，介绍酒店概况，提供一定的资讯信息。四、技术分析(一)建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出
4、一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。网页中的图像图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返。图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TG
5、A、TIFF、WMF等，现在InternetExplorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。在网页中插入图像利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：1.新建一个空白网页，把光标定位在网页的开始位置。2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然
6、后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。图像的各种属性设置1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.2.打开“外观”选项卡。(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的
7、环绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。(3)编辑图像大小：在Dreamweavercs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。
8、(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置
9、。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。怎样编辑网页中的图像在Dreamweavercs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我们还在photoshopcs3中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。使用背景图像使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背景图像则是将网页的背景用图像平铺。
10、这样做可以使制作的网页更美观好看。网页中使用背景图像的具体步骤如下：1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框.郑州轻工业学院Web前端设计网页设计报告院系：班级：学号：姓名：时间：设计报告网页设计要求题目：设计一个不限内容、题材的个人网站，要求页面数量不少于7个。具体要求1.网页内容详实、科学、准确、积极、健康、活泼，网页文字及相关链接无错误。2.网页文件及文件夹的命名符合要求，文件组织合理。1)首页源文件命名为：。2)文件夹image存放与网页相关的图片、动画文件等。3)说明文件内容包括：网页创意及制作的简单说明。3.网页设计整体设计思路
11、清晰，网页布局合理，风格明快、主题页和其他子页之间协调，主题分明、重点突出。栏目及版面设计，层次结构及链接结构明确，内容布局合理，图画运用得当，效果生动。4.网页上各主题和附加图片、背景的色彩选配方案要注意做到：色彩柔和、搭配美观、朴素大方，不应过分夸张，使视觉疲劳。5.使用表格、框架、Css各布局一个页面。6.有自己创作的flash、JavaScript可加分。7.文档提交：电子稿与报告。网页主题及内容主题：在世界的各个角落，邂逅最美的你内容：一些著名的外国旅游、度蜜月胜地，感受当地的风土人情，体验不一样的异域风情。网页创意因为自己本身特别喜欢旅游，喜欢尝试不一样的生活环境，和每个少女一样，
12、我也存在着一个和未来的另一半环游世界的梦，所以这次我的网页是以“在世界的各个角落，邂逅最美的你”为主题展开制作，在实现这个环游世界的梦以前，提前感受下各国的风土人情。网页制作的简单说明通过主页index可链接到“马尔代夫的蓝色心情、法国的紫色浪漫风情、在雅典，我愿意带你，走遍阳光洒过的地方、行走在巴黎、巴塞罗那、ReadMe，所有图片都经过”PS处理过。1.首页：采用了CSS布局页面。1）创建了文件在style文件中。2）插入的Div标签有：date标签，menu标签，main标签，make标签。3）在代码中插入了背景音乐。4）menu标签中分别设置了5个超级链接。5）插入了APDiv1显示歌
13、词、APDiv2滚动歌词文字，并设置了歌词栏的“显示-隐藏”。2.马尔代夫的蓝色心情：采用Spry选项卡式面板+Ap层布局。1）采用spry选项卡式面板布局。2）面板中设置了四个选项：马尔代夫简介+景点游玩及指南1+景点游玩及指南2+图片欣赏。3）设置了APDiv1-APDiv14个层。4）APDiv8插入了滚动歌词，APDiv13插入滚动图片。5）在代码中插入了背景音乐。3.法国的紫色浪漫风情：1）采用spry选项卡式面板布局。2）面板中设置了五个选项：普罗旺斯简介+活动+主角(1)+主角(2)+图片欣赏。3）设置了APDiv2-APDiv15几个层。4）APDiv15插入了滚动歌词，APD
14、iv12插入了滚动图片。5）在代码中插入了背景音乐。4.在雅典，我愿意带你，走遍阳光洒过的地方：1）采用表格布局。2）表格中设置了3个模块：伯罗奔尼撒半岛(Peloponissos)+圣托里尼岛(Santorini)+雅典(Athens)。3）设置了APDiv2-APDiv20几个层。4）在代码中插入了背景音乐。5.行走在巴黎：1）采用Ap层布局。2）设置了APDiv1-APDiv5几个层。3）APDiv2设置为滚动图片。4）在代码中插入了背景音乐。6.巴塞罗那：1）采用spry选项卡式面板布局。2）设置了APDiv1-APDiv5几个层。3）APDiv3设置为滚动图片。4）在代码中插入了背景音乐。：1
