导航:首页 > 万维百科 > 静态网页设计样例

静态网页设计样例

发布时间:2020-09-10 13:20:51

1、静态网页制作作业。要HTML的,简单点,不要太复杂,初学那种的。

<html>
<head>
    <style>
        html,body{margin:0px;text-align:center;}
        .main{width:1000px;margin:0px auto;padding-top:30px;}
        .title{font-size:18px;text-decoration:underline;font-weight:bold;}
        .formtable{width:100%;font-size:12px;margin-top:20px;}
        .lefttd{width:350px;text-align:right;}
        .righttd{text-align:left;}
        .etxt{width:300px;}
        .etel{width:200px;}
        .eta{width:320px;height:100px;}
.cinpt{text-align:center;padding-top:20px;}
    </style>
</head>
<body>
    <div class="main">
        <div><span class="title">请留下个人资料</span></div>
        <div>
            <table class="formtable">
                <tr><td class="lefttd">姓名:</td><td class="righttd"><input type="text" /></td></tr>
                <tr><td class="lefttd">E-mail:</td><td class="righttd"><input type="text" class="etxt" /></td></tr>
                <tr><td class="lefttd">电话:</td><td class="righttd"><input type="text" class="etel" /></td></tr>
                <tr><td class="lefttd">性别:</td><td class="righttd"><input type="radio" checked="checked" name="rd" />女 <input type="radio" checked="checked" name="rd" />男</td></tr>
                <tr><td class="lefttd">年龄:</td><td class="righttd"><select><option>20以下</option><option>20以上</option></select></td></tr>
                <tr><td class="lefttd">留言板:</td><td class="righttd"><textarea class="eta"></textarea></td></tr>
                <tr><td class="lefttd">您的爱好:</td><td class="righttd"><input type="checkbox" name="cb1" />运动 <input type="checkbox" name="cb2" />阅读 <input type="checkbox" name="cb2" />听音乐 <input type="checkbox" name="cb2" />旅游</td></tr>
<tr><td colspan="2" class="cinpt"><input type="button" value="提交" /></td></tr>
</table>
        </div>
    </div>
</body>
</html>


初学的,那上面这段代码应该可以了

2、怎样制作简单的静态的网页设计

你好。首先下载Dreamweaver.exe并打开,选择你使用的编辑语言,本案例用html
打开页面后,选着设计窗口,如图所示。设计窗口可以快速布局网页,不需要自己编辑代码。

打开你要设计的网页的设计图,本经验是百度经验首页为例,首先我们制作顶上的搜索条,点击插入—表格(如图所示)。打开表格属性编辑表格属性。插入1行和5列,表格宽度为1130,(即为网页的宽度),边距,间距分别为0,此表格只是为了定位,因此不设边框。

设置好表格后,可在表格里面插入你的内容,首先我们插入logo,点击插入—图像—选择你要插入的图片。点确定即可完成logo插入。表格的小大高度都可根据设计图需要调整,鼠标移到表格边框虚线即可拖拉调整高度或宽度。如图所示

接下来我们来做搜索框,点击插入—表单—插入文本域—确定。插入文本框后可点击文本框调整文本框的属性。根据设计图,文本框上班还要添加内容,因此,可选择单元格右击选择表格—拆分单元格,此处是需要添加一行的内容,因此拆分为两行,如图所示。

用同样的办法拆分上面的行,因为要添加10个选择项,因此拆分为10列(右击选中的行—拆分单元格—10列—确定)。拆分好后在小格里面添加文字内容即可。表格大小可根据步骤四调整。

接下来我们做搜索按钮,同样根据设计图要把表格拆分为两行。点击插入插入按钮的图片。

接下来给按钮添加链接,本次经验分享的是静态网页,因此在此先跟大家分享怎么直接添加按钮链接。同样是点击插入—添加超级链接,填写你事先做好的页面链接,或者其他网站链接。

剩下的内容都可根据方法步奏逐渐添加,调节细节即可完成你想要设计的网页。如图所示是上面步奏所做的静态页面,把所有做好的网页用超级链接链接起来即可做成一个简单的网站

另外我们还可以采用front page。也可以很容易的实现。
望采纳。

3、静态网页制作

方法/步骤

1、新建一个txt文本文档,先不要急着修改文件后缀名,有基础的朋友手动输入HTML代码,不会也没有关系,百度搜索“网页HTML代码”。
代码:
<!Doctype html>
<html>
<head>
<title>静态网页制作教程</title>
<meta charset="gbk" />
<link href="css.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
</body>
</html>

2、基础的静态网页代码写出来了,下面在<body></body>中间添加网页需要的数据内容(文字、图片、表格、视频等),然后将txt文本文档的后缀名.txt修改为.html。现在点击打开看看效果!小编在body中间加入的文字:静态网页制作教程。

3、这样的文字太单调了,需要用CSS样式定义,小编在桌面上新建一个文件夹“web”,把index.html文件放进去,然后在web文件件里面新建一个txt文本文档,修改为“css.css”。

4、使用鼠标右键“打开方式”,选择txt文本文档编辑css.css文件。用CSS定义网页字体大小12像素,网页背景色为红色,字体颜色为白色。
代码:
body{font-size:12px;background:red;color:white}
保存,然后打开web文件夹中的index.html文件,查看效果。

5、下面在web文件下面新建一个images文件夹,然后打开软件Fireworks,设计自己需要的图片(没有就去百度搜索自己需要的图片,使用QQ截图功能,截取自己需要的图片),把设计好的图片存入web文件夹下面的images文件夹里面。现在我们在body中放入图片,让图片在网页里面居中。
代码:
<div align="center">
<img src="images/pic.png" alt="logo" title="静态网页制作教程" />
</div>
把上面的代码放入index.html的body中,保存后打开看看效果!
小编在这里省略了表格和视频的制作,小伙伴不知道的话,可以百度搜索一下。
整个简单的静态网页制作完毕。

4、求一份静态网页设计的作业

你哪个学校的?如果我们不是一学校的,只要静态网页的话,我有。

刚看到你发问的时间,估摸着应该也用不着了。。。。

5、网页制作实例下载

网页制作三剑客经典实例158例 + PDG阅读器 V1.0b3 绿色版
由著名的多媒体软件公司Macromedia公司出品的、享有“网页制作三剑客”美誉的系列软件——中文版DreamWeaverMX、Firework MX和FlashMX,已经深刻地影响了人们制作网页、开发问站的工作方式。作为一个可视化的网页设计和网站管理工具,中文版DreamWeaverMX不仅支持最新的web技术,而且新增了许多强大的功能,极大地方便了用户的web创作。中文版Firework MX结合了位图处理软件Photoshop和矢量图处理软件CorelDRAW二者的优点,具有专业的网页图像优化功能,且能DreamWeaverMX天衣无缝地结合使其迅速成为流行的网页图像处理工具。利用中文版Firework MX,用户可以在一个专业化的环境中创建和编辑网页图形、进行动画处理、添加高级交互功能以及优化图像等。中文版FlashMX则是一款具有全新意义的网页动画制作软件,它提供了广泛的平台支持,不需要任何编程工作就能够制作出非常精彩的动画效果。中文版FlashMX具有简
单易学、开发效率高等特点,同时它生成的文件较小,特别适合于网络传输,因此在互联网上得到了十分广泛的应用。
本书共分四篇,包括158个经典实例,其中:
第一篇:中文版DreamWeaverMX实例。本篇通过40个实例讲解了中文版DreamWeaverMX的使用方法和技巧。读者通过这一篇的学习,可以对DreamWeaverMX有一个由浅入深的了解,定会对这一网页制作工具爱不释手。
第二篇:中文版Firework MX实例。本篇通过53个实例讲解了中文版Firework MX的使用方法和技巧。通过这些具体实例,能使广大读者迅速掌捏网页对象的制作与处理方法。
第三篇:中文版FlashMX实例。本篇通过如个实例讲解了中文版FlashMX的使用方法和技巧。读者完全可以按照本书中的操作步进行各种影片文件的具体制作,也可以将书中实例的制作技巧应用到其他场合。
第四篇;三剑客综合实例。本篇通过5个实例详细讲解了利用“网页制作三剑客”建设网站的思路和方法。通过综合实例的实战演练,相信读者的网页制作水平将会有质的提高。
本书将丰富的实例与相关的知识点紧密结合、语言通俗易懂、图文并茂,既可作为电脑网页制作培训班的教材,又可作为网页设爱好者的参考用书。本书由崔亚量主编,由于编者水平有限,疏漏和不足之处在所难免,恳请广大读者和专家批评指正。
具体内容:
第一篇 中文版DreamWeaverMX实例
经典第1例 文本编排
经典第2例 为文本创建超链接
经典第3例 图文混排
经典第4例 制作分隔线
经典第5例 插入和格式化表格
经典第6例 在页面中插入团片和动态按钮
经典第7例 为网页插入背景音乐
经典第8例 为图片创建热区
经典第9例 制作导航条
经典第10例 在贝面中使用框架
经典第11例 在页面中使用图层
经典第12例 制作和验证客户表单
经典第13例 变换图片效果
经典第14例 使用时间轴制作图层动面
经典第15 例 在页面中加入搜索引挚
经典第16例 制作Flash按钮和Flash文本
经典第17 例 插入Flash动画
经典第18例 使用“行为”面板
经典第19例 设置状态栏文本
经典第20例 制作下拉菜单
经典第21例 制作下拉菜单(二)
经典第22例 制作下捡菜单(三)
经典第23例 制作下拉菜单(四)
经典第24例 制作电子相册
经典第25例 CSS样式表(一)
经典第26例 CSS样式表(二)
经典第27例 CSS样式表(三)
经典第28例 制作外部祥式表
经典第29例 使用资源
经典第30例 制作库
经典第31例 制作授权
经典第32例 用模板
经典第33例 利用文件头实现网页自动刷新
经典第34例 使用JavaScript脚本制作树状菜单
经典第35例 使用JavaScript脚本制作时间显示
经典第36例 使用JavaScript脚本制作自动问候
经典第37例 使用JavaScript脚本制作图片随鼠标移动
经典第38例 使用JavaScript脚本制作页面裁入效果
经典第39例 站点的维护(一)
经典第40例 站点的维护(二)
第二篇 中文版Firework MX实例
经典第41例 编辑文字
经典第42例 文字环绕
经典第43例幼稚体
经典第44例水印字
经典第45例立体宇
经典第46例金届字
经典第47例浮雕字
经典第48例风格化文字
经典第49例幻影文字
经典第50例变形文字
经典第51例楼空文字
经典第52例闪烁文字
经典第53例镶边文字
经典第54例阴影文字
经典第55例旋转文字
经典第56例流动文字
经典第57例画像
经典第58例心形图案
经典第59例图形文字
经典第60例月牙
经典第61例立体阴影小球
经典第62例白云
经典第63例艺术相框
经典第64例邮票
经典第65例星光
经典第66例图片卷边效果
经典第67例简单按钮
经典第68例快速制作按钮
经典第69例胶囊式按钮
经典第70例星光技钮
经典第71例花瓣按钮
经典第72例按钮的热点链接
经典第73例利用按钮编辑器制作按钮
经典第74例文字移动
经典第75例文字曲线运动
经典第76例图片循环放映
经典第77例文字淡入淡出
经典第78例逐字显示动画
经典第79例礼花绽放动画
经典第80例电光掠影动画
经典第81例分身动画效果
经典第82例蒙版动画
经典第83例探照灯扫射效果
经典第84例晃动的文字
经典第85例转动的圆盘
经典第86例动态箭头
经典第87例晃动的木牌
经典第88例替换图
经典第89例自身翻转图
经典第90例简单动态按钮
经典第91例下拉菜单
经典第92例交互按钮
经典第93例交互网页
第三篇 中文版FlashMX实例
经典第94例直线运动的小球
经典第95例弹性球
经典第96例爆炸效果
经典第97例电影序幕
经典第98例文字的平面环绕效果
经典第99例旋转的风车
经典第100例残影效果
经典第101例放大镜效果
经典第102例雪花效果
经典第103例转动的透明球
经典第104例雷达扫描效果
经典第105例洋葱皮效果
经典第106例金鱼游动
经典第107例大雨(一)
经典第108例大雨(二)
经典第109例文字的缩放
经典第110例文字的淡入淡出
经典第111例图形问的变换
经典第112例打字机效果
经典第113例擦窗效果
经典第114例倒计时动画
经典第115例探照灯效果
经典第116例灯光照射效果
经典第117例螺旋效果
经典第118例旋转的三棱锥
经典第119例酷眩按钮
经典第120例缘来是我
经典第121例移形换影
经典第122例涟筋
经典第123例拖民文字
经典策124例蝶舞
经典第125例来点音乐吧
经典第126例音乐按钮
经典第127例中国足球
经典第128例交互性按钮
经典第129例加载动画
经典第130例鼠标施放效果
经典第131例动态URL按钮
经典第132例链盘控制小球移动
经典第133例弹出式菜单
经典第134例计数器
经典第135例一笔一划
经典第136例爆炸按钮
经典第137例输入输出文本
经典第138例下载进度条
经典第139例显示系统的时间
经典第140例随机运动的小球
经典第141例音量控制
经典第142例提交用户名和密码
经典第143例程序加载进度条
经典第144例狗抓老鼠
经典第145例遮罩效果
经典第146例文字效果
经典第147例自动跳开的台球
经典第148例随机数列
经典第149例获取键盘信息
经典第150例查询关键字
经典第151例奇钞的曲线
经典第152例组合图形
经典第153例阻尼跟随效果
第四篇 三剑客综合实例
实例154“北京风光”网站制作(一)
实例155“北京风光”网站制作(二)
实例156“北京风光”网站制作(三
实例157“青青心情”网站制作(一)
实例157“青青心情”网站制作(二)

下载地址http://soft.zozoto.cn/content/59901

6、静态网页制作实例啊,静态网页制作实例啊,谁有啊?

设计云免费静态网页制作实例就可以下载

7、html静态网页设计大作业

<html>
<head>
<style>
html,body{margin:0px;text-align:center;}
.main{width:1000px;margin:0px auto;padding-top:30px;}
.title{font-size:18px;text-decoration:underline;font-weight:bold;}
.formtable{width:100%;font-size:12px;margin-top:20px;}
.lefttd{width:350px;text-align:right;}
.righttd{text-align:left;}
.etxt{width:300px;}
.etel{width:200px;}
.eta{width:320px;height:100px;}
.cinpt{text-align:center;padding-top:20px;}
</style>
</head>
<body>
<div class="main">
<div><span class="title">请留下个人资料</span></div>
<div>
<table class="formtable">
<tr><td class="lefttd">姓名:</td><td class="righttd"><input type="text" /></td></tr>
<tr><td class="lefttd">E-mail:</td><td class="righttd"><input type="text" class="etxt" /></td></tr>
<tr><td class="lefttd">电话:</td><td class="righttd"><input type="text" class="etel" /></td></tr>
<tr><td class="lefttd">性别:</td><td class="righttd"><input type="radio" checked="checked" name="rd" />女 <input type="radio" checked="checked" name="rd" />男</td></tr>
<tr><td class="lefttd">年龄:</td><td class="righttd"><select><option>20以下</option><option>20以上</option></select></td></tr>
<tr><td class="lefttd">留言板:</td><td class="righttd"><textarea class="eta"></textarea></td></tr>
<tr><td class="lefttd">您的爱好:</td><td class="righttd"><input type="checkbox" name="cb1" />运动 <input type="checkbox" name="cb2" />阅读 <input type="checkbox" name="cb2" />听音乐 <input type="checkbox" name="cb2" />旅游</td></tr>
<tr><td colspan="2" class="cinpt"><input type="button" value="提交" /></td></tr>
</table>
</div>
</div>
</body>
</html>

8、静态网页设计

我把网上最主流的网页/网站制作工具都列出来了
其中第1、2是主要制作工具,后面的多是辅助工具
3、6是比较容易上手的

另外最简单的静态页面其实可以用word制作,保存成html就可以
你可以试试

1、FrontPage
FrontPage是一款优秀的网页制作与开发工具之一,它本身也是Office2000中的一个重要组件,采用了与Office2000其他组件一致的界面和操作方式,只要您使用过Office软件,就可以轻松掌握FrontPage的用法。
2、网页制作三剑客
Flash、Dreamweaver、Fireworks合在一起被称为网页制作三剑客。这三个软件相辅相承,是制作网页的首选工具,其中Dreamweaver主要用来制作网页文件,制作出来的网页兼容性好、制作效率也很高,Flash用来制作精美的网页动画,Fireworks用来处理网页中的图形。
3、Photoshop
Photoshop是Adobe公司的王牌产品,无论是在平面广告设计、室内装潢,还是处理个人数码照片方面,Photoshop都已经成为不可或缺的工具。在网页制作方面,它多姿多彩的滤镜和功能强大的选择工具可以做出各种各样的文字效果来。
4、Swishmax
Swish是一款非常方便的Flash文字特效制作工具,你只要点几下鼠标,就可以创造出形状、文字、按钮动画,你也可以选择内建的超过230种诸如爆炸、漩涡、3D旋转以及波浪等预设的动画效果。
5、PhotoImpact
PhotoImpact提供了多媒体时代专业影像设计者最直觉的创意空间、最方便的制作工具、及最宽广的表达形式,整合了新时代的3D物件及文字特效与粒子效果、压力笔支援、不同的自然笔触、各式直觉操作的特效图库、以及网页影像与办公室文件的相容性,将构思到表达的过程完整组合,是专业网页影像设计者不可或缺的利器。
6、Sound Forge
Sound Forge软件是一款非常棒的音效编辑软件,它除了音效编辑软件的功能外,还可以让你处理大量的音效转换的工作,使你能够轻松的完成各种看似复杂的音效编辑工作。如果下载的是英文版,可以用金山快译永久汉化,但效果不是很尽人意。
7、硕思闪客精灵
硕思闪客精灵是一款用于浏览和解析Flash动画的工具。它可以将.swf文件导出成.fla文件,还能将flash动画中的图片、矢量图、声音、视频(*.flv)、文字、按钮、影片片段、帧等基本元素完全分解,以及对动作脚本(ActionScript)进行解析,清楚的显示其动作代码,让你对Flash动画的构造一目了然。建议你赶快去下载吧!}
8、Clipyard
你只要导入不同的Flash动画文件,将其放在不同的层上,经调试效果,导出后就成了一个单独的flash了,操作简单,特别适合于将自己喜欢的Flash动画加入祝福、签名后赠送友人。
9、FlashFXP
是一款优秀的FTP工具,特别适合Web站点管理员使用。支持文件夹(带子文件夹)的文件传送、删除;支持上传、下载及第三方文件续传;可以跳过指定的文件类型,只传送需要的文件;可以自定义不同文件类型的显示颜色;可以缓存远端文件夹列表,支持FTP代理;具有避免空闲功能,防止被站点踢出;可以显示或隐藏“隐藏”属性的文件、文件夹;支持每个站点使用被动模式等。
10、FlaX
FlaX是一款制作Flash文字特效的小巧软件。在以前若要制作文字绕圆圈的动画,在Flash里一个一个字的慢慢调整位置,颇费时间,如果使用FlaX很快就可以就搞定。 FlaX有四个窗口面板:预览窗口、影片属性面板、文字属性面板、特效属性面板。
11、Web Animator
Web Animator(网页动画设计)是HomePage Builder附带的创建动画GIF的程序。所谓动画GIF是GIF格式图像文件的一种,组合几个图像象漫画一样连续运动。动画GIF与普通的GIF图像一样可以粘贴到页面。使用Web Animator可以完成如下工作:组合现有的图像,创建类似于漫画的动画;给一个图像添加动画效果,创建具有效果的动画;给指定的字符串添加动画效果,创建字符动画。
12.golive
Adobe收购mm之后推出的网页制作工具,将代替Dreamweaver成为主流.
满意请采纳。

9、简单的静态网页设计

您好,说简单也不简单,如果你肯花时间的话,那总会学会,你可以去比较好的设计公司拿里看看他们的实例是怎么做的,你就知道是什么程度了,你可以去BBD公司看看,能帮到你的忙。
有种最简单的方法,最多十分钟就搞定一页:一,用DW软件,打开-插入-表格-(这里您已经有了要作一个什么样网页的大致想法)几行,几列。宽度要在1000为好,这样下面就会出现一个导航条,边界设置为0。如:插入表格为1行3列-确定。在用鼠标点击第一空格,插入-图片,寻找您要插入图片的位置,确定(或保存),然后在用鼠标点击第二个空格,插入。。。。等。以此类推。然后再用鼠标点击您刚才插入表格的下沿。重复您刚才的动作——插入-表格。几行几列要根据您对页面的构思而定。如果要在空格里插入文章,一定要把文章的格式转换成纯Word文档,后缀为.doc。

与静态网页设计样例相关的知识