图文混排网页制作实验报告
网页设计实验报告
网页设计实验报告一、实验目的。
本实验旨在通过设计一个简单的网页，掌握网页设计的基本原理和技术，包括HTML、CSS等相关知识，加深对网页设计的理解和应用。
二、实验内容。
1. 确定网页设计的主题和内容，包括页面布局、颜色搭配、文字排版等方面的设计。
2. 使用HTML语言编写网页的结构和内容，包括标题、段落、列表、图片等。
3. 使用CSS样式表美化网页的外观，包括字体、颜色、边框、背景等样式的设置。
4. 调试和优化网页，确保网页在不同浏览器和设备上的兼容性和稳定性。
三、实验过程。
1. 确定网页设计的主题和内容。
根据实验要求，我选择了一个简单的个人简历页面作为设计主题，包括个人信息、教育经历、工作经验和技能展示等内容。
2. 使用HTML语言编写网页的结构和内容。
我首先创建了一个HTML文件，并使用HTML标签编写了页面的基本结构，包括标题、段落、列表和图片等内容。
3. 使用CSS样式表美化网页的外观。
我创建了一个独立的CSS文件，通过设置字体、颜色、边框、背景等样式，使页面呈现出美观的外观效果。
4. 调试和优化网页。
在完成基本设计后，我对页面进行了多次调试和优化，确保页面在不同浏览器和设备上的兼容性和稳定性，同时也对页面的加载速度和性能进行了优化。
四、实验结果。
经过一系列的设计、编写和优化，我成功地完成了一个简单的个人简历网页设计。
页面整体布局合理，颜色搭配和文字排版也较为美观，同时在不同浏览器和设备上都能够正常显示和使用。
五、实验总结。
通过本次实验，我深入了解了网页设计的基本原理和技术，掌握了HTML、CSS等相关知识，提高了对网页设计的理解和应用能力。
同时，我也意识到网页设计需要注重细节和用户体验，不断调试和优化是设计过程中不可或缺的环节。
六、实验感想。
本次实验让我对网页设计有了更深入的认识，也让我体会到了设计的乐趣和挑战。
在今后的学习和工作中，我将继续加强对网页设计相关知识的学习和实践，不断提升自己的设计能力和水平。
03第3章制作图文混排网页.
03第3章制作图⽂混排⽹页.第3章制作图⽂混排⽹页图像也是⽹页中的主要元素之⼀，图像不但能美化⽹页，⽽且能够更直观地表达信息。
在页⾯中恰到好处地使⽤图像，能使⽹页更加⽣动、形象和美观。
【教学导航】3.1课前准备（1）在本地硬盘创建⽂件夹（2）启动Dreamweaver CS3通过Windows的【开始】菜单启动Dreamweaver CS3。
3.2课堂引导训练及评价【课堂引导训练任务描述】1、⽹页制作任务卡⽹页制作任务卡如表3-1所⽰。
表3-1⽹页制作任务卡⽹页制作任务跟踪卡如表3-2所⽰。
表3-2⽹页制作任务跟踪卡【⽹页效果展⽰】⽹页index0301.html的浏览效果如图3-1所⽰。
【任务完成过程】3.2.1应⽤“⾼级”⽅式创建站点“瀑泉游”【操作要求】应⽤【站点定义】对话框的“⾼级”⽅式创建站点“瀑泉游”。
50第3章制作图⽂混排⽹页图3-1图⽂混排⽹页的浏览效果【实施过程】（1）打开【管理站点】对话框（2）打开【站点定义】对话框（3）设置站点的“本地信息”在“分类”列表中单击选择“本地信息”选项，输⼊或选择以下各项：②在“本地根⽂件夹”⽂本框中输⼊根⽂件夹“D:\E游天下\03第3章制作图⽂混排⽹页\”。
③在“默认图像⽂件夹”⽂本框中输⼊“D:\E游天下\03第3章制作图⽂混排⽹页\task03-1\images\”。
也可以打开对话框选择⼀个⽂件夹。
④输⼊本机的HTTP地址，如http://172.16.7.26/Etour/。
（4）设置站点的“远程信息”在【管理站点】对话框中单击【完成】按钮，新建站点便完成。
3.2.2应⽤“⽂件”⾯板新建⽹页“index0301.html”【操作要求】应⽤“⽂件”⾯板在站点“瀑泉游”中新建⼀个⽹页⽂档“index0301.html”。
【实施过程】（1）打开“⽂件”⾯板如果“⽂件”⾯板处理隐藏状态，则单击菜单【窗⼝】→【⽂件】打开“⽂件”⾯板。
（2）新建⽹页⽂档在“⽂件”⾯板中站点“瀑泉游”的⽂件夹“task03-1”上单击右键，在弹出的快捷菜51Dreamweaver CS3⽹页制作案例教程单中单击【新建⽂件】菜单项，如图3-7所⽰。
实验二 Word使用：图文混排
温州大学物理与电子信息工程学院计算机基础实验报告实验名称：实验二：Ｗord使用：图文混排实验目的：1.掌握Word文档艺术字的应用2.掌握Word文档图片的插入方法3.掌握Word文档图片版式的设置4.掌握Word文档表格的制作5.掌握Word文档绘图工具的使用6.掌握Word文档数学公式的应用实验内容：1.艺术字的应用。
为文章标题“计算机基础知识”设置为艺术字，更改艺术字形状为“山形”，效果如样张所示。
2.首字下沉。
将“1、计算机的硬件知识”正文中“主机”设置为首字下沉，下沉行数为3行，字体为“黑体”。
3.分栏。
将第3自然段的文字设置分栏，栏数为2，中间有分隔线。
4.图片的插入及图片版式的设置。
为文章第4、5段插入相应的图片，更改图片的大小和位置，并设置图片的版式，效果如样张所示。
5.文本框的使用及其格式的设置。
将文章第6段使用竖排文本框。
文本框边框的格式设置为黑色双实线，填充颜色设置为“灰色-25%”。
再在文字末尾处插入图片，如样张所示。
6.Word文档中表格的制作。
制作“计算机发展历程简表”，表格样式、文字及数据如样张中的表1所示。
表格自动套用格式“流行型”。
7.绘图工具的应用。
使用绘图工具，绘制“计算机工作流程示意图”如样张所示。
8．数学公式的应用，使用公式编辑器，编辑如样张所示的数学公式。
实验步骤:参考《大学计算机基础实验教程》P45—P55实验结果及分析：计算机基本知识1、计算机的硬件知识一个完整的计算机系统是由硬件系统和软件系统组成。
硬件系统是指构成计算机系统的物理实体，主要由各种电子部件和机电装置组成。
硬件系统的基本功能是接受计算机程序，并在程序的控制下完成数据输入、数据处理和输出结果等任务。
主机是安装在一个主机箱内所有部件的统一体，其中包括电源、主机板（包含CPU和内存）、硬盘驱动器（简称硬盘）、软盘驱动器（简称软驱）、光盘驱动器（简称光驱或CD-ROM）、显示卡和其他数据通信、多媒体功能板卡（如网卡、传真卡、声卡、视频卡等）。
网页制作实验报告
网页制作实验报告一、实验目的。
本实验旨在通过实际操作，掌握网页制作的基本原理和技术，了解网页设计的基本要求和规范，培养对网页设计的兴趣和能力。
二、实验内容。
1. 学习HTML和CSS基础知识；2. 制作一个简单的静态网页，包括文本、图片和超链接等元素；3. 掌握网页布局和样式设计的基本方法。
三、实验步骤。
1. 学习HTML和CSS基础知识。
在实验开始前，我首先对HTML和CSS进行了系统的学习。
HTML是网页的标准标记语言，用于建立网页的结构；而CSS是层叠样式表，用于控制网页的样式和布局。
通过学习这两门技术，我对网页制作有了更深入的理解。
2. 制作一个简单的静态网页。
接下来，我开始动手制作一个简单的静态网页。
首先，我创建了一个HTML文件，并在其中编写了网页的基本结构，包括头部、导航栏、内容区和底部等部分。
然后，我利用CSS对网页进行了样式设计，包括字体、颜色、边框等样式的设置。
同时，我还插入了一些图片和超链接，丰富了网页的内容。
3. 掌握网页布局和样式设计的基本方法。
在制作网页的过程中，我深入学习了网页布局和样式设计的基本方法。
通过调整CSS样式表中的参数，我改变了网页的布局和样式，使其更加美观和易于阅读。
同时，我还学会了如何使用浮动、定位和响应式布局等技术，使网页在不同设备上都能够正常显示。
四、实验总结。
通过本次实验，我深入了解了网页制作的基本原理和技术，掌握了HTML和CSS的基础知识，学会了制作简单的静态网页，并掌握了网页布局和样式设计的基本方法。
这些知识和技能对我今后的学习和工作都具有重要的意义，我会继续努力学习，提高自己的网页制作能力。
五、实验感想。
网页制作是一门非常有趣和实用的技术，通过本次实验，我对网页制作有了更深入的了解，也增强了对这门技术的兴趣。
我相信，在今后的学习和工作中，我会继续深入学习网页制作技术，不断提高自己的能力，为将来的发展打下坚实的基础。
六、参考资料。
1. 《HTML5权威指南》。
2024网页设计实习报告总结（三篇）
2024网页设计实习报告总结____网页设计实习报告总结一、实习背景及目的本次实习是在____年暑假期间，在某知名网络科技公司进行的网页设计实习。
通过参与公司的实际项目，我得以接触到真实的工作环境和工作流程，深入了解了网页设计的相关知识和技能。
本次实习的目的主要是掌握网页设计的基本原理和技能，锻炼分析和解决问题的能力，提升自己在这个领域的实践经验。
通过实习的学习和实践，我将网页设计与用户体验相结合，提出了一些建议和改进措施，希望能对公司的网页设计工作有所帮助。
二、实习内容及经历在实习期间，我主要参与了公司一个正在进行的网页设计项目。
该项目是一个电商平台的网页设计项目，主要涉及到用户界面的优化和功能的添加。
具体的工作内容包括与产品经理和开发团队进行沟通，了解项目需求和用户需求；负责设计网页的布局和样式，以及添加交互功能；与开发团队进行协作，进行网页的编码和调试；与用户进行交流和反馈，根据用户反馈进行网页的改进等。
在实习期间，我逐渐熟悉了公司的工作流程和设计规范，学习了各种网页设计的工具和软件的使用，提升了自己的设计能力和技术水平。
通过与产品经理和开发团队的沟通，我了解到了用户需求的重要性，学会了从用户的角度思考问题，并且能够提出一些改进建议。
在与开发团队的协作中，我学会了与他人合作和沟通，能够更好地理解他们的思想和需求，并提供有效的解决方案。
三、实习收获和体会通过这次网页设计实习，我学到了很多知识和技能，收获了很多宝贵的经验和体会。
首先，我掌握了网页设计的基本原理和技能，学会了如何设计具有吸引力和易用性的网页界面。
其次，我了解了用户体验的重要性，学会了从用户角度思考问题，并且能够提出一些改进建议，为公司的网页设计工作提供一些参考和帮助。
最后，通过与产品经理和开发团队的沟通和协作，我学会了与他人合作和沟通，锻炼了自己的团队合作能力和解决问题的能力。
这次实习让我更加深入地理解了网页设计这个领域的复杂性和挑战性。
网制作实习报告图文稿
网制作实习报告集团文件发布号：（9816-UATWW-MWUB-WUNN-INNUL-DQQTY-网页制作实习报告一、实习目的1、进一步熟悉和掌握网站建设的基本流程和技术规范；2、巩固运用Dreamweaver网页制作软件制作网页、特别是制作复杂网页的知识；3、巩固运用Fireworks图像处理软件进行网页中图形制作和运用flash 动画制作软件设计网页中动画的知识；4、巩固综合运用Dreamweaver、Fireworks、flash三个软件完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站；5、具备独立撰写实训报告等科技文件的基本能力；6、在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识；7、为今后从事网站开发、维护和管理奠定基础。
二、实习任务1、站点规划，搜集资料。
确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。
2、进行主页设计。
构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。
3、网页设计。
除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。
包括版面设计和图形设计、内容录入等。
4、动画设计。
主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。
5、综合优化。
链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）。
6、网站测试并递交。
在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。
三、实习项目-个人网站的设计（包括步骤、各页面的图片和制作过程说明）（一）该网站的制作主要是按以下步骤完成的：1、确定网站主题我的网站的主题是新闻网站.我的网站是新闻网站.该网站是让人们了解当天的一些新闻信息,包括娱乐等很多新闻.还有一些小标题的新闻.在一些新闻栏目中适当的加入了一些幽默小笑话和一些名人名言.2、收集资料（1）文字资料：文字是网站的主题。
网页制作实习报告(6篇范文)
网页制作实习报告（6篇范文）【导语】网页制作实习报告怎么写好？本文精选了6篇优秀的网页制作实习报告范文，都是标准的书写参考模板。
以下是小编为大家收集的网页制作实习报告，仅供参考，希望您能喜欢。
【第1篇】网页制作实习报告一实验过程1.资料的搜集。
2.熟悉制作软件。
3.构建站点框架。
打开dremweaver后第一步便是新建站点4设计主页及二级页面。
5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果具体情况如下：通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。
使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。
所以我结合所学专业的内容制作了个人网站，作为实习的成果。
其内容是多样化的。
制作网页用的软件是ｄreamweaver , banner软件。
dreamweaver大大加速了网络时代电子交易应用中的项目交付。
它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。
例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。
当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成html代码，或者嵌入到现有的网页中，或者作为单独的网页出现。
主图是一个网页的门面，它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。
于是网站主题确立。
然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，中国简介，中国历史，用户登录注册页面留言，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。
网页制作实验报告
网页制作实验报告网页制作实验报告一、引言现如今，随着互联网的迅速发展，网页设计成为了一门热门的技能。
本文旨在分享我所进行的网页制作实验，并对实验过程和结果进行详细的描述和分析。
二、实验目的本次实验的目的是通过学习网页制作的基本知识和技巧，掌握HTML和CSS的使用方法，并能够独立设计和制作一个简单的网页。
三、实验过程1. 学习HTML和CSS基础知识：在开始实验之前，我先通过阅读相关教材和在线教程，学习了HTML和CSS的基本语法和标签，了解了网页的结构和样式设计原理。
2. 设计网页结构：在实验中，我首先考虑了网页的整体结构和布局。
通过使用HTML标签，我创建了一个包含导航栏、内容区域和页脚的基本网页框架。
3. 添加内容和样式：在网页的内容区域，我添加了一些文字、图片和链接，以展示网页的功能和信息。
同时，通过CSS样式表，我对文字、图片和导航栏等元素进行了样式设计，使网页更加美观和易于阅读。
4. 调试和优化：在完成网页设计后，我对网页进行了调试和优化。
通过使用浏览器的开发者工具，我检查了网页的布局和样式是否符合预期，并修复了可能存在的错误和问题。
四、实验结果经过一番努力，我成功地完成了一个简单的网页制作。
该网页具有清晰的结构和良好的视觉效果。
导航栏的链接可以正常跳转，内容区域的文字和图片也能够正确显示。
整体而言，我对自己的实验结果感到满意。
五、实验总结通过这次网页制作实验，我收获了许多有价值的经验和知识。
首先，我学会了使用HTML和CSS来创建和设计网页，掌握了网页的基本结构和样式。
其次，我提高了自己的问题解决能力，通过调试和优化，解决了一些网页制作中的困难和挑战。
最重要的是，我培养了创造力和审美观，学会了如何将自己的想法和设计理念转化为实际的网页作品。
六、展望未来网页制作是一个不断进步和发展的领域，我希望能够继续深入学习和探索。
在未来，我打算进一步提高自己的技能，学习更高级的网页制作技术，如响应式设计和动画效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
深圳大学
实验报告
课程名称：网页设计与制作
实验序号：
实验名称：图文混排网页制作
班级：临床一班姓名：张
同组人：实验日期：2014 年4月21 日
教师签字：
一、实验目的
(1)掌握网页布局的方法。
(2)掌握在网页中插人图片的方法。
(3)掌握网页中图文混排的排版方法
二、实验环境
制作秋天的思念网页效果
三、实验步骤
(1)新建html，在页面属性中设置，背景颜色设置为“#313884” ,页面标题设置为“秋天的思念”。
如下图
(2)插人一个3行1列的表格,将表格宽度设置为“558”像素.边框扭细、单元格边距、
单元格间距均设置为“0”像素,如图所示。
鼠标右键可以再自动弹出的“属性”面板中设置表格的对齐方式为“居中对齐”。
(3)在“代码”视图中使用代码将第1行单元格的背景设置为图片“bg.gif”（光标插到在<td 后按空格键，dreamweaver自动弹出要插入的对象然后按着他的思路走就可以了，dreamweaver简直是代码盲的福音啊！）,同时在第1行的单元格内插人图片“logo.gif”,
并设置为左对齐,效果如图所示。
(4)将第2行和第3行单元格的背景颜色均设置为“#FFA200” ,在第3行的单元格内插人图片“blank.gif” ,并将其宽度设置为“1”像素、高度设置为“10”像素。
注意:blank.gif是一个宽和高均为1像素的透明图片,在网页制作中经常利用这种透明图片来
“撑开”表格,使其处于固定的宽度和高度。
(5)在第2行单元格内插人一个1行、3列的表格,将其宽度设置为100%,边框粗细、单元格边距、单元格间距均设置为“0”像素,对齐方式设置为“居中对齐”。
(6)在新插人表格的第2列单元格内插人图片“autu.jpg” ,将第1列至第3列单元格的宽度分别设置为2%、96%、2%,同时单击代码视图,将第1列和第3列单元格内的“ ”删除,效果如图5-4所示。
(7)在表格的下面输人以下版杈信息:
关于我们/网站地图/广告指南/联系我们/招聘精英技术支持：信息学院计算机/网络协会
Rll Rights Reserved
四、结果与分析
算是
成功完成。
五、思考题解答
1、“& nbsp” &是转义符，nbsp就是代码，全称就是空格转义符。
作用是html语言里面用来表示空格的一个代码。
2、长度单位:分为绝对长度和相对长度.
绝对长度：em相对于父对象的大小，ex相对于特定字体中的字母x的高度，px相对于特定设备的分辨率，这是最最常用的单位，也是我们一直坚守的单位。
从技术角度来说，px像素其实是一种相对大小的度量单位，它于特定设备的显示或打印的分辨率有关。
例如，一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。
绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
in英寸cm厘米mm 毫米pt点pc12点活字。
一般使用绝对长度中的pt点和相对长度里的px
3、这个问题我在上次实验就发现了，问了老师，老老师说Dreamweaver本身是没有调节背景图片的属性功能。
这次有空我上网搜搜了发现网上有两个解决办法【（1）可以直接在代码框中编写，（如图片是123.jpg，默认是平铺，改为不平铺的代码是：background="ima ges/123.jpg" style=background-repeat:no-repeat>；（2）也可以就在页面属性里可以找到重复和不重复的选择进行设置。
（3）还有人用插入】
前两个页面属性设置原理一样所以亲测一个如下图亲测后发现
是下图的结果。
插入亲测也不可以，效果如下图
所以要么通过ps把图片分辨率改大，或者直接选一张大图，便可以在Dreamweaver中看到。
六、心得体会
这个实验有点难，觉得有些都不怎么会，比如文本插入，后来仔细看了下实验书和网上的教程，才算完成（ps：后来又回顾了ppt发现就在2章就讲了，哎！）。
可能是上课老师有演示但是自己忘了吧，所以做得有点慢。
不过后来成功完成后小有成就感。