彭城万里网站设计
目录
一、引言 1
（一） 开发目的 1
（二） 开发意义 1
（三） 课题内容 1
（四） 开发技术 1
（五） 开发工具 2
1. Dreamwear 8 2
2. Photoshop CS8 2
3. AAALogoV3.0 2
二、 网站内容规划 2
（一） 网站主题 2
（二） 网站内容 2
1. 主体介绍 2
2. 细节介绍 2
（三）网站字体和颜色设置 3
三、 网站设计 3
（一） Logo 4
（二） 导航栏 5
（三） 主页 5
（四） 子页 6
四、 网站设计代码 8
（一） 首页制作细节 8
1. 结构图 9
2. Div板块代码 9
3. Dreamwear预览 11
（二） 子页制作 12
1. 结构图 12
2. Div板块代码 12
3. Dreamweaver预览 12
（三） 三级子页制作 13
1. 结构图 13
2. Div板块代码 13
3. Dreamweaver预览 14
五、 总结 14
致谢 16
参考文献 17
一、引言
本文主要分为三个部分，第一部分主要介绍开发鹏程万里网站的目的及意义。在制作过程中运用了AAALogoV3.0、Dreamwear、PhotoShop CS等软件。第二部分通过其他 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
动态网站的模仿学习，设计了彭城万里静态网。把网站分为五个部分，分别是“彭城万里”首页、“经济发展”、“风俗艺术”、“五省通衢”、“著名人物”，对不同的部分进行功能分析，设计理念讲解。第三个部分也就是最后总结本次网站设计的心得感悟和学习到的知识。
开发目的
徐州，古代称为彭城。所以我为网站取名彭城万里，取自谐音鹏程万里。彭城万里网站主要是介绍徐州的古往今来，风土人情。随着现代社会的发展，人民的生活水平的有所提高，进而促进了服务业的发展，所以在当今社会，一个城市的发展如同一个国家的发展，要走可持续发展道路，大力发展第三产业。彭城万里网站的开发不仅有助于网民了解徐州的历史，也为了让更多的人了解徐州文化，起到对旅游业的支持作用。
开发意义
随着21世纪的到来，人类进入了互联网时代，网络大大改变了人们的生活。中国的网络发展速度令人瞠目咋舌。一些新兴的产业伴随着互联网也有了巨大的发展。开发彭城万里网站是跟随时代发展的步伐，通过网络营销一个城市。运用（移动）互联网、大数据等技术重新看待一个城市发展的新的突破口。而在现有的网站中有太多的诟病需要去改变，通过对现在有网站重新定位，针对现在社会的快节奏，设计了简约，方便为主题，主要面向快节奏生活的都市人。同时，网站设计也为现有的网络教学提供了良好的教材，通过对现有的资源整合，根据相应逻辑顺序，让学习者可以一目了然的了解徐州的历史，学习一个城市的灿烂文明。彭城万里网站设计主要分为这两个设计初衷。后期可以通过相应的需求对网站进行更改，充分适应互联网时代。
课题内容
彭城万里网站主要根据四个方面，经济，文化，交通，人物。通过图片与文字相结合，生动形象的传达出徐州的千年文化。在每个子页内容上已详细的文字，或者文章等讲述徐州各具特色的文化风俗，古往今来的历史名人。网站制作过程中主要运用div(区)和CSS（层叠样式表）技术，在Dreamweaver 中编辑，在猎豹浏览器中运行。
开发技术
网站的制作离不开两个元素——文字和图片。这是最基本的两个元素。现在网站制作的主流代码就是DIV（区）+CSS（层叠样式表），本网站即采用这种代码。根据对网页编排的整体架构和目录结构，利用DIV+CSS技术，实现网站的建立。这种架构方式有利于样式表的修改，制作出统一的风格。同时，有大大提高了网页的加载速度，做到干净整洁，加载迅速。另外是一个最重要的显示技术，静态HTML页。在编辑网站时直接输入相应的标签，即可控制文本字体，字号颜色，网页背景等。方便快捷一直是网站制作追求的目标，利用DIV+CSS技术和静态HTML页设计网站恰恰符合现代网页制作的方便快捷的要求。
开发工具
Dreamwear 8
MacromediaDreamweaver 8（Dreamweaver8）是现在的一款主流软件。它特点主要是可视化、支持多平台和跨浏览器，集网页设计。因为在学校的学习过程中也有接触过Dreamweaver软件，所以我下载的中文版，这样在编辑网站时方便了我的制作过程。
Photoshop CS8
Photoshop是Adobe公司推出的一款软件。Photoshop CS8拥有简洁的工作界面和多种功能。主要特点有两个，一个是拥有改进的文件浏览器，方便快速预览查看，另外一个是拥有Layer Comps（图层复合）功能，可以在一个文件中保存不同层的合并效果，以便对各种效果进行快速察看。在制作网页图片时，包括Flash文件的制作都需要使用Photoshop软件提前进行切片制作，之后才能插入网页中。
AAALogoV3.0
这款软件是在校期间，网站美工老师发给我们的一款免费软件，这款软件有100多种模板，2080多种素材。可以结合自己的想象设计，也可以选取相应的模板修改。这款软件的小缺点是不支持中文字体，但这也不影响logo的设计，可以后期使用ps技术。总体使用起来非常方便。
网站内容规划
网站主题
城市的文化主题网站，让更多的人了解到徐州的历史文化，同时做到一个城市的互联网宣传。同时也促进旅游业的发展。
网站内容
主体介绍
彭城万里网站主要是介绍徐州的历史文化、风土人情。网站首页介绍徐州这座城市的大概情况以及五个极具特色的地点，其他四个子页介绍徐州的经济文化等其他方面。网站内容从点到线从，从线到面，从不同的方位带你了解徐州。方便任何一位网友使用，无论你是旅游、学习还是查找资料等等。
细节介绍
彭城万里：
网站首页名为“彭城万里”，上部为网站logo和一张徐州风景的全景图。让初次进入本网站的网友有一个深刻的印象。接着便是网站的导航，分为“彭城万里”，“经济发展”，“风俗艺术”，“五省通衢”，“著名人物”五个部分。首页中部是一个javascript语言，主要是四个特色的徐州风景区：徐州电视塔、徐州火车站、徐州音乐厅、淮海纪念塔。通过图片的展示，可以给浏览者留下深刻的印象。最后，便是简单的文字综述，以及网站的的制作版权。
图1网站结构示意图
Logo
Logo的设计是一个取自徐州的第一个字母“X”的设计灵感，在下面是徐州的拼音写法，另外是一匹奔马与彭城万里主题呼应。另外交叉的设计理念又寓意着徐州地理位置的重要性标志着徐州的“五省通衢”交通要道。如图2所示：
一、引言 1
（一） 开发目的 1
（二） 开发意义 1
（三） 课题内容 1
（四） 开发技术 1
（五） 开发工具 2
1. Dreamwear 8 2
2. Photoshop CS8 2
3. AAALogoV3.0 2
二、 网站内容规划 2
（一） 网站主题 2
（二） 网站内容 2
1. 主体介绍 2
2. 细节介绍 2
（三）网站字体和颜色设置 3
三、 网站设计 3
（一） Logo 4
（二） 导航栏 5
（三） 主页 5
（四） 子页 6
四、 网站设计代码 8
（一） 首页制作细节 8
1. 结构图 9
2. Div板块代码 9
3. Dreamwear预览 11
（二） 子页制作 12
1. 结构图 12
2. Div板块代码 12
3. Dreamweaver预览 12
（三） 三级子页制作 13
1. 结构图 13
2. Div板块代码 13
3. Dreamweaver预览 14
五、 总结 14
致谢 16
参考文献 17
一、引言
本文主要分为三个部分，第一部分主要介绍开发鹏程万里网站的目的及意义。在制作过程中运用了AAALogoV3.0、Dreamwear、PhotoShop CS等软件。第二部分通过其他 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
动态网站的模仿学习，设计了彭城万里静态网。把网站分为五个部分，分别是“彭城万里”首页、“经济发展”、“风俗艺术”、“五省通衢”、“著名人物”，对不同的部分进行功能分析，设计理念讲解。第三个部分也就是最后总结本次网站设计的心得感悟和学习到的知识。
开发目的
徐州，古代称为彭城。所以我为网站取名彭城万里，取自谐音鹏程万里。彭城万里网站主要是介绍徐州的古往今来，风土人情。随着现代社会的发展，人民的生活水平的有所提高，进而促进了服务业的发展，所以在当今社会，一个城市的发展如同一个国家的发展，要走可持续发展道路，大力发展第三产业。彭城万里网站的开发不仅有助于网民了解徐州的历史，也为了让更多的人了解徐州文化，起到对旅游业的支持作用。
开发意义
随着21世纪的到来，人类进入了互联网时代，网络大大改变了人们的生活。中国的网络发展速度令人瞠目咋舌。一些新兴的产业伴随着互联网也有了巨大的发展。开发彭城万里网站是跟随时代发展的步伐，通过网络营销一个城市。运用（移动）互联网、大数据等技术重新看待一个城市发展的新的突破口。而在现有的网站中有太多的诟病需要去改变，通过对现在有网站重新定位，针对现在社会的快节奏，设计了简约，方便为主题，主要面向快节奏生活的都市人。同时，网站设计也为现有的网络教学提供了良好的教材，通过对现有的资源整合，根据相应逻辑顺序，让学习者可以一目了然的了解徐州的历史，学习一个城市的灿烂文明。彭城万里网站设计主要分为这两个设计初衷。后期可以通过相应的需求对网站进行更改，充分适应互联网时代。
课题内容
彭城万里网站主要根据四个方面，经济，文化，交通，人物。通过图片与文字相结合，生动形象的传达出徐州的千年文化。在每个子页内容上已详细的文字，或者文章等讲述徐州各具特色的文化风俗，古往今来的历史名人。网站制作过程中主要运用div(区)和CSS（层叠样式表）技术，在Dreamweaver 中编辑，在猎豹浏览器中运行。
开发技术
网站的制作离不开两个元素——文字和图片。这是最基本的两个元素。现在网站制作的主流代码就是DIV（区）+CSS（层叠样式表），本网站即采用这种代码。根据对网页编排的整体架构和目录结构，利用DIV+CSS技术，实现网站的建立。这种架构方式有利于样式表的修改，制作出统一的风格。同时，有大大提高了网页的加载速度，做到干净整洁，加载迅速。另外是一个最重要的显示技术，静态HTML页。在编辑网站时直接输入相应的标签，即可控制文本字体，字号颜色，网页背景等。方便快捷一直是网站制作追求的目标，利用DIV+CSS技术和静态HTML页设计网站恰恰符合现代网页制作的方便快捷的要求。
开发工具
Dreamwear 8
MacromediaDreamweaver 8（Dreamweaver8）是现在的一款主流软件。它特点主要是可视化、支持多平台和跨浏览器，集网页设计。因为在学校的学习过程中也有接触过Dreamweaver软件，所以我下载的中文版，这样在编辑网站时方便了我的制作过程。
Photoshop CS8
Photoshop是Adobe公司推出的一款软件。Photoshop CS8拥有简洁的工作界面和多种功能。主要特点有两个，一个是拥有改进的文件浏览器，方便快速预览查看，另外一个是拥有Layer Comps（图层复合）功能，可以在一个文件中保存不同层的合并效果，以便对各种效果进行快速察看。在制作网页图片时，包括Flash文件的制作都需要使用Photoshop软件提前进行切片制作，之后才能插入网页中。
AAALogoV3.0
这款软件是在校期间，网站美工老师发给我们的一款免费软件，这款软件有100多种模板，2080多种素材。可以结合自己的想象设计，也可以选取相应的模板修改。这款软件的小缺点是不支持中文字体，但这也不影响logo的设计，可以后期使用ps技术。总体使用起来非常方便。
网站内容规划
网站主题
城市的文化主题网站，让更多的人了解到徐州的历史文化，同时做到一个城市的互联网宣传。同时也促进旅游业的发展。
网站内容
主体介绍
彭城万里网站主要是介绍徐州的历史文化、风土人情。网站首页介绍徐州这座城市的大概情况以及五个极具特色的地点，其他四个子页介绍徐州的经济文化等其他方面。网站内容从点到线从，从线到面，从不同的方位带你了解徐州。方便任何一位网友使用，无论你是旅游、学习还是查找资料等等。
细节介绍
彭城万里：
网站首页名为“彭城万里”，上部为网站logo和一张徐州风景的全景图。让初次进入本网站的网友有一个深刻的印象。接着便是网站的导航，分为“彭城万里”，“经济发展”，“风俗艺术”，“五省通衢”，“著名人物”五个部分。首页中部是一个javascript语言，主要是四个特色的徐州风景区：徐州电视塔、徐州火车站、徐州音乐厅、淮海纪念塔。通过图片的展示，可以给浏览者留下深刻的印象。最后，便是简单的文字综述，以及网站的的制作版权。
图1网站结构示意图
Logo
Logo的设计是一个取自徐州的第一个字母“X”的设计灵感，在下面是徐州的拼音写法，另外是一匹奔马与彭城万里主题呼应。另外交叉的设计理念又寓意着徐州地理位置的重要性标志着徐州的“五省通衢”交通要道。如图2所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1872.html
