网页设计课程设计论文

课程设计题目：我的家乡锡林浩特网页设计学生姓名：学院：国际工商学院系别：电子商务系专业：电子商务班级：二班指导教师：2013年7月9日学校代码：10128学号：摘要利用dreamweaver制作一个网页，主要介绍我的家乡——锡林浩特的地理风貌，人文历史，经济发展以及旅游景点等方面的内容。锡林浩特，位于内蒙古自治区锡林郭勒盟，锡林郭勒草原中部，是锡林郭勒盟盟府所在地。旅游资源得天独厚，蒙元文化、马文化、草原文化特色鲜明。锡林郭勒草原曾是成吉思汗、忽必烈征战建国的重要战场，是蒙元文化的重要发祥地。所用工具：dreamweaver、photoshop、flash等。通过photoshop、flash等对图片进行加工处理，将处理好的图片插入到dreamweaver中，并进行排版等工作，最后编辑文字内容格式，网页制作完毕。AbstractUseDreamweavertomakeawebpage,mainlyintroducemyhometown--Xilinhaote'sgeographicalfeatures,history,economicdevelopmentandtourismetc..Xilinhaote,locatedintheInnerMongoliaAutonomousRegionXilinguoleMeng,Xilinguolesteppeincentral,isXilinguoleMeng'shouse.Tourismresourcesberichlyendowedbynature,MongoliancultureinYuanDynasty,thehorseculture,prairieculturecharacteristic.XilinGolGrasslandwasanimportantbattlefieldGenGiKhan,Kublaiinthestate,isanimportantbirthplaceofMongoliancultureinYuanDynasty.Theusedtool:Dreamweaver,Photoshop,flashetc..ThroughthePhotoshop,flash,thepictureprocessing,theimageintoDreamweaver,andlayoutandsoon,thelastedittextformat,webpagemaking.关键词：网页制作；锡林浩特；图片处理；dreamweaver；HTML；photoshop目录第一章前言································1第二章设计目的····························2第三章开发工具与运行环境··················21网站设计基本知识2Dreamweaver简介3HTML及HTML技术简介4Photoshop简介5Flash简介第四章网站的设计与实现····················41设计思想2网站整体设计3网站详细设计（1）素材的准备（2）网站首页（3）网站子页第五章结论································5第六章参考文献····························6第1页第一章前言锡林浩特市位于内蒙古锡林郭勒大草原中部，东邻西乌旗、西依阿巴嘎旗、南与正蓝旗接壤、东南与赤峰市克什克腾旗相连、北同东乌旗为邻；市区与首都北京和自治区首府呼和浩特分别相距669公里和664公里，距二连浩特和朱恩嘎达两个边境口岸分别为338公里和233公里。全市地势南高北低，北部为平缓的波状平原，南部为低山丘陵。地势平坦，土层较厚，有机质含量高，土壤结构良好，适宜牧草生长。煤炭资源也十分丰富，主要是烟煤，其次是褐煤和油煤。境内的乌兰图嘎煤矿储量达214亿吨，具有储量大、埋藏浅、宜于露天开采的特点，是内蒙古自治区六大煤田之一。太阳能和风能逐年得到开发利用，风力发电在牧区广为使用、方便了牧民的生产和生活.锡林浩特市位于北纬43°02′-44°52′，东经115°13′-117°06′。东邻锡盟西乌珠穆沁旗，西依阿巴嘎旗，南与正蓝旗相连，东南与赤峰市克什克腾旗接壤，北同东乌珠穆沁旗为邻。市境南北长208千米，东西长143千米。总面积15758平方千米（简册）/18750平方千米。总人口15万人（2003年）。市人民政府驻地邮编：026000。代码：152502。区号：0479。“浩特”意为“城市”。现锡林浩特市由建国前的阿巴哈纳尔左翼旗、阿巴嘎左翼旗和浩齐特右旗几经分合而形成的。阿巴哈纳尔部和阿巴嘎部，汉为上谷郡北境；晋为拓跋氏居地；隋、唐为突厥所居；辽为上京道西境；金属北京路西北境；元属上都路；明为察哈尔万户地。浩齐特部，辽属上京道西境；金属北京路；元属上都路；明为蒙古所居。有草原明珠之称.锡林浩特市辖7个街道、1个镇、2个苏木：希日塔拉街道、宝力根街道、杭盖街道、楚古兰街道、额尔敦街道、南郊街道、巴彦锡勒街道、阿尔善宝拉格镇、宝力根苏木、朝克乌拉苏木。目前有经桑根达来到呼和浩特方向的列车,属于集通铁路分支线。锡林浩特机场位于市区西部，每日都有航班往来于北京、呼和浩特、海拉尔等地。207国道和303国道穿过锡林浩特市。其中207国道向西南方可到张家口市，303国道则通往东南方向的克什克腾旗。第2页第二章设计目的本课程的设计目的是通过实践使同学们经历Dreamweaver8开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver8可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop8、Dreamweaver8等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。我本次主要是设计的一我的家乡锡林浩特为主题的网页，针对自己家乡的美丽风景与悠久历史做了详细介绍。第三章开发工具与运行环境1.网站设计基本知识网站是存放在网络服务器上的完整信息集合体，包含一个或多个网页。网站制作包括网站的主题，内容的采集以及整理、页面的排版和设计、背景以及整套网页的色调等。2.Dreamweaver简介Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件.它使用所见即所得的接口，亦有HTML编辑的功能。是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。开发环境支持HTML、ASP、ASP.NET、JSP等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后第3页台程序的交互。3.HTML及HTML技术简介HTML(HyperTextMark-upLanguage):超文本标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入.其主要特点如下：⑴简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。⑵可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。⑶平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上.HTML文件而无需重新设置代Macromedia公司的RoundtripHTML技术让用户可以随意导入码格式，用户还可以利用Dreamweaver清除或重新格式化HTML代码，实现代码的优化。利用Dreamweaver，可以方便地使用动态HTML功能，却不需要写一行行的代码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。4.Photoshop简介AdobePhotoshop，简称“PS”，是一个由AdobeSystems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。从功能上看，该软件可分为图像编辑、图像合成、校色调色及特效制作部分等。5.Flash简介Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了FutureSplash以后便将其改名为Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了ShockwaveFlash和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。第4页第四章网站的设计与实现1.设计思想利用Dreamweaver8.0制作一个关于“家乡美”的网站，利用表格、行为、层和链接等网页设计技术设计页面。2.网站整体设计布局与框图3.网站的详细设计1）素材的准备网站的排版格式是用Dreamweaver表格画出来的。所使用图片来源有自己在锡林浩特拍摄和网上下载两种途径。由Photoshop处理后插入到Dreamweaver中。还有一些个性化按钮，是经由Flash制作后在Dreamweaver中使用的。2）网站首页使用DW8制作网页。家乡美网站首页历史沿革地理概况著名人物旅游景点物产资源经典美食风俗习惯设计目的第5页先把素材整理好，把图片整理好放在新建的“图片素材”文件夹下，个性按钮放在新建的“按钮”文件夹中。然后定义站点，选择这个目录，然后就可以方便的使用和处理。制作步骤：（1）启动Dreamweaver。（2）打开“站点”菜单，选择“新建站点”命令，选择“高级”编辑站点并确定。（3）选件“文件”新建html基本页，并保存为“index.html”文件。（4）建立表格。由于将所要介绍内容分为九部分，因此建立一行九列的表格。（5）在表格内输入文字内容，并分别创立与子网页的超链接。（6）表格嵌套完成后开始添加内容：a)点击插入图片，在最上层的表格中插入用Photoshop所裁剪制成的图片b）添加关于网站主题的文字内容、flash内容以及添加站内索引等相关链接内容（7）设置页尾。（8）为所有输入的文字内容进行排版，并最后校对网页内容。3）网站子页制作方法同网站首页第五章结论这次作业对于我来说不是一项任务而是一种享受，因为我发现我越来越喜欢它，不管别人说做这件事做到多晚做得有多累，我都没觉得，甚至还越做越兴奋。对于一个女生来说，特别是对于一个对电脑不太感兴趣的女生来说，我觉得这是我最大的收获，我找到了我的兴趣、我的老师，我在计算机专业中找到了方向。真的很感谢老师能给我们这次机会，当然也发现有很多同学跟我一样喜欢上了它，在这方面也做得比较好，于是我也有一种紧迫感，毕竟现在竞争压力很大，“适者生存，弱者淘汰”是亘古不变的自然法则，我想我应该更加努力，抓住机会把它学通学精。第六章参考文献1．赵喜清《网页设计制作》哈尔滨工业大学出版社2010年9月第一版第6页2.李烨、卢明辉编著《内蒙古锡林郭勒风物志》云南出版社2002年1月第一版3.网页设