实验四：网页设计与制作
实验目的
1. 掌握HTML和CSS的基本用法。
2. 理解网页布局的基本原则。
3. 熟悉使用开发者工具调试网页。
4. 学会发布网页到网络服务器。
实验内容
本实验将通过创建一个简单的个人简介网页，帮助你掌握前端网页设计与制作的基本技能。
实验步骤
1. 环境准备
- 安装文本编辑器（如VS Code、Sublime Text等）
- 浏览器（如Chrome、Firefox）
2. 创建HTML文件
在文本编辑器中创建一个新的HTML文件，命名为`index.html`，并输入以下基本结构：
html
我是一名网页设计爱好者，喜欢编写代码，创造美丽的网页。
电子邮箱：example@example.com
© 2023 个人主页. All rights reserved.
3. 创建CSS文件
在同一目录下创建一个名为`styles.css`的CSS文件，并添加以下样式：
css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #35424a;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav a {
color: #35424a;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background: #35424a;
color: #ffffff;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
4. 预览网页
- 用浏览器打开`index.html`文件，检查网页效果。
- 确保各个部分都能正常显示，链接有效。
5. 调试与优化
- 使用浏览器的开发者工具（F12或右键选择“检查”）查看DOM结构和CSS样式，进行必要的调试。
- 根据需求进一步美化网页样式。
6. 发布网页
- 注册一个免费的GitHub账号并创建一个新的仓库。
- 将你的`index.html`和`styles.css`文件上传到该仓库。
- 在仓库设置中启用GitHub Pages功能。
- 访问你的个人网页链接，分享给同学和朋友。
实验总结
通过本次实验，你应该掌握了基本的网页制作流程，包括HTML的基本结构、CSS的样式设置以及网页的调试与发布。继续探索更多的HTML标签和CSS样式，可以进一步提升你的网页设计水平。
注意事项
- 保持代码的整洁和注释，以便日后维护。
- 在发布之前，确保没有错误，并且所有链接都是有效的。
- 多尝试不同的布局和样式，使网页更加独特和个性化。
查看详情
查看详情
