网页设计说明书我的家乡--永昌

我的家乡永昌展示网站说明文档题目： 我的家乡永昌 专业班级：11级计算机科学与技术2班姓名： 孙中军 学号： 10240215 指导教师： 朱爱红 成绩： 目录第一章 网页概述11.1 网页简介11.2网页组成11.3网页设计思想2第二章 网页设计思路32.1 网页设计背景32.2 制作工具选择32.3 素材收集42.4 网页设计内容构想4第三章 网页内容简介73.1 网页功能简介73.2 网页主要功能描述73.3网页的浏览7第四章 网页设计94.1 网页结构总图94.2 各网页模块的组成104.3 网页制作环境114.4 网页设计思路12第五章 网页制作135.1 素材的加工制作135.2网站的建立135.3 网页设计145.3.1主页设计145.3.2“环境”155.3.3“历史”165.3.4“文化”17第六章 设计体会18致谢1919- 19 摘要 【摘要】本网页主要用HTML语言编写，利用Macromedia Dreamweaver8.0作为开发工具，介绍了永昌县的历史、文化、民族、经济、地理、特产等基本概况，以图片和文字介绍相结合的方式，以网站浏览的方式综合展示了永昌县的整体面貌，着重介绍了永昌的特色文化。【关键词】 网页设计说明书 我的家乡永昌 设计思路 Dreamweaver8.0 Javascript语言 第一章 网页概述1.1 网页简介网页，是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。网页说具体了是一个html文件，浏览器是是用来解读这份文件的。本次网页设计，主要用HTML语言编写，利用Dreamweaver8.0作为开发工具，中间插入了一些Javascript语言用以编制一些特效，如左右移动图片广告、显示当前时间等，主要介绍了永昌的历史、文化、环境、经济、地理、特产等基本概况，以图片和文字介绍相结合的方式，穿插一些视频媒体，以网站浏览的方式综合展示了将永昌的整体面貌展现给大家，着重介绍了永昌几大城市和特色文化。1.2网页组成1、主页（1）永昌风景（2）四大机构（3）永昌特色2、环境介绍了永昌的自然生态环境。3、历史介绍了永昌的历史（清明时期）。4、经济5、气候8、地理介绍了永昌的地理概况。9、经济介绍了永昌2010年经济统计数据。10、特产介绍了永昌的特产。1.3网页设计思想本网页使用Macromedia Dreamweaver8.0作为设计工具，采用多重链接的方式展示永昌的历史文化等几个方面，力求界面简洁明了的同时，设计中插入了一些Javascript语言用以编制一些特效，以提高可观赏性。在制作过程中力求综合运用所学计算机技能，充分发挥本人的专业特长，使能够通过网页上图片展示和文字介绍，真实而且较为全面地反映永昌的概况，同时也反映了用车nag人民的风土人情、民族风情、文化氛围、精神风貌、发展前景。第二章 网页设计思路2.1 网页设计背景由于因特网的开放结构，对多数用户来说，已不满足于浏览别人制作的网页，而要自己制作网页发布到因特网上，所以网页制作不仅是专业人员的工作，已成为普通人的生活和工作需求。值此之际，新中国61华诞和自治区52大庆的庆祝宣传活动气氛热烈，因此构想借毕业设计之机，通过计算机工具，以“我的家乡永昌”为主题，制作一网站来展示永昌的全新面貌，渲染回乡风情，弘扬优秀文化，促进民族团结。2.2 制作工具选择Macromedia Dreamweaver是一款集网页制作和管理网站于一身的所见即所得网页编辑器，是一套视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。概括起来，Dreamweaver具有以下优点：一是最佳的制作效率。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。二是方便的网站管理功能。使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有链接。三是无可比拟的控制能力。Dreamweaver是提供HTML、视觉化编辑与原始码编辑同步的设计工具。帧(frames)和表格的制作速度快。Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。当使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。因此，选用Dreamweaver8.0作为开发工具。2.3 素材收集文字与图片是构成一个网页的两个最基本的元素。可以简略的理解为：文字，就是网页的内部实质意义；图片，就是网页的美容护肤品。除此以外，网页的元素还包括动画、音乐等等。1、图形主要通过网络媒体获得图片资料。如历史、地理、文化、环境方面，主要浏览政府网站以及所属相关部门专业网站并搜集资料；城市、特产、名胜等方面，通过搜索引擎、一些旅游资源网站（如“永昌历史”“永昌机构”）获得，还有一部分是同学出游的时候拍摄的照片。将这些资料库中的照片、书画作品、图片资料,根据具体需要，用ACDSee、Photoshop软件适当处理，变成素材添加到网页的某个地方，充分提高网页的观赏性。2、文字由设计思路展开，搜集所需要的文字资料。历史、地理、气候、民族、文化、人口部分参考永昌internet网站，经济、城市、特产部分资料来自政府网站以及所属相关部门专业网站、旅游资源网站。对素材分析选取，进行相应的文字编辑和加工。2.4 网页设计内容构想就具体设计环节而言，概括为两个方面：一方面是纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等；另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，制作策划，形象，宣传等等。网站设计优化的具体表现是：以用户需求为导向，设计方便的网站导航，网页下载速度尽可能快，网页布局合理并且适合保存、打印、转发，网站信息丰富、有效，有助于用户产生亲切感、信任感。通过对网站功能、结构、布局、内容等关键要素的合理设计，使得网站的功能和表现形式达到最优效果。构思阶段需要考虑以下内容：1.页面主题此网页的中心思想是通过网页浏览欣赏，利用文字介绍、图片展示，以图文并茂的形式来全面反映永昌整体面貌，渲染“浓郁的回乡风情”。 有主题就要进行宣传，设计网站的宣传标语。也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括，类似实际生活中的广告金句。本网站的主题宣传是：“我的家乡永昌”。2.页面内容内容要为网页主题服务。用文字介绍永昌的悠久历史、地区民族文化和民族文化精粹、文学艺术、书画名人及其优秀作品，永昌地理、环境概貌描述、图片说明，永昌风景名胜描绘，永昌经济状况和数据说明，永昌所辖城市面貌，永昌特产；用图片回顾永昌悠久的历史，再现解放永昌历史，展示永昌书画名人及其优秀作品，展现现代经济发展背景下的城市景观；永昌著名风景名胜区的自然人文景观；用Javascript语言编制多图片左移特效及多图片自动翻页特效，展示永昌所辖城市面貌和繁华的景象。3.结构布局版面指的是浏览器看到的完整的一个页面，就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须的。它们的基本原理是共通的。本网站的主页和绝大部分页面采用“回”字型结构布局，其中顶部、底部链接样式，以便统一协调。部分子页面采用“回”字型、“十”型、标题正文型、封面型布局，以配合特效页面设计。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。本次设计，利用表格布局页面。由于表格定位方便，在页面的布局中有很大的用处，浏览器在下载表格时，将表格中的所有内容（包括图像）都下载完毕后才显示。如果一个页面有很好的上下结构，就分成几个上下并列的表格，而不把整个页面中的所有内容都放在一个表格中，这样可以加快浏览速度，减少等待时间，如“永昌特产”，；如果版面是大块内容，就使用较粗的表格，即行列数不用太多，如永昌气候状况简介；如果页面内容比较细碎，就使用较细的表格，也可使用嵌套表格，即表格单元的内容是另一个表格，如主页，其中的“永昌简介”、 地图“永昌特色”等都是不同的内容，且内容较多，因此，使用嵌套表格。4.色彩搭配网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 “标准色彩”是指能体现网站型象和延伸内涵的色彩。彩色页面如同五彩缤纷的大自然，能给人美的享受，因此上色彩搭配必须得当。绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。同时，永昌是具有民族特色的地区，绿色是重要的色彩基调，让人欣赏后油然而生一种亲切之感，因此，以一幅绿色为基调的大型民族特色风情的图片，在二级、三级引用。第三章 网页内容简介3.1 网页功能简介本网页使用超链接，即把一个网页与一个网页连接起来，能够实现在“IE”浏览器中快速、全面地展示永昌的悠久历史、地区民族文化和民族文化精粹、文学艺术、书画艺术、书画名人及其优秀作品，永昌地理、环境概貌、风景名胜、人文景观，永昌经济状况、城市面貌、永昌特产等等现代发展成就。3.2 网页主要功能描述本网站分成多层链接关系，主要实现如下功能：1、简介永昌的基本情况，永昌的政区地图，永昌特色总览。2、展示永昌的悠久历史，历史来源和足迹，再现解放永昌历史。3、介绍永昌的自然生态环境，著名风景名胜区“两沙一景”沙湖、沙坡头的自然景观。4、介绍永昌九大文化、永昌文化、永昌文学及作品欣赏。5、展示永昌的繁荣景象。6、介绍永昌民族构成，展示其特色文化、民族风情。7、介绍永昌人口状况。8、介绍了永昌的地理概况。9、介绍了永昌的2010年经济统计数据，展现经济蓬勃发展势头。10、介绍了永昌特产。3.3网页的浏览 本网页在任何Windows环境下均可以打开浏览，只要双击“Untitled-1.html”，便可打开主页“我的家乡永昌”，点击其中的任意一个超级链接，便可随心所欲地去观赏永昌文化特色、文化作品、民族文化风采、风俗民情，观赏永昌的自然景观和人文景观，欣赏名胜风景等，特别北海子的自然景观。第四章 网页设计4.1 网页结构总图网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立