web网页制作模板.docx

web网页制作模板.docx

《web网页制作模板.docx》由会员分享，可在线阅读，更多相关《web网页制作模板.docx（8页珍藏版）》请在冰豆网上搜索。

web网页制作模板

竭诚为您提供优质文档/双击可除

web网页制作模板

　　篇一：

web网站设计报告书

　　web网站设计报告书

　　设计

　　年级

　　姓名

　　所在学年第1学期题目：

web网站设计报告专业：

学号：

学院：

　　目录

　　一、设计目的................................................2

　　二、设计题目................................................3

　　三、结构设计................................................3

　　四、技术分析................................................3

　　五、设计风格................................................7

　　一、设计目的

　　在internet飞速发展的今天，人们已经无法离开网络，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此网站建设在internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

我们当代大学生更是离不开网络给我们带来的好

　　处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢我们已经学了web这门课，就可以通过设计达到掌握网页设计、制作的技巧。

　　了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

　　熟练掌握photoshoto等软件的的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

学会和团队配合，逐渐培养做一个完整项目的能力。

　　二、设计题目

　　《篮球球迷交流网》

　　主要是篮球新闻、视频，还有交流帖子区，交易广告平台等。

　　三、结构设计

　　选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。

首先，做好需求调研。

调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。

　　然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。

　　我的设计主题是篮球球迷交流网，包括多个方面，框架为：

　　首先是首页，首页下是新闻、视频、论坛、比赛、交易，从分栏都可以回到首页。

首页主要分为新闻头条、热门话题区、热门比赛预告、靓图展示。

　　链接到新闻板块，则是各种与篮球有关的新闻；视频则是各种网友发布的片段，包括十佳球、比赛集锦和采访视频等；论坛就是大家发贴的地方；比赛区里包括比赛赛程和球员排行榜（主要是nba）；交易区则是球迷联系交易装备的平台，球迷可以发贴介绍自己的新品或二手篮球相关装备（篮球、球鞋、球衣和护腕等），然后互相留下联系信息，之后通过淘宝等交易，其实就是起到广告的作用。

　　四、技术分析

　　web技术主要分为客户端和服务器技术。

　　web客户端设计技术主要包括：

html语言、javaapplets、脚本程序、css、dhtml、插件技术以及VRml技术。

　　web服务器端的开发技术也是由静态向动态逐渐发展、完善起来的。

web服务器技术主要包括服务器、cgi、php、asp、、servlet和jsp技术。

　　基本的用得到的基础技术如下：

（一）建立布局

　　在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。

dreamweavercs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。

特别是其在布局方面的出色表现，更受青睐。

大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。

　　1.点击“alt+F6”键，进入布局模式，插入布局表格。

建立一个大概的布局。

　　2.使用背景图片：

选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。

（二）网页中的图像

　　图像传输是www的真正魅力所在，它与文字相比具有显著的优点：

一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。

正是由于这些优点，所以在进行网页设计时图像很受欢迎。

如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。

图像文件的格式有几十种，如giF、jpeg、bmp、eps、pcx、png、Fas、tga、tiFF、wmF等，现在internetexplorer和netscape支持的、最常用的图像格式是giF、jpeg和bmp。

（1）在网页中插入图像

　　利用dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。

在网页中加入图像的操作非常简单：

　　1.新建一个空白网页，把光标定位在网页的开始位置。

　　2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。

　　3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。

　　4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。

在网页中插入图像后我们就可以对图像的各种属性进行设置了。

（2）图像的各种属性设置

　　1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.

　　2.打开“外观”选项卡。

（1）设定图像边框粗细：

在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

（2）设置图像环绕方式：

一般情况下一幅图像只能与一行文字处在同一高度，但（web网页制作模板）有时需要将图像和文字分开，且两者互不影响。

比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。

在网页中图像的环绕方式有两种：

　　①左环绕：

图像在左边，文本在图像的右边进行环绕。

　　②右环绕：

图像在右边，文本在图像的左边进行环绕。

　　在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。

　　（3）编辑图像大小：

在dreamweavercs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。

调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。

　　（4）设置图像缩放比例：

网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。

设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。

设置图像缩放比例的步骤如下：

　　1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.

　　篇二：

web页面制作规范

　　web页面制作规范

　　1.文件夹命名及层级规则

　　1.1.站点样式

　　文件夹层级格式

　　css文件规则：

　　1.通用css：

common.css（网站通用的一些css样式文件）。

　　2.单独css：

单独页面或模块的一些css样式需新建css文件。

（例如：

Register.aspx为用户注册页面，可写独立的css样式，命名规则为页面名称.css，如：

Register.css）。

　　3.图片统一放在images文件夹中,图片文件尽量规范命名，例如：

　　4.按钮:

btn_数字.png例如：

btn_01.png

　　5.其它栏目的图片：

以栏目名的第一个字母_****.gif

　　6.产品与栏目热点图片：

pic_数字.gif例如：

pic_001.gif

　　7.小图标：

ico_数字.png例如：

ico_001.png

　　页面排版：

　　1.使用diV+css布局进行页面排版编写。

　　2.有涉及到动态程序数据的模块，尽量不要限制模块（div、ul等标签）的高度,属性height设置为auto，同时有背景图片样式的模块需保证背景图片样式的可伸缩性。

主要目的避免动态程序套用后使页面样式变形的情况。

　　3.标签需按层级来缩进，可提高阅读和维护效率。

　　2.页面建设

　　2.1.建设规范

　　1.网站建设简洁、大方、美观，架构层次清晰。

　　2.样式代码与页面的代码必须分开，采用外部样式调用，减少页面的无关代码。

3.浏览器的兼容，要求至少要兼容ie浏览器以及火狐浏览，谷歌的chRome浏览器。

　　4.设计页面面包屑导航，以便用户的查看点击以及搜索引擎的抓取。

　　5.格式统一，在固定位置出现。

　　6.尽量保证在所有页面出现。

　　7.当前页面标题没有链接。

　　8.网站导航最好以文本形式展示。

　　9.网站中出现的板块标题等文字尽量以文本形式展示，不以图片形式展示。

　　10.网站建设需要与提供的模版站有较多不同。

背景风格样式必须重新设计，模版站仅是参考，设计者可融入自己的想法调整设计，设计的板块需要确实是我司程序可完成的功能板块。

　　11.图片选取与链接：

图片选取与需求提供业务相关，选取图片有质感，较能吸引客户；链接地址与图片展示业务对应。

　　12.图片文件命名：

本地图片的文件命名最好与图片相关，有实际内容，而不是随意的字母或数字。

　　13.标签的使用：

　　首页正文中出现网站主题相关的关键词适当添加strong标签（关键词多的情况下，不需要全部设置标签，一般出现在最前面的关键词设置，其后出现的选择性设置）；

　　lt标签的使用，当页面出现图片时应该给图片设置alt属性值，以便搜索引擎抓取的时候能够知道图片的相关主题；

　　h1标签的使用，一个网站包含多个板块内容，要求每个板块的标题必须以h1样式展现，这样能够使页面的结构分明同时告诉搜索引擎优先抓取h1的内容；

　　篇三：

网站模板制作工具

　　网站模板制作工具

　　-天互数据

　　网站模板

　　网站模板在这里指的是网站页面模板，是当网站中有许多页面版式色彩相同的情况下，将其定义为网页模板，并定义其中部分可编辑，部分不可编辑，那么在利用网页模板制作其他页面时就会很方便，不易出错。

这里我们称为普通网页模板。

网站模板就是已经做好的网页框架，使用网页编辑软件将模板原有的图片和文字替换成自己的内容，再发布到自己的网站。

一般按以下步骤进行网页模板的制作1、要沉稳，不要花里胡哨。

2、要素净、大气，不要五彩缤纷。

　　3、要有个性、有风格，要突出行业的特点。

　　网站模板制作工具

　　网络技术的发展带动了软件业的发展，所以用于制作web页面的工具软件也越来越丰富。

从最基本的html编辑器到现在非常流行的Flash互动网页制作工具，各种各样的web页面制作工具，下面是几款具有代表性的网页制作器：

　　1.html编辑器。

虽然html代码复杂，编辑和调试要花费大量的时间，但因html的稳定性、广泛支持性及可创建复杂的页面效果，仍受高级网页制作人员的青睐。

就目前来说，有众多的编辑器供选择，这些编辑器广泛支持复杂页面创建及高级html规范，使用较为普遍的有hotdog等专业html编辑器。

　　2.所见即所得的网页编辑器。

其中以microsoftFrontpage为代表，它具有如word一样的操作界面，熟知word功能的操作者，只要稍加培训就能轻松编制网页。

而且，Frontpage还能解析网页的html源代码，并提供了预览支持。

但Frontpage的一些特殊显示功能并不能在其它非ie浏览器下实现。

所以Frontpage是一款非常适合初、中级网页制作人员使用的工具软件。

　　3.现在非常流行的macromedia公司（已被adobe公司收购）出品的Flash互动网页制作工具。

这是一款功能非常强大的交互式矢量多媒体网页制作工具。

能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，也比jaVa小巧精悍！

但它的动画效果、互动效果、多媒体效果十分出色。

而且还可以在Flash动画中封装mp3音乐、填写表单等；并且由于Flash编制的网页文件比普通网页文件要小得多，所以大大加快了浏览速度。

这是一款十分适合动态web制作的工具。

　　4.dreamweaver:

dreamweaver是美国macRomedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

　　另外，个人网站制作者还需了解w3c的html4.0规范、css层叠样式表的基本知识、javascript、Vbscript的基本知识。

对于常用的一些脚本程序如asp、cgi、php也要有适当了解，还要熟练使用图形处理工具和动画制作工具以及矢量绘图工具，并能部分了解多种图形图像动画工具的基本用法，熟练使用Ftp工具以及拥有相应的软硬件和网络知识也是必备的。

当

　　然，互联网还是一个免费的资料库。

编制网页需要多种多样的按钮、背景还有各种各样图形、图片。

如果这些都要靠自己完成，既浪费时间又浪费金钱，而且还需要强大的图形、图片制作技术。

所以，为了省却这些麻烦，网站制作者完全可以从网上下载各种精美实用的图片、按钮、背景等网页素材。