《个人网页制作课程设计.doc》由会员分享，可在线阅读，更多相关《个人网页制作课程设计.doc（12页珍藏版）》请在三一文库上搜索。
1、南华大学电气工程学院课程设计说明书课程设计说明书题 目 个人网页的制作 学院名称 电气工程学院 指导教师 唐耀庚 职 称 教授 班 级 自动化101班 学 号 20104460119 学生姓名 胡波 2013年 6 月 24 日摘要：随着网络技术的发展与互联网的普及，网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。个人网站在当今时代被越来越多的人用来做为宣传自己，它在网站建设中占据着重要地位，制作个人网站成为一个热点。通过个人网站的制作可以向老师、同学、亲朋好友提供了解我个人的一个互联网平台。 同时通过个人网页的制作能够收集我自己感兴趣的网络内容，与他人分享我的爱好，让大家更
2、加的了解我。本次通过软件Dreamweaver 8.0完成对网页的编辑以及制作，在网页上贴上我喜欢的网络内容。 关键词：个人网页；网络；喜欢目录：1.关于使用的软件Dreamweaver 8.0. 32.个人网页制作. 42.1定义站点. 42.2文件面板基础操作. 52.3定义规划首页. 62.4定义规划链接页. 82.5定义规划新链接页. 93.网页制作代码. 104.网页制作的总结. 101.关于使用的软件Dreamweaver 8.0MacromediaDreamweaver 8是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大
3、，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Interne应用程序，从而使用户能连接到数据库、Web服务。 图1.1dreanweaver8的工作界面和图标Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，
4、具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供
5、便捷的方式使用户设计网页和管理网站变得更容易。3、功能更多的CSS支持CSS可视化设计、CSS检查工具 4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、内建图形编辑引擎7、Dreamweaver的集成特性Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页
6、。8、丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。2个人网页制作。2.1定义站点单击打开Dreamweaver 8.0，选择站点，选择新建站点，为自
7、己的站点建立名字，并写出完整的路径，比如，设立本地根文件夹，再在根文件夹下设立默认图像文件夹，一般的文件夹名为images。创建如图2.1所示站点：图2.1 个人网页站点创建2.2文件面板基础操作：点击右上角的“展开以显示本地和远程端点”，如图2.2所示。图2.2网页端点接下来在网页端点目录上单击右键，选择新建文件，取名为index.html，并单击右键选择设为首页，点击页面左上的站点地图，点击图标右上方的圆形图标，拉出箭头，指向新建的文件，并改名建立下拉链接以及html文档，设立如图2.3所示链接。图2.3 网页的下拉链接创建2.3定义规划首页双击index.html，打开首页桌面，选择修改
8、，选择页面属性，如图2.4所示图2.4 首页属性然后，点击设置背景的浏览快捷方式，如图，找到先前准备在images里面的图片，点击应用，然后确认，规划页面内容，写入准备好的资料，合理安排版面，创建如图2.5所示网页首页。图2.5 首页链接在浏览器中浏览效果如图2.6所示图2.6 浏览器中预览的首页2.4定义规划链接页：回到站点地图，双击喜欢的图片.index.html,来到首页的第一链接页喜欢的图片。设置背景，插入图片，并选择左对齐，随后在右对齐的情况下输入天罡将的信息，整理规划，创立如图2.7所示第一链接页，并且在浏览器中预览如图2.8所示图2.7 喜欢的图片下拉链接页面点击预览，如图2.9
9、图2.8 浏览器中下拉链接页面预览图接下来运用同样的手法，分别创建喜欢的电影，喜欢的音乐，喜欢的小说链接。2.5定义规划新链接页：定义规划新的一层链接页的手法基本与上一步相同，在二级链接下继续创建下拉链接形成第三级链接。点击首页的喜欢的电影链接及转入如图2.9所示电影陈列界面。图2.9 网页二级链接界面点击电影图片及转入电影介绍资料界面如图2.10所示图2.10 网页第三级链接界面3网页制作代码：由于Dreamweaver 8.0能够自动生成HTML文档，代码所以大大的缩减了网页编辑的工作时间，能更加快速创建自己理想中的网页，省去了大量写代码的时间，网页自动生成的代码如图3.1所示图3.1 网
10、页制作代码4网页制作的总结：做这个个人网页开始时，自己也摸不着头脑，不知道该怎么弄，通过上网搜索一些类似的设计渐渐的了解了Dreamweaver 8.0这款软件，并且对自己后面的工作有很大的了解，这次课程设计使我真正了解了网站的巨大作用，在网站的页面设计阶段，一定要根据所选主题来设计页面，无论是页面颜色还是布局，都需要详细考虑。虽然，在本次的课程设计我与颜亮一组讨论和交流着技术，在这种讨论交流中，我们不断的提高着自己能力和知识，比如，在使用ASP技术开发网站的过程中，充满了层层的阻碍，但在我们两人之间，一起不断的去发现、去探索，然后交流经验，通过这种方式，一个又一个的技术壁垒就这样被我们突破了
11、。比如我在页面设计时碰到了很多问题，特别是div,css并不是很熟练，也是在网上看视频一点点学习的，其实说这是课程设计不如说这是学习的过程。很多时候都是在设计视图和浏览器的效果不一样，通过上网查资料，向同学请教，最后都解决了这些问题。通过不断的提问，解决问题，才能不断的提高。在这次课程设计中，我了解到任何一个项目或者系统开发之前都需要定制一个开发计划，这样有利于项目的整体风格统一。可能由于时间或者个人能力的问题，作品并不是很理想，希望以后通过不断的学习逐渐完善和修改。参考文献：1金颖.新编网页制作三合一教程M.北京：中国铁道出版社,2006年。 2陈强,霍继文,叶兵.网页制作实用技术 Fron
12、tPage 2000M北京：清华大学出版社，2000年。3鲁宏伟，汪厚祥主编.多媒体计算机技术（第三版）M.电子工业出版社。4张福成，谭国鹏.制作网页宝典M.人民邮电出版社，2000。digging; has dual functions of retaining, watertight; typically more economical construction without vibration, noise, less pollution, squeezing slightly, so construction in the downtown area even more advant
13、ages. Disadvantages of cement-soil retaining wall: the first is the relatively large displacement, especially in the pit length is large, this may be done between the piers, arches and other measures to limit the displacement is too large, followed by thick, only used in position and the surrounding
14、 environment allowing the red line, and in the construction of cement-soil mixing piles to avoid affecting the surrounding environment. 2.1.2 soil-nail wall is a type of slope stability of soil nailing wall support, its role and passive retaining walls are different, it is voluntarily fixing effect,
15、 increase the stability of slopes, excavation of Foundation pit slope stability. Soil-nail wall is better soil areas, applied along the northern part of North China and East China, also in southern China, and some has been used to hang 10m deep Foundation pit, stability, construction is simple and s
16、hort, good, good economy, better soil areas should actively promote. Used soil nail wall of General requirements, soil nail wall can applies Yu plastic, not plastic or hard of viscous soil; II in has groundwater of soil in the, soil nail support nursing should in full drop drainage of premise Xia us
17、ed; soil nail wall easy caused soil body displacement, used soil nail wall support nursing should carefully consider, wall body deformation on around environment of effect. 2.1.3 row of piles during excavation, not sloping or due to the limited space and cannot stir pile, depth at around 6 to 10m when you can row pile retaining.第 11 页 共 11 页