网页设计过程中div+css命名规则

网页设计过程中div+css命名规则
网页设计过程中div+css命名规则

内容:content/container

导航:nav

侧栏:sidebar

栏目:column

标志:logo

页面主体:main

广告:banner

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

搜索:search

页脚:footer

滚动:scroll

版权:copyright

友情链接:friendlink

子菜单:submenu

内容:content

标签页:tab

文章列表:list

注册:regsiter

提示信息:msg

小技巧:tips 加入:joinus

栏目标题:title

指南:guild

服务:service

状态:status

投票:vote

尾:footer

合作伙伴:partner

登录条:loginbar

页面外围控制整体布局宽度:wrapper 左右中:left right center

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav

侧栏:sidebar 栏目:column 左右中:left right center

页面外围控制整体布局宽度:wrapper

(2)导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu 子菜单:submenu 标题: title 摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

(四)class 的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) 字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事项:

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.

主要的master.css 模块module.css 基本共用base.css

主题themes.css 专栏columns.css 打印print.css

文字font.css 表单forms.css 补丁mend.css 布局,版面layout.css

CSS命名规则

头:header

内容:content/containe

尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

登录条:loginbar

标志:logo

广告:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

XHTML文件中id的命名

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

做网页时,常会因为不会命名和命名重复而造成好多不不必要的麻烦,正确的命名的确很重要,我这里也收集了一些命名规则,发上来大家共享下。

1.CSS ID 的命名

外套:wrap

主导航:mainnav

子导航:subnav

页脚:footet

整个页面:content

页眉:header

页脚:footer

商标:label

标题:title

主导航:nav(mainnav/globalnav)

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

当前位置:loc

旗志:logo

标语:banner

菜单内容1:menu1 content

菜单容量:menu container

子菜单:submenu

边导航图标:sidebarIcon

注释:note

面包屑:breadcrumb(即页面所处位置导航提示)

容器:container

内容:content

搜索:search

登陆:Login

功能区:shop(如购物车,收银台)

当前的current

网站公用相关

Container div #container 容器

Header or banner div #header 页头部分

Main or global navigation div #main-nav 主导航

Menu #menu 菜单

Sub Menu #submenu 子菜单

Left or right side columns #sidebar-a, #sidebar-b 左边栏或右边栏Main div #main 页面主体

Content div #content 内容部分

The main content area #content-main 主要内容区域

Footer div #footer 页脚部分

Tag #tag 标签

Message #msg #message 提示信息

Tips #tips 小技巧

Vote #vote 投票

Friend Link #friendlink 友情连接

Title #title 标题

Summary #summary 摘要

Sub-navigation list #sub-nav 二级导航

Search input #search-input 搜索输入框

Search output #search-output 搜索输出和搜索结果相似

Search #search 搜索

Search results #search-results 搜索结果

Copyright information #copyright 版权信息

brand #branding 商标

branding-logo #branding-logo LOGO

Site information #siteinfo 网站信息

Copyright information etc. #siteinfo-legal 法律声明

Designer or other credits #siteinfo-credits 信誉

Join us #joinus 加入我们

Partnership opportunities #partner 合作伙伴

Services #service 服务

Regsiter #regsiter 注册

Status #status 状态

电子贸易相关

Products .products 产品

Products prices .products-prices 产品价格

Products description .products-description 产品描述

Products review .products-review 产品评论

Editor's review .editor-review 编辑评论

New release .news-release 最新产品

Publisher .publisher 生产商

Screen shot .screenshot 缩略图

FAQ .faqs 常见问题

Keyword .keyword 关键词

Blog .blog 博客

Forum .forum 论坛

2.另外在编辑样式表时可用的注释可这样写:

<-- Footer -->

内容区

<-- End Footer -->

3.样式文件命名

主要的master.css

布局,版面layout.css

专栏columns.css

文字font.css

打印样式print.css

主题themes.css

网页切图过程中div+css命名规则

内容:content/container 导航:nav 侧栏:sidebar

栏目:column 标志:logo 页面主体:main

广告:banner 热点:hot 新闻:news

下载:download 子导航:subnav 菜单:menu

搜索:search 页脚:footer 滚动:scroll

版权:copyright 友情链接:friendlink 子菜单:submenu

内容:content 标签页:tab 文章列表:list

注册:regsiter 提示信息:msg 小技巧:tips

加入:joinus 栏目标题:title 指南:guild

服务:service 状态:status 投票:vote

尾:footer 合作伙伴:partner 登录条:loginbar

页面外围控制整体布局宽度:wrapper 左右中:left right center

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav

侧栏:sidebar 栏目:column 左右中:left right center

页面外围控制整体布局宽度:wrapper

(2)导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu 子菜单:submenu 标题: title 摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

(四)class 的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事项:

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.

主要的master.css 模块module.css 基本共用base.css

主题themes.css 专栏columns.css 打印print.css

文字font.css 表单forms.css 补丁mend.css 布局,版面layout.css

web网页设计报告

web网页设计专业物流工程学院 班级物流1301 姓名李维源 学号 2016年5月4日

第一部分:实训目的 21世纪是一个信息时代,Internet已经进入人们生活与工作的各方面,而网页作为Internet信息传递的重要载体,其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力,并且上传到网上去,让更多人认识我,更好的宣传自己。 第二部分:实训准备 通过一个学期的web网页设计课程的学习,我终于明白我们浏览的每个漂亮的网页是怎么做出来的,我也想自己亲手来做自己的个人网站。在做个人网站之前,我做以下准备:理清自己的思绪,想清楚自己的网站设计,做模板,找素材,进行站点的规划和素材、资料的收集,要按照制作网站的步骤一步一步来完成。 第三部分:实训要求 1、主题鲜明、内容充实;颜色清新、舒适、结构合理; 2、导航清楚、栏目合理、层次分明、使用方便 3、设计8至15个页面。内含:用户注册,登录系统,留言系统、统计在线人数,设为首页、加为收藏等动态网页内容。 第四部分:个人网站的总体规划和步骤 1.设计的思路 我的个人网站主要是以绿为主,以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉。得到心灵的慰藉! 2.绿色网站的意义 我设计的这个网站主要是给人轻松舒爽、赏心悦目的感觉,让人们置身于一种美丽大自然的意境中,明快而错落的绿,让人仿佛来到青山翠谷。 网站的总体风格 网站的总体风格主要是以绿色为主,以淡色为辅,充满活力,生机。具有个性色彩。 网站的布局其实很简单,主要是做好一个模版,模版做好框架了,那网站就初步形成了,虽然主要框架做好了,但是也不要高兴得太早哦,但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先,在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条,之后下面就插入自己想要的风格,虽然用模版做出来的风

网页设计实验报告

实验报告 课程名称网络技术基础实验项目TCP/IP协议配置实验仪器计算机 系别 专业 班级/学号 学生姓名 实验日期 成绩 指导教师

实验一 TCP/IP协议配置 一、实验目的(标题黑体小四) 1.熟练掌握模板的用法。 2.掌握CSS的用法。 3.掌握网站发布的方法。 二、实验内容 1. 创建和使用模板。 2. css的创建和使用。 3. 发布网站。 三、实验课时 4课时 四、实验步骤 创建网站 1、创建一个站点,并创建 images 文件夹存放图片。将示例图片拷贝至images 目录下 2、创建 CSS 文件,名称为 style.css,将其保存至 style文件夹。 3、创建模板文件 tpl.dwt,并保存。结果如下: (1) 给 tpl.dwt 附加样式表 style.css。 在 tpl.dwt 的空白处点击鼠标右键,选择“附加样式表”: 选择 style.css 文件: 完成后,在 tpl.dwt 的 head标签里有如下的代码: (2) 设置模板的背景颜色。打开 CSS 面板,为 style.css 新建一条 css 规则。过程如 下:

将背景颜色设为#ff1e70: 在 style.css 生成如下的代码: body { background-color: #ff1e70? } 3) 制作布局。插入一 2 行 2 列的表格。表格的宽度=316+634=950,其他的设置:让表格居中对齐。 (4) 消除表格两边的空隙。展开 CSS 样式表,双击 body: 双击 body后,打开“body的 CSS 规则定义”对话框,按照下面的方式设置:Style.css 的代码变为: body { background-color: #ff1e70? margin: 0px? }

网页分析报告

高 校 艺 术 网 页 设 计 分 析 姓名 班级 学号: 学院:国际教育学院

一、网站设计 1.1、网站设计的意义 网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求,在教师指导下对学生进行的网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程。 因此,加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素有着重要的作用。 1.2、网站设计的目的 1通过综合实训进一步巩固,深化和加强学生的理论知识与专业技能 (1)、进一步熟悉和掌握网站建设的基本流程和技术规范; (2)、巩固运用Dreamweaver网页制作软件制作静态网页的知识; (3)、巩固综合运用Dreamweaver独立设计一个内容完整、图文并茂、技术运用得当的网站; (4)、具备独立撰写实训报告的基本能力; (5)、在网页设计的实践中培养分析问题、解决问题的能力,培养创新能力和团队意识; (6)、培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力,树立自信心; (7)、为今后从事网站开发、维护和管理奠定基础。 1.3、网站设计的任务 1、站点规划,搜集资料。确定网站主题内容,规划站点结构,从网上搜索相关资料(图片、文字等)。 2、进行主页设计。构思主页布局,进行主页标题图片的设计(要求原创),进行主页其余图片的设计和页面内容的录入,最后进行主页的整体优化设计。 3、动画设计。主页动画设计和其余页面动画设计,充分运用所掌握技术,效果好。

Web网页设计实验报告

WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术(信息技术及应用) 班级计信2班 学生蒋波涛 重庆交通大学 2013年

目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)

一、设计目的 在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素质。学会和团队配合,逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。首先,做好需求调研。调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。 然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。 我们选做的主题是个人主页,并且选定题目为“红尘客栈”,其目的是做一个简单的网站,介绍酒店概况,提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。 1.点击“ALT+F6”键,进入布局模式,插入布局表格。建立一个大概的布局。 2.使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。 (二)网页中的图像

htmljavascriptcss技术综合网页设计报告

通信信息网 课 程 结 业 报 告
课题名称 专业班级: 姓 学 名: 号: 2014.12.29-2015.01.10 网页制作 通信工程
起止时间:
重庆交通大学 信息科学与工程学院

一.实验原理
(一)整体结构文件 Assets 中放着两 个文件夹:文件 夹 av 和文件夹 img。 文件夹 av 在编码 过程中所引用的 音频文件和视频 文件
文件夹 img 存放 着编码所调取的 图片文件
Component 用 于 存 放 AngularJs 和 BootStrap 的 必 需 文 件 : angular.js, bootstrap.css, bootstrap-them e.css
Controllers 中 存 放着运动商品店控 制器
Css 文件中存放 着 bootstrap 的 必需文件和编码 过程中用来装饰 html 的 css 文 件: tidy1 用来装 饰 index.html、 tidy2 用来装饰 酷我世界.html、 tidy3 用来装饰 运动商店.html、

tidy4 用来装饰 修炼空间.html
Filters 用来存放过 滤 器 customFilters.js Web 中存放的是编 写的网页文件:
index.html , music.html , 修 炼空间 .html, 影 视.html, 运动商 店.html, 酷我视 界,html 运行图标,点击 谷歌浏览器运行 调试。
(二)HTML 是超文本标记语言(HyperText Markup Language)的缩写,是为
“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 通常 我们需要掌握的标记/标签不多,如常见的 body、head、title、p、img、a、div、 span、ol、table 等。请注意如 font、big、center 等标签是不推荐使用的。
标签


描述 定义注释。 定义文档类型。 定义锚。 定义缩写。 定义只取首字母的缩写。 定义文档作者或拥有者的联系信息。 不赞成使用。定义嵌入的 applet。 定义图像映射内部的区域。 定义文章。

简单网页制作实验总结报告

《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日

目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)

第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”,包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句,色彩缤纷,十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐,影视,购物等非常热门的东西,本站设计的主题是花,能让人们在闲下来的时候看看花,品品诗歌,所以做有关花的网页是个不错的选择。同时,让人们分清楚春夏秋冬都各有什么典型的花。

第二章网站内容设计 1.1链接1标题:春の花 春天是生命的季节,在这个季节里,万物复苏。所以就找了虞美人,桃花,牡丹,以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题:夏の花 夏天充满了激情与阳光,我找了兰花,荷花,百合花等来代表这个季节,色彩艳丽,十分醒目夺人。 1.3 链接3标题:秋の花 大丽花,菊花,月季和牡丹花都竞相出现在本网页,色彩缤纷,赏心悦目。 1.4 链接4标题:冬の花 蝴蝶兰,水仙,迎春花,梅花是冬季的代表,他们刻画了一副傲立冬天的坚强的姿态。

网站设计分析报告

网站设计分析报告 导读:本文网站设计分析报告,仅供参考,如果觉得很不错,欢迎点评和分享。 网站设计分析报告 一、网站的设计目标:《Hi购网》是用于实现为有需求商家聚集足够消费者,并使消费者得以更低折扣购买商品的平台。 二、网站的主题:《Hi购网》是设计一个网上团体购平台,并进行商品展示和销售管理。 三、网站的CI设计: 1. 《Hi购网》取“Hi”和“High”的同音,所以LOGO设计成一个跃起的简易的人物形象。 2.《Hi购网》是以“团购”为题材的网站,所以网站的整体形象以热情的橙色为主调,以白色为底并用暗红色最为点缀色。 3.整个网站主题采用宋体字。 4. 《Hi购网》的口号是:“上Hi购,放心high!” 四、网站的风格:《Hi购网》的设计风格是给人一种热情红火的感觉。 五、网站的功能需求:前台包含的模块有: 注册,登录,修改会员信息,查看订单,取消订单,确认收货,申请退货;后台包含的模块有:订单管理,会员管理。每个功能模块的具体描述:注册,添加新用户将用户信息添加到数据库;登录,登录到相应会员的主页面;修改会员信息,对会员注册的信息进行修改并

将修改后的结果添加到数据库;查看订单:查看订单信息和处理情况;取消订单,在订单发货前可以对订单进行取消操作;确认收货,会员确认收货后订单情况显示“已完成”;申请退货,会员确认收货30天内可以进行退货申请;订单管理,管理员可以对订单进行删除修改等操作;会员管理,管理员可以对会员进行删除等操作。 六、网站的运行环境和开发环境:运行环境windows,开发环境:VS。 七、网站的其他设计要求需求分析: 1. 《Hi购网》界面要求主要遵循简洁清晰又不失美观并易于用户操作的宗旨。 2.安全要求主要包括:用户可以浏览,选购商品但没有对商品进行修改和删除的权限;管理员登陆后台系统后才能对商品,会员,订单等信息实现管理。 3.用户注册登陆后才能进行商品的购买,管理员要对用户的身份进行验证。 八、网站的目录结构 九、网站的设计进度及时间安排 感谢阅读,希望能帮助您!

网页设计基础_实训

第2章网页设计基础 2.1 实训页面布局综合练习 2.1.1 实训目的 进一步理解在V isual Studio环境中创建、编辑和引用CSS样式表文件的基本步骤。理解层元素在页面布局中的重要作用及使用方法。综合运用CSS+DIV布局技术设计出实用的网站主页。 2.1.2 实训要求 新建一个https://www.360docs.net/doc/ad18780261.html,网站,在Default.aspx中使用CSS+DIV技术设计出图2-1所示的网站主页效果。要求页面中导航栏、销售排行榜中内容使用https://www.360docs.net/doc/ad18780261.html,标准控件HyperLink,商品名称、商品种类、用户名、密码栏使用https://www.360docs.net/doc/ad18780261.html,标准控件TextBox,所有按钮使用https://www.360docs.net/doc/ad18780261.html, 标准控件Button,商品种类栏使用https://www.360docs.net/doc/ad18780261.html,标准控件DropDownList。 图2-1 网站主页设计效果图2-2 页面设计中需要的图片文件 2.1.3 实训步骤 1. 准备需要的图片文件 任何一个网页的页面设计都会用到一些图片文件,一般情况下这些图片文件可根据设计需要,事先使用Photoshop等图片编辑软件制作出来。也可以通过搜索引擎(如https://www.360docs.net/doc/ad18780261.html,、

https://www.360docs.net/doc/ad18780261.html,等)从Internet中下载。本实训页面设计中需要的图片文件如图2-2所示。 新建一个https://www.360docs.net/doc/ad18780261.html,网站,在站点文件夹中创建一个名为“images”的子文件夹,将本实训中需要的所有图片文件复制到该文件夹中。如果在解决方案资源管理器中不能看到新建的文件夹,可右键单击网站名称在弹出的快捷菜单中执行“刷新文件夹”命令使其显示出来。 2. 设计页面布局 如图2-3所示,根据设计效果需要可将页面划分在若干个层中,商品描述信息分别放置在两个表中。 图2-3 页面布局规划 各元素说明如下: div:整个页面所在区域。 div (#logo):页面Logo栏(网站标题栏)区域。 div (#navigation):导航栏区域。 div (#left_top):“商城通行证”区域。 div (#left_bottom):“销售排行榜”区域。 div (#right_content):页面右侧信息显示区域。 div (#search):搜索栏区域,包含在div (#right_content)区域中。 div (#tab):商品信息显示区域,包含在div (#right_content)区域中。 table:商品信息显示区域,两条信息使用两个表格。包含在div (#tab)区域中。 div (#bottom_line):页面底部分隔线区域。 div (#footer):页面底部版权栏区域。 3. 分区域页面设计 (1) 页面整体样式控制 向页面中添加一个CSS样式表文件,从解决方案资源管理器中将CSS样式表文件拖动到页面的设计视图,创建页面与CSS样式表的关联。 在样式表代码窗口向body样式规则中添加如下样式控制代码,用于定义整个网页中默认的字体及对齐方式。

CSS页面布局及样式设计实验报告

实验项目名称: CSS页面布局及样式设计 (所属课程:web系统与技术) 学院:计算机学院专业班级:11级计科信息姓名:学号: 实验日期:实验地点:A06-404 合作者:指导教师:李 本实验项目成绩:教师签字:日期: 一、实验目的 (1)掌握CSS中的定位属性使用方法。 (2)掌握DIV+CSS的页面布局方式。 (3)掌握CSS中的常用属性的使用方法。 (4)理解CSS的样式构造。 二、实验条件 安装Web开发环境的微机。 三、实验内容 (1)重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。 (1)对聊天室的注册页面、登陆页面和聊天页面进行样式设计。 四、实验步骤 (1)注册页面使用CSS将注册表单居中显示,表单内嵌入表格将文本与输入域格式化显示,表单内使用label标签。 (2)登录页面中添加div层用于显示在线用户数。 (3)登录页面使用div将登录表单,在线用户数,logo图片,超链接等页面元素重新定位布局。 (4)聊天页面改用div标签并使用CSS的position定位属性进行布局,框架内的独立页面使用float属性进行布局。 (5)使用CSS设置三个页面的背景颜色或背景图片。 (6)注册页面使用CSS设计所有输入框和提交按钮的样式。 (7)登录页面使用CSS设置的超链接的字体和下划线、登录表单使用圆顶角、在线用户数使用图片数字,使用CSS设计登录按钮的显示样式。

(8)聊天页面中使用CSS设计信息发送表单和发送按钮的样式,设计用户信息列表和聊天信息段落的的显示样式。 五、实验结果 注册界面效果图及代码: //总体框架 //添加图片代码 //用户注册信息代码

注册信息

用户姓名:

用户密码:



--> 姓    别:

电子商务网站设计报告

电子商务网站设计 报告

网站设计报告 一、设计目标: 经过电子商务网站设计的学习,学会用dreamweaver等软件来对一个网站进行系统的设计,从理论知识的掌握,转向操作技能的提高,进而提高个人总体计算机网络水平的提高。 二、理论知识的准备: 1.为了满足爷面制作的目标,应该注意哪些问题? A网页结构网页结构要清晰,易于导航,思路和脉络要符合访问者的想法。可采取的措施有:采用框架结构表现主题,索影和正文;网页的大小一般控制在50KB以内;在网页的尾部放上联系方式,如E-MAIL,以方便访问者能建立联系,反馈必要的信 息 B页面内容一般情况下,网页都要以内容为主,不必过分的追求复杂的表现形式,但必须写好简介,要有特色,避免太空,泛泛而谈。页面本身要简单,结构复杂的网页不但要花费很多的精力,而且由于超连接复杂,让浏览者阅读时也感觉困难 C文字在以内容为主的前提下,应当尽量把形式与内容结合起来。既不要把页面弄的花哨,也不呀只讲内容完全不讲究文字和图片的安排,要容易阅读。要注意:网页的标题要简洁,明确,能反映整个文档的内容;在文本叙述部分使用水平线分割不同的部分;对重点的文章和段落要使用强调字体表示

D图形设计好图形并合理使用能给网页增色。网页中插入的图形尽量要小,网页中图形要附加文字说明,使人在图形出来之前了解相关内容;不要为图形加太长的交互文本,也不要把所有的超连接放在图上;控制页面中的图的数量,不要滥用图象GIF 2. 网站设计的过程中,最中要的一个原则是什么?为什么? 网站最重要的原则是创意。虽然网站的主要目的是传送给人们它的信息,但在传递信息的同时还把她的文化传递给获取信息的这些人。软件的掌握是短期就能速成的,而且新的软件成出不穷,功能越来越强大,可是使用这些软件必须要有良好的网站设计概念才能创造优秀的网站,这是网站制作的核心。网站的制作是按一定的步骤进行的,不同的网站设计着对网站有不同的看法和看法,可是有个共同观点:仅会输入文本,制作超级连接,排列图片不是真正意义上的网页制作,因为网页制作最重要的一个原则是创意。 3.动态网页的工作原理 动态网页是与静态网页相对应的,也就是说,网页 URL的后缀是.htm、.html、.shtml、.xml等静态网页的常见形动态网页制作专家式,而是以.aspx.asp、.jsp、.php、.perl、.cgi等形式为后缀,而且在动态网页网址中有一个标志性的符号——”?”。动态网页的工作原理与静态网页比较类似,可是在服务器端有很大差别。服务器端接到客户端发出的请求后,首先会找到所要浏览的动态网页文件,然后解释执行其中的程序代码,将含有程

简单网页设计实验总结

简单网页设计实验总结 引导语:写总结,必须实事求是,事实要准确,不能报喜不报优,不要夸大其词。下面是小编为大家精心整理的关于简单网页设计实验总结范文,欢迎阅读! 简单网页设计实验总结一:站点设置本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。 1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。 1)执行“站点管理站点”命令,在弹出的“管理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中选择“站点”命令。 2)在弹出的“站点定义为”对话框中单击“高级”选项卡。 3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中选择所创建的站点文件夹。 在“默认图象文件夹”文本框中选择存放图象的文件夹,

完成后单击“确定”按钮,返回“管理站点”对话框。 4)在“管理站点”对话框中单击“完成”按钮,站点创建完毕。 实验开始之前要先建立一个根文件夹,在实验的过程中把站点存在自己建的文件夹里,这样才能使实验条理化,不至于在实验后找不到自己的站点。 在实验过程中会出现一些选项,计算机一般会有默认的选择,最后不要去更改,如果要更改要先充分了解清楚该选项的含义,以及它会造成的效果,否则会使实验的结果失真。 实验前先熟悉好操作软件是做好该实验的关键。 简单网页设计实验总结二:页面图像设置1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件; 4、安装acdsee、photoshop等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 设置页面的背景图像,并创建鼠标经过图像。 1) 在“页面属性”对话框中设置页面的背景图像。 2) 在页面文档中单击“”插入鼠标经过图像。 实验结束后我们可以看到页面的背景变成了我们插入

实验一 网页设计基础实验

实验一网页设计基础实验 一、实验目的 1.掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点; 2.了解网页布局的形式。 二、实验内容 1.根据网站制作的需要,从网上下载网页制作时需要的文字、小图片、动画及flash。 2.上网访问实际若干网站,了解各网站的风格(主题图形形象、导航是否清晰,整体色调的搭配是否协调,主题是否突出等)。 3.在网上找出下列版面布局的结构形式: ⑴.“T”结构布局 "T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人"看之无味"。 "口"型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。 "三"型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。 对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。 POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点,比如https://www.360docs.net/doc/ad18780261.html,。优点显而易见:漂亮吸引人 进入internet找到以上各种布局 4.利用搜索引擎,浏览因特网上较为著名的5个网站,记录这些网站的名称、网站地址和以及相应的网页文件格式(扩展名);

DIV+CSS网页设计规范总结

DIV+CSS布局的好处 1 内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。 2 改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML 和程序页面,只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。 3 搜索引擎更友好,排名更容易靠前。 第一内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理。生成的HTML文件代码精简,更小打开更快。 这个是DIV+CSS技术最现著的特点,也是CSS存在的根源。完全的颠覆现在传统(table)网页设计的技术。所有现在用table制作的内容,都可以用CSS来解决掉,而且解决的更完美,更强大。不需要大家再表格套表格,只需要用div套div就可以实现以往表格套表格所有的美工,这样的结果就是使用div+CSS技术,让生成的网页文件大小更精简,更小。table时代,一个页面表格达到10个以上是非常普遍的事情,但是现在用DIV+CSS,一个table都可以不用,就完全达到之前的效果,这就直接导致网页文件大小比使用table 时减少50%-80%,更节约各位站长的硬盘空间,访问者打开网页时更快,而且用div+CSS 时,不像以往使用table时,必须把全部table读取完了才显示页面内容,现在是可以读一个div就显示一个效果,大家打开网页不用等。好处真是明显而强大。 这个优点的确是显著的,凡是使用传统table建的网页,内容多的话,有时候达到30K 左右都有可能,文件打了打开时,肯定就有0.0几秒的延迟。使用DIV+CSS,由于没有表格使用,你前台打开看到的全是直接内容,CSS文件都是导入链接的,是另一个文件,根本和HTML文件大小没关系,这种生成的HTML文件,一个也就10K左右大小。文件数量少时看不出来,但是文件万级以上时,还是会节约几十M大小的。 但是使用table制作网页框架和表格时,全是选择化制作的,也就是说不用大家去写代码,很简单输入边框和行数列数就可以达到制作出来的要求,但是使用div+CSS时,完全是靠手写代码,一个表格写四行代码的话,如果一个页面涉及十多个div表格生成,手写代码将超过50行,而且如果你数学不好,或是逻辑思维能力不强的话,你手写出来的表格将是乱78糟,出现表格重叠和位置完全不正确。因为用div+css写表格时,表格间的逻辑

网页设计实训报告

网页设计 课程设计报告 设计题目: 专业: 学生姓名: 学号: 起迄日期: 指导教师:

目录

信息工程系课程设计报告 第一部分:实训目的 21世纪是一~~~~~~~~~~~~~~~~~~~~~~~~~~。 第二部分:实训准备 通过一个学期的web网页设计课程的学习,我终于明白我们浏览的每个漂亮的网页是怎么做出来的,我也想自己亲手来做自己的个人网站。在做个人网站之前,我做以下准备:理清自己的思绪,想清楚自己的网站设计,做模板,找素材,进行站点的规划和素材、资料的收集,要按照制作网站的步骤一步一步来完成。 第三部分:实训要求 1、主题鲜明、内容充实;颜色清新、舒适、结构合理; 2、导航清楚、栏目合理、层次分明、使用方便 3、设计8至15个页面。内含:用户注册,登录系统,留言系统、统计在线人数,设为首页、加为收藏等动态网页内容。 第四部分:个人网站的总体规划和步骤 1.设计的思路 ! 2.网站的意义 3. 网站的总体风格。 4. 网站的分析与设计 设计一个个人网站,主要需要考虑两个方面的因素: 1.速度:反应出用户访问网站页面的速度。主页是经常被访问的页面,最好

课程设计题目 把每页的风格统一起来,例如:导航部分最好放在每页相同的位置,便于在每个页面中的跳转。 2.布局:是个人网站具有吸引力的根本所在,它主要说的是信息显示的视觉效果。 5.规划站点 站点规划是设计站点前的一个重要步骤。合理地规划站点对以后站点的设计甚至网站的制作会有事半功倍的效果。 5.1导航草图的制作有利于理清思路,避免在制作网站的过程中乱了方寸。如图4-1所示就是个人粉色网站的初始导航草图。 图4-1 导航图 在导航草图中,网站首页下面有6个二级网页。各网页主要内容如下: 首页:总述。

网页设计基础课程实验报告

实验一 1.实验体会 学会了使用关键字搜索相关内容和了解了WEB2.0的相关技术和服务概念,如AJAX、RSS、Tag、Wiki、Blog、SNS,学会如何从其他网站上下载JS、CSS、IMAGE等相关文件。发现.CSS所在的行都存在字符串“

简单的文字处理 代码: 这是一段文本
这是一段文本
©Microsoft® Windows 2007
A=a1+a2+a3
这是一段文本
这是一段文本
这是一段文本
文本 HTML中的超级链接代码: 简单文字处理
HTML中的超级链接 锚链接代码: A B C D E F G H I J K L M N

网页工作设计调研总结报告

网页设计调查报告 姓名:章稷坚 班级:艺设2班 学号:100802201 指导老师:葛书河

网页设计——网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子设计的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。 Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出,要点明确,我们将按照客户的要求,以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。 Web站点主页应具备的基本成分包括:页头:准确无误地标识你的站点和企业标志;Email 地址:用来接收用户垂询;联系信息:如普通邮件地址或电话;版权信息:声明版权所有者等。 网页设计作为一种视觉语言,特别讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相 近之处。 版式设计通过文字图形的空间组合,表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果,我们将反复推敲整体布局的合理性,使浏览者有一个流畅的视觉体验。 在网页设计中,总是有倾向的特定技术来观察,或跟踪的网页设计师加强的趋势。这里有专有和开源和免费的技术专用的支持者。然而,近年来,又增加自由和开放源码技术,包括由W3C和WHATWG进行监控和批准,监督和实施增加。 趋势可以发现,不仅在看在时尚领域的使用的技术,如网站和匹配的标志是清晰的喜好确定。著名的艺术字Web 2.0至今的重要作用的帮助。 网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典,经典只存在于是哪个首次成功创新性的应用。一个闭门造车者做出的东西,是远远赶不上综合借鉴者的。网页设计不同于其他艺术,在模仿加创新的网页设计领域当中,即便是完全自己设计的,也是沿用了人们已经认同的大部分用户习惯,而且这种沿袭的痕迹是非常明显的!还有哪个设计者敢腆着脸说,这都是我自己的原创设计?对于业界来说,经典只是个理念和象征! 不可否认,国内网页设计环境还停留在初级的认知阶段,也就是说,绝大多数人不知道网络的真正的可用之处,你去做一个业务的时候,不得不去做大量的说服教育工作。以乙方的身份去说服甲方,以专业角度去教育非专业认识,结果是可想而知的。也正是这种全体社会普遍的低认知水平,导致了大量网络垃圾的产生。 企业客户所在行业往往有其特定的设计需求,特别是对于企业网站建设当中的配色,除了应根据企业的VI标准色,以及客户自身的喜好进行配色分析外,同时不能忽略整个行业对于颜色上的‘惯例’。那么,企业网站在设计和制作当中,到底有哪一些配色规则需要设计师遵循呢? 企业客户在不同的发展阶段,对于网站设计的配色需求并不一样。在企业初创阶段,企业建站的目的是打造品牌网络形象,开拓客户资源,这时候的企业客户更多的是关注自身的个性化,如何才能凸显企业的特质,如何才能在行业当中

网页制作实验报告

网页制作实验报告 页制作实验报告 实验一:站点设置 一、实验目的及要求 本实例是经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域,同时接入国际互联。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装页三剑客(dreamweaver mx;flash mx;fireworks mx)等页设计软件; 三、实验原理 经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 四、实验办法与步骤 1)执行“站点\治理站点”命令,在弹出的“治理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中挑选“站点”命令。 2)在弹出的“站点定义为”对话框中单击“高级”选项卡。 3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中挑选所创建的站点文件夹。在“默认图象文件夹”文本框中挑选存放图象的文件夹,完成后单击“确定”按钮,返回“治理站点”对话框。 4)在“治理站点”对话框中单击“完成”按钮,站点创建完毕。 五、实验结果 六、讨论与结论 实验开始之前要先建立一具根文件夹,在实验的过程中把站点存在自己建的文件夹里,如此才干使实验条理化,别至于在实验后寻别到自己的站点。在实验过程中会浮现一些选项,计算机普通会有默认的挑选,最后别要去更改,假如要更改要先充分了解清晰该选项的含义,以及它会造成的效果,否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。 实验二:页面图像设置 一、实验目的及要求: 本实例的目的是设置页面的背景图像,并创建鼠标经过图像。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域,同时接入国际互联。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装页三剑客(dreamweaver mx;flash mx;fireworks mx)等页设计软件; 4、安装acdsee、photoshop等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 设置页面的背景图像,并创建鼠标经过图像。 四、实验办法与步骤 1) 在“页面属性”对话框中设置页面的背景图像。 2) 在页面文档中单击“”插入鼠标经过图像。 五、实验结果

网页制作实验报告6个实验

目录 实验一网页设计基础实验 (2) 实验二HTML语言应用 (4) 实验三CSS样式表的应用---CSS的引用 (10) 实验四Dreamweaver的使用、个人网站的制作 (13) 实验五用框架、模板设计网页 (15) 实验六表单制作 (19)

实验一网页设计基础实验 一、实验目的 1.掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点; 2.了解网页布局的形式。 3.用记事本编写一个简单的网页。 二、实验内容 1.上网访问实际若干电子商务网站,了解各网站的风格(主题图形形象、导航是否清晰,整体色调的搭配是否协调,主题是否突出等)。 2.在网上找出下列版面布局的结构形式: ⑴.“T”结构布局 1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人"看之无味"。 2."口"型布局。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。 3."三"型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。 4.对称对比布局。顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。 5.POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点,比如https://www.360docs.net/doc/ad18780261.html,。优点显而易见:漂亮吸引人 进入internet找到以上各种布局,并写出各种版面布局网站的域名和所采用的版面布局形式 找出使用大色块和抽象线条构图风格的网站(至少各2个);例:大色块主页 找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。 三、实验步骤与要求 1)新建一个记事本文件本在其中输入如下代码: 我的第一个网页

个人网站需求分析报告

个人网站需求分析报告 课程网页设计与制作 院系信息工程学院 专业计算机信息管理 班级信管二班 姓名柏贵黄 学号201427070217 2015 年12 月27 日

个人网站需求分析报告 一、引言 近年来,随着Internet的发展,网络技术的应用日益深化,网页制作,网站建设越来越流行,各种网页和网站的建设软件层出不穷。网页是互联网中展现信息的窗口,网页制作与设计是否精美、内容是否丰富、操作是否方便是吸引用户的主要因素。网页设计与制作是网络时代学习信息技术需要掌握的基本技能之一。 二、系统概述 使用Dream weaver软件制作个人网站,设计和实现一个简单的个人网站,网站主要内容是校园风景、校园简介、自己的一些照片、自己的家乡风景美食、收集的一些名言警句,人生格言及以前做过的网页作业等信息。 三、系统功能需求 *网站前台样式 网页中最上面有一个网页头Head,下面是导航栏,中间内容列出若干几条,使用JavaScript方法制作个人图片切换效果,制作来宾登录表单,以及插入网页动画。最下面是网页脚。 *网站后台 能够对导航栏连接子网页进行查看,网页能够链接外部CSS样式*网站期望达到的设计目标 网站内容丰富,网站导航栏每一条都能连接到其他网页显示,显示内容有首页、我的大学、我的相册、我的家乡、名言名句、我的作业。*网站整体设计风格 采用的设计风格是:简洁大方,稳重。

*配色方案 网站顶部和底部使用绿色,中间使用浅蓝色,字体采用宋体设计。*网站布局划分 (1)网站顶部 欢迎光临!快乐与你同在 (2)导航栏 首页|我的大学|我的相册|我的家乡|名言名句|我的作业 (3)网站底部 免责声明:本网站版权及网页内容归作者所有,仅供学习和参考四、个人网站设计结构图