大学生网页设计作业——制作网页-初学者入门HTML+CSS

如何制作网页

如何制作网页?如何做一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然。比较复杂的网站就需要很多技术上面的知识咯。比如javascrpt、jquery、ajax、flash等等!这些都只是让网站的页面好看。使静态的网站变为动态的。那如何制作个简单的网页呢?那么先用Dreamweaver ,Frontpage做,然后细节用Homesite,Hotdog修改,图片用Photoshop动画用fireworks ,Adobe ImageReady ,Flash然后申请空间,域名,大多数都是收费的,最后用软件上传就成了。

在开始制作之前,我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。

1.网页顶端的标题“我的主页”是一段文字。

2.网页中间是一幅图片。 □最下端的欢迎词是一段文字。

3.网页背景是一深紫红颜色。 构思好这个网页的结构,我们就可以开始制作了。

1

解决方法与步骤:

1.首先启动Dreamweaver,确保你已经用站点管理器建立好了一个网站(根目录)。 为了制作方便,请您事先打开资源管理器,把要使用的图片收集到网站目录images文件夹内。

2

2.然后在创建新项目下面点击HTML,下面常用到的有javascrpt,和CSS样式。

3.进入页面编辑设计视图状态。在一般情况下,编辑器默认左对齐,光标在左上角闪烁,光标位置就是插入点的位置。如果要想让文字居中插入,点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧,我们可以对它进行设置。

2

4.使用插入栏:单击插入栏对象按钮>选按钮,弹出“选择图像源文件”对话框,其余操作同上。

5.使用面板组“资源”面板(如下图):点按钮,展开根目录的图片文件夹,选定该文件,用鼠标拖动至工作区合适位置。

6.在图片右边空白处单击,回车换行。仍然按照上述方法,输入文字“欢迎您„„”然后,利用属性面板对文字进行设置。保存页面。 一个简单的页面就这样编辑完毕了。

5

7.在页面编辑器中按F12预览网页效果。 网站中的第一页,也就是首页,我们通常在存盘时取名为index.htm。

6

在很多时候,我们都需要html的静态页面代码,那么我们介绍一下静态页面的代码。

:静态网页源代码首尾结构标记,代码内呈现网页所有内容

=背景色;:网页主体部分

:标签内显示出网页台头的标题名,用于标签之内

:设定搜索关键字

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的演唱会网页设计,使用HTMLCSS: ```html <!DOCTYPE html> <html> <head> <title>演唱会</title> <style> body { background-color: #f2f2f2; } header { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 30px; } nav { background-color: #ccc; padding: 10px; text-align: center; font-size: 20px; } nav a { color: black; text-decoration: none; margin: 20px; } section { margin: 20px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 5px 5px 5px #888888; } h1 { font-size: 25px; } p { font-size: 20px; line-height: 1.5; } img { width: 100%; height: auto; } footer { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 15px; position: fixed; bottom: 0; left: 0; right: 0; } </style> </head> <body> <header> <h1>演唱会</h1> </header> <nav> <a href="#">主页</a> <a href="#">演出阵容</a> <a href="#">票务信息</a> <a href="#">场馆地图</a> <a href="#">联系我们</a> </nav> <section> <h1>演出阵容</h1> <p>本次演唱会邀请了众多知名歌手和乐队参加,包括:</p> <ul> <li>张三</li> <li>李四</li> <li>王五</li> <li>赵六</li> <li>乐队A</li> <li>乐队B</li> </ul> <p>他们将带来精彩的表演,让你感受到音乐的魅力!</p> </section> <section> <h1>票务信息</h1> <p>本次演唱会的票务信息如下:</p> <table> <tr> <th>票种</th> <th>价格</th> <th>数量</th> </tr> <tr> <td>普通票</td> <td>100元</td> <td>1000张</td> </tr> <tr> <td>VIP票</td> <td>500元</td> <td>200张</td> </tr> </table> <p>你可以在以下地点购买门票:</p> <ul> <li>售票网站A</li> <li>售票网站B</li> <li>现场售票</li> </ul> </section> <section> <h1>场馆地图</h1> <img src="map.png" alt="场馆地图"> </section> <footer> <p>版权所有 © 2021 演唱会公司</p> </footer> </body> </html> ``` 说明: - 使用`<header>`标签表示页面顶部,包括标题和logo等信息; - 使用`<nav>`标签表示导航栏,包括各个页面链接; - 使用`<section>`标签表示内容区域,包括演出阵容、票务信息和场馆地图等; - 使用CSS样式对页面进行美化,包括背景颜色、字体大小、边框和阴影等; - 使用表格和列表展示票务信息和购票地点; - 使用`<img>`标签展示场馆地图,并设置图片的宽度自适应; - 使用`<footer>`标签表示页面底部,包括版权信息和公司地址等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值